/* ============================================================================
   AL-HAKEEM PANEL SHELL — visual polish layer
   ============================================================================
   Loaded AFTER output.css so it wins the cascade for shell components.
   Uses only tokens defined in design-system.css. No raw colour values.

   Owns:
     - Sidebar layout, brand block, nav links, section headings, footer
     - Topbar layout, region badge, locale chip, user-menu dropdown
     - Dashboard widgets: stat cards, quick-actions row, welcome header
     - Page header / breadcrumb polish
     - Form / table micro-spacing tweaks (subtle, non-destructive)

   Critical sizes use !important to defeat Tailwind's @layer base resets
   on <svg> / <img> (which set height:auto and max-width:100%). Without
   the guard, an SVG inside .ds-side-link__icon would inherit its host
   layout instead of staying at 1.25rem.
   ============================================================================ */


/* ============================================================================
   BODY / PAGE BACKDROP
   ============================================================================ */
body {
  font-family: var(--font-activist-regular);
  color: var(--text-onPage-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  /* Subtle paint to lift cards off the page without being noisy. */
  background-color: var(--bg-page);
}

/* ============================================================================
   SIDEBAR  (panel-redesign 2026-05-12)
   ============================================================================ */
.ds-sidebar {
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--bg-sidebar);
  border-inline-end: var(--stroke-1) solid var(--border-divider);
  box-shadow: 0 0 0 1px rgba(7, 8, 10, 0.02);
}

.ds-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-5);
  height: var(--topbar-height);
  border-block-end: var(--stroke-1) solid var(--border-divider);
  flex-shrink: 0;
}

/* Logo is an <img> tag — Tailwind base sets `height: auto; max-width: 100%`
   so we MUST force explicit dimensions to defeat that intrinsic sizing.
   Without !important, the SVG renders at its viewBox aspect ratio scaled
   to viewport (looks enormous in some browsers). */
.ds-sidebar__brand-logo {
  width: 1.75rem !important;
  height: 2.4rem !important;
  flex-shrink: 0 !important;
  display: block !important;
  object-fit: contain;
}

.ds-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  line-height: 1;
}
.ds-sidebar__brand-name {
  font-family: var(--font-activist-bold);
  font-size: var(--type-ar-18);
  color: var(--brand-primary);
  line-height: 1;
  letter-spacing: -0.01em;
}
.ds-sidebar__brand-sub {
  font-family: var(--font-activist-regular);
  font-size: 0.7rem;
  color: var(--text-placeholder);
  line-height: 1;
  letter-spacing: 0.02em;
}

.ds-sidebar__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-4) var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--color-blackHaze-200) transparent;
}
.ds-sidebar__nav::-webkit-scrollbar { width: 0.375rem; }
.ds-sidebar__nav::-webkit-scrollbar-thumb {
  background: var(--color-blackHaze-200);
  border-radius: var(--radius-4);
}

.ds-sidebar__nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.ds-sidebar__nav-list li { list-style: none; }

.ds-sidebar__section-heading {
  margin-block: var(--space-5) var(--space-1);
  padding-inline: var(--space-3);
  font-family: var(--font-activist-semibold);
  font-size: 0.6875rem;
  color: var(--text-placeholder);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
  list-style: none;
}
.ds-sidebar__nav-list > .ds-sidebar__section-heading:first-child {
  margin-block-start: 0;
}

.ds-sidebar__footer {
  border-block-start: var(--stroke-1) solid var(--border-divider);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex-shrink: 0;
}

/* ============================================================================
   SIDE LINK  (sidebar nav rows + dropdown menu items)
   ============================================================================ */
.ds-side-link {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  padding: 0.5625rem var(--space-3) !important;
  border-radius: 0.625rem !important;
  font-family: var(--font-activist-semibold);
  font-size: var(--type-ar-14);
  color: var(--menu-action-default-text);
  text-decoration: none !important;
  line-height: 1.2;
  transition: background-color 0.18s ease, color 0.18s ease;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.ds-side-link__icon {
  flex-shrink: 0 !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--menu-action-default-icon);
}
.ds-side-link__icon svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: block !important;
  max-width: none !important;
}

.ds-side-link__label {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-side-link:hover:not(.ds-side-link--active):not(.ds-side-link--danger) {
  background-color: var(--menu-action-hover-bg);
  color: var(--menu-action-default-text);
}
.ds-side-link:active:not(.ds-side-link--active):not(.ds-side-link--danger) {
  background-color: var(--menu-action-pressed-bg);
}
.ds-side-link:focus-visible {
  outline: none;
  background-color: var(--menu-action-focus-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--menu-action-focus-border);
}

.ds-side-link--active {
  background-color: var(--menu-action-selected-bg);
  color: var(--menu-action-selected-text);
}
.ds-side-link--active .ds-side-link__icon { color: var(--brand-primary); }

.ds-side-link--danger {
  color: var(--menu-logout-default-text);
}
.ds-side-link--danger .ds-side-link__icon { color: var(--menu-logout-default-icon); }
.ds-side-link--danger:hover { background-color: var(--menu-logout-hover-bg); }
.ds-side-link--danger:active { background-color: var(--menu-logout-pressed-bg); }


/* ============================================================================
   TOPBAR
   ============================================================================ */
.ds-topbar {
  background-color: var(--bg-card);
  border-block-end: var(--stroke-1) solid var(--border-divider);
  box-shadow: 0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.02);
}

.ds-topbar__title-block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 auto;
}
.ds-topbar__title {
  font-family: var(--font-activist-semibold);
  font-size: var(--type-ar-16);
  color: var(--text-onCard-primary);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-topbar__subtitle {
  font-family: var(--font-activist-regular);
  font-size: var(--type-ar-12);
  color: var(--text-placeholder);
  line-height: 1.2;
}

.ds-topbar__icon-btn {
  width: 2.25rem !important;
  height: 2.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent;
  border: none;
  border-radius: var(--radius-8);
  color: var(--text-onCard-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ds-topbar__icon-btn:hover {
  background-color: var(--color-blackHaze-50);
  color: var(--brand-primary);
}
.ds-topbar__icon-btn svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: block !important;
}

.ds-topbar__region {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  padding: 0.3125rem 0.625rem !important;
  background-color: var(--color-blue-50);
  color: var(--brand-primary);
  border-radius: 999px;
  font-family: var(--font-activist-bold);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.05em;
}
.ds-topbar__region svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  display: block !important;
}

.ds-topbar__lang {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  padding: 0.3125rem 0.625rem !important;
  background-color: transparent;
  color: var(--header-lang-label);
  border: var(--stroke-1) solid var(--border-divider);
  border-radius: 999px;
  font-family: var(--font-activist-semibold);
  font-size: 0.75rem;
  line-height: 1;
  text-decoration: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.ds-topbar__lang svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  display: block !important;
}
.ds-topbar__lang:hover {
  border-color: var(--brand-primary);
  background-color: var(--color-blue-50);
  color: var(--brand-primary);
}


/* ============================================================================
   USER AVATAR + DROPDOWN MENU  (zero-JS via <details>/<summary>)
   ============================================================================ */
.ds-user-menu { position: relative; }

.ds-user-menu__trigger {
  list-style: none;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
  border-radius: 999px;
  border: var(--stroke-1) solid var(--border-divider);
  background-color: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
[dir="rtl"] .ds-user-menu__trigger {
  padding: 0.25rem 0.25rem 0.25rem 0.625rem;
}
.ds-user-menu__trigger::-webkit-details-marker { display: none; }
.ds-user-menu__trigger::marker { display: none; }
.ds-user-menu[open] > .ds-user-menu__trigger,
.ds-user-menu__trigger:hover {
  background-color: var(--color-blue-50);
  border-color: var(--color-blue-200);
}

.ds-user-menu__avatar {
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 999px;
  background-color: var(--avatar-male-bg);
  color: var(--avatar-male-icon);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.ds-user-menu__avatar svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: block !important;
}

.ds-user-menu__name {
  font-family: var(--font-activist-semibold);
  font-size: var(--type-ar-14);
  color: var(--text-onCard-primary);
  line-height: 1.2;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-user-menu__chevron {
  width: 0.875rem !important;
  height: 0.875rem !important;
  display: block !important;
  color: var(--avatar-arrow-color);
  transition: transform 0.2s ease;
}
.ds-user-menu[open] .ds-user-menu__chevron { transform: rotate(180deg); }

.ds-user-menu__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  min-width: 15rem;
  background-color: var(--avatar-dropdown-bg);
  border-radius: var(--radius-8);
  border: var(--stroke-1) solid var(--border-divider);
  box-shadow:
    0 0.75rem 1.5rem 0 rgba(7, 8, 10, 0.08),
    0 0.375rem 0.75rem 0 rgba(7, 8, 10, 0.04);
  padding: var(--space-2);
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  animation: dsUserMenuIn 0.16s ease-out both;
}
@keyframes dsUserMenuIn {
  from { opacity: 0; transform: translateY(-0.375rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.ds-user-menu__header {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-block-end: var(--stroke-1) solid var(--avatar-dropdown-divider);
  margin-block-end: var(--space-2);
}
.ds-user-menu__header-name {
  display: block;
  font-family: var(--font-activist-bold);
  font-size: var(--type-ar-14);
  color: var(--text-onCard-primary);
  line-height: 1.3;
}
.ds-user-menu__header-email {
  display: block;
  margin-block-start: 0.125rem;
  font-family: var(--font-activist-regular);
  font-size: var(--type-ar-12);
  color: var(--text-placeholder);
  line-height: 1.2;
  word-break: break-all;
}


/* ============================================================================
   PAGE HEADER (in main content) — bigger title than the topbar
   ============================================================================ */
.ds-page-header__title {
  font-family: var(--font-activist-bold) !important;
  font-size: var(--type-ar-28) !important;
  letter-spacing: -0.015em;
}


/* ============================================================================
   DASHBOARD: WELCOME HERO + STAT CARDS + QUICK ACTIONS
   ============================================================================ */

/* Welcome hero — a soft brand-tinted banner above the stats grid. */
.ds-welcome-hero {
  background:
    linear-gradient(135deg, var(--color-blue-50) 0%, var(--brand-gradient-mid, #e3fff5) 100%);
  border-radius: var(--radius-8);
  padding: var(--space-6) var(--space-7);
  margin-block-end: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border: var(--stroke-1) solid var(--color-blue-100);
  position: relative;
  overflow: hidden;
}
.ds-welcome-hero::after {
  /* Subtle decoration — a translucent blob behind the logo */
  content: "";
  position: absolute;
  inset-inline-end: -3rem;
  top: -3rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(35, 76, 240, 0.08), transparent 70%);
  pointer-events: none;
}
.ds-welcome-hero__text { position: relative; z-index: 1; min-width: 0; }
.ds-welcome-hero__title {
  font-family: var(--font-activist-bold);
  font-size: var(--type-ar-22);
  color: var(--color-blue-950);
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}
.ds-welcome-hero__subtitle {
  font-family: var(--font-activist-regular);
  font-size: var(--type-ar-14);
  color: var(--color-blue-800);
  margin-block-start: 0.375rem;
  line-height: 1.4;
}
.ds-welcome-hero__logo {
  width: 4rem !important;
  height: 5.5rem !important;
  display: block !important;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0.5rem 1rem rgba(35, 76, 240, 0.12));
}


/* Stat grid container */
.ds-stat-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}
@media (min-width: 36rem)  { .ds-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem)  { .ds-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 80rem)  { .ds-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* Single stat card */
.ds-stat-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-8);
  padding: var(--space-5);
  border: var(--stroke-1) solid var(--border-divider);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.ds-stat-card:hover {
  transform: translateY(-0.125rem);
  box-shadow:
    0 0.5rem 1rem 0 rgba(7, 8, 10, 0.04),
    0 0.125rem 0.25rem 0 rgba(7, 8, 10, 0.02);
  border-color: var(--color-blue-100);
}

.ds-stat-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.ds-stat-card__label {
  font-family: var(--font-activist-semibold);
  font-size: 0.6875rem;
  color: var(--text-placeholder);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.2;
}
.ds-stat-card__value {
  font-family: var(--font-activist-bold);
  font-size: var(--type-ar-32);
  color: var(--text-onCard-primary);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.02em;
}
.ds-stat-card__hint {
  font-family: var(--font-activist-regular);
  font-size: var(--type-ar-12);
  color: var(--text-placeholder);
  line-height: 1.3;
  margin-block-start: 0.25rem;
}

.ds-stat-card__accent {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 0.625rem;
  background-color: var(--color-blue-50);
  color: var(--brand-primary);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.ds-stat-card__accent svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: block !important;
}

/* Tonal variants */
.ds-stat-card--warning .ds-stat-card__accent {
  background-color: var(--feedback-warning-bg);
  color: var(--feedback-warning-icon);
}
.ds-stat-card--info .ds-stat-card__accent {
  background-color: var(--feedback-info-bg);
  color: var(--feedback-info-icon);
}
.ds-stat-card--success .ds-stat-card__accent {
  background-color: var(--feedback-success-bg);
  color: var(--feedback-success-icon);
}
.ds-stat-card--error .ds-stat-card__accent {
  background-color: var(--feedback-error-bg);
  color: var(--feedback-error-icon);
}
.ds-stat-card--purple .ds-stat-card__accent {
  background-color: var(--color-pink-50);
  color: var(--color-pink-600);
}
.ds-stat-card--cerulean .ds-stat-card__accent {
  background-color: var(--color-cerulean-50);
  color: var(--color-cerulean-600);
}


/* Quick actions panel — a wider card with horizontal action list */
.ds-quick-actions {
  background-color: var(--bg-card);
  border-radius: var(--radius-8);
  padding: var(--space-6);
  border: var(--stroke-1) solid var(--border-divider);
}
.ds-quick-actions__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}
.ds-quick-actions__title {
  font-family: var(--font-activist-bold);
  font-size: var(--type-ar-18);
  color: var(--text-onCard-primary);
  margin: 0;
  line-height: 1.2;
}
.ds-quick-actions__icon {
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: block !important;
  color: var(--brand-primary);
}
.ds-quick-actions__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Quick-action card — a button-like surface with icon + title + sublabel */
.ds-quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-8);
  background-color: var(--color-blackHaze-50);
  border: var(--stroke-1) solid transparent;
  text-decoration: none !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  flex: 1 1 14rem;
  min-width: 0;
  cursor: pointer;
}
.ds-quick-action:hover {
  background-color: var(--color-blue-50);
  border-color: var(--color-blue-100);
  transform: translateY(-0.0625rem);
}
.ds-quick-action__icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: var(--radius-8);
  background-color: var(--color-white-50);
  color: var(--brand-primary);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  border: var(--stroke-1) solid var(--border-divider);
}
.ds-quick-action__icon svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: block !important;
}
.ds-quick-action__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1 1 auto;
}
.ds-quick-action__title {
  font-family: var(--font-activist-semibold);
  font-size: var(--type-ar-14);
  color: var(--text-onCard-primary);
  line-height: 1.2;
}
.ds-quick-action__sub {
  font-family: var(--font-activist-regular);
  font-size: var(--type-ar-12);
  color: var(--text-placeholder);
  line-height: 1.2;
}


