/* =========================================================================
   دليل — تحليلات B2B  ·  Design tokens من هوية منصة دليل (Fire Opal + Cetacean Blue)
   ========================================================================= */
:root {
  --ds-primary: #ea5849;
  --ds-primary-active: #ea8070;
  --ds-success: #10924b;
  --ds-danger: #d9342b;
  --card-radius: 0.85rem;

  --app-bg: #f5f8fa;
  --content-bg: #ffffff;
  --card-border: #eef0f4;
  --separator: #e4e6ef;
  --text-strong: #181c32;
  --text-body: #3f4254;
  --text-muted: #7e8299;
  --text-faint: #b5b5c3;
  --surface-hover: #f7f8fb;
  --up-bg: #e8fff3; --up-fg: #0b8a46;
  --down-bg: #fff0ee; --down-fg: #d9342b;
  --card-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
}
[data-theme="dark"] {
  --app-bg: #0d0d1d;
  --content-bg: #1e1e2d;
  --card-border: #2b2b40;
  --separator: #323248;
  --text-strong: #ffffff;
  --text-body: #cdcdde;
  --text-muted: #9a9cae;
  --text-faint: #565674;
  --surface-hover: #2b2b40;
  --up-bg: rgba(16,146,75,.16); --up-fg: #3bd486;
  --down-bg: rgba(217,52,43,.16); --down-fg: #ff6b60;
  --card-shadow: none;
}

* { box-sizing: border-box; font-family: "IBM Plex Sans Arabic", sans-serif; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--app-bg); color: var(--text-body); font-size: .95rem;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.app-header {
  position: sticky; top: 0; z-index: 100; height: 70px;
  background: var(--content-bg); box-shadow: 0 3px 12px rgba(0,0,0,.03);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; gap: 1rem; }
.header-start { display: flex; align-items: center; gap: .85rem; }
.header-end { display: flex; align-items: center; gap: .6rem; }
.logo-img { height: 36px; display: block; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
.header-tag {
  font-size: .78rem; font-weight: 600; color: var(--ds-primary);
  background: var(--down-bg); padding: .28rem .6rem; border-radius: .5rem;
}

.icon-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: .5rem; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: all .15s ease;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--ds-primary); }

.win-select { display: flex; align-items: center; gap: .45rem; }
.win-select label { font-size: .78rem; color: var(--text-muted); }
.win-select select {
  height: 40px; border: 1px solid var(--card-border); background: var(--content-bg);
  color: var(--text-body); border-radius: .6rem; padding: 0 .7rem; font-size: .85rem; cursor: pointer; outline: none;
}

.btn-refresh {
  display: inline-flex; align-items: center; gap: .5rem; height: 40px; padding: 0 1rem;
  border: none; border-radius: .6rem; background: var(--ds-primary); color: #fff;
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .15s ease;
}
.btn-refresh:hover { background: var(--ds-primary-active); }
.btn-refresh.busy { opacity: .7; pointer-events: none; }
.btn-refresh.busy svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Body layout: sidebar + content */
.app-body { display: flex; align-items: stretch; min-height: calc(100vh - 70px); }
.menu-btn { display: none; }

.app-sidebar {
  width: 232px; flex-shrink: 0; background: var(--content-bg); border-inline-end: 1px solid var(--card-border);
  display: flex; flex-direction: column; justify-content: space-between; padding: 1rem .75rem;
}
.side-nav { display: flex; flex-direction: column; gap: .25rem; }
.nav-item {
  display: flex; align-items: center; gap: .65rem; width: 100%; text-align: start;
  border: none; background: transparent; color: var(--text-body); cursor: pointer;
  padding: .7rem .85rem; border-radius: .6rem; font-size: .9rem; font-weight: 500; font-family: inherit;
  transition: all .12s ease;
}
.nav-item:hover { background: var(--surface-hover); color: var(--ds-primary); }
.nav-item.active { background: var(--pill-bg, var(--down-bg)); color: var(--ds-primary); font-weight: 600; }
.nav-ic { font-size: 1.05rem; line-height: 1; }
.side-foot { font-size: .68rem; color: var(--text-faint); padding: .75rem .85rem; line-height: 1.6; }

.drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(13,13,29,.4); z-index: 90; }
.drawer-overlay.show { display: block; }

