/* ==========================================================================
   Dashboard UI refresh
   --------------------------------------------------------------------------
   Loaded after main.css. Like landing.css this themes by token and lays out
   with logical properties, so RTL and LTR both come from one source.
   ========================================================================== */

:root {
    --dsh-radius: 12px;
    --dsh-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dsh-bg: #FFFFFF;
    --dsh-surface: #FFFFFF;
    --dsh-surface-2: #F7F6F2;
    --dsh-border: #E7E4DB;
    --dsh-text: #0F221A;
    --dsh-text-soft: #46564E;
    --dsh-text-muted: #7A8781;
    --dsh-accent: #8A6D14;
    --accent-btn: #8A6D14;
    --accent-btn-hover: #6F5710;
    --dsh-accent-soft: rgba(138, 109, 20, 0.09);
    --dsh-danger: #B3261E;
    --dsh-danger-soft: rgba(179, 38, 30, 0.09);
    --dsh-shadow: 0 4px 12px rgba(15, 34, 26, 0.06), 0 12px 32px rgba(15, 34, 26, 0.06);
}
html[data-theme="dark"] {
    --dsh-bg: #0B1A14;
    --dsh-surface: #0E211A;
    --dsh-surface-2: #12281F;
    --dsh-border: rgba(201, 162, 39, 0.16);
    --dsh-text: #F4F2EA;
    --dsh-text-soft: rgba(244, 242, 234, 0.74);
    --dsh-text-muted: rgba(244, 242, 234, 0.5);
    --dsh-accent: #C9A227;
    --dsh-accent-soft: rgba(201, 162, 39, 0.12);
    --dsh-danger: #F2705F;
    --dsh-danger-soft: rgba(242, 112, 95, 0.14);
    --dsh-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Topbar cluster — language, theme, notifications and the account menu
   all live here now instead of being buried in the sidebar footer.
   ========================================================================== */

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-btn {
    inline-size: 38px;
    block-size: 38px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid var(--dsh-border);
    background: var(--dsh-surface-2);
    color: var(--dsh-text-soft);
    cursor: pointer;
    position: relative;
    transition: color 0.2s var(--dsh-ease), border-color 0.2s var(--dsh-ease), transform 0.2s var(--dsh-ease);
}
.tb-btn:hover { color: var(--dsh-accent); border-color: var(--dsh-accent); transform: translateY(-1px); }
.tb-btn:focus-visible { outline: 2px solid var(--dsh-accent); outline-offset: 2px; }
.tb-dot {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 9px;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--dsh-danger);
    border: 2px solid var(--dsh-surface-2);
}

/* Language bar — fixed-size buttons so switching cannot reflow the topbar */
.tb-langbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--dsh-surface-2);
    border: 1px solid var(--dsh-border);
    flex: none;
}
.tb-lang {
    inline-size: 32px;
    block-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dsh-text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.2s var(--dsh-ease), background-color 0.2s var(--dsh-ease);
}
.tb-lang:hover { color: var(--dsh-text); background: var(--dsh-accent-soft); }
.tb-lang.is-active { color: #fff; background: var(--accent-btn); }
html[data-theme="dark"] .tb-lang.is-active { color: #fff; }

/* Account menu */
.tb-account { position: relative; }
.tb-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px 5px 5px;
    border-radius: 40px;
    border: 1px solid var(--dsh-border);
    background: var(--dsh-surface-2);
    color: var(--dsh-text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s var(--dsh-ease);
}
.tb-account-btn:hover { border-color: var(--dsh-accent); }
.tb-avatar {
    inline-size: 30px;
    block-size: 30px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-btn);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
}
html[data-theme="dark"] .tb-avatar { color: #fff; }
.tb-account-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    max-inline-size: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tb-caret { transition: transform 0.2s var(--dsh-ease); flex: none; }
.tb-account.is-open .tb-caret { transform: rotate(180deg); }

.tb-menu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    min-inline-size: 232px;
    background: var(--dsh-surface);
    border: 1px solid var(--dsh-border);
    border-radius: var(--dsh-radius);
    box-shadow: var(--dsh-shadow);
    padding: 6px;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s var(--dsh-ease), transform 0.18s var(--dsh-ease), visibility 0.18s;
}
.tb-account.is-open .tb-menu { opacity: 1; visibility: visible; transform: none; }
.tb-menu-head { padding: 10px 12px 12px; border-block-end: 1px solid var(--dsh-border); margin-block-end: 6px; }
.tb-menu-name { font-size: 14px; font-weight: 700; color: var(--dsh-text); }
.tb-menu-mail { font-size: 12px; color: var(--dsh-text-muted); direction: ltr; text-align: start; word-break: break-all; }
.tb-menu-role {
    display: inline-block;
    margin-block-start: 7px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--dsh-accent-soft);
    color: var(--dsh-accent);
}
.tb-menu a, .tb-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--dsh-text-soft);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s var(--dsh-ease), color 0.15s var(--dsh-ease);
}
.tb-menu a:hover, .tb-menu button:hover { background: var(--dsh-accent-soft); color: var(--dsh-accent); }
.tb-menu .tb-menu-danger:hover { background: var(--dsh-danger-soft); color: var(--dsh-danger); }
/* Chevrons and arrows must point the way the language reads. */
.tb-menu a svg, .tb-menu button svg { flex: none; }
html[dir="rtl"] .dsh-flip { transform: scaleX(-1); }

