:root { color-scheme: dark; --ink:#f7efd8; --forest:#050505; --emerald:#d8b65b; --gold:#d8b65b; --gold-deep:#b79237; --canvas:#080808; --rose:#c7a14a; }
html, body { margin:0; min-height:100%; background:var(--canvas); font-family:'Manrope','Segoe UI',sans-serif; color:var(--ink); }
*, *::before, *::after { box-sizing:border-box; }
a { color:inherit; }
.app-loading { min-height:100vh; display:grid; place-items:center; }.branded-loading{align-content:center;gap:18px;background:#080808;color:#d8b65b}.branded-loading img{width:140px;height:140px;object-fit:contain;filter:brightness(0) saturate(100%) invert(78%) sepia(44%) saturate(677%) hue-rotate(4deg) brightness(91%) contrast(89%);animation:sadoon-float 3s ease-in-out infinite}.branded-loading .mud-progress-linear{width:min(70vw,280px)}.branded-loading span{font-size:.72rem;letter-spacing:.08em}
.app-topbar { border-bottom:1px solid #e4eae6!important; backdrop-filter:blur(14px); }
.app-drawer { border-right:0!important; background:linear-gradient(180deg,#3b261c 0%,#24150f 100%)!important; color:#f4e9dd; }
.brand-block { height:84px; display:flex; align-items:center; gap:12px; padding:0 22px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand-mark { width:45px; height:45px; display:grid; place-items:center; border-radius:50%; background:#fff8f1; box-shadow:0 8px 24px rgba(0,0,0,.2); overflow:hidden; }
.brand-mark img { width:41px; height:41px; object-fit:contain; }
.brand-name { font-size:.86rem; font-weight:800; letter-spacing:.11em; color:#fff; }
.brand-subtitle { font-size:.7rem; color:#91aca4; margin-top:2px; }
.mobile-brand { display:none; align-items:center; }.mobile-brand img{width:42px;height:42px;object-fit:contain}
.nav-menu { padding:20px 12px!important; }
.nav-heading { padding:0 13px 8px; font-size:.65rem!important; font-weight:800!important; letter-spacing:.14em!important; color:#6f9288!important; }
.nav-menu .mud-nav-link { border-radius:10px; margin:3px 0; color:#bad0c9; font-weight:600; }
.nav-menu .mud-nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav-menu .mud-nav-link.active { background:linear-gradient(90deg,rgba(216,171,105,.24),rgba(216,171,105,.06)); color:#fff; box-shadow:inset 3px 0 #d8ab69; }
.nav-menu .mud-nav-link.active .mud-nav-link-icon { color:#e2bd83; }
.drawer-footer { position:absolute; left:0; right:0; bottom:0; padding:14px 16px 18px; background:linear-gradient(0deg,#24150f 72%,transparent); }
.security-card { display:flex; gap:10px; align-items:center; padding:12px; margin-bottom:8px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.04); }
.security-card .mud-icon-root { color:#52c8a9; }.security-card strong,.security-card span{display:block}.security-card strong{font-size:.75rem;color:#eaf5f1}.security-card span{font-size:.65rem;color:#7fa198;margin-top:2px}
.main-content { background:radial-gradient(circle at 100% 0,rgba(184,137,67,.12),transparent 30%),radial-gradient(circle at 0 100%,rgba(75,46,31,.05),transparent 28%),var(--canvas); min-height:100vh; }
.page-shell { padding:88px 30px 36px; max-width:1600px; margin:0 auto; }
.sync-chip { background:#edf8f3!important; color:#08735d!important; font-weight:700!important; }
.user-summary { display:flex; align-items:center; gap:10px; margin-left:8px; }.user-avatar{background:#173b36!important;color:#fff!important;font-weight:800!important}.user-copy{display:flex;flex-direction:column;line-height:1.15}.user-copy strong{font-size:.78rem}.user-copy span{font-size:.65rem;color:#71827d;margin-top:3px}
.page-header { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:24px; }
.eyebrow { color:var(--emerald); font-weight:800; font-size:.69rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }
.page-title { font-family:'DM Serif Display',serif!important; font-size:2.05rem!important; letter-spacing:-.02em!important; color:#3a2419; }
.page-subtitle { color:#70807b; font-size:.87rem; margin-top:4px; }
.surface-card { border:1px solid #eadfd5!important; border-radius:18px!important; box-shadow:0 12px 34px rgba(75,46,31,.06)!important; background:rgba(255,255,255,.97)!important; }
.metric-card { height:100%; padding:19px!important; position:relative; overflow:hidden; }.metric-card::after{content:'';position:absolute;width:85px;height:85px;border-radius:50%;right:-28px;top:-32px;background:var(--metric-glow,#edf7f3)}
.metric-head{display:flex;align-items:center;justify-content:space-between}.metric-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#edf7f3;color:var(--emerald)}.metric-label{font-size:.73rem;font-weight:700;color:#74857f;text-transform:uppercase;letter-spacing:.05em}.metric-value{font-size:1.66rem;font-weight:800;margin-top:12px;color:#173b36}.metric-note{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:.7rem;color:#6f817b}.metric-note.positive{color:#0b866c}
.section-title{font-size:.95rem!important;font-weight:800!important;color:#193a34}.section-kicker{font-size:.7rem;color:#7c8b87}
.toolbar-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.search-box{min-width:280px}.muted{color:#71817c}.money{font-variant-numeric:tabular-nums;font-weight:800}.stock-good{color:#0b8067}.stock-low{color:#d08a20}.stock-out{color:#c64b55}
.product-thumb{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#e8f3ee,#f7efe1);color:#1f6b5d;font-weight:800;overflow:hidden}.product-thumb img{width:100%;height:100%;object-fit:cover}.product-cell{display:flex;align-items:center;gap:11px}.product-cell strong,.product-cell span{display:block}.product-cell span{font-size:.68rem;color:#7b8985;margin-top:2px}
.empty-state{padding:48px;text-align:center;color:#71817c}.empty-state .mud-icon-root{font-size:46px;color:#a8bbb4;margin-bottom:8px}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#20a481;box-shadow:0 0 0 5px rgba(32,164,129,.12);margin-right:7px}
.sale-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.7fr);gap:20px}.cart-panel{position:sticky;top:90px}.scan-input .mud-input-root{font-size:1.05rem!important}.cart-line{display:grid;grid-template-columns:1fr auto;gap:10px;padding:13px 0;border-bottom:1px solid #edf1ee}.cart-line:last-child{border-bottom:0}.quantity-control{display:flex;gap:5px;align-items:center}.totals{border-top:1px dashed #cad5d0;margin-top:14px;padding-top:14px}.total-row{display:flex;justify-content:space-between;margin:8px 0;color:#687a74}.total-row.grand{font-size:1.15rem;color:#173b36;font-weight:800;margin-top:14px}
.barcode-label{width:320px;min-height:176px;background:#fff;border:1px solid #d9dfdb;border-radius:8px;padding:12px;text-align:center;color:#111;display:grid;grid-template-columns:1fr 76px;column-gap:10px;align-items:center}.barcode-label .label-copy{min-width:0}.barcode-label .label-brand{font-weight:900;letter-spacing:.14em;font-size:.68rem;color:#4b2e1f}.barcode-label .label-name{font-weight:800;font-size:.8rem;margin:5px 0 2px}.barcode-label .label-meta{font-size:.62rem;color:#555}.barcode-label svg[data-code128]{width:100%;height:58px;margin:4px 0}.barcode-label .label-code{font:600 .61rem monospace;letter-spacing:.06em}.barcode-label .label-qr svg{width:74px;height:74px;display:block}.barcode-label.compact{width:190px;min-height:113px;grid-template-columns:1fr 52px;padding:7px;column-gap:5px}.barcode-label.compact .label-qr svg{width:50px;height:50px}.barcode-label.compact svg[data-code128]{height:36px}.barcode-label.compact .label-name{font-size:.67rem}.barcode-label.compact .label-meta{font-size:.52rem}.barcode-label.compact .label-brand{font-size:.55rem}
.camera-shell{border:1px solid #e4d6ca;border-radius:16px;overflow:hidden;background:#21150f;position:relative}.camera-shell video{display:block;width:100%;max-height:360px;object-fit:cover}.camera-guide{position:absolute;inset:17% 12%;border:2px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 0 0 999px rgba(0,0,0,.28);pointer-events:none}.camera-guide::after{content:'Align barcode or QR code';position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;color:#fff;font-size:.72rem;font-weight:700}.scan-result{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;background:#f7f0e9;color:#4b2e1f;font-size:.78rem;font-weight:700}.workflow-grid{display:grid;grid-template-columns:minmax(320px,.75fr) minmax(0,1.25fr);gap:20px}.line-editor{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #eee4db}.line-editor:last-child{border-bottom:0}.brand-watermark{position:absolute;right:18px;top:15px;width:76px;height:76px;object-fit:contain;opacity:.08;pointer-events:none}
.supplier-banner{background:linear-gradient(120deg,#143a34,#0e6f5d);color:white;border-radius:20px;padding:26px;position:relative;overflow:hidden}.supplier-banner::after{content:'INDIA → KSA';position:absolute;right:24px;bottom:-10px;font-size:3.4rem;font-weight:900;color:rgba(255,255,255,.055);letter-spacing:.04em}.supplier-banner h2{font-family:'DM Serif Display',serif;font-size:1.7rem;margin:0 0 6px}.supplier-banner p{color:#bdd8d0;max-width:650px;margin:0;font-size:.83rem}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(420px,1.1fr) minmax(420px,.9fr);background:#f8f4ee}.login-story{background:linear-gradient(150deg,rgba(43,26,19,.96),rgba(90,55,38,.93)),radial-gradient(circle at 30% 20%,#b88943,#2b1a13 55%);padding:8vh 7vw;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-story::after{content:'';position:absolute;width:480px;height:480px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-150px;top:-130px;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.02)}.login-story h1{font-family:'DM Serif Display',serif;font-size:4rem;line-height:1.03;max-width:620px;margin:22px 0}.login-story h1 span{color:#e4bd80}.login-story p{max-width:540px;color:#e0cfc2;line-height:1.8}.story-points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative;z-index:1}.story-point{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.055);backdrop-filter:blur(8px)}.story-point strong,.story-point span{display:block}.story-point strong{font-size:.75rem}.story-point span{font-size:.65rem;color:#cfb5a2;margin-top:4px}.login-form-wrap{display:grid;place-items:center;padding:40px}.login-card{width:min(440px,100%);padding:34px!important}.login-card h2{font-family:'DM Serif Display',serif;font-size:2rem;margin:10px 0 4px}.demo-accounts{background:#faf6f2;border:1px solid #eadfd5;border-radius:12px;padding:12px;margin-top:18px;font-size:.7rem}.demo-accounts code{color:#4b2e1f;font-weight:700}
@media(max-width:1100px){.sale-layout{grid-template-columns:1fr}.cart-panel{position:static}.sync-chip{display:none!important}}
@media(max-width:960px){.page-shell{padding:80px 18px 28px}.mobile-brand{display:flex}.user-copy{display:none}.login-shell{grid-template-columns:1fr}.login-story{display:none}.workflow-grid{grid-template-columns:1fr}}
@media(max-width:600px){.page-header{align-items:flex-start;flex-direction:column}.page-title{font-size:1.65rem!important}.search-box{min-width:100%;width:100%}.notification-button{display:none!important}.page-shell{padding-left:12px;padding-right:12px}}
@media print{.app-topbar,.app-drawer,.page-header,.no-print{display:none!important}.main-content,.page-shell{margin:0!important;padding:0!important;background:#fff!important}.label-sheet{margin:0!important;padding:0!important;border:0!important;box-shadow:none!important}.label-grid{display:grid!important;grid-template-columns:repeat(3,1fr);gap:4mm}.barcode-label{break-inside:avoid;box-shadow:none;width:auto!important}.label-grid.label-small{grid-template-columns:repeat(4,1fr);gap:2mm}.label-grid.label-small .barcode-label{min-height:30mm}.label-grid.label-medium{grid-template-columns:repeat(2,1fr);gap:3mm}.label-grid.label-medium .barcode-label{min-height:50mm}}
#blazor-error-ui{background:#fff3cd;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem;position:fixed;width:100%;z-index:1000}.loading-progress{position:absolute;display:block;width:8rem;height:8rem;inset:20vh 0 auto 0;margin:0 auto}.loading-progress circle{fill:none;stroke:#d8e5df;stroke-width:.6rem;transform-origin:50% 50%;transform:rotate(-90deg)}.loading-progress circle:last-child{stroke:#0b7a64;stroke-dasharray:calc(3.141 * var(--blazor-load-percentage,0%)),500%;transition:stroke-dasharray .05s ease-in-out}.loading-progress-text{position:absolute;text-align:center;font-weight:700;inset:calc(20vh + 3.5rem) 0 auto 0}.loading-progress-text:after{content:var(--blazor-load-percentage-text,"Loading")}

/* Sadoon black-and-gold brand system */
.app-drawer{background:linear-gradient(180deg,#111 0%,#030303 100%)!important;border-right:1px solid rgba(216,182,91,.22)!important}.app-topbar{background:rgba(255,255,255,.94)!important;border-bottom:1px solid rgba(167,125,32,.24)!important}.brand-block{border-color:rgba(216,182,91,.2)}.brand-mark{background:#090909;border:1px solid rgba(216,182,91,.45);box-shadow:0 12px 30px rgba(0,0,0,.32)}.brand-mark img,.mobile-brand img,.splash-logo,.shop-logo{filter:brightness(0) saturate(100%) invert(78%) sepia(44%) saturate(677%) hue-rotate(4deg) brightness(91%) contrast(89%)}.brand-name{color:#f4d989}.brand-subtitle,.nav-heading{color:#a78e50!important}.nav-menu .mud-nav-link{color:#d2c8ab}.nav-menu .mud-nav-link.active{background:linear-gradient(90deg,rgba(216,182,91,.24),rgba(216,182,91,.035));box-shadow:inset 3px 0 var(--gold);color:#fff}.nav-menu .mud-nav-link.active .mud-nav-link-icon{color:var(--gold)}.drawer-footer{background:linear-gradient(0deg,#030303 72%,transparent)}.security-card{border-color:rgba(216,182,91,.2);background:rgba(216,182,91,.055)}.security-card .mud-icon-root{color:var(--gold)}.security-card strong{color:#f8e9bb}.security-card span{color:#a9935d}.main-content{background:radial-gradient(circle at 100% 0,rgba(216,182,91,.13),transparent 31%),radial-gradient(circle at 0 100%,rgba(0,0,0,.035),transparent 28%),var(--canvas)}.page-title,.metric-value,.section-title{color:#111!important}.eyebrow{color:var(--gold-deep)}.surface-card{border-color:rgba(167,125,32,.24)!important;box-shadow:0 14px 42px rgba(0,0,0,.055)!important}.metric-icon{background:#fbf4df;color:var(--gold-deep)}.sync-chip{background:#fbf4df!important;color:#765817!important}.user-avatar{background:#0b0b0b!important;color:var(--gold)!important}.status-dot{background:var(--gold);box-shadow:0 0 0 5px rgba(216,182,91,.18)}.supplier-banner{background:linear-gradient(125deg,#050505,#1b170d);border:1px solid rgba(216,182,91,.28)}.supplier-banner p{color:#d7cda8}.login-story{background:radial-gradient(circle at 25% 18%,rgba(216,182,91,.2),transparent 24%),linear-gradient(145deg,#111,#020202 72%)}.login-story h1 span{color:var(--gold)}.login-story p{color:#d8d0ba}.story-point{border-color:rgba(216,182,91,.2);background:rgba(216,182,91,.06)}.story-point span{color:#b5a67b}.demo-accounts{background:#fcf8e9;border-color:#e3cf91}.demo-accounts code{color:#6f5317}.barcode-label .label-brand{color:#7e5e16}

/* Animated application splash and PWA launch surface */
.startup-splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 34%,#24200f 0,#0c0b08 26%,#030303 68%);color:#fff;text-align:center;padding:24px}.startup-splash::before{content:'';position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(216,182,91,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(216,182,91,.13) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle,#000,transparent 72%)}.splash-logo{position:relative;width:min(42vw,230px);height:min(42vw,230px);object-fit:contain;z-index:2;animation:sadoon-float 3s ease-in-out infinite}.splash-halo{position:absolute;width:min(68vw,380px);aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-59%)}.splash-halo span{position:absolute;inset:0;border:1px solid rgba(216,182,91,.28);border-radius:50%;animation:sadoon-orbit 5s linear infinite}.splash-halo span:nth-child(2){inset:12%;border-style:dashed;animation-duration:9s;animation-direction:reverse}.splash-halo span:nth-child(3){inset:25%;animation-duration:4s}.splash-wordmark{position:relative;margin-top:12px;font-size:clamp(1.2rem,5vw,2rem);font-weight:400;letter-spacing:.28em;z-index:2}.splash-wordmark strong{color:var(--gold);font-weight:800}.splash-tagline{position:relative;margin-top:8px;color:#a89972;text-transform:uppercase;letter-spacing:.19em;font-size:.62rem;z-index:2}.splash-progress{position:relative;width:min(68vw,280px);height:2px;margin-top:30px;background:rgba(255,255,255,.1);overflow:hidden;z-index:2}.splash-progress i{position:absolute;inset:0 auto 0 0;width:38%;background:linear-gradient(90deg,transparent,var(--gold),#fff1bd,var(--gold),transparent);animation:sadoon-load 1.55s ease-in-out infinite}.startup-splash .loading-progress-text{position:relative!important;inset:auto!important;margin-top:12px;color:#d1c49f;font-size:.7rem;font-weight:700;letter-spacing:.06em;z-index:2}.startup-splash .loading-progress-text::after{content:var(--blazor-load-percentage-text,"Loading")}.splash-hint{position:relative;color:#776d51;font-size:.62rem;margin-top:10px;z-index:2}@keyframes sadoon-float{0%,100%{transform:translateY(0);filter:brightness(0) saturate(100%) invert(78%) sepia(44%) saturate(677%) hue-rotate(4deg) brightness(91%) contrast(89%) drop-shadow(0 12px 20px rgba(216,182,91,.12))}50%{transform:translateY(-9px);filter:brightness(0) saturate(100%) invert(78%) sepia(44%) saturate(677%) hue-rotate(4deg) brightness(104%) contrast(89%) drop-shadow(0 16px 35px rgba(216,182,91,.26))}}@keyframes sadoon-orbit{to{transform:rotate(360deg)}}@keyframes sadoon-load{0%{transform:translateX(-130%)}100%{transform:translateX(360%)}}

/* Sadoon black-and-gold application skin. Screen-only so printed labels stay white. */
@media screen {
    .main-content{background:radial-gradient(circle at 100% 0,rgba(216,182,91,.12),transparent 30%),radial-gradient(circle at 0 100%,rgba(216,182,91,.055),transparent 28%),#080808!important}
    .app-topbar{background:rgba(7,7,7,.96)!important;color:#f7efd8!important;border-bottom:1px solid rgba(216,182,91,.3)!important;backdrop-filter:blur(18px)}
    .app-topbar .mud-icon-root{color:#d8b65b}
    .page-title,.section-title{color:#f7efd8!important}
    .eyebrow,.metric-value{color:#d8b65b!important}
    .surface-card,.main-content .mud-paper{background:linear-gradient(145deg,rgba(21,21,21,.98),rgba(10,10,10,.98))!important;border-color:rgba(216,182,91,.28)!important;color:#f7efd8!important;box-shadow:0 16px 48px rgba(0,0,0,.3)!important}
    .main-content .mud-table-root,.main-content .mud-table-container{background:#0d0d0d!important;color:#f7efd8!important}
    .main-content .mud-table-cell{border-color:rgba(216,182,91,.14)!important;color:#e9dfc3!important}
    .main-content .mud-table-head .mud-table-cell{color:#d8b65b!important;background:#14120d!important}
    .main-content .mud-input-control>.mud-input-control-input-container>.mud-input-label-inputcontrol{color:#b9ac87!important}
    .main-content .mud-input,.main-content .mud-select,.main-content input,.main-content textarea{color:#f7efd8!important}
    .main-content .mud-input-outlined-border{border-color:rgba(216,182,91,.35)!important}
    .main-content .mud-input:hover .mud-input-outlined-border{border-color:#d8b65b!important}
    .metric-label,.metric-note,.user-copy span,.product-cell span{color:#b9ac87!important}
    .metric-icon,.sync-chip{background:rgba(216,182,91,.12)!important;color:#d8b65b!important;border:1px solid rgba(216,182,91,.22)}
    .product-thumb{background:linear-gradient(145deg,#1c1a13,#0c0c0c);color:#d8b65b;border:1px solid rgba(216,182,91,.2)}
    .login-shell{background:#050505!important}
    .login-form-wrap{background:radial-gradient(circle at 70% 20%,rgba(216,182,91,.11),transparent 33%),#070707}
    .login-card{background:linear-gradient(145deg,#171717,#0d0d0d)!important;border:1px solid rgba(216,182,91,.3);box-shadow:0 24px 70px rgba(0,0,0,.5)!important;color:#f7efd8}
    .login-card h2{color:#f3dc94}
    .login-card .mud-input,.login-card input{color:#f7efd8!important}
    .login-card .mud-input-label{color:#b9ac87!important}
    .login-card .mud-input-outlined-border{border-color:rgba(216,182,91,.36)!important}
    .login-card .mud-button-filled-primary{background:#d8b65b!important;color:#080808!important}
    .login-card .mud-button-text-secondary{color:#e6ca78!important}
    .demo-accounts{background:rgba(216,182,91,.07)!important;border-color:rgba(216,182,91,.24)!important;color:#d9cfb1}
    .demo-accounts code{color:#f2d77f!important}
}