/* ── Brento Box shared stylesheet ───────────────────────────────────────────
   Loaded by every page. Page-specific CSS (grid layouts, modals, etc.) lives
   in an inline <style> block on each page.

   Accent colour is controlled via CSS custom properties so inventory pages
   (teal) and sales/ops pages (blue) share one file:

     Blue (default):  :root { --accent:#1a237e; --accent-dk:#283593; --accent-dis:#9fa8da; --accent-row-hover:#f5f7ff }
     Teal (inventory): override in the page <style> block
── */

:root {
  --accent:          #1a237e;
  --accent-dk:       #283593;
  --accent-dis:      #9fa8da;
  --accent-row-hover:#f5f7ff;
}

/* ── Login ──────────────────────────────────────────────────────────────── */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f0f0f0;font-family:Arial,sans-serif}
.login-card{background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.15);padding:40px 44px;width:100%;max-width:380px;box-sizing:border-box}
.login-logo{display:flex;justify-content:center;margin-bottom:8px}
.login-logo svg{height:30px;width:auto}
.login-subtitle{text-align:center;font-size:13px;color:#888;margin-bottom:30px;letter-spacing:.03em}
.login-card label{display:block;font-size:13px;font-weight:bold;color:#333;margin-bottom:5px}
.login-card input{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:5px;font-size:14px;box-sizing:border-box;margin-bottom:16px;outline:none;transition:border-color .15s}
.login-card input:focus{border-color:var(--accent)}
.btn-signin{width:100%;padding:11px;background:var(--accent);color:#fff;border:none;border-radius:5px;font-size:15px;font-weight:bold;cursor:pointer;margin-top:4px;transition:background .15s}
.btn-signin:hover:not(:disabled){background:var(--accent-dk)}
.btn-signin:disabled{background:var(--accent-dis);cursor:not-allowed}
#login-error{color:#c62828;font-size:13px;margin-top:12px;text-align:center;min-height:18px}
.login-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:#aaa;font-size:13px}
.login-divider::before,.login-divider::after{content:'';flex:1;border-top:1px solid #e0e0e0}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px;background:#fff;color:#333;border:1px solid #dadce0;border-radius:5px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,box-shadow .15s}
.btn-google:hover{background:#f8f8f8;box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* ── App shell ──────────────────────────────────────────────────────────── */
body{font-family:Arial,sans-serif;margin:0;padding:0;background:#f0f0f0}
#app{display:none;padding:24px}

/* ── App header ─────────────────────────────────────────────────────────── */
.app-header{display:flex;align-items:center;gap:20px;background:#111;padding:14px 24px;margin-bottom:12px;border-radius:8px}
.app-header a{display:flex;line-height:0}
.app-header svg{height:38px;width:auto;flex-shrink:0}
.app-header svg path{fill:#fff}
.app-logo-img{height:38px;width:auto;flex-shrink:0;display:block}
.hdr-div,.app-header-divider{width:1px;height:36px;background:rgba(255,255,255,.35)}
.hdr-title,.app-header-title{color:#fff;font-size:20px;font-weight:bold;letter-spacing:.02em;flex:1}
.btn-signout{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:4px 9px;font-size:8px;cursor:pointer;transition:background .15s}
.btn-signout:hover{background:rgba(255,255,255,.25)}
#header-user{color:rgba(255,255,255,.75);font-size:13px}

/* ── Page nav ───────────────────────────────────────────────────────────── */
.page-nav{display:flex;gap:4px;margin-bottom:14px;align-items:center;background:#fff;padding:6px 10px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.page-nav>a{padding:6px 12px;border-radius:4px;text-decoration:none;font-size:13px;font-weight:600;color:#555;white-space:nowrap;transition:all .15s;border:1px solid transparent}
.page-nav>a:hover{background:#e8eaf6;color:var(--accent);border-color:#9fa8da}
.page-nav>a.active{background:var(--accent);color:#fff}
.page-nav>a.nav-home{background:#f5f5f5;color:#333;border-color:#e0e0e0}
.page-nav>a.nav-home:hover{background:#e0e0e0;color:#111;border-color:#bbb}
.nav-sep{display:none}
.nav-dropdown{position:relative;display:inline-flex}
.nav-dropdown-btn{padding:6px 12px;border-radius:4px;font-size:13px;font-weight:600;color:#555;background:none;border:1px solid #ddd;cursor:pointer;white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:4px;font-family:inherit;line-height:1.4}
.nav-dropdown-btn:hover,.nav-dropdown:hover .nav-dropdown-btn{background:#e8eaf6;color:var(--accent);border-color:#9fa8da}
.nav-dropdown:has(.active) .nav-dropdown-btn{background:var(--accent);color:#fff;border-color:var(--accent)}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.12);min-width:200px;z-index:200;padding:4px}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{display:block;padding:8px 14px;text-decoration:none;font-size:13px;color:#444;border-radius:4px;white-space:nowrap;transition:background .1s;border:none}
.nav-dropdown-menu a:hover{background:#e8eaf6;color:var(--accent)}
.nav-dropdown-menu a.active{background:var(--accent);color:#fff;font-weight:600}

/* ── Controls ───────────────────────────────────────────────────────────── */
.controls{background:#fff;padding:12px 18px;border-radius:8px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.ctrl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctrl-row label{font-weight:bold;font-size:13px;white-space:nowrap;color:#444}
.ctrl-row select,.ctrl-row input[type="text"],.ctrl-row input[type="date"]{padding:6px 10px;border:1px solid #ccc;border-radius:4px;font-size:13px;background:#fff}
.ctrl-sep{width:1px;height:24px;background:#e0e0e0;flex-shrink:0}
.btn-export{padding:6px 14px;background:var(--accent);color:#fff;border:none;border-radius:4px;font-size:13px;font-weight:bold;cursor:pointer;margin-left:auto}
.btn-export:hover{background:var(--accent-dk)}
.btn-clear{padding:6px 12px;background:#757575;color:#fff;border:none;border-radius:4px;font-size:13px;cursor:pointer}
.btn-clear:hover{background:#616161}

/* ── Status line ────────────────────────────────────────────────────────── */
#status{font-size:13px;font-style:italic;color:#666;min-height:18px;margin-bottom:10px;padding-left:2px}

/* ── KPI cards ──────────────────────────────────────────────────────────── */
.kpi-row{display:grid;gap:12px;margin-bottom:14px}
.kpi-card{background:#fff;border-radius:8px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,.1);border-top:3px solid var(--accent)}
.kpi-card.blue{border-top-color:#1565c0}
.kpi-card.green{border-top-color:#2e7d32}
.kpi-card.teal{border-top-color:#00897b}
.kpi-card.amber{border-top-color:#f9a825}
.kpi-card.purple{border-top-color:#7b1fa2}
.kpi-card.orange{border-top-color:#e65100}
.kpi-card.red{border-top-color:#c62828}
.kpi-card.indigo{border-top-color:#3949ab}
.kpi-label{font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.07em;color:#888;margin-bottom:5px}
.kpi-value{font-size:22px;font-weight:bold;color:#111;line-height:1.2}
.kpi-sub{font-size:11px;color:#888;margin-top:3px}

/* ── Chart cards ────────────────────────────────────────────────────────── */
.charts-row{display:grid;gap:12px;margin-bottom:14px}
.chart-card{background:#fff;border-radius:8px;padding:16px 20px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.chart-title{font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.07em;color:#888;margin-bottom:12px}
.chart-wrap{position:relative;height:260px}
.chart-wrap.tall{height:320px}
.chart-wrap.short{height:200px}

/* ── Data table ─────────────────────────────────────────────────────────── */
.table-card{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.1);overflow:hidden;margin-bottom:14px}
.tbl-head{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee}
.tbl-head-title{font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.07em;color:#888}
.tbl-scroll{overflow-x:auto}
table.dt{width:100%;border-collapse:collapse;font-size:13px}
table.dt thead th{background:#f5f5f5;padding:9px 12px;text-align:left;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.05em;color:#666;border-bottom:2px solid #e0e0e0;white-space:nowrap;cursor:pointer;user-select:none}
table.dt thead th.r{text-align:right}
table.dt thead th:hover{background:#ececec}
table.dt thead th.sort-asc::after{content:' ▲';color:var(--accent)}
table.dt thead th.sort-desc::after{content:' ▼';color:var(--accent)}
table.dt tbody tr{border-bottom:1px solid #f0f0f0;transition:background .1s}
table.dt tbody tr:hover{background:var(--accent-row-hover)}
table.dt tbody td{padding:8px 12px;white-space:nowrap}
.td-name{font-weight:bold;color:var(--accent);white-space:normal;min-width:150px;max-width:260px}
.r{text-align:right}
.tbl-footer{padding:8px 16px;font-size:12px;color:#888;background:#fafafa;border-top:1px solid #eee}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 7px;border-radius:10px;font-size:11px;font-weight:bold;white-space:nowrap}
.bu{background:#e8f5e9;color:#2e7d32}
.bd{background:#ffebee;color:#c62828}
.bf{background:#f5f5f5;color:#757575}
.bw{background:#fff3e0;color:#e65100}
.bp{background:#f3e5f5;color:#7b1fa2}

/* ── Insight bar ────────────────────────────────────────────────────────── */
.insight-bar{background:#e8eaf6;border-left:4px solid var(--accent);border-radius:4px;padding:10px 14px;font-size:13px;color:#333;margin-bottom:14px;line-height:1.5}

/* ── Shared modal chrome (pages add their own body content styles) ───────── */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.25);width:100%;max-width:820px;max-height:90vh;overflow-y:auto}
.modal-header{background:#f5f7ff;border-bottom:2px solid #c5cae9;border-radius:10px 10px 0 0;padding:18px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-name{font-size:20px;font-weight:bold;letter-spacing:.02em;color:var(--accent)}
.modal-sub{font-size:13px;color:#666;margin-top:3px}
.modal-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.modal-close{background:#e8eaf6;border:1px solid #c5cae9;color:var(--accent);font-size:18px;cursor:pointer;border-radius:4px;padding:2px 8px;line-height:1.4;flex-shrink:0}
.modal-close:hover{background:#c5cae9}
.modal-body{padding:20px 24px}
.modal-section{margin-bottom:20px}
.modal-section-title{font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.08em;color:#999;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid #eee}
.modal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.modal-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.modal-stat{background:#f9f9f9;border-radius:6px;padding:10px 14px}
.modal-stat-label{font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.06em;color:#aaa;margin-bottom:4px}
.modal-stat-value{font-size:17px;font-weight:bold;color:#111}
.modal-stat-sub{font-size:11px;color:#888;margin-top:2px}
.info-row{display:grid;grid-template-columns:max-content 1fr;column-gap:14px;row-gap:6px;font-size:13px}
.info-lbl{font-weight:bold;color:#666;white-space:nowrap}
.info-val{color:#111}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1200px){.kpi-row{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:900px){.charts-row{grid-template-columns:1fr!important}.charts-row-2{grid-template-columns:1fr!important}.modal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  #app{padding:10px}
  .app-header{padding:10px 14px;gap:10px;margin-bottom:8px}
  .app-header svg{height:26px}
  .app-logo-img{height:26px}
  .hdr-div,.app-header-divider,#header-user,.btn-signout{display:none}
  .hdr-title,.app-header-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:15px}
  .kpi-row{grid-template-columns:repeat(2,1fr)!important;gap:8px}
  .kpi-value{font-size:18px}
  .ctrl-row{flex-direction:column;align-items:stretch}
  .ctrl-row label{font-size:14px;margin-bottom:2px}
  .ctrl-row select,.ctrl-row input[type="text"],.ctrl-row input[type="date"]{font-size:16px;width:100%;box-sizing:border-box;padding:9px 10px}
  .btn-export{margin-left:0;padding:10px 14px;font-size:14px}
  .btn-clear{padding:10px 12px;font-size:14px}
  .modal-grid{grid-template-columns:1fr}
}

/* ── Mobile nav drawer ──────────────────────────────────────────────────── */
.btn-nav-menu{display:none;align-items:center;justify-content:center;background:none;border:none;color:rgba(255,255,255,.85);cursor:pointer;padding:2px 4px;line-height:1;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.btn-nav-menu:hover{opacity:.75}
.btn-nav-menu:active{color:#fff}
#nav-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:500;cursor:pointer}
#nav-overlay.open{display:block}
.nav-drawer-close{display:none;width:100%;box-sizing:border-box;padding:9px 14px 9px 18px;text-align:right;font-size:22px;line-height:1;cursor:pointer;color:#777;background:#f7f7f7;border:none;border-bottom:1px solid #e8e8e8;flex-shrink:0;position:-webkit-sticky;position:sticky;top:0;z-index:10;-webkit-tap-highlight-color:transparent}
.nav-drawer-close:active{color:#111;background:#ebebeb}

@media(max-width:640px){
  .btn-nav-menu{display:flex}
  .page-nav{
    position:fixed;top:0;right:0;bottom:0;
    width:260px;max-width:82vw;background:#fff;z-index:501;
    flex-direction:column;align-items:stretch;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:0;margin:0;gap:0;border-radius:0;
    transform:translateX(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow:-6px 0 28px rgba(0,0,0,.22);
  }
  .page-nav.nav-open{transform:translateX(0)}
  .page-nav>a{
    display:block;padding:13px 20px;border-radius:0;font-size:14px;font-weight:600;
    border:none;border-bottom:1px solid #f2f2f2;white-space:normal;
    border-left:3px solid transparent;background:transparent;color:#444;
    text-align:left;box-sizing:border-box;width:100%;
  }
  .page-nav>a:hover{background:#f5f7ff;color:var(--accent);border-color:transparent}
  .page-nav>a.active{border-left-color:var(--accent);background:#eef0fc;color:var(--accent)}
  .page-nav>a.nav-home{background:#fafafa;color:#555;border-color:transparent}
  .page-nav>a.nav-home:hover{background:#f0f0f0;color:#111}
  .nav-dropdown{display:flex;flex-direction:column;width:100%}
  .nav-dropdown-btn{display:block;width:100%;text-align:left;padding:7px 18px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#999;background:#f5f5f5;border:none;border-bottom:1px solid #ebebeb;border-radius:0;cursor:default;pointer-events:none;font-family:inherit}
  .nav-dropdown-menu{display:block!important;position:static;box-shadow:none;border:none;border-radius:0;min-width:unset;padding:0;background:transparent}
  .nav-dropdown-menu a{display:block;padding:12px 20px 12px 28px;border-radius:0;border-bottom:1px solid #f2f2f2;border-left:3px solid transparent;font-size:14px;color:#444;background:transparent;text-align:left;box-sizing:border-box;white-space:normal}
  .nav-dropdown-menu a:hover{background:#f5f7ff;color:var(--accent)}
  .nav-dropdown-menu a.active{border-left-color:var(--accent);background:#eef0fc;color:var(--accent);font-weight:600}
  .nav-sep{display:none}
  .nav-drawer-close{display:block}
  .nav-drawer-footer{display:block}
}

/* ── Controls filter toggle ─────────────────────────────────────────────── */
.ctrl-toggle{display:none;width:100%;background:none;border:none;padding:6px 0 8px;cursor:pointer;font-size:13px;font-weight:bold;color:#555;align-items:center;justify-content:space-between;gap:6px;box-sizing:border-box}
.ctrl-toggle-label{flex:1;text-align:left}
.ctrl-toggle-chevron{display:inline-block;font-size:11px;color:#999;transition:transform .2s ease;flex-shrink:0}
.controls.ctrl-collapsed .ctrl-toggle-chevron{transform:rotate(-90deg)}
@media(max-width:640px){
  .ctrl-toggle{display:flex}
  .controls.ctrl-collapsed .ctrl-row,.controls.ctrl-collapsed .controls-grid{display:none}
  .controls.ctrl-collapsed{padding-bottom:0}
}

/* ── Nav drawer footer (user + sign-out) ────────────────────────────────── */
.nav-drawer-footer{display:none;margin-top:auto;padding:14px 20px 20px;border-top:2px solid #e8e8e8;background:#fafafa;flex-shrink:0;position:-webkit-sticky;position:sticky;bottom:0}
.nav-drawer-user{font-size:12px;color:#888;margin-bottom:10px;word-break:break-all;line-height:1.4}
.nav-drawer-signout{display:block;width:100%;padding:10px;background:var(--accent);color:#fff;border:none;border-radius:5px;font-size:13px;font-weight:bold;cursor:pointer;text-align:center;letter-spacing:.02em}
.nav-drawer-signout:hover{background:var(--accent-dk)}