/* GENERATED by scripts/css-tokens/build-global-css.mjs — do not edit.
   Edit _entry.css, theme.css, tokens/ or components/ and re-run
   `npm run css:bundle`. This file is bundled rather than @import-ing so
   that the content hash in its filename covers every stylesheet. */

/* Theme variables */
/* ---- theme.css ---- */
/* ==========================================================================
   ADCA theme entry point.

   The token layers come first in dependency order: primitives hold raw brand
   values, semantic names the roles built from them, components the decisions a
   component makes. Screens use the semantic and component layers; primitives
   are for the token files only.

   The imports must precede every other statement, font faces included, or the
   browser drops them and the whole token layer silently resolves to nothing.
   ========================================================================== */
/* ---- tokens/_primitives.css ---- */
/* ==========================================================================
   PRIMITIVES — raw brand values. No roles, no component names.
   Abu Dhabi Customs, 2026 branding.

   Colours are stored as space-separated channels, not hex, so a colour and
   the opacity it is used at stay separate: rgb(var(--adca-ghaf-light-rgb) / 15%).
   The styleguide is explicit that transparent surfaces must not be flattened
   into a hex value — one source colour feeds several surfaces, and flattening
   both hides that relationship and renders wrongly over a non-white backdrop.

   Nothing outside the token layer should reference this file. Screens use the
   semantic roles in _semantic.css.
   ========================================================================== */

:root {
    /* ---- Ghaf: the primary interface family ------------------------------ */
    --adca-ghaf-dark-rgb: 61 71 66; /* #3D4742  headings, body text */
    --adca-ghaf-warm-rgb: 91 109 103; /* #5B6D67  muted text, brand */
    --adca-ghaf-light-rgb: 162 180 172; /* #A2B4AC  surfaces, table headers */
    --adca-ghaf-green-rgb: 86 122 100; /* #567A64  links */
    --adca-ghaf-deep-rgb: 44 85 71; /* #2C5547  banner gradient, leading stop */
    --adca-ghaf-mint-rgb: 144 183 155; /* #90B79B  banner gradient, trailing stop */
    --adca-ghaf-teal-rgb: 43 208 204; /* #2BD0CC  "teal reverse" banner, trailing stop */
    --adca-ghaf-hero-start-rgb: 91 109 103; /* #5B6D67  dashboard hero base gradient, leading stop */
    --adca-ghaf-hero-end-rgb: 61 77 73; /* #3D4D49  dashboard hero base gradient, trailing stop */

    --adca-ink-rgb: 47 54 52; /* #2F3634  borders, at low opacity */
    --adca-subtext-rgb: 74 88 83; /* #4A5853  metadata, card labels */
    --adca-line-rgb: 227 232 230; /* #E3E8E6  table and row separators */
    --adca-white-rgb: 255 255 255;

    /* Kept as plain colours because their role depends on the call site:
       white is a card fill in 221 places and white text in 81, and mist is a
       background in 35 and a border in 22. Phase 5 assigns each use a
       semantic role; until then they stay honest primitives. */
    --adca-color-white: rgb(var(--adca-white-rgb));
    --adca-color-neutral-200: #c7d1cd;

    /* ---- Feature card families ------------------------------------------- */
    --adca-tamar-rgb: 191 147 67; /* #BF9343 */
    --adca-henna-rgb: 198 89 70; /* #C65946 */
    --adca-bukhoor-rgb: 109 76 172; /* #6D4CAC */

    /* "Selected" indicator accent. Not one of the four feature-card
       families; it appears twice in the Figma export (the active view-toggle
       button, the current-page pagination button) with the same meaning both
       times, so it is treated as its own semantic role rather than folded
       into an existing one. */
    --adca-selected-rgb: 0 121 131; /* #007983 */
    --adca-mangrove-rgb: 0 155 138; /* #009B8A */

    /* ---- Status sources --------------------------------------------------
       Each status is a background colour used at an opacity, plus a solid
       text colour. They are not two shades of one ramp. */
    --adca-success-rgb: 0 218 170; /* #00DAAA at 20% */
    --adca-success-text: #00ab8c;
    --adca-pending-rgb: 255 235 128; /* #FFEB80 at 50% */
    --adca-pending-text: #8b7334;
    --adca-error-rgb: 255 164 149; /* #FFA495 at 30% */
    --adca-error-text: #944639;
    --adca-info-rgb: 0 119 165; /* #0077A5 at 20% */
    --adca-info-text: #0077a5;
    --adca-neutral-status-bg: #eee9e0;
    --adca-neutral-status-text: #78705f;

    /* Destructive actions. Same colour as the High badge text. */
    --adca-danger: #944639;

    /* ---- Disabled form controls ------------------------------------------ */
    --adca-disabled-fill: #e2e3e6;
    --adca-disabled-border-rgb: 199 209 205; /* #C7D1CD */

    /* ---- Gradients -------------------------------------------------------- */
    --adca-gradient-forest-rise: linear-gradient(135deg, #16201a 0%, #2c5547 100%);
    --adca-gradient-teal-flow: linear-gradient(135deg, #2bd0cc 0%, #2c5547 100%);
    --adca-gradient-mist-veil: linear-gradient(135deg, #90b79b 0%, #2c5547 100%);
    --adca-gradient-ghat-night: linear-gradient(135deg, #22332b 0%, #0e1512 100%);
    --adca-gradient-sidr-calm: linear-gradient(135deg, #5c766b 0%, #22332b 100%);
    --adca-gradient-dune-warm: linear-gradient(135deg, #c9bdb3 0%, #5c766b 100%);

    /* ---- Typography -------------------------------------------------------
       Segoe UI Variable, self-hosted as one variable file. 'Segoe UI' is the
       fallback for Windows machines that already have the family installed;
       system-ui covers everything else while the webfont loads.
       Arabic keeps Helvetica Neue LT until the Arabic brand file arrives. */
    --adca-font-family-base: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --adca-font-family-arabic: 'Segoe UI Variable', system-ui, sans-serif;

    --adca-font-size-display: 48px;
    --adca-font-size-page-title: 24px;
    --adca-font-size-section-heading: 20px;
    --adca-font-size-card-heading: 18px;
    --adca-font-size-body-lg: 16px;
    --adca-font-size-body: 14px;
    --adca-font-size-caption: 12px;
    /* Not in the brand scale. Retained because 23 call sites use it; the
       Phase 5 prune decides whether it survives. */
    --adca-font-size-caption-sm: 10px;

    --adca-line-height-display: 56px;
    --adca-line-height-page-title: 32px;
    --adca-line-height-section-heading: 28px;
    --adca-line-height-card-heading: 24px;
    --adca-line-height-body-lg: 24px;
    --adca-line-height-body: 20px;
    --adca-line-height-caption: 16px;

    --adca-font-weight-regular: 400;
    --adca-font-weight-semibold: 600;
    --adca-font-weight-bold: 700;

    /* ---- Spacing ----------------------------------------------------------
       The brand scale is 0/4/8/12/16/24. The larger steps are retained because
       the app uses them for layout gaps and for icon and control sizing; 45 of
       the 32px call sites are width or height. On the Phase 5 prune list. */
    --adca-space-0: 0px;
    --adca-space-4: 4px;
    --adca-space-8: 8px;
    --adca-space-12: 12px;
    --adca-space-16: 16px;
    --adca-space-20: 20px;
    --adca-space-24: 24px;
    --adca-space-32: 32px;
    --adca-space-40: 40px;
    --adca-space-48: 48px;
    --adca-space-56: 56px;
    --adca-space-64: 64px;

    /* ---- Shape ------------------------------------------------------------
       The brand states 8px. 4px and 12px are retained pending the prune. */
    --adca-radius-sm: 4px;
    --adca-radius-md: 8px;
    --adca-radius-lg: 12px;
    --adca-radius-pill: 9999px;

    /* ---- Elevation --------------------------------------------------------
       The styleguide does not specify elevation, so the existing levels are
       retained, folded from six to three. */
    --adca-shadow-none: none;
    --adca-shadow-xs: 0px 2px 2px -1px rgba(35, 41, 38, 0.08); /* matches the brand's shadow-xs spec */
    --adca-shadow-sm: 0px 1px 4px rgb(var(--adca-ink-rgb) / 8%); /* matches the brand's shadow-sm spec: 0 1px 4px, 8% */
    --adca-shadow-md: 0 2px 8px 0 rgb(var(--adca-ink-rgb) / 10%);
    --adca-shadow-lg: 0 10px 15px -3px rgb(var(--adca-ink-rgb) / 10%), 0 4px 6px -4px rgb(var(--adca-ink-rgb) / 10%);

    /* ---- Stacking and state ------------------------------------------------ */
    --adca-z-dropdown: 1000;
    --adca-z-popover: 1100;
    --adca-z-modal: 1300;
    /* The Select panel portals to <body>, so it is a sibling of any open
       modal rather than a child of it. It therefore has to clear the modal's
       own layer (adca-liwa raises --adca-z-modal to 100011) while staying
       under toasts at 100020. */
    --adca-z-select-dropdown: 100015;
    --adca-opacity-disabled: 0.5;
}

/* ---- tokens/_semantic.css ---- */
/* ==========================================================================
   SEMANTIC ROLES — what a colour is for, not what it is.
   This is the layer screens are allowed to use.

   Surfaces are composed here from a primitive channel triplet and an opacity,
   never from a flattened hex. Changing a brand colour is one edit in
   _primitives.css and every surface derived from it follows.
   ========================================================================== */

:root {
    /* ---- Text ------------------------------------------------------------ */
    --adca-sys-text-heading: rgb(var(--adca-ghaf-dark-rgb));
    --adca-sys-text-body: rgb(var(--adca-ghaf-dark-rgb));
    --adca-sys-text-muted: rgb(var(--adca-ghaf-warm-rgb));
    --adca-sys-text-subtext: rgb(var(--adca-subtext-rgb));
    --adca-sys-text-link: rgb(var(--adca-ghaf-green-rgb));
    --adca-sys-text-inverse: rgb(var(--adca-white-rgb));
    --adca-sys-text-disabled: rgb(var(--adca-ghaf-warm-rgb));

    /* ---- Surfaces ---------------------------------------------------------
       One source colour, four opacities. Shown over white. */
    --adca-sys-bg-card: rgb(var(--adca-white-rgb));
    --adca-sys-bg-page: rgb(var(--adca-ghaf-light-rgb) / 15%);
    --adca-sys-bg-card-light: rgb(var(--adca-ghaf-light-rgb) / 20%);
    --adca-sys-bg-lightest: rgb(var(--adca-ghaf-light-rgb) / 5%);
    --adca-sys-bg-kanban-card: rgb(var(--adca-ghaf-light-rgb) / 10%);
    --adca-sys-bg-nav-hover: rgb(var(--adca-ghaf-light-rgb) / 20%);
    --adca-sys-bg-avatar: rgb(var(--adca-ghaf-light-rgb) / 20%);
    --adca-sys-bg-overlay: rgb(var(--adca-ink-rgb) / 50%);
    --adca-sys-bg-disabled: rgb(var(--adca-ink-rgb) / 20%);
    /* Hovered row in a dropdown/kebab menu. Ink-based, so it reads as a
       deliberate selection against white — the ghaf-light surfaces above
       are too faint at this size to register as a hover. */
    --adca-sys-bg-menu-hover: rgb(var(--adca-ink-rgb) / 10%);

    /* ---- Borders ---------------------------------------------------------- */
    --adca-sys-border-default: rgb(var(--adca-ink-rgb) / 20%);
    --adca-sys-border-subtle: rgb(var(--adca-line-rgb));
    --adca-sys-border-focus: rgb(var(--adca-ink-rgb) / 60%);
    --adca-sys-border-disabled: rgb(var(--adca-disabled-border-rgb));

    /* ---- Brand ------------------------------------------------------------ */
    --adca-sys-brand: rgb(var(--adca-ghaf-warm-rgb));
    --adca-sys-brand-strong: rgb(var(--adca-ghaf-dark-rgb));
    --adca-sys-icon-brand: rgb(var(--adca-ghaf-warm-rgb));

    /* Selected / current state — distinct from the brand colour. Used for an
       active toggle and the current pagination page. */
    --adca-sys-selected: rgb(var(--adca-selected-rgb));

    /* ---- Status ------------------------------------------------------------
       Background and text are independent values, not one colour at two
       opacities. */
    --adca-sys-status-success-bg: rgb(var(--adca-success-rgb) / 20%);
    --adca-sys-status-success-text: var(--adca-success-text);
    --adca-sys-status-pending-bg: rgb(var(--adca-pending-rgb) / 50%);
    --adca-sys-status-pending-text: var(--adca-pending-text);
    --adca-sys-status-error-bg: rgb(var(--adca-error-rgb) / 30%);
    --adca-sys-status-error-text: var(--adca-error-text);
    --adca-sys-status-info-bg: rgb(var(--adca-info-rgb) / 20%);
    --adca-sys-status-info-text: var(--adca-info-text);
    --adca-sys-status-neutral-bg: var(--adca-neutral-status-bg);
    --adca-sys-status-neutral-text: var(--adca-neutral-status-text);

    /* Opaque fill for the nav notification badge dot. It is a small solid
       circle over the header's own background, not a translucent status
       pill, so it needs a flat colour: the translucent error background
       lets the header show through and the dot reads washed out. */
    --adca-sys-notification-badge-bg: #fee2e2;

    /* Date/time picker. The picker renders inside a third-party popover that
       sets its own text colour, so these roles exist to be overridden there
       rather than reusing the generic text roles directly. */
    --adca-sys-date-picker-text: var(--adca-sys-text-muted);
    --adca-sys-date-picker-selected-bg: var(--adca-sys-text-muted);
    --adca-sys-date-picker-disabled-text: rgb(var(--adca-ghaf-light-rgb));

    /* Toast success uses a stronger fill than the badge. */
    --adca-sys-notification-success-bg: rgb(var(--adca-success-rgb) / 30%);

    /* Opaque equivalents of the toast fills, mechanically derived from the same
       primitives via color-mix so they keep tracking the brand colours. A toast
       is a floating surface that can land over any backdrop -- Liferay's dark
       control menu, a modal overlay, a photo banner -- and a translucent fill
       composites with whatever is behind it, so the backdrop reads straight
       through the toast and the text loses contrast. Use these, never the
       translucent tokens, for the toast card itself. */
    --adca-sys-notification-success-bg-opaque: color-mix(in srgb, white 70%, rgb(var(--adca-success-rgb)) 30%);
    --adca-sys-notification-error-bg-opaque: color-mix(in srgb, white 70%, rgb(var(--adca-error-rgb)) 30%);

    /* ---- Destructive ------------------------------------------------------- */
    --adca-sys-danger: var(--adca-danger);
    --adca-sys-danger-hover: color-mix(in srgb, var(--adca-danger) 92%, black);

    /* ---- Feature cards ------------------------------------------------------
       Backgrounds at 20%; the value and label sit on them in heading colour. */
    --adca-sys-feature-mangrove-bg: rgb(var(--adca-mangrove-rgb) / 20%);
    --adca-sys-feature-tamar-bg: rgb(var(--adca-tamar-rgb) / 20%);
    --adca-sys-feature-henna-bg: rgb(var(--adca-henna-rgb) / 20%);
    --adca-sys-feature-bukhoor-bg: rgb(var(--adca-bukhoor-rgb) / 20%);
    --adca-sys-feature-icon-bg: rgb(var(--adca-white-rgb) / 50%);

    /* ---- Tables ------------------------------------------------------------- */
    --adca-sys-table-header-bg: rgb(var(--adca-ghaf-light-rgb) / 20%);

    /* Opaque equivalent of the header tint, mechanically derived from the
       same primitive via color-mix rather than hand-typed -- so it still
       tracks the brand colour if it ever changes. Needed because a
       translucent background painted on a `position: sticky` element
       composites against its paint layer differently from a plain cell
       showing the same colour through from its ancestor, even though both
       report an identical computed rgba() value: proven with a minimal
       repro, not assumed. Use this, never the translucent token, for any
       sticky cell that must match a translucent row visually. */
    --adca-sys-table-header-bg-opaque: color-mix(in srgb, white 80%, rgb(var(--adca-ghaf-light-rgb)) 20%);

    /* Opaque equivalent of --adca-sys-bg-lightest (5% tint), for surfaces that
       must fully occlude what's behind them -- a floating/portalled panel
       composited at 5% opacity barely tints the page, so content underneath
       still shows through it. */
    --adca-sys-bg-lightest-opaque: color-mix(in srgb, white 95%, rgb(var(--adca-ghaf-light-rgb)) 5%);
    --adca-sys-table-row-bg: rgb(var(--adca-white-rgb));
    --adca-sys-table-row-hover-bg: rgb(var(--adca-ghaf-warm-rgb) / 10%);
    --adca-sys-table-border: rgb(var(--adca-line-rgb));

    /* ---- Inputs --------------------------------------------------------------- */
    --adca-sys-input-border: rgb(var(--adca-ink-rgb) / 20%);
    --adca-sys-input-fill-disabled: var(--adca-disabled-fill);
    --adca-sys-input-text-readonly: rgb(var(--adca-ghaf-warm-rgb));

    /* ---- Gradients ------------------------------------------------------------ */
    --adca-sys-gradient-primary: var(--adca-gradient-sidr-calm);

    /* ---- Typography composed ---------------------------------------------------- */
    --adca-sys-font-family: var(--adca-font-family-base);

    /* ---- Elevation -------------------------------------------------------------- */
    --adca-sys-shadow-xs: var(--adca-shadow-xs);
    --adca-sys-shadow-card: var(--adca-shadow-md);
    --adca-sys-shadow-dropdown: var(--adca-shadow-md);
    --adca-sys-shadow-modal: var(--adca-shadow-lg);
    --adca-sys-shadow-popover: var(--adca-shadow-lg);

    /* ---- Layout and control metrics ------------------------------------------------
       Observed in the brand designs: 44px actions, 48px sidebar rows,
       24px horizontal padding. */
    --adca-sys-control-height: 44px;
    --adca-sys-nav-item-height: 48px;
    --adca-sys-control-padding-x: var(--adca-space-24);
    --adca-sys-max-content-width: 1920px;

    /* ---- Charts ----------------------------------------------------------------------
       Not specified by the brand; retained. */
    --adca-sys-chart-axis: rgb(var(--adca-ghaf-warm-rgb) / 60%);
    --adca-sys-chart-grid: rgb(var(--adca-line-rgb));

    --adca-sys-z-index-modal: var(--adca-z-modal);
}

/* ---- tokens/_components.css ---- */
/* ==========================================================================
   COMPONENT TOKENS — a component's own decisions, built from semantic roles.

   Interaction states are derived with color-mix rather than hand-picked.
   The brand export leaves the hover, pressed and focus columns empty for every
   button role, and the previous values were chosen against the old green, so
   keeping them would carry the old brand forward. Deriving them also means a
   future change to the brand colour does not need fourteen edits here.
   ========================================================================== */

:root {
    /* ---- Buttons ----------------------------------------------------------
       44px tall, 8px radius, 24px horizontal padding.

       The primary fill is the one value the brand export does not state: it
       records only "observed instance fill". The dark Ghaf reads correctly
       against the sample and is used until Phase 3 confirms it in Figma. */
    --adca-button-primary-bg: rgb(var(--adca-ghaf-dark-rgb));
    --adca-button-primary-text: var(--adca-sys-text-inverse);
    --adca-button-primary-bg-hover: color-mix(in srgb, var(--adca-button-primary-bg) 92%, white);
    --adca-button-primary-bg-pressed: color-mix(in srgb, var(--adca-button-primary-bg) 84%, black);
    --adca-button-primary-border-focus: rgb(var(--adca-ink-rgb) / 40%);
    --adca-button-primary-border-lighter: rgb(var(--adca-ink-rgb) / 20%);

    --adca-button-outline-bg: var(--adca-sys-bg-card);
    --adca-button-outline-text: var(--adca-sys-text-heading);
    --adca-button-outline-border: rgb(var(--adca-ghaf-dark-rgb));
    --adca-button-outline-bg-hover: var(--adca-sys-bg-lightest);
    --adca-button-outline-bg-pressed: var(--adca-sys-bg-card-light);
    --adca-button-outline-border-focus: rgb(var(--adca-ink-rgb) / 40%);
    --adca-button-outline-border-disabled: var(--adca-sys-border-disabled);

    --adca-button-danger-bg: var(--adca-sys-danger);
    --adca-button-danger-text: var(--adca-sys-text-inverse);
    --adca-button-danger-bg-hover: color-mix(in srgb, var(--adca-danger) 92%, black);
    --adca-button-danger-bg-pressed: color-mix(in srgb, var(--adca-danger) 84%, black);
    --adca-button-danger-border-focus: rgb(var(--adca-error-rgb) / 40%);

    /* Disabled is one pair for every role. */
    --adca-button-disabled-bg: rgb(var(--adca-ink-rgb) / 20%);
    --adca-button-disabled-text: rgb(var(--adca-ghaf-dark-rgb));
    --adca-button-disabled-border: rgb(var(--adca-ink-rgb) / 10%);

    --adca-button-padding-sm: var(--adca-space-8) var(--adca-space-16);
    --adca-button-padding-md: var(--adca-space-12) var(--adca-sys-control-padding-x);
    --adca-button-padding-lg: var(--adca-space-16) var(--adca-space-32);

    /* ---- Badges ------------------------------------------------------------ */
    --adca-badge-radius: var(--adca-radius-pill);
    --adca-badge-padding: var(--adca-space-4) var(--adca-space-12);
    --adca-badge-font-size: var(--adca-font-size-caption);

    /* ---- Cards -------------------------------------------------------------- */
    --adca-card-bg: var(--adca-sys-bg-card);
    --adca-card-border: var(--adca-sys-border-default);
    --adca-card-radius: var(--adca-radius-lg);
    --adca-card-padding: var(--adca-space-24);
    --adca-card-shadow: var(--adca-sys-shadow-card);

    /* ---- Modals -------------------------------------------------------------- */
    --adca-modal-overlay-bg: var(--adca-sys-bg-overlay);
    --adca-modal-bg: var(--adca-sys-bg-card);
    --adca-modal-radius: var(--adca-radius-lg);
    --adca-modal-padding: var(--adca-space-32);

    /* ---- Inputs ---------------------------------------------------------------- */
    --adca-input-height: var(--adca-sys-control-height);
    --adca-input-radius: var(--adca-radius-md);
    --adca-input-padding: var(--adca-space-12) var(--adca-space-16);

    /* ---- Avatar -------------------------------------------------------------- */
    --adca-avatar-bg: rgb(var(--adca-ghaf-green-rgb));
    --adca-avatar-text: var(--adca-sys-text-inverse);

    /* ---- Workspace banner ---------------------------------------------------- */
    /* The RTL variant mirrors the angle about the vertical axis (360 - 119.36)
       so the deep stop stays on the leading edge in both directions. */
    --adca-banner-gradient: linear-gradient(
        119.36deg,
        rgb(var(--adca-ghaf-deep-rgb)) 0%,
        rgb(var(--adca-ghaf-mint-rgb)) 100%
    );
    --adca-banner-gradient-rtl: linear-gradient(
        240.64deg,
        rgb(var(--adca-ghaf-deep-rgb)) 0%,
        rgb(var(--adca-ghaf-mint-rgb)) 100%
    );

    /* "gradient/teal reverse": same deep leading stop, teal trailing stop. */
    --adca-banner-gradient-teal: linear-gradient(
        119.36deg,
        rgb(var(--adca-ghaf-deep-rgb)) 0%,
        rgb(var(--adca-ghaf-teal-rgb)) 100%
    );
    --adca-banner-gradient-teal-rtl: linear-gradient(
        240.64deg,
        rgb(var(--adca-ghaf-deep-rgb)) 0%,
        rgb(var(--adca-ghaf-teal-rgb)) 100%
    );
}

/* Latin: one variable file covers the whole range. The wght axis is continuous
   300-700, so any weight in that span renders without a separate file, and the
   opsz axis lets the browser match the optical size to the rendered size,
   which is what this family is drawn for. */
@font-face {
    font-family: 'Segoe UI Variable';
    src: url('./fonts/SegoeUIVariable.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* Arabic stays on Helvetica Neue LT until the Arabic brand file arrives. */
@font-face {
    font-family: 'Helvetica Neue LT Arabic';
    src: url('./fonts/HelveticaNeueLTArabic-Light.woff2') format('woff2'),
        url('./fonts/HelveticaNeueLTArabic-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue LT Arabic';
    src: url('./fonts/HelveticaNeueLTArabic-Roman.woff2') format('woff2'),
        url('./fonts/HelveticaNeueLTArabic-Roman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue LT Arabic';
    src: url('./fonts/HelveticaNeueLTArabic-Bold.woff2') format('woff2'),
        url('./fonts/HelveticaNeueLTArabic-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Components */
/* ---- components/button.css ---- */
.adca-btn {
  position: relative;
  transition: all 0.2s ease-in-out;
  border-radius: var(--adca-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--adca-sys-font-family);
  cursor: pointer;
  border: 1px solid transparent;
  gap: var(--adca-space-8);
}

[dir="rtl"] .adca-btn {
  font-family: var(--adca-font-family-arabic);
}

.adca-btn:disabled,
.adca-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 1;
}

.adca-btn:focus-visible {
  outline: none;
}

.adca-btn__label {
  font-weight: var(--adca-font-weight-semibold);
  line-height: var(--adca-line-height-card-heading);
  font-size: var(--adca-font-size-body);
  letter-spacing: 0px;
}

/* Primary. Uses --adca-button-primary-bg (the dedicated button token, ghaf
   dark), not --adca-sys-brand (ghaf warm, a lighter shade meant for icons and
   muted text) -- the hover/pressed/disabled states right below already derive
   from button-primary-bg, so the base was the one state out of step with its
   own siblings. */
.adca-btn--primary {
  background-color: var(--adca-button-primary-bg) !important;
  border-color: var(--adca-button-primary-bg) !important;
  color: var(--adca-sys-text-inverse) !important;
}

.adca-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--adca-button-primary-bg-hover) !important;
  border-color: var(--adca-button-primary-bg-hover) !important;
}

.adca-btn--primary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--adca-button-primary-bg-pressed) !important;
  border-color: var(--adca-button-primary-bg-pressed) !important;
}

/* .adca-btn--primary:focus {
  border: 4px solid var(--adca-button-primary-border-focus) !important;
} */

.adca-btn--primary:disabled,
.adca-btn--primary[aria-disabled="true"] {
  background-color: var(--adca-button-disabled-bg) !important;
  border-color: var(--adca-button-disabled-bg) !important;
  color: var(--adca-button-disabled-text) !important;
}

/* Secondary / Outline */
.adca-btn--secondary,
.adca-btn--outline {
  background-color: var(--adca-color-white);
}

.adca-btn--secondary {
  color: var(--adca-sys-text-subtext);
  border-color: var(--adca-sys-brand);
}

.adca-btn--outline {
  color: var(--adca-button-outline-text);
  border-color: var(--adca-button-outline-border);
}

.adca-btn--secondary .adca-btn__label {
  font-size: var(--adca-font-size-body);
  line-height: var(--adca-line-height-card-heading);
}

.adca-btn--outline .adca-btn__label {
  font-size: var(--adca-font-size-caption);
  line-height: var(--adca-line-height-body);
}

.adca-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.adca-btn--outline:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--adca-button-outline-bg-pressed);
}

.adca-btn--secondary:focus,
.adca-btn--outline:focus {
  border: 2px solid var(--adca-button-outline-border-focus);
}

.adca-btn--secondary:disabled,
.adca-btn--secondary[aria-disabled="true"],
.adca-btn--outline:disabled,
.adca-btn--outline[aria-disabled="true"] {
  background-color: var(--adca-color-white);
  border-color: var(--adca-button-outline-border-disabled);
  color: var(--adca-button-disabled-text);
}

/* Ghost / Transparent */
.adca-btn--ghost,
.adca-btn--transparent {
  background-color: var(--adca-color-white);
  border-color: transparent;
  color: var(--adca-sys-text-subtext);
}

.adca-btn--ghost .adca-btn__label,
.adca-btn--transparent .adca-btn__label {
  font-size: var(--adca-font-size-body);
  line-height: var(--adca-line-height-card-heading);
}

.adca-btn--ghost:active:not(:disabled):not([aria-disabled="true"]),
.adca-btn--transparent:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--adca-button-outline-bg-pressed);
}

.adca-btn--ghost:focus,
.adca-btn--transparent:focus {
  border-color: var(--adca-sys-brand);
}

.adca-btn--ghost:disabled,
.adca-btn--ghost[aria-disabled="true"],
.adca-btn--transparent:disabled,
.adca-btn--transparent[aria-disabled="true"] {
  background-color: var(--adca-color-white);
  color: var(--adca-button-disabled-text);
}

/* Destructive / Danger */
.adca-btn--danger,
.adca-btn--destructive {
  background-color: var(--adca-sys-status-error-text);
  border-color: var(--adca-sys-status-error-text);
  color: var(--adca-sys-text-inverse);
}

.adca-btn--danger:hover:not(:disabled):not([aria-disabled="true"]),
.adca-btn--destructive:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--adca-button-danger-bg-hover);
  border-color: var(--adca-button-danger-bg-hover);
}

.adca-btn--danger:active:not(:disabled):not([aria-disabled="true"]),
.adca-btn--destructive:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--adca-button-danger-bg-pressed);
  border-color: var(--adca-button-danger-bg-pressed);
}

