/**
 * Platform Admin — internal UI Kit.
 * Kit components (dl-ui-*) are used across every platform-admin surface, so the
 * design tokens MUST resolve globally — not only inside a .dl-ui-kit wrapper.
 * They live on :root; an undefined token (e.g. var(--dl-ui-border)) would
 * invalidate the whole declaration and collapse borders/backgrounds, which is
 * why kit components previously rendered unstyled off the reference page.
 */

:root {
    --dl-ui-card-bg: var(--diyarlist-card-bg-solid, #fff);
    --dl-ui-border: var(--diyarlist-border-soft, #e8ddd4);
    --dl-ui-radius: var(--diyarlist-radius-card, 16px);
    --dl-ui-shadow: var(--diyarlist-card-shadow, 0 6px 24px rgba(31, 41, 51, 0.07));
    --dl-ui-muted: var(--diyarlist-muted, #64748b);
    --dl-ui-text: var(--dl-text, #1f2933);
    --dl-ui-primary: var(--diyarlist-primary, #ff7900);
    --dl-ui-primary-hover: var(--diyarlist-primary-hover, #e56a00);
    --dl-ui-success: #15803d;
    --dl-ui-success-bg: #ecfdf3;
    --dl-ui-warning: #b45309;
    --dl-ui-warning-bg: #fffbeb;
    --dl-ui-danger: #b91c1c;
    --dl-ui-danger-bg: #fef2f2;
    --dl-ui-info: #0369a1;
    --dl-ui-info-bg: #eff6ff;

    /* Spacing tokens (v3.0.165). The kit previously defined NO spacing scale,
       so every module hand-rolled its own paddings and drifted (18.4 / 20 /
       21.6 / 24px card insets across sections). One canonical scale: */
    --dl-ui-space-1: 0.5rem;
    --dl-ui-space-2: 0.75rem;
    --dl-ui-space-3: 1rem;
    --dl-ui-space-4: 1.25rem;
    /* Card/panel inner inset — text never sits closer to a container edge. */
    --dl-ui-card-pad-y: 1.35rem;
    --dl-ui-card-pad-x: 1.5rem;
    /* Compact stat tiles / metric cards. */
    --dl-ui-tile-pad-y: 1.05rem;
    --dl-ui-tile-pad-x: 1.15rem;
    /* Inline inset of a table-card's first/last column + its header, so the
       first column's text aligns with the card title above it. */
    --dl-ui-cell-inline: 1.25rem;
}

.dl-ui-kit {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Read-only help/documentation layout; shared kit, not a role-specific skin. */
.dl-ui-guide { max-width: 1200px; margin-inline: auto; }
.dl-ui-guide__layout { display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); gap: var(--dl-ui-space-4); align-items: start; }
.dl-ui-guide__toc { position: sticky; top: 1rem; }
.dl-ui-guide__toc ol { padding-inline-start: 1.25rem; }
.dl-ui-guide li { margin-block: .7rem; line-height: 1.65; }
.dl-ui-guide h1 { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.2; }
.dl-ui-guide__article { scroll-margin-top: 2rem; overflow-wrap: anywhere; }
.dl-ui-guide__article h2 { font-size: 1.35rem; line-height: 1.35; margin-top: 0; }
.dl-ui-guide__article figure { margin: var(--dl-ui-space-3) 0; }
.dl-ui-guide__article img { display: block; width: 100%; height: auto; border: 1px solid var(--dl-ui-border); border-radius: var(--dl-ui-space-1); }
.dl-ui-guide__back { display: inline-block; margin-inline-start: 1rem; margin-top: 1rem; }
.dl-ui-guide [aria-current="page"] { border-color: var(--dl-ui-text); font-weight: 700; }
.dl-ui-guide [hidden] { display: none !important; }
.dl-ui-guide a:focus-visible, .dl-ui-guide button:focus-visible { outline: 3px solid var(--dl-ui-info); outline-offset: 3px; }
@media (max-width: 800px) {
    .dl-ui-guide__layout { grid-template-columns: minmax(0, 1fr); }
    .dl-ui-guide__toc { position: static; }
}
@media print {
    .dl-ui-guide__layout { display: block; }
    .dl-ui-guide__toc, .dl-ui-guide nav, .dl-ui-guide label, .dl-ui-guide input, .dl-ui-guide button, .dl-ui-guide__back, .dl-ui-guide [data-guide-count], .dl-ui-guide [data-guide-empty], body:has(.dl-ui-guide) .dl-portal-header { display: none !important; }
    .dl-ui-guide [data-guide-article][hidden] { display: block !important; }
    .dl-ui-guide .dl-ui-card { box-shadow: none; border: 0; break-inside: avoid; }
}

.dl-ui-kit__intro {
    margin: 0;
    max-width: 52rem;
    color: var(--dl-ui-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.dl-ui-kit__title {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dl-ui-text);
}

.dl-ui-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dl-ui-section__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dl-ui-text);
}

.dl-ui-section__desc {
    margin: 0;
    color: var(--dl-ui-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.dl-ui-section__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.dl-ui-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.dl-ui-row--stack {
    flex-direction: column;
    align-items: flex-start;
}

.dl-ui-note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dl-ui-muted);
}

/* Cards */
.dl-ui-card {
    background: var(--dl-ui-card-bg);
    border: 1px solid var(--dl-ui-border);
    border-radius: var(--dl-ui-radius);
    box-shadow: var(--dl-ui-shadow);
    padding: var(--dl-ui-card-pad-y) var(--dl-ui-card-pad-x);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.dl-ui-card--clickable {
    cursor: pointer;
}

.dl-ui-card--clickable:hover,
.dl-ui-card--clickable:focus-within {
    border-color: rgba(255, 121, 0, 0.35);
    box-shadow: var(--diyarlist-card-shadow-lg, 0 12px 40px rgba(31, 41, 51, 0.08));
    transform: translateY(-2px);
}

/* Houzez ships a high-specificity, INLINE `a{color:#e4192b}` rule that bleeds its
   link red into clickable kit cards (the card <a> computes red). Pin anchor cards
   and every link state to the kit card text colour. !important is required to beat
   the theme's (0,4,0) inline rule with only the card's classes; scoped strictly to
   a.dl-ui-card. The inner __value (orange) / __text (muted) carry their own colours
   and the theme `a` selector doesn't match them, so they're unaffected. */
a.dl-ui-card,
a.dl-ui-card:link,
a.dl-ui-card:visited,
a.dl-ui-card:hover,
a.dl-ui-card:focus,
a.dl-ui-card:active {
    color: var(--dl-ui-text, #1f2933) !important;
    text-decoration: none !important;
}

.dl-ui-card--soft-hover:hover {
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 8px 26px rgba(31, 41, 51, 0.08);
}

.dl-ui-card__title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
}

.dl-ui-card__text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dl-ui-muted);
    line-height: 1.5;
}

/* Stat card = the Verification Center overview-card look: big orange number on
   top, muted label below (one shared definition for every count card). */
.dl-ui-card--stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.25rem 1.35rem;
    min-width: 9rem;
}

.dl-ui-card--stat .dl-ui-card__value {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--dl-ui-primary);
}

.dl-ui-card--stat .dl-ui-card__text {
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    /* 1.5 matches the VC overview-card label leading (~21.6px) so a wrapped
       doc-expiry label lines up with the multi-line cards in the same row. */
    line-height: 1.5;
    color: var(--dl-ui-muted);
}

/* Compact stat card — Leads / Reports / Staff metric chips: small, label-on-top
   (uppercase), dark value ~1.125rem, 12px radius, subtle shadow. Add alongside
   --stat. The Document Expiry overview card stays on plain --stat (big orange). */
.dl-ui-card--stat-compact {
    gap: 0.15rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    min-width: 6.5rem;
}

.dl-ui-card--stat-compact .dl-ui-card__value {
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--dl-ui-text);
}

.dl-ui-card--stat-compact .dl-ui-card__text {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-transform: uppercase;
}

.dl-ui-card--success {
    border-color: rgba(21, 128, 61, 0.25);
    background: var(--dl-ui-success-bg);
}

.dl-ui-card--warning {
    border-color: rgba(180, 83, 9, 0.25);
    background: var(--dl-ui-warning-bg);
}

.dl-ui-card--info {
    border-color: rgba(3, 105, 161, 0.22);
    background: var(--dl-ui-info-bg);
}

.dl-ui-card--empty {
    text-align: center;
    padding: 2rem 1.25rem;
}

.dl-ui-subcard {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid var(--dl-ui-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.dl-ui-details {
    border: 1px solid var(--dl-ui-border);
    border-radius: 12px;
    background: var(--dl-ui-card-bg);
    padding: 0;
    overflow: hidden;
}

.dl-ui-details > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    padding: 0.65rem 0.85rem;
    margin: 0;
    border-radius: 11px;
    transition: background 0.15s ease;
}

.dl-ui-details > summary:hover {
    background: rgba(255, 121, 0, 0.04);
}

.dl-ui-details > summary:focus-visible {
    outline: 2px solid rgba(255, 121, 0, 0.35);
    outline-offset: -2px;
}

.dl-ui-details > summary::-webkit-details-marker {
    display: none;
}

.dl-ui-details__body {
    margin: 0;
    padding: 0.75rem 0.85rem 0.85rem;
    border-top: 1px solid var(--dl-ui-border);
}

/* Summary with a status badge: collapse hides detail, never state. */
.dl-ui-details__summary-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dl-ui-details__summary-badge {
    flex: none;
    font-weight: 600;
}

/* Buttons */
.dl-ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: var(--diyarlist-button-height, 44px);
    padding: 0 1.15rem;
    border-radius: var(--diyarlist-radius-button, 999px);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.dl-ui-btn:focus-visible {
    outline: 2px solid var(--dl-ui-primary);
    outline-offset: 2px;
}

/* Host themes (Houzez) define a / a:visited / a:hover colors at specificity
   (0,1,1), which out-specifies a single kit class (0,1,0) and bleeds the theme
   link color into <a> kit buttons — this was the red row-1 "View" (a :visited
   profile link). Pin every kit button to its own colour, carried by
   --dl-ui-btn-color, across all link states at (0,2,0) so the theme can never
   win. Scoped strictly to .dl-ui-btn — no other element is affected. */
.dl-ui-btn,
.dl-ui-btn:link,
.dl-ui-btn:visited,
.dl-ui-btn:hover,
.dl-ui-btn:focus,
.dl-ui-btn:active {
    color: var(--dl-ui-btn-color, var(--dl-ui-text));
}

.dl-ui-btn--primary {
    background: var(--dl-ui-primary);
    --dl-ui-btn-color: #fff;
    box-shadow: var(--diyarlist-btn-shadow, 0 4px 16px rgba(255, 121, 0, 0.35));
}

.dl-ui-btn--primary:hover {
    background: var(--dl-ui-primary-hover);
}

.dl-ui-btn--secondary {
    background: var(--dl-ui-card-bg);
    --dl-ui-btn-color: var(--dl-ui-text);
    border-color: var(--dl-ui-border);
}

.dl-ui-btn--secondary:hover {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(15, 23, 42, 0.03);
}

.dl-ui-btn--ghost {
    background: var(--dl-ui-card-bg);
    --dl-ui-btn-color: var(--dl-ui-text);
    border-color: var(--dl-ui-border);
}

.dl-ui-btn--ghost:hover {
    background: rgba(255, 121, 0, 0.08);
}

.dl-ui-btn--muted {
    background: rgba(15, 23, 42, 0.05);
    --dl-ui-btn-color: var(--dl-ui-muted);
    border-color: transparent;
}

.dl-ui-btn--success {
    background: var(--dl-ui-success);
    --dl-ui-btn-color: #fff;
}

.dl-ui-btn--warning {
    background: var(--dl-ui-warning);
    --dl-ui-btn-color: #fff;
}

.dl-ui-btn--danger {
    background: var(--dl-ui-danger);
    border-color: #991b1b;
    --dl-ui-btn-color: #fff;
}

.dl-ui-btn--danger:hover {
    background: #991b1b;
}

.dl-ui-btn--sm {
    min-height: 34px;
    padding: 0 0.85rem;
    font-size: 0.8125rem;
}

.dl-ui-btn--lg {
    min-height: 50px;
    padding: 0 1.35rem;
    font-size: 0.9375rem;
}

.dl-ui-btn--icon {
    min-width: 44px;
    padding: 0;
}

.dl-ui-btn:disabled,
.dl-ui-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.dl-ui-btn.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.dl-ui-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dl-ui-spin 0.7s linear infinite;
}

.dl-ui-btn--secondary.is-loading::after,
.dl-ui-btn--ghost.is-loading::after {
    border-color: rgba(15, 23, 42, 0.15);
    border-top-color: var(--dl-ui-text);
}

@keyframes dl-ui-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Badges */
.dl-ui-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* VC look: pastel chip + dark text; semantic meaning stays in the background. */
.dl-ui-badge--success {
    color: #0f172a;
    background: var(--dl-ui-success-bg);
    border-color: #a7f3d0;
}

.dl-ui-badge--warning {
    color: #0f172a;
    background: var(--dl-ui-warning-bg);
    border-color: #fde68a;
}

.dl-ui-badge--danger {
    color: #0f172a;
    background: var(--dl-ui-danger-bg);
    border-color: #fecaca;
}

.dl-ui-badge--info {
    color: #0f172a;
    background: var(--dl-ui-info-bg);
    border-color: #bfdbfe;
}

.dl-ui-badge--muted {
    color: #64748b;
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* Tabs */
.dl-ui-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    border-bottom: 1px solid var(--dl-ui-border);
    padding-bottom: 0.35rem;
}

.dl-ui-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dl-ui-muted);
    text-decoration: none;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.dl-ui-tab:hover,
