:root{--gold:#c9a23b;--dark:#101010;--soft:#f6f6f6}body{background:#f7f7f8;color:#171717}.login-bg{background:radial-gradient(circle at top,#fff 0,#f5f0e4 45%,#eee 100%)}.login-card{border-radius:22px}.logo{max-width:230px;height:auto}.btn-gold{background:var(--gold);color:#111;font-weight:700}.btn-gold:hover{background:#b8902e}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;background:#0e0e0e;color:#fff;padding:22px 14px;overflow:auto}.side-logo{width:190px;display:block;margin:0 auto 28px}.sidebar nav a{display:flex;gap:12px;align-items:center;color:#bbb;text-decoration:none;padding:12px 14px;border-radius:10px;margin:4px 0}.sidebar nav a:hover,.sidebar nav a.active{background:#1d1d1d;color:#e3c269}.main{margin-left:245px;padding:28px}.metric,.panel{background:#fff;border:1px solid #ececec;border-radius:16px;padding:20px;box-shadow:0 5px 20px rgba(0,0,0,.03)}.metric{position:relative}.metric span{color:#777}.metric h3{margin:10px 0 0;font-weight:800}.metric i{position:absolute;right:18px;top:18px;font-size:28px;color:var(--gold)}.panel{margin-top:10px}.gold-badge{background:#f3e6bb;color:#6e5410}.quick{display:flex;justify-content:space-between;border-bottom:1px solid #eee;padding:15px 0}@media(max-width:900px){.sidebar{position:relative;width:100%;height:auto}.main{margin-left:0}.sidebar nav{display:flex;overflow:auto}.sidebar nav a{white-space:nowrap}.side-logo{margin-bottom:10px}}
.product-icon{height:95px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#faf8f1,#f2ead0);border-radius:15px 15px 0 0;overflow:hidden}.product-icon i{font-size:42px;color:#c9a23b}.product-icon img{width:100%;height:100%;object-fit:cover}.category-btn{border-radius:999px}.customer-row{border-left:0;border-right:0}.customer-row:hover{background:#fff9e8}
.topbar{margin-left:245px;height:68px;background:#fff;border-bottom:1px solid #ececec;display:flex;align-items:center;justify-content:flex-end;padding:0 28px;position:sticky;top:0;z-index:900}.topbar .dropdown-toggle{text-decoration:none;color:#222}.top-avatar{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#f3e6bb;color:#6e5410;font-weight:800}.topbar+.main{padding-top:22px}@media(max-width:900px){.topbar{margin-left:0}}

/* V33: Responsive left-side drawer on phones and tablets */
.mobile-menu-toggle,.mobile-menu-close,.mobile-menu-backdrop{display:none}
@media(max-width:900px){
 html,body{max-width:100%;overflow-x:hidden}
 .topbar{margin-left:0;justify-content:space-between;padding:0 14px;height:62px}
 .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
 .sidebar{position:fixed;inset:0 auto 0 0;width:min(290px,85vw);height:100dvh;max-height:100dvh;z-index:1060;overflow-y:auto;overflow-x:hidden;display:block;transform:translateX(-105%);transition:transform .24s ease;box-shadow:8px 0 30px #0002;padding:16px 12px 28px}
 .sidebar nav{display:block;overflow:visible}
 .sidebar nav a{display:flex;white-space:normal;min-height:44px;align-items:center;overflow-wrap:anywhere}
 .sidebar .side-logo{width:min(180px,75%);margin:15px auto 16px}
 .mobile-menu-close{display:flex;position:sticky;top:0;left:100%;margin-left:auto;z-index:2;min-width:42px;min-height:42px;align-items:center;justify-content:center}
 .mobile-menu-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.46);z-index:1055;opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s}
 body.mobile-menu-open .sidebar{transform:translateX(0)}
 body.mobile-menu-open .mobile-menu-backdrop{opacity:1;visibility:visible}
 body.mobile-menu-open{overflow:hidden}
 .main{margin-left:0;padding:16px 12px}
 .panel{padding:14px;max-width:100%}
 .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 .modal-dialog{margin:12px auto;max-width:calc(100% - 24px)}
 .modal-body{overflow-x:auto}
 input,select,textarea{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.sidebar,.mobile-menu-backdrop{transition:none!important}}

/* V34: POS uses the entire viewport when the left menu is hidden. */
body:has(.pos-fullscreen) .main.pos-fullscreen{
 margin-left:0!important;
 width:100%!important;
 max-width:none!important;
 min-height:100dvh;
 padding:78px clamp(12px,2vw,32px) 24px!important;
}
body:has(.pos-fullscreen) .pos-sidebar-toggle{
 position:fixed;top:14px;left:16px;z-index:1075;
 display:inline-flex;align-items:center;gap:8px;
 min-height:44px;box-shadow:0 3px 16px #0002;
}
body:has(.pos-fullscreen) #appSidebar{
 transform:translateX(-110%);transition:transform .22s ease;
 position:fixed!important;inset:0 auto 0 0!important;
 height:100dvh!important;width:min(290px,85vw)!important;z-index:1070;
}
body:has(.pos-fullscreen).pos-sidebar-open #appSidebar,
body:has(.pos-fullscreen).mobile-menu-open #appSidebar{transform:translateX(0)!important;}
body:has(.pos-fullscreen) #mobileMenuBackdrop{
 display:block;position:fixed;inset:0;background:#0007;
 z-index:1065;opacity:0;visibility:hidden;transition:opacity .22s;
}
body:has(.pos-fullscreen).pos-sidebar-open #mobileMenuBackdrop,
body:has(.pos-fullscreen).mobile-menu-open #mobileMenuBackdrop{
 opacity:1;visibility:visible;
}
body:has(.pos-fullscreen) .pos-fullscreen>.row,
body:has(.pos-fullscreen) .pos-fullscreen .panel{max-width:none;}
@media(max-width:900px){
 body:has(.pos-fullscreen) .main.pos-fullscreen{padding:72px 12px 18px!important;}
 body:has(.pos-fullscreen) .pos-sidebar-toggle{left:12px;top:10px;}
}