.adca-btn--danger:focus,
.adca-btn--destructive:focus {
  background-color: var(--adca-sys-status-error-text);
  border: 2px solid var(--adca-button-danger-border-focus);
}

.adca-btn--danger:disabled,
.adca-btn--danger[aria-disabled="true"],
.adca-btn--destructive:disabled,
.adca-btn--destructive[aria-disabled="true"] {
  background-color: var(--adca-button-disabled-bg);
  border-color: var(--adca-button-disabled-bg);
  color: var(--adca-sys-text-inverse);
}

/* Existing variants kept for compatibility */
.adca-btn--subtle {
  background-color: transparent;
  color: var(--adca-sys-text-subtext);
}

.adca-btn--light {
  background-color: var(--adca-color-white);
  color: var(--adca-sys-text-subtext);
  border-color: var(--adca-sys-border-subtle);
}

/* Shared hover for every white-bg / subtext-colored (#4A5853) variant --
   button/primary/hover token: rgb(var(--adca-ink-rgb)) = #2F3634, text and
   icon flip to inverse (white). Reuse this block (or the
   .adca-btn--white-hover class below) on any new white-background button
   instead of adding another one-off hover rule. */
.adca-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.adca-btn--outline:hover:not(:disabled):not([aria-disabled="true"]),
.adca-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]),
.adca-btn--transparent:hover:not(:disabled):not([aria-disabled="true"]),
.adca-btn--subtle:hover:not(:disabled):not([aria-disabled="true"]),
.adca-btn--light:hover:not(:disabled):not([aria-disabled="true"]),
.adca-btn--white-hover:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: rgb(var(--adca-ink-rgb));
  border-color: rgb(var(--adca-ink-rgb));
  color: var(--adca-sys-text-inverse);
}

.adca-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon,
.adca-btn--outline:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon,
.adca-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon,
.adca-btn--transparent:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon,
.adca-btn--subtle:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon,
.adca-btn--light:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon,
.adca-btn--white-hover:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon {
  color: var(--adca-sys-text-inverse);
}

/* Icons rendered as <img src="*.svg"> carry a hardcoded stroke color, so
   `color` can't recolor them -- force them white with a filter instead.
   Inline SVGs (react-icons) already pick up `color` via currentColor and
   are unaffected by this. */
.adca-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon img,
.adca-btn--outline:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon img,
.adca-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon img,
.adca-btn--transparent:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon img,
.adca-btn--subtle:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon img,
.adca-btn--light:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon img,
.adca-btn--white-hover:hover:not(:disabled):not([aria-disabled="true"]) .adca-btn__icon img {
  filter: brightness(0) invert(1);
}

/* Neutral (filled grey — background var(--adca-sys-border-subtle) = --adca-sys-border-subtle) */
.adca-btn--neutral {
  background-color: var(--adca-sys-border-subtle);
  border-color: var(--adca-sys-border-subtle);
  color: var(--adca-sys-text-subtext);
}

.adca-btn--neutral:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--adca-color-neutral-200);
  border-color: var(--adca-color-neutral-200);
}

.adca-btn--neutral:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--adca-color-neutral-200);
  border-color: var(--adca-color-neutral-200);
}

.adca-btn--neutral:disabled,
.adca-btn--neutral[aria-disabled="true"] {
  background-color: var(--adca-sys-border-subtle);
  border-color: var(--adca-sys-border-subtle);
  color: var(--adca-button-disabled-text);
}

