*{margin:0;padding:0;box-sizing:border-box}
:root{
  --black:#07111f;
  --white:#ffffff;

  --gray-50:#f6f8fb;
  --gray-100:#e8edf5;
  --gray-200:#cfd8e6;
  --gray-400:#7b8798;
  --gray-600:#4b5565;
  --gray-800:#1f2937;

  --brand-brown:#00184A;
  --brand-yellow:#F6C400;
  --brand-red:#dc2626;
  --brand-green:#22c55e;

  --sidebar-w:232px;
  --topbar-h:56px;

  --font-sans:'DM Sans',sans-serif;
  --font-serif:'Instrument Serif',serif;
  --font-mono:'DM Mono',monospace;

  --radius:6px;
  --radius-lg:10px;
}
body{font-family:var(--font-sans);background:var(--gray-50);color:var(--black);min-height:100vh;overflow-x:hidden}

/* FULL SCREEN */
.full-screen{position:fixed;inset:0;background:var(--brand-brown);display:flex;align-items:center;justify-content:center;z-index:1000}
.auth-card{background:var(--white);border-radius:var(--radius-lg);padding:40px 36px;width:400px;max-width:92vw}
.auth-label{display:block;font-size:11px;font-weight:500;color:var(--gray-600);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;margin-top:16px}
.auth-input{width:100%;padding:10px 14px;border:1px solid var(--gray-200);border-radius:var(--radius);font-family:var(--font-sans);font-size:14px;color:var(--black);background:var(--white);outline:none;transition:border .2s}
.auth-input:focus{border-color:var(--brand-brown)}
.auth-btn{width:100%;margin-top:22px;padding:12px;background:var(--brand-brown);color:var(--white);border:none;border-radius:var(--radius);font-family:var(--font-sans);font-size:14px;font-weight:500;cursor:pointer;transition:opacity .2s}
.auth-btn:hover{opacity:.85}
.auth-error{color:#c0392b;font-size:12px;margin-top:8px;padding:8px 10px;background:#fee2e2;border-radius:var(--radius);display:none}
.pw-hint{font-size:11px;color:var(--gray-400);margin-top:5px;font-family:var(--font-mono)}

/* SESSION WARNING */
#session-warning{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:900;align-items:center;justify-content:center}
.warn-card{background:var(--white);border-radius:var(--radius-lg);padding:36px;width:340px;text-align:center;border-top:4px solid var(--brand-red)}

/* APP LAYOUT */
#app{display:block;height:100vh;overflow:hidden}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--brand-brown);display:flex;flex-direction:column;z-index:100;transition:transform .3s}
.sidebar-logo{padding:15px 18px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.loc-badge{margin:10px 12px 2px;background:rgba(255,255,255,.08);border-radius:var(--radius);padding:7px 10px;display:flex;align-items:center;gap:7px}
.green-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0}
.nav-section{padding:5px 0}
.nav-lbl{padding:7px 18px 3px;font-size:9px;color:rgba(255,255,255,.28);text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-mono)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 18px;cursor:pointer;font-size:13px;color:rgba(255,255,255,.55);transition:all .15s;border-left:3px solid transparent}
.nav-item:hover{color:var(--white);background:rgba(255,255,255,.07)}
.nav-item.active{color:var(--white);border-left-color:var(--brand-yellow);background:rgba(255,255,255,.1)}
.nav-icon{width:15px;height:15px;opacity:.55;flex-shrink:0}
.nav-item.active .nav-icon,.nav-item:hover .nav-icon{opacity:1}
.sidebar-footer{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.1)}
.logout-btn{width:100%;padding:8px;background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.5);border-radius:var(--radius);cursor:pointer;font-size:12px;font-family:var(--font-sans);transition:all .2s}
.logout-btn:hover{background:rgba(255,255,255,.08);color:var(--white)}
.main{margin-left:var(--sidebar-w);height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);background:var(--white);border-bottom:1px solid var(--gray-100);display:flex;align-items:center;padding:0 22px;gap:12px;position:sticky;top:0;z-index:50}
.page-title{font-size:17px;font-weight:500;flex:1}
.topbar-search{display:flex;align-items:center;gap:7px;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:var(--radius);padding:6px 11px;width:200px}
.topbar-search input{border:none;background:transparent;font-size:13px;outline:none;width:100%;font-family:var(--font-sans)}
.topbar-search input::placeholder{color:var(--gray-400)}
.loc-filter{display:flex;gap:3px;background:var(--gray-100);padding:3px;border-radius:var(--radius)}
.loc-tab{padding:4px 12px;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;color:var(--gray-600)}
.loc-tab.active{background:var(--brand-brown);color:var(--white)}
.topbar-user{display:flex;align-items:center;gap:8px;padding-left:11px;border-left:1px solid var(--gray-100);cursor:pointer}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--brand-brown);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0}
.role-pill{font-size:9px;padding:2px 7px;border-radius:10px;color:white;font-family:var(--font-mono)}
.mobile-menu{display:none;width:34px;height:34px;background:transparent;border:1px solid var(--gray-200);border-radius:var(--radius);cursor:pointer;font-size:18px;align-items:center;justify-content:center}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}
.sidebar-overlay.open{display:block}
@media(max-width:768px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.mobile-menu{display:flex!important}.stats-grid{grid-template-columns:1fr 1fr!important}.form-grid{grid-template-columns:1fr!important}.report-grid{grid-template-columns:1fr!important}}

