/* ============================================================================
   Dhilal Al Khaimah — Design System layer (additive, non-breaking)
   Phase 1 (UI/UX overhaul). Loaded AFTER main.css in base.html.

   Strategy (Hybrid): this file is purely additive. It (a) re-exposes theme
   tokens behind stable aliases, (b) adds documented `.ds-*` utility/component
   classes for new work, and (c) layers mobile-first media tweaks for existing
   dashboard canvases. It must NOT redefine existing bare classes (.btn,
   .table, ...) to avoid regressing the pre-existing custom CSS. Bootstrap 5
   grids may be introduced scoped per page in later phases after browser tests.
   ============================================================================ */

/* ----------------------- 1. Design tokens (aliases) ---------------------- */
:root {
  --ds-primary: var(--primary, #1a4b8b);
  --ds-primary-soft: var(--primary-soft, #e8eef7);
  --ds-bg: var(--bg, #f4f6fb);
  --ds-surface: var(--white, #ffffff);
  --ds-card-bg: var(--card-background, #ffffff);
  --ds-border: var(--border, #e3e9ef);
  --ds-text: var(--text, #1b2430);
  --ds-text-muted: var(--text-muted, #6b7a8f);
  --ds-success: var(--success, #15803d);
  --ds-warning: var(--warning, #b45309);
  --ds-danger:  var(--danger, #b91c1c);
  --ds-info:    var(--primary, #0369a1);

  --ds-font: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --ds-fs-xs: 0.75rem; --ds-fs-sm: 0.875rem; --ds-fs-md: 1rem;
  --ds-fs-lg: 1.25rem; --ds-fs-xl: 1.5rem;   --ds-fs-2xl: 2rem;
  --ds-fw: 400; --ds-fw-med: 500; --ds-fw-semi: 600; --ds-fw-bold: 800;
  --ds-lh-tight: 1.15; --ds-lh: 1.5;

  --ds-sp-1: 4px; --ds-sp-2: 8px; --ds-sp-3: 12px; --ds-sp-4: 16px;
  --ds-sp-5: 24px; --ds-sp-6: 32px; --ds-sp-7: 48px; --ds-sp-8: 64px;

  --ds-r-sm: 8px; --ds-r-md: 12px; --ds-r-lg: 16px;

  --ds-sh-1: 0 1px 3px rgba(16,24,40,.08);
  --ds-sh-2: 0 6px 20px rgba(16,24,40,.10);
  --ds-sh-3: 0 16px 44px rgba(16,24,40,.16);

  --ds-bp-sm: 576px; --ds-bp-md: 768px; --ds-bp-lg: 992px; --ds-bp-xl: 1200px;
  --ds-touch: 44px;
}

/* ----------------------- 2. Accessibility baseline ----------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 2px solid var(--ds-primary, #1a4b8b);
  outline-offset: 2px;
}
.ds-touch { min-height: var(--ds-touch); }
img.ds-img-responsive { max-width: 100%; height: auto; }

/* ----------------------- 3. Layout utilities (mobile-first) -------------- */
.ds-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--ds-sp-4); }
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-sp-4); }
.ds-row   { display: flex; flex-wrap: wrap; gap: var(--ds-sp-4); align-items: center; }
.ds-grid  { display: grid; gap: var(--ds-sp-4); grid-template-columns: 1fr; }
@media (min-width: 576px) { .ds-grid-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { .ds-grid-3, .ds-grid-sm2 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 992px) { .ds-grid-4 { grid-template-columns: repeat(4,1fr); } }
.ds-gap-1 { gap: var(--ds-sp-1) } .ds-gap-2 { gap: var(--ds-sp-2) }
.ds-gap-3 { gap: var(--ds-sp-3) } .ds-gap-5 { gap: var(--ds-sp-5) }
.ds-full { width: 100%; }
.ds-hide-sm { display: none; }
@media (min-width: 768px) { .ds-hide-sm { display: inline-block; } }
.ds-show-sm { display: inline-block; }
@media (min-width: 768px) { .ds-show-sm { display: none; } }

/* ----------------------- 4. Component classes (for new pages) ------------ */
.ds-card {
  background: var(--ds-card-bg); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-lg); box-shadow: var(--ds-sh-1);
  padding: var(--ds-sp-5); display: flex; flex-direction: column; gap: var(--ds-sp-3);
}
.ds-card-header { display:flex; align-items:center; justify-content:space-between; gap: var(--ds-sp-3); }
.ds-card-title { font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-bold); margin: 0; }
.ds-card-body { color: var(--ds-text); }
.ds-card-footer { border-top: 1px solid var(--ds-border); padding-top: var(--ds-sp-3); }

.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--ds-r-sm);
  border: 1px solid transparent; font: 600 var(--ds-fs-sm)/1 var(--ds-font);
  cursor: pointer; text-decoration: none; transition: filter .15s, box-shadow .15s, transform .05s;
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn:hover { filter: brightness(0.97); }
.ds-btn-primary { background: var(--ds-primary); color: var(--on-accent); }
.ds-btn-secondary { background: var(--ds-surface); color: var(--ds-text); border-color: var(--ds-border); }
.ds-btn-success { background: var(--ds-success); color: var(--on-accent); }
.ds-btn-warning { background: var(--ds-warning); color: var(--on-accent); }
.ds-btn-danger  { background: var(--ds-danger); color: var(--on-accent); }
.ds-btn-outline { background: transparent; color: var(--ds-primary); border-color: var(--ds-primary); }
.ds-btn-sm { min-height: 32px; padding: 0 12px; font-size: var(--ds-fs-xs); }
.ds-btn-lg { min-height: 48px; padding: 0 24px; font-size: var(--ds-fs-md); }
.ds-btn-block { width: 100%; }

.ds-alert { display:flex; gap:10px; align-items:flex-start; padding:12px 14px;
  border-radius: var(--ds-r-sm); font-size: var(--ds-fs-sm); line-height: var(--ds-lh); }
.ds-alert-success { background: color-mix(in srgb, var(--success) 12%, var(--card-background)); color: var(--ds-success); border:1px solid color-mix(in srgb, var(--success) 38%, var(--card-background)); }
.ds-alert-danger  { background: color-mix(in srgb, var(--danger) 12%, var(--card-background)); color: var(--ds-danger); border:1px solid color-mix(in srgb, var(--danger) 38%, var(--card-background)); }
.ds-alert-warning { background: color-mix(in srgb, var(--warning) 14%, var(--card-background)); color: var(--ds-warning); border:1px solid color-mix(in srgb, var(--warning) 40%, var(--card-background)); }
.ds-alert-info    { background: color-mix(in srgb, var(--primary) 10%, var(--card-background)); color: var(--ds-info); border:1px solid color-mix(in srgb, var(--primary) 35%, var(--card-background)); }

.ds-form-control {
  width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--ds-border);
  border-radius: var(--ds-r-sm); background:var(--ds-card-bg); color:var(--ds-text);
  font:400 var(--ds-fs-sm)/1.4 var(--ds-font);
}
.ds-form-control:focus { border-color:var(--ds-primary); outline:none; box-shadow:0 0 0 3px var(--ds-primary-soft); }
.ds-label { display:block; font-size:var(--ds-fs-xs); font-weight:var(--ds-fw-semi);
  color:var(--ds-text); margin:0 0 6px; letter-spacing:.2px; }
.ds-help { display:block; font-size:var(--ds-fs-xs); color:var(--ds-text-muted);
  margin:4px 0 0; line-height:1.35; }
.ds-text-muted { color: var(--ds-text-muted); }

.ds-table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ds-table-scroll table { min-width:600px; width:100%; border-collapse:collapse; }
.ds-table-scroll th, .ds-table-scroll td { text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--ds-border); font-size:var(--ds-fs-sm); }
.ds-table-scroll thead th { font-weight:var(--ds-fw-semi); color:var(--ds-text-muted); }

/* ----------------------- 5. Responsive tweaks for existing layout ------- */
/* Role dashboards: let wide tables scroll instead of overflowing the viewport. */
@media (max-width: 768px) {
  .dash-canvas .canvas-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-canvas .canvas-body table { min-width: 560px; }
}
/* Compress dashboard canvases on phones. */
@media (max-width: 480px) {
  .dash-canvas { margin-top: 14px !important; }
  .dash-canvas .canvas-body { padding: 10px; }
}

/* ----------------------- 6. Dark-mode tweaks for ds-* primitives --------- */
html[data-theme="dark"] .ds-card { box-shadow: none; }
html[data-theme="dark"] .ds-btn-secondary { background: var(--ds-card-bg); color: var(--ds-text); }

/* ------------------- 7. Compat: ds-* buttons inside .user-menu ----------- */
/* .topbar .user-menu a forces --primary text colour; keep readable on ds buttons. */
a.ds-btn { text-decoration: none; }
.topbar .user-menu a.ds-btn,
.user-menu a.ds-btn { color: inherit; }
.topbar .user-menu a.ds-btn-primary { color: var(--on-accent); }
.topbar .user-menu a.ds-btn-outline { color: var(--ds-primary); }

/* ------------------- 8. Table & text helpers (ledger/finance) ------------ */
/* Horizontal scroll for wide tables on small screens. The wrapper is given
   role="region" + tabindex="0" in markup so keyboard users can scroll it. */
.ds-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-table-wrap:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm);
  background: var(--ds-card-bg); color: var(--ds-text); }
.ds-table th, .ds-table td { text-align: left; padding: 10px 12px;
  border: 1px solid var(--ds-border); vertical-align: top; }
.ds-table thead th { background: var(--ds-primary-soft, #e8eef7);
  color: var(--ds-text-muted); font-weight: var(--ds-fw-semi);
  text-transform: uppercase; letter-spacing: .3px; font-size: 11.5px; }
.ds-table tbody tr:nth-child(even) { background: var(--primary-soft); }
.ds-table tbody tr:hover { background: var(--ds-primary-soft, #e8eef7); }
.ds-text-strong { font-weight: 700; }

/* ------------------- 9. Status badges for canvases/lists ---------------- */
.ds-badge { display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.ds-badge.ok,      .ds-badge--success { background: color-mix(in srgb, var(--success) 16%, var(--card-background)); color: var(--ds-success); }
.ds-badge.warn,    .ds-badge--warning { background: color-mix(in srgb, var(--warning) 18%, var(--card-background)); color: var(--ds-warning); }
.ds-badge.info,    .ds-badge--info    { background: color-mix(in srgb, var(--primary) 14%, var(--card-background)); color: var(--ds-info); }
.ds-badge.danger,  .ds-badge--danger  { background: color-mix(in srgb, var(--danger) 16%, var(--card-background)); color: var(--ds-danger); }
.ds-badge.muted,   .ds-badge--muted   { background: var(--primary-soft); color: var(--text-on-surface); }
html[data-theme="dark"] .ds-badge.muted,
html[data-theme="dark"] .ds-badge--muted { background: var(--border); color: var(--text-light); }

/* ------------------- 9b. Empty state & skeleton loader ------------------- */
.ds-empty { padding: var(--ds-sp-5); text-align: center; color: var(--ds-text-muted);
  font-size: var(--ds-fs-sm); }
.ds-empty .ds-empty-icon { font-size: 2rem; display: block; margin-bottom: 6px; opacity: .7; }
.ds-loader { position: relative; overflow: hidden; min-height: 12px;
  background: var(--bg); border-radius: var(--ds-r-sm); }
.ds-loader::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation: ds-shimmer 1.4s infinite; }
@keyframes ds-shimmer { 100% { transform: translateX(100%); } }

/* ------------------- 10. Unit-detail paired action buttons --------------- */
.ud-rv-row { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 14px 6px; align-items: center; }
.ud-rv-row > a, .ud-rv-row > button { flex: 1 1 0; min-width: 160px; justify-content: center; }

/* ------------------- 11. A11y contrast & link distinguishability ---------- */
/* Colours are semantic tokens so AA stays true in every theme. values are
   dark enough on light surfaces and are re-mapped for dark mode in app.css. */
.listing-title a { color: var(--link-on-surface); text-decoration: underline; text-underline-offset: 2px; }
nav.breadcrumbs a, nav > a[href="/"], a.crumb-home { color: var(--link-on-surface); text-decoration: underline; }
.ud-gallery-placeholder { color: var(--text-on-surface); }
/* h2 variant used to keep a monotonic heading order (unit-detail cards) */
.ud-card-head h2 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -0.2px; }
.stats-banner .stat-label { color: var(--text-on-surface) !important; }
.tb-label { color: var(--text-on-surface) !important; }
.toggle-bar .segment-tab { color: var(--text-on-surface); }
.toggle-bar .purpose-btn:not(.dim) { color: var(--text-on-surface) !important; }
.segment-tab:not(.active) .seg-count { color: var(--text-strong) !important; }
.segment-tab.active .seg-count { background: transparent !important; color: var(--on-accent) !important; }
.type-count { color: var(--text-on-surface) !important; }
.mc-label { color: var(--text-on-surface) !important; }
.listing-location { color: var(--text-on-surface) !important; }
.listing-card .placeholder.carousel-slide { color: var(--text-on-surface) !important; }
.mc-note { color: var(--text-on-surface) !important; }
.ud-agent-role { color: var(--text-on-surface) !important; }
#copyMsg { color: var(--link-on-surface) !important; font-weight: 600; }
.ud-addr > span { color: var(--text-on-surface) !important; }
.ud-proj-line .k { color: var(--text-on-surface) !important; }
.ud-fact .k { color: var(--text-on-surface) !important; }
.ud-gallery-placeholder { color: var(--text-strong) !important; }
.ud-empty, #udMap p { color: var(--text-on-surface) !important; }
.listing-price .price-period, .listing-price .price-monthly { color: var(--text-on-surface) !important; }
.ud-similar-head a { color: var(--link-on-surface) !important; text-decoration: underline; }
.listing-title a, .ud-similar .listing-title a, h3.listing-title a {
  color: var(--link-on-surface) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* ===================== 12. Page header (A2 / A6) ========================= */
.page-header, .ds-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ds-sp-4); flex-wrap: wrap; margin-bottom: var(--ds-sp-5);
}
.ds-page-header-title {
  font-size: var(--type-h2, var(--ds-fs-xl)); font-weight: var(--ds-fw-bold);
  color: var(--ds-text); margin: 0; line-height: var(--ds-lh-tight);
  letter-spacing: -0.3px;
}
.ds-page-header-subtitle {
  color: var(--ds-text-muted); font-size: var(--ds-fs-sm);
  margin: var(--ds-sp-1) 0 0; max-width: 62ch;
}
.ds-page-header-actions {
  display: flex; gap: var(--ds-sp-2); align-items: center; flex-wrap: wrap;
}
@media (max-width: 640px) {
  .page-header, .ds-page-header { flex-direction: column; align-items: stretch; }
  .ds-page-header-actions .ds-btn { width: 100%; justify-content: center; }
}

/* ===================== 13. KPI tiles (A3) =============================== */
.ds-kpi-tile {
  display: flex; align-items: center; gap: var(--ds-sp-4);
  background: var(--ds-card-bg); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md); box-shadow: var(--ds-sh-1);
  padding: var(--ds-sp-4) var(--ds-sp-5); min-height: 84px;
}
.ds-kpi-tile .ds-kpi-link {
  display: flex; align-items: center; gap: var(--ds-sp-4);
  text-decoration: none; color: inherit; width: 100%;
}
.ds-kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--ds-r-md); flex-shrink: 0;
  background: var(--primary-soft); color: var(--ds-primary); font-size: 18px;
}
.ds-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.ds-kpi-label {
  font-size: var(--ds-fs-xs); text-transform: uppercase; letter-spacing: .6px;
  color: var(--ds-text-muted); font-weight: var(--ds-fw-semi);
}
.ds-kpi-value {
  font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-bold);
  color: var(--ds-text); line-height: 1.2;
}
.ds-kpi-hint { font-size: var(--ds-fs-xs); color: var(--ds-text-muted); }