/* Icons */
.adca-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Full Width */
.adca-btn--fullwidth {
  width: 100%;
}

/* Sizes */
.adca-btn--sm {
  padding: var(--adca-button-padding-sm);
}

.adca-btn--md {
  padding: var(--adca-space-12) var(--adca-space-16);
  border-radius: var(--adca-radius-md);
}

.adca-btn--lg {
  padding: var(--adca-button-padding-lg);
}

/* ---- components/accordion.css ---- */
/* ==========================================================================
 * Accordion Component
 * ==========================================================================
 */
.adca-accordion {
  background-color: var(--adca-sys-bg-card);
  border-radius: var(--adca-radius-sm);
  box-shadow: var(--adca-sys-shadow-card);
  border: 1px solid var(--adca-sys-border-subtle);
  display: flex;
  flex-direction: column;
  font-family: var(--adca-sys-font-family);
}

.adca-accordion__item {
  border-bottom: 1px solid var(--adca-sys-border-subtle);
}

.adca-accordion__item:last-child {
  border-bottom: none;
}

/* Header / Trigger */
.adca-accordion__header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: var(--adca-space-16) var(--adca-space-24);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
  gap: var(--adca-space-16);
}

.adca-accordion__header:hover {
  background-color: var(--adca-sys-bg-page);
}

.adca-accordion__header:focus-visible {
  outline: 2px solid var(--adca-sys-brand);
  outline-offset: -2px;
}

/* Status Indicator (Red Dot) */
.adca-accordion__status {
  width: 8px;
  height: 8px;
  background-color: var(--adca-sys-status-error-text);
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

/* Header Text Content */
.adca-accordion__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-4);
  flex: 1;
  min-width: 0;
}

.adca-accordion__title {
  font-size: var(--adca-font-size-body-lg);
  font-weight: var(--adca-font-weight-semibold);
  color: var(--adca-sys-text-heading);
  line-height: 1.4;
}

.adca-accordion__subtitle {
  font-size: var(--adca-font-size-body);
  color: var(--adca-sys-text-subtext);
  line-height: 1.4;
}

.adca-accordion__meta {
  font-size: var(--adca-font-size-caption);
  color: var(--adca-sys-text-muted);
  font-style: italic;
  margin-top: 2px;
}

/* Chevron Icon */
.adca-accordion__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: var(--adca-space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  color: var(--adca-sys-text-muted);
}

.adca-accordion__icon::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  /* Point down initially */
}

/* Expanded State */
.adca-accordion__item--expanded .adca-accordion__icon {
  transform: rotate(180deg);
}

/* Content Panel */
.adca-accordion__content {
  background-color: var(--adca-sys-bg-page);
}

.adca-accordion__body {
  padding: var(--adca-space-16) var(--adca-space-24) var(--adca-space-24) var(--adca-space-40);
  font-size: var(--adca-font-size-body);
  color: var(--adca-sys-text-subtext);
}

/* Disabled State */
.adca-accordion__item--disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* rtl:begin:ignore */
/* RTL Support */
[dir=rtl] .adca-accordion__header,
.rtl .adca-accordion__header {
  text-align: right;
}

[dir=rtl] .adca-accordion__icon,
.rtl .adca-accordion__icon {
  margin-left: 0;
  margin-right: var(--adca-space-8);
}

/* Ensure header content aligns right properly */
[dir=rtl] .adca-accordion__header-content,
.rtl .adca-accordion__header-content {
  align-items: flex-start;
  text-align: right;
}

[dir=rtl] .adca-accordion__body,
.rtl .adca-accordion__body {
  padding: var(--adca-space-16) var(--adca-space-40) var(--adca-space-24) var(--adca-space-24);
  text-align: right;
}

/* rtl:end:ignore */
/* ---- components/avatar.css ---- */
.adca-avatar {
  position: relative;
  overflow: hidden;
  background-color: var(--adca-avatar-bg);
  color: var(--adca-avatar-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--adca-font-weight-regular);
  font-size: var(--adca-font-size-body);
  text-transform: uppercase;
  user-select: none;
  font-family: var(--adca-sys-font-family);
  flex-shrink: 0;
}

.adca-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adca-avatar--circle {
  border-radius: 999px;
}

.adca-avatar--square {
  border-radius: var(--adca-space-8);
  /* 8px rounded corner */
}

.adca-avatar__initials {
  line-height: var(--adca-line-height-caption);
}

.adca-avatar__placeholder {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: var(--adca-color-neutral-200);
  mask: radial-gradient(circle at 50% 100%, transparent 40%, black 40%);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 40%, black 40%);
}
/* ---- components/avatarGroup.css ---- */
.adca-avatar-group {
  display: flex;
  align-items: center;
}

/* Avatar Overlap Stacking */
.adca-avatar-group .adca-avatar {
  border: 2px solid var(--adca-avatar-group-border-color, var(--adca-sys-bg-card));
  box-sizing: content-box;
  transition: transform 0.2s ease-in-out;
}

/* Excess Counter */
.adca-avatar-group__excess {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--adca-sys-border-subtle);
  color: var(--adca-sys-text-subtext);
  font-size: var(--adca-font-size-body);
  font-weight: var(--adca-font-weight-semibold);
  border-style: solid;
  border-color: var(--adca-sys-bg-card);
  border-width: 2px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  margin-left: -var(--adca-space-8);
  font-family: inherit;
  line-height: 1;
}

/* Support Square Shape for Excess */
.adca-avatar-group--square .adca-avatar-group__excess {
  border-radius: var(--adca-space-8);
}

/* rtl:begin:ignore */
/* RTL Support */
[dir=rtl] .adca-avatar-group,
.rtl .adca-avatar-group {
  flex-direction: row;
}

/* Reset left margins and apply right margins for overlap in RTL */
[dir=rtl] .adca-avatar-group--overlap-sm .adca-avatar:not(:first-child),
[dir=rtl] .adca-avatar-group--overlap-sm .adca-avatar-group__excess,
.rtl .adca-avatar-group--overlap-sm .adca-avatar:not(:first-child),
.rtl .adca-avatar-group--overlap-sm .adca-avatar-group__excess {
  margin-left: 0;
  margin-right: -var(--adca-space-8);
}

[dir=rtl] .adca-avatar-group--overlap-md .adca-avatar:not(:first-child),
[dir=rtl] .adca-avatar-group--overlap-md .adca-avatar-group__excess,
.rtl .adca-avatar-group--overlap-md .adca-avatar:not(:first-child),
.rtl .adca-avatar-group--overlap-md .adca-avatar-group__excess {
  margin-left: 0;
  margin-right: -var(--adca-space-12);
}

[dir=rtl] .adca-avatar-group--overlap-lg .adca-avatar:not(:first-child),
[dir=rtl] .adca-avatar-group--overlap-lg .adca-avatar-group__excess,
.rtl .adca-avatar-group--overlap-lg .adca-avatar:not(:first-child),
.rtl .adca-avatar-group--overlap-lg .adca-avatar-group__excess {
  margin-left: 0;
  margin-right: -var(--adca-space-16);
}

/* rtl:end:ignore */
/* ---- components/badge.css ---- */
/* =================================================================*********
 * Badge Component
 * =================================================================*********
*/
.adca-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--adca-space-4) var(--adca-space-12);
  gap: var(--adca-space-8);
  font-size: var(--adca-font-size-caption);
  font-weight: var(--adca-font-weight-semibold);
  white-space: nowrap;
  border-radius: var(--adca-radius-sm);
  font-family: var(--adca-sys-font-family);
  width: fit-content;
}

[dir="rtl"] .adca-badge {
  font-family: var(--adca-font-family-arabic);
}

.adca-badge--full-width {
  width: 100%;
}

.adca-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Sizes */
.adca-badge--sm {
  padding: 2px 6px;
  font-size: var(--adca-font-size-caption);
}

.adca-badge--md {
  padding: var(--adca-space-4) var(--adca-space-8);
  font-size: var(--adca-font-size-body);
}

/* Rounded (Pill) */
.adca-badge--rounded {
  border-radius: 999px;
}

/* ==========================================
   Solid Tones (Default)
   ========================================== */
.adca-badge--solid-primary {
  background-color: var(--adca-sys-brand);
  color: var(--adca-sys-text-inverse);
  border: 1px solid var(--adca-sys-brand);
}

.adca-badge--solid-secondary {
  background-color: var(--adca-color-neutral-200);
  color: var(--adca-sys-text-heading);
  border: 1px solid var(--adca-sys-border-default);
}

.adca-badge--solid-success {
  background-color: var(--adca-sys-status-success-text);
  color: var(--adca-sys-text-inverse);
  border: 1px solid var(--adca-sys-status-success-text);
}

.adca-badge--solid-warning {
  background-color: var(--adca-sys-status-pending-text);
  color: var(--adca-sys-text-inverse);
  border: 1px solid var(--adca-sys-status-pending-text);
}

.adca-badge--solid-danger {
  background-color: var(--adca-sys-status-error-text);
  color: var(--adca-sys-text-inverse);
  border: 1px solid var(--adca-sys-status-error-text);
}

.adca-badge--solid-info {
  background-color: var(--adca-sys-status-info-text);
  color: var(--adca-sys-text-inverse);
  border: 1px solid var(--adca-sys-status-info-text);
}

.adca-badge--solid-neutral {
  background-color: var(--adca-sys-text-subtext);
  color: var(--adca-sys-text-inverse);
  border: 1px solid var(--adca-sys-text-subtext);
}

/* ==========================================
   Soft Tones (Borderless, Status matching)
   ========================================== */
.adca-badge--soft-primary {
  background-color: var(--adca-sys-bg-card-light);
  color: var(--adca-sys-text-muted);
}

.adca-badge--soft-secondary {
  background-color: var(--adca-sys-border-subtle);
  color: var(--adca-sys-text-subtext);
}

.adca-badge--soft-success {
  background-color: var(--adca-sys-status-success-bg);
  color: var(--adca-sys-status-success-text);
}

.adca-badge--soft-warning {
  background-color: var(--adca-sys-status-pending-bg);
  color: var(--adca-sys-status-pending-text);
}

.adca-badge--soft-danger {
  background-color: var(--adca-sys-status-error-bg);
  color: var(--adca-sys-status-error-text);
}

.adca-badge--soft-info {
  background-color: var(--adca-sys-status-info-bg);
  color: var(--adca-sys-status-info-text);
}

.adca-badge--soft-neutral {
  background-color: var(--adca-sys-border-subtle);
  color: var(--adca-sys-text-heading);
}

/* Custom Status Variants */

/* Draft / None / Default */
.adca-badge--soft-draft,
.adca-badge--soft-default,
.adca-badge--soft-none {
  background-color: var(--adca-sys-status-neutral-bg);
  color: var(--adca-sys-status-neutral-text);
}

.adca-badge--soft-draft .adca-badge__icon,
.adca-badge--soft-default .adca-badge__icon,
.adca-badge--soft-none .adca-badge__icon {
  color: var(--adca-sys-status-neutral-text);
}

/* Inactive / Archived / Rejected / Danger / High / Overdue */
.adca-badge--soft-inactive,
.adca-badge--soft-archived,
.adca-badge--soft-rejected,
.adca-badge--soft-danger,
.adca-badge--soft-error,
.adca-badge--soft-high,
.adca-badge--soft-overdue {
  background-color: var(--adca-sys-status-error-bg);
  color: var(--adca-sys-status-error-text);
}

.adca-badge--soft-inactive .adca-badge__icon,
.adca-badge--soft-archived .adca-badge__icon,
.adca-badge--soft-rejected .adca-badge__icon,
.adca-badge--soft-danger .adca-badge__icon,
.adca-badge--soft-error .adca-badge__icon,
.adca-badge--soft-high .adca-badge__icon,
.adca-badge--soft-overdue .adca-badge__icon {
  color: var(--adca-sys-status-error-text);
}

/* OnHold / Hold / Review / Warning / Medium */
.adca-badge--soft-hold,
.adca-badge--soft-onhold,
.adca-badge--soft-on-hold,
.adca-badge--soft-on_hold,
.adca-badge--soft-review,
.adca-badge--soft-medium {
  background-color: var(--adca-sys-status-pending-bg);
  color: var(--adca-sys-status-pending-text);
}

.adca-badge--soft-hold .adca-badge__icon,
.adca-badge--soft-onhold .adca-badge__icon,
.adca-badge--soft-on-hold .adca-badge__icon,
.adca-badge--soft-on_hold .adca-badge__icon,
.adca-badge--soft-review .adca-badge__icon,
.adca-badge--soft-medium .adca-badge__icon {
  color: var(--adca-sys-status-pending-text);
}

/* Active / Completed / Complete / Success / Approved / Low */
.adca-badge--soft-active,
.adca-badge--soft-completed,
.adca-badge--soft-complete,
.adca-badge--soft-approved,
.adca-badge--soft-success,
.adca-badge--soft-low {
  background-color: var(--adca-sys-status-success-bg);
  color: var(--adca-sys-status-success-text);
}

.adca-badge--soft-active .adca-badge__icon,
.adca-badge--soft-completed .adca-badge__icon,
.adca-badge--soft-complete .adca-badge__icon,
.adca-badge--soft-approved .adca-badge__icon,
.adca-badge--soft-success .adca-badge__icon,
.adca-badge--soft-low .adca-badge__icon {
  color: var(--adca-sys-status-success-text);
}

/* InProgress / Info / In Progress */
.adca-badge--soft-inprogress,
.adca-badge--soft-in-progress,
.adca-badge--soft-in_progress,
.adca-badge--soft-info {
  background-color: var(--adca-sys-status-info-bg);
  color: var(--adca-sys-status-info-text);
}

.adca-badge--soft-inprogress .adca-badge__icon,
.adca-badge--soft-in-progress .adca-badge__icon,
.adca-badge--soft-in_progress .adca-badge__icon,
.adca-badge--soft-info .adca-badge__icon {
  color: var(--adca-sys-status-info-text);
}

/* ==========================================
   Outline Tones
   ========================================== */
.adca-badge--outline-primary {
  background-color: transparent;
  color: var(--adca-sys-brand);
  border: 1px solid var(--adca-sys-brand);
}

.adca-badge--outline-secondary {
  background-color: transparent;
  color: var(--adca-sys-text-heading);
  border: 1px solid var(--adca-sys-border-default);
}

.adca-badge--outline-success {
  background-color: transparent;
  color: var(--adca-sys-status-success-text);
  border: 1px solid var(--adca-sys-status-success-text);
}

.adca-badge--outline-warning {
  background-color: transparent;
  color: var(--adca-sys-status-pending-text);
  border: 1px solid var(--adca-sys-status-pending-text);
}

.adca-badge--outline-danger {
  background-color: transparent;
  color: var(--adca-sys-status-error-text);
  border: 1px solid var(--adca-sys-status-error-text);
}

.adca-badge--outline-info {
  background-color: transparent;
  color: var(--adca-sys-status-info-text);
  border: 1px solid var(--adca-sys-status-info-text);
}

.adca-badge--outline-neutral {
  background-color: transparent;
  color: var(--adca-sys-text-subtext);
  border: 1px solid var(--adca-sys-border-focus);
}

/* Badge Shapes */
.adca-badge--circle {
  border-radius: 999px;
}

.adca-badge--square {
  min-height: 32px;
  border-radius: var(--adca-radius-md);
  border: 1px solid transparent;
  /* Default border, can be overridden by variants */
  padding: var(--adca-space-4) 13px;
  gap: var(--adca-space-8);
}

/* ---- components/input.css ---- */
/* ==========================================================================
   Input Component Styles
   ========================================================================== */
.adca-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-8);
  width: 100%;
  font-family: var(--adca-sys-font-family);
}

[dir="rtl"] .adca-input-group {
  font-family: var(--adca-font-family-arabic);
}

.adca-input-label {
  font-size: var(--adca-font-size-body);
  font-weight: var(--adca-font-weight-semibold);
  /* No solid ink semantic token; built from the ink primitive. */
  color: rgb(var(--adca-ink-rgb));
  line-height: var(--adca-line-height-body);
  margin-bottom: var(--adca-space-0);
}

.adca-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--adca-color-white);
  border: 1px solid var(--adca-sys-border-default);
  border-radius: var(--adca-radius-md);
  transition: all 0.2s ease-in-out;
  width: 100%;
  gap: var(--adca-space-12);
  /* Lives on the wrapper, not the bare <input>, so icons get the same inset
     as the text -- a consumer should never need to add this padding itself. */
  padding: var(--adca-input-padding);
}