.dl-ui-tab:focus-visible {
    color: var(--dl-ui-text);
    background: rgba(255, 121, 0, 0.08);
    border-color: rgba(15, 23, 42, 0.1);
}

.dl-ui-tab.is-active {
    color: var(--dl-ui-text);
    background: var(--dl-ui-card-bg);
    border-color: var(--dl-ui-border);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.dl-ui-tab.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.dl-ui-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    background: rgba(15, 23, 42, 0.08);
    color: var(--dl-ui-text);
}

.dl-ui-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.dl-ui-subtab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dl-ui-muted);
    text-decoration: none;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.03);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.dl-ui-subtab:hover,
.dl-ui-subtab:focus-visible {
    color: var(--dl-ui-text);
    background: rgba(255, 121, 0, 0.08);
    border-color: rgba(15, 23, 42, 0.1);
}

.dl-ui-subtab.is-active {
    /* VC active status pill is solid orange (not a white pill like main tabs). */
    color: #fff;
    background: var(--dl-ui-primary);
    border-color: var(--dl-ui-primary);
    box-shadow: 0 2px 8px rgba(255, 121, 0, 0.25);
}

/* Menus */
.dl-ui-menu-demo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.dl-ui-nav {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    border: 1px solid var(--dl-ui-border);
    border-radius: 12px;
    background: var(--dl-ui-card-bg);
}