/* V45: Screenshot-inspired pastel lavender background across the application. */
:root{--zara-page-bg:#e8e5f1;--zara-panel-bg:#ffffff;--zara-border:#ddd9e9;--zara-ink:#29283a;--zara-muted:#64617b}
html{min-height:100%;background:#e8e5f1}
body:not(.login-bg){min-height:100vh;color:var(--zara-ink);background:linear-gradient(135deg,#dedbea 0%,#eeeaf5 48%,#e4e0ee 100%) fixed!important}
body:not(.login-bg) .main{background:transparent}
body:not(.login-bg) .topbar{background:rgba(255,255,255,.92);border-bottom:1px solid var(--zara-border);backdrop-filter:blur(10px)}
body:not(.login-bg) .panel,body:not(.login-bg) .metric{background:rgba(255,255,255,.96);border-color:var(--zara-border);box-shadow:0 5px 22px rgba(64,52,104,.06)}
body:not(.login-bg) .table{--bs-table-bg:transparent;--bs-table-hover-bg:#f4f0fb;--bs-table-border-color:#e7e3ed}
body:not(.login-bg) .modal-content{background:#fff;border-color:#ded9eb;box-shadow:0 22px 65px rgba(44,32,85,.18)}
body:not(.login-bg) .form-control,body:not(.login-bg) .form-select{border-color:#dcd7e7}
body:not(.login-bg) .form-control:focus,body:not(.login-bg) .form-select:focus{border-color:#a49ac5;box-shadow:0 0 0 .2rem rgba(141,122,192,.13)}
body:not(.login-bg) .text-secondary,body:not(.login-bg) .text-muted{color:var(--zara-muted)!important}
body:not(.login-bg) .card{border-color:#e2deed}
/* Keep the established black-and-gold navigation and POS action styling. */
body:not(.login-bg) .sidebar{background:#101014}
body:has(.dashboard-two){background:linear-gradient(135deg,#dedbea 0%,#eeeaf5 48%,#e4e0ee 100%) fixed!important}
@media(max-width:900px){body:not(.login-bg) .panel{box-shadow:0 3px 14px rgba(64,52,104,.05)}}

/* V46: Home (formerly Dashboard 2) pastel theme is the global application background. */
:root{--zara-home-bg:linear-gradient(135deg,#e7e5f2 0%,#f2eff8 55%,#e5e3f2 100%) fixed}
html{background:#e7e5f2}
body:not(.login-bg),body:has(.dashboard-two){background:var(--zara-home-bg)!important}
body:not(.login-bg) .main{background:transparent}