/* =========================================================================
   اقامت۲۴ Reports — Eghamat24 design system (brand red, light, RTL)
   Tokens follow the official design system:
   text #333/#727272/#AAA · brand red #FB373E · blue #37A0FB ·
   borders #DDD · surfaces #FFF/#F4F4F4 · radius 10px · flat depth
   ========================================================================= */

:root {
  --bg:         #ffffff;
  --panel:      #f4f4f4;
  --card:       #ffffff;
  --text:       #333333;
  --text-muted: #727272;
  --text-faint: #aaaaaa;
  --border:     #dddddd;
  --brand:      #fb373e;   /* primary red — CTAs, active states */
  --brand-dark: #e91d26;   /* hover */
  --brand-deep: #c10d0d;   /* active / critical */
  --brand-tint: #fdf5f6;   /* light red wash */
  --accent:     #37a0fb;   /* secondary blue — focus, info */
  --danger:     #c10d0d;   /* error text (readable on white) */
  --warn:       #e97000;   /* orange accent */
  --warn-text:  #b85800;
  --ok:         #11b95f;   /* success fills/badges */
  --ok-text:    #0b7a3f;   /* success text on white */
  --shadow:     0 2px 8px rgba(0, 0, 0, 0.08);      /* L1 raised */
  --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.12);     /* L2 elevated */
  --focus-ring: 0 0 0 3px rgba(55, 160, 251, 0.1);
  --radius:     10px;
  --radius-sm:  5px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'IRANSans', 'IRANSansX', 'Vazirmatn', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Helvetica Neue', Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  direction: rtl;
}

body {
  min-height: 100vh;
}

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover { color: var(--brand-dark); text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 12px 0;
  font-weight: 700;
  color: var(--text);
}

h1 { font-size: 24px; line-height: 38px; }
h2 { font-size: 20px; line-height: 32px; }
h3 { font-size: 16px; font-weight: 500; line-height: 24px; }
h4 { font-size: 14px; font-weight: 500; line-height: 24px; }

:is(button, input, select, textarea, summary, a):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* ---------- Layout primitives ---------- */

.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "brand  brand"
    "side   main";
  height: 100vh;
}

.brandbar {
  grid-area: brand;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--bg);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.brandbar .title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.brandbar .tagline {
  font-size: 12px;
  color: var(--text-muted);
}
.brandbar .freshness {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 800px;
  white-space: nowrap;
}
.brandbar .freshness .fresh-sep { color: var(--text-faint); }
.brandbar .refresh-btn {
  margin-right: 4px;
  border: 1px solid var(--brand);
  border-radius: 800px;
  background: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.brandbar .refresh-btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.brandbar .refresh-btn:disabled { background: var(--border); border-color: var(--border); color: var(--text-faint); cursor: progress; }
.brandbar .freshness #fresh-next { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .brandbar .freshness { font-size: 11px; padding: 4px 8px; gap: 4px; }
  .brandbar .freshness .fresh-icon { display: none; }
}

.sidebar {
  grid-area: side;
  background: var(--bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px 0;
}
.sidebar .group {
  margin-bottom: 4px;
}
.sidebar .group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.sidebar .group-title:hover { color: var(--text); }
.sidebar .group-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar .group.collapsed .group-items { display: none; }
.sidebar .item {
  display: block;
  padding: 10px 24px;
  color: var(--text);
  border-right: 3px solid transparent;
  font-size: 14px;
}
.sidebar .item:hover {
  background: var(--brand-tint);
  color: var(--brand);
  text-decoration: none;
}
.sidebar .item.active {
  background: var(--brand-tint);
  color: var(--brand);
  border-right-color: var(--brand);
  font-weight: 700;
}

.main {
  grid-area: main;
  overflow: hidden;
  background: var(--panel);
}
.main iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}

/* ---------- Cards / sections / KPIs ---------- */