.dl-ui-nav__item {
    margin: 0;
}

.dl-ui-nav__link {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--dl-ui-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.dl-ui-nav__link:hover {
    background: rgba(15, 23, 42, 0.04);
}

.dl-ui-nav__link.is-active {
    background: rgba(255, 121, 0, 0.1);
    color: var(--dl-ui-primary);
}

.dl-ui-nav__sub {
    list-style: none;
    margin: 0.15rem 0 0.35rem 0.75rem;
    padding: 0;
}

.dl-ui-nav__sub .dl-ui-nav__link {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--dl-ui-muted);
}

.dl-ui-dropdown-mock {
    position: relative;
    display: inline-block;
}

.dl-ui-dropdown-mock__panel {
    margin-top: 0.35rem;
    min-width: 11rem;
    padding: 0.35rem;
    border: 1px solid var(--dl-ui-border);
    border-radius: 12px;
    background: var(--dl-ui-card-bg);
    box-shadow: var(--dl-ui-shadow);
}

.dl-ui-dropdown-mock__item {
    display: block;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--dl-ui-text);
    text-decoration: none;
}

.dl-ui-dropdown-mock__item:hover {
    background: rgba(15, 23, 42, 0.04);
}

/* Table */
.dl-ui-table-card {
    background: var(--dl-ui-card-bg);
    border: 1px solid var(--dl-ui-border);
    border-radius: var(--dl-ui-radius);
    box-shadow: var(--dl-ui-shadow);
    overflow: hidden;
}

