/* FLO Express production shell — approved Global Light-First direction V1.1. */
:root{
  color-scheme:light;
  --canvas:#f7f7f5;--surface:#fff;--surface-soft:#f1f2ef;--surface-raised:#fff;
  --ink:#171816;--ink-soft:#5e635c;--ink-muted:#777d75;
  --border:#e2e5df;--border-strong:#cfd4cc;
  --action:#f97316;--action-hover:#df5b08;--action-soft:#fff0e6;
  --success:#117a57;--success-soft:#e8f6f0;
  --warning:#946006;--warning-soft:#fff3d6;
  --danger:#b93636;--danger-soft:#fdecec;
  --focus:#174f8f;--shell-rail:244px;
  --bg:var(--canvas);--card:var(--surface);--card2:var(--surface-soft);
  --line:var(--border);--t1:var(--ink);--t2:var(--ink-soft);--t3:var(--ink-muted);
  --ok:var(--success);--okb:var(--success-soft);--warn:var(--warning);--warnb:var(--warning-soft);
  --err:var(--danger);--errb:var(--danger-soft);--orange:var(--action);--orangeb:var(--action-soft);
  --indigo:var(--focus);--indigob:#e8f0fa;--radius:14px;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#1b1d1b;--surface:#232623;--surface-soft:#2a2e2a;--surface-raised:#303430;
  --ink:#f4f5f2;--ink-soft:#bdc2bb;--ink-muted:#999f97;
  --border:#3a403a;--border-strong:#4b524b;
  --action:#fb8a3c;--action-hover:#ff9d5d;--action-soft:#48291b;
  --success:#67caa3;--success-soft:#203b31;
  --warning:#efb65c;--warning-soft:#40331f;
  --danger:#ee8a8a;--danger-soft:#462727;
  --focus:#8abcf2;
}
html,body{background:var(--canvas);color:var(--ink)}
body{font-family:'DM Sans','IBM Plex Sans Arabic','Noto Sans Arabic',sans-serif;line-height:1.5}
button,input,select,textarea{font:inherit}
button,a,[onclick]{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus)!important;outline-offset:2px
}
.boot-loader{background:var(--canvas)}
.boot-logo{font-family:'DM Sans',sans-serif;font-style:normal;font-weight:800;color:var(--ink);letter-spacing:-1px}
.boot-tag{color:var(--action);letter-spacing:2px}.boot-msg{color:var(--ink-muted)}
.boot-spinner{border-color:var(--border);border-top-color:var(--action)}
.offline-banner{background:var(--warning-soft);border-color:var(--warning);color:var(--warning)}

