/* ============================================================================
   Dhilal Al Khaimah — Universal CSS layer
   One shared, theme-driven surface loaded on EVERY page (see base.html).

   Goal: every page reads the same tokens, so the active Theme (Theme Manager)
   controls the whole product instead of per-page stylesheets. This file is
   ADDITIVE and LOW-SPECIFICITY: it normalises shared components and exposes
   tokens; page-specific bespoke layouts keep their own classes but must draw
   their colours from the tokens below (var(--primary), var(--text), ...).

   ---------------------------------------------------------------------------
   TOKEN CONTRACT (single source of truth = the active themes.Theme)
   ---------------------------------------------------------------------------
   These tokens are emitted per-request by
   smart_property_management/context_processors.py::theme_context
   (DEFAULT_CSS_VARS + themes.Theme.css_variables()) into base.html `:root`.
   The values below are FALLBACKS only, for non-themed contexts (emails, admin,
   static previews). Every UI rule MUST consume a token via var(--token) —
   never a literal colour.

     Brand / semantic
       --primary            primary brand colour (buttons, links, accents)
       --primary-dark       darker brand shade (gradients, hover, headings)
       --success            positive/confirmed state
       --warning            caution state
       --danger             destructive/error state
     Surfaces & text
       --bg                 page background
       --white              base surface (== card background in most themes)
       --card-background    card / panel surface
       --card-bg            alias of --card-background
       --text               default body text on surfaces
       --text-light         secondary text
       --text-muted         tertiary/muted text
       --text-strong        emphasised text (darker than --text)
       --text-on-surface    accessible secondary text on light surfaces (AA)
       --border             hairline borders/dividers
       --on-accent          text/icon colour on top of --primary/state fills
     Sidebar chrome
       --sidebar-bg / --sidebar-text
       --sidebar-active-bg / --sidebar-active-text
     Actions / controls
       --btn-primary-bg / --btn-primary-text / --btn-hover-bg
       --btn-bg / --btn-text
       --link               clickable text
       --link-on-surface    accessible link on light surfaces (AA)
       --focus-ring         keyboard focus outline
       --input-bg / --input-border
       --topbar-bg / --topbar-text
     Derived & aliases (computed from the active theme palette)
       --accent / --accent-2
       --accent-soft / --primary-soft
       --shadow             alias of --card-shadow
       --muted              alias of --text-muted
       --brand-gradient     primary-dark -> primary
     Typography, radius, spacing
       --font-family
       --radius / --border-radius / --spacing-unit / --sidebar-width
       --card-shadow
       --type-h1 --type-h2 --type-h3 --type-h4 --type-h5 --type-h6
       --type-body / --type-small
   ---------------------------------------------------------------------------- */

