/* ===== Samh Dashboard — global chrome polish =====
 * Home KPI/activity styling lives in samh-home-kpis.js (single source).
 * This file handles the shared shell: content ground, sidebar, inputs,
 * buttons, scrollbar, launcher.
 */
:root {
  --navy:#1a3556; --navy-deep:#122a4f; --gold:#c99a4b; --gold-soft:#e8c988;
  --ink:#16243b; --muted:#6a7a92; --line:rgba(22,36,59,.08); --bg:#f5f7fb;
}

/* ---- Content area: soft neutral ground so white cards gain depth ---- */
main.main, .default_layout main, .homePage { background: var(--bg) !important; }

/* ---- Kill the demo home (صباح الخير + fake stats) INSTANTLY on the home route.
   The <html class="samh-home"> toggle is set by samh-home-kpis.js (and an inline
   head script), so any .insideHomeView Nuxt re-creates is hidden before it paints —
   no flash/revert to the old demo. .insideHomeView is the shared page wrapper, so
   this is scoped to home only via the html class. ---- */
html.samh-home .insideHomeView { display: none !important; }

/* ---- Sidebar section titles — clean (NO letter-spacing: keeps Arabic script connected) ---- */
.sideNav .sub_header {
  color:rgba(255,255,255,.5) !important;
  font-weight:700 !important;
  font-size:11.5px !important;
  letter-spacing:normal !important;
  opacity:1 !important;
  margin-top:14px !important;
  padding-top:14px !important;
  padding-bottom:5px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;   /* clear section separation */
}
/* cleaner, more scannable nav text (was 16px/400) */
.sideNav .v-list-item-title { font-size:14.5px !important; font-weight:600 !important; letter-spacing:normal !important; }

/* ---- Sidebar nav items + active row ---- */
.sideNav .v-list-item { border-radius:12px !important; margin:2px 8px !important; transition:background .16s ease, box-shadow .16s ease !important; }
.sideNav .v-list-item:hover { background:rgba(255,255,255,.08) !important; }
.sideNav a.router-link-active:not(.logo) { color:var(--gold-soft) !important; font-weight:700 !important; }
.sideNav a.router-link-active:not(.logo) .v-icon { color:var(--gold-soft) !important; }
.sideNav .v-list-item:has(a.router-link-active:not(.logo)) {
  background:rgba(201,154,75,.14) !important;
  box-shadow:inset -3px 0 0 var(--gold) !important;
}