/* ==========================================================================
   Stat cards — five across on one row
   ========================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.stats-grid > .stat-card { min-inline-size: 0; }
/* Layouts with four or fewer cards keep comfortable widths. */
.stats-grid:has(> .stat-card:last-child:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-grid:has(> .stat-card:last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-grid:has(> .stat-card:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px)  { .stats-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Role badges — a role is not a status, so it gets its own scale
   ========================================================================== */

.role-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.role-admin  { background: rgba(138, 109, 20, 0.12); color: #7A5F10; border-color: rgba(138, 109, 20, 0.25); }
.role-agent  { background: rgba(27, 67, 50, 0.10);  color: #1B4332; border-color: rgba(27, 67, 50, 0.22); }
.role-client { background: rgba(90, 106, 99, 0.12); color: #46564E; border-color: rgba(90, 106, 99, 0.22); }
html[data-theme="dark"] .role-admin  { background: rgba(201,162,39,0.16); color: #E0B93C; border-color: rgba(201,162,39,0.35); }
html[data-theme="dark"] .role-agent  { background: rgba(120,200,160,0.14); color: #8FD8B4; border-color: rgba(120,200,160,0.3); }
html[data-theme="dark"] .role-client { background: rgba(244,242,234,0.10); color: rgba(244,242,234,0.75); border-color: rgba(244,242,234,0.2); }

/* ==========================================================================
   Form controls
   ========================================================================== */

.form-select, select.form-select {
    appearance: none;
    -webkit-appearance: none;
    padding-block: 8px;
    padding-inline: 12px 32px;
    border: 1px solid var(--dsh-border);
    border-radius: 10px;
    background-color: var(--dsh-surface);
    color: var(--dsh-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    /* Caret drawn inline so it can be placed with a logical offset and follow
       the theme colour — a background-image arrow cannot do either. */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color 0.2s var(--dsh-ease), box-shadow 0.2s var(--dsh-ease);
}
html[dir="rtl"] .form-select { background-position: left 14px top 52%, left 9px top 52%; }
html[dir="ltr"] .form-select { background-position: right 14px top 52%, right 9px top 52%; }
.form-select:hover { border-color: var(--dsh-accent); }
.form-select:focus {
    outline: none;
    border-color: var(--dsh-accent);
    box-shadow: 0 0 0 3px var(--dsh-accent-soft);
}

/* Checkbox / permission toggle */
.perm-toggle input[type="checkbox"],
.dsh-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    inline-size: 20px;
    block-size: 20px;
    margin: 0;
    border: 2px solid var(--dsh-border);
    border-radius: 6px;
    background: var(--dsh-surface);
    cursor: pointer;
    position: relative;
    transition: background-color 0.18s var(--dsh-ease), border-color 0.18s var(--dsh-ease);
}
.perm-toggle input[type="checkbox"]:hover,
.dsh-check input[type="checkbox"]:hover { border-color: var(--dsh-accent); }
.perm-toggle input[type="checkbox"]:checked,
.dsh-check input[type="checkbox"]:checked { background: var(--accent-btn); border-color: var(--accent-btn); }
.perm-toggle input[type="checkbox"]:checked::after,
.dsh-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset-block-start: 1px;
    inset-inline-start: 5px;
    inline-size: 5px;
    block-size: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
html[data-theme="dark"] .perm-toggle input[type="checkbox"]:checked::after,
html[data-theme="dark"] .dsh-check input[type="checkbox"]:checked::after { border-color: #fff; }
.perm-toggle input[type="checkbox"]:focus-visible,
.dsh-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--dsh-accent); outline-offset: 2px; }

.dsh-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--dsh-text-soft);
    user-select: none;
}

/* ==========================================================================
   Table row actions — icon buttons instead of stacked text buttons
   ========================================================================== */

.row-actions { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn {
    inline-size: 32px;
    block-size: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--dsh-border);
    border-radius: 9px;
    background: var(--dsh-surface);
    color: var(--dsh-text-muted);
    cursor: pointer;
    transition: color 0.18s var(--dsh-ease), border-color 0.18s var(--dsh-ease),
                background-color 0.18s var(--dsh-ease), transform 0.18s var(--dsh-ease);
}
.icon-btn:hover {
    color: var(--dsh-accent);
    border-color: var(--dsh-accent);
    background: var(--dsh-accent-soft);
    transform: translateY(-1px);
}
.icon-btn-danger:hover { color: var(--dsh-danger); border-color: var(--dsh-danger); background: var(--dsh-danger-soft); }
.icon-btn:focus-visible { outline: 2px solid var(--dsh-accent); outline-offset: 2px; }

/* Clickable table rows replace a per-row "view" column. */
.data-table tbody tr.row-link { cursor: pointer; transition: background-color 0.15s var(--dsh-ease); }
.data-table tbody tr.row-link:hover { background: var(--dsh-accent-soft); }

/* ==========================================================================
   Left-to-right values inside a right-to-left table
   ========================================================================== */

/* Tracking numbers, email addresses and phone numbers always read left to
   right, whatever language the page is in. The old markup said so with
   dir="ltr" on the <td> — which does two jobs at once and gets the second one
   wrong. `text-align` defaults to `start`, and `start` resolves against the
   CELL's direction, so in an Arabic table the value was pushed to the left
   edge of its cell: away from its own column heading on the right, and hard up
   against the neighbouring column. That is the "the ID does not start at the
   beginning and sits too close to Company" report.

   The isolate belongs on the value, not the cell. <bdi> carries
   `unicode-bidi: isolate` from the UA stylesheet, so the value renders as its
   own left-to-right run while the cell keeps the table's direction, alignment
   and padding. dir="ltr" is set on the <bdi> in the markup rather than left to
   `auto`, because a phone number starts with "+" and digits — none of them
   strong characters — so auto-detection would hand it back to the page's RTL
   and strand the "+" on the wrong end. */
.data-table td > bdi {
    display: inline-block;
    max-inline-size: 100%;
    vertical-align: bottom;   /* keeps the row's baseline where it was */
}

/* Long addresses truncate instead of stretching the column. The ellipsis has
   to live on the <bdi> now that it, not the cell, is the block being clipped. */
.data-table td > bdi.is-clipped {
    max-inline-size: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-mono > bdi {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    letter-spacing: 0.02em;
}
.cell-id > bdi { font-weight: 600; }

/* ==========================================================================
   Pager
   ========================================================================== */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 16px;
    border-block-start: 1px solid var(--dsh-border);
}
.pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--dsh-border);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dsh-text);
    text-decoration: none;
    transition: border-color 0.2s var(--dsh-ease), color 0.2s var(--dsh-ease);
}
.pager-btn:hover { border-color: var(--dsh-accent); color: var(--dsh-accent); }
.pager-btn.is-off { opacity: 0.4; pointer-events: none; }
.pager-count { font-size: 12.5px; color: var(--dsh-text-muted); font-variant-numeric: tabular-nums; }
/* The chevrons are drawn pointing left/right; in Arabic "previous" is to the
   right, so both flip together with the reading direction. */
html[dir="rtl"] .pager-prev, html[dir="rtl"] .pager-next { transform: scaleX(-1); }

/* ==========================================================================
   Modal — direction-correct and themed
   ========================================================================== */

.modal, .modal-overlay { direction: inherit; }
.modal-content, .modal-box {
    text-align: start;
    background: var(--dsh-surface);
    color: var(--dsh-text);
    border: 1px solid var(--dsh-border);
    border-radius: 16px;
}
.modal-content .form-label, .modal-box .form-label { text-align: start; display: block; }
.modal-footer, .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 700px) {
    .tb-account-name { display: none; }
    .tb-account-btn { padding: 5px; }
    .topbar-actions { gap: 6px; }
    .tb-lang { inline-size: 28px; }
}

/* ==========================================================================
   Sidebar brand mark (same inline SVG component as the landing page)
   ========================================================================== */

.sidebar .lp-brand-mark {
    block-size: 30px;
    inline-size: auto;
    aspect-ratio: 320 / 465;
    flex: none;
    overflow: visible;
    color: #C9A227;                 /* sidebar is dark by default */
}
html[data-theme="light"] .sidebar .lp-brand-mark { color: #1B4332; }

/* ==========================================================================
   Dialogs — inherit page direction, start-aligned, themed surface
   ========================================================================== */

.dsh-modal { direction: inherit; }
.dsh-modal-box {
    direction: inherit;
    text-align: start;
    background: var(--dsh-surface);
    color: var(--dsh-text);
    border: 1px solid var(--dsh-border);
    border-radius: 16px;
    max-block-size: 90vh;
    overflow-y: auto;
    box-shadow: var(--dsh-shadow);
}
.dsh-modal-box label { text-align: start; display: block; }
.dsh-modal-box .form-control,
.dsh-modal-box .form-select { inline-size: 100%; text-align: start; }
/* Email and phone stay LTR even in an RTL dialog, but must still sit on the
   reading edge — text-align:start with dir=ltr would push them the wrong way. */
html[dir="rtl"] .dsh-modal-box input[dir="ltr"] { text-align: right; }
html[dir="ltr"] .dsh-modal-box input[dir="ltr"] { text-align: left; }

.role-form { display: flex; gap: 6px; align-items: center; }
.role-form .form-select { inline-size: auto; min-inline-size: 118px; font-size: 12px; padding-block: 6px; }

/* ==========================================================================
   Sidebar header / topbar alignment
   The sidebar brand was sized by its padding and the topbar by its own, so the
   two bottom borders never met. One shared height lines them up.
   ========================================================================== */

:root { --dsh-bar-h: 74px; }

.topbar {
    min-block-size: var(--dsh-bar-h);
    padding-block: 0;
}
.sidebar-brand {
    min-block-size: var(--dsh-bar-h);
    padding-block: 0;
    display: flex;
    align-items: center;
}
.sidebar-brand > a { inline-size: 100%; }
/* Flex centres boxes, not glyphs: without an explicit line-height the two-line
   brand block sat low next to the mark. */
.sidebar-brand > a > div { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.sidebar-brand > a > div > div { line-height: 1.25; }

@media (max-width: 900px) {
    :root { --dsh-bar-h: 64px; }
}

/* Sidebar brand: the mark and the name, centred, on one line. The tagline
   underneath was a truncated second line — "Global Company Re…" — on a page
   the visitor has already signed in to, where it told them nothing. */
.sidebar-brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    min-inline-size: 0;
}

/* ==========================================================================
   Dark theme for the dashboard shell
   main.css defines light values on :root and overrides them again under
   [data-theme="light"] — but never for dark, so the content area stayed white
   behind a dark sidebar and topbar. These fill that gap.
   ========================================================================== */

html[data-theme="dark"] .main-content,
/* The sidebar is position:fixed and therefore only ever one viewport tall. On
   any page longer than the viewport the body shows through the strip beside
   the content — and body kept its light #f8f9fa in dark mode, so a white
   column appeared under the sidebar as soon as you scrolled. */
html[data-theme="dark"] body { background: var(--dsh-bg); }

html[data-theme="dark"] .page-content { background: var(--dsh-bg); color: var(--dsh-text); }

html[data-theme="dark"] .topbar {
    background: var(--dsh-surface);
    border-bottom-color: var(--dsh-border);
}
html[data-theme="dark"] .topbar-title h1 { color: var(--dsh-text); }
html[data-theme="dark"] .topbar-title p { color: var(--dsh-text-muted); }

html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card {
    background: var(--dsh-surface);
    border-color: var(--dsh-border);
    color: var(--dsh-text);
}
html[data-theme="dark"] .card-header {
    background: transparent;
    border-bottom-color: var(--dsh-border);
}
html[data-theme="dark"] .card-header h3 { color: var(--dsh-text); }
html[data-theme="dark"] .stat-value { color: var(--dsh-text); }
html[data-theme="dark"] .stat-label { color: var(--dsh-text-muted); }

html[data-theme="dark"] .data-table th {
    background: var(--dsh-surface-2);
    color: var(--dsh-text-muted);
    border-bottom-color: var(--dsh-border);
}
html[data-theme="dark"] .data-table td {
    color: var(--dsh-text);
    border-bottom-color: var(--dsh-border);
}
html[data-theme="dark"] .data-table tbody tr:hover { background: var(--dsh-accent-soft); }
html[data-theme="dark"] .table-wrap { border-color: var(--dsh-border); }
html[data-theme="dark"] .empty-state { color: var(--dsh-text-muted); }
html[data-theme="dark"] .empty-state h4 { color: var(--dsh-text); }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background: var(--dsh-surface-2);
    border-color: var(--dsh-border);
    color: var(--dsh-text);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--dsh-text-muted); }
