:root {
  --primary: #0f766e;
  --primary-strong: #0b5f59;
  --primary-soft: #e8f5f3;
  --accent: #c69232;
  --accent-soft: #fff8e8;
  --ink: #14212b;
  --muted: #667783;
  --muted-2: #8b99a2;
  --line: #e5ebee;
  --line-strong: #d7e0e4;
  --canvas: #f5f7f8;
  --surface: #fff;
  --danger: #c43d4d;
  --danger-soft: #fff0f2;
  --warning: #b87813;
  --warning-soft: #fff7e5;
  --success: #26845e;
  --success-soft: #eaf7f1;
  --info: #2d6da6;
  --info-soft: #edf5fc;
  --sidebar-width: 278px;
  --radius: 15px;
  --shadow: 0 8px 24px rgba(18, 46, 58, .055);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(135, 177, 171, .58) #0d282b;
}
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: #0d282b; }
html::-webkit-scrollbar-thumb {
  background: rgba(135, 177, 171, .58);
  border: 2px solid #0d282b;
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover { background: #d5a64f; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Tajawal", Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, [data-route], [data-action] { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
svg { width: 20px; height: 20px; stroke-width: 1.8; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 0 0 auto; z-index: 40;
  width: var(--sidebar-width); height: 100vh;
  background: #0d282b; color: #dbe7e5;
  display: flex; flex-direction: column;
  transition: width .25s ease, transform .25s ease;
  overflow: hidden;
}
.brand {
  height: 88px; padding: 18px 20px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid #e4e9eb; background:#fff; white-space: nowrap;
}
.brand-mark {
  width: 82px; height: 50px; flex: 0 0 82px; border-radius: 10px;
  display: grid; place-items: center; overflow:hidden; background:#fff;
}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.brand strong { display: block; color: #17252d; font-size: 13px; margin-bottom: 5px; }
.brand span { display:block;color:#3e4b53;font-family:Arial,sans-serif;direction:ltr;text-align:right; }
.brand span b,.brand span small{display:block}.brand span b{font-size:11px}.brand span small{margin-top:2px;color:#b87813;font-size:9px;letter-spacing:.03em}
.side-nav {
  padding: 14px 12px 24px; overflow: auto; flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(135, 177, 171, .52) #0d282b;
}
.side-nav::-webkit-scrollbar,
.tour-sections::-webkit-scrollbar { width: 7px; height: 7px; }
.side-nav::-webkit-scrollbar-track,
.tour-sections::-webkit-scrollbar-track { background: #0d282b; }
.side-nav::-webkit-scrollbar-thumb,
.tour-sections::-webkit-scrollbar-thumb {
  background: rgba(135, 177, 171, .52);
  border: 2px solid #0d282b;
  border-radius: 999px;
}
.side-nav::-webkit-scrollbar-thumb:hover,
.tour-sections::-webkit-scrollbar-thumb:hover { background: #d5a64f; }
.nav-section-label { padding: 16px 12px 7px; color: #6f8c89; font-size: 10px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.nav-item {
  width: 100%; border: 0; background: transparent; color: #afc3c0;
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0;
  border-radius: 10px; cursor: pointer; text-align: right; transition: .18s ease; white-space: nowrap;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.active { color: #fff; background: #17645f; box-shadow: inset -3px 0 #d6a64f; }
.nav-item svg { width: 18px; flex: 0 0 18px; }
.nav-item span { flex: 1; }
.nav-badge { flex: 0!important; min-width: 21px; padding: 2px 6px; border-radius: 20px; background: #bd7c27; color: #fff; text-align: center; font-size: 10px; }
.sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.support-card { width:100%; border:1px solid transparent; display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.055); border-radius: 11px; padding: 11px; margin-bottom: 8px; white-space: nowrap; cursor:pointer; text-align:right; }
.support-card:hover,.support-card:focus-visible { background:rgba(255,255,255,.1);border-color:rgba(217,173,92,.4);outline:0 }
.support-card svg { color: #d9ad5c; flex: 0 0 20px; }
.support-card strong, .support-card span { display: block; }
.support-card strong { color: #eef5f4; font-size: 12px; }
.support-card span { color: #82a09c; font-size: 10px; margin-top: 2px; }
.collapse-btn { width: 100%; border: 0; background: transparent; color: #819b98; padding: 8px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
body.sidebar-collapsed { --sidebar-width: 78px; }
body.sidebar-collapsed .brand { padding-inline: 8px; }
body.sidebar-collapsed .brand > div:last-child, body.sidebar-collapsed .nav-item span, body.sidebar-collapsed .nav-badge, body.sidebar-collapsed .nav-section-label, body.sidebar-collapsed .support-card div, body.sidebar-collapsed .collapse-btn span { display: none; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 11px; }
body.sidebar-collapsed .support-card { justify-content: center; }
body.sidebar-collapsed .brand-mark{width:62px;height:48px;flex-basis:62px}

.main-shell { margin-right: var(--sidebar-width); min-height: 100vh; transition: margin .25s ease; }
.topbar {
  height: 88px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; padding: 0 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.topbar-title { display: flex; align-items: center; gap: 10px; min-width: 170px; }
.topbar-title span { color: var(--muted-2); font-size: 11px; }
.topbar-title h1 { margin: 3px 0 0; font-size: 21px; line-height: 1; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.global-search { width: min(400px, 32vw); height: 43px; position: relative; display: flex; align-items: center; gap: 9px; padding: 0 13px; background: #f5f7f8; border: 1px solid #edf0f2; border-radius: 11px; }
.global-search > svg { color: #7b8b94; width: 18px; }
.global-search input { border: 0; outline: 0; background: transparent; width: 100%; color: var(--ink); }
.global-search kbd { direction: ltr; color: #829099; background: #fff; border: 1px solid #dce3e6; border-radius: 5px; padding: 2px 6px; font: 10px Arial; }
.search-results { display: none; position: absolute; top: 50px; right: 0; left: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 7px; box-shadow: 0 18px 45px rgba(20,40,50,.15); max-height: 370px; overflow: auto; }
.search-results.show { display: block; }
.search-result { border: 0; background: transparent; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; text-align: right; }
.search-result:hover { background: var(--canvas); }
.result-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.search-result strong, .search-result span { display: block; }
.search-result span { color: var(--muted); font-size: 11px; margin-top: 2px; }
.icon-btn { border: 1px solid var(--line); background: #fff; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; cursor: pointer; position: relative; }
.icon-btn:hover { background: #f7f9fa; }
.notification-dot { position: absolute; top: 6px; right: 7px; background: #d84b5b; color: #fff; border: 2px solid #fff; min-width: 17px; height: 17px; border-radius: 12px; font: 9px Arial; display: grid; place-items: center; }
.user-menu { display: flex; align-items: center; gap: 9px; padding-right: 5px; min-width: 150px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; color: #fff; background: linear-gradient(140deg, #0f766e, #209287); display: grid; place-items: center; font-weight: 700; }
.user-menu strong, .user-menu span { display: block; white-space: nowrap; }
.demo-mode-banner{max-width:1800px;margin:14px auto 0;padding:11px 30px;display:flex;align-items:center;gap:10px;color:#725014;background:#fff8e8;border-block:1px solid #f0dcae}.demo-mode-banner>svg{width:19px;color:var(--warning);flex:0 0 19px}.demo-mode-banner strong,.demo-mode-banner span{display:block}.demo-mode-banner strong{font-size:12px}.demo-mode-banner span{margin-top:2px;font-size:10px;color:#8a6a31}
.user-menu strong { font-size: 13px; }.user-menu span { color: var(--muted); font-size: 10px; margin-top: 2px; }.user-menu > svg { width: 15px; color: var(--muted); }
.mobile-menu { display: none; }

.page-content { padding: 26px 30px 55px; outline: 0; max-width: 1800px; margin: 0 auto; }
.system-credit{max-width:1800px;margin:0 auto;padding:16px 30px 24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted-2)}.system-credit>span{font-size:10px}.system-credit>img{width:78px;height:39px;object-fit:contain;padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:#fff}.system-credit div strong,.system-credit div small{display:block;font-family:Arial,sans-serif}.system-credit div strong{font-size:11px;color:#26343d}.system-credit div small{margin-top:2px;font-size:9px;color:#b87813;letter-spacing:.04em}
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.page-head h2 { margin: 0 0 5px; font-size: 23px; }.page-head p { margin: 0; color: var(--muted); }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb { display: flex; gap: 7px; align-items: center; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.breadcrumb button { border: 0; background: none; color: var(--primary); padding: 0; cursor: pointer; }.breadcrumb svg { width: 13px; }
.btn { border: 1px solid var(--line-strong); background: #fff; padding: 9px 14px; min-height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font-weight: 600; transition: .16s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(15,40,45,.07); }
.btn svg { width: 17px; }.btn-primary { color: #fff; background: var(--primary); border-color: var(--primary); }.btn-primary:hover { background: var(--primary-strong); }.btn-danger { color: var(--danger); border-color: #f0cbd0; background: var(--danger-soft); }.btn-soft { color: var(--primary); background: var(--primary-soft); border-color: transparent; }.btn-warning { color: #fff; background: var(--warning); border-color: var(--warning); }.btn-sm { padding: 6px 10px; min-height: 32px; font-size: 12px; border-radius: 8px; }.btn-icon { width: 34px; height: 34px; min-height: 34px; padding: 0; }

.panel, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { margin-bottom: 18px; }
.panel-header { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-header h3 { margin: 0; font-size: 16px; }.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.panel-body { padding: 20px; }.panel-footer { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.text-link { border: 0; background: none; color: var(--primary); cursor: pointer; font-weight: 600; padding: 3px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 13px; }.section-title h3 { margin: 0; font-size: 17px; }.section-title p { margin: 3px 0 0; color: var(--muted); }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-card { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 16px; min-height: 118px; position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(20,50,60,.035); }
.kpi-card::after { content:""; position:absolute; width:70px; height:70px; border-radius:50%; background:var(--tone,#eef7f6); top:-33px; left:-28px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; color: var(--muted); gap: 8px; }.kpi-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--tone, var(--primary-soft)); color: var(--color,var(--primary)); }.kpi-icon svg { width: 17px; }.kpi-label { font-size: 11px; font-weight: 500; }
.kpi-value { margin-top: 12px; font-size: 24px; font-weight: 800; line-height: 1; direction: ltr; text-align: right; }.kpi-note { margin-top: 7px; color: var(--muted-2); font-size: 10px; }.kpi-note.up { color: var(--success); }.kpi-note.alert { color: var(--danger); }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }.stat-card { padding:17px; }.stat-card span { color:var(--muted); }.stat-card strong { display:block; margin-top:6px; font-size:22px; }

.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }.dashboard-grid > * { min-width: 0; }.span-8 { grid-column: span 8; }.span-7 { grid-column: span 7; }.span-6 { grid-column: span 6; }.span-5 { grid-column: span 5; }.span-4 { grid-column: span 4; }
.chart-wrap { min-height: 240px; }.legend { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 15px; }.legend-item { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.donut-layout { display: flex; align-items: center; justify-content: center; gap: 24px; padding-top: 12px; min-width: 0; }.donut-layout .legend { min-width: 0; }.donut { width: 158px; height: 158px; border-radius: 50%; position: relative; display: grid; place-items: center; flex:0 0 158px; }.donut::after { content:""; position:absolute; width:102px; height:102px; background:#fff; border-radius:50%; }.donut-center { z-index:1; text-align:center; }.donut-center strong,.donut-center span { display:block; }.donut-center strong { font-size:24px; }.donut-center span { color:var(--muted); font-size:10px; }
.chart-bars { height: 220px; display: flex; align-items: flex-end; gap: 18px; padding: 22px 8px 0; border-bottom: 1px solid var(--line); position:relative; }.chart-bars::before,.chart-bars::after { content:""; position:absolute; right:0; left:0; border-top:1px dashed #e8edef; }.chart-bars::before{top:33%;}.chart-bars::after{top:66%;}.chart-col { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px; z-index:1; }.chart-bar-pair { display:flex; align-items:flex-end; gap:4px; height:calc(100% - 25px); }.vbar { width:15px; min-height:3px; border-radius:5px 5px 1px 1px; background:var(--primary); transition:height .5s ease; }.vbar.alt { background:#b6d8d4; }.chart-label { color:var(--muted); font-size:10px; white-space:nowrap; }
.hbar-list { display: grid; gap: 15px; }.hbar-row { display:grid; grid-template-columns:minmax(100px,1fr) 3fr 45px; gap:10px; align-items:center; }.hbar-row.clickable { cursor:pointer; padding:5px 7px; margin:-5px -7px; border-radius:8px; }.hbar-row.clickable:hover { background:var(--primary-soft); color:var(--primary); }.hbar-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.hbar-track { height:8px; border-radius:8px; background:#edf1f2; overflow:hidden; }.hbar-fill { height:100%; border-radius:inherit; background:var(--bar-color,var(--primary)); }.hbar-value { direction:ltr; color:var(--muted); font-size:11px; text-align:left; }

.toolbar { padding: 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }.toolbar .field-search { min-width:220px; flex:1; }.field-search { height:40px; display:flex; align-items:center; gap:8px; padding:0 11px; background:#fff; border:1px solid var(--line-strong); border-radius:9px; }.field-search svg { width:16px; color:var(--muted); }.field-search input { border:0; outline:0; width:100%; background:transparent; }.select, .input, .textarea { width:100%; min-height:40px; border:1px solid var(--line-strong); border-radius:9px; background:#fff; color:var(--ink); padding:8px 11px; outline:none; }.select:focus,.input:focus,.textarea:focus { border-color:#6dafaa; box-shadow:0 0 0 3px rgba(15,118,110,.09); }.textarea { min-height:90px; resize:vertical; }
.view-toggle { display:flex; border:1px solid var(--line-strong); border-radius:9px; overflow:hidden; }.view-toggle button { width:38px; height:38px; border:0; border-left:1px solid var(--line); background:#fff; display:grid; place-items:center; cursor:pointer; }.view-toggle button:last-child{border-left:0}.view-toggle button.active{color:var(--primary);background:var(--primary-soft)}.view-toggle svg{width:16px}

.table-wrap { width:100%; overflow:auto; }.data-table { width:100%; border-collapse:collapse; min-width:860px; }.data-table th { background:#f8fafb; color:#61727c; font-size:11px; font-weight:700; padding:11px 14px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line); }.data-table td { padding:13px 14px; border-bottom:1px solid #edf1f2; vertical-align:middle; }.data-table tr:last-child td { border-bottom:0; }.data-table tbody tr { transition:.13s; }.data-table tbody tr:hover { background:#fbfcfc; }.data-table tbody tr.clickable { cursor:pointer; }.cell-main { display:flex; align-items:center; gap:10px; }.item-thumb { width:38px; height:38px; flex:0 0 38px; border-radius:10px; display:grid; place-items:center; background:var(--thumb,#edf6f5); color:var(--primary); font-weight:800; }.cell-title { display:block; font-weight:600; }.cell-sub { display:block; color:var(--muted); font-size:10px; margin-top:3px; }.num { direction:ltr; display:inline-block; }.actions { display:flex; align-items:center; gap:5px; }
.badge { display:inline-flex; align-items:center; gap:5px; min-height:24px; padding:3px 8px; border-radius:20px; color:#53636d; background:#eff3f4; font-size:10px; font-weight:600; white-space:nowrap; }.badge::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }.badge-success{color:var(--success);background:var(--success-soft)}.badge-warning{color:var(--warning);background:var(--warning-soft)}.badge-danger{color:var(--danger);background:var(--danger-soft)}.badge-info{color:var(--info);background:var(--info-soft)}.badge-primary{color:var(--primary);background:var(--primary-soft)}.badge-neutral{color:#6b7880;background:#f0f2f3}
.pagination { display:flex; align-items:center; gap:5px; }.page-btn { border:1px solid var(--line); background:#fff; min-width:31px; height:31px; border-radius:7px; cursor:pointer; }.page-btn.active { color:#fff; background:var(--primary); border-color:var(--primary); }
.empty-state { text-align:center; padding:50px 20px; color:var(--muted); }.empty-icon { width:58px; height:58px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; background:var(--canvas); color:#98a7af; }.empty-state h3 { margin:0 0 5px; color:var(--ink); }

.item-cards,.location-grid,.team-grid,.quick-report-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.item-card,.location-card,.team-card,.quick-card { padding:17px; cursor:pointer; transition:.17s; }.item-card:hover,.location-card:hover,.team-card:hover,.quick-card:hover { transform:translateY(-2px); border-color:#bfcece; box-shadow:0 10px 22px rgba(20,50,60,.08); }.item-card-head,.location-card-head,.team-card-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }.item-card h3,.location-card h3,.team-card h3 { margin:0; font-size:15px; }.item-card p,.location-card p,.team-card p { color:var(--muted); margin:5px 0 0; font-size:11px; }.card-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; padding-top:13px; border-top:1px solid var(--line); }.card-stat span,.card-stat strong{display:block}.card-stat span{color:var(--muted);font-size:9px}.card-stat strong{margin-top:4px;font-size:15px}.location-icon,.team-icon,.quick-icon { width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary); }.location-icon svg,.team-icon svg,.quick-icon svg{width:20px}

.detail-hero { background:linear-gradient(110deg,#fff 55%,#eff8f7); padding:22px; display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:17px; }.detail-id { display:flex;align-items:center;gap:14px; }.detail-icon { width:58px;height:58px;border-radius:15px;display:grid;place-items:center;background:#dcefeb;color:var(--primary);font-size:18px;font-weight:800; }.detail-id h2{margin:0 0 5px;font-size:22px}.detail-id p{margin:0;color:var(--muted)}.hero-actions{display:flex;gap:7px;flex-wrap:wrap}
.mini-kpis { display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:17px; }.mini-kpi { padding:14px; }.mini-kpi span{color:var(--muted);font-size:10px}.mini-kpi strong{display:block;font-size:20px;margin-top:7px}.mini-kpi.danger strong{color:var(--danger)}
.tabs { display:flex;gap:3px;overflow:auto;border-bottom:1px solid var(--line);padding:0 18px;background:#fff;border-radius:var(--radius) var(--radius) 0 0; }.tab-btn{border:0;border-bottom:2px solid transparent;background:transparent;padding:14px 13px;color:var(--muted);cursor:pointer;white-space:nowrap;font-weight:600}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-content{padding:20px}.variant-pills{display:flex;gap:10px;flex-wrap:wrap}.variant-pill{border:1px solid var(--line);border-radius:11px;padding:12px 15px;min-width:120px}.variant-pill span,.variant-pill strong{display:block}.variant-pill span{color:var(--muted);font-size:11px}.variant-pill strong{font-size:19px;margin-top:4px}
.profile-info{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.info-field{padding:13px;background:#f8fafb;border-radius:9px}.info-field span,.info-field strong{display:block}.info-field span{color:var(--muted);font-size:10px;margin-bottom:5px}
.timeline{position:relative;padding-right:25px}.timeline::before{content:"";position:absolute;right:7px;top:7px;bottom:7px;border-right:2px solid #dfe8e8}.timeline-item{position:relative;padding:0 15px 22px}.timeline-dot{position:absolute;right:-24px;top:2px;width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:var(--primary);box-shadow:0 0 0 1px #9bc8c4}.timeline-item h4{margin:0 0 4px}.timeline-item p{margin:0;color:var(--muted);font-size:12px}.timeline-item time{display:block;color:var(--muted-2);font-size:10px;margin-bottom:5px}

.form-layout { display:grid;grid-template-columns:minmax(0,2fr) minmax(270px,1fr);gap:17px;align-items:start }.form-card { padding:20px }.form-section-title { display:flex;gap:9px;align-items:center;margin-bottom:16px }.step-number{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--primary);color:#fff;font-size:11px;font-weight:700}.form-section-title h3{margin:0;font-size:15px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group.full{grid-column:1/-1}.form-group label{font-size:11px;font-weight:600;color:#4d5e68}.optional{color:var(--muted-2);font-weight:400}.form-hint{color:var(--muted);font-size:10px}.summary-card{padding:20px;position:sticky;top:108px}.summary-card h3{margin:0 0 16px}.summary-row{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid var(--line);}.summary-row span{color:var(--muted)}.summary-row strong{text-align:left}.summary-card .btn{width:100%;margin-top:15px}
.wizard-steps{display:flex;align-items:center;margin-bottom:18px}.wizard-step{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.wizard-step i{width:26px;height:26px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;font-style:normal}.wizard-step.active{color:var(--primary);font-weight:700}.wizard-step.active i{background:var(--primary);border-color:var(--primary);color:#fff}.wizard-line{height:1px;min-width:30px;flex:1;background:var(--line);margin:0 8px}
.availability{padding:11px 13px;background:var(--success-soft);border:1px solid #cfeadf;border-radius:9px;display:flex;justify-content:space-between;color:var(--success)}

.overdue-list,.activity-list,.approval-list,.notification-list{display:grid;gap:2px}.list-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}.list-row:last-child{border-bottom:0}.list-row-icon{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);flex:0 0 37px}.list-row-icon.danger{background:var(--danger-soft);color:var(--danger)}.list-row-content{min-width:0;flex:1}.list-row-content strong,.list-row-content span{display:block}.list-row-content strong{font-size:12px}.list-row-content span{color:var(--muted);font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-row-side{text-align:left}.list-row-side strong,.list-row-side span{display:block}.list-row-side span{color:var(--muted);font-size:9px;margin-top:3px}
.notification-card{display:flex;gap:13px;padding:15px;border-bottom:1px solid var(--line);align-items:flex-start}.notification-card.unread{background:#fbfefe}.notification-card .list-row-icon{margin-top:2px}.notification-card h4{margin:0 0 4px}.notification-card p{margin:0;color:var(--muted);font-size:11px}.notification-card time{display:block;color:var(--muted-2);font-size:9px;margin-top:6px}.unread-dot{width:7px;height:7px;border-radius:50%;background:var(--primary);margin-top:7px}

.report-builder { padding:20px }.filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick-card{display:flex;align-items:center;gap:11px}.quick-card h4{margin:0 0 3px}.quick-card span{color:var(--muted);font-size:10px}.report-preview{background:#f8fafb;border:1px dashed var(--line-strong);border-radius:12px;padding:20px;margin-top:16px}.active-filters{display:flex;gap:6px;flex-wrap:wrap}.filter-chip{display:inline-flex;gap:6px;align-items:center;padding:6px 9px;border-radius:20px;background:var(--primary-soft);color:var(--primary);font-size:10px}
.report-focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:17px}.report-focus-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:18px;cursor:pointer;transition:.18s}.report-focus-card:hover{transform:translateY(-2px);border-color:#9fcac6;box-shadow:0 10px 24px rgba(20,50,60,.08)}.report-focus-card.active{border-color:var(--primary);background:linear-gradient(135deg,#fff,#eff9f7);box-shadow:0 0 0 2px rgba(15,118,110,.08)}.report-focus-card h3{margin:0 0 5px;font-size:15px}.report-focus-card p{margin:0;color:var(--muted);font-size:10px;line-height:1.7}.report-focus-card>svg{width:17px;color:var(--primary)}.report-search-panel{border-top:3px solid var(--primary)}.report-primary-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;align-items:end}.report-run{min-height:40px;align-self:end}.report-export-actions{justify-content:flex-end;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}.report-result-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;margin:22px 0 14px;border:1px solid #bfddd9;border-radius:var(--radius);background:linear-gradient(115deg,#eaf7f5,#fff)}.report-result-head h2{margin:4px 0 5px;font-size:22px}.report-result-head p{margin:0;color:var(--muted)}.report-kicker{color:var(--primary);font-size:10px;font-weight:800}.report-stamp{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:9px;background:#fff;color:var(--primary);font-size:10px;font-weight:700;white-space:nowrap}.report-stamp svg{width:16px}.ledger-table{min-width:1120px}.ledger-table tbody td:first-child{white-space:nowrap}.issue-table{min-width:1080px}.issue-table .issue-item{min-width:190px}.issue-table .issue-variant{min-width:130px}.issue-table .issue-qty{min-width:85px}.issue-table .issue-type{min-width:155px}.issue-table .issue-due{min-width:145px}.issue-totals{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.issue-totals>strong{font-size:16px}.return-line .return-qty{min-width:95px}
.inventory-diff.positive{color:var(--success)}.inventory-diff.negative{color:var(--danger)}

/* الجولة التعريفية */
.tour-layer{position:fixed;inset:0;z-index:150;pointer-events:none}.tour-layer[hidden]{display:none}.tour-spotlight{position:fixed;border:3px solid #e2b452;border-radius:14px;box-shadow:0 0 0 9999px rgba(6,23,27,.68),0 0 0 6px rgba(226,180,82,.2);transition:top .24s ease,left .24s ease,width .24s ease,height .24s ease;pointer-events:none}.tour-spotlight::after{content:"";position:absolute;inset:-8px;border:2px solid rgba(226,180,82,.32);border-radius:18px;animation:tourPulse 1.7s ease-out infinite}@keyframes tourPulse{0%{transform:scale(.985);opacity:.9}70%,100%{transform:scale(1.025);opacity:0}}
.tour-tip{position:fixed;width:min(390px,calc(100vw - 28px));padding:18px;background:#fff;border:1px solid #dbe4e6;border-radius:15px;box-shadow:0 22px 60px rgba(4,22,27,.26);pointer-events:auto;transition:top .2s ease,left .2s ease}.tour-tip::before{content:"";position:absolute;width:12px;height:12px;background:#fff;border-right:1px solid #dbe4e6;border-top:1px solid #dbe4e6;transform:rotate(-45deg);top:-7px;right:38px}.tour-tip.above::before{top:auto;bottom:-7px;transform:rotate(135deg)}.tour-tip-head{display:flex;align-items:center;justify-content:space-between;color:var(--primary);font-size:10px;font-weight:800}.tour-tip h3{font-size:18px;margin:11px 0 7px}.tour-tip p{font-size:12px;line-height:1.85;color:var(--muted);margin:0}.tour-tip-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}.tour-tip-footer .btn{display:inline-flex;align-items:center;gap:6px}.tour-icon-btn{width:31px;height:31px;border:0;border-radius:8px;background:#f1f5f5;color:var(--muted);display:grid;place-items:center;cursor:pointer}.tour-icon-btn:hover{background:var(--primary-soft);color:var(--primary)}.tour-icon-btn svg{width:15px}
.tour-hub{position:fixed;left:20px;bottom:20px;width:318px;max-height:min(570px,calc(100vh - 40px));display:flex;flex-direction:column;background:#0d282b;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.34);overflow:hidden;pointer-events:auto}.tour-hub-head{display:flex;align-items:center;justify-content:space-between;padding:16px 17px 11px}.tour-hub-head span,.tour-hub-head strong{display:block}.tour-hub-head span{font-size:10px;color:#8eaaa7}.tour-hub-head strong{font-size:14px;margin-top:4px}.tour-hub .tour-icon-btn{background:rgba(255,255,255,.08);color:#b9cecb}.tour-progress-track{height:5px;margin:0 17px 13px;background:rgba(255,255,255,.1);border-radius:9px;overflow:hidden}.tour-progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d5a64f,#f1cf78);border-radius:inherit;transition:width .25s}.tour-sections{overflow:auto;padding:0 9px 8px;scrollbar-width:thin;scrollbar-color:rgba(135,177,171,.52) #0d282b}.tour-section{width:100%;border:0;background:transparent;color:#bed0ce;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:10px 9px;border-radius:10px;cursor:pointer;text-align:right}.tour-section:hover{background:rgba(255,255,255,.06)}.tour-section.active{background:#17645f;color:#fff}.tour-section.done .tour-section-number{background:#d5a64f;color:#1b2a2c}.tour-section-number{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:11px;font-weight:800}.tour-section-copy strong,.tour-section-copy small{display:block}.tour-section-copy strong{font-size:11px}.tour-section-copy small{color:#779592;font-size:9px;margin-top:3px}.tour-section.active .tour-section-copy small{color:#a9ceca}.tour-section-progress{font:10px Arial;color:#d8b566;direction:ltr}.tour-reset{margin:0 12px 12px;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:transparent;color:#93aaa7;font-size:10px;display:flex;justify-content:center;align-items:center;gap:7px;cursor:pointer}.tour-reset:hover{color:#fff;background:rgba(255,255,255,.06)}.tour-reset svg{width:14px}
.tour-resume{position:fixed;left:20px;bottom:20px;z-index:140;border:0;border-radius:13px;background:#0d282b;color:#fff;padding:10px 13px;display:flex;align-items:center;gap:10px;box-shadow:0 15px 38px rgba(5,30,34,.24);cursor:pointer;text-align:right}.tour-resume[hidden]{display:none}.tour-resume-icon{width:35px;height:35px;border-radius:10px;background:#17645f;color:#eacb86;display:grid;place-items:center}.tour-resume-icon svg{width:16px}.tour-resume strong,.tour-resume small{display:block}.tour-resume strong{font-size:11px}.tour-resume small{color:#8fa9a6;font-size:9px;margin-top:2px}.has-tour-resume .toast-stack{bottom:90px}.tour-complete-mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:var(--success-soft);color:var(--success)}.tour-complete-mark svg{width:27px}.tour-tip.completed{text-align:center}.tour-tip.completed::before{display:none}
.settings-layout{display:grid;grid-template-columns:220px 1fr;gap:16px}.settings-locations{grid-column:2}.settings-menu{padding:8px;height:max-content}.settings-menu button{width:100%;border:0;background:transparent;text-align:right;padding:11px;border-radius:8px;cursor:pointer;color:var(--muted)}.settings-menu button.active{background:var(--primary-soft);color:var(--primary);font-weight:700}.setting-list{display:grid;gap:8px}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid var(--line);border-radius:9px}.setting-row strong{display:block}.setting-row span{color:var(--muted);font-size:10px}

.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(7,22,25,.45);backdrop-filter:blur(2px);display:grid;place-items:center;padding:22px}.modal-backdrop[hidden]{display:none}.modal{width:min(620px,100%);max-height:calc(100vh - 44px);overflow:auto;background:#fff;border-radius:16px;box-shadow:0 25px 70px rgba(0,0,0,.22);animation:modalIn .18s ease}.modal.modal-sm{width:min(450px,100%)}.modal.modal-lg{width:min(830px,100%)}@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}.modal-header{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0}.modal-close{border:0;background:#f1f4f5;width:31px;height:31px;border-radius:8px;display:grid;place-items:center;cursor:pointer}.modal-close svg{width:16px}.modal-body{padding:20px}.modal-footer{padding:13px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}.confirm-icon{width:55px;height:55px;border-radius:50%;margin:0 auto 13px;display:grid;place-items:center;background:var(--warning-soft);color:var(--warning)}.confirm-icon.danger{background:var(--danger-soft);color:var(--danger)}.confirm-copy{text-align:center}.confirm-copy h3{margin:0 0 6px}.confirm-copy p{margin:0;color:var(--muted)}
.toast-stack{position:fixed;left:22px;bottom:22px;z-index:130;display:grid;gap:8px}.toast{min-width:300px;max-width:420px;background:#123f3b;color:#fff;padding:13px 15px;border-radius:11px;box-shadow:0 15px 35px rgba(0,0,0,.18);display:flex;align-items:center;gap:10px;animation:toastIn .22s ease}.toast.error{background:#92313d}.toast svg{width:19px}.toast div{flex:1}.toast strong,.toast span{display:block}.toast span{font-size:10px;color:rgba(255,255,255,.75);margin-top:2px}@keyframes toastIn{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:none}}
.loading-state{min-height:60vh;display:grid;place-content:center;text-align:center;color:var(--muted)}.loader{width:34px;height:34px;margin:auto;border:3px solid #d8e6e5;border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.muted{color:var(--muted)}.danger-text{color:var(--danger)}.success-text{color:var(--success)}.ltr{direction:ltr;display:inline-block}.mobile-overlay{display:none}

@media(max-width:1350px){.kpi-grid{grid-template-columns:repeat(4,1fr)}.mini-kpis{grid-template-columns:repeat(4,1fr)}.filter-grid{grid-template-columns:repeat(3,1fr)}.report-primary-filters{grid-template-columns:repeat(3,minmax(150px,1fr))}}
@media(max-width:1120px){:root{--sidebar-width:78px}.brand{padding-inline:16px}.brand>div:last-child,.nav-item span,.nav-badge,.nav-section-label,.support-card div,.collapse-btn span{display:none}.nav-item{justify-content:center;padding:11px}.support-card{justify-content:center}.collapse-btn{display:none}.dashboard-grid>.span-8,.dashboard-grid>.span-7,.dashboard-grid>.span-6,.dashboard-grid>.span-5,.dashboard-grid>.span-4{grid-column:span 12}.item-cards,.location-grid,.team-grid,.quick-report-grid{grid-template-columns:repeat(2,1fr)}.report-focus-grid{grid-template-columns:1fr}.form-layout{grid-template-columns:1fr}.summary-card{position:static}.user-menu>div:not(.avatar),.user-menu>svg{display:none}.user-menu{min-width:auto}.global-search{width:35vw}}
@media(max-width:1120px){.brand{padding-inline:8px}.brand-mark{width:62px;height:48px;flex-basis:62px}}
@media(max-width:760px){:root{--sidebar-width:0px}.sidebar{width:278px;transform:translateX(100%)}body.mobile-nav-open .sidebar{transform:translateX(0)}.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:35}body.mobile-nav-open .mobile-overlay{display:block}.brand>div:last-child,.nav-item span,.nav-badge,.nav-section-label,.support-card div{display:block}.nav-item{justify-content:flex-start}.support-card{justify-content:flex-start}.topbar{height:72px;padding:0 14px}.mobile-menu{display:grid}.topbar-title span{display:none}.topbar-title h1{font-size:17px}.global-search{position:absolute;top:72px;right:12px;left:12px;width:auto;display:none;box-shadow:0 10px 25px rgba(0,0,0,.12)}.global-search.mobile-open{display:flex}.user-menu{display:none}.page-content{padding:19px 13px 40px}.page-head{align-items:flex-start;flex-direction:column}.kpi-grid{grid-template-columns:repeat(2,1fr)}.kpi-card{min-height:108px;padding:13px}.kpi-value{font-size:21px}.dashboard-grid{display:block}.dashboard-grid>.panel{margin-bottom:14px}.item-cards,.location-grid,.team-grid,.quick-report-grid{grid-template-columns:1fr}.mini-kpis{grid-template-columns:repeat(2,1fr)}.stat-grid{grid-template-columns:repeat(2,1fr)}.detail-hero{align-items:flex-start;flex-direction:column}.form-grid,.profile-info,.filter-grid,.report-primary-filters{grid-template-columns:1fr}.report-result-head{align-items:flex-start;flex-direction:column}.report-stamp{white-space:normal}.settings-layout{grid-template-columns:1fr}.settings-locations{grid-column:auto}.settings-menu{display:flex;overflow:auto}.settings-menu button{width:auto;white-space:nowrap}.donut-layout{flex-direction:column}.toast-stack{right:13px;left:13px;bottom:13px}.toast{min-width:0;width:100%}.modal-backdrop{padding:10px}.toolbar>*{flex:1}.toolbar .view-toggle{flex:0}.hbar-row{grid-template-columns:100px 1fr 35px}}
@media(max-width:760px){.demo-mode-banner{margin-top:9px;padding:10px 14px}.demo-mode-banner span{line-height:1.5}.tour-hub{right:10px;left:10px;bottom:10px;width:auto;max-height:42vh}.tour-tip{right:14px!important;left:14px!important;top:84px!important;width:auto}.tour-tip::before{display:none}.tour-spotlight{display:none}.tour-resume{left:13px;bottom:13px}.has-tour-resume .toast-stack{bottom:83px}.tour-section{padding-block:8px}}
@media(max-width:760px){.brand{padding-inline:20px}.brand-mark{width:82px;height:50px;flex-basis:82px}.system-credit{padding:15px 13px 22px;flex-wrap:wrap}.system-credit>span{width:100%;text-align:center}}
@media print{.sidebar,.topbar,.page-actions,.toolbar,.btn,.tabs{display:none!important}.main-shell{margin:0}.page-content{padding:0}.panel,.card{box-shadow:none;break-inside:avoid}body{background:#fff}}