.adca-input-wrapper:focus-within {
  border: 1px solid var(--adca-sys-text-subtext);
  box-shadow: none;
}

.adca-input--secondary {
  border-color: var(--adca-sys-bg-card-light);
}

.adca-input--outline {
  border-color: var(--adca-sys-border-default);
}

.adca-input-wrapper--error {
  border-color: var(--adca-sys-status-error-text) !important;
}

.adca-input-wrapper--error:focus-within {
  border-color: var(--adca-sys-status-error-text) !important;
}

.adca-input-wrapper--disabled {
  background-color: var(--adca-sys-bg-lightest);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Sizes */
.adca-input--sm {
  min-height: 32px;
}

.adca-input--md {
  min-height: 40px;
}

.adca-input--lg {
  min-height: 48px;
}

/* Input Field */
.adca-input {
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
  font-size: var(--adca-font-size-body);
  line-height: var(--adca-line-height-body);
  color: var(--adca-sys-text-heading);
  outline: none;
}

.adca-input::placeholder {
  color: var(--adca-sys-text-muted);
}

/* Icons */
.adca-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--adca-sys-text-subtext);
  flex-shrink: 0;
}

/* Footer: error on left, display label / char count on right */
.adca-input-footer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--adca-space-16);
}

/* Helper / display label — always pushed to the right */
.adca-input-helper {
  font-size: var(--adca-font-size-caption);
  color: var(--adca-sys-text-subtext);
  margin-left: auto;
  text-align: end;
}
.rtl .adca-input-helper {
  margin-left: unset;
  margin-right: auto;
}

/* Error — stays on the left */
.adca-input-helper--error {
  color: var(--adca-sys-status-error-text);
  font-size: var(--adca-font-size-caption);
}

/* rtl:begin:ignore */
/* RTL Support */
[dir="rtl"] .adca-input-label,
.rtl .adca-input-label {
  font-family: var(--adca-font-family-arabic);
  text-align: right;
}

[dir="rtl"] .adca-input-helper,
.rtl .adca-input-helper {
  text-align: left;
}

/* `dir="auto"` fields (search boxes, and anything else whose typed content
   can be either language) resolve to ltr by default while empty, since
   there is no typed text yet to infer a direction from -- that leaves a
   localized Arabic placeholder sitting flush left on an RTL page. Align the
   placeholder itself to the page's own edge; this only affects the empty
   state, so dir="auto" still takes over correctly once real text is typed.
   Not scoped to `.adca-input` so it also covers the handful of bespoke
   search inputs built as plain <input> elements. */
[dir="rtl"] input[dir="auto"]:placeholder-shown,
[dir="rtl"] textarea[dir="auto"]:placeholder-shown {
  text-align: right;
}

/* [dir=rtl] .adca-input-icon--end,
.rtl .adca-input-icon--end {
  padding-right: var(--adca-space-8);
  padding-left: var(--adca-space-16);
} */

/* rtl:end:ignore */
/* Responsive */
@media (max-width: 768px) {
  .adca-input--lg {
    min-height: 40px;
  }
}

/* ---- components/checkbox.css ---- */
/* ==========================================================================
   Checkbox Component Styles
   ========================================================================== */
.adca-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--adca-space-8);
  cursor: pointer;
  user-select: none;
  font-family: var(--adca-sys-font-family);
  position: relative;
  text-align: start;
}

.adca-checkbox__input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Checkbox Box Overlay */
.adca-checkbox__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  width: 18px;
  background-color: var(--adca-sys-bg-card);
  border: 2px solid var(--adca-sys-border-default);
  border-radius: var(--adca-radius-sm);
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
}

.adca-checkbox:hover .adca-checkbox__box {
  border-color: var(--adca-sys-brand);
}

/* Checked State */
.adca-checkbox__input:checked ~ .adca-checkbox__box {
  background-color: var(--adca-sys-brand);
  border-color: var(--adca-sys-brand);
}

/* Checkmark (Check Icon) */
.adca-checkbox__check {
  display: none;
}

.adca-checkbox__input:checked ~ .adca-checkbox__box .adca-checkbox__check {
  display: block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

/* Label */
.adca-checkbox__label {
  font-size: var(--adca-font-size-body);
  color: var(--adca-sys-text-heading);
}

/* Sizes */
.adca-checkbox--sm .adca-checkbox__box {
  height: 16px;
  width: 16px;
}

.adca-checkbox--lg .adca-checkbox__box {
  height: 22px;
  width: 22px;
}

/* Full-width: one option per row, not packed inline with its siblings. */
.adca-checkbox--fullwidth {
  display: flex;
  width: 100%;
}

.adca-checkbox--fullwidth .adca-checkbox__label {
  flex: 1;
}

/* Bordered: the same row chrome `.adca-radio--bordered` gives a radio list,
   so a checkbox list reads as one design rather than two conventions. */
.adca-checkbox--bordered {
  padding: var(--adca-spacing-1-5, 12px) var(--adca-spacing-2, 16px);
  border: 1px solid var(--adca-sys-border-subtle, #e3e8e6);
  border-radius: var(--adca-border-radius-md, 8px);
  transition:
    background-color 0.2s,
    border-color 0.2s;
}

.adca-checkbox--checked.adca-checkbox--bordered {
  border-color: var(--adca-sys-primary, #5b6d67);
  background-color: rgba(91, 109, 103, 0.08);
}

/* Disabled */
.adca-checkbox--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.adca-checkbox--disabled .adca-checkbox__box {
  background-color: var(--adca-sys-bg-lightest);
}

/* RTL Support handled by logical properties and gap */

/* ---- components/loader.css ---- */
/* ==========================================================================
   Loader (Spinner) Component Styles
   ========================================================================== */
.adca-loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: inherit;
}

.adca-loader {
  display: inline-block;
  border: 2px solid var(--adca-color-neutral-200);
  border-top: 2px solid var(--adca-sys-brand);
  border-radius: 50%;
  animation: adca-spin 0.8s linear infinite;
}

/* Sizes */
.adca-loader--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.adca-loader--md {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.adca-loader--lg {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

@keyframes adca-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* rtl:begin:ignore */
/* No specific RTL logic needed for a circular spinner, but we keep the block for consistency */
/* rtl:end:ignore */
/* ---- components/carousel.css ---- */
/* ==========================================================================
   Carousel Component Styles
   ========================================================================== */
.adca-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  font-family: var(--adca-sys-font-family);
}

.adca-carousel__viewport {
  overflow: hidden;
  width: 100%;
}

.adca-carousel__container {
  display: flex;
  backface-visibility: hidden;
  user-select: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adca-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
}

/* Navigation Buttons */
.adca-carousel__navigation {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--adca-space-16);
  pointer-events: none;
  z-index: 10;
}

.adca-carousel__nav-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--adca-sys-bg-card);
  border: 1px solid var(--adca-sys-border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: var(--adca-sys-shadow-card);
  transition: all 0.2s ease-in-out;
  color: var(--adca-sys-text-heading);
}

.adca-carousel__nav-button:hover:not(:disabled) {
  background-color: var(--adca-sys-bg-lightest);
  border-color: var(--adca-sys-brand);
}

.adca-carousel__nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pagination Dots */
.adca-carousel__pagination {
  display: flex;
  justify-content: center;
  gap: var(--adca-space-8);
  margin-top: var(--adca-space-16);
}

.adca-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--adca-sys-bg-card-light);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding: 0;
}

.adca-carousel__dot--selected {
  background-color: var(--adca-sys-brand);
  transform: scale(1.2);
}

/* rtl:begin:ignore */
/* RTL Support */
/* Embla handles the flex-direction: row-reverse internally via options, 
   and icons are mirrored in the JS logic if needed. */
/* rtl:end:ignore */
/* Responsive */
@media (max-width: 768px) {
  .adca-carousel__nav-button {
    width: 32px;
    height: 32px;
  }
}
/* ---- components/datepicker.css ---- */
/* ==========================================================================
   DatePicker Component Styles (including DayPicker overrides)
   ========================================================================== */
.adca-date-picker-container {
  position: relative;
  width: 100%;
}

[dir="rtl"] .adca-date-picker-container,
[dir="rtl"] .adca-date-picker-popover {
  font-family: var(--adca-font-family-arabic);
}

.adca-date-picker-popover {
  background-color: var(--adca-sys-bg-card);
  border: 1px solid var(--adca-sys-border-default);
  border-radius: var(--adca-radius-lg);
  box-shadow: var(--adca-sys-shadow-modal);
  display: flex;
  padding: var(--adca-space-16);
  gap: var(--adca-space-16);
  box-sizing: border-box;
  justify-content: center;
}

/* DayPicker Overrides */
.adca-day-picker {
  --rdp-accent-color: var(--adca-sys-brand);
  --rdp-background-color: var(--adca-sys-brand);
  margin: 0;
  font-family: inherit;
  width: max-content;
}

/* Reset default button styles inside calendar */
.adca-day-picker button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.adca-day-picker table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: var(--adca-space-8);
}

.adca-day-picker th,
.adca-day-picker td {
  padding: 0;
  border: none;
  text-align: center;
}

/* Day Names Header */
.adca-day-picker .adca-day-picker__head_cell {
  font-weight: 600;
  font-size: 13px;
  color: var(--adca-sys-text-subtext, var(--adca-sys-text-muted));
  text-transform: uppercase;
  padding-bottom: var(--adca-space-8);
  width: 36px;
  height: 36px;
}

/* Day Cells */
.adca-day-picker__day {
  width: 36px;
  height: 36px;
  padding: 0;
}

.adca-day-picker__day-button {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  font-size: var(--adca-font-size-body);
  color: var(--adca-sys-date-picker-text);
}

.adca-day-picker__day-button:hover:not([disabled]) {
  background-color: var(--adca-sys-border-subtle);
}

.adca-day-picker__day--selected .adca-day-picker__day-button {
  background-color: var(--adca-sys-date-picker-selected-bg) !important;
  color: var(--adca-color-white) !important;
  font-weight: 600;
}

.adca-day-picker__day--today .adca-day-picker__day-button {
  border: 1px solid var(--adca-sys-brand, var(--adca-sys-status-success-text));
  font-weight: 600;
  color: var(--adca-sys-brand, var(--adca-sys-status-success-text));
}

.adca-day-picker__day--disabled .adca-day-picker__day-button {
  color: var(--adca-sys-date-picker-disabled-text);
  cursor: not-allowed;
}

.adca-day-picker__day--outside .adca-day-picker__day-button {
  color: var(--adca-sys-date-picker-disabled-text);
}

/* Caption and Dropdown Select Styling */
.adca-day-picker__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 32px;
  margin-bottom: var(--adca-space-12);
  padding: 0 var(--adca-space-40); /* Make room for absolute nav buttons */
}

.adca-day-picker__dropdowns {
  display: flex;
  align-items: center;
  gap: var(--adca-space-8);
}

.adca-day-picker__dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--adca-sys-border-default, var(--adca-sys-border-subtle));
  border-radius: 6px;
  padding: var(--adca-space-4) var(--adca-space-8);
  transition: all 0.2s ease;
}

.adca-day-picker__dropdown:hover,
.adca-day-picker__dropdown:focus-within {
  border-color: var(--adca-sys-selected, var(--adca-sys-status-success-text));
  box-shadow: 0 0 0 2px rgb(var(--adca-selected-rgb) / 10%);
}

.adca-day-picker__caption-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--adca-font-size-body);
  font-weight: 600;
  color: var(--adca-sys-text-heading, var(--adca-sys-text-heading));
  pointer-events: none;
}

/* Hide the native select and stretch it over the container */
.adca-day-picker__dropdown-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Nav */
.adca-day-picker__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 var(--adca-space-8);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  margin: 10px;
  z-index: 10;
}

.adca-day-picker__nav button {
  pointer-events: auto;
  position: relative;
  z-index: 10;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--adca-sys-border-default, var(--adca-sys-border-subtle));
  color: var(--adca-sys-text-subtext, var(--adca-sys-text-muted));
  transition: all 0.2s ease;
}

.adca-day-picker__nav button:hover {
  background-color: var(--adca-sys-border-subtle);
  border-color: var(--adca-sys-selected);
  color: var(--adca-sys-selected);
}

.adca-day-picker__chevron {
  fill: currentColor;
  width: 16px;
  height: 16px;
}

/* Time Picker Sidebar */
.adca-date-picker-time-sidebar {
  border-left: 1px solid var(--adca-sys-border-subtle);
  padding-left: var(--adca-space-32, 16px);
  display: flex;
  flex-direction: column;
  width: 140px;
}

.adca-date-picker-time-header {
  font-weight: 600;
  font-size: var(--adca-font-size-body);
  padding-bottom: var(--adca-space-8);
  border-bottom: 1px solid var(--adca-sys-border-subtle);
  margin-bottom: var(--adca-space-8);
  text-align: center;
  color: var(--adca-sys-text-heading, var(--adca-sys-text-heading));
}

.adca-date-picker-time-columns {
  display: flex;
  flex: 1;
  min-height: 240px;
  overflow: hidden;
  gap: var(--adca-space-8);
}

.adca-date-picker-time-column {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adca-date-picker-time-cell {
  width: 100%;
  padding: 6px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: center;
  border-radius: var(--adca-radius-sm);
  font-size: var(--adca-font-size-body);
  transition: all 0.1s ease;
  color: var(--adca-sys-text-subtext, var(--adca-sys-text-muted));
}

.adca-date-picker-time-cell:hover {
  background-color: var(--adca-sys-bg-lightest, var(--adca-sys-bg-lightest));
  color: var(--adca-sys-text-heading, var(--adca-sys-text-heading));
  font-weight: 500;
}

.adca-date-picker-time-cell--selected {
  background-color: var(--adca-sys-selected, var(--adca-sys-status-success-text)) !important;
  color: var(--adca-color-white) !important;
  font-weight: 600;
}

.adca-date-picker-time-footer {
  margin-top: var(--adca-space-12);
  padding-top: var(--adca-space-12);
  border-top: 1px solid var(--adca-sys-border-subtle);
  display: flex;
  justify-content: flex-end;
}

.adca-date-picker-ok-btn {
  padding: 6px var(--adca-space-16);
  background-color: var(--adca-sys-selected, var(--adca-sys-status-success-text));
  color: var(--adca-color-white);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--adca-font-size-body);
  transition: opacity 0.2s ease;
}

.adca-date-picker-ok-btn:hover {
  opacity: 0.9;
}

/* rtl:begin:ignore */
/* RTL Support */
[dir=rtl] .adca-day-picker__dropdown-select,
.rtl .adca-day-picker__dropdown-select {
  padding: 6px var(--adca-space-12) 6px 28px;
  background-position: left 8px center;
}

[dir=rtl] .adca-date-picker-time-sidebar,
.rtl .adca-date-picker-time-sidebar {
  border-left: none;
  border-right: 1px solid var(--adca-sys-border-subtle);
  padding-left: 0;
  padding-right: var(--adca-space-32, 16px);
}
/* rtl:end:ignore */

/* ---- components/fileinput.css ---- */
/* ==========================================================================
   FileInput Component Styles
   ========================================================================== */
