/* =========================================================================
   FLAG — Grayscale Wireframe Design System
   Mid-to-high fidelity. No hue anywhere — semantics via icon + label + weight.
   8px spacing grid. Shared by every mobile/ and web/ page.
   ========================================================================= */

:root{
  /* grayscale ramp */
  --g-950:#0a0a0a; --g-900:#141414; --g-800:#232323; --g-700:#3a3a3a;
  --g-600:#5c5c5c; --g-500:#7a7a7a; --g-400:#9c9c9c; --g-300:#c2c2c2;
  --g-200:#dcdcdc; --g-150:#e8e8e8; --g-100:#f0f0f0; --g-50:#f7f7f7;
  --white:#ffffff;

  /* spacing (8px grid) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:48px; --sp-9:64px;

  /* radii / shadow (grayscale only) */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 4px 12px rgba(0,0,0,.10);
  --shadow-3:0 12px 32px rgba(0,0,0,.16);

  --font:'Segoe UI',Tahoma,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  direction:rtl;
  background:var(--g-50);
  color:var(--g-950);
  font-size:14px;
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}

/* ---------- type scale ---------- */
.t-h1{font-size:24px;line-height:32px;font-weight:700;margin:0;}
.t-h2{font-size:20px;line-height:28px;font-weight:700;margin:0;}
.t-h3{font-size:16px;line-height:24px;font-weight:700;margin:0;}
.t-body{font-size:14px;line-height:20px;font-weight:400;margin:0;}
.t-small{font-size:12px;line-height:16px;font-weight:400;margin:0;}
.t-caption{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--g-500);margin:0;}
.t-muted{color:var(--g-500);}
.t-strong{font-weight:700;}