/* Branch/manager operational shell */
.app-shell{background:var(--canvas);min-height:100vh;min-height:100dvh}
.topnav{
  height:calc(68px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;
  background:color-mix(in srgb,var(--surface) 94%,transparent);color:var(--ink);
  border-bottom:1px solid var(--border);box-shadow:none;backdrop-filter:blur(12px)
}
.topnav-left{min-width:112px}.topnav-center{text-align:start;padding-inline:12px}
.topnav-branch-name{color:var(--ink);font-size:14px;font-weight:750}
.topnav-role{color:var(--ink-muted);opacity:1;text-transform:none;letter-spacing:0;font-size:11px}
#navLogoText{font-style:normal!important;font-weight:800!important;letter-spacing:-.4px!important;opacity:1!important}
#navExpressTag{color:#9f4308!important;background:var(--action-soft)!important}
.topnav-actions{gap:4px}.topnav-icon-btn,.ca-topnav-icon-btn{
  min-width:44px;width:44px;height:44px;border:1px solid transparent;border-radius:10px;
  color:var(--ink-soft);background:transparent
}
.topnav-icon-btn:hover,.ca-topnav-icon-btn:hover{background:var(--surface-soft);color:var(--ink);border-color:var(--border)}
.page-wrap{max-width:1120px;padding:36px 24px calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px)}
.page{animation:productionViewIn .2s ease-out}.page-title{font-size:clamp(24px,3vw,34px);font-weight:750;letter-spacing:-.035em}
.page-sub{color:var(--ink-soft);font-weight:500;font-size:14px;line-height:1.65}
.page-back{color:var(--ink-soft);text-transform:none;letter-spacing:0}
@keyframes productionViewIn{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Surfaces: fewer floating cards, clearer operational rows. */
.dash-header-row{margin-bottom:28px}.dash-section-label,.brand-section-title{color:var(--ink-muted)!important;letter-spacing:.02em!important}
.dash-attn-block,.dash-quick-block,.dash-stats-block,.dash-stock-block{background:transparent!important;border:0!important;box-shadow:none!important}
.dash-grid{gap:28px!important}.dash-stats{border-block:1px solid var(--border);padding-block:12px}
.stat-card,.stock-card,.product-card,.xcard,.branch-card,.brand-section,.rev-section,.order-card,.transfer-card,
.count-card,.pc,.pulse-summary,.security-card{
  background:var(--surface)!important;border:1px solid var(--border)!important;box-shadow:none!important
}
.brand-section,.rev-section{border-radius:14px!important}.xcard,.branch-card,.order-card,.transfer-card{border-radius:14px!important}
.count-row,.staff-row,.history-row,.ca-list-row{background:var(--surface)!important;border-color:var(--border)!important}
.attention-row,.quick-action,.more-item,.cl-launch-btn{background:var(--surface)!important;border-color:var(--border)!important;color:var(--ink)!important}
.attention-row:hover,.quick-action:hover,.more-item:hover,.cl-launch-btn:hover{background:var(--surface-soft)!important}
.dash-quick-grid{gap:10px!important}.quick-action{min-height:56px!important;border-radius:12px!important}
.filter-chip,.status-chip,.ca-tab,.tab-btn{background:transparent!important;color:var(--ink-soft)!important;border-color:var(--border)!important}
.filter-chip.active,.status-chip.active,.ca-tab.on,.tab-btn.on{background:var(--action-soft)!important;color:#a74608!important;border-color:#f4c5a6!important}
.badge,.status-badge{box-shadow:none!important}.badge.ok,.status-badge.ok{background:var(--success-soft)!important;color:var(--success)!important}
.badge.warn,.status-badge.warn{background:var(--warning-soft)!important;color:var(--warning)!important}
.badge.err,.status-badge.err{background:var(--danger-soft)!important;color:var(--danger)!important}
.progress-bar,.progress-track{background:var(--surface-soft)!important}.progress-fill{background:var(--action)!important}

/* Controls */
.btn{min-height:44px;border-radius:10px;font-weight:750;transition:background .18s ease-out,border-color .18s ease-out,color .18s ease-out,box-shadow .18s ease-out}
.btn-brand{background:var(--action)!important;color:#2a1102!important;border:1px solid var(--action)!important}
.btn-brand:hover{background:var(--action-hover)!important;border-color:var(--action-hover)!important;color:#fff!important;opacity:1}
.btn-outline{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--border-strong)!important}
.btn-outline:hover{background:var(--surface-soft)!important}
.btn-err{background:var(--danger)!important}.btn-ok{background:var(--success)!important}
.field label{color:var(--ink-soft)!important;font-weight:700}
.field input,.field select,.field textarea,input,select,textarea{
  background:var(--surface)!important;color:var(--ink)!important;border-color:var(--border-strong)!important;border-radius:10px!important
}
input::placeholder,textarea::placeholder{color:var(--ink-muted)}
.modal-bg{background:rgba(14,16,14,.54);backdrop-filter:blur(3px)}
.modal-box{background:var(--surface-raised)!important;border:1px solid var(--border)!important;border-radius:18px!important;box-shadow:0 24px 70px rgba(0,0,0,.18)!important}
.modal-title{color:var(--ink)!important;letter-spacing:-.02em}
.toast{background:var(--surface-raised)!important;color:var(--ink)!important;border-color:var(--border)!important}

/* Five-item mobile navigation. */
.bottom-nav{
  background:color-mix(in srgb,var(--surface) 96%,transparent);border-color:var(--border);box-shadow:0 -8px 28px rgba(23,24,22,.06);
  backdrop-filter:blur(14px)
}
.bnav-item{color:var(--ink-muted)}.bnav-item.on{color:#a74608}.bnav-item.on .bnav-icon-wrap{background:var(--action-soft)!important}
.bnav-badge{background:var(--danger)!important;color:#fff}
.more-drawer,.more-sheet{background:var(--surface-raised)!important;border-color:var(--border)!important;color:var(--ink)!important}

/* Workspace Owner shell */
#companyAdminView{background:var(--canvas)}
#companyAdminView .ca-shell-topnav{
  min-height:72px;padding:12px 24px;border-color:var(--border);background:color-mix(in srgb,var(--surface) 94%,transparent);
  position:sticky;top:0;z-index:90;backdrop-filter:blur(12px)
}
#companyAdminView .ca-shell-body{max-width:1120px;padding:32px 24px 80px}
#companyAdminView .ca-tabstrip{background:transparent;border-bottom:1px solid var(--border);gap:4px;padding-bottom:10px;overflow-x:auto}
#companyAdminView .ca-tabstrip{scrollbar-width:none;scroll-snap-type:x proximity}
#companyAdminView .ca-tabstrip::-webkit-scrollbar{display:none}
#companyAdminView .ca-tab{scroll-snap-align:start}
#companyAdminView .brand-section h3{font-size:18px;margin-bottom:14px;color:var(--ink)}
#ownerSecurityStatus{background:var(--surface-soft)!important}

@media(min-width:1024px){
  #appView{padding-inline-start:var(--shell-rail)}
  #appView .topnav{position:fixed;top:0;inset-inline-start:var(--shell-rail);inset-inline-end:0}
  #appView .page-wrap{padding-top:112px}
  #appView .bottom-nav{
    position:fixed;inset-block:0;inset-inline-start:0;inset-inline-end:auto;width:var(--shell-rail);height:100vh;
    padding:112px 14px 24px;display:flex;flex-direction:column;gap:6px;border:0;border-inline-end:1px solid var(--border);
    border-radius:0;transform:none;background:var(--surface);box-shadow:none
  }
  #appView .bottom-nav:before{content:'FLO  EXPRESS';position:absolute;inset-block-start:34px;inset-inline:24px;color:var(--ink);font-weight:800;letter-spacing:.08em;font-size:14px}
  #appView .bottom-nav:after{content:'OPERATIONS';position:absolute;inset-block-start:56px;inset-inline:24px;color:var(--action);font-weight:800;letter-spacing:.16em;font-size:9px}
  #appView .bnav-item{flex:0 0 auto;width:100%;height:52px;min-height:52px;display:grid;grid-template-columns:38px 1fr;align-items:center;text-align:start;border-radius:10px;padding:0 10px;gap:6px}
  #appView .bnav-item:hover{background:var(--surface-soft)}
  #appView .bnav-item.on{background:var(--action-soft)}
  #appView .bnav-icon-wrap{margin:0!important}.bnav-item span:last-child{font-size:13px!important;text-align:start}
  #companyAdminView{padding-inline-start:var(--shell-rail)}
  #companyAdminView .ca-shell-topnav{margin-inline-start:0}
  #companyAdminView .ca-tabstrip{
    position:fixed;inset-block:0;inset-inline-start:0;width:var(--shell-rail);height:100vh;padding:112px 14px 24px;
    display:flex;flex-direction:column;gap:6px;background:var(--surface);border:0;border-inline-end:1px solid var(--border);z-index:100
  }
  #companyAdminView .ca-tabstrip:before{content:'FLO  EXPRESS';position:absolute;inset-block-start:34px;inset-inline:24px;color:var(--ink);font-weight:800;letter-spacing:.08em;font-size:14px}
  #companyAdminView .ca-tab{width:100%;min-height:48px;text-align:start;border:0;border-radius:10px;padding-inline:14px}
  #companyAdminView .ca-tab.on{border:0!important}
  #companyAdminView .ca-shell-body>div>.btn-full{width:auto;min-width:190px;margin-inline-start:auto!important;padding-inline:26px}
}
@media(max-width:767px){
  .topnav{padding-inline:8px}.topnav-left{min-width:auto}.topnav-center{padding-inline:6px}
  .page-wrap{padding:24px 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px)}
  .page-title{font-size:25px}.dash-grid{gap:20px!important}
  #companyAdminView .ca-shell-topnav{padding-inline:16px}
  #companyAdminView .ca-shell-body{padding:20px 16px 70px}
  #companyAdminView .ca-tab{min-width:max-content;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.page{animation:none}}