/* ============================================================================
   FLASH ALERT MICRO-TWEAK — softer shadow + tighter spacing
   ============================================================================ */
.ds-alert {
  box-shadow: 0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.02);
}


/* ============================================================================
   MOBILE OVERLAY DIM
   ============================================================================ */
#sidebar-overlay {
  background-color: rgba(7, 8, 10, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.18s ease;
}


/* ============================================================================
   PRO REFINEMENTS — 2026-05-12 round 2
   ============================================================================ */

/* ----- Sidebar: active rail accent + smoother hover ----- */
.ds-side-link {
  position: relative;
}
.ds-side-link::before {
  /* Vertical rail on the inline-start edge that appears on active state.
     Uses transform + opacity for cheap GPU animation. */
  content: "";
  position: absolute;
  inset-inline-start: -0.5rem;
  top: 50%;
  width: 0.1875rem;
  height: 1.125rem;
  background-color: var(--brand-primary);
  border-radius: 0 0.1875rem 0.1875rem 0;
  transform: translateY(-50%) scaleY(0);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
[dir="rtl"] .ds-side-link::before {
  border-radius: 0.1875rem 0 0 0.1875rem;
}
.ds-side-link--active::before {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}


/* ============================================================================
   KPI CARD — featured stat tile (bigger, with optional trend indicator)
   ============================================================================ */
.ds-kpi-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}
@media (min-width: 36rem) { .ds-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ds-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ds-kpi-card {
  background-color: var(--bg-card);
  border-radius: 0.875rem;
  padding: var(--space-5);
  border: var(--stroke-1) solid var(--border-divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ds-kpi-card::after {
  /* Soft accent blob in the corner */
  content: "";
  position: absolute;
  inset-inline-end: -2rem;
  top: -2rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blue-50), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ds-kpi-card:hover {
  transform: translateY(-0.125rem);
  border-color: var(--color-blue-100);
  box-shadow:
    0 0.625rem 1.25rem 0 rgba(7, 8, 10, 0.05),
    0 0.125rem 0.25rem 0 rgba(7, 8, 10, 0.03);
}
.ds-kpi-card:hover::after { opacity: 0.9; }

.ds-kpi-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}
.ds-kpi-card__label {
  font-family: var(--font-activist-semibold);
  font-size: 0.75rem;
  color: var(--text-placeholder);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  line-height: 1.2;
}
.ds-kpi-card__icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 0.625rem;
  background-color: var(--color-blue-50);
  color: var(--brand-primary);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.ds-kpi-card__icon svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: block !important;
}

.ds-kpi-card__value {
  font-family: var(--font-activist-bold);
  font-size: 2.25rem;
  color: var(--text-onCard-primary);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.ds-kpi-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  z-index: 1;
}
.ds-kpi-card__sub {
  font-family: var(--font-activist-regular);
  font-size: 0.8125rem;
  color: var(--text-placeholder);
  line-height: 1.3;
  flex: 1 1 auto;
}
.ds-kpi-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.4375rem;
  background-color: var(--feedback-success-bg);
  color: var(--feedback-success-message);
  border-radius: 999px;
  font-family: var(--font-activist-bold);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.ds-kpi-card__badge--neutral {
  background-color: var(--color-blackHaze-100);
  color: var(--color-blackHaze-700);
}
.ds-kpi-card__badge--warning {
  background-color: var(--feedback-warning-bg);
  color: var(--feedback-warning-message);
}
.ds-kpi-card__badge svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
  display: block !important;
}

/* Variant tints — apply to the icon tile */
.ds-kpi-card--info .ds-kpi-card__icon { background-color: var(--feedback-info-bg); color: var(--feedback-info-icon); }
.ds-kpi-card--info::after { background: radial-gradient(circle, var(--color-cerulean-50), transparent 70%); }
.ds-kpi-card--success .ds-kpi-card__icon { background-color: var(--feedback-success-bg); color: var(--feedback-success-icon); }
.ds-kpi-card--success::after { background: radial-gradient(circle, var(--color-green-50), transparent 70%); }
.ds-kpi-card--warning .ds-kpi-card__icon { background-color: var(--feedback-warning-bg); color: var(--feedback-warning-icon); }
.ds-kpi-card--warning::after { background: radial-gradient(circle, var(--color-brightSun-50), transparent 70%); }
.ds-kpi-card--purple .ds-kpi-card__icon { background-color: var(--color-pink-50); color: var(--color-pink-600); }
.ds-kpi-card--purple::after { background: radial-gradient(circle, var(--color-pink-50), transparent 70%); }


/* ============================================================================
   STATUS DISTRIBUTION CHART — a stacked horizontal bar with legend
   ============================================================================ */
