/* ============================================================
   Receivables — professional blue dashboard theme
   ============================================================ */
:root {
  --bg:        #f4f6fb;
  --card:      #ffffff;
  --ink:       #16213a;
  --ink-soft:  #5b6678;
  --line:      #e6e9f0;
  --brand:     #2563c9;
  --brand-dark:#1c4ea3;
  --brand-50:  #eaf1fc;
  --sidebar:   #0f2747;
  --sidebar-2: #16315a;

  --due-ok:   #1f9d6b;
  --due-warn: #c98a00;
  --due-hot:  #d96a2b;
  --due-crit: #d23b3b;

  --radius: 12px;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1,h2,h3 { font-weight: 600; }

/* ---------- auth visibility ---------- */
body.loading #loginScreen, body.loading #appShell { display: none; }
body.guest  #appShell { display: none; }
body.guest  #loginScreen { display: flex; }
body.authed #loginScreen { display: none; }
body.authed #appShell { display: flex; }

/* ---------- login ---------- */
#loginScreen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px;
  background: linear-gradient(135deg, #0f2747, #1c4ea3); }
.login-card { background: var(--card); border-radius: 16px; padding: 36px 32px; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,0.25); }
.login-mark { align-self: flex-start; font-size: 22px; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--brand); color: #fff; border-radius: 12px; margin-bottom: 18px; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-sub { margin: 4px 0 22px; color: var(--ink-soft); font-size: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.login-card input { font-size: 14px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; }
.login-card input:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }

/* ---------- shell ---------- */
#appShell { min-height: 100vh; }
.sidebar { width: 230px; background: var(--sidebar); color: #cdd7e6; display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 30; }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 20px 20px 18px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left; color: inherit; font-family: var(--sans);
  border-radius: 0; transition: background .15s; }