/* ---------- layout helpers ---------- */
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;}
.row.wrap{flex-wrap:wrap;}
.gap-1{gap:var(--sp-1);} .gap-2{gap:var(--sp-2);} .gap-3{gap:var(--sp-3);}
.gap-4{gap:var(--sp-4);} .gap-5{gap:var(--sp-5);}
.between{justify-content:space-between;}
.center{justify-content:center;align-items:center;}
.flex-1{flex:1;}
.mt-1{margin-top:var(--sp-1);} .mt-2{margin-top:var(--sp-2);} .mt-3{margin-top:var(--sp-3);}
.mt-4{margin-top:var(--sp-4);} .mt-5{margin-top:var(--sp-5);} .mt-6{margin-top:var(--sp-6);}
.mb-1{margin-bottom:var(--sp-1);} .mb-2{margin-bottom:var(--sp-2);} .mb-3{margin-bottom:var(--sp-3);}
.mb-4{margin-bottom:var(--sp-4);} .mb-5{margin-bottom:var(--sp-5);}
.section{margin-bottom:var(--sp-6);}
.divider{border:none;border-top:1px solid var(--g-150);margin:var(--sp-4) 0;}
.grid{display:grid;gap:var(--sp-4);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:720px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
.container{max-width:1280px;margin:0 auto;padding:0 var(--sp-5);}
.scroll-x{overflow-x:auto;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:var(--r-md);padding:10px 18px;font-size:13px;font-weight:700;
  cursor:pointer;user-select:none;border:1.5px solid var(--g-950);
  background:var(--white);color:var(--g-950);transition:.12s;line-height:1.2;
}
.btn:hover{box-shadow:var(--shadow-2);transform:translateY(-1px);}
.btn.sm{padding:6px 12px;font-size:12px;border-radius:var(--r-sm);}
.btn.lg{padding:13px 22px;font-size:14px;border-radius:var(--r-lg);}
.btn.primary{background:var(--g-950);color:var(--white);}
.btn.secondary{background:var(--white);border-color:var(--g-950);}
.btn.ghost{border-style:dashed;border-color:var(--g-300);color:var(--g-700);background:transparent;}
.btn.subtle{border-color:var(--g-200);background:var(--g-50);color:var(--g-700);}
.btn.block{width:100%;}
.btn.icon-only{padding:8px;border-radius:var(--r-pill);}
.btn.critical{border-width:2px;border-color:var(--g-950);background:var(--white);}
.btn.critical.primary{background:var(--g-950);}
.btn[disabled],.btn.disabled{opacity:.38;cursor:not-allowed;box-shadow:none!important;transform:none!important;}
.btn:hover.disabled,.btn[disabled]:hover{box-shadow:none;transform:none;}
.fab{
  position:fixed;left:20px;bottom:96px;width:56px;height:56px;border-radius:50%;
  background:var(--g-950);color:var(--white);display:flex;align-items:center;justify-content:center;
  font-size:24px;box-shadow:var(--shadow-3);cursor:pointer;z-index:40;
}

/* ---------- inputs ---------- */
.field{margin-bottom:var(--sp-4);}
.field label{display:block;font-size:12px;font-weight:700;color:var(--g-700);margin-bottom:6px;}
.field .req{color:var(--g-950);}
.field .opt-tag{font-weight:400;color:var(--g-400);font-size:11px;margin-inline-start:4px;}
.field .help{font-size:11.5px;color:var(--g-500);margin-top:5px;}
.field .err-msg{font-size:11.5px;color:var(--g-950);margin-top:5px;font-weight:700;}
.field .err-msg::before{content:'✕ ';}
.input,select.input,textarea.input{
  width:100%;border:1.5px solid var(--g-200);border-radius:var(--r-md);
  padding:10px 12px;background:var(--white);transition:.12s;
}
.input:focus,select.input:focus,textarea.input:focus{outline:none;border-color:var(--g-950);box-shadow:0 0 0 3px var(--g-100);}
.input.err{border-color:var(--g-950);border-width:2px;background:var(--g-50);}
textarea.input{resize:vertical;min-height:80px;}
.input-icon-wrap{position:relative;}
.input-icon-wrap .input{padding-inline-start:36px;}
.input-icon-wrap .ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--g-400);}
.tag-input{display:flex;flex-wrap:wrap;gap:6px;border:1.5px solid var(--g-200);border-radius:var(--r-md);padding:8px;}
.tag-input .tag{background:var(--g-100);border-radius:var(--r-pill);padding:3px 10px;font-size:12px;display:flex;align-items:center;gap:5px;}
.tag-input input{border:none;outline:none;flex:1;min-width:80px;background:transparent;}
.help-tip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.3px solid var(--g-400);border-radius:50%;font-size:10px;color:var(--g-500);cursor:help;margin-inline-start:5px;}
.otp-row{display:flex;gap:10px;}
.otp-box{width:44px;height:52px;text-align:center;font-size:18px;font-weight:700;padding:0;}
.upload-box{
  border:1.5px dashed var(--g-300);border-radius:var(--r-lg);background:var(--g-50);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:var(--sp-5);text-align:center;color:var(--g-500);cursor:pointer;transition:.12s;
}
.upload-box:hover{background:var(--g-100);}
.upload-box.uploaded{border-style:solid;border-color:var(--g-950);color:var(--g-950);background:var(--white);font-weight:700;}
.upload-box .ic{font-size:26px;}
.datepicker-mock{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--g-200);border-radius:var(--r-md);padding:10px 12px;cursor:pointer;background:var(--white);}
.map-placeholder{
  background:repeating-linear-gradient(45deg,var(--g-100),var(--g-100) 10px,var(--g-150) 10px,var(--g-150) 20px);
  border:1.5px solid var(--g-200);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;
  color:var(--g-500);font-size:13px;min-height:180px;
}
.chart-placeholder{
  background:linear-gradient(180deg,var(--g-50),var(--g-100));border:1.5px solid var(--g-200);border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;color:var(--g-500);font-size:13px;min-height:200px;flex-direction:column;gap:6px;
}

/* ---------- checkbox / radio / toggle ---------- */
.check-row,.radio-row{display:flex;align-items:center;gap:10px;font-size:13px;padding:10px 12px;border:1.5px solid var(--g-200);border-radius:var(--r-md);margin-bottom:8px;cursor:pointer;background:var(--white);transition:.1s;}
.check-row:hover,.radio-row:hover{border-color:var(--g-400);}
.check-box{width:18px;height:18px;border:1.5px solid var(--g-400);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}
.check-row.done{border-color:var(--g-950);background:var(--g-50);}
.check-row.done .check-box{background:var(--g-950);border-color:var(--g-950);color:var(--white);}
.radio-dot-wrap{width:18px;height:18px;border:1.5px solid var(--g-400);border-radius:50%;flex-shrink:0;position:relative;}
.radio-row.sel{border-color:var(--g-950);background:var(--g-50);}
.radio-row.sel .radio-dot-wrap{border-color:var(--g-950);}
.radio-row.sel .radio-dot-wrap::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--g-950);}
.switch{width:38px;height:22px;border-radius:var(--r-pill);background:var(--g-300);position:relative;cursor:pointer;flex-shrink:0;transition:.15s;}
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:var(--white);top:2px;right:2px;box-shadow:var(--shadow-1);transition:.15s;}
.switch.on{background:var(--g-950);}
.switch.on::after{right:calc(100% - 20px);}

