/**
 * Mada Admin — design tokens layered on top of Gin 5.
 *
 * Palette from the Mada implementation doc, section 10. We override Gin's
 * accent, typography, surfaces, radii and shadows, then add a light polish
 * pass on the components that carry the "feel" (buttons, tables, cards,
 * form controls, the top bar). Structure and layout stay Gin's.
 */

:root {
  /* Brand */
  --mada-teal: #1C8577;
  --mada-teal-deep: #0E5D53;
  --mada-teal-bright: #23A08D;
  --mada-teal-wash: #E4F1EE;
  --mada-ink: #0F2A31;
  --mada-slate: #5B6B70;
  --mada-line: #DDE5E4;
  --mada-paper: #F6F8F8;
  --mada-signal-warn: #B67A1E;
  --mada-signal-crit: #AF4630;

  /* ---- Gin: typography ---------------------------------------------- */
  --gin-font: "Readex Pro", "Ginter", "IBM Plex Sans Arabic", "Segoe UI",
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gin-font-weight-normal: 400;
  --gin-font-weight-semibold: 550;
  --gin-font-weight-bold: 650;
  --gin-font-weight-heavy: 700;

  /* ---- Gin: accent ------------------------------------------------- */
  --gin-color-primary: var(--mada-teal);
  --gin-color-primary-hover: var(--mada-teal-deep);
  --gin-color-primary-active: var(--mada-teal-deep);
  --gin-color-primary-light: var(--mada-teal-wash);
  --gin-color-primary-light-hover: #D6E9E5;
  --gin-color-primary-light-active: #C9E2DD;
  --gin-color-primary-rgb: 28, 133, 119;
  --gin-color-primary-light-rgb: 228, 241, 238;
  --gin-color-focus: rgba(28, 133, 119, 0.5);
  --gin-color-focus-border: var(--mada-teal);

  /* Gin 3 fallbacks, harmless on Gin 5 */
  --colorGinPrimary: var(--mada-teal);
  --colorGinPrimaryHover: var(--mada-teal-deep);
  --colorGinPrimaryActive: var(--mada-teal-deep);
  --colorGinPrimaryRGB: 28, 133, 119;
  --colorGinPrimaryLight: var(--mada-teal-wash);

  /* ---- Gin: surfaces & text -------------------------------------- */
  --gin-bg-app: #EEF3F2;
  --gin-bg-app-rgb: 238, 243, 242;
  --gin-bg-layer: #FFFFFF;
  --gin-bg-layer2: var(--mada-paper);
  --gin-bg-layer3: #EEF2F2;
  --gin-bg-item-hover: var(--mada-teal-wash);
  --gin-color-title: var(--mada-ink);
  --gin-color-text: #22343A;
  --gin-color-text-light: var(--mada-slate);
  --gin-icon-color: var(--mada-slate);

  /* ---- Gin: borders & radii ------------------------------------- */
  --gin-border-color: var(--mada-line);
  --gin-border-color-layer: #E6ECEB;
  --gin-border-color-layer2: #EDF1F1;
  --gin-border-color-table: #E6ECEB;
  --gin-border-color-table-header: #D3DEDC;
  --gin-border-color-form-element: #C4D2D0;
  --gin-border-xxs: 4px;
  --gin-border-xs: 6px;
  --gin-border-s: 8px;
  --gin-border-m: 10px;
  --gin-border-l: 14px;
  --gin-border-xl: 20px;

  /* ---- Gin: shadows -------------------------------------------- */
  --gin-shadow-l1: 0 1px 2px rgba(15, 42, 49, 0.06), 0 1px 3px rgba(15, 42, 49, 0.05);
  --gin-shadow-l2: 0 6px 16px -4px rgba(15, 42, 49, 0.12), 0 2px 6px rgba(15, 42, 49, 0.06);
  --gin-shadow-button: 0 1px 2px rgba(15, 42, 49, 0.08);
  --gin-shadow-primary-light: 0 1px 2px rgba(28, 133, 119, 0.25);
}