.adca-file-card {
  background-color: var(--adca-color-white) !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  gap: 11px;
  padding: 26px var(--adca-space-16);
  border: 1px dashed var(--adca-sys-border-subtle, var(--adca-sys-border-disabled));
  border-radius: var(--adca-radius-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.adca-file-card:hover {
  border-color: var(--adca-sys-brand);
}

.adca-file-card--active {
  border-color: var(--adca-sys-brand);
}

.adca-file-card--error {
  border-color: var(--adca-sys-status-error-text);
}

.adca-file-card--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.adca-file-input-hidden {
  display: none;
}

.adca-file-upload-icon {
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adca-file-upload-icon img {
  width: 32px;
  height: 32px;
}

.adca-file-title {
  font-size: var(--adca-font-size-body);
  font-weight: 500;
  line-height: var(--adca-line-height-body);
  color: var(--adca-sys-text-subtext);
  margin-bottom: 11px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.adca-file-separator {
  display: block;
  margin: var(--adca-space-8) 0;
  color: var(--adca-sys-text-muted);
}

.adca-file-browse-btn {
  display: inline-block;
  padding: var(--adca-button-padding-sm);
  background-color: var(--adca-sys-bg-card-light);
  color: var(--adca-sys-text-subtext);
  border-radius: var(--adca-radius-md);
  font-weight: var(--adca-font-weight-semibold);
  font-size: var(--adca-font-size-body);
  line-height: var(--adca-line-height-body);
  margin-top: 11px;
}

.adca-file-browse-btn:hover {
  background-color: var(--adca-sys-border-disabled);
}

.adca-file-helpers {
  font-size: var(--adca-font-size-caption);
  color: var(--adca-sys-text-muted);
  margin-bottom: var(--adca-space-4);
}

.adca-file-helper-text {
  font-size: var(--adca-font-size-caption);
  font-weight: 400;
  line-height: var(--adca-line-height-caption);
  color: var(--adca-sys-text-subtext);
  margin: 2px 0;
}

/* Uploaded Files List */
.adca-uploaded-files-container {
  margin-top: var(--adca-space-16);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.adca-uploaded-files-title {
  font-size: var(--adca-font-size-body-lg);
  margin-bottom: var(--adca-space-8);
}

.adca-uploaded-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--adca-space-8);
  padding: var(--adca-space-8) var(--adca-space-16);
  background-color: var(--adca-sys-bg-lightest);
  border: 1px solid var(--adca-sys-border-subtle);
  border-radius: var(--adca-radius-sm);
  margin-bottom: var(--adca-space-4);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* `min-width: 0` is required — a flex item defaults to `min-width: auto`, so a
   long unbroken file name would otherwise stretch the row past the form width
   instead of being truncated by the ellipsis. */
.adca-uploaded-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--adca-font-size-body);
}

.adca-file-remove-btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--adca-space-4);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .adca-file-card {
    padding: var(--adca-space-20) var(--adca-space-12);
  }

  .adca-uploaded-file-item {
    padding: var(--adca-space-8) var(--adca-space-12);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .adca-file-card {
    padding: var(--adca-space-16) var(--adca-space-12);
  }

  .adca-uploaded-file-item {
    padding: var(--adca-space-8);
  }

  .adca-uploaded-file-name {
    font-size: var(--adca-font-size-caption);
  }
}

/* rtl:begin:ignore */
/* RTL Support */
[dir=rtl] .adca-file-card,
.rtl .adca-file-card {
  text-align: center;
}

[dir=rtl] .adca-uploaded-files-title,
.rtl .adca-uploaded-files-title {
  text-align: right;
}

/* rtl:end:ignore */
/* ---- components/formfolder.css ---- */
/* ==========================================================================
   FormFolder Component Styles
   ========================================================================== */
.adca-form-folder {
  margin-bottom: var(--adca-space-32);
  width: 100%;
  font-family: var(--adca-sys-font-family);
  border: 1px solid var(--adca-sys-border-subtle);
  border-radius: var(--adca-radius-md);
  overflow: hidden;
  background-color: var(--adca-sys-bg-card);
}

.adca-form-folder__header {
  background-color: var(--adca-sys-bg-page);
  border-bottom: 1px solid var(--adca-sys-border-subtle);
  display: flex;
  align-items: center;
}

.adca-form-folder__tab {
  display: inline-flex;
  align-items: center;
  padding: var(--adca-space-16) var(--adca-space-32);
  background-color: var(--adca-sys-brand);
  color: white;
  border-bottom-right-radius: 0;
  border-top-right-radius: 8px;
  position: relative;
  min-width: 120px;
}

/* The folder tab "cut" effect */
.adca-form-folder__tab::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-bottom: 40px solid var(--adca-sys-brand);
  border-right: 20px solid transparent;
}

.adca-form-folder__title {
  margin: 0;
  font-size: var(--adca-font-size-body-lg);
  font-weight: var(--adca-font-weight-bold);
  line-height: 1;
}

.adca-form-folder__icon {
  margin-right: var(--adca-space-16);
  display: flex;
  align-items: center;
}

.adca-form-folder__body {
  padding: var(--adca-space-32);
}

/* Variants */
.adca-form-folder--secondary .adca-form-folder__tab {
  background-color: var(--adca-color-neutral-200);
  color: var(--adca-sys-text-heading);
}

.adca-form-folder--secondary .adca-form-folder__tab::after {
  border-bottom-color: var(--adca-color-neutral-200);
}

/* rtl:begin:ignore */
/* RTL Support */
[dir=rtl] .adca-form-folder__tab,
.rtl .adca-form-folder__tab {
  border-top-right-radius: 0;
  border-top-left-radius: 8px;
}

[dir=rtl] .adca-form-folder__tab::after,
.rtl .adca-form-folder__tab::after {
  right: auto;
  left: -20px;
  border-right: none;
  border-left: 20px solid transparent;
}

[dir=rtl] .adca-form-folder__icon,
.rtl .adca-form-folder__icon {
  margin-right: 0;
  margin-left: var(--adca-space-16);
}

/* rtl:end:ignore */
/* Responsive */
@media (max-width: 768px) {
  .adca-form-folder__tab {
    padding: var(--adca-space-8) var(--adca-space-16);
  }
}
/* ---- components/select.css ---- */
/* ==========================================================================
   Select Component Styles
   ========================================================================== */
.adca-select-group {
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-4);
}

.adca-select-group--fullwidth {
  width: 100%;
}

.adca-select-label {
  font-size: var(--adca-font-size-body, 14px);
  font-weight: var(--adca-font-weight-semibold);
  color: var(--adca-sys-text-subtext);
  line-height: var(--adca-line-height-body);
  margin-bottom: 0px
}

.adca-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--adca-space-8) var(--adca-space-12);
  border: 1px solid var(--adca-sys-border-default);
  border-radius: var(--adca-radius-md);
  cursor: pointer;
  transition: all 0.2s;
  min-height: var(--adca-sys-control-height);
}

.adca-select-trigger:focus,
.adca-select-trigger--open {
  border-color: var(--adca-sys-brand, var(--adca-sys-brand));
  outline: none;
}

.adca-select-trigger--error {
  border-color: var(--adca-sys-status-error-text, var(--adca-sys-status-error-text)) !important;
}

.adca-select-trigger--disabled {
  background-color: var(--adca-sys-bg-disabled, var(--adca-sys-bg-lightest));
  cursor: not-allowed;
  opacity: 0.7;
}

.adca-select-value {
  font-size: var(--adca-font-size-body, 14px);
  color: var(--adca-sys-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.adca-select-value--placeholder {
  color: var(--adca-sys-text-muted);
}

.adca-select-actions {
  display: flex;
  align-items: center;
  gap: var(--adca-space-4);
  color: var(--adca-sys-text-subtext);
}

.adca-select-clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  color: var(--adca-sys-text-disabled);
}

.adca-select-clear:hover {
  color: var(--adca-sys-status-error-text);
}

.adca-select-chevron {
  transition: transform 0.2s;
}

.adca-select-chevron--open {
  transform: rotate(180deg);
}

/* Dropdown. Portalled, so it needs its own stacking/positioning rather than
   relying on an ancestor: without these it still renders in normal flow and
   overlaps the content that follows it on the page. The background also has
   to be opaque -- bg-lightest is a 5% tint, which barely occludes whatever's
   underneath, so page content showed through the "floating" panel. */
.adca-select-dropdown {
  position: fixed;
  z-index: var(--adca-z-select-dropdown, 100015);
  font-family: var(--adca-sys-font-family);
  background-color: var(--adca-sys-bg-card, var(--adca-color-white));
  border: 1px solid var(--adca-sys-border-default, var(--adca-sys-border-subtle));
  border-radius: var(--adca-radius-md);
  box-shadow: var(--adca-shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

[dir="rtl"] .adca-select-dropdown {
  font-family: var(--adca-font-family-arabic);
}

.adca-select-search-wrapper {
  padding: var(--adca-space-8);
  display: flex;
  align-items: center;
  gap: var(--adca-space-8);
  border-bottom: 1px solid var(--adca-sys-border-subtle);
  background-color: var(--adca-sys-bg-card, var(--adca-color-white));
}

.adca-select-search-icon {
  color: var(--adca-sys-text-disabled);
}

.adca-select-search-input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 13px;
  outline: none;
}

.adca-select-options {
  list-style: none;
  margin: 0;
  padding: var(--adca-space-8) var(--adca-space-16);
  overflow-y: auto;
  /* Without this the list keeps its content height inside the panel's 250px
     cap, so the overflow never scrolls and the last option is sliced in half
     by the panel's overflow: hidden. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-4);
}

.adca-select-option {
  padding: var(--adca-space-8) var(--adca-space-12);
  border-radius: var(--adca-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--adca-font-size-body);
  transition: background-color 0.2s;
}

.adca-select-option:hover {
  background-color: var(--adca-sys-bg-lightest-opaque);
}

.adca-select-option--selected {
  background-color: var(--adca-sys-bg-lightest-opaque);
  color: var(--adca-sys-brand, var(--adca-sys-brand));
  font-weight: 500;
}

.adca-select-option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.adca-select-option--empty {
  padding: var(--adca-space-12);
  text-align: center;
  color: var(--adca-sys-text-disabled);
  font-size: 13px;
}

.adca-select-check-icon {
  color: var(--adca-sys-brand);
}

@keyframes adca-select-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes adca-select-spin {
  to {
    transform: rotate(360deg);
  }
}

.adca-select-skeleton {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px var(--adca-space-12);
  list-style: none;
}

.adca-select-skeleton-line {
  display: block;
  border-radius: var(--adca-radius-sm);
  background: linear-gradient(
    90deg,
    var(--adca-sys-border-subtle, var(--adca-sys-bg-lightest)) 25%,
    var(--adca-color-neutral-200, var(--adca-sys-border-subtle)) 50%,
    var(--adca-sys-border-subtle, var(--adca-sys-bg-lightest)) 75%
  );
  background-size: 200% 100%;
  animation: adca-select-shimmer 1.4s ease-in-out infinite;
}

.adca-select-skeleton-line--primary {
  height: 13px;
}

.adca-select-skeleton-line--secondary {
  height: 10px;
  animation-delay: 0.15s;
}

.adca-select-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--adca-space-8);
  list-style: none;
}

.adca-select-loading-spinner {
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--adca-sys-border-subtle, var(--adca-sys-border-subtle));
  border-top-color: var(--adca-sys-text-muted, var(--adca-sys-text-muted));
  border-radius: 50%;
  animation: adca-select-spin 0.6s linear infinite;
}

.adca-select-error-message {
  font-size: var(--adca-font-size-caption);
  color: var(--adca-sys-status-error-text);
}

/* RTL Support */
[dir="rtl"] .adca-select-label,
.rtl .adca-select-label {
  text-align: right;
}

[dir="rtl"] .adca-select-trigger,
.rtl .adca-select-trigger {
  flex-direction: row;
}

[dir="rtl"] .adca-select-value,
.rtl .adca-select-value {
  text-align: right;
}

[dir="rtl"] .adca-select-dropdown,
.rtl .adca-select-dropdown {
  text-align: right;
}

[dir="rtl"] .adca-select-option,
.rtl .adca-select-option {
  flex-direction: row;
}

[dir="rtl"] .adca-select-option-label,
.rtl .adca-select-option-label {
  text-align: right;
}

/* ---- components/textarea.css ---- */
/* ==========================================================================
   Textarea Component Styles
   ========================================================================== */
.adca-textarea-wrapper {
  position: relative;
  border: 1px solid var(--adca-sys-border-default);
  border-radius: var(--adca-radius-md);
  overflow: hidden;
  transition: border-color 0.2s ease-in-out;
  width: 100%;
}

.adca-textarea-wrapper:focus-within {
  border: 1px solid var(--adca-sys-text-subtext);
  box-shadow: none;
}

.adca-textarea-wrapper--error {
  border-color: var(--adca-sys-status-error-text, var(--adca-sys-status-error-text)) !important;
  box-shadow: none !important;
}

.adca-textarea-wrapper--error:focus-within {
  border-color: var(--adca-sys-status-error-text, var(--adca-sys-status-error-text)) !important;
}

.adca-textarea[aria-invalid='true'] {
  box-shadow: none;
  outline: none;
}

.adca-textarea-wrapper--disabled {
  background-color: var(--adca-sys-bg-disabled, var(--adca-sys-bg-lightest));
}

.adca-textarea {
  width: 100%;
  padding: var(--adca-space-8) var(--adca-space-12);
  border: none;
  background: transparent;
  font-family: var(--adca-sys-font-family);
  font-size: var(--adca-font-size-body, 14px);
  line-height: 1.5;
  outline: none;
  resize: none; /* Handled via style prop in component */
  min-height: 80px;
  color: var(--adca-sys-text-heading);
}

.adca-textarea::placeholder {
  color: var(--adca-sys-text-muted);
}

.adca-textarea:disabled {
  cursor: not-allowed;
  color: var(--adca-sys-text-disabled);
}
/* ---- components/switch.css ---- */
.adca-switch-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--adca-space-8, 8px);
  cursor: pointer;
  --adca-switch-translate: 25px;
}
[dir=rtl] .adca-switch-wrapper, :host-context([dir=rtl]) .adca-switch-wrapper {
  --adca-switch-translate: -25px;
}

.adca-switch--left {
  flex-direction: row-reverse;
}

.adca-switch {
  position: relative;
  width: 50px;
  height: 25px;
  background-color: var(--adca-sys-bg-card-light, var(--adca-sys-border-disabled));
  border-radius: 25px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 0;
  display: flex;
  align-items: center;
}

.adca-switch--checked {
  background-color: var(--adca-sys-brand, var(--adca-sys-text-muted));
}

.adca-switch--primary.adca-switch--checked {
  background-color: var(--adca-sys-brand, var(--adca-sys-text-muted));
}

.adca-switch--secondary.adca-switch--checked {
  background-color: var(--adca-sys-text-muted, var(--adca-sys-text-muted));
}

.adca-switch__thumb {
  position: absolute;
  inset-inline-start: 3px;
  width: 19px;
  height: 19px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.adca-switch--checked .adca-switch__thumb {
  transform: translateX(var(--adca-switch-translate));
}

.adca-switch--sm {
  width: 30px;
  height: 16px;
  --adca-switch-translate: 14px;
}

.adca-switch--sm .adca-switch__thumb {
  width: 12px;
  height: 12px;
  inset-inline-start: 2px;
}

.adca-switch--lg {
  width: 56px;
  height: 30px;
  --adca-switch-translate: 26px;
}

.adca-switch--lg .adca-switch__thumb {
  width: 24px;
  height: 24px;
  inset-inline-start: 3px;
}

.adca-switch--disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.adca-switch__label {
  font-size: var(--adca-font-size-body, 14px);
  color: var(--adca-sys-text-heading, var(--adca-sys-text-heading));
  cursor: inherit;
}
/* ---- components/radiogroup.css ---- */
/* ==========================================================================
   Radio Group Component Styles
   ========================================================================== */
.adca-radio-group {
  border: 1px solid var(--adca-sys-border-default, var(--adca-sys-border-subtle));
  border-radius: var(--adca-radius-md);
  padding: var(--adca-space-16, 16px);
  margin: 0;
  display: flex;
  flex-direction: column;
}

.adca-radio-group--borderless {
  border: none;
  padding: 0;
}

.adca-radio-group--full {
  width: 100%;
}

.adca-radio-group__legend {
  font-size: var(--adca-font-size-body-lg, 16px);
  font-weight: 700;
  color: var(--adca-sys-text-heading, var(--adca-sys-text-heading));
  margin-bottom: var(--adca-space-16, 8px);
  padding: 0 var(--adca-space-4);
}

.adca-radio-group__options {
  display: flex;
  flex-direction: column;
  gap: var(--adca-radio-gap, 12px);
}

.adca-radio-group--row .adca-radio-group__options {
  flex-direction: row;
  flex-wrap: wrap;
}

.adca-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--adca-space-12);
  cursor: pointer;
  position: relative;
  padding: var(--adca-radio-padding, 8px);
  border-radius: 6px;
  transition: background-color 0.2s;
}

.adca-radio:hover:not(.adca-radio--disabled) {
  background-color: var(--adca-sys-bg-lightest, var(--adca-sys-bg-lightest));
}

.adca-radio--bordered {
  border: 1px solid var(--adca-sys-border-subtle, var(--adca-sys-border-subtle));
}

.adca-radio--checked.adca-radio--bordered {
  border-color: var(--adca-sys-brand, var(--adca-sys-brand));
  background-color: var(--adca-sys-bg-lightest, rgba(68, 86, 58, 0.05));
}

.adca-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.adca-radio__control {
  width: 20px;
  height: 20px;
  border: 2px solid var(--adca-sys-border-default, var(--adca-sys-border-subtle));
  border-radius: 50%;
  margin-top: 2px;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.2s, background-color 0.2s;
}

