/* Magic Village branding. Screen only; retain the original top bar and print layouts. */
@media screen {
    #header.navbar, #header .header-nav { background: #af2864 !important; }
    :root {
        --mv-pink: #ec5b9b; --mv-pink-dark: #af2864;
        --mv-cyan: #29c3da; --mv-teal: #087d90; --mv-teal-dark: #075768;
        --mv-gold: #ffc45c; --mv-ink: #243e49; --mv-muted: #59717b;
        --mv-line: #d7e8ec; --mv-canvas: #f3fafb;
    }
    body { color: var(--mv-ink); background: var(--mv-canvas); }
    body:before, #sidebar-left { background: var(--mv-teal-dark); }
    #content { background: var(--mv-canvas); }
    a, .text-primary { color: var(--mv-teal); }
    a:hover, a:focus { color: var(--mv-pink-dark); }
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
        outline: 3px solid var(--mv-pink); outline-offset: 2px;
    }
    #sidebar-left .main-menu li > a { color: #e9fafd; background: var(--mv-teal-dark); border-bottom-color: #196b7b; }
    #sidebar-left .main-menu li li > a { background: #064b5b; }
    #sidebar-left .main-menu li > a:hover, #sidebar-left .main-menu li > a:focus { color: #fff; background: #08788b; }
    #sidebar-left .main-menu li.active > a, #sidebar-left .main-menu li > a.active {
        color: #fff; background: var(--mv-pink-dark); box-shadow: inset 4px 0 var(--mv-gold);
    }
    #sidebar-left .main-menu li > a > i { background: transparent; }
    .breadcrumb { background: #e7f5f7; border-bottom: 1px solid var(--mv-line); }
    .box, .panel, .modal-content { border: 1px solid var(--mv-line); border-radius: 8px; box-shadow: 0 4px 16px rgba(7,87,104,.06); }
    .box .box-header, .panel-default > .panel-heading, .modal-header {
        color: var(--mv-teal-dark); background: #f0fbfc; border-bottom: 1px solid var(--mv-line); border-radius: 8px 8px 0 0;
    }
    .box .box-header h2 i { color: var(--mv-teal); border-color: var(--mv-line); }
    .box .box-content, .panel-body, .modal-content { background-color: #fff; }
    .modal-footer { background: #f7fbfc; border-color: var(--mv-line); border-radius: 0 0 8px 8px; }
    .btn { border-radius: 5px; text-shadow: none; }
    .btn-primary, .btn-info { color: #fff; background: var(--mv-teal); border-color: var(--mv-teal); }
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
    .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
        color: #fff; background: var(--mv-teal-dark); border-color: var(--mv-teal-dark);
    }
    .btn-default { color: var(--mv-teal-dark); background: #fff; border-color: #b9d9e0; }
    .btn-default:hover, .btn-default:focus { color: var(--mv-teal-dark); background: #e5f8fb; border-color: var(--mv-cyan); }
    .btn-warning { color: #62400b; background: var(--mv-gold); border-color: #efb046; }
    .btn-warning:hover, .btn-warning:focus { color: #513306; background: #f1b044; border-color: #d89c31; }
    .btn-success { background: #21835d; border-color: #21835d; }
    .btn-danger { background: #bd354f; border-color: #bd354f; }
    .bblue:not(:where(#header .bblue)), .blightBlue:not(:where(#header .blightBlue)), .bg-primary, .progress-bar { background: var(--mv-teal) !important; color: #fff; }
    .bpink:not(:where(#header .bpink)) { background: var(--mv-pink-dark) !important; color: #fff; }
    .form-control, .select2-container .select2-choice, .select2-container-multi .select2-choices {
        border-color: #bfd9df; border-radius: 5px; color: var(--mv-ink); background-color: #fff;
    }
    .form-control:focus, .select2-container-active .select2-choice, .select2-dropdown-open .select2-choice {
        border-color: var(--mv-cyan); box-shadow: 0 0 0 3px rgba(41,195,218,.16);
    }
    .input-group-addon { color: var(--mv-teal-dark); background: #edf8fa; border-color: #bfd9df; }
    .select2-results .select2-highlighted, .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus, .ui-autocomplete .ui-state-focus { background: #e5f8fb; color: var(--mv-teal-dark); }
    .table thead th { background: #edf8fa; color: var(--mv-teal-dark); border-color: var(--mv-line); }
    .table-striped > tbody > tr:nth-child(odd) > td { background-color: #f6fbfc; }
    .table-hover > tbody > tr:hover > td { background-color: #e8f7fa; }
    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--mv-teal); border-color: var(--mv-teal); color: #fff; }
    .pagination > li > a { color: var(--mv-teal); }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--mv-pink-dark); border-top: 3px solid var(--mv-pink); }
    body.login-page, .login-page .page-back {
        background: radial-gradient(ellipse at 8% 12%, #fce3ef 0%, transparent 55%),
                    radial-gradient(ellipse at 92% 85%, #d4f5fa 0%, transparent 55%),
                    radial-gradient(ellipse at 90% 8%, #fff5e3 0%, transparent 42%),
                    linear-gradient(135deg, #fff7fb 0%, #f8fcfd 50%, #edfbfd 100%) !important;
        color: var(--mv-ink);
    }
    .login-page .login-content, .login-page .reg-content {
        border: 1px solid var(--mv-line); border-top: 4px solid var(--mv-pink); border-radius: 12px; box-shadow: 0 12px 35px rgba(7,87,104,.12);
    }
    .login-page .page-back > .text-center img { max-width: min(300px, 85vw); height: auto; }
    .login-page .login-form-links { background: transparent; color: var(--mv-muted); }
    .login-page .btn, .login-page .form-control { border-radius: 5px !important; }
    .login-page .btn-success { background: var(--mv-pink-dark); border-color: var(--mv-pink-dark); }
    .login-page .btn-success:hover, .login-page .btn-success:focus { background: #912051; border-color: #912051; }
    #pos #leftdiv, #pos #cp #cpinner { background: #fff; border: 1px solid var(--mv-line); border-radius: 8px; box-shadow: 0 4px 16px rgba(7,87,104,.06); }
    #pos #catContainer { background: #e5f8fb; box-shadow: none; border: 1px solid var(--mv-line); }
    #pos .btn-prni { background: #fff; color: var(--mv-ink); border-color: var(--mv-line); border-radius: 7px; }
    #pos .btn-prni:hover, #pos .btn-prni.active { background: #e5f8fb; border-color: var(--mv-teal); }
    #pos #totalTable { background: #f0fbfc; color: var(--mv-teal-dark); }
    #pos #gtotal { color: var(--mv-pink-dark); font-weight: 700; }
    #pos #payment { background: var(--mv-pink-dark); border-color: var(--mv-pink-dark); color: #fff; font-weight: 700; }
    #pos #payment:hover, #pos #payment:focus { background: #912051; border-color: #912051; }
    #pos #suspend { background: var(--mv-gold); color: #62400b; border-color: #efb046; }
    #pos .quick-cash .btn { border-radius: 5px; }
    #category-slider, #subcategory-slider, #brands-slider { background: #f0fbfc; border-color: var(--mv-line); }
    /* Stronger field and section contrast for the cashier workspace, including dialogs. */
    body.mv-pos-screen, .mv-pos-screen #content { background: #dce9ed; color: #172f39; }
    html:has(body.mv-pos-screen) { overflow-y: auto; }
    body.mv-pos-screen { width: 100% !important; min-width: 0; max-width: 100%; }
    .mv-pos-screen #wrapper, .mv-pos-screen #content, .mv-pos-screen .c1,
    .mv-pos-screen .pos, .mv-pos-screen #pos { min-width: 0; max-width: 100%; }
    .mv-pos-screen .container { width: 100% !important; max-width: 100%; }
    .mv-pos-screen #header .header-nav { min-width: 0; max-width: 100%; }
    .mv-pos-screen #header .container { display: flex; flex-wrap: wrap; align-items: center; }
    .mv-pos-screen #header .container:before, .mv-pos-screen #header .container:after { display: none; }
    .mv-pos-screen #header .header-nav { flex: 1 1 600px; }
    .mv-pos-screen #header .navbar-nav { display: flex; flex-wrap: wrap; }
    .mv-pos-screen #pos #leftdiv { width: 100%; max-width: 100%; min-width: 0; float: none; }
    .mv-pos-screen #pos-sale-form { height: auto; min-width: 0; }
    .mv-pos-screen #pos #cp #cpinner { min-width: 0; max-width: 100%; margin-left: 0; }
    .mv-pos-screen #item-list { overflow-y: auto; }
    .mv-pos-screen #category-slider, .mv-pos-screen #subcategory-slider, .mv-pos-screen #brands-slider {
        position: fixed; top: 55px; width: min(540px, 100%); height: calc(100dvh - 65px); max-height: calc(100vh - 65px);
    }
    .mv-pos-screen #category-list, .mv-pos-screen #subcategory-list, .mv-pos-screen #brands-list {
        position: relative; max-height: 100%; overflow-y: auto;
    }
    .mv-pos-screen .modal-dialog { width: auto; max-width: 900px; margin: 15px; }
    .mv-pos-screen .modal-sm { max-width: 300px; margin-inline: auto; }
    @media (max-width: 767px) {
        .mv-pos-screen #content { padding: 8px; }
        .mv-pos-screen #header .header-nav { flex-basis: 100%; }
        .mv-pos-screen #posTable { table-layout: fixed; width: 100%; }
        .mv-pos-screen #posTable th, .mv-pos-screen #posTable td { overflow-wrap: anywhere; padding: 4px 2px; }
        .mv-pos-screen #posTable input { min-width: 0; max-width: 100%; }
        .mv-pos-screen .btn-cat-con { position: static; transform: none; width: 100%; height: auto; flex-wrap: wrap; gap: 4px; padding: 8px; }
        .mv-pos-screen #pos .btn-prni { min-width: 80px; width: 30%; max-width: 30%; }
        .mv-pos-screen #pos .btn-prni span { min-width: 0; width: auto; max-width: 100%; }
        .mv-pos-screen .modal-dialog .col-sm-9, .mv-pos-screen .modal-dialog .col-sm-3 { float: none; width: 100%; }
    }
    .mv-pos-screen #pos #leftdiv, .mv-pos-screen #pos #cp #cpinner { border-color: #7899a4; }
    .mv-pos-screen label, .mv-pos-screen #coupon-status { color: #253f49; font-weight: 600; }
    .mv-pos-screen .form-control,
    .mv-pos-screen .select2-container .select2-choice,
    .mv-pos-screen .select2-container-multi .select2-choices {
        color: #172f39; background: #fff; border: 1px solid #617f8b; box-shadow: inset 0 1px 2px rgba(23,47,57,.08);
    }
    .mv-pos-screen .form-control::placeholder,
    .mv-pos-screen .select2-container .select2-default { color: #465f6a !important; opacity: 1; }
    .mv-pos-screen .form-control:focus,
    .mv-pos-screen .select2-container-active .select2-choice {
        border-color: #af2864; outline: 2px solid #af2864; outline-offset: 1px;
    }
    .mv-pos-screen .form-control[disabled], .mv-pos-screen .form-control[readonly] { background: #e3eaed; color: #354c56; }
    .mv-pos-screen .input-group-addon,
    .mv-pos-screen .select2-container .select2-choice .select2-arrow { background: #d3e9ee; color: #075768; border-color: #617f8b; }
    .mv-pos-screen #pos .table thead th { background: #075768; color: #fff; border-color: #457d89; }
    .mv-pos-screen #pos .table td { color: #172f39; border-color: #9eb6bf; }
    .mv-pos-screen #pos .table-striped > tbody > tr:nth-child(odd) > td { background: #e5eff2; }
    .mv-pos-screen #pos #totalTable { background: #deedf1 !important; color: #172f39 !important; }
    .mv-pos-screen #pos #totalTable td { border-color: #9eb6bf; }
    .mv-pos-screen #pos #totalTable tr:last-child td { background: #075768 !important; color: #fff !important; }
    .mv-pos-screen #pos #gtotal { color: #fff; font-size: 18px; }
    .mv-pos-screen #pos #catContainer { background: #bfdfe7; border-color: #7899a4; }
    .mv-pos-screen #pos .btn-prni { color: #172f39; border-color: #7899a4; }
    .mv-pos-screen #pos .btn-prni:hover, .mv-pos-screen #pos .btn-prni.active { background: #c8eaf0; border-color: #075768; }
    .mv-pos-screen .btn-default { color: #075768; border-color: #617f8b; }
    .flex-center .content { padding: 30px; max-width: 100%; }
    .flex-center .title { color: var(--mv-teal-dark); font-size: clamp(32px,6vw,72px); font-weight: 600; }
    .flex-center .links a { color: var(--mv-teal); }
    .mv-public-logo { display: block; width: 300px; max-width: 85%; height: auto; margin: 0 auto 28px; }
    .mv-promotions { padding: 24px; background: linear-gradient(135deg,#fce3ef,#e5f8fb); }
    .mv-promotion-image { max-width: 100%; height: auto; border-radius: 12px; }
    @media (max-width: 767px) { .login-page .page-back { padding: 28px 12px; } }
}