html[data-theme="dark"] .btn-outline {
    background: transparent;
    border-color: var(--dsh-border);
    color: var(--dsh-text-soft);
}
html[data-theme="dark"] .btn-outline:hover { border-color: var(--dsh-accent); color: var(--dsh-accent); }
/* Was gold with near-black text. Same reasoning as .btn-accent in main.css:
   the darker gold takes a white label, which is what every other filled button
   on the page has. */
html[data-theme="dark"] .btn-primary { background: var(--accent-btn); color: #fff; border-color: transparent; }
html[data-theme="dark"] .btn-primary:hover { background: var(--accent-btn-hover); color: #fff; }

/* The sticky permissions action bar sat on the light page colour. */
html[data-theme="dark"] .page-content > form > div[style*="position: sticky"] {
    background: var(--dsh-bg) !important;
    border-top-color: var(--dsh-border) !important;
}

/* ===== SETTINGS =====================================================
   The screens that replaced Django's admin. A hub of cards, then one table
   and one form shared by every list. */
.set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}
.set-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid var(--dsh-border);
    border-radius: 12px;
    background: var(--dsh-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.set-card:hover {
    border-color: var(--dsh-accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35);
}
.set-card-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px; block-size: 40px;
    border-radius: 10px;
    background: var(--dsh-accent-soft);
    color: var(--dsh-accent);
}
.set-card-body { display: grid; gap: 3px; min-inline-size: 0; }
.set-card-title { font-size: 14px; font-weight: 650; color: var(--dsh-text); }
.set-card-hint { font-size: 11.5px; line-height: 1.6; color: var(--dsh-text-muted); }
.set-card-count {
    flex: none;
    font-size: 12px;
    font-weight: 650;
    color: var(--dsh-text-muted);
    background: var(--dsh-surface-2, rgba(0, 0, 0, 0.04));
    border-radius: 20px;
    padding: 3px 10px;
}
.set-back { color: var(--dsh-text-muted); text-decoration: none; font-weight: 500; }
.set-back:hover { color: var(--dsh-accent); }

/* On/off in one click: retiring an entry is the normal action, deleting it is
   the exception (and refused once an application has used it). */
.set-toggle {
    inline-size: 38px; block-size: 21px;
    border-radius: 20px;
    border: 1px solid var(--dsh-border);
    background: var(--dsh-surface-2, rgba(0, 0, 0, 0.06));
    padding: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 0.16s ease, border-color 0.16s ease;
}
.set-toggle-knob {
    inline-size: 15px; block-size: 15px;
    border-radius: 50%;
    background: var(--dsh-text-muted);
    transition: transform 0.16s ease, background 0.16s ease;
}
.set-toggle.is-on { background: var(--accent-btn); border-color: transparent; }
.set-toggle.is-on .set-toggle-knob { background: #fff; transform: translateX(17px); }
html[dir="rtl"] .set-toggle.is-on .set-toggle-knob { transform: translateX(-17px); }
.appd-field.is-check { display: flex; align-items: center; }

/* ----- the settings form ------------------------------------------------
   Grouped into cards: what the entry is, then its wording one row per
   language. Rendered flat it was a column of fourteen boxes, five of them
   labelled "الاسم". */
.setf { max-inline-size: 820px; display: grid; gap: 16px; padding-block-end: 84px; }
.setf-alert { margin: 0; }
.setf-card {
    background: var(--dsh-surface);
    border: 1px solid var(--dsh-border);
    border-radius: 14px;
    overflow: hidden;
}
.setf-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 15px 20px;
    border-block-end: 1px solid var(--dsh-border);
    background: var(--dsh-surface-2, transparent);
}
.setf-card-head h3 { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--dsh-text); }
.setf-note { font-size: 11px; color: var(--dsh-text-muted); }
.setf-body { padding: 18px 20px; display: grid; gap: 14px; }
.setf-body.is-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.setf-field.is-wide { grid-column: 1 / -1; }
.setf-field label, .setf-lang-row label { display: block; font-size: 12px; font-weight: 600; color: var(--dsh-text-soft); margin-block-end: 6px; }