.adca-radio:hover .adca-radio__control {
  border-color: var(--adca-sys-brand, var(--adca-sys-brand));
}

.adca-radio--checked .adca-radio__control {
  border-color: var(--adca-sys-brand, var(--adca-sys-brand));
  border-width: 6px;
}

.adca-radio--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.adca-radio__label {
  display: flex;
  flex-direction: column;
  font-family: var(--adca-sys-font-family);
}

.adca-radio__label span:first-child {
  font-size: var(--adca-font-size-body, 14px);
  font-weight: 500;
  color: var(--adca-sys-text-heading);
}

.adca-radio__helper {
  font-size: var(--adca-font-size-caption, 12px);
  color: var(--adca-sys-text-subtext, var(--adca-sys-text-muted));
  margin-top: 2px;
}
/* ---- components/modal.css ---- */
/* ==========================================================================
   Modal Component Styles
   ========================================================================== */
.adca-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--adca-sys-z-index-modal, 1000);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}

.adca-modal-overlay--open {
  opacity: 1;
  pointer-events: auto;
}

.adca-modal {
  /* Non-modal <dialog> (no showModal() call) defaults to position: absolute
     in the UA stylesheet, which removes it from flow and breaks the
     overlay's flex centering. Opt back into flow so centering works. */
  position: static;
  font-family: var(--adca-sys-font-family);
  background-color: var(--adca-sys-bg-lightest, var(--adca-color-white));
  border-radius: var(--adca-radius-md);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 600px;
  /* vh first as the fallback for engines without dvh support */
  max-height: 90vh;
  max-height: 90dvh;
  margin: auto;
  box-sizing: border-box;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
}

[dir="rtl"] .adca-modal {
  font-family: var(--adca-font-family-arabic);
}

.adca-modal__header {
  padding: var(--adca-space-16);
  border-bottom: 1px solid var(--adca-sys-border-default, var(--adca-sys-border-subtle));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--adca-space-16);
  flex-shrink: 0;
}

.adca-modal__header-text {
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-4);
  flex: 1;
  min-width: 0;
}

.adca-modal__title {
  margin: 0;
  font-size: var(--adca-font-size-section-heading, 1.25rem);
  font-weight: var(--adca-font-weight-bold, 700);
  color: var(--adca-sys-text-heading, var(--adca-sys-text-heading));
}

.adca-modal__subtitle {
  margin: 0;
  font-size: var(--adca-font-size-body, 0.875rem);
  font-weight: var(--adca-font-weight-regular, 400);
  color: var(--adca-sys-text-subtext, var(--adca-sys-text-muted));
  line-height: var(--adca-line-height-body, 1.5);
}

.adca-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--adca-sys-text-subtext, var(--adca-sys-text-muted));
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.adca-modal__close:hover {
  background-color: var(--adca-sys-bg-lightest, var(--adca-sys-bg-lightest));
  color: var(--adca-sys-text-heading, var(--adca-sys-text-heading));
}

.adca-modal__close:focus-visible {
  outline: 2px solid var(--adca-sys-brand, var(--adca-sys-brand, var(--adca-sys-status-info-text)));
  outline-offset: 2px;
}

.adca-modal__close:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.adca-modal__close:disabled:hover {
  background-color: transparent;
  color: var(--adca-sys-text-subtext, var(--adca-sys-text-muted));
}

.adca-modal__body {
  padding: var(--adca-space-16);
  overflow-y: auto;
  flex: 1;
}

/* Scroll affordance — signals that the body has content out of view.
   The shadow lives on the header/footer rather than on the scroll container
   itself so it paints *above* the scrolling content (an inset shadow on the
   body would be covered by it), and so no modal skin's `background` shorthand
   can wipe it out. State comes from data-scroll-above/-below, set by
   useScrollOverflow in Modal.tsx. */
.adca-modal__header,
.adca-modal__footer {
  position: relative;
  z-index: 1;
  transition: box-shadow 0.15s ease-out;
}

.adca-modal[data-scroll-above="true"] .adca-modal__header {
  box-shadow: 0 6px 10px -6px rgba(35, 41, 38, 0.35);
}

.adca-modal[data-scroll-below="true"] .adca-modal__footer {
  box-shadow: 0 -6px 10px -6px rgba(35, 41, 38, 0.35);
}

/* Footerless modals have nothing below the body to carry the shadow, so fall
   back to an inset on the body itself. */
.adca-modal[data-scroll-below="true"] .adca-modal__body:last-child {
  box-shadow: inset 0 -14px 12px -12px rgba(35, 41, 38, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .adca-modal__header,
  .adca-modal__footer {
    transition: none;
  }
}

.adca-modal__footer {
  padding: var(--adca-space-24);
  border-top: 1px solid var(--adca-sys-border-default, var(--adca-sys-border-subtle));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--adca-space-8, 8px);
  flex-shrink: 0;
}

/* Modal sizing variations */
.adca-modal--sm {
  max-width: 400px;
}

.adca-modal--lg {
  max-width: 800px;
}

.adca-modal--full {
  width: 95%;
  max-width: 95%;
  height: 95%;
}

/* Tablet (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .adca-modal-overlay {
    padding: var(--adca-space-20);
  }

  .adca-modal {
    width: 100%;
    max-width: 560px;
  }

  .adca-modal--lg {
    max-width: 720px;
  }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
  /* The gutter lives on the overlay's padding box so the dialog can size to
     100% of it — a margin on the dialog would push it past the viewport. */
  .adca-modal-overlay {
    padding: var(--adca-space-16);
  }

  .adca-modal,
  .adca-modal--sm,
  .adca-modal--lg {
    width: 100%;
    max-width: 100%;
    margin: 0;
    /* Fill the gutter-adjusted viewport so tall content scrolls in the body
       instead of being clipped against the footer. */
    max-height: calc(100vh - (2 * var(--adca-space-16)));
    max-height: calc(100dvh - (2 * var(--adca-space-16)));
    border-radius: var(--adca-radius-md);
  }

  .adca-modal--full {
    height: calc(100vh - (2 * var(--adca-space-16)));
    height: calc(100dvh - (2 * var(--adca-space-16)));
  }

  .adca-modal__header {
    padding: var(--adca-space-8) var(--adca-space-16);
  }

  .adca-modal__title {
    font-size: var(--adca-font-size-card-heading);
  }

  .adca-modal__body {
    padding: var(--adca-space-16);
    /* iOS Safari momentum scroll inside a flex-clipped dialog */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Stack actions full-width — a right-aligned row overflows on narrow screens */
  .adca-modal__footer {
    padding: var(--adca-space-16);
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .adca-modal__footer .adca-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- components/richtexteditor.css ---- */
.adca-rte {
	align-items: flex-start;
	background: var(--adca-sys-bg-page);
	border: 1px solid var(--adca-sys-border-subtle);
	border-radius: var(--adca-radius-lg);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	padding: 1px;
	overflow: hidden;
	transition:
		border-color 0.2s,
		box-shadow 0.2s;
	width: 100%;
}

.adca-rte:focus-within {
	border-color: var(--adca-sys-brand);
	box-shadow: none;
}

.adca-rte--error {
	border-color: var(--adca-sys-status-error-text);
}

.adca-rte--disabled {
	background-color: var(--adca-sys-bg-page);
	cursor: not-allowed;
}

/* Toolbar */
.adca-rte__toolbar {
	align-self: stretch;
	background: var(--adca-sys-bg-page);
	border-bottom: 1px solid var(--adca-sys-border-subtle);
	border-radius: var(--adca-radius-lg) var(--adca-radius-lg)
		0 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: none;
	height: var(--adca-space-48);
	width: 100%;
}

.adca-rte__buttons-wrapper {
	align-items: center;
	align-content: flex-end;
	align-self: stretch;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	height: var(--adca-space-48);
	padding: var(--adca-space-8) var(--adca-space-12);
	width: 100%;
}

.adca-rte__divider {
	background: var(--adca-sys-border-subtle);
	width: 1px;
	height: var(--adca-space-20);
	margin: 0 var(--adca-space-4);
}

.adca-rte__toolbar-btn {
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--adca-radius-sm);
	box-sizing: border-box;
	color: var(--adca-sys-brand);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	height: 23px;
	padding: var(--adca-space-4);
	transition: all 0.2s ease;
	width: var(--adca-space-32) !important;
}

.adca-rte__toolbar-btn svg,
.adca-rte__toolbar-icon {
	display: block;
	height: var(--adca-space-32);
	width: var(--adca-space-32);
}

.adca-rte__toolbar-btn:hover:not(:disabled) {
	background-color: var(--adca-sys-border-subtle);
	color: var(--adca-sys-brand);
}

.adca-rte__toolbar-btn.is-active {
	background-color: var(--adca-sys-border-default);
	color: var(--adca-sys-text-subtext);
}

.adca-rte__toolbar-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Images inserted into the editor */
.adca-rte__image {
	max-width: 100%;
	height: auto;
	border-radius: var(--adca-radius-sm);
	display: block;
}

/* Scroll container */
.adca-rte__content-scroll-container {
	width: 100%;
	height: 140px;
	overflow-y: auto;
}

.tiptap {
	padding: var(--adca-space-16);
	min-height: 100%;
	outline: none;
	box-sizing: border-box;
	caret-color: var(--adca-sys-text-subtext);
}

.tiptap p {
	margin: 0 0 var(--adca-space-8) 0;
	font-family: var(--adca-font-family-base);
	font-size: var(--adca-font-size-body);
	line-height: var(--adca-line-height-body);
	color: var(--adca-sys-text-subtext);
}

.tiptap p:last-child {
	margin-bottom: 0;
}

.tiptap a {
	color: var(--adca-sys-brand);
	cursor: pointer;
	text-decoration: underline;
	word-break: break-word;
}

.tiptap a:hover {
	color: var(--adca-sys-brand);
}

/* List Formatting */
.tiptap ul,
.tiptap ol {
	padding: 0 var(--adca-space-16);
	margin: var(--adca-space-4) var(--adca-space-16)
		var(--adca-space-4) 0.4rem;
}

.tiptap ul {
	list-style-type: disc;
}
.tiptap ol {
	list-style-type: decimal;
}

.tiptap li p {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

/* Headings in editor content — h1-h6 mapped to theme scale */
.tiptap h1,
.tiptap h2,
.tiptap h3,
.tiptap h4,
.tiptap h5,
.tiptap h6 {
	font-family: var(--adca-font-family-base);
	line-height: 1.2;
	margin-top: var(--adca-space-16);
	margin-bottom: var(--adca-space-8);
	color: var(--adca-sys-text-subtext);
}

.tiptap h1 {
	font-size: var(--adca-font-size-page-title);
	font-weight: var(--adca-font-weight-bold);
}
.tiptap h2 {
	font-size: var(--adca-font-size-section-heading);
	font-weight: var(--adca-font-weight-semibold);
}
.tiptap h3 {
	font-size: var(--adca-font-size-card-heading);
	font-weight: var(--adca-font-weight-semibold);
}
.tiptap h4 {
	font-size: var(--adca-font-size-body-lg);
	font-weight: var(--adca-font-weight-semibold);
}
.tiptap h5 {
	font-size: var(--adca-font-size-body);
	font-weight: var(--adca-font-weight-semibold);
}
.tiptap h6 {
	font-size: var(--adca-font-size-caption);
	font-weight: var(--adca-font-weight-semibold);
}

.tiptap blockquote {
	border-left: 3px solid var(--adca-color-neutral-200);
	margin: var(--adca-space-16) 0;
	padding-left: var(--adca-space-16);
	font-style: italic;
	color: var(--adca-sys-text-subtext);
}

/* Placeholder */
.tiptap p.is-editor-empty:first-child::before {
	content: attr(data-placeholder);
	float: left;
	color: var(--adca-sys-text-muted);
	pointer-events: none;
	height: 0;
}

[dir='rtl'] .tiptap p.is-editor-empty:first-child::before {
	float: right;
}

/* Attachment node */
.attachment-marker {
	background-color: var(--adca-sys-bg-page);
	padding: 2px 6px;
	border-radius: var(--adca-radius-sm);
	border: 1px solid var(--adca-sys-border-subtle);
	font-size: 0.9em;
	margin: 0 2px;
	display: inline-block;
}

/* Footer */
.adca-rte__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--adca-space-4);
	width: 100%;
	max-width: 100%;
}

.adca-input-helper--error {
	color: var(--adca-sys-status-error-text);
	font-size: var(--adca-font-size-caption);
	font-family: var(--adca-font-family-base);
}

/* Read-only HTML content rendered from RichTextEditor output */
.adca-rte__view {
	caret-color: unset;
	min-height: unset;
	outline: unset;
	padding: 0;
}

.adca-rte__char-count {
	color: var(--adca-sys-text-muted);
	flex-shrink: 0;
	font-size: var(--adca-font-size-caption);
	line-height: var(--adca-line-height-caption);
	margin-inline-start: auto;
}

/* Link dialog */
.adca-rte__modal {
	background-color: var(--adca-color-white);
	box-sizing: border-box;
	max-height: min(90dvh, 520px);
	max-width: calc(100vw - 32px);
	overflow: hidden;
	width: min(420px, calc(100vw - 32px));
}

/* Header, body, and footer share one horizontal/vertical inset so the
   title, fields, and action buttons all line up against the same edge —
   the base modal.css gives each section a different default padding. */
.adca-rte__modal .adca-modal__header,
.adca-rte__modal .adca-modal__body,
.adca-rte__modal .adca-modal__footer {
	padding: var(--adca-space-24, 24px);
}

.adca-rte__modal .adca-modal__body {
	flex: 0 1 auto;
	max-height: calc(90dvh - 88px);
	overflow-y: auto;
}

.adca-rte__link-dialog {
	background-color: var(--adca-color-white);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--adca-space-16);
	min-width: 0;
	width: 100%;
}

.adca-rte__link-dialog .adca-input-group {
	min-width: 0;
	width: 100%;
}

.adca-rte__link-dialog input {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

/* The base .adca-input-wrapper ships with no padding of its own — every
   consumer is expected to size it — so without this the dialog's fields
   render text flush against the border. */
.adca-rte__link-control .adca-input-wrapper {
	border-radius: var(--adca-radius-md);
	height: 46px;
	min-height: 46px;
	padding-inline: var(--adca-space-16);
}

.adca-rte__link-dialog-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--adca-space-16, 16px);
}

.adca-rte__link-menu {
	animation: adcaFadeIn 0.2s ease;
	background: var(--adca-color-white);
	border: 1px solid var(--adca-sys-border-subtle);
	border-radius: var(--adca-radius-md);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	inline-size: max-content;
	margin: 0;
	max-inline-size: min(220px, calc(100vw - 24px));
	min-inline-size: 128px;
	padding: var(--adca-space-4);
	position: fixed;
	z-index: 9999;
}

.adca-rte__link-menu-item {
	align-items: center;
	background: none;
	border: none;
	border-radius: var(--adca-radius-sm);
	color: var(--adca-sys-text-subtext);
	cursor: pointer;
	display: flex;
	font-size: 13px;
	gap: var(--adca-space-8);
	padding: var(--adca-space-8) var(--adca-space-12);
	text-align: start;
	transition: background-color 0.2s;
	width: 100%;
}

.adca-rte__link-menu-item:hover {
	background-color: var(--adca-sys-bg-lightest);
	color: var(--adca-sys-text-muted);
}

.adca-rte__link-menu-item svg {
	font-size: var(--adca-font-size-body);
	flex: 0 0 auto;
}

/* ==========================================================================
   Responsive — tablet / phone / small screens
   ========================================================================== */

/* Tablet (≤ 768px) */
@media (max-width: 768px) {
	.adca-rte {
		max-width: 100%;
	}

	.adca-rte__footer {
		max-width: 100%;
	}

	.adca-rte__buttons-wrapper {
		gap: 5px;
		padding: var(--adca-space-8) var(--adca-space-12);
	}

	.adca-rte__toolbar-btn {
		height: 23px;
		width: 23px !important;
	}
}