/* ---------- badges / tags / avatars ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;border:1.3px solid var(--g-300);border-radius:var(--r-pill);padding:3px 11px;font-size:11px;font-weight:700;background:var(--g-50);color:var(--g-700);}
.badge.solid{background:var(--g-950);color:var(--white);border-color:var(--g-950);}
.badge.critical{border-width:2px;border-color:var(--g-950);color:var(--g-950);background:var(--white);}
.badge.pending{border-style:dashed;color:var(--g-500);}
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--g-100);border-radius:var(--r-sm);padding:3px 9px;font-size:11.5px;}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--g-200);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--g-700);flex-shrink:0;}
.avatar.sm{width:26px;height:26px;font-size:11px;}
.avatar.lg{width:64px;height:64px;font-size:20px;}

/* ---------- cards ---------- */
.card{background:var(--white);border:1.5px solid var(--g-150);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-1);}
.card.clickable{cursor:pointer;transition:.12s;}
.card.clickable:hover{box-shadow:var(--shadow-2);transform:translateY(-1px);border-color:var(--g-300);}
.card .card-title{font-weight:700;font-size:14px;}
.card .card-sub{color:var(--g-500);font-size:12px;margin-top:3px;}
.kpi-card{background:var(--white);border:1.5px solid var(--g-150);border-radius:var(--r-lg);padding:var(--sp-4);min-width:130px;box-shadow:var(--shadow-1);}
.kpi-card b{font-size:22px;display:block;font-weight:800;}
.kpi-card .kpi-label{color:var(--g-500);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.kpi-card .kpi-delta{font-size:11px;color:var(--g-500);margin-top:4px;}

/* ---------- banners / alerts ---------- */
.alert{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-size:13px;line-height:1.6;border-right:4px solid var(--g-950);background:var(--g-50);display:flex;gap:10px;align-items:flex-start;}
.alert.default{border-right-style:solid;}
.alert.subtle{border-right-color:var(--g-300);background:var(--white);border:1.5px solid var(--g-150);border-right-width:4px;}
.alert.critical{border-right-width:6px;}
.alert .ic{font-size:15px;flex-shrink:0;}

/* ---------- tables ---------- */
.table-wrap{border:1.5px solid var(--g-150);border-radius:var(--r-lg);overflow:hidden;background:var(--white);}
.toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-bottom:1.5px solid var(--g-150);flex-wrap:wrap;gap:var(--sp-2);background:var(--g-50);}
table.dtable{width:100%;border-collapse:collapse;font-size:12.5px;}
table.dtable th{background:var(--g-50);color:var(--g-600);font-weight:700;text-align:right;padding:10px 12px;border-bottom:1.5px solid var(--g-150);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;white-space:nowrap;}
table.dtable th .sort-ic{color:var(--g-300);margin-inline-start:4px;}
table.dtable td{padding:11px 12px;border-bottom:1px solid var(--g-100);vertical-align:middle;}
table.dtable tr:hover td{background:var(--g-50);}
table.dtable tr.selected td{background:var(--g-100);}
.row-check{width:16px;height:16px;border:1.5px solid var(--g-400);border-radius:4px;display:inline-flex;}
.bulk-bar{display:none;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--g-950);color:var(--white);border-radius:var(--r-md);margin-bottom:var(--sp-3);font-size:12.5px;}
.bulk-bar.show{display:flex;}
.bulk-bar .btn{background:transparent;border-color:rgba(255,255,255,.5);color:var(--white);}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-top:1.5px solid var(--g-150);font-size:12px;color:var(--g-600);}
.pagination .pg-btn{width:28px;height:28px;border:1.3px solid var(--g-200);border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.pagination .pg-btn.active{background:var(--g-950);color:var(--white);border-color:var(--g-950);}
.col-menu{position:relative;display:inline-block;}
.actions-menu{position:relative;display:inline-block;}
.dropdown-panel{position:absolute;top:calc(100% + 6px);left:0;background:var(--white);border:1.5px solid var(--g-200);border-radius:var(--r-md);box-shadow:var(--shadow-2);min-width:180px;z-index:50;padding:6px;display:none;}
.dropdown-panel.open{display:block;}
.dropdown-panel .dd-item{padding:9px 12px;border-radius:var(--r-sm);font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:8px;}
.dropdown-panel .dd-item:hover{background:var(--g-50);}
.dropdown-panel .dd-sep{border-top:1px solid var(--g-150);margin:5px 0;}

/* ---------- tabs / accordion / breadcrumbs ---------- */
.tabs{display:flex;border-bottom:1.5px solid var(--g-150);gap:2px;flex-wrap:wrap;overflow-x:auto;}
.tab{padding:10px 15px;font-size:12.5px;font-weight:700;color:var(--g-500);border-bottom:2.5px solid transparent;cursor:pointer;white-space:nowrap;}
.tab.active{color:var(--g-950);border-color:var(--g-950);}
.breadcrumbs{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--g-500);flex-wrap:wrap;}
.breadcrumbs a:hover{text-decoration:underline;}
.accordion-item{border:1.5px solid var(--g-150);border-radius:var(--r-md);margin-bottom:8px;overflow:hidden;}
.accordion-head{padding:12px 14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-size:13px;background:var(--g-50);}
.accordion-body{padding:14px;display:none;border-top:1.5px solid var(--g-150);font-size:13px;}
.accordion-item.open .accordion-body{display:block;}
.accordion-item.open .chev{transform:rotate(180deg);}
.chev{transition:.15s;color:var(--g-400);}