.ds-status-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-8);
  padding: var(--space-6);
  border: var(--stroke-1) solid var(--border-divider);
  margin-block-end: var(--space-6);
}
.ds-status-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
  flex-wrap: wrap;
}
.ds-status-card__title {
  font-family: var(--font-activist-bold);
  font-size: var(--type-ar-18);
  color: var(--text-onCard-primary);
  margin: 0;
  line-height: 1.2;
}
.ds-status-card__sub {
  font-family: var(--font-activist-regular);
  font-size: var(--type-ar-12);
  color: var(--text-placeholder);
  margin-block-start: 0.25rem;
  line-height: 1.4;
}
.ds-status-card__total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
}
[dir="rtl"] .ds-status-card__total { align-items: flex-start; }
.ds-status-card__total-label {
  font-family: var(--font-activist-semibold);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-placeholder);
}
.ds-status-card__total-value {
  font-family: var(--font-activist-bold);
  font-size: var(--type-ar-22);
  color: var(--text-onCard-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* The bar itself — a flex container divided into colour segments */
.ds-status-bar {
  display: flex;
  width: 100%;
  height: 0.75rem;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--color-blackHaze-100);
  margin-block-end: var(--space-4);
}
.ds-status-bar__seg {
  height: 100%;
  transition: width 0.4s ease;
  min-width: 0;
}
.ds-status-bar__seg + .ds-status-bar__seg {
  /* Tiny separator so adjacent segments don't blend */
  box-shadow: inset 0.0625rem 0 0 rgba(255, 255, 255, 0.5);
}
.ds-status-bar__seg--approved { background-color: var(--color-green-500); }
.ds-status-bar__seg--under   { background-color: var(--color-cerulean-500); }
.ds-status-bar__seg--pending { background-color: var(--color-brightSun-500); }
.ds-status-bar__seg--waitlist { background-color: var(--color-pink-500); }
.ds-status-bar__seg--rejected { background-color: var(--color-radicalRed-500); }

/* Legend row */
.ds-status-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
}
@media (min-width: 48rem) { .ds-status-legend { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ds-status-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.ds-status-legend__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.ds-status-legend__label {
  font-family: var(--font-activist-regular);
  font-size: 0.75rem;
  color: var(--text-placeholder);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ds-status-legend__value {
  font-family: var(--font-activist-bold);
  font-size: var(--type-ar-16);
  color: var(--text-onCard-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ds-status-legend__col {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

/* Empty state for the chart when total = 0 */
.ds-status-empty {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--text-placeholder);
  font-family: var(--font-activist-regular);
  font-size: var(--type-ar-14);
  line-height: 1.5;
}


/* ============================================================================
   WELCOME HERO — refined typography + tabular figures
   ============================================================================ */
.ds-welcome-hero {
  padding-block: var(--space-7);
}
.ds-welcome-hero__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3125rem 0.6875rem;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  font-family: var(--font-activist-semibold);
  font-size: 0.75rem;
  color: var(--color-blue-900);
  line-height: 1;
  letter-spacing: 0.02em;
  margin-block-end: var(--space-3);
  border: var(--stroke-1) solid var(--color-blue-100);
  font-variant-numeric: tabular-nums;
}
.ds-welcome-hero__date svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
  display: block !important;
  color: var(--brand-primary);
}


/* ============================================================================
   SECTION HEADING (above standalone cards)
   ============================================================================ */
.ds-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.ds-section-row__title {
  font-family: var(--font-activist-bold);
  font-size: var(--type-ar-18);
  color: var(--text-onCard-primary);
  margin: 0;
  line-height: 1.2;
}


/* ============================================================================
   STAT GRID (existing) — tighten and align
   ============================================================================ */
.ds-stat-card {
  border-radius: 0.875rem;
}
.ds-stat-card__value {
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   QUICK-ACTIONS — slight refinement
   ============================================================================ */
.ds-quick-actions {
  border-radius: var(--radius-8);
}
.ds-quick-action {
  border-radius: 0.75rem;
  background-color: var(--color-white-50);
  border-color: var(--border-divider);
}
.ds-quick-action:hover {
  background-color: var(--color-blue-50);
  border-color: var(--color-blue-200);
  box-shadow: 0 0.5rem 1rem 0 rgba(35, 76, 240, 0.05);
}
.ds-quick-action__icon {
  background-color: var(--color-blue-50);
  border: none;
}


/* ============================================================================
   SUBTLE PAGE PADDING (so the content has breathing room on wide screens)
   ============================================================================ */
#main-content > main {
  padding-block-end: var(--space-9);
}


/* ============================================================================
   MODERN UPLIFT — 2026-05-12 round 3
   Gradient surfaces, layered shadows, bigger numbers, softer borders.
   Strict additive: every rule below is an override (no new properties on a
   shape we removed).  Designed so individual reverts are trivial — just
   delete this whole section to roll back to round 2.
   ============================================================================ */


/* ----- Welcome hero: deeper gradient, more presence ----- */
.ds-welcome-hero {
  background:
    radial-gradient(at 0% 0%, rgba(35, 76, 240, 0.07), transparent 50%),
    radial-gradient(at 100% 0%, rgba(0, 220, 171, 0.08), transparent 50%),
    linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-white-50) 50%, var(--brand-gradient-mid, #e3fff5) 100%);
  border-radius: 1.25rem;
  border-color: rgba(35, 76, 240, 0.08);
  box-shadow:
    0 1.25rem 2.5rem -1rem rgba(35, 76, 240, 0.12),
    0 0.5rem 1rem -0.5rem rgba(7, 8, 10, 0.04);
  padding-block: var(--space-8);
  padding-inline: var(--space-8);
}
.ds-welcome-hero__title {
  font-size: var(--type-ar-28);
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, var(--color-blue-950) 0%, var(--color-blue-700) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ds-welcome-hero__subtitle {
  font-size: var(--type-ar-14);
  color: var(--color-blue-800);
  opacity: 0.85;
  margin-block-start: 0.5rem;
}
.ds-welcome-hero__logo {
  width: 4.5rem !important;
  height: 6.2rem !important;
  filter: drop-shadow(0 0.75rem 1.5rem rgba(35, 76, 240, 0.18));
  animation: heroLogoFloat 6s ease-in-out infinite;
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.375rem); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-welcome-hero__logo { animation: none; }
}


/* ----- KPI card: glassy surface, bigger numbers, layered shadow ----- */
.ds-kpi-card {
  border-radius: 1.25rem;
  padding: var(--space-6);
  border-color: rgba(7, 8, 10, 0.05);
  background:
    linear-gradient(180deg, var(--color-white-50) 0%, rgba(246, 247, 249, 0.6) 100%);
  box-shadow:
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.04),
    0 0.25rem 0.625rem -0.125rem rgba(7, 8, 10, 0.02);
  gap: var(--space-5);
  isolation: isolate;
}
.ds-kpi-card::after {
  /* Bigger, more diffused accent — modern gradient blob */
  inset-inline-end: -3rem;
  top: -3rem;
  width: 11rem;
  height: 11rem;
  opacity: 0.7;
  filter: blur(0.5rem);
}
.ds-kpi-card:hover {
  transform: translateY(-0.25rem);
  border-color: rgba(35, 76, 240, 0.15);
  box-shadow:
    0 1.25rem 2rem -0.5rem rgba(7, 8, 10, 0.08),
    0 0.375rem 0.75rem -0.25rem rgba(35, 76, 240, 0.06);
}
.ds-kpi-card__icon {
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 0.875rem;
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.6),
              0 0.375rem 0.75rem -0.25rem rgba(35, 76, 240, 0.18);
}
.ds-kpi-card__icon svg {
  width: 1.375rem !important;
  height: 1.375rem !important;
}
.ds-kpi-card__value {
  font-size: 2.875rem;
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, var(--color-blackHaze-950) 0%, var(--color-blackHaze-700) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ds-kpi-card__label {
  font-size: 0.6875rem;
  font-family: var(--font-activist-bold);
  letter-spacing: 0.1em;
}
.ds-kpi-card__sub {
  font-size: 0.8125rem;
}
.ds-kpi-card__badge {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  box-shadow: inset 0 0 0 0.0625rem rgba(0, 220, 171, 0.2);
}

/* Tonal variants — icon glow matches variant */
.ds-kpi-card--info .ds-kpi-card__icon {
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.6),
              0 0.375rem 0.75rem -0.25rem rgba(11, 166, 223, 0.25);
}
.ds-kpi-card--success .ds-kpi-card__icon {
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.6),
              0 0.375rem 0.75rem -0.25rem rgba(0, 220, 171, 0.25);
}
.ds-kpi-card--warning .ds-kpi-card__icon {
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.6),
              0 0.375rem 0.75rem -0.25rem rgba(249, 155, 7, 0.25);
}
.ds-kpi-card--purple .ds-kpi-card__icon {
  box-shadow: inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.6),
              0 0.375rem 0.75rem -0.25rem rgba(231, 27, 149, 0.22);
}


/* ----- Status card: modernised + slight depth ----- */
.ds-status-card {
  border-radius: 1.25rem;
  border-color: rgba(7, 8, 10, 0.05);
  padding: var(--space-6) var(--space-7);
  box-shadow:
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.03),
    0 0.5rem 1.25rem -0.5rem rgba(7, 8, 10, 0.03);
}
.ds-status-card__title {
  font-size: var(--type-ar-22);
  letter-spacing: -0.015em;
}
.ds-status-card__total-value {
  font-size: 1.75rem;
  letter-spacing: -0.02em;
}

/* Bar: taller, segments rounded individually for a "pill chain" look */
.ds-status-bar {
  height: 0.875rem;
  background-color: rgba(7, 8, 10, 0.04);
  gap: 0.125rem;
  padding: 0.125rem;
  box-shadow: inset 0 0.0625rem 0.125rem rgba(7, 8, 10, 0.03);
  border-radius: 999px;
  margin-block-end: var(--space-5);
}
.ds-status-bar__seg {
  border-radius: 999px;
  box-shadow:
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.4),
    0 0.0625rem 0.125rem rgba(7, 8, 10, 0.06);
  animation: barSegmentIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) both;
}
@keyframes barSegmentIn {
  from { transform: scaleX(0); transform-origin: inline-start; }
  to   { transform: scaleX(1); }
}
.ds-status-bar__seg + .ds-status-bar__seg { box-shadow:
    inset 0 0.0625rem 0 rgba(255, 255, 255, 0.4),
    0 0.0625rem 0.125rem rgba(7, 8, 10, 0.06); }

.ds-status-legend__item {
  padding: var(--space-3);
  border-radius: 0.75rem;
  background-color: rgba(246, 247, 249, 0.5);
  border: var(--stroke-1) solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.ds-status-legend__item:hover {
  background-color: var(--color-white-50);
  border-color: var(--border-divider);
}
.ds-status-legend__dot {
  width: 0.75rem;
  height: 0.75rem;
  box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, 0.8),
              0 0.125rem 0.25rem rgba(7, 8, 10, 0.15);
}
.ds-status-legend__value {
  font-size: var(--type-ar-18);
  letter-spacing: -0.01em;
}