.dl-ui-table-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: var(--dl-ui-space-3) var(--dl-ui-cell-inline);
    border-bottom: 1px solid var(--dl-ui-border);
}

.dl-ui-table-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

/* The filter/search row always wraps to its own full-width line at the card's
   inline-start edge, directly under the title — for both the directory search
   (a <form>) and the Leads date filter (a <div>), so the two layouts converge. */
.dl-ui-table-card__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
}

.dl-ui-table-card__filters form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    width: 100%;
}

/* Level the interactive controls: filter buttons match the 44px field height,
   and the checkbox centres in a 44px box so it sits level with the input row.
   align-items:flex-end (above) lines the date inputs (label-on-top) up with the
   label-less controls along the shared bottom baseline. */
.dl-ui-table-card__filters .dl-ui-btn {
    min-height: 44px;
}

.dl-ui-table-card__filters .dl-ui-check-row {
    min-height: 44px;
    align-items: center;
}

.dl-ui-table-card__filters .dl-ui-input,
.dl-ui-table-card__filters .dl-ui-select {
    width: auto;
    min-width: 10rem;
    max-width: 14rem;
}

.dl-ui-table-card__filters .dl-ui-select {
    max-width: 11rem;
}

.dl-ui-table-wrap {
    overflow-x: auto;
}