/* Tablet (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
	.adca-rte__modal {
		max-width: min(460px, calc(100vw - 48px));
		width: min(460px, calc(100vw - 48px));
	}
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
	.adca-rte__modal-overlay {
		align-items: center;
		justify-content: center;
		padding: max(var(--adca-space-12), env(safe-area-inset-top))
			max(var(--adca-space-12), env(safe-area-inset-right))
			max(var(--adca-space-12), env(safe-area-inset-bottom))
			max(var(--adca-space-12), env(safe-area-inset-left));
	}

	.adca-rte__modal {
		margin: 0;
		max-height: min(82dvh, 460px);
		max-width: 100%;
		width: 100%;
	}

	/* Same reasoning as the desktop/tablet rule above — one shared inset
	   keeps the title, fields, and buttons flush with the same edge. */
	.adca-rte__modal .adca-modal__header,
	.adca-rte__modal .adca-modal__body,
	.adca-rte__modal .adca-modal__footer {
		padding: var(--adca-space-16, 16px);
	}

	.adca-rte__modal .adca-modal__header {
		align-items: center;
		gap: var(--adca-space-16, 16px);
	}

	.adca-rte__modal .adca-modal__title {
		font-size: var(--adca-font-size-card-heading, 18px);
		line-height: var(--adca-line-height-card-heading, 24px);
		overflow-wrap: anywhere;
	}

	.adca-rte__modal .adca-modal__body {
		max-height: calc(82dvh - 64px);
	}

	.adca-rte__link-dialog {
		gap: var(--adca-space-20, 14px);
	}

	.adca-rte__link-dialog-actions {
		flex-direction: column-reverse;
		gap: var(--adca-space-12, 12px);
		width: 100%;
	}

	.adca-rte__link-dialog-actions .adca-btn {
		min-height: 40px;
		width: 100%;
	}

	.adca-rte__buttons-wrapper {
		gap: 5px;
		padding: var(--adca-space-8) var(--adca-space-12);
	}

	.adca-rte__toolbar-btn {
		height: 23px;
		width: 23px !important;
	}

	.adca-rte__toolbar-btn svg,
	.adca-rte__toolbar-icon {
		width: var(--adca-space-32);
		height: var(--adca-space-32);
	}

	.adca-rte__divider {
		height: var(--adca-space-16);
		margin: 0 2px;
	}
}

/* Very small (≤ 360px) */
@media (max-width: 360px) {
	.adca-rte__toolbar-btn {
		height: 23px;
		width: 23px !important;
	}
}

/* Simple toolbar icon buttons */
.adca-rte__toolbar-btn--bold,
.adca-rte__toolbar-btn--italic,
.adca-rte__toolbar-btn--underline,
.adca-rte__toolbar-btn--strike,
.adca-rte__toolbar-btn--link,
.adca-rte__toolbar-btn--image,
.adca-rte__toolbar-btn--align-left,
.adca-rte__toolbar-btn--align-center,
.adca-rte__toolbar-btn--align-right,
.adca-rte__toolbar-btn--bullet-list,
.adca-rte__toolbar-btn--numbered-list {
	width: var(--adca-space-32) !important;
}

/* ---- components/timepicker.css ---- */
/* ==========================================================================
   Time Picker Component Styles
   ========================================================================== */
.adca-time-picker-group {
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-4);
}

.adca-time-picker-group--fullwidth {
  width: 100%;
}

.adca-time-picker-label {
  font-size: var(--adca-font-size-caption);
  font-weight: var(--adca-font-weight-semibold);
  color: var(--adca-sys-text-heading);
}

.adca-time-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--adca-space-8) var(--adca-space-12);
  border: 1px solid var(--adca-sys-border-default, var(--adca-sys-border-subtle));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 40px;
}

.adca-time-picker-trigger--disabled {
  background-color: var(--adca-sys-bg-disabled, var(--adca-sys-bg-lightest));
  cursor: not-allowed;
  opacity: 0.7;
}

.adca-time-picker-trigger--error {
  border-color: var(--adca-sys-status-error-text, var(--adca-sys-status-error-text));
}

.adca-time-picker-value {
  font-size: var(--adca-font-size-body, 14px);
  color: var(--adca-sys-text-heading);
}

.adca-time-picker-placeholder {
  color: var(--adca-sys-text-disabled, var(--adca-sys-text-muted));
}

.adca-time-picker-icon {
  color: var(--adca-sys-text-subtext);
}

.adca-time-picker-dropdown {
  /* bg-lightest is a 5% tint, which barely occludes the form behind this
     floating, portalled panel -- needs the opaque equivalent. */
  background-color: var(--adca-sys-bg-lightest-opaque, var(--adca-color-white));
  border: 1px solid var(--adca-sys-border-default, var(--adca-sys-border-subtle));
  border-radius: var(--adca-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: var(--adca-space-8);
  width: 240px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-8);
}

.adca-time-picker-columns {
  display: flex;
  gap: var(--adca-space-4);
  height: 200px;
}

.adca-time-picker-column {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: var(--adca-space-4);
}

/* Custom scrollbar for column */
.adca-time-picker-column::-webkit-scrollbar {
  width: 4px;
}

.adca-time-picker-column::-webkit-scrollbar-thumb {
  background: var(--adca-sys-border-subtle);
  border-radius: 10px;
}

.adca-time-picker-col-label {
  position: sticky;
  top: 0;
  background: var(--adca-sys-bg-lightest);
  font-size: var(--adca-font-size-caption-sm);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--adca-sys-text-disabled);
  padding-bottom: var(--adca-space-4);
  z-index: 1;
}

.adca-time-picker-cell {
  background: none;
  border: none;
  padding: var(--adca-space-4);
  border-radius: var(--adca-radius-sm);
  cursor: pointer;
  font-size: 13px;
  text-align: center;
  transition: all 0.2s;
}

.adca-time-picker-cell:hover {
  background-color: var(--adca-sys-bg-lightest, var(--adca-sys-bg-lightest));
}

.adca-time-picker-cell--selected {
  background-color: var(--adca-sys-selected, var(--adca-sys-selected)) !important;
  color: var(--adca-color-white);
  font-weight: 700;
}

.adca-time-picker-cell--disabled,
.adca-time-picker-cell--disabled:hover {
  background: none;
  color: var(--adca-sys-text-disabled, var(--adca-sys-border-default));
  cursor: not-allowed;
}

.adca-time-picker-footer {
  border-top: 1px solid var(--adca-sys-border-subtle);
  padding-top: var(--adca-space-8);
}

/* Quick-pick duration list (Start Time + 30/60/90/120/150 min, + Custom) */
.adca-time-picker-duration-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.adca-time-picker-duration-item {
  display: flex;
  align-items: baseline;
  gap: var(--adca-space-8);
  background: none;
  border: none;
  padding: 10px var(--adca-space-12);
  border-radius: var(--adca-radius-sm);
  cursor: pointer;
  font-size: 13px;
  text-align: start;
  transition: all 0.2s;
  color: var(--adca-sys-text-heading);
}

.adca-time-picker-duration-item:hover {
  background-color: var(--adca-sys-bg-lightest, var(--adca-sys-bg-lightest));
}

.adca-time-picker-duration-item--selected {
  background-color: var(--adca-sys-selected, var(--adca-sys-selected));
  color: var(--adca-color-white);
  font-weight: 700;
}

.adca-time-picker-duration-item-time {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.adca-time-picker-duration-item-label {
  color: var(--adca-sys-text-subtext);
  font-size: var(--adca-font-size-caption);
}

.adca-time-picker-duration-item--selected .adca-time-picker-duration-item-label {
  color: inherit;
  opacity: 0.85;
}

.adca-time-picker-duration-item--custom {
  border-top: 1px solid var(--adca-sys-border-subtle);
  margin-top: var(--adca-space-4);
  padding-top: 10px;
  font-weight: 600;
  color: var(--adca-sys-selected, var(--adca-sys-selected));
}

/* RTL Support */
[dir=rtl] .adca-time-picker-trigger {
  flex-direction: row-reverse;
}
/* ---- components/progress.css ---- */
/* ==========================================================================
   Progress Bar Component Styles
   ========================================================================== */

.adca-progress-container {
  display: flex;
  box-sizing: border-box;
  width: 100%;
}

/* ── top (default): label on its own line, then [track ── value] row ── */
.adca-progress-container--top {
  flex-direction: column;
  gap: 6px;
}

.adca-progress-bar-row {
  display: flex;
  align-items: center;
  gap: var(--adca-space-8);
}

/* Track fills remaining space in the row unless barWidth is set inline */
.adca-progress-bar-row .adca-progress-track {
  flex: 1;
  min-width: 0;
}

/* ── inline: [label] [track] [value] on a single line ── */
.adca-progress-container--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--adca-space-8);
}

.adca-progress-container--inline .adca-progress-track {
  flex: 1;
  min-width: 0;
}

/* ── Label ── */
.adca-progress-label {
  font-size: var(--adca-font-size-body, 14px);
  font-weight: var(--adca-font-weight-regular);
  color: var(--adca-sys-text-heading, var(--adca-sys-text-heading));
  white-space: nowrap;
}

/* ── Value ── */
.adca-progress-value {
  font-size: var(--adca-font-size-caption, 12px);
  font-weight: var(--adca-font-weight-semibold);
  color: var(--adca-sys-text-heading, var(--adca-sys-text-heading));
  white-space: nowrap;
}

/* ── Track ── */
.adca-progress-track {
  background-color: var(--adca-sys-bg-lightest, var(--adca-sys-bg-lightest));
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

/* ── Sizes ── */
.adca-progress--sm { height: 4px; }
.adca-progress--md { height: 6px; }
.adca-progress--lg { height: 12px; }

/* ── Bar ── */
.adca-progress-bar {
  height: 100%;
  width: var(--progress-width, 0%);
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease;
  border-radius: 999px;
}

/* ── Variants ── */
.adca-progress-bar--primary { background-color: var(--adca-sys-feature-mangrove-bg, var(--adca-sys-feature-mangrove-bg)); }
.adca-progress-bar--success { background-color: var(--adca-sys-status-success-text, var(--adca-sys-status-success-text)); }
.adca-progress-bar--warning { background-color: var(--adca-sys-status-pending-text, var(--adca-sys-status-pending-text)); }
.adca-progress-bar--danger  { background-color: var(--adca-sys-status-error-text, var(--adca-sys-status-error-text)); }
.adca-progress-bar--neutral { background-color: var(--adca-sys-text-subtext, var(--adca-sys-text-muted)); }

/* ── Animation (indeterminate, future use) ── */
@keyframes progress-loading {
  from { left: -30%; width: 30%; }
  to   { left: 100%; width: 30%; }
}

/* ---- components/tabs.css ---- */
/* ==========================================================================
   Tabs Component Styles
   ========================================================================== */
.adca-tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.adca-tabs--vertical {
  flex-direction: column;
}

.adca-tabs__container {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden; /* For scrollable behavior */
  flex: 1;
  min-width: 0;
}

.adca-tabs__list {
  display: flex;
  gap: var(--adca-space-8, 4px);
  width: 100%;
}

.adca-tabs--full .adca-tab {
  flex: 1;
}

.adca-tabs--scrollable .adca-tabs__list {
  overflow-x: auto;
  scrollbar-width: none; /* Hide scrollbar Firefox */
  -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
}

.adca-tabs--scrollable .adca-tabs__list::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome/Safari */
}

/* Tab Button */
.adca-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--adca-space-8);
  padding: var(--adca-space-12) var(--adca-space-20);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  color: var(--adca-sys-text-subtext, var(--adca-sys-text-muted));
  font-family: var(--adca-sys-font-family);
  font-weight: var(--adca-font-weight-regular);
  border-bottom: 2px solid transparent;
}

.adca-tab:hover:not(.adca-tab--disabled) {
  color: var(--adca-sys-text-heading, var(--adca-sys-text-heading));
  background-color: var(--adca-sys-bg-lightest, var(--adca-sys-bg-lightest));
}

/* Active reads in heading colour and semibold, with the underline in ink --
   not the lighter brand green, which is meant for icons/muted accents and
   barely distinguished the active tab from its neighbours. */
.adca-tab--active {
  color: var(--adca-sys-text-heading);
  font-weight: var(--adca-font-weight-semibold);
}

/* Variant: Underline (default) */
.adca-tabs--underline .adca-tab--active {
  border-bottom-color: rgb(var(--adca-ink-rgb));
}

/* Variant: Pills */
.adca-tabs--pills .adca-tab {
  border-radius: 999px;
  border-bottom: none;
  margin: var(--adca-space-4);
}

.adca-tabs--pills .adca-tab--active {
  background-color: var(--adca-sys-brand, var(--adca-sys-brand));
  color: var(--adca-color-white);
}

/* Scroll Buttons */
.adca-tabs__scroll-button {
  background-color: var(--adca-sys-bg-lightest);
  border: 1px solid var(--adca-sys-border-subtle);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed square box so the circular shape never stretches into an oval
     when a flex-row ancestor's cross-axis sizing changes. */
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
}

/* RTL Support */
[dir=rtl] .adca-tab__icon {
  order: 1;
}

[dir=rtl] .adca-tab__label {
  order: 0;
}
/* ---- components/card.css ---- */
/* ==========================================================================
   ADCA Card Component Styles (BEM)
   ========================================================================== */
:root {
  --adca-card-bg: var(--adca-sys-bg-lightest);
  --adca-card-border: var(--adca-sys-border-subtle);
  --adca-card-radius: var(--adca-space-8);
  --adca-card-shadow: var(--adca-sys-shadow-card);
  --adca-card-transition: all 0.3s ease;
  /* Animations */
  --adca-shimmer-duration: 1.5s;
  --adca-shimmer-color: var(--adca-sys-border-subtle);
  --adca-shimmer-highlight: var(--adca-color-neutral-200);
}

@keyframes adca-shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.adca-shimmer, .adca-status-card--skeleton .adca-status-card__skeleton-text, .adca-status-card--skeleton .adca-status-card__skeleton-title, .adca-status-card--skeleton .adca-status-card__skeleton-icon, .adca-metric-card--skeleton .adca-metric-card__skeleton-trend, .adca-metric-card--skeleton .adca-metric-card__skeleton-value, .adca-metric-card--skeleton .adca-metric-card__skeleton-label, .adca-card--skeleton .adca-card__skeleton-button, .adca-card--skeleton .adca-card__skeleton-text, .adca-card--skeleton .adca-card__skeleton-subtitle, .adca-card--skeleton .adca-card__skeleton-title {
  background: linear-gradient(to right, var(--adca-shimmer-color) 8%, var(--adca-shimmer-highlight) 18%, var(--adca-shimmer-color) 33%);
  background-size: 800px 104px;
  animation: adca-shimmer var(--adca-shimmer-duration) linear infinite forwards;
}

/* Base Card */
.adca-card {
  background-color: var(--adca-color-white);
  border: 1px solid var(--adca-sys-border-subtle);
  border-radius: var(--adca-card-radius);
  overflow: hidden;
  transition: var(--adca-card-transition);
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  /* Skeleton Loading */
}

[dir="rtl"] .adca-card,
[dir="rtl"] .adca-metric-card,
[dir="rtl"] .adca-brand-card,
[dir="rtl"] .adca-status-card {
  font-family: var(--adca-font-family-arabic);
}

.adca-card--hoverable:hover {
  transform: translateY(-4px);
  box-shadow: var(--adca-card-shadow);
}
.adca-card__header {
  padding: var(--adca-space-32, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-4);
}
.adca-card__header--has-divider {
  border-bottom: 1px solid var(--adca-card-border);
}
.adca-card__title {
  margin: 0;
  font-size: var(--adca-font-size-body-lg);
  font-weight: var(--adca-font-weight-bold);
  color: var(--adca-sys-text-heading);
}
.adca-card__header-subtitle {
  margin: 0;
  font-size: var(--adca-font-size-caption);
  color: var(--adca-sys-text-muted);
}
.adca-card__body {
  padding: var(--adca-space-32, 16px);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-24, 12px);
}
.adca-card__body--no-gap {
  gap: 0;
}
.adca-card__body-text {
  margin: 0;
  font-size: var(--adca-font-size-body);
  line-height: var(--adca-line-height-body);
  color: var(--adca-sys-text-subtext);
}
.adca-card__actions {
  display: flex;
  gap: var(--adca-space-12);
  margin-top: var(--adca-space-8);
}
.adca-card__footer {
  padding: var(--adca-space-24, 12px) var(--adca-space-32, 16px);
  background-color: rgba(0, 0, 0, 0.02);
}
.adca-card__footer--has-divider {
  border-top: 1px solid var(--adca-card-border);
}
.adca-card__footer--centered {
  display: flex;
  justify-content: center;
}
.adca-card--skeleton {
  pointer-events: none;
}
.adca-card--skeleton .adca-card__skeleton-title {
  height: 20px;
  width: 60%;
  border-radius: var(--adca-radius-sm);
}
.adca-card--skeleton .adca-card__skeleton-subtitle {
  height: 14px;
  width: 40%;
  border-radius: var(--adca-radius-sm);
}
.adca-card--skeleton .adca-card__skeleton-text {
  height: 14px;
  width: 100%;
  border-radius: var(--adca-radius-sm);
}
.adca-card--skeleton .adca-card__skeleton-text--short {
  width: 70%;
}
.adca-card--skeleton .adca-card__skeleton-button {
  height: 32px;
  width: 100px;
  border-radius: var(--adca-radius-sm);
}