.sidebar-brand:hover { background: var(--sidebar-2); }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.brand-sub { font-size: 12px; color: #9fb4d4; font-weight: 500; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; flex: 1; }
.nav-item { appearance: none; border: 0; cursor: pointer; background: transparent; color: #aab8cc;
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; text-align: left; transition: background .15s, color .15s; }
.nav-item i { font-size: 19px; }
.nav-item:hover { background: var(--sidebar-2); color: #fff; }
.nav-item.active {
  background: linear-gradient(160deg, #2b7de0, var(--brand));
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(27,95,174,.32);
  letter-spacing: .2px;
  transform: translateZ(0);
}
.nav-item.active i { font-size: 21px; }
.nav-item.active span { font-size: 15.5px; }
.nav-item { position: relative; }
.nav-newtab { margin-left: auto; opacity: 0; color: inherit; font-size: 15px; padding: 2px 4px; border-radius: 5px; transition: opacity .12s; }
.nav-item:hover .nav-newtab { opacity: .7; }
.nav-newtab:hover { opacity: 1 !important; background: rgba(255,255,255,0.15); }
#navCtxMenu { position: fixed; z-index: 70; background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 30px rgba(0,0,0,0.18); padding: 4px; }
#navCtxMenu[hidden] { display: none; }
#navCtxMenu button { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink); padding: 8px 12px; border-radius: 7px; white-space: nowrap; }
#navCtxMenu button:hover { background: var(--brand-50); color: var(--brand-dark); }
.sidebar-foot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.user-meta { display: flex; flex-direction: column; min-width: 0; }
.user-meta > span:first-child { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #9fb4d4; }

/* ---------- main ---------- */
.main { margin-left: 230px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(244,246,251,0.9); backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 14px; padding: 16px 26px; border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 0; font-size: 20px; flex: 1; }
.topbar-actions { display: flex; gap: 10px; }
#menuToggle { display: none; }
.content { padding: 22px 26px 60px; }
.page { display: none; animation: fade .2s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-sub { margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; }

/* ---------- buttons ---------- */
.btn-primary { appearance: none; border: 0; cursor: pointer; background: var(--brand); color: #fff; font-family: var(--sans);
  font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 9px; display: inline-flex; align-items: center; gap: 7px; transition: background .15s; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-soft { appearance: none; cursor: pointer; background: #eef1f7; color: var(--ink); border: 0; border-radius: 9px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 10px 16px; }
.btn-soft:hover { background: #e2e7f1; }
.btn-ghost { appearance: none; cursor: pointer; background: rgba(255,255,255,0.08); color: #cdd7e6; border: 0; border-radius: 9px;
  font-size: 16px; padding: 8px 11px; display: grid; place-items: center; }
.btn-ghost:hover { background: rgba(255,255,255,0.16); color: #fff; }
.icon-btn { appearance: none; cursor: pointer; background: transparent; border: 0; color: var(--ink-soft); font-size: 18px; padding: 6px 8px; border-radius: 8px; }
.icon-btn:hover { background: #eef1f7; color: var(--ink); }
.btn-add { background: var(--brand); color: #fff; border: 0; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 9px; display: inline-flex; align-items: center; gap: 7px; }
.btn-add:hover { background: var(--brand-dark); }
.btn-mini { appearance: none; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 7px; font-size: 12px; font-weight: 600; padding: 5px 10px; }
.btn-mini:hover { background: #f3f5fa; }
.btn-mini.danger { color: var(--due-crit); border-color: #f0cfcf; }
.btn-mini.danger:hover { background: #fcf0f0; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- cards & kpis ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.card-title { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; align-items: center; gap: 14px; }
.kpi > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kpi-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; }
.i-blue { background: #e8f0fd; color: #2563c9; } .i-green { background: #e3f6ee; color: #1f9d6b; }
.i-amber { background: #fcf2dd; color: #b9820a; } .i-red { background: #fbe7e7; color: #d23b3b; }
.i-gray { background: #eef1f6; color: #5b6678; }
.kpi-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.kpi-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.kpi-label i { font-size: 15px; color: var(--brand); }
.kpi-sub { font-size: 11px; color: var(--due-ok); font-weight: 600; margin-top: 2px; }
.kpi-value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 23px; font-weight: 700; letter-spacing: -.01em; }
.kpi-meta { font-size: 12px; color: var(--ink-soft); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- charts ---------- */
.chart { display: flex; flex-direction: column; gap: 13px; }
.chart-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.chart-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-track { display: flex; flex-direction: column; gap: 4px; }
.chart-bar-wrap { background: #eef1f6; border-radius: 5px; height: 15px; overflow: hidden; display: flex; }
.chart-bar { height: 100%; }
.chart-bar.sales { background: var(--brand); } .chart-bar.collected { background: #6fae8e; }
.chart-bar.due { background: var(--due-crit); } .chart-bar.notdue { background: var(--brand); }
.chart-figure { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-soft); }
.chart-legend { display: flex; gap: 16px; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 3px; }
.dot.sales { background: var(--brand); } .dot.collected { background: #6fae8e; }
.dot.due { background: var(--due-crit); } .dot.notdue { background: var(--brand); }
.chart-empty { color: #9aa3b2; font-size: 13px; padding: 8px 0; }

/* ---------- tables ---------- */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; }
table.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
  font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #f8fafc; position: sticky; top: 0; }
.ledger td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody tr:hover { background: #f8fafc; }
.ledger .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ledger tfoot td { padding: 12px 14px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700;
  border-top: 2px solid var(--ink); background: #f8fafc; }
.ledger tfoot td.num { text-align: right; }
.b-warn { color: var(--due-warn); } .b-hot { color: var(--due-hot); } .b-crit { color: var(--due-crit); font-weight: 700; } .b-zero { color: #c2c7d0; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase; }
.pill.paid { background: #e0f3ea; color: #136c47; } .pill.partial { background: #fcefcf; color: #855600; } .pill.unpaid { background: #fbdedb; color: #8a2017; }

/* progress */
.progress { display: flex; flex-direction: column; gap: 3px; min-width: 110px; }
.progress-track { height: 9px; border-radius: 5px; background: #e9edf3; overflow: hidden; }
.progress-fill { height: 100%; transition: width .3s; }
.progress-fill.inprogress { background: var(--due-crit); }
.progress-fill.ready { background: var(--due-ok); }
.progress-fill.done { background: var(--brand); }
#ordersTable { font-size: 12.5px; }
#ordersTable th { font-size: 10px; padding: 9px 10px; }
#ordersTable td { padding: 9px 10px; }
#ordersTable .btn-mini { font-size: 11px; padding: 4px 8px; }
#ordersTable .progress { min-width: 96px; }
.btn-mini.ready-btn { color: #fff; background: var(--due-ok); border-color: var(--due-ok); }
.btn-mini.ready-btn:hover { background: #178a5c; }
.progress-label { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- filters ---------- */
.filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.filter { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.filter select, .filter input { font-family: var(--sans); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--ink); padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); min-width: 170px; }
.filter select:focus, .filter input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

/* ---------- forms ---------- */
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 15px; }
.form input, .form select { font-family: var(--sans); font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; color: var(--ink); }
.form input:focus, .form select:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.form input[readonly] { background: #eef1f6; color: var(--ink-soft); font-family: var(--mono); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.form-msg { margin: 12px 0 0; font-size: 13px; font-weight: 600; min-height: 18px; }
.form-msg.ok { color: var(--due-ok); } .form-msg.err { color: var(--due-crit); }
.login-fields { margin: 4px 0 14px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; background: #f8fafc; }
.login-fields-head { margin: 0 0 12px; font-size: 13px; font-weight: 700; }
.login-fields-head span { font-weight: 400; color: var(--ink-soft); }
.setup-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.setup-form input, .setup-form select { font-family: var(--sans); font-size: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; flex: 1; min-width: 120px; }
.setup-form input:focus, .setup-form select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.setup-form .btn-primary { flex: 0 0 auto; }
.route-box { margin: 4px 0 16px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 10px; background: #f8fafc; }
.route-head { margin: 0 0 10px; font-size: 13px; font-weight: 700; }
.route-head span { font-weight: 400; color: var(--ink-soft); }
.check { flex-direction: row !important; align-items: center; gap: 9px !important; font-weight: 500 !important; margin-bottom: 9px !important; }
.check input { width: 17px; height: 17px; accent-color: var(--brand); }
.check span { color: var(--ink-soft); font-weight: 400; font-size: 12px; }
.route-preview { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--brand-dark); }
.ms-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.ms-controls label { flex: 0 0 auto; margin: 0; }
.ms-controls input { width: 90px; }
.ms-controls #msTotalPct { margin-left: auto; }
.ms-head, .ms-row { display: grid; grid-template-columns: 34px 1fr 1.2fr 1.2fr 1fr; gap: 8px; align-items: center; }
.ms-head { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); padding: 4px 2px; }
.ms-row { margin-bottom: 7px; }
.ms-row input { font-family: var(--sans); font-size: 13px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ms-row .ms-seq { font-weight: 700; color: var(--ink-soft); }
.ms-row .ms-amt { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.type-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.type-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.type-card-head .tname { font-size: 15px; font-weight: 600; margin-right: auto; }
.stage-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stage-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-50); color: var(--brand-dark); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; }
.stage-chip .seq { background: var(--brand); color: #fff; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; }
.stage-chip.optional { background: #fff4e0; color: #9a6a00; border: 1px dashed #e0b25e; }
.stage-chip.optional .seq { background: #d9962a; }
.stage-chip button { appearance: none; border: 0; background: transparent; cursor: pointer; color: inherit; font-size: 11px; padding: 0; font-weight: 600; }
.stage-chip button[disabled] { opacity: .25; cursor: default; }
.stage-chip .chip-name { font-weight: 700; text-decoration: underline dotted; text-underline-offset: 2px; font-size: inherit; }
.stage-chip .chip-name:hover { color: var(--brand); }
.branch-btns { display: flex; gap: 8px; margin-top: 6px; }
.branch-btn { flex: 1; border: 1px solid var(--brand); background: var(--brand-50); color: var(--brand-dark); border-radius: 8px; padding: 7px 6px; font-size: 12px; font-weight: 600; cursor: pointer; }
.branch-btn:hover { background: var(--brand); color: #fff; }
.branch-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.branch-tag.local { background: #e3f3e6; color: #1f7a37; }
.branch-tag.foreign { background: #e7eefc; color: #244fcc; }
.stage-arrow { color: var(--ink-soft); font-size: 13px; }
.stage-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.stage-add select { font-family: var(--sans); font-size: 13px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

/* ---- order tracking screen ---- */
.track-search { display: flex; align-items: center; gap: 10px; }
.track-search > i { font-size: 18px; color: var(--ink-soft); }
.track-search input { flex: 1; font-family: var(--sans); font-size: 15px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; }
.track-search input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.track-result { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; margin-top: 10px; cursor: pointer; }
.track-result:hover { background: var(--brand-50); border-color: var(--brand); }
.track-result .tr-no { font-weight: 700; }
.track-result .tr-meta { color: var(--ink-soft); font-size: 13px; margin-left: auto; }
.track-order-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.track-order-head h2 { margin: 0; font-size: 19px; }
.track-order-head p { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; }
.stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stage-box { border-radius: 12px; padding: 14px; border: 1px solid var(--line); }
.stage-box.done { background: var(--brand-50); border-color: #bcd3f3; }
.stage-box.current { border: 2px solid var(--brand); background: #fff; }
.stage-box.todo { background: #f7f8fa; opacity: 0.55; border-style: dashed; }
.stage-box .st-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.stage-box .st-name { font-size: 13px; font-weight: 700; }
.stage-box.done .st-name { color: var(--brand-dark); }
.stage-box .st-info { font-size: 12px; color: var(--ink-soft); }
.stage-box.done .st-info { color: #2a5fb0; }
.stage-approve { margin-top: 10px; width: 100%; background: var(--brand); color: #fff; border: 0; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 12px; padding: 7px; border-radius: 8px; }
.stage-approve:hover { background: var(--brand-dark); }
.stage-box.overdue { border-color: var(--due-crit) !important; box-shadow: 0 0 0 1px var(--due-crit) inset; }
.overdue-badge { display: inline-block; background: var(--due-crit); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 4px; }
.stage-avg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stage-avg { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.stage-avg .sa-name { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.stage-avg .sa-days { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--brand); }
.stage-avg .sa-n { font-size: 11px; color: var(--ink-soft); }
.pay-history { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; max-height: 160px; overflow:auto; }
.pay-history .pay-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.pay-history .pay-row:last-child { border-bottom: 0; }

/* ---- RFQ items ---- */
.rfq-head, .rfq-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 0.7fr 28px; gap: 6px; align-items: center; }
.rfq-head { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); padding: 4px 2px; }
.rfq-row { margin-bottom: 6px; }
.rfq-row input, .rfq-row select { font-family: var(--sans); font-size: 12.5px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; min-width: 0; }
.rfq-row .rfq-del { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--due-crit); font-size: 15px; }
.rfq-response { margin-top: 14px; background: var(--brand-50); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.rfq-response p { margin: 0 0 6px; }
.rd-price { font-family: var(--sans); font-size: 12px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; }

/* ---------- insights dashboard ---------- */
.filterbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.filterbar-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); padding-bottom: 9px; }
.widget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.widget { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.widget.full { grid-column: 1 / -1; }
.widget-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.widget-head .wtitle { font-size: 14px; font-weight: 600; margin-right: auto; }
.widget-head select { font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; color: var(--ink); }
.widget-head select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.chart-type-btns { display: inline-flex; gap: 2px; background: #eef1f6; border-radius: 8px; padding: 2px; }
.chart-type-btns button { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--ink-soft); font-size: 15px; padding: 5px 9px; border-radius: 6px; }
.chart-type-btns button.active { background: #fff; color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.widget-canvas { width: 100%; height: 260px; }
.widget-x { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--ink-soft); font-size: 15px; padding: 4px 6px; border-radius: 6px; }
.widget-x:hover { background: #fcecec; color: var(--due-crit); }
.add-widget-btn { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- slide-over ---------- */
#slideoverBackdrop { position: fixed; inset: 0; background: rgba(15,39,71,0.4); z-index: 40; }
#slideoverBackdrop[hidden] { display: none; }
.slideover { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; background: var(--card);
  z-index: 41; box-shadow: -12px 0 40px rgba(0,0,0,0.16); transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; }
.slideover.open { transform: translateX(0); }
.slideover-wide { width: 640px; }
.so-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.so-head h3 { margin: 0; font-size: 17px; }
.so-body { padding: 22px; overflow: auto; }

/* ---------- modal ---------- */
#modalOverlay { position: fixed; inset: 0; z-index: 50; background: rgba(15,39,71,0.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
#modalOverlay[hidden] { display: none; }
.modal { background: var(--card); border-radius: 14px; width: 100%; max-width: 460px; box-shadow: 0 24px 60px rgba(0,0,0,0.25); overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 20px; max-height: 72vh; overflow-y: auto; }
.modal-body label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.modal-body input, .modal-body select { font-family: var(--sans); font-size: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfe; }
.modal-body input:focus, .modal-body select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pay-row .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- toast ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff;
  padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 60; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- role visibility ---------- */
body.role-rep .admin-only,
body.role-employee .admin-only { display: none !important; }
/* employees only work from the Orders queue */
body.role-employee .nav-item[data-page="dashboard"],
body.role-employee .nav-item[data-page="invoices"],
body.role-employee .nav-item[data-page="customers"],
body.role-employee .nav-item[data-page="aging"] { display: none !important; }
.hint { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); }
.field-with-add { display: flex; gap: 8px; align-items: stretch; }
.field-with-add select { flex: 1; }
.btn-inline-add { flex: 0 0 auto; appearance: none; cursor: pointer; border: 1px solid var(--brand); background: var(--brand-50); color: var(--brand-dark); border-radius: 9px; font-size: 17px; padding: 0 12px; display: grid; place-items: center; }
.btn-inline-add:hover { background: var(--brand); color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  #menuToggle { display: grid; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .page, .toast, .slideover { animation: none; transition: none; } }

/* company profile + order items */
.company-grid { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.company-logo { display: flex; flex-direction: column; align-items: center; }
.logo-drop { width: 180px; height: 110px; border: 2px dashed var(--line); border-radius: 10px; display: grid; place-items: center; cursor: pointer; text-align: center; color: var(--ink-soft); font-size: 12px; overflow: hidden; }
.logo-drop img { max-width: 100%; max-height: 100%; display: none; }
.logo-drop i { font-size: 26px; color: var(--brand); }
.company-fields .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.items-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 12px; }
.items-head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.items-box input { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.items-totals { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; margin-top: 10px; font-size: 13px; }
.items-totals .grand { color: var(--brand); font-size: 15px; }
@media (max-width: 720px) { .company-grid { grid-template-columns: 1fr; } .company-fields .grid2 { grid-template-columns: 1fr; } }

/* live customer autocomplete */
.ac-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(20,40,80,.13); max-height: 240px; overflow-y: auto; margin-top: 3px; }
.ac-item { padding: 8px 11px; font-size: 13px; cursor: pointer; }
.ac-item:hover, .ac-item.active { background: var(--brand-50); color: var(--brand-dark); }

/* permissions + required-fields checkboxes */
.perm-box { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 8px 0; }
.perm-title { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.perm-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.perm-item input { width: auto; }

/* notifications bell + panel */
.notif-wrap { position: relative; }
.notif-btn { position: relative; }
.notif-badge { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.notif-panel { position: absolute; top: 110%; right: 0; width: 360px; max-width: 90vw; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(20,40,80,.18); z-index: 100; overflow: hidden; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.notif-list { max-height: 420px; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 11px 14px; cursor: pointer; }
.notif-item:hover { background: #f5f7fb; }
.notif-item i { font-size: 18px; margin-top: 2px; }
.notif-item.lvl-danger i { color: #e5484d; }
.notif-item.lvl-warn i { color: #f5a524; }
.notif-item.lvl-info i { color: var(--brand); }
.notif-item span { display: flex; flex-direction: column; }
.notif-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.notif-detail { font-size: 12px; color: var(--ink-soft); }
.notif-empty { padding: 22px 14px; text-align: center; color: var(--ink-soft); font-size: 13px; }
/* permission + rule checkboxes */
.perm-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 5px 0; margin-right: 16px; }
.perm-check input { width: auto; }
.rule-days { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); margin: 2px 0 8px 24px; }

/* employee hourly-rate tag */
.rate-tag { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--brand); background: var(--brand-50, #eef3fb); padding: 6px 12px; border-radius: 8px; }

/* job order form */
.jo-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.jo-form textarea { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.jo-section { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.jo-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.jo-table input, .jo-table select { padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; }
.jo-totals { display: flex; justify-content: flex-end; margin-top: 12px; font-size: 14px; }
.jo-totals .grand { color: var(--brand); }

/* setup tabs */
.setup-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; border-bottom: 2px solid var(--line); padding-bottom: 2px; }
.setup-tabs .stab { appearance: none; cursor: pointer; background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--ink-soft); font-size: 14px; font-weight: 600; padding: 9px 16px; display: inline-flex; align-items: center; gap: 7px; border-radius: 8px 8px 0 0; }
.setup-tabs .stab:hover { background: #f3f6fb; color: var(--ink); }
.setup-tabs .stab.active { color: var(--brand); border-bottom-color: var(--brand); background: var(--brand-50, #eef3fb); }

/* insights design customizer */
#insights { --in-bg: #f4f6fa; --in-card: #ffffff; }
#insights .widget, #insights .card { background: var(--in-card); transition: background .2s; }
#insights.in-dark { color: #e6edf6; }
#insights.in-dark .card-title, #insights.in-dark .kpi-label, #insights.in-dark .kpi-value,
#insights.in-dark .widget-head select { color: #e6edf6; }
#insights.in-dark .widget, #insights.in-dark .card, #insights.in-dark .kpi { border-color: #243244; }
#insights.in-dark .widget-head select { background: #1d2a3a; border-color: #2c3e54; }
#insights.in-compact .widget { min-height: 150px; }
#insights.in-compact .widget-canvas { height: 150px; }
.design-form { display: flex; flex-direction: column; gap: 12px; }
.design-row { display: flex; align-items: center; gap: 14px; }
.design-row > label { width: 180px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.design-row input[type="color"] { width: 54px; height: 32px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: none; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { appearance: none; border: 0; background: #fff; padding: 7px 14px; cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.seg button.active { background: var(--brand); color: #fff; }
.pal-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pal-swatch { display: inline-flex; gap: 2px; padding: 4px; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; background: #fff; }
.pal-swatch span { width: 16px; height: 22px; border-radius: 3px; display: block; }
.pal-swatch.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-50, #eef3fb); }

/* invoice payment-status tabs */
.status-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.status-tabs .stab { appearance: none; cursor: pointer; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; font-weight: 600; padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; }
.status-tabs .stab:hover { background: #f3f6fb; }
.status-tabs .stab.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* track stepper */
.track-stepper-card { padding-bottom: 8px; }
.track-progress { height: 8px; background: #eef1f6; border-radius: 99px; overflow: hidden; margin: 10px 0 18px; }
.track-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand,#2563c9), #4f86db); border-radius: 99px; transition: width .4s ease; }
.stepper { display: flex; flex-direction: column; }
.step-row { display: flex; gap: 14px; position: relative; padding-bottom: 4px; }
.step-rail { position: relative; display: flex; flex-direction: column; align-items: center; width: 36px; flex-shrink: 0; }
.step-rail::after { content: ''; position: absolute; top: 36px; bottom: -4px; width: 2px; background: #dde3ec; }
.step-row:last-child .step-rail::after { display: none; }
.step-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: #eef1f6; color: #8a93a3; border: 2px solid #dde3ec; z-index: 1; }
.step-content { flex: 1; padding-bottom: 18px; min-width: 0; }
.step-title { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.step-row.done .step-num { background: #e7f6ee; color: #15824b; border-color: #b6e4ca; }
.step-row.current .step-num { background: var(--brand,#2563c9); color: #fff; border-color: var(--brand,#2563c9); box-shadow: 0 0 0 4px var(--brand-50,#eef3fb); }
.step-row.current .step-content { background: var(--brand-50,#f4f8ff); border: 1px solid #d7e3f8; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.step-row.current .step-title { color: var(--brand-dark,#1c4ea3); }
.step-row.overdue.current .step-content { background: #fff3f3; border-color: #f3c9c9; }
.step-row .st-info { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.step-row .stage-approve { margin-top: 10px; }

/* track stepper inside modal */
#trackModalBody .track-stepper-card { border: 0; box-shadow: none; padding: 0; margin: 0; }
#trackModalBody .track-order-head h2 { font-size: 18px; }

/* financial statements */
.fin-upload { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.fin-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-meta .pill, #finMeta .pill { background: #eef1f6; color: var(--ink-soft); padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.pill-ok { background: #e7f6ee !important; color: #15824b !important; }
.pill-warn { background: #fdecea !important; color: #c0392b !important; }
.fin-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.fin-tabs .stab { appearance: none; cursor: pointer; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); font-size: 14px; font-weight: 600; padding: 9px 16px; display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; }
.fin-tabs .stab:hover { background: #f3f6fb; }
.fin-tabs .stab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.fin-statement { max-width: 820px; }
.fin-table { width: 100%; border-collapse: collapse; }
.fin-table td { padding: 8px 12px; border-bottom: 1px solid #eef1f5; font-size: 14px; }
.fin-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-table tr.fin-sec td { background: #f6f8fc; font-weight: 700; color: var(--brand-dark, #1c4ea3); border-top: 1px solid #e3e9f2; padding-top: 10px; }
.fin-table tr.fin-total td { font-weight: 700; border-top: 2px solid #d7deea; }
.fin-table tr.fin-total.strong td { background: #eef3fb; font-size: 15px; }
.fin-ok { color: #15824b; font-weight: 600; margin-top: 14px; display: flex; align-items: center; gap: 6px; }
.fin-warn { color: #c0392b; font-weight: 600; margin-top: 10px; display: flex; align-items: center; gap: 6px; }

/* financial KPI cards + change indicators */
.kpi-fin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-fin { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; border-left: 4px solid #cbd5e1; }
.kpi-fin.good { border-left-color: #1aa565; }
.kpi-fin.bad { border-left-color: #e5484d; }
.kpi-fin.warn { border-left-color: #f5a623; }
.kpi-fin.neutral { border-left-color: var(--brand, #2563c9); }
.kpi-fin-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.kpi-fin-value { font-size: 23px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-fin-sub { font-size: 11.5px; color: #9aa3b2; }
.fin-table thead th { text-align: left; font-size: 12px; color: #9aa3b2; padding: 4px 12px; font-weight: 600; }
.fin-table thead th.num { text-align: right; }
.fin-table td.chg { font-size: 12.5px; font-weight: 600; width: 70px; }
.fin-table td.chg.up { color: #1aa565; }
.fin-table td.chg.down { color: #e5484d; }
.fin-ok-row td { color: #15824b; font-weight: 700; border-top: 2px solid #b6e4ca; }
.fin-warn-row td { color: #c0392b; font-weight: 700; border-top: 2px solid #f3c9c9; }
@media print {
  .sidebar, .topbar, #finTabs .btn-soft, .fin-upload, #nav, header { display: none !important; }
  .fin-statement { max-width: 100% !important; box-shadow: none !important; }
  body { background: #fff !important; }
}

/* financial drill-down */
.fin-exp { appearance: none; border: 0; background: none; cursor: pointer; color: var(--brand, #2563c9); padding: 0 6px 0 0; font-size: 14px; vertical-align: middle; transition: transform .15s; display: inline-flex; }
.fin-exp.open { transform: rotate(90deg); }
.fin-exp-spacer { display: inline-block; width: 20px; }
.fin-line td { font-weight: 500; }
.fin-detrow > td { padding: 0 0 0 26px !important; background: #fafcff; }
.fin-subtable { width: 100%; border-collapse: collapse; margin: 2px 0 6px; }
.fin-subtable td { padding: 5px 12px; font-size: 13px; color: var(--ink-soft); border-bottom: 1px dashed #e8edf4; }
.fin-subtable td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.fin-kid-code { display: inline-block; min-width: 78px; color: #9aa3b2; font-variant-numeric: tabular-nums; font-size: 12px; }

/* chart of accounts editor */
.coa-table td { font-size: 13px; padding: 7px 12px; }
.coa-code { font-variant-numeric: tabular-nums; color: #6b7280; font-size: 12.5px; }
.coa-tag { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 11.5px; font-weight: 700; }
.coa-tag.side-asset { background: #e7f1ff; color: #1c4ea3; }
.coa-tag.side-liab { background: #fdecea; color: #c0392b; }
.coa-tag.side-equity { background: #eafaf1; color: #15824b; }
.coa-tag.side-rev { background: #f3e8ff; color: #7c3aed; }
.coa-tag.side-exp { background: #fff4e5; color: #b9770e; }
.coa-custom { display: inline-block; background: #fff7e0; color: #a86b00; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-inline-end: 6px; }

/* lifecycle badges (track) */
.lc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.lc-invoicing { background: #f3e8ff; color: #6b21a8; }
.lc-progress { background: #e7f1ff; color: #1c4ea3; }

/* file uploads + customer library */
.upload-box { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: #fafcff; }
.file-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef3fb; color: #1c4ea3; border-radius: 18px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; }
.file-chip button { border: 0; background: none; color: #c0392b; font-size: 15px; cursor: pointer; line-height: 1; }
.file-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef1f5; }
.file-row .file-name { flex: 1; font-size: 13.5px; word-break: break-all; }
.file-row .ti { color: var(--brand); font-size: 18px; }
.lib-results { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-cust { appearance: none; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.lib-cust:hover { background: var(--brand-50, #eef3fb); border-color: var(--brand); }
#libOrders { margin-top: 14px; }

/* uninvoiced note in track value column */
.uninv-note { font-size: 11px; color: #b9770e; font-weight: 600; }

/* smart document uploads */
.smart-uploads { border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: #fafcff; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.smart-slot { display: flex; flex-direction: column; gap: 5px; }
.smart-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.smart-slot input[type=file] { font-size: 12px; }
.smart-status { font-size: 12px; min-height: 16px; color: #6b7280; }
.smart-status.ok { color: #15824b; font-weight: 600; }
.smart-status.err { color: #c0392b; }

/* invoiced note in track value column */
.inv-note { font-size: 11px; color: #15824b; font-weight: 600; }

/* approval bell */
.bell-btn { position: relative; appearance: none; border: 1px solid var(--line); background: #fff; border-radius: 10px; width: 40px; height: 38px; cursor: pointer; color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; }
.bell-btn .ti { font-size: 19px; }
.bell-count { position: absolute; top: -7px; right: -7px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.bell-btn.blinking { color: #e5484d; border-color: #f3c9c9; animation: bellpulse 1s infinite; }
@keyframes bellpulse { 0%,100% { background: #fff; } 50% { background: #fdecea; } }

/* document type badge + library uploader */
.kind-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; background: #eef3fb; color: #1c4ea3; white-space: nowrap; }
.kb-proforma { background: #f3e8ff; color: #6b21a8; }
.kb-job_order { background: #e7f6ec; color: #15824b; }
.kb-quote { background: #fff4e5; color: #b9770e; }
.kb-po { background: #e7f1ff; color: #1c4ea3; }
.lib-uploader { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: #fafcff; }
.lib-uploader label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; }
.lib-uploader select { min-width: 220px; }

/* permissions matrix */
.perm-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.perm-bulk { display: flex; gap: 6px; margin-bottom: 8px; }
.perm-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.perm-matrix th, .perm-matrix td { border: 1px solid var(--line); padding: 7px 8px; text-align: center; }
.perm-matrix th { background: #f4f7fb; font-weight: 700; font-size: 12px; }
.perm-matrix .perm-mod { text-align: right; font-weight: 600; white-space: nowrap; }
.perm-cell input { width: 17px; height: 17px; cursor: pointer; }
.perm-na { color: #c9ced8; }

/* payment row actions */
.pay-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.pay-actions { display: inline-flex; gap: 6px; }

/* order review (approval) modal */
.rev-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.rev-table td { padding: 7px 10px; border-bottom: 1px solid #eef1f5; font-size: 13.5px; }
.rev-table .rev-k { color: var(--ink-soft); font-weight: 600; width: 40%; }
.rev-table .rev-v { font-weight: 600; }
.rev-h { margin: 14px 0 8px; font-size: 14px; }
.rev-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

/* dashboard welcome banner + quick actions */
.welcome-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(120deg, var(--brand, #2563c9), #1c4ea3); color: #fff;
  border-radius: 16px; padding: 22px 26px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(37,99,201,0.22); }
.welcome-title { margin: 0; font-size: 22px; font-weight: 800; }
.welcome-sub { margin: 4px 0 0; opacity: 0.9; font-size: 13.5px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.qa-btn { appearance: none; border: 0; background: rgba(255,255,255,0.16); color: #fff; font-weight: 700;
  font-size: 13.5px; padding: 10px 16px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  backdrop-filter: blur(2px); transition: background .15s; }
.qa-btn:hover { background: rgba(255,255,255,0.28); }

/* statement modal */
.stmt-table th, .stmt-table td { font-size: 12.5px; }
.stmt-balance { margin: 12px 0; padding: 10px 14px; background: #eef3fb; border-radius: 8px; font-size: 15px; text-align: center; color: #1c4ea3; }

/* track stage-duration timeline */
.track-timeline-card { margin-bottom: 14px; }
.tl-title { font-size: 15px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.tl-total { margin-left: auto; font-size: 13px; font-weight: 700; color: #1b5fae; background: #eef3fb; padding: 4px 12px; border-radius: 20px; }
.tl-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; }
.tl-cell { flex: 1; min-width: 120px; border-radius: 10px; padding: 12px 10px; text-align: center; border: 1.5px solid #e4e9f0; background: #fbfcfe; position: relative; }
.tl-cell.done { border-color: #bfe3cd; background: #f1faf4; }
.tl-cell.current { border-color: #1b5fae; background: #eef3fb; box-shadow: 0 2px 10px rgba(27,95,174,.12); }
.tl-cell.todo { opacity: .65; }
.tl-dept { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.tl-dur { font-size: 18px; font-weight: 800; color: #1b5fae; }
.tl-cell.done .tl-dur { color: #15824b; }
.tl-branch { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; }
.tl-branch.local { background: #e7f6ec; color: #15824b; }
.tl-branch.foreign { background: #fdeede; color: #b5651d; }
.tl-late { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 800; color: #c0392b; }
.tl-arrow { align-self: center; color: #c3ccd9; font-size: 18px; font-weight: 700; }
.tl-hint { margin: 12px 0 0; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 640px) { .tl-arrow { display: none; } .tl-cell { min-width: 100%; } }

/* clearer stage edit button */
.chip-edit-btn { background: #eef3fb !important; color: #1b5fae !important; font-weight: 700; padding: 2px 8px !important; border-radius: 6px; }
.chip-edit-btn:hover { background: #1b5fae !important; color: #fff !important; }

/* wide modal (~2.5x) for track workflow & customer statement */
.modal.modal-wide { max-width: 1150px; }
.modal-wide .tl-cell { min-width: 150px; padding: 16px 12px; }
.modal-wide .tl-dept { font-size: 15px; }
.modal-wide .tl-dur { font-size: 22px; }
.modal-wide .stmt-table th, .modal-wide .stmt-table td { font-size: 13.5px; padding: 10px 8px; }
.modal-wide .track-stepper-card .step-row { padding: 14px 0; }

/* orders charts: two side-by-side, smaller */
.chart-row { display: flex; gap: 16px; flex-wrap: wrap; }
.chart-half { flex: 1; min-width: 320px; margin-bottom: 0; }
.chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
.chart-type-sel { border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12px; background: #fff; color: var(--ink); cursor: pointer; }
@media (max-width: 760px) { .chart-half { min-width: 100%; } }

/* group 4: notifications, reject, return, duration */
.btn-danger { background: #c0392b; color: #fff; border: 0; font-weight: 700; padding: 8px 16px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-danger:hover { background: #a02d22; }
.rev-reject-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin: 14px 0 4px; }
.rev-reject-label input { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.notif-item.unread { background: #eef3fb; }
.notif-item.unread .notif-title { font-weight: 800; }
.rejected-pill { background: #fdecea; color: #c0392b; }
.return-pill { background: #fff4e5; color: #b5651d; }
.dur-pill { display: inline-block; background: #eef3fb; color: #1b5fae; font-weight: 700; font-size: 12px; padding: 2px 9px; border-radius: 12px; }

/* proposal builder */
.pb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pb-fld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.pb-fld.pb-full { grid-column: 1 / -1; }
.pb-fld input, .pb-fld textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 400; font-family: inherit; }
.pb-items { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.pb-items th { background: #f4f7fb; padding: 6px; text-align: left; }
.pb-items td { border-bottom: 1px solid #eef1f5; padding: 4px; }
.pb-items input { border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; width: 100%; }
.pb-totals { margin: 14px 0 0; margin-left: auto; width: 280px; }
.pb-trow { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.pb-trow.pb-net { border-top: 2px solid #1b5fae; color: #1b5fae; font-size: 15px; padding-top: 8px; }
/* proposal print */
.psubject { margin: 14px 0 4px; font-size: 14px; }
.pserial { font-size: 12px; color: #555; margin-bottom: 8px; }
.pintro { font-size: 13px; line-height: 1.7; }
.psec { margin: 14px 0; }
.psec-h { font-weight: 800; color: #1b5fae; border-bottom: 1px solid #e4e9f0; padding-bottom: 4px; margin-bottom: 8px; font-size: 14px; }
.psec ul { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.8; }
.ptot { border-collapse: collapse; min-width: 280px; font-size: 13px; }
.ptot td { padding: 6px 12px; }
.ptot td:last-child { text-align: right; font-weight: 700; }
.ptot-net td { background: #1b5fae; color: #fff; font-size: 15px; }
.pnote { font-size: 12px; color: #555; margin-top: 10px; }
.pn { font-size: 10px; color: #888; }
.psigs { display: flex; gap: 40px; margin-top: 40px; }
.psig { font-size: 12px; line-height: 1.6; }
.psig b { color: #1b5fae; font-size: 13px; }
.psig span { display: block; }

/* import costing calculator */
.cs-items { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.cs-items th { background: #f4f7fb; padding: 7px 5px; text-align: left; white-space: nowrap; font-size: 11.5px; }
.cs-items td { border-bottom: 1px solid #eef1f5; padding: 4px; }
.cs-items input { border: 1px solid var(--line); border-radius: 6px; padding: 5px 6px; }
.cs-landed { color: #555; font-weight: 600; }
.cs-sale { color: #15824b; font-weight: 800; }
.cs-foot td { background: #eef3fb; font-weight: 800; padding: 8px 6px; color: #1b5fae; }

/* dual signatory footer (right + left) */
.dsigs { display: flex; justify-content: space-between; margin-top: 60px; gap: 40px; }
.dsig-left { text-align: left; }
.dsig-right { text-align: right; margin-left: auto; }
.dsig { font-size: 13px; min-width: 220px; }
.dsig-line { border-top: 1px solid #9aa3b2; margin-bottom: 6px; width: 200px; }
.dsig-right .dsig-line { margin-left: auto; }
.dsig b { color: #1b5fae; font-size: 14px; display: block; }
.dsig span { color: #5b6678; font-size: 12px; display: block; }

/* costing mode toggle + total box */
.cs-mode { display: flex; gap: 18px; flex-wrap: wrap; background: #f4f7fb; padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 13px; }
.cs-mode label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.cs-total-box { margin-top: 14px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; }
.cs-total-result { margin-top: 10px; max-width: 420px; margin-left: auto; }

/* order library chain documents */
.lib-chain { margin-bottom: 14px; }
.chain-docs { display: flex; flex-wrap: wrap; gap: 10px; }
.chain-doc { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 130px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: .15s; }
.chain-doc:hover { border-color: #1b5fae; box-shadow: 0 2px 10px rgba(27,95,174,.12); }
.chain-doc i { font-size: 24px; color: #1b5fae; }
.chain-doc span { font-weight: 700; font-size: 12.5px; }
.chain-doc small { color: #8a93a3; font-size: 11px; }

/* zakat tab */
.zk-h { color: #1b5fae; border-bottom: 1px solid #e4e9f0; padding-bottom: 6px; margin: 18px 0 8px; font-size: 14px; }
.zk-in { width: 150px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; text-align: right; }
.zk-hint { color: #8a93a3; font-size: 11px; }
.zk-sub td { background: #f7f9fc; font-weight: 700; }
.zk-amount td { background: #1b5fae !important; color: #fff !important; font-size: 16px; }
.zk-amount td b { color: #fff !important; }

/* annual report builder */
.ar-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.ar-title { font-size: 18px; margin: 0; color: #16213a; }
.ar-yearpick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ar-yearpick label { font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.ar-yearpick input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.ar-prior { font-size: 12px; color: #5b6678; }
.ar-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.ar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ar-fld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.ar-fld.ar-full { grid-column: 1 / -1; }
.ar-fld input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-weight: 400; }
.ar-framework p { font-size: 12.5px; line-height: 1.7; color: #44505f; }
.ar-notes, .ar-fa { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 14px; }
.ar-notes th, .ar-fa th { background: #f4f7fb; padding: 7px; text-align: left; font-size: 11.5px; }
.ar-notes td, .ar-fa td { border-bottom: 1px solid #eef1f5; padding: 5px; }
.ar-notes input, .ar-fa input { border: 1px solid var(--line); border-radius: 6px; padding: 6px; width: 110px; text-align: right; }
.ar-fa input { width: 90px; }
.ar-acc { display: flex; flex-direction: column; }
.ar-acc span { font-size: 11px; color: #8a93a3; }
.ar-src { font-size: 11px; color: #8a93a3; }
.ar-link { font-size: 12px; color: #1b5fae; margin-top: 8px; }
.ar-balance { padding: 10px 14px; border-radius: 10px; font-weight: 700; margin-bottom: 14px; }
.ar-balance.ok { background: #e6f7ee; color: #15824b; }
.ar-balance.bad { background: #fdecea; color: #c0392b; }
@media (max-width: 760px) { .ar-grid { grid-template-columns: 1fr; } }

/* notes sub-accounts + contra */
.ar-subrow td { background: #fafbfd; }
.ar-subrow input { width: 100%; }
.ar-contra .ar-acc { color: #b5651d; }
.ar-net { font-weight: 700; color: #1b5fae; }
[data-addsub] { background: #1b5fae; color: #fff; font-weight: 800; }

/* annual report statement rows */
.ar-grouphead td { background: #eef3fb; font-weight: 800; color: #1b5fae; font-size: 12px; padding: 7px 8px; }
.ar-subtot td { font-weight: 700; border-top: 1px solid #d8e0ea; background: #fafbfd; }
.ar-stmt-sub td { color: #6b7686; font-size: 12px; padding-left: 22px; }
.ar-stmt-sub td:first-child { padding-left: 22px; }

/* notes sub-tabs, note numbers, collapsible sub-accounts */
.ar-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ar-subtab { padding: 7px 14px; border: 1px solid var(--line); background: #fff; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: #44505f; }
.ar-subtab.active { background: #1b5fae; color: #fff; border-color: #1b5fae; }
.ar-nn { width: 38px; text-align: center; color: #1b5fae; font-weight: 700; font-size: 12px; }
.ar-nn-h { width: 38px; text-align: center; font-size: 11px; }
.ar-twist { border: none; background: none; cursor: pointer; color: #1b5fae; font-size: 10px; margin-inline-end: 5px; transition: transform .15s; display: inline-block; }
.ar-twist.open { transform: rotate(90deg); }

/* ===== notes accordion (professional) ===== */
.notes-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.notes-search { position: relative; flex: 1; min-width: 240px; }
.notes-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8a93a3; }
.notes-search input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.notes-search input:focus { outline: none; border-color: #1b5fae; box-shadow: 0 0 0 3px rgba(27,95,174,.12); }
.note-grouplabel { font-size: 11.5px; font-weight: 800; color: #1b5fae; text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; }
.note-cards { display: flex; flex-direction: column; gap: 8px; }
.note-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.note-card:hover { border-color: #c4d3e8; }
.note-card.open { border-color: #1b5fae; box-shadow: 0 3px 16px rgba(27,95,174,.10); }
.note-card.is-contra { background: #fffaf5; }
.note-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.note-badge { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: #eef3fb; color: #1b5fae; font-weight: 800; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
.note-title { flex: 1; font-weight: 700; font-size: 13.5px; color: #16213a; display: flex; flex-direction: column; line-height: 1.3; }
.note-title span { font-size: 11.5px; color: #8a93a3; font-weight: 400; }
.note-contra { color: #b5651d; }
.note-status { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.note-status.ok { background: #2bb673; }
.note-status.empty { background: #d8dee6; }
.note-amt { font-variant-numeric: tabular-nums; font-weight: 700; color: #1b5fae; min-width: 90px; text-align: right; font-size: 13px; }
.note-chev { color: #8a93a3; font-size: 11px; transition: transform .15s; }
.note-chev.open { transform: rotate(90deg); color: #1b5fae; }
.note-body { padding: 4px 16px 16px; border-top: 1px solid #f0f3f7; }
.note-amounts { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; }
.note-amounts label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #44505f; }
.note-amounts input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; width: 150px; text-align: right; font-weight: 400; }
.note-net { font-size: 12.5px; color: #16213a; padding-bottom: 6px; }
.note-net span { color: #8a93a3; font-size: 11.5px; }
.note-subs { background: #fafbfd; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.note-subs-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: #44505f; margin-bottom: 6px; }
.note-subtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.note-subtable th { text-align: left; font-size: 11px; color: #8a93a3; padding: 4px 6px; font-weight: 600; }
.note-subtable td { padding: 3px 6px; }
.note-subtable input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; }
.note-coa { margin-top: 8px; }
.note-coalist { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; max-height: 180px; overflow-y: auto; }
.coa-pick { border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 5px 9px; font-size: 11.5px; cursor: pointer; color: #44505f; }
.coa-pick:hover { border-color: #1b5fae; color: #1b5fae; }
.coa-pick em { color: #8a93a3; font-style: normal; }
.note-text { margin-top: 10px; }
.note-text label { font-size: 12px; font-weight: 600; color: #44505f; display: flex; flex-direction: column; gap: 5px; }
.note-text textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 12.5px; line-height: 1.6; resize: vertical; }

/* trial-balance import + 3-level sub-accounts */
.imp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0 14px; }
.imp-actions label.btn-soft { cursor: pointer; }
.imp-review { display: flex; flex-direction: column; gap: 12px; }
.imp-group { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.imp-group-h { display: flex; justify-content: space-between; align-items: center; background: #eef3fb; padding: 8px 12px; font-size: 12.5px; }
.imp-group-h span { color: #5b6678; font-size: 11.5px; }
.imp-row { display: grid; grid-template-columns: 90px 1fr 110px 220px; gap: 8px; align-items: center; padding: 5px 12px; border-top: 1px solid #f0f3f7; font-size: 12px; }
.imp-code { color: #8a93a3; font-variant-numeric: tabular-nums; }
.imp-amt { text-align: right; font-variant-numeric: tabular-nums; }
.imp-row select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; font-size: 11.5px; }
.note-sub2 td { background: #f1f5fb; font-weight: 600; }
.note-sub3 td:first-child { padding-left: 24px; }
.note-sub3 td { background: #fff; }
@media (max-width: 760px) { .imp-row { grid-template-columns: 1fr; } }

/* zakat declaration codes */
.zk-decl .zk-code { width: 44px; color: #8a93a3; font-size: 11px; font-variant-numeric: tabular-nums; }
.zk-decl td { padding: 6px 8px; }

/* note permissions */
.note-perms { display: inline-flex; gap: 3px; margin-inline-end: 6px; }
.note-perm { width: 26px; height: 26px; border: 1px solid var(--line); background: #fff; border-radius: 7px; cursor: pointer; color: #b6bfcc; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; transition: all .12s; }
.note-perm:hover { border-color: #1b5fae; }
.note-perm.on { background: #eef3fb; color: #1b5fae; border-color: #cfe0f5; }
.note-head.is-hidden { opacity: .5; }
.note-head.is-hidden .note-title { text-decoration: line-through; }

/* ===== financial dashboard ===== */
.dash { display: flex; flex-direction: column; gap: 14px; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-card { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; position: relative; overflow: hidden; }
.kpi-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #1b5fae; }
.kpi-card.green::before { background: #2bb673; } .kpi-card.violet::before { background: #8b5cf6; } .kpi-card.amber::before { background: #e8a13a; } .kpi-card.blue::before { background: #1b5fae; }
.kpi-ic { width: 44px; height: 44px; border-radius: 12px; background: #eef3fb; color: #1b5fae; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.kpi-card.green .kpi-ic { background: #e7f7ef; color: #2bb673; } .kpi-card.violet .kpi-ic { background: #f1ecfe; color: #8b5cf6; } .kpi-card.amber .kpi-ic { background: #fdf3e3; color: #e8a13a; }
.kpi-label { font-size: 11.5px; color: #6b7686; font-weight: 600; }
.kpi-val { font-size: 20px; font-weight: 800; color: #16213a; font-variant-numeric: tabular-nums; margin: 2px 0; }
.kpi-grow { font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.kpi-grow.up { color: #2bb673; } .kpi-grow.down { color: #e1574c; }
.dash-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dash-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.dash-card h4 { margin: 0 0 8px; font-size: 13px; color: #16213a; font-weight: 700; }
.dash-chart { width: 100%; height: 240px; }
.ratio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ratio-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; background: #fafbfd; }
.ratio-card.ok { border-color: #bfe6d2; background: #f2fbf6; } .ratio-card.warn { border-color: #f3cfca; background: #fdf4f3; }
.ratio-val { font-size: 18px; font-weight: 800; color: #16213a; }
.ratio-card.ok .ratio-val { color: #2bb673; } .ratio-card.warn .ratio-val { color: #e1574c; }
.ratio-label { font-size: 10.5px; color: #6b7686; margin-top: 3px; line-height: 1.3; }
@media (max-width: 900px) { .kpi-row, .ratio-grid { grid-template-columns: repeat(2, 1fr); } .dash-charts { grid-template-columns: 1fr; } }

/* dashboard status strip */
.dash-status { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; }
.ds-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #44505f; font-weight: 600; }
.ds-item.ok { color: #2bb673; } .ds-item.bad { color: #e1574c; }
.ds-bar { display: inline-block; width: 120px; height: 7px; background: #eef1f5; border-radius: 4px; overflow: hidden; margin-inline-start: 4px; }
.ds-bar span { display: block; height: 100%; background: linear-gradient(90deg,#1b5fae,#2b7fd4); }

/* risk disclosure editor */
.risk-toggle { font-size: 12px; font-weight: 600; color: #44505f; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.risk-text { width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 12px; line-height: 1.6; resize: vertical; }

/* ===== Home launcher (large expressive tab icons) ===== */
.launcher { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 4px 0 22px; }
.launch-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff;
  border: 1px solid #e8edf4; border-radius: 16px; padding: 20px 12px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.launch-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(18,70,127,.12); border-color: #cfe0f5; }
.launch-tile:active { transform: translateY(-1px); }
.launch-ic { width: 60px; height: 60px; border-radius: 17px; display: flex; align-items: center; justify-content: center; box-shadow: 0 7px 16px rgba(0,0,0,.22); }
.launch-ic i { font-size: 30px; color: #fff; }
.launch-lb { font-size: 13px; font-weight: 700; color: #243447; }
.launch-ar { font-size: 11px; color: #8592a6; margin-top: -4px; }
@media (max-width: 900px) { .launcher { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .launcher { grid-template-columns: repeat(2, 1fr); } }

/* ===== Apple-style (squircle gradient) icons in the sidebar tree ===== */
.nav-item i { width: 32px; height: 32px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 17px !important; color: #fff;
  box-shadow: 0 3px 7px rgba(0,0,0,.28); flex: 0 0 auto; }
.nav-item.active i { box-shadow: 0 3px 9px rgba(0,0,0,.4); }
/* per-tab gradients */
.nav-item[data-page="financials"]   i { background: linear-gradient(160deg,#4a9eff,#1b5fae); }
.nav-item[data-page="annualreport"] i { background: linear-gradient(160deg,#a78bfa,#6d28d9); }
.nav-item[data-page="orders"]       i { background: linear-gradient(160deg,#4a9eff,#1b5fae); }
.nav-item[data-page="track"]        i { background: linear-gradient(160deg,#34d399,#0f9d6e); }
.nav-item[data-page="rfq"]          i { background: linear-gradient(160deg,#f87171,#b91c1c); }
.nav-item[data-page="invoices"]     i { background: linear-gradient(160deg,#34d399,#0f9d6e); }
.nav-item[data-page="purchasing"]   i { background: linear-gradient(160deg,#fbbf24,#d97706); }
.nav-item[data-page="customers"]    i { background: linear-gradient(160deg,#f472b6,#be185d); }
.nav-item[data-page="aging"]        i { background: linear-gradient(160deg,#fbbf24,#d97706); }
.nav-item[data-page="reps"]         i { background: linear-gradient(160deg,#a78bfa,#6d28d9); }
.nav-item[data-page="setup"]        i { background: linear-gradient(160deg,#94a3b8,#475569); }
.nav-item[data-page="insights"]     i { background: linear-gradient(160deg,#86efac,#16a34a); }
/* keep active tab from hiding the colored icon */
.nav-item.active { background: var(--sidebar-2); color: #fff; }

/* collapsed sidebar: icons only */
.sidebar.collapsed { width: 74px; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-item span:not(.nav-newtab),
.sidebar.collapsed .user-meta { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .nav-newtab { display: none; }
.sidebar.collapsed .sidebar-brand { justify-content: center; }
.sidebar { transition: width .18s ease; }

/* fully hidden sidebar */
.sidebar.hidden-full { display: none; }

/* sidebar control buttons */
.sidebar-ctl { display: flex; gap: 6px; padding: 8px 12px 0; }
.sidebar-ctl button { flex: 1; appearance: none; border: 0; cursor: pointer; background: var(--sidebar-2);
  color: #cdd8ea; border-radius: 8px; padding: 7px; font-size: 15px; transition: background .15s, color .15s; }
.sidebar-ctl button:hover { background: rgba(255,255,255,.16); color: #fff; }
.sidebar.collapsed .sidebar-ctl { flex-direction: column; }
/* floating re-show button when fully hidden */
#sidebarShow { position: fixed; top: 14px; left: 14px; z-index: 80; display: none;
  width: 40px; height: 40px; border-radius: 11px; border: 0; cursor: pointer;
  background: linear-gradient(160deg,#4a9eff,#1b5fae); color: #fff; font-size: 20px;
  box-shadow: 0 6px 16px rgba(27,95,174,.4); }
body.sidebar-off #sidebarShow { display: inline-flex; align-items: center; justify-content: center; }

/* ===== Apple-style icons on in-screen sub-tabs & create buttons ===== */
.setup-tabs .stab i, .status-tabs .stab i, .fin-tabs .stab i, .rfq-tabs .stab i, .inv-tabs .stab i {
  width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px !important; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.22);
  background: linear-gradient(160deg,#4a9eff,#1b5fae); }
/* varied gradients per sub-tab position for a lively Apple look */
.setup-tabs .stab:nth-child(1) i { background: linear-gradient(160deg,#4a9eff,#1b5fae); }
.setup-tabs .stab:nth-child(2) i { background: linear-gradient(160deg,#34d399,#0f9d6e); }
.setup-tabs .stab:nth-child(3) i { background: linear-gradient(160deg,#a78bfa,#6d28d9); }
.setup-tabs .stab:nth-child(4) i { background: linear-gradient(160deg,#f472b6,#be185d); }
.setup-tabs .stab:nth-child(5) i { background: linear-gradient(160deg,#fbbf24,#d97706); }
.setup-tabs .stab:nth-child(6) i { background: linear-gradient(160deg,#f87171,#b91c1c); }
.status-tabs .stab.active i, .fin-tabs .stab.active i { box-shadow: 0 3px 8px rgba(0,0,0,.32); }
/* create/add buttons get an Apple gradient + soft shadow */
.btn-add { background: linear-gradient(160deg,#4a9eff,#1b5fae) !important; border-radius: 12px !important;
  box-shadow: 0 5px 14px rgba(27,95,174,.34); display: inline-flex; align-items: center; gap: 7px; }
.btn-add:hover { filter: brightness(1.05); }
.btn-add i { font-size: 17px; }
.qa-btn i { color: #1b5fae; }

/* ===== Grouped navigation tree ===== */
.nav-grouped { gap: 4px; padding: 8px 10px; }
.nav-group { margin-bottom: 4px; }
.nav-grouphead { width: 100%; appearance: none; border: 0; cursor: pointer; background: transparent;
  color: #cdd8ea; display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 700; text-align: right; }
.nav-grouphead:hover { background: var(--sidebar-2); }
.ngh-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 7px rgba(0,0,0,.28); flex: 0 0 auto; }
.ngh-ic i { font-size: 16px; color: #fff; }
.ngh-label { flex: 1; }
.ngh-chev { font-size: 16px; transition: transform .18s ease; opacity: .7; }
.nav-group.collapsed .ngh-chev { transform: rotate(-90deg); }
.nav-groupbody { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 4px 0; overflow: hidden; }
.nav-group.collapsed .nav-groupbody { display: none; }
.nav-groupbody .nav-item { padding: 8px 10px 8px 8px; font-size: 13px; }
.nav-groupbody .nav-item i { width: 28px; height: 28px; font-size: 15px !important; }
.nav-groupbody .nav-item.active { font-size: 15px; }
.nav-groupbody .nav-item.active span { font-size: 15px; }
.nav-groupbody .nav-item.active i { font-size: 18px !important; }
.nav-subhead { font-size: 11px; color: #7f92b0; font-weight: 700; padding: 8px 10px 3px; letter-spacing: .02em; }
.nav-soon { opacity: .58; position: relative; }
.nav-soon::after { content: "قريباً"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-size: 9px; background: rgba(255,255,255,.14); color: #cdd8ea; padding: 1px 6px; border-radius: 6px; }
.nav-soon .nav-newtab { display: none; }
/* collapsed sidebar hides group labels + subheads, shows only icons */
.sidebar.collapsed .ngh-label, .sidebar.collapsed .ngh-chev,
.sidebar.collapsed .nav-subhead, .sidebar.collapsed .nav-soon::after { display: none; }
.sidebar.collapsed .nav-grouphead { justify-content: center; padding: 9px 0; }
.sidebar.collapsed .nav-groupbody { padding: 2px 0; }

/* ============================================================
   APPLE THEME — system-wide form & control polish (Phase 4a)
   Restyles the SHARED classes so every add/edit form, modal, and
   slide-over across all screens picks it up at once. Additive only.
   ============================================================ */
.form input, .form select, .form textarea,
.modal-body input, .modal-body select, .modal-body textarea,
.pb-fld input, .pb-fld select, .pb-fld textarea,
.setup-form input, .setup-form select {
  border: .5px solid rgba(0,0,0,.14) !important;
  border-radius: 10px !important;
  background: #fbfbfd !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  outline: none;
}
.form input:focus, .form select:focus, .form textarea:focus,
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus,
.pb-fld input:focus, .pb-fld select:focus, .pb-fld textarea:focus,
.setup-form input:focus, .setup-form select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(37,99,201,.14) !important;
  background: #fff !important;
}
.form label, .modal-body label, .pb-fld { font-weight: 600 !important; }

/* buttons: solid brand primary + clean white ghost */
.btn-primary {
  background: var(--brand) !important; border-radius: 11px !important;
  font-weight: 600 !important; box-shadow: 0 2px 8px rgba(37,99,201,.24) !important;
  transition: filter .12s ease, transform .12s ease !important;
}
.btn-primary:hover { filter: brightness(1.06); background: var(--brand) !important; }
.btn-primary:active { transform: scale(.97); }
.btn-soft {
  background: #fff !important; color: var(--ink) !important;
  border: .5px solid rgba(0,0,0,.14) !important; border-radius: 11px !important;
  font-weight: 600 !important; transition: background .12s ease;
}
.btn-soft:hover { background: #f5f5f7 !important; }
.btn-mini { border: .5px solid rgba(0,0,0,.12) !important; border-radius: 9px !important; }

/* slide-over add/edit panels: softer Apple surface + rounded start edge */
.slideover {
  background: #f5f5f7 !important;
  box-shadow: -12px 0 40px rgba(0,0,0,.12) !important;
}
html[dir=ltr] .slideover { box-shadow: 12px 0 40px rgba(0,0,0,.12) !important; }
.slideover .card, .modal { border: .5px solid rgba(0,0,0,.08) !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,.04) !important; }

/* cards + tables across screens get the hairline + soft radius */
.card, .table-wrap, .kpi { border: .5px solid rgba(0,0,0,.08) !important; }

/* ============================================================
   APPLE THEME — UX polish (Phase 4b): gentle motion + hover
   ============================================================ */
.nav-item, .htab, .btn-primary, .btn-soft, .btn-mini, .sup-tab, .msg-btn, .kpi, .card {
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}
.nav-item:hover { background: rgba(0,0,0,.04); border-radius: 9px; }
.table-wrap table tbody tr { transition: background-color .12s ease; }
.table-wrap table tbody tr:hover { background: #f7f9fc; }
.kpi:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
button, .btn-primary, .btn-soft, .btn-mini { -webkit-tap-highlight-color: transparent; }
*:focus-visible { outline: 2px solid rgba(37,99,201,.4); outline-offset: 1px; }

/* ===== Apple-style "has / has none" choice sheet for optional stages ===== */
#hasNoneOverlay{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .18s ease;padding:20px}
#hasNoneOverlay.hn-show{opacity:1}
#hasNoneOverlay .hn-sheet{background:#fff;border-radius:26px;padding:26px 24px 20px;width:min(430px,94vw);
  box-shadow:0 24px 60px rgba(15,40,90,.28);text-align:center;transform:translateY(14px) scale(.97);
  transition:transform .22s cubic-bezier(.22,1,.36,1)}
#hasNoneOverlay.hn-show .hn-sheet{transform:translateY(0) scale(1)}
.hn-icon{width:64px;height:64px;margin:0 auto 12px;border-radius:20px;display:flex;align-items:center;justify-content:center;
  font-size:32px;color:#fff;background:linear-gradient(160deg,#4a9eff,#1b5fae);box-shadow:0 10px 22px rgba(27,95,174,.32)}
.hn-title{font-weight:800;font-size:18px;color:#16213a;margin-bottom:4px}
.hn-sub{font-size:13.5px;color:#5b6678;line-height:1.6;margin-bottom:20px}
.hn-sub .hn-en{color:#98a2b3;font-size:12px}
.hn-actions{display:flex;gap:12px;margin-bottom:12px}
.hn-btn{flex:1;appearance:none;border:1.5px solid #e6eaf1;background:#fff;border-radius:18px;padding:16px 10px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;font-family:inherit;
  transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
.hn-btn:hover{transform:translateY(-3px)}
.hn-btn:active{transform:translateY(-1px) scale(.98)}
.hn-b-ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:27px;color:#fff;
  transition:transform .18s ease}
.hn-btn:hover .hn-b-ic{transform:scale(1.06)}
.hn-b-tx{display:flex;flex-direction:column;line-height:1.25}
.hn-b-tx b{font-size:15px;color:#16213a}
.hn-b-tx small{font-size:11px;color:#98a2b3}
.hn-yes .hn-b-ic{background:linear-gradient(160deg,#34d399,#0f9d6e);box-shadow:0 8px 18px rgba(15,157,110,.3)}
.hn-yes:hover{border-color:#34d399;background:#f2fbf7}
.hn-no .hn-b-ic{background:linear-gradient(160deg,#fbbf24,#e08600);box-shadow:0 8px 18px rgba(224,134,0,.28)}
.hn-no:hover{border-color:#fbbf24;background:#fffaf0}
.hn-cancel{appearance:none;border:0;background:transparent;color:#8a94a6;font-size:13px;cursor:pointer;
  padding:8px 14px;border-radius:12px;font-family:inherit;transition:background .15s ease}
.hn-cancel:hover{background:#f2f4f8;color:#5b6678}
[dir="rtl"] .hn-b-tx{align-items:center}

/* ===== Hybrid per-user permissions (Apple-style cards) ===== */
.up-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.up-hint{font-size:12.5px;color:#5b6678;line-height:1.7;background:#f5f8fc;border-radius:12px;padding:11px 14px;margin:0 0 16px}
.up-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.up-card{background:#fff;border:1.5px solid #e6eaf1;border-radius:18px;padding:14px;transition:border-color .18s ease,box-shadow .2s ease,transform .12s ease}
.up-card.on{border-color:#bfe6d7}
.up-card.open{grid-column:1/-1;box-shadow:0 10px 30px rgba(15,40,90,.1)}
.up-card-top{display:flex;align-items:center;gap:11px;cursor:default}
.up-card.on .up-card-top{cursor:pointer}
.up-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;transition:transform .18s ease}
.up-card.on:hover .up-ic{transform:scale(1.05)}
.up-card-tt{font-size:13.5px;font-weight:700;color:#16213a;line-height:1.35;flex:1}
.up-chev{color:#98a2b3;font-size:18px;transition:transform .2s ease}
.up-card.open .up-chev{transform:rotate(180deg)}
.up-grant{width:100%;margin-top:12px;appearance:none;border:1.5px solid;border-radius:13px;padding:9px;font-size:12.5px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .14s ease,background .18s ease,border-color .18s ease}
.up-grant i{font-size:17px}
.up-grant:active{transform:scale(.97)}
.up-grant.yes{background:#eafaf4;border-color:#34d399;color:#0f7a5a}
.up-grant.yes:hover{background:#dcf6ec}
.up-grant.no{background:#f7f8fa;border-color:#e0e4ea;color:#8a94a6}
.up-grant.no:hover{background:#eef0f4;border-color:#cbd2dc}
.up-screens{margin-top:14px;padding-top:14px;border-top:1px dashed #e6eaf1;animation:upfade .22s ease}
@keyframes upfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.up-perms{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px}
.up-perm{display:flex;align-items:center;gap:10px;appearance:none;border:1.5px solid #eef1f5;background:#fff;border-radius:13px;padding:10px 12px;font-family:inherit;cursor:pointer;text-align:start;transition:border-color .16s ease,background .16s ease,transform .12s ease}
.up-perm:hover{border-color:#cbd6e6;transform:translateY(-1px)}
.up-perm.on{border-color:#bfe6d7;background:#f4fbf8}
.up-perm-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;background:#f1f4f8;color:#8a94a6;transition:background .16s ease,color .16s ease}
.up-perm.on .up-perm-ic{background:#0f9d6e;color:#fff}
.up-perm-tx{flex:1;font-size:12.5px;font-weight:600;color:#16213a;line-height:1.3}
.up-src{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.up-src.role{background:#eef2fb;color:#3763b6}
.up-src.allow{background:#eafaf4;color:#0f7a5a}
.up-src.deny{background:#fdecec;color:#c0392b}
.up-perm-sw{font-size:21px;color:#cfd6e0;flex-shrink:0;transition:color .16s ease}
.up-perm.on .up-perm-sw{color:#0f9d6e}
[dir="rtl"] .up-perm{text-align:right}

/* ===== data-scope banner (tracking) ===== */
.scope-banner{display:flex;align-items:center;gap:9px;background:#eef5ff;border:1px solid #d4e4fb;color:#2c5a9e;
  border-radius:12px;padding:9px 15px;margin-bottom:14px;font-size:13px;font-weight:600}
.scope-banner i{font-size:18px}

/* hide nav items the user has no module permission for (applied by applyNavPermissions) */
.nav-item.perm-hidden { display: none !important; }

/* ===== user-roles: Apple-style login-role pills ===== */
.rb-authpills{display:inline-flex;gap:5px;background:#f2f4f8;border-radius:13px;padding:4px}
.rb-authpill{appearance:none;border:0;background:transparent;border-radius:10px;padding:6px 9px;cursor:pointer;
  display:flex;align-items:center;gap:6px;font-family:inherit;color:#8a94a6;transition:background .16s ease,color .16s ease,transform .12s ease,box-shadow .18s ease}
.rb-authpill i{font-size:17px}
.rb-authpill span{display:flex;flex-direction:column;line-height:1.05;text-align:start;font-size:12px;font-weight:700}
.rb-authpill span small{font-size:9px;font-weight:600;opacity:.7}
.rb-authpill:hover{color:var(--pc);transform:translateY(-1px)}
.rb-authpill.on{background:#fff;color:var(--pc);box-shadow:0 2px 8px rgba(15,40,90,.12)}
.rb-authpill.on i{transform:scale(1.05)}
.rb-adminwarn{margin-top:6px;font-size:10.5px;font-weight:700;color:#c0392b;background:#fdecec;border-radius:8px;padding:3px 8px;display:inline-block}
[dir="rtl"] .rb-authpill span{text-align:right}