/* ===================== 14. Empty state (A5) ============================ */
.ds-empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: var(--ds-sp-3);
  padding: var(--ds-sp-8) var(--ds-sp-5); color: var(--ds-text-muted);
}
.ds-empty-state-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--primary-soft); color: var(--ds-primary); font-size: 26px;
}
.ds-empty-state-title {
  font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-semi);
  color: var(--ds-text); margin: 0;
}
.ds-empty-state-text { font-size: var(--ds-fs-sm); max-width: 46ch; margin: 0; }

/* ============ 15. Wrapping fixes for pills / badges / cells (A4) ======== */
.ds-badge, .ds-pill, .pill, .tag {
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: inline-block; vertical-align: middle;
}
.ds-table td, .ds-table th { max-width: 42ch; }
.ds-table td[data-id], .ds-table th[data-id] { white-space: nowrap; }

/* ============ 16. Mobile table -> card projection (A7) ================= */
/* Pair a `.ds-table-cards` list with a `.ds-table-responsive` wrapper: the
   table shows on desktop, the card list on phones/tablets. */
.ds-table-cards { display: none; list-style: none; margin: 0; padding: 0; }
.ds-table-cards .ds-card-row {
  background: var(--ds-card-bg); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md); box-shadow: var(--ds-sh-1);
  padding: var(--ds-sp-4); margin-bottom: var(--ds-sp-3);
}
.ds-table-cards .ds-card-row-title {
  font-weight: var(--ds-fw-semi); color: var(--ds-text);
  display: block; margin-bottom: var(--ds-sp-2);
}
.ds-table-cards dl {
  display: grid; grid-template-columns: auto 1fr; gap: 4px var(--ds-sp-3);
  margin: 0; font-size: var(--ds-fs-sm);
}
.ds-table-cards dt { color: var(--ds-text-muted); }
.ds-table-cards dd { margin: 0; color: var(--ds-text); text-align: end; }
@media (max-width: 768px) {
  .ds-table-responsive { display: none; }
  .ds-table-cards { display: grid; grid-template-columns: 1fr; gap: 0; }
}