/* ---------- stepper / wizard ---------- */
.stepper{display:flex;align-items:center;margin-bottom:var(--sp-5);}
.step{display:flex;flex-direction:column;align-items:center;font-size:10.5px;color:var(--g-500);flex:1;position:relative;font-weight:600;}
.step .dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--g-300);display:flex;align-items:center;justify-content:center;background:var(--white);font-size:11px;margin-bottom:5px;font-weight:700;}
.step.active .dot,.step.done .dot{border-color:var(--g-950);background:var(--g-950);color:var(--white);}
.step:not(:last-child)::after{content:'';position:absolute;top:13px;right:calc(50% + 14px);width:calc(100% - 28px);height:2px;background:var(--g-200);z-index:0;}
.wizard-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1.5px solid var(--g-150);margin-bottom:var(--sp-4);}
.wizard-panel{display:none;}
.wizard-panel.active{display:block;}

/* ---------- kanban ---------- */
.kanban{display:flex;gap:var(--sp-4);overflow-x:auto;padding-bottom:8px;}
.kanban-col{background:var(--g-50);border:1.5px solid var(--g-150);border-radius:var(--r-lg);min-width:260px;flex:1;padding:var(--sp-3);}
.kanban-col-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:12.5px;margin-bottom:var(--sp-3);padding:0 4px;}
.kanban-card{background:var(--white);border:1.5px solid var(--g-150);border-radius:var(--r-md);padding:var(--sp-3);margin-bottom:var(--sp-2);box-shadow:var(--shadow-1);cursor:pointer;}
.kanban-card:hover{box-shadow:var(--shadow-2);}
.kanban-card .kc-title{font-weight:700;font-size:12.5px;}
.kanban-card .kc-meta{font-size:11px;color:var(--g-500);margin-top:6px;}
.kanban-move{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.kanban-move span{font-size:10.5px;border:1px solid var(--g-200);border-radius:var(--r-pill);padding:2px 8px;cursor:pointer;}
.kanban-move span:hover{background:var(--g-100);}

/* ---------- calendar / timeline ---------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-cell{aspect-ratio:1;border:1.3px solid var(--g-150);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;color:var(--g-600);}
.cal-cell.avail{border-color:var(--g-950);font-weight:700;}
.cal-cell.sel{background:var(--g-950);color:var(--white);}
.cal-cell.disabled{color:var(--g-300);cursor:not-allowed;}
.timeline{position:relative;padding-inline-start:22px;}
.timeline::before{content:'';position:absolute;right:5px;top:4px;bottom:4px;width:2px;background:var(--g-200);}
.timeline-item{position:relative;padding-bottom:var(--sp-4);}
.timeline-item::before{content:'';position:absolute;right:-22px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--white);border:2.5px solid var(--g-950);}
.timeline-item .tl-time{font-size:11px;color:var(--g-500);}

/* ---------- modal / drawer / bottom-sheet / toast ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,10,10,.45);display:none;align-items:center;justify-content:center;z-index:100;}
.overlay.open{display:flex;}
.modal{background:var(--white);border-radius:var(--r-xl);padding:var(--sp-5);max-width:440px;width:92%;box-shadow:var(--shadow-3);}
.modal.confirm .modal-icon{width:48px;height:48px;border-radius:50%;border:2px solid var(--g-950);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:var(--sp-3);}
.drawer-overlay{position:fixed;inset:0;background:rgba(10,10,10,.4);display:none;z-index:100;}
.drawer-overlay.open{display:block;}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(420px,88vw);background:var(--white);box-shadow:var(--shadow-3);padding:var(--sp-5);overflow-y:auto;}
.bottom-sheet-overlay{position:fixed;inset:0;background:rgba(10,10,10,.4);display:none;z-index:100;align-items:flex-end;justify-content:center;}
.bottom-sheet-overlay.open{display:flex;}
.bottom-sheet{background:var(--white);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--sp-5);width:100%;max-width:420px;box-shadow:var(--shadow-3);}
.sheet-handle{width:40px;height:4px;background:var(--g-200);border-radius:var(--r-pill);margin:0 auto var(--sp-4);}
#toastRoot{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{background:var(--g-950);color:var(--white);padding:10px 20px;border-radius:var(--r-md);font-size:13px;box-shadow:var(--shadow-3);opacity:0;transform:translateY(-12px);transition:.25s;font-weight:600;}
.toast.show{opacity:1;transform:translateY(0);}

/* ---------- skeleton / progress ---------- */
.skeleton{background:linear-gradient(90deg,var(--g-100) 25%,var(--g-150) 37%,var(--g-100) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:var(--r-sm);}
@keyframes sk{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.progress{height:8px;border-radius:var(--r-pill);background:var(--g-150);overflow:hidden;}
.progress > div{height:100%;background:var(--g-950);}

/* ---------- state screens (empty/error/permission/offline) ---------- */
.state-block{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp-8) var(--sp-4);color:var(--g-500);}
.state-block .state-ic{width:64px;height:64px;border-radius:50%;border:2px dashed var(--g-300);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:var(--sp-4);color:var(--g-400);}
.state-block h3{margin:0 0 6px;color:var(--g-800);}
.state-block p{max-width:320px;font-size:12.5px;}

/* ---------- MOBILE SHELL ---------- */
.phone-shell{max-width:420px;margin:0 auto;background:var(--white);min-height:100vh;position:relative;padding-bottom:78px;}
.status-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px 4px;font-size:11px;font-weight:700;color:var(--g-950);}
.app-topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--g-150);position:sticky;top:0;background:var(--white);z-index:20;}
.app-topbar .back{font-size:18px;cursor:pointer;}
.screen-body{padding:var(--sp-4);}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:420px;background:var(--white);border-top:1.5px solid var(--g-150);display:flex;padding:8px 0 12px;z-index:30;}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--g-400);font-weight:600;}
.bottom-nav a.active{color:var(--g-950);}
.bottom-nav .bn-ic{font-size:18px;}
.mobile-onboard-dots{display:flex;gap:6px;justify-content:center;margin:var(--sp-4) 0;}
.mobile-onboard-dots span{width:7px;height:7px;border-radius:50%;background:var(--g-200);}
.mobile-onboard-dots span.active{background:var(--g-950);width:20px;border-radius:var(--r-pill);}