/* Content */
.app-content { flex: 1; min-width: 0; padding: 1.75rem 0 3rem; }
.content-container { max-width: 1180px; margin: 0 auto; padding: 0 1.75rem; }
.page-head { margin-bottom: 1.4rem; }
.page-title { font-size: 1.55rem; font-weight: 700; color: var(--text-strong); margin: 0 0 .4rem; }
.page-sub { font-size: .85rem; color: var(--text-muted); margin: 0; }
.page-sub b { color: var(--text-body); font-weight: 600; }

.status-bar {
  background: var(--down-bg); color: var(--down-fg); border-radius: .6rem;
  padding: .7rem 1rem; font-size: .85rem; margin-bottom: 1rem; font-weight: 500;
}

/* Filter bar */
.filter-bar {
  display: flex; align-items: flex-end; gap: .9rem; flex-wrap: wrap;
  background: var(--content-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow); padding: .9rem 1rem; margin-bottom: 1.4rem;
}
.fl-field { display: flex; flex-direction: column; gap: .3rem; min-width: 150px; }
.fl-field[hidden] { display: none; }
.fl-field label { font-size: .7rem; color: var(--text-muted); font-weight: 500; }
.fl-field select, .fl-field input {
  height: 40px; border: 1px solid var(--card-border); background: var(--app-bg); color: var(--text-body);
  border-radius: .55rem; padding: 0 .7rem; font-size: .85rem; outline: none; font-family: inherit;
  color-scheme: light;
}
[data-theme="dark"] .fl-field select, [data-theme="dark"] .fl-field input { color-scheme: dark; }
.fl-field select:focus, .fl-field input:focus { border-color: var(--ds-primary); }
.fl-field input[list] { min-width: 200px; }
.custom-range .cr-inputs { display: flex; gap: .4rem; }
.custom-range .cr-inputs input { min-width: 130px; }
.btn-clear-all {
  height: 40px; border: 1px solid var(--card-border); background: var(--app-bg); color: var(--text-muted);
  border-radius: .55rem; padding: 0 .9rem; cursor: pointer; font-size: .82rem; font-family: inherit; font-weight: 500;
  margin-inline-start: auto; align-self: flex-end;
}
.btn-clear-all:hover { color: var(--down-fg); border-color: var(--down-fg); }

.fchip { display: inline-block; font-size: .8rem; color: var(--text-body); }
.fchip.on {
  background: var(--pill-bg, var(--down-bg)); color: var(--ds-primary); font-weight: 600;
  padding: .1rem .5rem; border-radius: .4rem;
}

/* KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem; margin-bottom: 1.6rem; }
.kpi {
  background: var(--content-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--card-shadow);
}
.kpi-label { font-size: .78rem; color: var(--text-muted); margin-bottom: .5rem; }
.kpi-val { font-size: 1.32rem; font-weight: 700; color: var(--text-strong); letter-spacing: -.01em; }
.kpi-delta { font-size: .8rem; font-weight: 600; margin-top: .35rem; }
.kpi-delta.up { color: var(--up-fg); } .kpi-delta.down { color: var(--down-fg); } .kpi-delta.flat { color: var(--text-faint); }

/* Panels */
.panel {
  background: var(--content-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius);
  box-shadow: var(--card-shadow); margin-bottom: 1.4rem; overflow: hidden;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: 1.1rem 1.3rem .3rem; }