/* ----- Quick actions: glassy + tinted hover ----- */
.ds-quick-actions {
  border-radius: 1.25rem;
  border-color: rgba(7, 8, 10, 0.05);
  background:
    linear-gradient(180deg, var(--color-white-50) 0%, rgba(246, 247, 249, 0.5) 100%);
  padding: var(--space-7);
  box-shadow:
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.03),
    0 0.5rem 1.25rem -0.5rem rgba(7, 8, 10, 0.03);
}
.ds-quick-action {
  border-radius: 0.875rem;
  background-color: rgba(246, 247, 249, 0.6);
  padding: var(--space-4) var(--space-5);
  gap: var(--space-4);
  border-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ds-quick-action:hover {
  background-color: var(--color-blue-50);
  border-color: rgba(35, 76, 240, 0.15);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.75rem 1.25rem -0.5rem rgba(35, 76, 240, 0.15);
}
.ds-quick-action__icon {
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 0.75rem;
  background:
    linear-gradient(135deg, var(--color-white-50) 0%, var(--color-blue-50) 100%);
  border-color: rgba(35, 76, 240, 0.1);
  box-shadow: 0 0.25rem 0.5rem -0.125rem rgba(35, 76, 240, 0.12);
}
.ds-quick-action__icon svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
}
.ds-quick-action__title { font-size: 0.9375rem; }
.ds-quick-action__sub   { font-size: 0.75rem; }


/* ----- Section row spacing tightening ----- */
.ds-section-row__title {
  font-size: var(--type-ar-22);
  letter-spacing: -0.015em;
}


/* ----- Sidebar logo: slight breathing animation when hovered ----- */
.ds-sidebar__brand:hover .ds-sidebar__brand-logo {
  filter: drop-shadow(0 0.25rem 0.5rem rgba(35, 76, 240, 0.18));
  transform: scale(1.05);
}
.ds-sidebar__brand-logo {
  transition: transform 0.2s ease, filter 0.2s ease;
}


/* ----- Topbar: subtle glass tint when sidebar is open behind ----- */
.ds-topbar {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(0.625rem) saturate(1.2);
  -webkit-backdrop-filter: blur(0.625rem) saturate(1.2);
}


/* ----- Reduce-motion safety ----- */
@media (prefers-reduced-motion: reduce) {
  .ds-status-bar__seg,
  .ds-kpi-card,
  .ds-quick-action,
  .ds-stat-card,
  .ds-sidebar__brand-logo { animation: none !important; transition: none !important; }
}


/* ============================================================================
   MODERN FIELD UPLIFT — match login-page (FE) field anatomy
   ============================================================================
   FE Reference: src/components/ui/field/EmailField.tsx
   The panel already uses the same ring+card+row+label+message anatomy.
   This block tightens spacing, modernises radii, adds focus glow, polishes
   selects, dresses up checkboxes, and adds missing success/warning/info
   tints — so panel forms look identical to the doctor-facing app.

   Strict additive — all rules ride on top of design-system.css's .ds-field*
   primitives. Deleting this block reverts to the round-2 look.
   ============================================================================ */

/* ----- Outer wrapper: tighter gap (matches EmailField gap-2 visually) ----- */
.ds-field {
  gap: 0.5rem !important;          /* same vertical rhythm as FE */
  margin-block-end: 0;             /* form grid owns the spacing now */
}

/* ----- Label: bolder weight + subtle letter-spacing ----- */
.ds-field__label {
  font-family: var(--font-activist-bold);
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
  color: var(--field-default-label);
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Optional-badge style for the asterisk-less marker — kept the
   .ds-field__required asterisk too; both render fine side by side. */
.ds-field__required {
  display: inline-block;
  color: var(--feedback-error-text);
  font-family: var(--font-activist-bold);
  margin-inline-start: 0.125rem;
  font-size: 0.875em;
  vertical-align: middle;
}

/* ----- Ring: smoother transition + focus glow ----- */
.ds-field__ring {
  padding: var(--space-0_5);
  border-radius: 0.875rem;
  border-width: var(--stroke-1_5);
  border-style: solid;
  border-color: transparent;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ds-field__ring:focus-within {
  border-color: var(--field-focused-border);
  box-shadow: 0 0 0 0.1875rem rgba(35, 76, 240, 0.08);
}

/* ----- Card: bigger radius, subtle interior shadow ----- */
.ds-field__card {
  padding: 0.875rem var(--space-4);
  border-radius: 0.75rem;
  background-color: var(--field-default-bg);
  transition: background-color 0.15s ease, border-radius 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ds-field__ring:focus-within .ds-field__card { border-radius: 0.625rem; }

/* ----- Row layout matches EmailField (icon + input + status) ----- */
.ds-field__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: text;
}
.ds-field__row > svg,
.ds-field__row > .ds-field__leading-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--field-default-icon);
}
.ds-field__leading-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Status slot (success tick, error ×, etc.) — sits at the end of the row */
.ds-field__status {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-field__status svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ----- Input: cleaner placeholder dim + caret colour ----- */
.ds-field__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  font-family: var(--font-activist-regular);
  font-size: 0.9375rem;             /* slightly smaller than 16 to feel modern */
  line-height: 1.4;
  color: var(--field-default-value);
  caret-color: var(--field-focused-cursor);
}
.ds-field__input::placeholder {
  color: var(--field-default-placeholder);
  opacity: 0.55;
}

/* ----- Native select: better chevron + spacing ----- */
.ds-field__input--select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--field-default-icon) 50%),
    linear-gradient(135deg, var(--field-default-icon) 50%, transparent 50%);
  background-position:
    right 0.875rem center,
    right 0.5625rem center;
  background-size:
    0.3125rem 0.3125rem,
    0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  padding-inline-end: 1.75rem;
  cursor: pointer;
  font-family: var(--font-activist-regular);
}
[dir="rtl"] .ds-field__input--select {
  background-position:
    left 0.875rem center,
    left 0.5625rem center;
  padding-inline-end: 0;
  padding-inline-start: 1.75rem;
}


/* ============================================================================
   NATIVE FORM POLISH — 2026-05-12 round 6
   ============================================================================
   Several templates render raw <input type="checkbox">, <input type="radio">,
   bare <select>, and wrapping <label> structures that DON'T go through the
   ds_field / ds_checkbox macros (mostly permission pickers, speciality
   assignment lists, and inline filters). This block styles them uniformly
   without requiring template refactors.

   Strategy:
     - Scope everything to /panel/* via `#main-content`, so the marketing /
       doctor-facing UIs (which we don't ship in the panel anyway) are not
       affected by accident.
     - Match only elements that haven't already been styled by an explicit
       .ds-* class — using :not() to bow out where the macro already wins.
   ============================================================================ */

/* Limit the cascade to admin-panel pages (every panel page is rendered inside
   #main-content from base.html when `user` is set). Public pages like
   /panel/login don't have #main-content, but they use ds_field/ds_button
   exclusively, so they're already covered by the earlier rules. */