.dl-ui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.dl-ui-table th {
    padding: 0.7rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dl-ui-muted);
    background: rgba(15, 23, 42, 0.03);
    border-bottom: 1px solid var(--dl-ui-border);
    white-space: nowrap;
}

.dl-ui-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--dl-ui-border);
    vertical-align: middle;
    color: var(--dl-ui-text);
}

.dl-ui-table tbody tr {
    transition: background 0.15s ease;
}

.dl-ui-table tbody tr:hover {
    background: rgba(255, 121, 0, 0.04);
}

.dl-ui-table tbody tr:last-child td {
    border-bottom: none;
}

.dl-ui-table__empty td {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--dl-ui-muted);
}

/* Grouped rows: one <tbody> per group, opened by
   <tr class="dl-ui-table__group"><th scope="rowgroup" colspan="N">. Sentence
   case and the text colour, so a group reads apart from the column headers. */
.dl-ui-table .dl-ui-table__group th {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    text-align: start;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    color: var(--dl-ui-text);
    background: rgba(15, 23, 42, 0.04);
    border-top: 1px solid var(--dl-ui-border);
}

.dl-ui-table tbody tr.dl-ui-table__group:hover {
    background: transparent;
}

/* A short explanation under a cell's main text (muted, small, own line). */
.dl-ui-table__sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--dl-ui-muted);
}

.dl-ui-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.dl-ui-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    border-top: 1px solid var(--dl-ui-border);
    font-size: 0.8125rem;
    color: var(--dl-ui-muted);
}

.dl-ui-pagination__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Forms */
.dl-ui-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .dl-ui-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dl-ui-form-grid--full {
        grid-template-columns: 1fr;
    }
}

.dl-ui-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* The BEM class had no definition of its own and was carried entirely by the
   descendant rule below, so it looked styled only for as long as every label
   stayed inside a .dl-ui-field. A label placed anywhere else silently lost its
   weight and colour. Same shape, and the same fix, as .dl-ui-required just
   below: scope the rule to the class itself and keep the descendant selector,
   which still styles bare <label> elements in older markup. */