/* One row per language: a chip says which, so the label does not have to. */
.setf-lang-row { display: flex; align-items: flex-start; gap: 10px; }
.setf-chip {
    flex: none;
    margin: 0;
    inline-size: 42px;
    text-align: center;
    padding: 8px 0;
    border-radius: 8px;
    background: var(--dsh-accent-soft);
    color: var(--dsh-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.setf-lang-input { flex: 1; min-inline-size: 0; }
.setf-lang-row.has-error .setf-chip { background: rgba(179, 38, 30, 0.1); color: var(--dsh-danger); }

.setf-switch {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--dsh-border);
    border-radius: 10px;
    cursor: pointer;
}
.setf-switch:has(input:checked) { border-color: var(--accent-btn); background: var(--dsh-accent-soft); }
.setf-switch input { margin-block-start: 2px; }
.setf-switch-label { display: block; font-size: 13px; font-weight: 600; color: var(--dsh-text); }
.setf-switch-hint { display: block; font-size: 11px; color: var(--dsh-text-muted); margin-block-start: 2px; line-height: 1.6; }

/* The form is taller than the screen; a save button you have to hunt for is a
   save button people miss. */
.setf-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 0;
    margin-block-start: 4px;
    background: linear-gradient(to top, var(--dsh-bg) 65%, transparent);
}
@media (max-width: 640px) {
    .setf-actions { flex-direction: column-reverse; }
    .setf-actions .btn { justify-content: center; }
}
.setf-head-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.setf-translate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--dsh-border);
    border-radius: 8px;
    background: transparent;
    color: var(--dsh-text-soft);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
}
.setf-translate:hover { border-color: var(--accent-btn); color: var(--accent-btn); }
.setf-translate.is-busy { opacity: 0.6; cursor: progress; }
.setf-translate.is-error { border-color: var(--dsh-danger); color: var(--dsh-danger); }
/* A field that was just filled in for you says so, briefly. */
.setf-lang-row.is-filled input, .setf-lang-row.is-filled textarea {
    border-color: var(--accent-btn);
    background: var(--dsh-accent-soft);
    transition: background 1.2s ease, border-color 1.2s ease;
}

/* A refused switch needs room for the reason underneath it. */
.setf-switch-wrap { display: flex; flex-direction: column; gap: 6px; }
.setf-switch-error { margin-inline-start: 4px; }