#main-content {

  /* ----- Checkboxes & Radios (raw or wrapped in <label>) ----- */
  input[type="checkbox"]:not(.ds-checkbox__input),
  input[type="radio"]:not(.ds-checkbox__input) {
    appearance: none;
    -webkit-appearance: none;
    width: 1.0625rem;
    height: 1.0625rem;
    margin: 0;
    border: 0.09375rem solid var(--color-blackHaze-300);
    background-color: var(--color-white-50);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease;
    position: relative;
  }
  input[type="checkbox"]:not(.ds-checkbox__input) { border-radius: 0.25rem; }
  input[type="radio"]:not(.ds-checkbox__input)    { border-radius: 999px; }

  input[type="checkbox"]:not(.ds-checkbox__input):hover,
  input[type="radio"]:not(.ds-checkbox__input):hover {
    border-color: var(--brand-primary);
  }

  input[type="checkbox"]:not(.ds-checkbox__input):focus-visible,
  input[type="radio"]:not(.ds-checkbox__input):focus-visible {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.1875rem rgba(35, 76, 240, 0.16);
  }

  /* Checked state — brand blue fill + white tick (drawn as SVG mask) */
  input[type="checkbox"]:not(.ds-checkbox__input):checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6.2L4.7 8.4L9.5 3.6' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: 0.75rem 0.75rem;
    background-position: center;
    background-repeat: no-repeat;
  }

  input[type="radio"]:not(.ds-checkbox__input):checked {
    border-color: var(--brand-primary);
    background-color: var(--color-white-50);
    background-image: radial-gradient(
      circle,
      var(--brand-primary) 0,
      var(--brand-primary) 0.21875rem,
      transparent 0.25rem,
      transparent 100%
    );
  }

  input[type="checkbox"]:not(.ds-checkbox__input):disabled,
  input[type="radio"]:not(.ds-checkbox__input):disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-blackHaze-100);
  }

  /* ----- Label that wraps a raw checkbox + text (the most common pattern
     in the panel: speciality list, permissions card grid, "is_active" toggles)
     The original template typically writes:
       <label style="display:flex;align-items:center;gap:var(--space-2);">
         <input type="checkbox" name="x">
         <span>Label text</span>
       </label>
     We polish this without changing the template. ----- */
  label:has(> input[type="checkbox"]:not(.ds-checkbox__input)),
  label:has(> input[type="radio"]:not(.ds-checkbox__input)) {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  label:has(> input[type="checkbox"]:not(.ds-checkbox__input)) span,
  label:has(> input[type="radio"]:not(.ds-checkbox__input)) span {
    font-family: var(--font-activist-semibold);
    font-size: 0.875rem;
    color: var(--text-onCard-primary);
    line-height: 1.4;
  }

  /* ----- Scrollable lists of checkboxes (admins/specialities.html,
     admins/new.html). The wrapper is typically:
       <div style="...max-height: 16rem; overflow-y: auto;">
         <label>...</label> × N
       </div>
     Detect it heuristically and add nice scrollbar + row hover. ----- */
  div[style*="overflow-y: auto"]:has(> label > input[type="checkbox"]) {
    background-color: var(--color-blackHaze-50);
    border-color: var(--border-divider) !important;
    border-radius: 0.625rem !important;
    padding: 0.5rem !important;
    gap: 0.125rem !important;
    scrollbar-width: thin;
    scrollbar-color: var(--color-blackHaze-300) transparent;
  }
  div[style*="overflow-y: auto"]:has(> label > input[type="checkbox"])::-webkit-scrollbar {
    width: 0.375rem;
  }
  div[style*="overflow-y: auto"]:has(> label > input[type="checkbox"])::-webkit-scrollbar-thumb {
    background: var(--color-blackHaze-300);
    border-radius: 999px;
  }
  div[style*="overflow-y: auto"]:has(> label > input[type="checkbox"]) > label {
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
  }
  div[style*="overflow-y: auto"]:has(> label > input[type="checkbox"]) > label:hover {
    background-color: var(--color-white-50);
  }

  /* ----- Cards-of-checkboxes (roles/form.html permissions picker). Each
     label is a card with an internal grid: checkbox + (title + description).
     We add a "selected" visual by styling the label when its checkbox is
     checked using :has(). ----- */
  label[for^="perm_"],
  label:has(> input[type="checkbox"][name="permissions[]"]) {
    background-color: var(--bg-card) !important;
    border-color: var(--border-divider) !important;
    border-radius: 0.625rem !important;
    padding: 0.875rem !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  label[for^="perm_"]:hover,
  label:has(> input[type="checkbox"][name="permissions[]"]):hover {
    border-color: var(--color-blue-200) !important;
    background-color: rgba(239, 244, 255, 0.4) !important;
  }
  label[for^="perm_"]:has(input:checked),
  label:has(> input[type="checkbox"][name="permissions[]"]:checked) {
    background-color: var(--color-blue-50) !important;
    border-color: var(--color-blue-200) !important;
    box-shadow: inset 0 0 0 0.0625rem var(--color-blue-200);
  }

  /* ----- Standalone <label> for "Active" toggles (specialities/form.html
     line 90 — checkbox + label inline). Make it look like a chip. ----- */
  form > label:has(> input[type="checkbox"]:not([name="permissions[]"]):not([name="speciality_ids[]"])):not([class]) {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem !important;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-blackHaze-50);
    border: var(--stroke-1) solid var(--border-divider);
    border-radius: 0.625rem;
  }
  form > label:has(> input[type="checkbox"]:not([name="permissions[]"]):not([name="speciality_ids[]"]):checked):not([class]) {
    background-color: var(--color-blue-50);
    border-color: var(--color-blue-200);
  }


  /* ----- Bare <select> inside .ds-field (doctors/list.html filter, etc.)
     The template hand-rolls the field structure without the card layer.
     Make the select feel like a proper input. ----- */
  .ds-field > .ds-field__row > select.ds-field__input--select {
    width: 100%;
    padding: 1rem;
    background-color: var(--field-default-bg);
    border-radius: 0.25rem;
    color: var(--field-default-value);
    font-family: var(--font-activist-regular);
    font-size: 1rem;
    border: 0.09375rem solid transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .ds-field > .ds-field__row > select.ds-field__input--select:focus-visible {
    outline: none;
    border-color: var(--field-focused-border);
  }


  /* ----- Native <textarea> raw (not via ds_textarea) — rare, but polish ----- */
  textarea:not(.ds-field__input) {
    width: 100%;
    padding: 0.875rem 1rem;
    background-color: var(--field-default-bg);
    border: 0.09375rem solid transparent;
    border-radius: 0.5rem;
    font-family: var(--font-activist-regular);
    font-size: 0.9375rem;
    color: var(--field-default-value);
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s ease;
  }
  textarea:not(.ds-field__input):focus-visible {
    outline: none;
    border-color: var(--field-focused-border);
  }


  /* ----- Raw <button> tags that aren't using .ds-btn — most are component
     buttons (modal close, flash dismiss, sidebar toggle) which we've
     already styled. Make any STRAY raw button at least non-jarring.
     We DON'T impose `.ds-btn` look — too aggressive — but we clean
     defaults so they don't show the OS chrome. ----- */
  button:not([class*="ds-btn"]):not([class*="ds-topbar"]):not([class*="ds-user-menu"]):not([class*="ds-side-link"]):not([class*="ds-alert"]):not([data-flash-dismiss]):not([data-modal-close]) {
    font-family: var(--font-activist-semibold);
    cursor: pointer;
  }
}


/* ============================================================================
   FORM ACTIONS ROW POLISH — when a template ends with a flex row of
   primary + secondary buttons (very common: "Save | Cancel"), add a
   subtle top divider so the actions feel like a footer.
   ============================================================================ */
form > div:last-child:has(> .ds-btn + .ds-btn) {
  padding-block-start: 1.25rem;
  border-block-start: var(--stroke-1) solid var(--border-divider);
  margin-block-start: 0.5rem;
}


/* ============================================================================
   FOCUS RING — universal for keyboard accessibility on .ds-* elements
   that don't already have one
   ============================================================================ */
.ds-side-link:focus-visible,
.ds-user-menu__trigger:focus-visible,
.ds-topbar__icon-btn:focus-visible,
.ds-topbar__lang:focus-visible,
.ds-quick-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.1875rem rgba(35, 76, 240, 0.2);
}


/* ============================================================================
   WORLD-CLASS POLISH — 2026-05-12 round 7
   ============================================================================
   Lifts buttons and fields beyond the FE base design toward the
   Stripe/Linear/Vercel aesthetic:

     • Larger radius for a softer, premium feel (8-10px)
     • Layered shadows with brand-tinted glow
     • Subtle gradient on filled primaries
     • Inner shadow on input cards for depth
     • Smooth, choreographed state transitions
     • Refined typography (tighter tracking, better weight)

   Overrides specific properties from the earlier "FE EXACT PARITY" block.
   Earlier structural decisions (ring+card anatomy, token colors) stay.
   ============================================================================ */


/* ============================================================================
   FIELDS — premium feel
   ============================================================================ */

/* Outer wrapper — slightly more breathing room between label and ring */
.ds-field {
  gap: 0.5rem !important;
}

/* Label — refined typography */
.ds-field__label {
  font-family: var(--font-activist-semibold) !important;
  font-size: 0.8125rem !important;        /* 13px — quieter so the value can lead */
  letter-spacing: -0.005em !important;
  color: var(--color-blackHaze-700) !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  margin-block-end: 0.125rem;
}

/* Ring — bigger radius, no border in idle (cleaner) */
.ds-field__ring {
  padding: 0 !important;                  /* no inset padding — single layer feel */
  border-radius: 0.75rem !important;      /* 12px — premium */
  border-width: 0.0625rem !important;     /* 1px hairline, just for hover state */
  border-style: solid !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover on the field — subtle tint of the ring */
.ds-field:not(.ds-field--disabled):not(.ds-field--readonly):hover .ds-field__ring {
  border-color: var(--color-blackHaze-200);
}

/* Focus — brand-blue glow ring (3-stop, very soft) */
.ds-field__ring:focus-within {
  border-color: var(--brand-primary) !important;
  box-shadow:
    0 0 0 0.25rem rgba(35, 76, 240, 0.08),
    0 0.5rem 1.25rem -0.25rem rgba(35, 76, 240, 0.12) !important;
}

/* Card — depth via inner shadow + same radius as ring */
.ds-field__card {
  padding: 0.875rem 1rem !important;      /* 14px vertical, 16px horizontal */
  border-radius: 0.75rem !important;      /* same as ring — single-layer look */
  background-color: var(--color-white-50) !important;
  border: 0.0625rem solid var(--color-blackHaze-200);
  display: flex !important;
  flex-direction: column;
  gap: 0.625rem;
  box-shadow:
    inset 0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.02);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}
/* On focus the card border becomes transparent (the ring takes over) */
.ds-field__ring:focus-within .ds-field__card {
  border-color: transparent !important;
  background-color: var(--color-white-50) !important;
  box-shadow: inset 0 0.0625rem 0.125rem 0 rgba(35, 76, 240, 0.05);
  border-radius: 0.75rem !important;
}

/* Row — generous icon gap */
.ds-field__row {
  gap: 0.625rem !important;
  align-items: center;
}

/* Input — bigger, more confident */
.ds-field__input {
  font-family: var(--font-activist-regular) !important;
  font-size: 0.9375rem !important;        /* 15px — readable but compact */
  line-height: 1.45 !important;
  color: var(--text-onCard-primary) !important;
  caret-color: var(--brand-primary);
  letter-spacing: -0.005em;
}
.ds-field__input::placeholder {
  color: var(--color-blackHaze-400) !important;
  opacity: 1 !important;
  font-family: var(--font-activist-regular);
}

/* Icons */
.ds-field__row > svg,
.ds-field__row > .ds-field__leading-icon {
  width: 1.125rem !important;             /* 18px — refined */
  height: 1.125rem !important;
  color: var(--color-blackHaze-500);
  transition: color 0.2s ease;
}
.ds-field__ring:focus-within .ds-field__leading-icon,
.ds-field__ring:focus-within > * > svg {
  color: var(--brand-primary);            /* leading icon tints on focus */
}
.ds-field__leading-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Status slot */
.ds-field__status {
  width: 1.125rem !important;
  height: 1.125rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* States — refined */
.ds-field--error .ds-field__ring {
  border-color: var(--color-radicalRed-500) !important;
  box-shadow:
    0 0 0 0.25rem rgba(255, 44, 100, 0.08) !important;
}
.ds-field--error .ds-field__card {
  border-color: transparent !important;
  background-color: var(--color-radicalRed-50) !important;
}
.ds-field--warning .ds-field__ring {
  border-color: var(--color-brightSun-500) !important;
  box-shadow:
    0 0 0 0.25rem rgba(249, 155, 7, 0.10) !important;
}
.ds-field--warning .ds-field__card {
  border-color: transparent !important;
  background-color: var(--color-brightSun-50) !important;
}
.ds-field--success .ds-field__card {
  border-color: var(--color-green-200) !important;
  background-color: var(--color-green-50) !important;
}
.ds-field--readonly .ds-field__card {
  background-color: var(--color-blackHaze-50) !important;
  border-color: var(--color-blackHaze-100) !important;
}
.ds-field--disabled {
  opacity: 0.6 !important;
}
.ds-field--disabled .ds-field__card {
  background-color: var(--color-blackHaze-50) !important;
  cursor: not-allowed;
}

/* Field message — tighter, refined */
.ds-field__message {
  font-family: var(--font-activist-regular) !important;
  font-size: 0.8125rem !important;
  line-height: 1.4 !important;
  color: var(--color-blackHaze-500);
  margin-block-start: 0.0625rem;
  display: flex !important;
  align-items: flex-start;
  gap: 0.5rem;
}


/* ============================================================================
   BUTTONS — premium feel
   ============================================================================ */

/* Outer ring — used for focus-visible only (otherwise transparent) */
.ds-btn {
  display: inline-flex !important;
  padding: 0 !important;                  /* no outer padding in idle */
  margin: 0;
  border-radius: 0.625rem !important;     /* 10px — slightly larger than inner */
  border-width: 0.125rem !important;
  border-style: solid;
  border-color: transparent !important;
  background: transparent !important;
  cursor: pointer;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition:
    border-color 0.2s ease,
    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ds-btn:focus-visible {
  outline: none;
  border-color: rgba(35, 76, 240, 0.25) !important;
  border-radius: 0.625rem !important;
}

/* Cancel earlier translateY rules */
.ds-btn:hover:not(:disabled):not([aria-disabled="true"]),
.ds-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: none !important;
}

/* Inner pill — the real button */
.ds-btn__inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: auto;
  border-radius: 0.5rem !important;       /* 8px — modern, not sharp, not pill */
  border-width: 0;
  border-style: solid;
  font-family: var(--font-activist-semibold) !important;
  font-size: 0.875rem !important;
  line-height: 1.4;
  letter-spacing: -0.005em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.2s ease !important;
}