/* Metric Card */
.adca-metric-card {
  background-color: var(--adca-sys-bg-lightest);
  border: 1px solid var(--adca-sys-border-subtle);
  border-radius: var(--adca-radius-lg);
  padding: var(--adca-space-16);
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-8);
  box-shadow: var(--adca-shadow-sm);
  min-width: 140px;
  /* Metric Skeleton */
}
.adca-metric-card__label {
  font-size: var(--adca-font-size-caption);
  font-weight: var(--adca-font-weight-semibold);
  color: var(--adca-sys-text-muted);
}
.adca-metric-card__content {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--adca-space-8);
}
.adca-metric-card__value {
  font-size: 28px;
  font-weight: var(--adca-font-weight-bold);
  color: var(--adca-sys-text-heading);
}
.adca-metric-card__trend {
  font-size: var(--adca-font-size-caption);
  font-weight: var(--adca-font-weight-bold);
  padding: 2px var(--adca-space-8);
  border-radius: 20px;
}
.adca-metric-card__trend--neutral {
  background-color: var(--adca-sys-border-subtle);
  color: var(--adca-sys-text-muted);
}
.adca-metric-card__trend--positive {
  background-color: var(--adca-sys-status-success-bg);
  color: var(--adca-sys-status-success-text);
}
.adca-metric-card__trend--negative {
  background-color: var(--adca-sys-status-error-bg);
  color: var(--adca-sys-status-error-text);
}
.adca-metric-card--skeleton .adca-metric-card__skeleton-label {
  height: 14px;
  width: 60%;
  border-radius: var(--adca-radius-sm);
}
.adca-metric-card--skeleton .adca-metric-card__skeleton-value {
  height: 32px;
  width: 40%;
  border-radius: var(--adca-radius-sm);
}
.adca-metric-card--skeleton .adca-metric-card__skeleton-trend {
  height: 18px;
  width: 30%;
  border-radius: 10px;
}

/* Brand Card */
.adca-brand-card {
  padding: var(--adca-space-24);
  border-radius: var(--adca-radius-lg);
  color: var(--adca-color-white);
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-16);
  min-height: 180px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.adca-brand-card--variant1 {
  background: var(--adca-gradient-ghat-night);
}
.adca-brand-card--variant2 {
  background: var(--adca-gradient-forest-rise);
}
.adca-brand-card--variant3 {
  background: var(--adca-gradient-dune-warm);
}
.adca-brand-card--variant4 {
  background: var(--adca-gradient-sidr-calm);
}
.adca-brand-card--variant5 {
  background: var(--adca-gradient-mist-veil);
}
.adca-brand-card__title {
  margin: 0;
  font-size: var(--adca-font-size-card-heading);
  font-weight: var(--adca-font-weight-bold);
}
.adca-brand-card__description {
  margin: 0;
  font-size: var(--adca-font-size-body);
  opacity: 0.9;
  line-height: 1.4;
}
.adca-brand-card__button {
  background-color: var(--adca-color-white);
  color: var(--adca-sys-text-heading);
  border: none;
  padding: var(--adca-space-8) var(--adca-space-16);
  border-radius: 6px;
  font-weight: var(--adca-font-weight-semibold);
  font-size: var(--adca-font-size-caption);
  cursor: pointer;
  align-self: flex-start;
  transition: transform 0.2s ease;
}
.adca-brand-card__button:hover {
  transform: scale(1.05);
}
.adca-brand-card--skeleton {
  opacity: 0.7;
}
.adca-brand-card--skeleton .adca-brand-card__skeleton-title {
  height: 20px;
  width: 70%;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: var(--adca-radius-sm);
}
.adca-brand-card--skeleton .adca-brand-card__skeleton-text {
  height: 14px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--adca-radius-sm);
}
.adca-brand-card--skeleton .adca-brand-card__skeleton-text--short {
  width: 60%;
}
.adca-brand-card--skeleton .adca-brand-card__skeleton-button {
  height: 32px;
  width: 100px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 6px;
}

/* Status Card */
.adca-status-card {
  display: flex;
  gap: var(--adca-space-16);
  padding: var(--adca-space-16);
  border-radius: var(--adca-space-8);
  background-color: var(--adca-color-white);
  border: 1px solid var(--adca-card-border);
  align-items: flex-start;
}
.adca-status-card__icon {
  font-size: var(--adca-font-size-page-title);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adca-status-card--success {
  border-inline-start: 4px solid var(--adca-sys-status-success-text);
}
.adca-status-card--success .adca-status-card__icon {
  color: var(--adca-sys-status-success-text);
}
.adca-status-card--warning {
  border-inline-start: 4px solid var(--adca-sys-status-pending-text);
}
.adca-status-card--warning .adca-status-card__icon {
  color: var(--adca-sys-status-pending-text);
}
.adca-status-card--error {
  border-inline-start: 4px solid var(--adca-sys-status-error-text);
}
.adca-status-card--error .adca-status-card__icon {
  color: var(--adca-sys-status-error-text);
}
.adca-status-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--adca-space-4);
}
.adca-status-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--adca-font-weight-bold);
  color: var(--adca-sys-text-heading);
}
.adca-status-card__description {
  margin: 0;
  font-size: var(--adca-font-size-caption);
  color: var(--adca-sys-text-subtext);
  line-height: 1.4;
}
.adca-status-card--skeleton .adca-status-card__skeleton-icon {
  height: 24px;
  width: 24px;
  border-radius: 50%;
}
.adca-status-card--skeleton .adca-status-card__skeleton-title {
  height: 16px;
  width: 100px;
  border-radius: var(--adca-radius-sm);
}
.adca-status-card--skeleton .adca-status-card__skeleton-text {
  height: 14px;
  width: 180px;
  border-radius: var(--adca-radius-sm);
}

/* RTL Support */
[dir=rtl] .adca-card__header, [dir=rtl] .adca-card__body, [dir=rtl] .adca-card__footer {
  padding-inline: var(--adca-space-16);
}
[dir=rtl] .adca-card__actions {
  gap: var(--adca-space-12);
}
[dir=rtl] .adca-status-card {
  border-inline-start: 4px solid transparent; /* Reset */
}
[dir=rtl] .adca-status-card--success {
  border-inline-start: 4px solid var(--adca-sys-status-success-text);
}
[dir=rtl] .adca-status-card--warning {
  border-inline-start: 4px solid var(--adca-sys-status-pending-text);
}
[dir=rtl] .adca-status-card--error {
  border-inline-start: 4px solid var(--adca-sys-status-error-text);
}

/* Responsive queries */
@media (max-width: 480px) {
  .adca-card {
    border-radius: 0;
  }
  .adca-card__header, .adca-card__body {
    padding: var(--adca-space-12);
  }
  .adca-card__title {
    font-size: 15px;
  }
  .adca-metric-card {
    padding: var(--adca-space-12);
  }
  .adca-metric-card__value {
    font-size: var(--adca-font-size-page-title);
  }
}
@media (min-width: 768px) {
  .adca-card {
    border-radius: var(--adca-radius-md);
  }
}
@media (min-width: 1024px) {
  .adca-card {
    max-width: 100%;
  }
}

/* ---- components/filter-panel.css ---- */
/* ==========================================================================
   FilterPanel Component
   ========================================================================== */

.adca-filter-panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  background-color: var(--adca-color-white);
  border: 1px solid var(--adca-sys-border-subtle);
  box-shadow: var(--adca-shadow-md);
  border-radius: var(--adca-radius-md);
  width: 320px;
  /* Never exceed the viewport, whatever the anchor does */
  max-width: calc(100vw - (2 * var(--adca-space-16)));
  /* Cap the height so long option lists scroll in the body instead of
     running off the bottom of the screen */
  max-height: 70vh;
  max-height: 70dvh;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease-in-out;
}

/* Header Section */
.adca-filter-panel__header {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-inline: var(--adca-space-16);
  padding-top: var(--adca-space-12);
  padding-bottom: var(--adca-space-12);
  width: 100%;
  border-bottom: 1px solid var(--adca-sys-border-subtle);
  background-color: var(--adca-color-white);
  flex-shrink: 0;
}

.adca-filter-panel__title {
  font-style: normal;
  font-weight: var(--adca-font-weight-semibold);
  font-size: var(--adca-font-size-body);
  line-height: var(--adca-line-height-body);
  color: var(--adca-sys-text-subtext);
  margin: 0;
}

.adca-filter-panel__close-btn,
.adca-filter-panel__close-btn.adca-btn {
  background: none !important;
  border: none !important;
  cursor: pointer;
  padding: var(--adca-space-4) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--adca-sys-text-subtext) !important;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  min-height: unset !important;
  height: auto !important;
  width: auto !important;
}

.adca-filter-panel__close-btn:hover,
.adca-filter-panel__close-btn.adca-btn:hover {
  opacity: 1;
}

/* Body / Scrollable Content */
.adca-filter-panel__body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--adca-space-16);
  gap: var(--adca-space-16);
  width: 100%;
  overflow-y: auto;
  /* min-height:0 lets this shrink below its content so it, not the panel,
     is what scrolls when the height cap kicks in */
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
  background-color: var(--adca-color-white);
}

/* Scrollbar styling */
.adca-filter-panel__body::-webkit-scrollbar {
  width: 6px;
}

.adca-filter-panel__body::-webkit-scrollbar-track {
  background: transparent;
}

.adca-filter-panel__body::-webkit-scrollbar-thumb {
  background-color: var(--adca-sys-border-subtle);
  border-radius: 3px;
}

/* Category/Group Section */
.adca-filter-panel__section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--adca-space-8);
  width: 100%;
}

.adca-filter-panel__section-label {
  font-style: normal;
  font-weight: var(--adca-font-weight-semibold);
  font-size: var(--adca-font-size-caption);
  line-height: var(--adca-line-height-caption);
  color: var(--adca-sys-text-subtext);
  margin: 0;
  padding-inline: var(--adca-space-4);
}

/* Options Wrapper */
.adca-filter-panel__options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  padding: 0;
  gap: var(--adca-space-8);
  width: 100%;
}

/* Selection Pill/Button */
.adca-filter-panel__pill,
.adca-filter-panel__pill.adca-btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--adca-space-8) var(--adca-space-16) !important;
  height: 36px !important;
  background-color: var(--adca-color-white) !important;
  border: 1px solid var(--adca-sys-border-subtle) !important;
  border-radius: var(--adca-radius-md) !important;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-style: normal;
  font-weight: var(--adca-font-weight-semibold) !important;
  font-size: var(--adca-font-size-caption) !important;
  line-height: var(--adca-line-height-body) !important;
  color: var(--adca-sys-text-subtext) !important;
  user-select: none;
}

.adca-filter-panel__pill .adca-btn__label {
  font-weight: var(--adca-font-weight-semibold) !important;
  font-size: var(--adca-font-size-caption) !important;
  line-height: var(--adca-line-height-body) !important;
}

.adca-filter-panel__pill:focus-visible,
.adca-filter-panel__pill.adca-btn:focus-visible {
  outline: 2px solid var(--adca-sys-brand) !important;
  outline-offset: 1px !important;
}

/* Selected Pill state. A solid selected-accent fill with inverse (white)
   text, not a grey fill with a brand-coloured border -- the border-only
   treatment reads as barely different from the unselected pill. */
.adca-filter-panel__pill--active,
.adca-filter-panel__pill--active.adca-btn {
  background-color: var(--adca-sys-selected) !important;
  border: 1px solid var(--adca-sys-selected) !important;
  color: var(--adca-sys-text-inverse) !important;
}

.adca-filter-panel__pill--active .adca-btn__label {
  color: var(--adca-sys-text-inverse) !important;
}

/* Footer Section */
.adca-filter-panel__footer {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-inline: var(--adca-space-16);
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  border-top: 1px solid var(--adca-sys-border-subtle);
  background-color: var(--adca-color-white);
  flex-shrink: 0;
}

/* Reset Button */
.adca-filter-panel__reset-btn,
.adca-filter-panel__reset-btn.adca-btn {
  background: none !important;
  border: 1px solid var(--adca-button-outline-border);
  cursor: pointer;
  font-style: normal;
  font-weight: var(--adca-font-weight-semibold) !important;
  font-size: 13px !important;
  line-height: var(--adca-line-height-body) !important;
  color: var(--adca-sys-text-subtext) !important;
  padding: var(--adca-space-8) 10px !important;
  border-radius: var(--adca-radius-md) !important;
  transition: all 0.2s ease;
  user-select: none;
}

.adca-filter-panel__reset-btn .adca-btn__label {
  font-weight: var(--adca-font-weight-semibold) !important;
  font-size: 13px !important;
  line-height: var(--adca-line-height-body) !important;
}

.adca-filter-panel__reset-btn:hover,
.adca-filter-panel__reset-btn.adca-btn:hover {
  background-color: rgb(var(--adca-ink-rgb)) !important;
  color: var(--adca-sys-text-inverse) !important;
}

/* Submit Button. Same colour source as .adca-btn--primary
   (--adca-button-primary-bg, ghaf dark) -- not --adca-sys-brand, which is a
   lighter token meant for icons and muted accents, not solid fills. This
   override pre-dates and duplicates the Button component's own primary
   variant rather than reusing it, so it carried the same base-colour
   mistake independently; fixed here rather than reusing variant="primary"
   because the compact 36px footer sizing below is this component's own
   deliberate choice, not a bug. */
.adca-filter-panel__submit-btn,
.adca-filter-panel__submit-btn.adca-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: var(--adca-space-8) var(--adca-space-16) !important;
  height: 36px !important;
  background-color: var(--adca-button-primary-bg) !important;
  border: none !important;
  border-radius: var(--adca-radius-md) !important;
  cursor: pointer;
  font-style: normal;
  font-weight: var(--adca-font-weight-semibold) !important;
  font-size: var(--adca-font-size-body) !important;
  line-height: var(--adca-line-height-body) !important;
  color: var(--adca-color-white) !important;
  transition:
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  user-select: none;
}

.adca-filter-panel__submit-btn .adca-btn__label {
  font-weight: var(--adca-font-weight-semibold) !important;
  font-size: var(--adca-font-size-body) !important;
  line-height: var(--adca-line-height-body) !important;
}

.adca-filter-panel__submit-btn:hover,
.adca-filter-panel__submit-btn.adca-btn:hover {
  background-color: var(--adca-button-primary-bg-hover) !important;
}

.adca-filter-panel__submit-btn:active,
.adca-filter-panel__submit-btn.adca-btn:active {
  background-color: var(--adca-button-primary-bg-pressed) !important;
}

.adca-filter-panel__submit-btn:focus-visible,
.adca-filter-panel__submit-btn.adca-btn:focus-visible {
  border: 4px solid var(--adca-button-primary-border-focus) !important;
}

.adca-filter-panel__submit-btn:disabled,
.adca-filter-panel__submit-btn.adca-btn:disabled,
.adca-filter-panel__submit-btn[aria-disabled="true"],
.adca-filter-panel__submit-btn.adca-btn[aria-disabled="true"] {
  background-color: var(--adca-button-disabled-bg) !important;
  border-color: var(--adca-button-disabled-bg) !important;
  color: var(--adca-button-disabled-text) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Responsiveness & Directionality Support
   ========================================================================== */

/* RTL Overrides (Fully compliant with modern logical properties) */
[dir="rtl"] .adca-filter-panel {
  text-align: right;
}

/* Mobile: render the panel as a bottom sheet pinned to the viewport.
   Anchoring it absolutely under the filter button meant the footer could land
   below the end of a short (filtered) page, leaving Reset/Apply unreachable.
   Pinning to the viewport keeps header + footer always visible and lets the
   option list scroll between them. */
@media (max-width: 767px) {
  .adca-filter-panel {
    position: fixed !important;
    inset-inline: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none;
    max-height: 85vh;
    max-height: 85dvh;
    z-index: 1000;
    border: none;
    border-top: 1px solid var(--adca-sys-border-subtle);
    border-radius: var(--adca-radius-md) var(--adca-radius-md) 0 0;
    box-shadow: 0 -4px 16px rgba(35, 41, 38, 0.16);
  }

  .adca-filter-panel__footer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, var(--adca-space-0)));
  }
}