.dl-ui-field__label,
.dl-ui-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dl-ui-text);
}

/* The required marker was scoped to .dl-ui-field label only, so the same
   span rendered unstyled inside a check row — indistinguishable from a typo.
   Scoped to the marker itself; the two ancestors are kept as documentation of
   where it is expected to appear. */
.dl-ui-required,
.dl-ui-field label .dl-ui-required,
.dl-ui-check-row .dl-ui-required {
    color: var(--dl-ui-danger);
}

.dl-ui-input,
.dl-ui-select,
.dl-ui-textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--dl-ui-border);
    border-radius: 10px;
    background-color: var(--dl-ui-card-bg);
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--dl-ui-text);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Normalise native chrome so type="search"/number inputs match the kit surface. */
.dl-ui-input {
    -webkit-appearance: none;
    appearance: none;
}

.dl-ui-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
    cursor: pointer;
}

.dl-ui-input:hover,
.dl-ui-select:hover,
.dl-ui-textarea:hover {
    border-color: rgba(15, 23, 42, 0.18);
}

.dl-ui-textarea {
    min-height: 6rem;
    resize: vertical;
}

.dl-ui-input:focus,
.dl-ui-select:focus,
.dl-ui-textarea:focus {
    /* VC look: soft orange ring; transparent outline keeps focus visible in
       forced-colors / Windows High-Contrast mode (never a bare outline:none). */
    outline: 2px solid transparent;
    outline-offset: 1px;
    border-color: rgba(255, 121, 0, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 121, 0, 0.12);
}

.dl-ui-input:disabled,
.dl-ui-select:disabled,
.dl-ui-textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: rgba(15, 23, 42, 0.04);
}

.dl-ui-input[readonly],
.dl-ui-field.is-readonly .dl-ui-input {
    background-color: rgba(15, 23, 42, 0.03);
    color: var(--dl-ui-muted);
}

.dl-ui-field__help {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dl-ui-muted);
}

.dl-ui-field.is-error .dl-ui-input,
.dl-ui-field.is-error .dl-ui-select,
.dl-ui-field.is-error .dl-ui-textarea {
    border-color: rgba(185, 28, 28, 0.55);
}

.dl-ui-field.is-success .dl-ui-input {
    border-color: rgba(21, 128, 61, 0.45);
}

.dl-ui-field__message {
    margin: 0;
    font-size: 0.8125rem;
}

.dl-ui-field.is-error .dl-ui-field__message {
    color: var(--dl-ui-danger);
}

.dl-ui-field.is-success .dl-ui-field__message {
    color: var(--dl-ui-success);
}

.dl-ui-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
}

/* Notices */
.dl-ui-notice {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.5;
}

.dl-ui-notice--info {
    color: var(--dl-ui-info);
    background: var(--dl-ui-info-bg);
    border-color: rgba(3, 105, 161, 0.2);
}

.dl-ui-notice--success {
    color: var(--dl-ui-success);
    background: var(--dl-ui-success-bg);
    border-color: rgba(21, 128, 61, 0.2);
}

.dl-ui-notice--warning {
    color: var(--dl-ui-warning);
    background: var(--dl-ui-warning-bg);
    border-color: rgba(180, 83, 9, 0.2);
}

.dl-ui-notice--error {
    color: var(--dl-ui-danger);
    background: var(--dl-ui-danger-bg);
    border-color: rgba(185, 28, 28, 0.2);
}

/* Progress bar. Determinate: set the fill's width (0-100%) and aria-valuenow
   on the role="progressbar" element. Indeterminate (--indeterminate): work
   with no measurable end, e.g. a server still processing an upload. The fill
   starts at the inline start, so it grows from the right under RTL. */
.dl-ui-progress {
    position: relative;
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--dl-ui-border);
    overflow: hidden;
}

.dl-ui-progress[hidden] {
    display: none;
}

.dl-ui-progress__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--dl-ui-primary);
    transition: width 0.2s ease;
}