/* Inner pill on focus — no radius change (stays at 8px) */
.ds-btn:focus-visible .ds-btn__inner {
  border-radius: 0.5rem !important;
}

/* Sizes — refined padding scale */
.ds-btn--large  .ds-btn__inner { padding: 0.75rem 1.5rem !important;  font-size: 0.9375rem !important; min-height: 2.875rem; }
.ds-btn--medium .ds-btn__inner { padding: 0.5625rem 1.125rem !important; font-size: 0.875rem !important; min-height: 2.375rem; }
.ds-btn--small  .ds-btn__inner { padding: 0.4375rem 0.875rem !important; font-size: 0.8125rem !important; min-height: 2rem; }

/* Full-width helper */
.ds-btn--full-width { width: 100%; }
.ds-btn--full-width .ds-btn__inner { width: 100%; }

/* ---- Primary ---- */
/* Subtle gradient (top→bottom: 5% lighter to base) for premium feel,
   plus a layered shadow stack with brand tint. */
.ds-btn--primary .ds-btn__inner {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand-primary) 88%, white) 0%,
      var(--brand-primary) 100%) !important;
  color: var(--color-white-50) !important;
  box-shadow:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.15),
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.08),
    0 0.375rem 0.75rem -0.125rem rgba(35, 76, 240, 0.25),
    0 0.125rem 0.375rem -0.0625rem rgba(35, 76, 240, 0.18) !important;
}
.ds-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) .ds-btn__inner {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-blue-500) 92%, white) 0%,
      var(--color-blue-500) 100%) !important;
  box-shadow:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.2),
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.08),
    0 0.625rem 1.25rem -0.125rem rgba(35, 76, 240, 0.35),
    0 0.25rem 0.5rem -0.0625rem rgba(35, 76, 240, 0.22) !important;
}
.ds-btn--primary:active:not(:disabled):not([aria-disabled="true"]) .ds-btn__inner {
  background:
    linear-gradient(180deg,
      var(--color-blue-700) 0%,
      var(--color-blue-800) 100%) !important;
  box-shadow:
    inset 0 0.0625rem 0.25rem 0 rgba(0, 0, 0, 0.15),
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.08) !important;
}
.ds-btn--primary:disabled .ds-btn__inner,
.ds-btn--primary[aria-disabled="true"] .ds-btn__inner {
  background: var(--color-blue-300) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* ---- Secondary (outlined) ---- */
.ds-btn--secondary .ds-btn__inner {
  background: var(--color-white-50) !important;
  color: var(--brand-primary) !important;
  box-shadow:
    inset 0 0 0 0.0625rem var(--color-blackHaze-200),
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.04) !important;
}
.ds-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) .ds-btn__inner {
  background: var(--color-blue-50) !important;
  color: var(--color-blue-700) !important;
  box-shadow:
    inset 0 0 0 0.0625rem var(--color-blue-300),
    0 0.0625rem 0.125rem 0 rgba(35, 76, 240, 0.06) !important;
}
.ds-btn--secondary:active:not(:disabled):not([aria-disabled="true"]) .ds-btn__inner {
  background: var(--color-blue-100) !important;
  color: var(--color-blue-800) !important;
}
.ds-btn--secondary:disabled .ds-btn__inner,
.ds-btn--secondary[aria-disabled="true"] .ds-btn__inner {
  color: var(--color-blackHaze-400) !important;
  background: var(--color-blackHaze-50) !important;
  box-shadow: inset 0 0 0 0.0625rem var(--color-blackHaze-200) !important;
}

/* ---- Tertiary (ghost) ---- */
.ds-btn--tertiary .ds-btn__inner {
  background: transparent !important;
  color: var(--brand-primary) !important;
  box-shadow: none !important;
}
.ds-btn--tertiary:hover:not(:disabled):not([aria-disabled="true"]) .ds-btn__inner {
  background: var(--color-blue-50) !important;
  color: var(--color-blue-700) !important;
}
.ds-btn--tertiary:active:not(:disabled):not([aria-disabled="true"]) .ds-btn__inner {
  background: var(--color-blue-100) !important;
  color: var(--color-blue-800) !important;
}

/* ---- Danger ---- */
.ds-btn--danger .ds-btn__inner {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-pink-600) 88%, white) 0%,
      var(--color-pink-600) 100%) !important;
  color: var(--color-pink-50) !important;
  box-shadow:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.15),
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.08),
    0 0.375rem 0.75rem -0.125rem rgba(231, 27, 149, 0.28),
    0 0.125rem 0.375rem -0.0625rem rgba(231, 27, 149, 0.18) !important;
}
.ds-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) .ds-btn__inner {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-pink-500) 92%, white) 0%,
      var(--color-pink-500) 100%) !important;
  box-shadow:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.2),
    0 0.625rem 1.25rem -0.125rem rgba(231, 27, 149, 0.36),
    0 0.25rem 0.5rem -0.0625rem rgba(231, 27, 149, 0.24) !important;
}

/* ---- Success ---- */
.ds-btn--success .ds-btn__inner {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-green-600) 88%, white) 0%,
      var(--color-green-600) 100%) !important;
  color: var(--color-green-50) !important;
  box-shadow:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.18),
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.06),
    0 0.375rem 0.75rem -0.125rem rgba(0, 220, 171, 0.25) !important;
}
.ds-btn--success:hover:not(:disabled):not([aria-disabled="true"]) .ds-btn__inner {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-green-500) 92%, white) 0%,
      var(--color-green-500) 100%) !important;
  box-shadow:
    inset 0 0.0625rem 0 0 rgba(255, 255, 255, 0.22),
    0 0.625rem 1.25rem -0.125rem rgba(0, 220, 171, 0.36) !important;
}

/* ---- Warning (yellow outline) ---- */
.ds-btn--warning .ds-btn__inner {
  background: var(--color-brightSun-50) !important;
  color: var(--color-brightSun-950) !important;
  box-shadow: inset 0 0 0 0.0625rem var(--color-brightSun-500) !important;
}
.ds-btn--warning:hover:not(:disabled):not([aria-disabled="true"]) .ds-btn__inner {
  background: var(--color-brightSun-100) !important;
}


/* ---- Icon-only buttons (no label) ---- */
/* Detect button with .ds-btn__inner containing only an icon (no <span>) */
.ds-btn__inner > svg:only-child,
.ds-btn__inner > [class*="ds-icon"]:only-child {
  margin: 0;
}


/* ============================================================================
   FORM-LEVEL TYPOGRAPHY POLISH
   ============================================================================ */
form .ds-field + .ds-field {
  margin-block-start: 0;                  /* gap already handled by ds_card layout */
}


/* ============================================================================
   SHIMMER on primary button hover (very subtle highlight sweep)
   ============================================================================ */
.ds-btn--primary .ds-btn__inner::before,
.ds-btn--danger .ds-btn__inner::before,
.ds-btn--success .ds-btn__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ds-btn--primary:hover:not(:disabled) .ds-btn__inner::before,
.ds-btn--danger:hover:not(:disabled) .ds-btn__inner::before,
.ds-btn--success:hover:not(:disabled) .ds-btn__inner::before {
  left: 100%;
}
.ds-btn__inner > * { position: relative; z-index: 1; }

/* Reduce motion safety */
@media (prefers-reduced-motion: reduce) {
  .ds-btn__inner::before { display: none !important; }
  .ds-btn,
  .ds-btn__inner,
  .ds-field__ring,
  .ds-field__card { transition: none !important; }
}

/* ----- Success state: green tick visible inline ----- */
.ds-field--success .ds-field__card { background-color: var(--field-success-bg); }
.ds-field--success .ds-field__input { color: var(--field-success-value); }
.ds-field--success .ds-field__status { color: var(--field-success-status-icon); }

/* ----- Warning state: brightsun border + tint ----- */
.ds-field--warning .ds-field__ring  { border-color: var(--field-warning-border); }
.ds-field--warning .ds-field__card  { background-color: var(--field-warning-bg); }
.ds-field--warning .ds-field__label { color: var(--field-warning-label); }
.ds-field--warning .ds-field__input { color: var(--field-warning-value); }
.ds-field--warning .ds-field__status { color: var(--field-warning-icon); }

/* ----- Info state: subtle cerulean accent on the icon only ----- */
.ds-field--info .ds-field__status { color: var(--feedback-info-icon); }

/* ----- Error state: refined border glow ----- */
.ds-field--error .ds-field__ring {
  border-color: var(--field-error-border);
  box-shadow: 0 0 0 0.1875rem rgba(255, 44, 100, 0.08);
}
.ds-field--error .ds-field__status { color: var(--field-error-status-icon); }

/* ----- Field message: nicer spacing + tabular numerics ----- */
.ds-field__message {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-activist-regular);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-placeholder);
  margin: 0;
}
.ds-field__message > svg {
  flex-shrink: 0;
  width: 0.9375rem;
  height: 0.9375rem;
}
.ds-field__message--error   { color: var(--feedback-error-message); }
.ds-field__message--warning { color: var(--feedback-warning-message); }
.ds-field__message--success { color: var(--feedback-success-message); }
.ds-field__message--info    { color: var(--feedback-info-message); }


/* ============================================================================
   CHECKBOX UPLIFT — softer card + tinted background on hover
   ============================================================================ */
