/* Datashiil brand styling for the Dash analytics workspace */
:root { --blue: #1d64b4; --blue-900: #0c2a4c; --brown: #8b4513; --ink: #13223a; --muted: #55647a; --line: #dbe3ed; --surface: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: "Open Sans", system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.a-page[lang="ar"] { font-family: "Noto Sans Arabic", "Open Sans", sans-serif; }
.a-page { max-width: 1280px; margin: 0 auto; padding: 24px 16px 48px; animation: a-in 500ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes a-in { from { opacity: 0; transform: translateY(12px); } }

.a-header { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; padding: 28px; border-radius: 20px; color: #fff;
  background: linear-gradient(120deg, var(--blue-900), var(--blue)); box-shadow: inset 0 -4px 0 var(--brown); }
.a-header h1 { margin: 4px 0 6px; font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); }
.a-sub { margin: 0; max-width: 46rem; color: rgba(255,255,255,.85); line-height: 1.6; }
.a-eyebrow { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #eedccd; }
.a-page[dir="rtl"] .a-eyebrow { letter-spacing: 0; }

.a-filters { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 20px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
@media (min-width: 960px) { .a-filters { grid-template-columns: 1.4fr 1fr auto; align-items: end; } }
.a-label { display: block; margin-bottom: 8px; font-size: .8rem; font-weight: 700; color: var(--blue-900); }
.a-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.a-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; font-weight: 600;
  color: #123e6f; cursor: pointer; transition: all .18s ease; }
.a-pill:hover { border-color: var(--blue); }
.a-pill:has(input:checked) { background: var(--blue); border-color: var(--blue); color: #fff; }
.a-pill-input { accent-color: #fff; margin: 0; }
.a-slider { padding: 0 8px; }
.a-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.a-btn, .a-btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: 10px; font: 600 .875rem/1 inherit; cursor: pointer;
  text-decoration: none; transition: background .18s ease, border-color .18s ease; }
.a-btn { background: var(--brown); color: #fff; border: 1px solid var(--brown); }
.a-btn:hover { background: #6f3710; }
.a-btn-ghost { background: transparent; color: inherit; border: 1px solid currentColor; opacity: .9; }
.a-filters .a-btn-ghost { color: #123e6f; border-color: var(--line); }
.a-btn-ghost:hover { opacity: 1; }

.a-kpis { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
@media (min-width: 900px) { .a-kpis { grid-template-columns: repeat(4, 1fr); } }
.a-kpi { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-inline-start: 4px solid var(--brown); border-radius: 16px; animation: a-in 500ms ease both; }
.a-kpi-label { margin: 0; font-size: .8rem; color: var(--muted); }
.a-kpi-value { margin: 4px 0 0; font-size: 1.9rem; font-weight: 700; color: var(--blue-900); }

.a-grid-2 { display: grid; gap: 20px; margin-top: 20px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .a-grid-2 { grid-template-columns: 1fr 1fr; } .a-grid-wide { grid-template-columns: 1.5fr 1fr; } }
.a-card { min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; transition: box-shadow .2s ease; }
.a-card:hover { box-shadow: 0 10px 30px -18px rgba(12,42,76,.35); }
.a-card-title { margin: 0 0 12px; font-size: 1rem; color: var(--blue-900); }
.a-section-title { margin: 40px 0 0; font-size: 1.4rem; color: var(--blue-900); }
.a-section-title + .a-card { margin-top: 20px; }

.a-table-wrap { max-height: 380px; overflow: auto; }
.a-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.a-table th { position: sticky; top: 0; background: #fff; text-align: start; padding: 8px; border-bottom: 2px solid var(--line); color: var(--blue-900); }
.a-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.a-table tr:hover td { background: var(--surface); }
.a-table a { color: var(--blue); font-weight: 600; text-decoration: none; }
.a-table a:hover { text-decoration: underline; }
.a-table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.a-note { margin-top: 16px; font-size: .8rem; color: var(--muted); }
.Select-control, .dash-dropdown { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }