/* AGALID Horizon Design System v2 — shared application primitives. */
html[data-ag-design-system="v2"] {
  --ag-font-sans: Inter, "SF Pro Text", "Segoe UI Variable", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --ag-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --ag-space-1: 4px;
  --ag-space-2: 8px;
  --ag-space-3: 12px;
  --ag-space-4: 16px;
  --ag-space-5: 20px;
  --ag-space-6: 24px;
  --ag-space-8: 32px;
  --ag-radius-control: 10px;
  --ag-radius-card: 14px;
  --ag-radius-panel: 20px;
  --ag-control-height: 38px;
  --ag-line: var(--hz-line, #e7e9ee);
  --ag-line-strong: var(--hz-line-strong, #d8dce4);
  --ag-bg: var(--hz-canvas, #f7f8fa);
  --ag-surface: var(--hz-surface-solid, #fff);
  --ag-surface-raised: color-mix(in srgb, var(--ag-surface) 96%, var(--hz-blue, #0b63f6) 4%);
  --ag-text: var(--hz-ink, #111827);
  --ag-muted: var(--hz-muted, #667085);
  --ag-faint: var(--hz-faint, #98a2b3);
  --ag-primary: #4f63e8;
  --ag-primary-strong: #3f4fca;
  --ag-primary-soft: color-mix(in srgb, var(--ag-primary) 10%, transparent);
  --ag-success: var(--hz-green, #16a365);
  --ag-warning: var(--hz-amber, #d99100);
  --ag-danger: var(--hz-red, #f05a47);
  --ag-focus: 0 0 0 3px color-mix(in srgb, var(--ag-primary) 18%, transparent);
  --ag-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .055);
  --ag-shadow-dialog: 0 24px 72px rgba(14, 22, 43, .20), 0 3px 12px rgba(14, 22, 43, .08);
  --ag-ease: cubic-bezier(.2, .72, .2, 1);
  --ag-duration-fast: 140ms;
  --ag-duration: 220ms;
  color-scheme: light;
}

html[data-theme="dark"][data-ag-design-system="v2"] {
  --ag-primary: #8994ff;
  --ag-primary-strong: #a6adff;
  --ag-surface-raised: color-mix(in srgb, var(--ag-surface) 94%, var(--ag-primary) 6%);
  --ag-shadow-card: 0 1px 2px rgba(0, 0, 0, .20), 0 10px 28px rgba(0, 0, 0, .20);
  --ag-shadow-dialog: 0 28px 80px rgba(0, 0, 0, .48), 0 3px 14px rgba(0, 0, 0, .26);
  color-scheme: dark;
}

html[data-ag-design-system="v2"] body,
html[data-ag-design-system="v2"] button,
html[data-ag-design-system="v2"] input,
html[data-ag-design-system="v2"] select,
html[data-ag-design-system="v2"] textarea {
  font-family: var(--ag-font-sans);
  font-variant-numeric: tabular-nums;
}

html[data-ag-design-system="v2"] body {
  color: var(--ag-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects, .ac-drawer) :where(button, a, input, select, textarea):focus-visible,
html[data-ag-design-system="v2"] :where(.rail, .hz-bottom-dock, .mapctrl) :where(button, a, [role="button"]):focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--ag-focus) !important;
  border-color: color-mix(in srgb, var(--ag-primary) 58%, var(--ag-line-strong)) !important;
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects, .ac-drawer) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: var(--ag-control-height);
  padding: 9px 11px;
  color: var(--ag-text);
  background: var(--ag-surface);
  border: 1px solid var(--ag-line-strong);
  border-radius: var(--ag-radius-control);
  transition: border-color var(--ag-duration-fast) var(--ag-ease), box-shadow var(--ag-duration-fast) var(--ag-ease), background var(--ag-duration-fast) var(--ag-ease);
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects, .ac-drawer) :where(input, textarea)::placeholder {
  color: var(--ag-faint);
  opacity: 1;
}

html[data-ag-design-system="v2"] :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--ag-primary);
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects, .ac-drawer) :where(label, .field-label) {
  color: var(--ag-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects, .ac-drawer) button:not(.maplibregl-ctrl button) {
  min-height: 34px;
  border-radius: var(--ag-radius-control);
  transition: transform var(--ag-duration-fast) var(--ag-ease), border-color var(--ag-duration-fast) var(--ag-ease), background var(--ag-duration-fast) var(--ag-ease), color var(--ag-duration-fast) var(--ag-ease), box-shadow var(--ag-duration-fast) var(--ag-ease);
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects, .ac-drawer) button:not(:disabled):active {
  transform: translateY(1px);
}

html[data-ag-design-system="v2"] body .btnP,
html[data-ag-design-system="v2"] body .rw-action-primary,
html[data-ag-design-system="v2"] body .rs-primary,
html[data-ag-design-system="v2"] body .dp-save,
html[data-ag-design-system="v2"] body .cc-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #5966e9, #3f79e7) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(65, 91, 218, .20), inset 0 1px rgba(255, 255, 255, .18) !important;
}

html[data-ag-design-system="v2"] body .btnP:not(:disabled):hover,
html[data-ag-design-system="v2"] body .rw-action-primary:not(:disabled):hover,
html[data-ag-design-system="v2"] body .rs-primary:not(:disabled):hover,
html[data-ag-design-system="v2"] body .dp-save:not(:disabled):hover,
html[data-ag-design-system="v2"] body .cc-primary:not(:disabled):hover {
  background: linear-gradient(135deg, #6470f0, #477fe9) !important;
  box-shadow: 0 9px 22px rgba(65, 91, 218, .27), inset 0 1px rgba(255, 255, 255, .20) !important;
  transform: translateY(-1px);
}

html[data-ag-design-system="v2"] :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .56;
}

html[data-ag-design-system="v2"] .page-panel {
  border-radius: var(--ag-radius-panel) var(--ag-radius-panel) 0 0;
}

html[data-ag-design-system="v2"] .page-head {
  min-height: 68px;
  padding-inline: var(--ag-space-5);
  border-bottom: 1px solid var(--ag-line);
}

html[data-ag-design-system="v2"] .page-head :where(h1, h2) {
  margin: 0;
  color: var(--ag-text);
  font-weight: 760;
  letter-spacing: -.035em;
}

html[data-ag-design-system="v2"] .page-head :where(p, small) {
  color: var(--ag-muted);
  line-height: 1.5;
}

html[data-ag-design-system="v2"] .close {
  display: grid;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  place-items: center;
  color: var(--ag-muted);
  background: var(--ag-surface);
  border: 1px solid var(--ag-line);
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  cursor: pointer;
}

html[data-ag-design-system="v2"] .close:hover {
  color: var(--ag-text);
  background: var(--ag-surface-raised);
  border-color: var(--ag-line-strong);
}

html[data-ag-design-system="v2"] :where(.sec, .stat, .alert-item, .cust-card, .rp-metric-card, .rp-chart-card, .rp-smart-summary, .hz-dash-kpi, .hz-dash-card, .hz-dash-mini, .rw-panel, .rs-card) {
  border-color: var(--ag-line) !important;
  border-radius: var(--ag-radius-card) !important;
  box-shadow: var(--ag-shadow-card) !important;
}

html[data-ag-design-system="v2"] :where(.rw-dialog, .rs-dialog, .cc-dialog, .dp-dialog, .ac-drawer, [role="dialog"]) {
  color: var(--ag-text);
  border-color: var(--ag-line) !important;
  box-shadow: var(--ag-shadow-dialog) !important;
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects) table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ag-text);
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects) th {
  color: var(--ag-faint);
  background: color-mix(in srgb, var(--ag-bg) 76%, transparent);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .045em;
  text-transform: uppercase;
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects) :where(th, td) {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ag-line);
  text-align: start;
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects) tbody tr {
  transition: background var(--ag-duration-fast) var(--ag-ease);
}

html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects) tbody tr:hover {
  background: color-mix(in srgb, var(--ag-primary) 4%, transparent);
}

html[data-ag-design-system="v2"] :where(.empty, .rw-empty, .rs-empty, .cc-empty) {
  color: var(--ag-faint);
  border-color: var(--ag-line) !important;
  border-radius: var(--ag-radius-card);
}

html[data-ag-design-system="v2"] [aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--ag-danger) 68%, var(--ag-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ag-danger) 13%, transparent) !important;
}

html[data-ag-design-system="v2"] :where(code, kbd, .mono, [data-mono]) {
  font-family: var(--ag-font-mono);
}

html[data-ag-design-system="v2"] ::selection {
  color: var(--ag-text);
  background: color-mix(in srgb, var(--ag-primary) 22%, transparent);
}

html[data-ag-design-system="v2"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-ag-design-system="v2"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ag-faint) 48%, transparent); border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; }
html[data-ag-design-system="v2"] ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ag-muted) 62%, transparent); background-clip: padding-box; }
html[data-ag-design-system="v2"] ::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 700px) {
  html[data-ag-design-system="v2"] { --ag-control-height: 42px; --ag-radius-panel: 18px; }
  html[data-ag-design-system="v2"] .page-head { min-height: 60px; padding-inline: var(--ag-space-4); }
  html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects) :where(th, td) { padding: 9px 10px; }
  html[data-ag-design-system="v2"] :where(.page-panel, [role="dialog"], .objects, .ac-drawer) button:not(.maplibregl-ctrl button) { min-height: 38px; }
}

@media (prefers-contrast: more) {
  html[data-ag-design-system="v2"] { --ag-line: color-mix(in srgb, var(--ag-text) 34%, transparent); --ag-line-strong: color-mix(in srgb, var(--ag-text) 52%, transparent); }
}

@media (forced-colors: active) {
  html[data-ag-design-system="v2"] :where(button, a, input, select, textarea):focus-visible { outline: 2px solid Highlight !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ag-design-system="v2"] *,
  html[data-ag-design-system="v2"] *::before,
  html[data-ag-design-system="v2"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}