/* Dark mode is disabled in gin.settings, but keep it coherent if enabled. */
.gin--dark-mode,
.gin--dark-mode:root {
  --gin-color-primary: var(--mada-teal-bright);
  --gin-color-primary-hover: #3FBFAB;
  --gin-color-primary-active: #3FBFAB;
  --gin-color-primary-light: #133029;
  --colorGinPrimary: var(--mada-teal-bright);
  --colorGinPrimaryHover: #3FBFAB;
  --colorGinPrimaryActive: #3FBFAB;
}

/* ------------------------------------------------------------------ *
 * Component polish
 * ------------------------------------------------------------------ */

/* Arabic reads better without Latin letter-spacing; keep digits tabular. */
html[lang="ar"],
[dir="rtl"] {
  font-feature-settings: "tnum" 0;
}

[dir="rtl"] .gin-secondary-toolbar__layout-container,
[dir="rtl"] .gin-breadcrumb__item,
[dir="rtl"] .toolbar-menu__item,
[dir="rtl"] th,
[dir="rtl"] .form-item__label {
  letter-spacing: 0;
}

/* Brand seam under the top bar. */
.gin-secondary-toolbar,
.gin-secondary-toolbar--frontend {
  box-shadow: inset 0 -2px 0 0 var(--mada-teal);
}

/* Primary actions: a touch more presence. */
.gin-layer-wrapper .button--primary,
.button--primary,
.action-link--primary {
  font-weight: var(--gin-font-weight-semibold);
  letter-spacing: 0.005em;
}

/* Buttons and inputs share one radius scale. */
.button,
.action-link,
.form-element,
.form-text,
.form-select {
  border-radius: var(--gin-border-s);
}

/* Data tables: quieter grid, clearer header, gentle row hover. */
.gin-table-scroll-wrapper table thead th,
table.responsive-enabled thead th,
.views-table thead th {
  font-weight: var(--gin-font-weight-semibold);
  color: var(--mada-ink);
  background: var(--mada-paper);
}

.views-table tbody tr:hover,
table.responsive-enabled tbody tr:hover,
.gin-table-scroll-wrapper table tbody tr:hover {
  background: var(--mada-teal-wash);
}

/* Panels / meta boxes / Gin "layers": consistent card treatment. */
.gin-layer,
.layout-region--node-secondary .entity-meta__header,
details.gin-layer,
.block--type-help,
.messages--status {
  border-radius: var(--gin-border-l);
}

/* Focus ring: unmistakably teal, never clipped. */
:where(a, button, .button, input, select, textarea, summary,
  .tabledrag-handle):focus-visible {
  outline: 2px solid var(--mada-teal);
  outline-offset: 2px;
  border-radius: var(--gin-border-xs);
}

/* Active primary tab / local task. */
.tabs__tab.is-active .tabs__link,
.gin-tabs .tabs__link.is-active {
  color: var(--mada-teal-deep);
  box-shadow: inset 0 -3px 0 0 var(--mada-teal);
}

/* Status / signal colours aligned to the Mada palette. */
.messages--warning {
  --gin-color-warning: var(--mada-signal-warn);
}

.messages--error {
  --gin-color-danger: var(--mada-signal-crit);
}

/* ---------------------------------------------------------------------------
 * Gin's entity-form meta sidebar (#default_admin_sidebar).
 *
 * Gin renders this region for every entity form. When the form has nothing to
 * put in it — the user form is the common case — the region still paints:
 * position:fixed, ~360px wide, full viewport height, solid white, z-index 103.
 * The result is a blank panel floating over the page that the user cannot
 * dismiss, because it has no controls at all.
 *
 * Hide it unless it actually holds something. `:has()` is supported by every
 * browser that runs Drupal 11's admin UI; the second rule is the belt-and-
 * braces fallback so the region can never paint a full-height white slab.
 * ------------------------------------------------------------------------- */
.layout-region--secondary:not(:has(.form-item, .js-form-item, details, .vertical-tabs__menu, input, select, textarea)) {
  display: none !important;
}

.layout-region--secondary {
  background: transparent;
  height: auto;
  max-height: 100vh;
}