/* ----------------- 1. Token guarantees (fallbacks for non-themed contexts) */
:root {
  /* Brand / semantic */
  --primary: #1a73e8;
  --primary-dark: #1a237e;
  --success: #2e7d32;
  --warning: #e65100;
  --danger: #c62828;
  --bg: #f5f5f5;
  --white: #ffffff;
  --card-background: #ffffff;
  --card-bg: var(--card-background);
  --text: #333333;
  --text-light: #666666;
  --text-muted: #999999;
  --text-strong: #1f2937;
  --text-on-surface: #334155;
  --muted: var(--text-muted);
  --border: #e0e0e0;
  --on-accent: #ffffff;
  /* Sidebar chrome */
  --sidebar-bg: #1a237e;
  --sidebar-text: #b0bec5;
  --sidebar-active-bg: #283593;
  --sidebar-active-text: #ffffff;
  --sidebar-width: 240px;
  /* Actions / controls */
  --link: #1a5cb8;
  --link-on-surface: #155fa0;
  --focus-ring: #1a73e8;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --topbar-bg: #ffffff;
  --topbar-text: #1f2937;
  --btn-primary-bg: #1a73e8;
  --btn-primary-text: #ffffff;
  --btn-hover-bg: #1565c0;
  --btn-bg: var(--btn-primary-bg);
  --btn-text: var(--btn-primary-text);
  /* Layout & chrome */
  --font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --radius: 8px;
  --border-radius: 8px;
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow: var(--card-shadow);
  --skeleton-shine: rgba(255, 255, 255, 0.12);
  --spacing-unit: 8px;
  /* Typography scale */
  --type-h1: 2rem;    --type-h2: 1.5rem;  --type-h3: 1.25rem;
  --type-h4: 1.1rem;  --type-h5: 1rem;    --type-h6: 0.9rem;
  --type-body: 0.95rem; --type-small: 0.8rem;
  /* Universal role aliases (dashboard chrome follows the theme) */
  --accent: var(--primary);
  --accent-2: var(--primary-dark);
  --accent-soft: rgba(26, 115, 232, 0.10);
  --primary-soft: rgba(26, 115, 232, 0.08);
  --brand-gradient: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

/* ----------------- 2. Keyboard focus (accessibility, theme-driven) -------- */
:focus-visible {
  outline: 2px solid var(--focus-ring, #1a73e8);
  outline-offset: 2px;
}

/* ----------------- 3. Links ------------------------------------------------- */
a { color: var(--link, var(--primary, #1a5cb8)); }
a.btn, a.ds-btn, a.icon-btn { text-decoration: none; }

/* ----------------- 4. Form controls (universal theming) -------------------- */
input[type="text"], input[type="search"], input[type="email"], input[type="number"],
input[type="url"], input[type="tel"], input[type="password"], input[type="date"],
select, textarea {
  background-color: var(--input-bg, var(--card-background, #fff));
  border-color: var(--input-border, var(--border, #cbd5e1));
  color: var(--text, #333333);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary, #1a73e8);
  box-shadow: 0 0 0 3px var(--primary-soft, rgba(26, 115, 232, 0.10));
  outline: none;
}

/* ----------------- 5. Buttons (consistent hover/active across pages) ------- */
.btn, .ds-btn { transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; }
.btn:active, .ds-btn:active { transform: translateY(1px); }
.btn-primary, a.btn-primary, .btn-success, .btn-danger, .btn-warning {
  border-color: transparent;
}
.btn-outline:hover, a.ds-btn-outline:hover {
  background: var(--btn-primary-bg, var(--primary, #1a73e8));
  border-color: var(--btn-primary-bg, var(--primary, #1a73e8));
  color: var(--btn-primary-text, #fff) !important;
}

/* ----------------- 6. Page chrome (headers, cards, empty states) ----------- */
.page-title { font-size: var(--type-h2, 1.5rem); font-weight: 700; color: var(--text, #1b2430); margin: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 16px; }
.page-head .page-sub { color: var(--text-muted, #6b7a8f); font-size: var(--type-small, 0.85rem); margin-top: 2px; }

.content-card, .panel-card, .card {
  background: var(--card-background, #fff);
  border: 1px solid var(--border, #e3e9ef);
  border-radius: var(--radius, 12px);
  box-shadow: var(--card-shadow, 0 1px 2px rgba(16, 24, 40, 0.05));
}
.section-title { font-size: var(--type-h3, 1.15rem); font-weight: 700; color: var(--text, #1b2430); }

.ds-empty { padding: 24px; text-align: center; color: var(--text-muted, #6b7a8f); font-size: var(--type-small, 0.9rem); }
.ds-empty .ds-empty-icon { font-size: 2rem; display: block; margin-bottom: 6px; opacity: 0.7; }

/* ----------------- 7. Status chips that stay semantic in every theme ------- */
.ds-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap; }
.ds-chip.ok   { background: color-mix(in srgb, var(--success, #2e7d32) 14%, transparent); color: var(--success, #15803d); }
.ds-chip.warn { background: color-mix(in srgb, var(--warning, #e65100) 14%, transparent); color: var(--warning, #b45309); }
.ds-chip.info { background: color-mix(in srgb, var(--primary, #1a73e8) 12%, transparent); color: var(--primary-dark, #1a237e); }
.ds-chip.danger{background: color-mix(in srgb, var(--danger, #c62828) 13%, transparent); color: var(--danger, #b91c1c); }

/* ----------------- 8. Dark mode: canonical dark token values -------------- */
/* This is the ONE place dark-mode token values are defined. main.css/app.css
   structural rules below simply consume them via var(); no page may redefine
   a dark colour locally. */
html[data-theme="dark"] {
  /* Surfaces & text */
  --bg: #0f1420;
  --white: #161c2b;
  --card-background: #161c2b;
  --card-bg: var(--card-background);
  --text: #e7ecf5;
  --text-light: #a7b3c6;
  --text-muted: #7a8699;
  --text-strong: #f1f5f9;
  --text-on-surface: #cbd5e1;
  --border: #2a3346;
  --on-accent: #ffffff;
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow: var(--card-shadow);
  /* Sidebar chrome */
  --sidebar-bg: #0b0f18;
  --sidebar-text: #9aa7bd;
  --sidebar-active-bg: #1a2337;
  --sidebar-active-text: #ffffff;
  /* Controls */
  --link: #7ab8ff;
  --link-on-surface: #7ab8ff;
  --focus-ring: #7ab8ff;
  --input-bg: #161c2b;
  --input-border: #2a3346;
  --topbar-bg: #161c2b;
  --topbar-text: #e7ecf5;
  --primary-soft: rgba(122, 184, 255, 0.10);
  --accent-soft: rgba(122, 184, 255, 0.12);
}
html[data-theme="dark"] a { color: var(--link); }

/* ----------------- 9. Small utilities (spacing-unit driven) ---------------- */
.u-mt { margin-top: var(--spacing-unit, 8px); }
.u-mt2 { margin-top: calc(var(--spacing-unit, 8px) * 2); }
.u-mb { margin-bottom: var(--spacing-unit, 8px); }
.u-mb2 { margin-bottom: calc(var(--spacing-unit, 8px) * 2); }
.u-fade { opacity: 0.75; }
.u-flex-center { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ----------------- 10. Buttons — universal normalisation ------------------ */
/* One consistent metric system for every button flavour across the product.
   Uses !important so it reliably overrides per-page inline <style> blocks that
   each set their own padding/font-size (the cause of the inconsistent look).
   Colour/variant are left to each page's tokens; only shape is unified here. */

.btn, .ds-btn, .btn-primary, .btn-outline, .btn-secondary, .btn-success, .btn-danger,
.btn-warning, .btn-info, .btn-ghost, .btn-link,
.ds-btn-primary, .ds-btn-outline, .ds-btn-ghost, .ds-btn-success, .ds-btn-danger,
.btn-sm, .ds-btn-sm, .btn-lg, .ds-btn-lg, .icon-btn, .btn-icon {
  font-family: var(--font-family, inherit) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease !important;
}
.btn:active, .ds-btn:active { transform: translateY(1px); }

/* Default + size variants (height + horizontal padding; gap handled above) */
.btn, .ds-btn, .btn-primary, .btn-outline, .ds-btn-primary, .ds-btn-outline,
.btn-secondary, .ds-btn-ghost {
  min-height: 40px; height: 40px; padding: 0 16px !important;
  font-size: 14px !important; border-radius: var(--radius, 8px) !important;
}
.btn-sm, .ds-btn-sm {
  min-height: 32px; height: 32px; padding: 0 12px !important;
  font-size: 13px !important; border-radius: 8px !important;
}
.btn-lg, .ds-btn-lg {
  min-height: 48px; height: 48px; padding: 0 22px !important;
  font-size: 15px !important; border-radius: 12px !important;
}

/* Icon-only buttons stay square (not stretched by the height system) */
.icon-btn, .btn-icon {
  width: 40px; min-width: 40px; height: 40px; padding: 0 !important;
  font-size: 16px !important; border-radius: var(--radius, 8px) !important;
}
.icon-btn.btn-sm, .ds-btn-sm.icon-btn, .btn-icon.btn-sm {
  width: 32px; min-width: 32px; height: 32px; font-size: 14px !important;
}

/* Consistent focus ring for every button */
.btn:focus-visible, .ds-btn:focus-visible, .btn-icon:focus-visible, .icon-btn:focus-visible {
  outline: 2px solid var(--focus-ring, #1a73e8) !important;
  outline-offset: 2px !important;
}

/* Emoji / icon glyphs inside buttons all get the same size and stay centred. */
.btn > i, .btn > svg, .ds-btn > i, .ds-btn > svg,
.btn > .fa, .ds-btn > .fa { font-size: inherit; line-height: 1; }

/* Page-header action toolbars (My Projects, My Properties, lists, etc.) */
.topbar .user-menu, .app-topbar .user-menu, .actions-bar, .btn-toolbar,
.page-head .actions {
  display: flex !important; align-items: center !important; flex-wrap: wrap;
  gap: 8px !important;
}
/* Neutralise stray whitespace text nodes between inline action elements */
.topbar .user-menu, .app-topbar .user-menu { line-height: 0; }
.topbar .user-menu > * { line-height: normal; }