/* ---------- WEB SHELL ---------- */
.web-shell{display:flex;min-height:100vh;}
.web-sidebar{width:248px;background:var(--white);border-left:1.5px solid var(--g-150);flex-shrink:0;padding:var(--sp-4) var(--sp-3);position:sticky;top:0;height:100vh;overflow-y:auto;}
.web-sidebar .brand{font-weight:800;font-size:15px;padding:0 var(--sp-2) var(--sp-4);}
.web-sidebar .nav-group{margin-bottom:var(--sp-2);}
.web-sidebar .nav-label{font-size:10px;color:var(--g-400);text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:10px var(--sp-2) 4px;}
.web-sidebar a.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-md);font-size:12.5px;font-weight:600;color:var(--g-700);margin-bottom:2px;}
.web-sidebar a.nav-item:hover{background:var(--g-50);}
.web-sidebar a.nav-item.active{background:var(--g-950);color:var(--white);}
.web-main{flex:1;min-width:0;}
.web-topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-5);border-bottom:1.5px solid var(--g-150);background:var(--white);position:sticky;top:0;z-index:20;gap:var(--sp-3);flex-wrap:wrap;}
.web-content{padding:var(--sp-5);}
.role-pill{background:var(--g-100);padding:4px 12px;border-radius:var(--r-pill);font-size:11.5px;font-weight:700;}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--sp-5);flex-wrap:wrap;gap:var(--sp-3);}

@media(max-width:900px){
  .web-sidebar{position:fixed;right:0;top:0;transform:translateX(100%);transition:.2s;z-index:60;box-shadow:var(--shadow-3);}
  .web-sidebar.open{transform:translateX(0);}
}

/* ---- outlets/regions additions ---- */
.map-split{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-4);align-items:start;}
.map-split-map{min-height:560px;height:100%;}
.map-split-list{max-height:560px;overflow-y:auto;padding-inline-end:2px;}
@media(max-width:900px){
  .map-split{grid-template-columns:1fr;}
  .map-split-map{min-height:280px;}
  .map-split-list{max-height:none;}
}