/* CONTENT */
.content{padding:22px;flex:1}
.page{display:none}.page.active{display:block}
.greeting-bar{margin-bottom:20px}
.greeting-bar h1{font-size:22px;font-weight:500}
.greeting-bar p{font-size:13px;color:var(--gray-400);margin-top:3px}

/* STAT CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stat-card{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:16px}
.stat-label{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-400);margin-bottom:7px;font-family:var(--font-mono)}
.stat-value{font-size:22px;font-weight:600;line-height:1}
.stat-delta{font-size:11px;margin-top:4px;font-family:var(--font-mono);color:var(--gray-400)}
.stat-delta.up{color:#16a34a}.stat-delta.down{color:#dc2626}

/* CARDS */
.card{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);overflow:hidden}
.card-header{padding:13px 16px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-title{font-size:14px;font-weight:500;flex:1}

/* TABLES */
table{width:100%;border-collapse:collapse}
th{padding:8px 13px;text-align:left;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--gray-400);border-bottom:1px solid var(--gray-100);font-family:var(--font-mono);white-space:nowrap}
td{padding:10px 13px;font-size:13px;border-bottom:1px solid var(--gray-50)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--gray-50)}
.mono{font-family:var(--font-mono);font-size:12px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:var(--font-sans);border:none;white-space:nowrap}
.btn-primary{background:var(--brand-brown);color:var(--white)}.btn-primary:hover{opacity:.85}
.btn-secondary{background:transparent;color:var(--black);border:1px solid var(--gray-200)}.btn-secondary:hover{background:var(--gray-50)}
.btn-danger{background:transparent;color:#dc2626;border:1px solid #fca5a5}.btn-danger:hover{background:#fef2f2}
.btn-sm{padding:4px 10px;font-size:12px}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:500;font-family:var(--font-mono)}
.badge-success{background:#dcfce7;color:#166534}.badge-warning{background:#fef9c3;color:#854d0e}
.badge-danger{background:#fee2e2;color:#991b1b}.badge-neutral{background:var(--gray-100);color:var(--gray-800)}.badge-info{background:#e0f2fe;color:#075985}

/* FORMS */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:11px;font-weight:500;color:var(--gray-600);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.form-input,.form-select,.form-textarea{width:100%;padding:8px 11px;border:1px solid var(--gray-200);border-radius:var(--radius);font-family:var(--font-sans);font-size:13px;color:var(--black);background:var(--white);outline:none;transition:border .2s}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--brand-brown)}
.form-input:disabled,.form-select:disabled{background:var(--gray-50);color:var(--gray-400)}
.form-textarea{resize:vertical;min-height:72px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-error{font-size:12px;color:#dc2626;margin-top:6px;padding:7px 10px;background:#fee2e2;border-radius:var(--radius);display:none}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex}
.modal{background:var(--white);border-radius:var(--radius-lg);width:580px;max-width:100%;max-height:92vh;overflow-y:auto}
.modal-sm{width:420px}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center}
.modal-title{font-size:15px;font-weight:500;flex:1}
.modal-close{background:transparent;border:none;cursor:pointer;color:var(--gray-400);font-size:22px;line-height:1}
.modal-body{padding:20px}
.modal-footer{padding:13px 20px;border-top:1px solid var(--gray-100);display:flex;align-items:center;gap:10px}
.modal-footer-right{margin-left:auto;display:flex;gap:8px}

/* INVOICE LINE ITEMS */
.line-items-wrap{border:1px solid var(--gray-100);border-radius:var(--radius);overflow:hidden;margin-bottom:10px}
.li-header{display:grid;grid-template-columns:2fr 70px 120px 30px;gap:5px;padding:6px 10px;background:var(--gray-50);font-size:10px;font-weight:500;color:var(--gray-400);text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-mono)}
.li-row,.line-item-row{display:grid;grid-template-columns:2fr 70px 120px 30px;gap:5px;padding:6px 10px;border-top:1px solid var(--gray-100);align-items:center}
.li-input{padding:5px 7px;border:1px solid var(--gray-200);border-radius:var(--radius);font-size:12px;width:100%;font-family:var(--font-sans);outline:none;transition:border .15s}
.li-input:focus{border-color:var(--brand-brown)}
.li-input[readonly]{background:var(--gray-50);color:var(--gray-400);cursor:not-allowed}
.remove-btn,.remove-item{background:transparent;border:none;cursor:pointer;color:var(--gray-400);font-size:17px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:4px}
.remove-btn:hover,.remove-item:hover{color:#dc2626;background:#fee2e2}
.inv-total{text-align:right;padding:9px 12px;border-top:1px solid var(--gray-100);font-weight:600;font-size:14px;color:var(--brand-brown)}

/* PAYMENT METHOD SELECTOR */
.pm-btn{border:2px solid var(--gray-200);border-radius:var(--radius);padding:12px;cursor:pointer;font-size:14px;font-weight:500;text-align:center;transition:all .15s;background:var(--white)}
.pm-btn:hover{border-color:var(--gray-400)}
.pm-btn.selected{border-color:var(--brand-brown);background:#fdf5ef;color:var(--brand-brown)}

/* CHARTS */
.chart-bars{display:flex;align-items:flex-end;gap:5px;padding:0 2px}
.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.chart-bar{width:100%;background:var(--brand-brown);border-radius:2px 2px 0 0;min-height:2px}
.chart-bar-label{font-size:9px;color:var(--gray-400);font-family:var(--font-mono)}

/* LOW STOCK */
.ls-item{display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid var(--gray-50);gap:12px}
.ls-item:last-child{border-bottom:none}
.stock-bar-bg,.stock-bar-wrap{height:4px;background:var(--gray-100);border-radius:2px;overflow:hidden;margin-top:4px}
.stock-bar-fill,.stock-bar{height:100%;border-radius:2px;background:var(--brand-yellow)}
.stock-bar.critical{background:#dc2626}
.stock-bar.low{background:#f59e0b}
.low-stock-item{display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid var(--gray-50);gap:12px}
.low-stock-item:last-child{border-bottom:none}

/* REPORTS */
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.report-card{background:var(--white);border:1px solid var(--gray-100);border-radius:var(--radius-lg);padding:16px}
.report-card h3{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-400);font-family:var(--font-mono);margin-bottom:12px}

/* AUDIT */
.audit-item{display:flex;gap:11px;padding:10px 14px;border-bottom:1px solid var(--gray-50)}
.audit-dot{width:7px;height:7px;border-radius:50%;background:var(--brand-brown);flex-shrink:0;margin-top:4px}
.audit-meta{font-size:11px;color:var(--gray-400);font-family:var(--font-mono);margin-top:2px}

/* SEARCH */
.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap input{padding:6px 10px 6px 30px;border:1px solid var(--gray-200);border-radius:var(--radius);font-size:13px;min-width:180px;outline:none;font-family:var(--font-sans);background:var(--white);color:var(--black)}
.search-wrap input:focus{border-color:var(--brand-brown)}
.search-wrap::before{content:'⌕';position:absolute;left:8px;color:var(--gray-400);font-size:15px;top:50%;transform:translateY(-50%)}

/* MISC */
.offline-badge{position:fixed;top:12px;right:16px;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;padding:4px 12px;border-radius:20px;font-size:11px;font-family:var(--font-mono);z-index:500;display:none}
.toast{position:fixed;bottom:22px;right:22px;background:var(--black);color:var(--white);padding:11px 18px;border-radius:var(--radius);font-size:13px;z-index:1000;opacity:0;transform:translateY(8px);transition:all .3s;pointer-events:none;max-width:310px}
.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#dc2626}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.session-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 2s infinite;margin-right:5px}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:2px}

/* PRINT */
#print-area {
  display: none;
}

@media print {
  body > * {
    display: none !important;
  }

  #print-area {
    display: block !important;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #000;
    padding: 16px;
  }
}

/* WAREHOUSE MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  #warehouse-body .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  #warehouse-body .card {
    overflow-x: auto;
  }

  #warehouse-body table {
    min-width: 760px;
  }

  #warehouse-stockout-modal .modal,
  #warehouse-adjustment-modal .modal,
  #warehouse-csv-modal .modal {
    width: 96vw;
    max-height: 90vh;
  }

  #warehouse-requisition-items-body input {
    min-width: 110px;
  }
}

/* ULTIMATE DEE ELECTRICALS THEME */
.full-screen{
  background:linear-gradient(135deg,#00184A,#000B2E);
}

.sidebar{
  background:#00184A;
}

.auth-btn,
.btn-primary,
.loc-tab.active,
.user-avatar,
.chart-bar{
  background:#00184A;
}

.auth-input:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.search-wrap input:focus,
.li-input:focus{
  border-color:#F6C400;
}

.nav-item.active{
  border-left-color:#F6C400;
  background:rgba(246,196,0,.14);
}

.nav-item:hover{
  background:rgba(246,196,0,.1);
}

.role-pill{
  background:#00184A !important;
}

.inv-total,
.audit-dot{
  color:#00184A;
}

.pm-btn.selected{
  border-color:#F6C400;
  background:#fff8d6;
  color:#00184A;
}

.stock-bar-fill,
.stock-bar{
  background:#F6C400;
}

.card,
.stat-card,
.report-card,
.auth-card,
.modal{
  box-shadow:0 8px 24px rgba(0,24,74,.06);
}

.auth-card{
  border-top:5px solid #F6C400;
}

.sidebar-logo{
  border-bottom:1px solid rgba(246,196,0,.22);
}

.loc-badge{
  background:rgba(246,196,0,.12);
}

.logout-btn:hover{
  background:rgba(246,196,0,.12);
}

.toast{
  background:#00184A;
}