.panel-head h2 { font-size: 1.02rem; font-weight: 700; color: var(--text-strong); margin: 0; }
.panel-note { font-size: .76rem; color: var(--text-muted); }
.tbl-search {
  height: 38px; min-width: 220px; border: 1px solid var(--card-border); background: var(--app-bg);
  color: var(--text-body); border-radius: .55rem; padding: 0 .8rem; font-size: .84rem; outline: none; font-family: inherit;
}
.tbl-search:focus { border-color: var(--ds-primary); }
.sortable th { cursor: pointer; user-select: none; }
.sortable th:hover { color: var(--ds-primary); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.two-col .panel { margin-bottom: 0; }
.two-col + .panel, .two-col { margin-bottom: 1.4rem; }

/* Tables */
.table-wrap { overflow-x: auto; padding: .6rem .4rem 1rem; }
.dtable { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dtable th {
  text-align: start; font-weight: 600; color: var(--text-muted); font-size: .74rem;
  padding: .55rem .9rem; border-bottom: 1px solid var(--separator); white-space: nowrap;
}
.dtable td { padding: .6rem .9rem; border-bottom: 1px solid var(--card-border); white-space: nowrap; }
.dtable tbody tr:last-child td, .dtable tbody tr:last-child td { border-bottom: none; }
.dtable tbody tr:hover { background: var(--surface-hover); }
.c-name { text-align: start; color: var(--text-strong); font-weight: 600; }
.c-num { text-align: end; font-variant-numeric: tabular-nums; }
.empty-cell { text-align: center; color: var(--text-muted); padding: 1.4rem; }

.pos { color: var(--up-fg); font-weight: 600; }
.neg { color: var(--down-fg); font-weight: 600; }

.chip { display: inline-block; padding: .16rem .5rem; border-radius: .45rem; font-size: .76rem; font-weight: 600; }
.chip.up { background: var(--up-bg); color: var(--up-fg); }
.chip.down { background: var(--down-bg); color: var(--down-fg); }
.chip.flat { background: var(--surface-hover); color: var(--text-muted); }

/* Chart / trends */
.chart-controls { display: flex; gap: .6rem; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--app-bg); border: 1px solid var(--card-border); border-radius: .6rem; padding: .2rem; gap: .15rem; }
.seg-btn {
  border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit;
  padding: .38rem .7rem; border-radius: .45rem; font-size: .8rem; font-weight: 500; white-space: nowrap;
}
.seg-btn:hover { color: var(--ds-primary); }
.seg-btn.active { background: var(--content-bg); color: var(--ds-primary); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.chart-box { position: relative; padding: 1rem 1.1rem .4rem; }
.chart-loading { display: flex; align-items: center; justify-content: center; gap: .6rem; height: 300px; color: var(--text-muted); font-size: .88rem; }
.chart-svg { display: block; overflow: visible; }
.chart-svg .grid { stroke: var(--card-border); stroke-width: 1; }
.chart-svg .area { fill: url(#ag); stroke: none; }
.ag-top { stop-color: var(--ds-primary); stop-opacity: .28; }
.ag-bot { stop-color: var(--ds-primary); stop-opacity: 0; }
.chart-svg .line { fill: none; stroke: var(--ds-primary); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .dot { fill: var(--content-bg); stroke: var(--ds-primary); stroke-width: 1.6; }
.chart-svg .ylab { fill: var(--text-faint); font-size: 11px; text-anchor: end; }
.chart-svg .xlab { fill: var(--text-faint); font-size: 10.5px; text-anchor: middle; }
.chart-svg .hoverline { stroke: var(--ds-primary); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.chart-svg .hoverdot { fill: var(--ds-primary); stroke: var(--content-bg); stroke-width: 2; }
.chart-tip {
  position: absolute; background: var(--text-strong); color: #fff; font-size: .74rem; line-height: 1.5;
  padding: .35rem .55rem; border-radius: .45rem; pointer-events: none; white-space: nowrap; z-index: 5;
}
.chart-tip b { font-weight: 600; }
.chart-legend { padding: .2rem 1.3rem 1.1rem; font-size: .78rem; color: var(--text-muted); }
.chart-legend b { color: var(--text-body); font-weight: 600; }
.spinner.sm { width: 24px; height: 24px; border: 2.5px solid var(--card-border); border-top-color: var(--ds-primary); }

/* Loader */
.loader {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center; gap: .9rem;
  flex-direction: column; background: rgba(13,13,29,.35); backdrop-filter: blur(2px); z-index: 300; color: #fff; font-size: .9rem;
}
.loader.show { display: flex; }
.spinner { width: 42px; height: 42px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }

/* Responsive */
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .menu-btn { display: flex; }
  .app-sidebar {
    position: fixed; top: 70px; inset-inline-start: 0; height: calc(100vh - 70px); z-index: 95;
    transform: translateX(100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.15);
  }
  [dir="rtl"] .app-sidebar { transform: translateX(100%); }
  .app-sidebar.open { transform: translateX(0); }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .header-tag { display: none; }
  .btn-refresh span { display: none; }
  .btn-refresh { padding: 0 .7rem; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .content-container { padding: 0 1rem; }
}