/* ---- Login page (.auth_layout) — clean form area + premium primary button ---- */
.auth_layout .main { background:#fff !important; }
.auth_layout .main h1, .auth_layout .main h2, .auth_layout .main h3 { color:var(--navy-deep) !important; font-weight:800 !important; }
.auth_layout button, .auth_layout .v-btn:not(.v-btn--icon) {
  border-radius:12px !important;
  transition:transform .14s ease, filter .2s ease, box-shadow .2s ease !important;
}
.auth_layout button:hover, .auth_layout .v-btn:not(.v-btn--icon):hover {
  transform:translateY(-1px) !important; filter:brightness(1.05) !important;
  box-shadow:0 8px 18px rgba(234,161,33,.32) !important;
}
.auth_layout .v-field { border-radius:12px !important; }
.auth_layout .v-field.v-field--focused { box-shadow:0 0 0 3px rgba(201,154,75,.2) !important; }

/* ---- Top header bar (nav.theNav) — UNIFIED NAVY chrome matching the sidebar (#183867) ---- */
nav.theNav {
  background:#183867 !important;
  box-shadow:0 6px 22px rgba(9,20,40,.28) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
/* even distribution: uniform rhythm; search fills the middle so there are no voids */
nav.theNav .wrapper { gap:12px !important; }
nav.theNav .wrapper > * { margin-left:0 !important; margin-right:0 !important; }
nav.theNav .wrapper .search { flex:1 1 auto !important; width:auto !important; max-width:none !important; min-width:260px !important; }
nav.theNav .wrapper .search .v-input,
nav.theNav .wrapper .search .v-text-field,
nav.theNav .wrapper .search .v-field { width:100% !important; max-width:100% !important; }
/* circular icon buttons → translucent glass on navy */
nav.theNav .nav_circle {
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  transition:transform .16s ease, background .18s ease !important;
}
nav.theNav .nav_circle:hover { background:rgba(255,255,255,.17) !important; transform:translateY(-2px) !important; }
/* every header glyph → light (svg uses currentColor; mdi fonts use color) */
nav.theNav .nav_circle .v-icon,
nav.theNav .nav_circle svg,
nav.theNav .language,
nav.theNav .language .v-icon,
nav.theNav .language svg,
nav.theNav .tw-relative .v-icon,
nav.theNav .tw-relative svg,
nav.theNav .wrapper > svg { color:#fff !important; }
nav.theNav .language { color:rgba(255,255,255,.92) !important; font-weight:600 !important; }
/* avatar — gold ring on navy */
nav.theNav img.rounded-circle.image {
  border:2px solid rgba(255,255,255,.22) !important;
  box-shadow:0 0 0 2px rgba(224,184,106,.6), 0 4px 12px rgba(0,0,0,.3) !important;
}
/* search → translucent pill with light text */
nav.theNav .v-field {
  border-radius:30px !important;
  background:rgba(255,255,255,.1) !important;
  transition:background .18s ease, box-shadow .2s ease !important;
}
nav.theNav .v-field, nav.theNav .v-field input, nav.theNav .v-field .v-field__input { color:#fff !important; }
nav.theNav .v-field input::placeholder, nav.theNav .v-field .v-field__input::placeholder { color:rgba(255,255,255,.55) !important; opacity:1 !important; }
nav.theNav .v-field .v-icon { color:rgba(255,255,255,.72) !important; }
nav.theNav .v-field.v-field--focused { background:rgba(255,255,255,.16) !important; box-shadow:0 0 0 3px rgba(224,184,106,.3) !important; }

/* ---- Inputs ---- */
.v-application .v-field { border-radius:12px !important; transition:box-shadow .2s ease !important; }
.v-application .v-field.v-field--focused { box-shadow:0 0 0 3px rgba(201,154,75,.2) !important; }

/* ---- Buttons ---- */
.v-application .v-btn:not(.v-btn--icon) {
  border-radius:12px !important; text-transform:none !important;
  letter-spacing:0 !important; font-weight:600 !important;
  transition:transform .14s ease, filter .2s ease !important;
}
.v-application .v-btn:not(.v-btn--icon):hover { transform:translateY(-1px); filter:brightness(1.04); }

/* ---- Inner pages: Vuetify data tables → same card identity as the home ----
 * NOTE: this dashboard has NO .v-main (content area is custom `main.main`);
 * scope to .v-application (the Vuetify root, which DOES exist). */
.v-application .v-table {
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  box-shadow:0 2px 4px rgba(15,36,71,.04), 0 12px 28px rgba(15,36,71,.06) !important;
  overflow:hidden !important;
}
/* header row: branded navy on a soft tint, tighter type */
.v-application .v-table thead th,
.v-application .v-table thead .v-data-table__td,
.v-application .v-table > .v-table__wrapper > table > thead > tr > th {
  background:#f3f6fc !important;
  color:var(--navy-deep) !important;
  font-weight:700 !important;
  font-size:13.5px !important;
  border-bottom:1px solid var(--line) !important;
}
.v-application .v-table thead .title,
.v-application .v-table thead .v-data-table-header__content span,
.v-application .v-table thead .sort_header { color:var(--navy-deep) !important; font-size:13.5px !important; font-weight:700 !important; }
/* body rows: calmer text, hairline separators, soft hover */
.v-application .v-table tbody td,
.v-application .v-table tbody .v-data-table__td,
.v-application .v-table > .v-table__wrapper > table > tbody > tr > td {
  font-size:13.5px !important;
  color:#334155 !important;
  border-bottom:1px solid #f1f5f9 !important;
}
/* zebra striping + roomier rows + sortable affordance = more readable tables */
.v-application .v-table tbody tr:nth-child(even) > td { background:rgba(26,53,86,.022) !important; }
.v-application .v-table tbody td, .v-application .v-table tbody .v-data-table__td { padding-top:13px !important; padding-bottom:13px !important; }
.v-application .v-table thead .sort_header { cursor:pointer !important; }
.v-application .v-table tbody tr { transition:background .14s ease !important; }
.v-application .v-table tbody tr:hover > td { background:rgba(26,53,86,.05) !important; }
/* pagination: active page in brand navy */
.v-application .v-pagination .v-pagination__item--is-active .v-btn,
.v-application .v-pagination .v-pagination__item--is-active .v-btn__content { color:#fff !important; }
.v-application .v-pagination .v-pagination__item--is-active .v-btn { background:var(--navy-deep) !important; }
.v-application .v-pagination .v-btn { border-radius:10px !important; }
/* status chips rounded */
.v-application .v-chip { border-radius:9px !important; font-weight:600 !important; }

/* ---- Inner-page Tailwind stat cards (e.g. «الأعضاء النشطون 379») ----
 * structure: div.z-[-1].min-w-[250px] (wrapper) > div.z-[10] (the WHITE card).
 * Style only the inner white card so the layering/content stay intact. */
[class*="min-w-[250px]"] > [class*="z-[10]"] {
  border-radius:16px !important;
  border:1px solid var(--line) !important;
  box-shadow:0 2px 4px rgba(15,36,71,.04), 0 10px 26px rgba(15,36,71,.06) !important;
  transition:box-shadow .22s ease !important;
}
[class*="min-w-[250px]"]:hover > [class*="z-[10]"] {
  box-shadow:0 6px 16px rgba(15,36,71,.09), 0 18px 40px rgba(15,36,71,.13) !important;
}

/* ---- Auction launcher: bottom-left, out of the menu ---- */
#samh-auc-launcher { right:auto !important; left:18px !important; bottom:18px !important; }

/* ---- Scrollbar ---- */
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:rgba(22,36,59,.22); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:rgba(22,36,59,.38); background-clip:padding-box; }
*::-webkit-scrollbar-track { background:transparent; }

/* ---- Misc ---- */
img[src*="ar.png"] { opacity:0 !important; }
::selection { background:rgba(201,154,75,.25); }
body, .v-application { -webkit-font-smoothing:antialiased; }

/* ---- Print: clean report (hide chrome, force light, tidy tables) ---- */
@media print {
  nav.sideNav, nav.theNav, #samh-auc-launcher, #samh-settings, .sph-actions,
  .v-pagination, .swal2-container, #samh-home-kpis .shk-chart { display:none !important; }
  html, body, .v-application, main.main, .default_layout main, .homePage, .insideHomeView {
    background:#fff !important; color:#000 !important;
  }
  main.main, .default_layout, .insideHomeView { width:100% !important; max-width:100% !important; margin:0 !important; }
  .v-application .v-table, [class*="min-w-[250px]"] > [class*="z-[10]"],
  #samh-home-kpis a.shk-tile, #samh-home-activity .sha-list {
    box-shadow:none !important; border:1px solid #bbb !important; background:#fff !important; break-inside:avoid;
  }
  .v-application .v-table thead th, .v-application .v-table thead .v-data-table__td { background:#f0f0f0 !important; color:#000 !important; }
  .v-application .v-table tbody td, .v-application .v-table tbody .v-data-table__td { color:#000 !important; background:#fff !important; }
  #samh-pagehdr .sph-t, #samh-pagehdr .sph-cur, #samh-pagehdr .sph-bc a { color:#000 !important; }
  @page { margin: 1.4cm; }
}

/* ---- Smooth theme cross-fade — enabled ONLY during the toggle (Emil detail) ---- */
html.samh-theming * { transition: background-color .45s cubic-bezier(.32,.72,0,1), color .42s cubic-bezier(.32,.72,0,1), border-color .42s cubic-bezier(.32,.72,0,1), fill .42s cubic-bezier(.32,.72,0,1) !important; }
html.samh-theming .samh-toast { transition: opacity .35s cubic-bezier(.32,.72,0,1), transform .42s cubic-bezier(.32,.72,0,1) !important; }
@media (prefers-reduced-motion: reduce) { html.samh-theming * { transition: none !important; } }

/* ===== Header + Sidebar — Emil refinement pass (signature ease .32,.72,0,1) ===== */
/* sidebar items: smoother motion + a subtle hover pull-in */
.sideNav .v-list-item { transition: background .22s cubic-bezier(.32,.72,0,1), box-shadow .24s cubic-bezier(.32,.72,0,1) !important; }
.sideNav .v-list-item:hover { background: rgba(255,255,255,.06) !important; }
.sideNav .v-list-item-title { transition: transform .2s cubic-bezier(.32,.72,0,1), color .2s ease !important; }
.sideNav .sidebar_item:hover .v-list-item-title { transform: translateX(-4px) !important; }
/* balanced icon size + gold + smooth on hover/active */
.sideNav .sidebar_item svg { width: 20px !important; height: 20px !important; transition: transform .2s cubic-bezier(.32,.72,0,1), color .2s ease !important; }
.sideNav .sidebar_item:hover svg { transform: translateX(-2px) !important; }
/* clearer active state: soft gold gradient pill + gold bar + gold text/icon */
.sideNav .v-list-item:has(a.router-link-active:not(.logo)) { background: linear-gradient(90deg, rgba(201,154,75,.18), rgba(201,154,75,.05)) !important; box-shadow: inset -3px 0 0 var(--gold) !important; }
.sideNav a.router-link-active:not(.logo) { color: var(--gold-soft) !important; }
.sideNav a.router-link-active:not(.logo) svg, .sideNav a.router-link-active:not(.logo) .v-icon { color: var(--gold-soft) !important; }
/* header glass buttons: tactile press + smooth */
nav.theNav .nav_circle { transition: transform .18s cubic-bezier(.32,.72,0,1), background .2s cubic-bezier(.32,.72,0,1) !important; }
nav.theNav .nav_circle:active { transform: scale(.92) !important; }

/* =======================================================================
   DARK MODE  (html.samh-dark, toggled by the header moon button via JS).
   Header + sidebar are already navy, so they stay. We darken the content
   ground, re-tint Vuetify's dark theme to navy, and recolor our custom
   home + stat-card + table surfaces. Navy-dark palette below.
   ======================================================================= */
/* redefine our own --bg token so every `background:var(--bg)` rule goes dark too */
html.samh-dark { --bg:#0d1726 !important; }
html.samh-dark .v-application {
  --v-theme-background: 13,23,38 !important;
  --v-theme-surface: 22,38,62 !important;
  --v-theme-surface-variant: 30,48,74 !important;
  --v-theme-on-background: 232,238,246 !important;
  --v-theme-on-surface: 232,238,246 !important;
}
/* content ground */
html.samh-dark main.main, html.samh-dark .default_layout main, html.samh-dark .homePage { background:#0d1726 !important; }

/* home KPI tiles */
html.samh-dark #samh-home-kpis a.shk-tile { background:#16263e !important; background:linear-gradient(168deg,color-mix(in srgb,var(--accent) 18%,#16263e),#16263e 58%) !important; border-color:rgba(255,255,255,.08) !important; }
html.samh-dark #samh-home-kpis .shk-tile b { color:#eaf1f9 !important; }
html.samh-dark #samh-home-kpis .shk-label { color:#93a3bb !important; }
html.samh-dark #samh-home-kpis .shk-more { border-top-color:rgba(255,255,255,.09) !important; color:#7f8fa6 !important; }
html.samh-dark #samh-home-kpis .shk-head h2,
html.samh-dark #samh-home-activity .sha-head h2 { color:#eaf1f9 !important; }

/* home activity */
html.samh-dark #samh-home-activity .sha-list { background:#16263e !important; border-color:rgba(255,255,255,.08) !important; }
html.samh-dark #samh-home-activity .sha-item { border-bottom-color:rgba(255,255,255,.06) !important; }
html.samh-dark #samh-home-activity .sha-item:hover { background:rgba(255,255,255,.04) !important; }
html.samh-dark #samh-home-activity .sha-txt b { color:#eaf1f9 !important; }
html.samh-dark #samh-home-activity .sha-txt span { color:#93a3bb !important; }

/* home quick links */
html.samh-dark #samh-home-kpis .shk-links { background:#16263e !important; border-color:rgba(255,255,255,.08) !important; }
html.samh-dark #samh-home-kpis .shk-links a { color:#eaf1f9 !important; }
html.samh-dark #samh-home-kpis .shk-links a:hover { background:rgba(255,255,255,.05) !important; }
html.samh-dark #samh-home-kpis .shk-lic { background:rgba(255,255,255,.08) !important; }

/* Vuetify data tables */
html.samh-dark .v-application .v-table { background:#16263e !important; border-color:rgba(255,255,255,.08) !important; }
html.samh-dark .v-application .v-table thead th,
html.samh-dark .v-application .v-table thead .v-data-table__td { background:#1b2f4a !important; color:#eaf1f9 !important; border-bottom-color:rgba(255,255,255,.08) !important; }
html.samh-dark .v-application .v-table thead .title,
html.samh-dark .v-application .v-table thead .v-data-table-header__content span,
html.samh-dark .v-application .v-table thead .sort_header { color:#eaf1f9 !important; }
html.samh-dark .v-application .v-table tbody td,
html.samh-dark .v-application .v-table tbody .v-data-table__td { color:#c7d2e0 !important; border-bottom-color:rgba(255,255,255,.06) !important; }
html.samh-dark .v-application .v-table tbody tr:nth-child(even) > td { background:rgba(255,255,255,.025) !important; }
html.samh-dark .v-application .v-table tbody tr:hover > td { background:rgba(255,255,255,.06) !important; }

/* Tailwind stat cards (e.g. «الأعضاء النشطون 379») */
html.samh-dark [class*="min-w-[250px]"] > [class*="z-[10]"] { background:#16263e !important; border-color:rgba(255,255,255,.08) !important; }
html.samh-dark [class*="min-w-[250px]"] h3,
html.samh-dark [class*="min-w-[250px]"] p,
html.samh-dark [class*="min-w-[250px]"] span:not([class*="text-"]) { color:#eaf1f9 !important; }

/* ========================================================================
   V3 content polish — cards · dialogs · forms (safe additive layer, 2026-10-13)
   Covers the content surfaces the shell CSS didn't: GlobalCard (.card),
   Vuetify dialogs/modals, and form labels. Depth/radius only — no layout shifts.
   ======================================================================== */
.v-application .card,
.default_layout .card {
  border-radius: 16px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 1px 3px rgba(15, 36, 71, .05), 0 10px 26px rgba(15, 36, 71, .06) !important;
}

/* dialogs / modals / menus — consistent soft, deep elevation */
.v-overlay__content > .v-card,
.v-application .v-dialog .v-card {
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(9, 20, 40, .30) !important;
  overflow: hidden !important;
}
.v-overlay__content .v-list {
  border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(9, 20, 40, .22) !important;
}

/* page header / filter-action bars at the top of list pages */
.top_header {
  align-items: center !important;
  margin-bottom: 18px !important;
}

/* form labels + section headings a touch clearer */
.v-application form label,
.v-application .v-label:not(.v-field-label) {
  font-weight: 600 !important;
  color: var(--ink) !important;
}
.v-application h2:not([class*="text-"]),
.v-application h3:not([class*="text-"]) {
  color: var(--navy-deep) !important;
}

/* ---- dark-mode variants for the above ---- */
html.samh-dark .v-application .card,
html.samh-dark .default_layout .card {
  background: #16263e !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
html.samh-dark .v-overlay__content > .v-card,
html.samh-dark .v-application .v-dialog .v-card,
html.samh-dark .v-overlay__content .v-list {
  background: #16263e !important;
  color: #eaf1f9 !important;
}
html.samh-dark .v-application form label,
html.samh-dark .v-application .v-label:not(.v-field-label),
html.samh-dark .v-application h2:not([class*="text-"]),
html.samh-dark .v-application h3:not([class*="text-"]) {
  color: #eaf1f9 !important;
}