.section {
  padding: 24px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: none;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kpi .label { color: var(--text-muted); font-size: 12px; font-weight: 500; }
.kpi .value { color: var(--text); font-size: 24px; font-weight: 700; }
.kpi .delta { font-size: 12px; }
.kpi .delta.up { color: var(--ok-text); }
.kpi .delta.down { color: var(--danger); }
.kpi.brand .value { color: var(--brand); }

/* ---------- Executive KPI cards (بریف ۱ — colored, graded) ---------- */

.exec-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.exec-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  padding: 16px 16px 0;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.exec-kpi.good    { background: linear-gradient(135deg, #11b95f 0%, #0e9e52 100%); }
.exec-kpi.bad     { background: linear-gradient(135deg, #fb373e 0%, #c10d0d 100%); }
.exec-kpi.neutral { background: linear-gradient(135deg, #37a0fb 0%, #1780e8 100%); }
.exec-kpi .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.exec-kpi .title { font-size: 14px; opacity: 0.95; font-weight: 500; }
.exec-kpi .badge { display: flex; align-items: center; gap: 8px; }
.exec-kpi .grade {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.exec-kpi .icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
}
.exec-kpi.good .icon    { color: #0b7a3f; }
.exec-kpi.bad .icon     { color: #c10d0d; }
.exec-kpi.neutral .icon { color: #1780e8; }
.exec-kpi .amount {
  font-size: 24px;
  font-weight: 700;
  margin: 12px 0 4px;
}
.exec-kpi .amount .unit { font-size: 13px; font-weight: 500; opacity: 0.9; }
.exec-kpi .sub {
  font-size: 12px;
  opacity: 0.95;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 12px;
  min-height: 16px;
}
.exec-kpi .sub .grow { font-weight: 700; }
.exec-kpi .foot {
  margin: auto -16px 0;
  background: rgba(0, 0, 0, 0.17);
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}
.exec-kpi .foot b { font-weight: 700; }

/* "داستان امروز" auto-narrative strip */
.story-line {
  background: var(--brand-tint);
  border: 1px solid var(--border);
  border-right: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.8;
}

/* CEO-facing caption shown next to each section */
.ceo-note {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.7;
  margin: -8px 0 16px;
}

/* Three-state segmented toggle */
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.seg button {
  background: var(--card);
  color: var(--text-muted);
  border: 0;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  border-inline-start: 1px solid var(--border);
}
.seg button:first-child { border-inline-start: 0; }
.seg button:hover { color: var(--brand); }
.seg button.active { background: var(--brand); color: #fff; font-weight: 700; }

/* Collapsible transparency footer */
.transparency { margin-top: 24px; }
.transparency > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  user-select: none;
}
.transparency[open] > summary { border-radius: var(--radius) var(--radius) 0 0; color: var(--text); }
.transparency .body {
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 16px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-muted);
}
.transparency .body code {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--brand-deep);
  font-size: 11.5px;
}
.transparency .body h4 { color: var(--text); margin: 14px 0 6px; }

/* ---------- Toolbar / filters ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 24px;
}
.toolbar .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.toolbar label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.toolbar input,
.toolbar select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  min-width: 140px;
  min-height: 46px;
}
.toolbar input::placeholder { color: var(--text-faint); }
.toolbar input:focus,
.toolbar select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* ---------- Buttons ---------- */

.btn {
  background: var(--card);
  color: var(--brand);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  min-height: 46px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { border-color: var(--brand); background: var(--brand-tint); }
.btn:active { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.btn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.btn-primary:active {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.btn:disabled,
.btn-primary:disabled {
  background: var(--border);
  border-color: var(--border);
  color: var(--text-faint);
  cursor: default;
}

/* ---------- Floating refresh button (shared across all reports) ---------- */

.eg-refresh-btn {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  border-radius: 800px;
  padding: 12px 16px;
  min-height: 50px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.eg-refresh-btn:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: var(--shadow-lg);
}
.eg-refresh-btn:active { transform: translateY(1px); background: var(--brand-deep); }
.eg-refresh-btn:disabled { opacity: 0.85; cursor: default; }
.eg-refresh-btn .ic {
  font-size: 17px;
  line-height: 1;
  display: inline-block;
}
.eg-refresh-btn.busy .ic {
  animation: spin 0.8s linear infinite;
}

@media (max-width: 768px) {
  .eg-refresh-btn .lbl { display: none; }
  .eg-refresh-btn { padding: 12px; }
}

/* ---------- Tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th, td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
th {
  color: var(--text-muted);
  font-weight: 500;
  background: var(--panel);
}
tr:hover td { background: rgba(51, 51, 51, 0.03); }

/* Tabulator theme overrides */
.tabulator {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
}
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.tabulator .tabulator-row {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.tabulator .tabulator-row.tabulator-row-even {
  background: rgba(51, 51, 51, 0.02) !important;
}
.tabulator .tabulator-row:hover {
  background: rgba(51, 51, 51, 0.05) !important;
}
.tabulator .tabulator-footer {
  background: var(--panel) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

/* ---------- States ---------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 48px;
  color: var(--text-muted);
}
.empty-state .icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.empty-state .title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.empty-state .hint {
  max-width: 480px;
  font-size: 14px;
  line-height: 1.7;
}
.empty-state code {
  background: var(--panel);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--brand-deep);
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--text-muted);
}
.loading::after {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-inline-start: 12px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error {
  background: var(--brand-tint);
  border: 1px solid var(--brand);
  color: var(--danger);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin: 12px 0;
}

.chart-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 24px;
}
.chart-container .chart {
  width: 100%;
  height: 360px;
}
.chart-container .chart-title {
  margin-bottom: 12px;
  color: var(--text);
  font-weight: 700;
}

/* ---------- Hub (tabbed multi-report container) ---------- */

.hub {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.hub-head {
  padding: 16px 24px 0;
  flex: 0 0 auto;
}
.hub-head h1 { margin-bottom: 4px; }
.hub-head p {
  color: var(--text-muted);
  margin: 0 0 12px;
  font-size: 13px;
}
.hub-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 24px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}
.hub-tab {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 10px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  margin-bottom: -1px;
}
.hub-tab:hover { color: var(--brand); }
.hub-tab.active {
  background: var(--card);
  color: var(--brand);
  border-color: var(--border);
  border-bottom-color: var(--card);
  font-weight: 700;
}
.hub-body {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
}
.hub-body iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}

/* ---------- Badges ---------- */

.badge-primary {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.badge-success {
  display: inline-block;
  background: var(--ok);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 64px auto 1fr;
    grid-template-areas:
      "brand"
      "side"
      "main";
  }
  .sidebar {
    border-left: none;
    border-bottom: 1px solid var(--border);
    max-height: 220px;
  }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 12px; }
  h1 { font-size: 20px; line-height: 32px; }
  h2 { font-size: 16px; line-height: 24px; }
}