.ds-checkbox {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 0.625rem !important;
  cursor: pointer;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  border: var(--stroke-1) solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  min-width: 0;
}
.ds-checkbox:hover:not(.ds-checkbox--disabled) {
  background-color: var(--color-blackHaze-50);
  border-color: var(--border-divider);
}
.ds-checkbox__input {
  width: 1.0625rem !important;
  height: 1.0625rem !important;
  margin-top: 0.125rem;
  accent-color: var(--brand-primary);
  flex-shrink: 0;
  cursor: inherit;
}
.ds-checkbox__label-text {
  font-family: var(--font-activist-semibold);
  font-size: 0.875rem;
  color: var(--text-onCard-primary);
  line-height: 1.3;
}
.ds-checkbox__help {
  font-size: 0.75rem;
  color: var(--text-placeholder);
  line-height: 1.4;
  margin-block-start: 0.125rem;
}


/* ============================================================================
   FORM CONTAINER — give forms a polished surface when they sit alone
   ============================================================================ */
.ds-form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
.ds-form-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.125rem;
}
@media (min-width: 48rem) { .ds-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  padding-block-start: 0.875rem;
  margin-block-start: 0.625rem;
  border-block-start: var(--stroke-1) solid var(--border-divider);
  flex-wrap: wrap;
}
[dir="rtl"] .ds-form-actions { justify-content: flex-start; }
.ds-form-actions--center { justify-content: center; }
.ds-form-actions--split  { justify-content: space-between; }


/* ============================================================================
   LOGIN-PAGE PARITY — public auth pages get an even softer card
   ============================================================================ */
main > .ds-card {
  /* When ds-card is the lone content of the public layout (no sidebar),
     give it the same drop-shadow stack as the FE login card. */
  border-radius: 1.25rem !important;
  box-shadow:
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.06),
    0 1.25rem 2.5rem 0 rgba(7, 8, 10, 0.08) !important;
  border: var(--stroke-1) solid rgba(7, 8, 10, 0.04);
}


/* ============================================================================
   MODERN TABLE UPLIFT — 2026-05-12 round 4
   ============================================================================
   The panel ships many list pages (admins, doctors, roles, specialities,
   universities, registration-forms, security blocklists, reference data,
   audit log, …) — each rendered through the same `ds_table_*` macros that
   produce `.ds-table-wrap` / `.ds-table thead/tbody`. Lifting these
   selectors once lifts every list at once.

   This block rides on top of design-system.css's `.ds-table` primitives.
   Deleting it reverts to round-3 styling.
   ============================================================================ */

/* ----- Wrapper: card-like frame with soft layered shadow ----- */
.ds-table-wrap {
  background-color: var(--bg-card);
  border-radius: 1.125rem !important;
  border: var(--stroke-1) solid rgba(7, 8, 10, 0.05);
  box-shadow:
    0 0.0625rem 0.125rem 0 rgba(7, 8, 10, 0.03),
    0 0.5rem 1.25rem -0.5rem rgba(7, 8, 10, 0.03);
  overflow: hidden;  /* clip the corners on inner table */
  position: relative;
}

/* Inner scroll preserved on narrow screens — wrapper's overflow-x stays */
.ds-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar inside the wrap (when table overflows) */
.ds-table-wrap::-webkit-scrollbar { height: 0.5rem; }
.ds-table-wrap::-webkit-scrollbar-track { background: transparent; }
.ds-table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-blackHaze-200);
  border-radius: 999px;
}
.ds-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--color-blackHaze-300); }

/* ----- Table itself ----- */
.ds-table {
  width: 100%;
  border-collapse: separate;     /* allow per-cell border-radius later */
  border-spacing: 0;
  font-family: var(--font-activist-regular);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* ----- Header: stronger typography, subtle bg ----- */
.ds-table thead th {
  padding: 0.875rem 1.125rem !important;
  text-align: start;
  font-family: var(--font-activist-bold) !important;
  font-size: 0.6875rem !important;
  color: var(--text-placeholder) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em;
  background-color: rgba(246, 247, 249, 0.6);
  border-block-end: var(--stroke-1) solid var(--border-divider);
  white-space: nowrap;
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* First/last cells of the header don't need full corner rounding because
   the wrapper clips, but we soften their inner edges with extra padding. */
.ds-table thead th:first-child { padding-inline-start: 1.5rem !important; }
.ds-table thead th:last-child  { padding-inline-end: 1.5rem !important; text-align: end; }

/* ----- Body rows: subtle zebra + hover state with accent rail ----- */
.ds-table tbody td {
  padding: 1rem 1.125rem !important;
  color: var(--text-onCard-primary) !important;
  border-block-end: var(--stroke-1) solid rgba(7, 8, 10, 0.04) !important;
  vertical-align: middle !important;
  font-family: var(--font-activist-regular);
  font-size: 0.875rem;
  line-height: 1.4;
  /* Templates often set inline `style` on <td> with padding — these !important
     overrides win without us touching the templates. */
}
.ds-table tbody td:first-child { padding-inline-start: 1.5rem !important; }
.ds-table tbody td:last-child  { padding-inline-end: 1.5rem !important; text-align: end; }

.ds-table tbody tr {
  transition: background-color 0.15s ease;
  position: relative;
}
.ds-table tbody tr:nth-child(even) td {
  background-color: rgba(246, 247, 249, 0.35);
}
.ds-table tbody tr:hover td {
  background-color: var(--color-blue-50);
}
.ds-table tbody tr:last-child td { border-block-end: var(--value-none) !important; }

/* Active-row accent rail — animates in on hover */
.ds-table tbody tr td:first-child {
  position: relative;
}
.ds-table tbody tr td:first-child::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 0.1875rem;
  background-color: var(--brand-primary);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}
.ds-table tbody tr:hover td:first-child::before {
  transform: scaleY(1);
}

/* Cell variants */
.ds-table__cell--secondary {
  color: var(--text-onCard-secondary) !important;
  opacity: 0.75;
  font-size: 0.8125rem;
}
.ds-table__cell--primary {
  color: var(--text-onCard-primary) !important;
  font-family: var(--font-activist-semibold) !important;
}

/* Numeric / date columns — right-align would conflict with RTL, so use
   tabular-nums and slightly muted color. The template can opt-in by adding
   inline class but most don't bother. */
.ds-table td[data-numeric],
.ds-table td.is-numeric { font-variant-numeric: tabular-nums; }


/* ----- Empty state: bigger, friendlier ----- */
.ds-table__empty {
  padding: 3rem 1.5rem !important;
  text-align: center;
  color: var(--text-placeholder);
  font-family: var(--font-activist-regular);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.ds-table__empty::before {
  /* Subtle illustrative dot grid above the message */
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--color-blackHaze-200) 0.125rem, transparent 0.1875rem),
    radial-gradient(circle at 70% 30%, var(--color-blackHaze-200) 0.125rem, transparent 0.1875rem),
    radial-gradient(circle at 50% 70%, var(--color-blackHaze-200) 0.125rem, transparent 0.1875rem),
    var(--color-blackHaze-50);
  background-size: 100% 100%;
}


/* ============================================================================
   BADGE UPLIFT — for status pills inside table cells
   ============================================================================ */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-family: var(--font-activist-bold);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: var(--stroke-1) solid transparent;
  text-transform: uppercase;
}
.ds-badge::before {
  /* Tiny status dot */
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background-color: currentColor;
  opacity: 0.75;
  flex-shrink: 0;
}

/* Variants — re-tint via background + border */
.ds-badge--success,
.ds-badge[data-variant="success"] {
  background-color: var(--feedback-success-bg);
  color: var(--feedback-success-message);
  border-color: rgba(0, 220, 171, 0.2);
}
.ds-badge--warning,
.ds-badge[data-variant="warning"] {
  background-color: var(--feedback-warning-bg);
  color: var(--feedback-warning-message);
  border-color: rgba(249, 155, 7, 0.2);
}
.ds-badge--error,
.ds-badge[data-variant="error"] {
  background-color: var(--feedback-error-bg);
  color: var(--feedback-error-message);
  border-color: rgba(255, 44, 100, 0.2);
}
.ds-badge--info,
.ds-badge[data-variant="info"] {
  background-color: var(--feedback-info-bg);
  color: var(--feedback-info-message);
  border-color: rgba(11, 166, 223, 0.2);
}
.ds-badge--neutral,
.ds-badge[data-variant="neutral"] {
  background-color: var(--color-blackHaze-100);
  color: var(--color-blackHaze-700);
  border-color: var(--color-blackHaze-200);
}


/* ============================================================================
   TABLE ACTION BUTTONS (last cell) — make the "Edit" button look like a
   discreet icon button rather than a primary CTA
   ============================================================================ */
.ds-table tbody td:last-child .ds-btn--tertiary .ds-btn__inner {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.8125rem;
  background-color: var(--color-blackHaze-50);
  border-radius: 0.5rem;
  border: var(--stroke-1) solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ds-table tbody tr:hover .ds-btn--tertiary .ds-btn__inner {
  background-color: var(--color-white-50);
  border-color: var(--color-blue-200);
  color: var(--brand-primary);
}


/* ============================================================================
   PAGE HEADER — table page heading polish (when followed by ds-table-wrap)
   ============================================================================ */
.ds-page-header {
  margin-block-end: 1.5rem !important;
}
.ds-page-header__title {
  font-family: var(--font-activist-bold) !important;
  font-size: 1.75rem !important;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--color-blackHaze-1000) 0%, var(--color-blackHaze-700) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ds-page-header__crumb-current { font-size: 0.75rem; }
.ds-page-header__crumbs { font-size: 0.75rem; }


/* ============================================================================
   PAGINATION POLISH — applies when components/pagination.html is included
   ============================================================================ */
nav[aria-label*="agination" i],
.pagination,
[class*="pagination"] {
  margin-block-start: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

/* Generic anchor that LOOKS like a pagination item — the panel renders them
   as plain <a> tags styled inline. We tighten with a class-agnostic selector
   on the surrounding nav. */
nav[aria-label*="agination" i] a,
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: 0.625rem;
  border-radius: 0.5rem;
  background-color: var(--bg-card);
  color: var(--text-onCard-primary);
  font-family: var(--font-activist-semibold);
  font-size: 0.8125rem;
  text-decoration: none;
  border: var(--stroke-1) solid var(--border-divider);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
nav[aria-label*="agination" i] a:hover,
.pagination a:hover {
  background-color: var(--color-blue-50);
  color: var(--brand-primary);
  border-color: var(--color-blue-200);
}
nav[aria-label*="agination" i] a[aria-current],
.pagination a[aria-current],
nav[aria-label*="agination" i] .active,
.pagination .active {
  background-color: var(--brand-primary);
  color: var(--color-white-50);
  border-color: var(--brand-primary);
}


/* ============================================================================
   SEARCH / FILTER BAR (when a list page wraps controls in .ds-toolbar)
   ============================================================================ */
.ds-toolbar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 1.125rem;
  background-color: rgba(246, 247, 249, 0.5);
  border-block-end: var(--stroke-1) solid var(--border-divider);
  flex-wrap: wrap;
}
.ds-toolbar__search {
  flex: 1 1 18rem;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background-color: var(--bg-card);
  border: var(--stroke-1) solid var(--border-divider);
  border-radius: 0.625rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-toolbar__search:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.1875rem rgba(35, 76, 240, 0.08);
}
.ds-toolbar__search input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-activist-regular);
  font-size: 0.875rem;
  color: var(--text-input);
  min-width: 0;
}
.ds-toolbar__search svg {
  width: 1rem;
  height: 1rem;
  color: var(--text-placeholder);
  flex-shrink: 0;
}