/* ============ 17. Dashboard sections: KPIs / actions / events (A3) ====== */
.ds-section { margin: var(--ds-sp-6) 0; }
.ds-section-title {
  font-size: var(--ds-fs-lg); font-weight: var(--ds-fw-semi);
  color: var(--ds-text); margin: 0 0 var(--ds-sp-3);
}
.ds-kpi-row { margin: var(--ds-sp-5) 0; }
.ds-event-list, .ds-activity-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--ds-sp-2);
}
.ds-event, .ds-activity {
  display: flex; align-items: center; gap: var(--ds-sp-3);
  background: var(--ds-card-bg); border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-sm); padding: var(--ds-sp-3) var(--ds-sp-4);
  font-size: var(--ds-fs-sm);
}
.ds-event-icon { flex-shrink: 0; color: var(--ds-primary); }
.ds-activity-dot {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ds-primary); display: inline-block;
}
.ds-event-title, .ds-activity-title {
  flex: 1 1 auto; min-width: 0; color: var(--ds-text);
  overflow-wrap: anywhere;
}
.ds-event-when, .ds-activity-when {
  flex-shrink: 0; color: var(--ds-text-muted); font-size: var(--ds-fs-xs);
}
.ds-activity-actor { color: var(--ds-text-muted); font-size: var(--ds-fs-xs); }
/* An empty state inside a section must not carry the full-page padding. */
.ds-section .ds-empty-state { padding: var(--ds-sp-6) var(--ds-sp-4); }

/* ---- Dark mode for the new components (A8) -----------------------------
   Elevation reads as noise on dark surfaces, and `--primary-soft` is a faint
   tint that disappears when the background is already dark. Both are
   re-expressed with existing tokens, so every new surface resolves in light
   AND dark mode without any template-level override. */
html[data-theme="dark"] .ds-kpi-tile,
html[data-theme="dark"] .ds-event,
html[data-theme="dark"] .ds-activity,
html[data-theme="dark"] .ds-table-cards .ds-card-row { box-shadow: none; }
html[data-theme="dark"] .ds-kpi-icon,
html[data-theme="dark"] .ds-empty-state-icon {
  background: var(--border); color: var(--text);
}