.dl-ui-progress--indeterminate .dl-ui-progress__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 40%;
    transition: none;
    animation: dl-ui-progress-slide 1.1s ease-in-out infinite;
}

[dir="rtl"] .dl-ui-progress--indeterminate .dl-ui-progress__fill {
    animation-name: dl-ui-progress-slide-rtl;
}

@keyframes dl-ui-progress-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

@keyframes dl-ui-progress-slide-rtl {
    from { transform: translateX(100%); }
    to { transform: translateX(-250%); }
}

@media (prefers-reduced-motion: reduce) {
    .dl-ui-progress--indeterminate .dl-ui-progress__fill {
        width: 100%;
        opacity: 0.45;
        animation: none;
    }
}

/* Profile pattern */
.dl-ui-profile {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 100%;
}

.dl-ui-profile__header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.dl-ui-profile__type {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--dl-ui-text);
}

.dl-ui-profile__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.dl-ui-profile__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    flex: 1 1 auto;
}

@media (min-width: 768px) {
    .dl-ui-profile__fields {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dl-ui-profile__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--dl-ui-border);
}

.dl-ui-profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: stretch;
}

@media (min-width: 960px) {
    .dl-ui-profile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.dl-ui-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* ── Muted text utility ─────────────────────────────────────────────────────
   Inline/secondary text color. Use instead of legacy dl-portal-muted. */
.dl-ui-muted {
    color: var(--dl-ui-muted);
}

/* ── Modal shell (native <dialog>) ──────────────────────────────────────────
   Form internals use dl-ui-field / dl-ui-textarea / dl-ui-btn. */
.dl-ui-modal {
    border: none;
    border-radius: var(--diyarlist-radius-card, 16px);
    box-shadow: 0 10px 40px rgba(31, 41, 51, 0.18);
    padding: 1.25rem;
    max-width: 32rem;
    width: 90%;
}
.dl-ui-modal::backdrop {
    background: rgba(15, 23, 42, 0.45);
}
.dl-ui-modal__title {
    margin: 0 0 0.35rem;
}
.dl-ui-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ── Platform-wide container normalization (v3.0.165) ─────────────────────
   Scoped to the Platform Admin shell. Aligns every module's cards, panels,
   tiles and table columns to the kit spacing tokens above — the fix for
   text sitting flush against container edges and per-section padding drift.
   Module CSS keeps its colors/layout; only the insets are normalized. */

/* Table columns: first/last cell inline inset matches the card header, so
   the first column's text lines up with the card title above it. */
.dl-ui-table th:first-child,
.dl-ui-table td:first-child {
    padding-inline-start: var(--dl-ui-cell-inline);
}
.dl-ui-table th:last-child,
.dl-ui-table td:last-child {
    padding-inline-end: var(--dl-ui-cell-inline);
}

/* Cards / section panels: one canonical inner inset. */
.dl-pa-shell .dl-portal-card,
.dl-pa-shell .dl-pa-ops-section,
.dl-pa-shell .dl-pa-clients .dl-portal-card,
.dl-pa-shell .dl-pa-clients__profile-panel {
    padding: var(--dl-ui-card-pad-y) var(--dl-ui-card-pad-x);
}
.dl-pa-shell .dl-pa-clients__profile-header {
    padding: var(--dl-ui-space-3) var(--dl-ui-card-pad-x);
}
.dl-pa-shell .dl-pa-clients__empty--inline {
    padding: var(--dl-ui-space-3) var(--dl-ui-cell-inline) var(--dl-ui-space-4);
}

/* Compact stat tiles (Overview workload, Clients metrics): comfortable
   uniform inset instead of the cramped 0.9-0.95rem hand-rolled values. */
.dl-pa-shell .dl-pa-ops-card {
    padding: var(--dl-ui-tile-pad-y) var(--dl-ui-tile-pad-x);
    gap: 0.3rem;
}
.dl-pa-shell .dl-pa-clients__metric-card {
    padding: var(--dl-ui-tile-pad-y) var(--dl-ui-tile-pad-x);
}