/* ============================================================================
   COUNTER PILL — shows " 24 records " etc. next to the title
   ============================================================================ */
.ds-counter-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  background-color: var(--color-blackHaze-100);
  color: var(--color-blackHaze-700);
  border-radius: 999px;
  font-family: var(--font-activist-bold);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  margin-inline-start: 0.5rem;
  font-variant-numeric: tabular-nums;
}


/* ============================================================================
   REDUCE-MOTION SAFETY for new animated rules
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .ds-table tbody tr td:first-child::before {
    transition: none !important;
    transform: scaleY(1) !important;
    background-color: transparent !important;
  }
}


/* ============================================================================
   FE EXACT PARITY — buttons + fields  (2026-05-12 round 5)
   ============================================================================
   Aligns ds-btn and ds-field 1:1 with the login-page React components:
     • Button.tsx  src/components/ui/button/Button.tsx
     • EmailField.tsx + Input.tsx  src/components/ui/field/

   Both pieces in the panel already use the FE two-layer "ring + card"
   anatomy and the same interactive tokens. This block re-tunes the few
   measurements (padding, radius, hover micro-motion) that the earlier
   uplift rounds nudged away from the canonical FE values. Replaces those
   earlier overrides for the matching selectors.
   ============================================================================ */


/* ----- Button: remove the panel-only translateY micro-lift -----
   FE Button has no Y-axis motion on hover/active — only the shadow
   halo grows/shrinks. The translateY in design-system.css was a
   panel-only addition; we cancel it so motion matches the FE.
   The shadow stack already animates via design-system.css. */
.ds-btn:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: none !important;
}
.ds-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: none !important;
}

/* Ensure the visible bg-change pulse runs even when reduced-motion is on
   for users — we cap it to 200ms there. */
.ds-btn__inner {
  transition:
    background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    border-radius 0.2s ease !important;
}

/* Outer ring matches FE radius geometry exactly: radius-8 (8px) default,
   drops to radius-4 (4px) on focus. (Already done in design-system.css —
   re-stated here in case earlier rounds touched it.) */
.ds-btn {
  border-radius: 0.5rem !important;       /* radius-8 = 8px */
  padding: 0.125rem !important;           /* space-0_5 = 2px */
  border-width: 0.09375rem !important;    /* stroke-1_5 = 1.5px */
}
.ds-btn:focus-visible {
  border-radius: 0.25rem !important;      /* radius-4 = 4px */
}

/* Inner pill: radius-4 default, radius-2 on focus. Matches FE exactly. */
.ds-btn__inner {
  border-radius: 0.25rem !important;      /* radius-4 = 4px */
}
.ds-btn:focus-visible .ds-btn__inner {
  border-radius: 0.125rem !important;     /* radius-2 = 2px */
}


/* ----- Field: revert to FE's exact radius/padding scale -----
   FE EmailField uses:
     ring  : padding space-0_5 (2px), radius-4 (4px), 1.5px border
     card  : padding space-4 (16px), radius-4 default / radius-2 on focus
     label : type-ar-14 (14px), font-activist-semibold
   Earlier "Modern Field Uplift" radii were larger (0.875rem ring,
   0.75rem card). This block restores the FE measurements.
*/

.ds-field {
  gap: 0.5rem !important;                 /* space-2 = 8px between layers */
}

.ds-field__label {
  font-family: var(--font-activist-semibold) !important;
  font-size: 0.875rem !important;         /* type-ar-14 */
  letter-spacing: 0 !important;
  color: var(--field-default-label) !important;
  line-height: var(--line-default);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ds-field__ring {
  padding: 0.125rem !important;           /* space-0_5 = 2px */
  border-radius: 0.25rem !important;      /* radius-4 = 4px */
  border-width: 0.09375rem !important;    /* stroke-1_5 = 1.5px */
  border-style: solid !important;
  border-color: transparent !important;
  background: transparent !important;
  transition: border-color 0.15s ease !important;
  /* No box-shadow on focus — FE doesn't use one. The colored border is
     enough; an extra glow ring conflicts with the embedded login card. */
  box-shadow: none !important;
}

.ds-field__ring:focus-within {
  border-color: var(--field-focused-border) !important;
  box-shadow: none !important;
}

.ds-field__card {
  padding: 1rem !important;               /* space-4 = 16px all sides */
  border-radius: 0.25rem !important;      /* radius-4 = 4px */
  background-color: var(--field-default-bg) !important;
  display: flex;
  flex-direction: column;
  gap: 1rem;                              /* space-4 between label + row */
  transition:
    background-color 0.15s ease,
    border-radius 0.15s ease !important;
}
.ds-field__ring:focus-within .ds-field__card {
  border-radius: 0.125rem !important;     /* radius-2 = 2px on focus */
}

/* Row: icon + input + status — same as FE EmailField inner row */
.ds-field__row {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;                 /* space-2 = 8px */
  cursor: text;
}

/* Input baseline matches FE: type-ar-16 (16px), font-activist-regular */
.ds-field__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  font-family: var(--font-activist-regular) !important;
  font-size: 1rem !important;             /* type-ar-16 = 16px (FE default) */
  line-height: var(--line-default) !important;
  color: var(--field-default-value);
  caret-color: var(--field-focused-cursor);
}
.ds-field__input::placeholder {
  color: var(--field-default-placeholder);
  opacity: 0.6;
}

/* Leading icon (FieldIcon equivalent) — 20px square in the card row.
   FE Input uses 24px; sticking to 20px keeps the card height tight while
   matching the existing ds_icon convention. Override if a template asks
   for size=24. */
.ds-field__row > svg,
.ds-field__row > .ds-field__leading-icon {
  flex-shrink: 0;
  width: 1.25rem;                          /* icon-size-20 */
  height: 1.25rem;
  color: var(--field-default-icon);
}
.ds-field__leading-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Status slot (✓ on success, × on error/clear) — same 20px box */
.ds-field__status {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-field__status svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Error / Warning / Success / Info — FE state colours.
   Border, bg, label and value colours all come from --field-{state}-*
   tokens defined in design-system.css. We just ensure the border-color
   on the ring picks them up. */
.ds-field--error .ds-field__ring  { border-color: var(--field-error-border)  !important; box-shadow: none !important; }
.ds-field--warning .ds-field__ring { border-color: var(--field-warning-border) !important; box-shadow: none !important; }
.ds-field--error .ds-field__card  { background-color: var(--field-error-bg)  !important; }
.ds-field--warning .ds-field__card { background-color: var(--field-warning-bg) !important; }
.ds-field--success .ds-field__card { background-color: var(--field-success-bg) !important; }
.ds-field--error .ds-field__input  { color: var(--field-error-value)   !important; }
.ds-field--warning .ds-field__input { color: var(--field-warning-value) !important; }
.ds-field--success .ds-field__input { color: var(--field-success-value) !important; }
.ds-field--error .ds-field__label   { color: var(--field-error-label)   !important; }
.ds-field--warning .ds-field__label { color: var(--field-warning-label) !important; }

.ds-field--error .ds-field__status   { color: var(--field-error-status-icon)   !important; }
.ds-field--warning .ds-field__status { color: var(--field-warning-icon)        !important; }
.ds-field--success .ds-field__status { color: var(--field-success-status-icon) !important; }
.ds-field--info .ds-field__status    { color: var(--feedback-info-icon)        !important; }

/* Readonly + disabled */
.ds-field--readonly .ds-field__card  { background-color: var(--field-readonly-bg) !important; }
.ds-field--readonly .ds-field__input { color: var(--field-readonly-value) !important; cursor: default; }
.ds-field--disabled                  { opacity: var(--opacity-60); }
.ds-field--disabled .ds-field__card  { background-color: var(--field-disabled-bg) !important; cursor: not-allowed; }
.ds-field--disabled .ds-field__input { color: var(--field-disabled-value) !important; cursor: not-allowed; }


/* ----- Field message: FE FieldMessage typography ----- */
.ds-field__message {
  display: flex !important;
  align-items: center;
  gap: 0.5rem !important;                  /* space-2 */
  font-family: var(--font-activist-regular) !important;
  font-size: 0.875rem !important;          /* type-ar-14 */
  line-height: var(--line-default) !important;
  color: var(--text-placeholder);
  margin: 0;
}
.ds-field__message--error   { color: var(--feedback-error-message)   !important; }
.ds-field__message--warning { color: var(--feedback-warning-message) !important; }
.ds-field__message--success { color: var(--feedback-success-message) !important; }
.ds-field__message--info    { color: var(--feedback-info-message)    !important; }


/* ----- Native <select> rendered through ds_select — keep the same
   geometry, but use a single chevron rendered via background gradients
   so it tints with the field color. (FE uses a custom SVG; we keep this
   approach for zero-asset compatibility.) ----- */
.ds-field__input--select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right 0.875rem center,
    right 0.5625rem center;
  background-size:
    0.3125rem 0.3125rem,
    0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  padding-inline-end: 1.75rem;
  cursor: pointer;
  color: var(--field-default-value);
  font-family: var(--font-activist-regular);
}
[dir="rtl"] .ds-field__input--select {
  background-position:
    left 0.875rem center,
    left 0.5625rem center;
  padding-inline-end: 0;
  padding-inline-start: 1.75rem;
}