:root {
    /* Deep navy (#00004c) — the project's core brand color, chosen deliberately
       to read as trustworthy/premium (fitting an encrypted messaging platform),
       not a generic SaaS purple. Muted gold is the secondary brand accent
       (classic navy+gold pairing), kept distinct from the semantic status
       colors (success/warning/danger) which stay conventional regardless of
       brand hue. Same tokens as Sila.Client.Web's app.css. */
    --sila-primary: #00004c;
    --sila-primary-dark: #1c1c6e;
    --sila-primary-light: #e6e6f2;
    --sila-accent: #c9a227;
    --sila-accent-dark: #a3801a;
    --sila-accent-light: #f7efd8;
    --sila-success: #1f9d6b;
    --sila-success-light: #e3f7ef;
    --sila-danger: #e0475a;
    --sila-danger-light: #fbe7ea;
    --sila-warning: #d99a1f;
    --sila-warning-light: #fbf1dc;

    --sila-bg: #f5f5fa;
    --sila-surface: #ffffff;
    --sila-border: #dfe0ea;
    --sila-text: #14142e;
    --sila-text-muted: #6b6d85;

    --sila-radius-sm: 0.5rem;
    --sila-radius-md: 0.875rem;
    --sila-radius-lg: 1.25rem;
    --sila-shadow-sm: 0 1px 2px rgba(0, 0, 30, 0.07);
    --sila-shadow-md: 0 8px 24px rgba(0, 0, 30, 0.1);
    --sila-font: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Argon-style dark/gradient sidebar tokens */
    --sila-sidebar-bg-start: #00004c;
    --sila-sidebar-bg-end: #050530;
    --sila-sidebar-text: #b8b8d9;
    --sila-sidebar-text-active: #ffffff;
    --sila-sidebar-width: 17rem;
}

* {
    box-sizing: border-box;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--sila-success);
}

.invalid {
    outline: 1px solid var(--sila-danger);
}

.validation-message {
    color: var(--sila-danger);
    font-size: 0.85rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "حدث خطأ."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--sila-font);
    margin: 0;
    background: var(--sila-bg);
    color: var(--sila-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--sila-border);
    border-radius: 999px;
}

a {
    color: var(--sila-primary);
    text-decoration: none;
}

/* ---------- Argon-style app shell: dark/gradient sidebar + light content area ---------- */

.admin-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.admin-sidebar {
    flex: 0 0 var(--sila-sidebar-width);
    background: linear-gradient(165deg, var(--sila-sidebar-bg-start), var(--sila-sidebar-bg-end));
    color: var(--sila-sidebar-text);
    padding: 1.5rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    padding: 0 0.5rem;
}

    .admin-sidebar-brand img {
        height: 2.1rem;
        width: auto;
        flex: none;
    }

.admin-sidebar-section {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(203, 198, 240, 0.55);
    padding: 0 0.75rem;
    margin-bottom: 0.25rem;
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .admin-sidebar-nav a {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.65rem 0.85rem;
        border-radius: var(--sila-radius-sm);
        color: var(--sila-sidebar-text);
        font-weight: 600;
        font-size: 0.92rem;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .admin-sidebar-nav a:hover {
            background: rgba(255, 255, 255, 0.08);
            color: var(--sila-sidebar-text-active);
        }

        /* Gold, not navy: navy on the navy sidebar all but vanished, and
           the page you were on could not be told from the rest. */
        .admin-sidebar-nav a.active {
            background: rgba(201, 162, 39, 0.16);
            color: white;
            box-shadow: inset -3px 0 0 var(--sila-accent);
        }

            .admin-sidebar-nav a.active .sila-icon {
                color: var(--sila-accent);
            }

.admin-sidebar-footer {
    margin-top: auto;
    padding: 0.85rem;
    border-radius: var(--sila-radius-md);
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .admin-sidebar-footer .admin-user-email {
        font-size: 0.8rem;
        color: var(--sila-sidebar-text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-sidebar-footer form {
        margin: 0;
    }

    .admin-sidebar-footer button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.15);
    }

        .admin-sidebar-footer button:hover {
            background: rgba(255, 255, 255, 0.18);
        }

.admin-content {
    flex: 1;
    min-width: 0;
    padding: 2rem 2.25rem 3rem;
}

@media (max-width: 900px) {
    .admin-shell {
        flex-direction: column;
    }

    .admin-sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .admin-sidebar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        scrollbar-width: none;
    }

        .admin-sidebar-nav a {
            white-space: nowrap;
            flex: none;
        }

    .admin-sidebar > div:not(.admin-sidebar-brand):not(.admin-sidebar-footer) {
        width: 100%;
        min-width: 0;
    }

    /* A table wider than the screen scrolls; it used to be cut off. */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .admin-sidebar-footer {
        margin-top: 0;
        flex: 1 1 auto;
    }

    .admin-content {
        padding: 1.25rem;
    }
}

/* ---------- generic form controls ---------- */

input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="search"], input[type="url"], textarea, select {
    padding: 0.6rem 0.85rem;
    font-family: var(--sila-font);
    font-size: 0.92rem;
    border-radius: var(--sila-radius-sm);
    border: 1.5px solid var(--sila-border);
    background: var(--sila-surface);
    color: var(--sila-text);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    input:not([type]):focus, input[type="url"]:focus,
    input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
    input[type="number"]:focus, input[type="tel"]:focus, input[type="search"]:focus,
    textarea:focus, select:focus {
        border-color: var(--sila-primary);
        box-shadow: 0 0 0 3px var(--sila-primary-light);
    }

button, .btn, input[type="submit"] {
    padding: 0.6rem 1.1rem;
    font-family: var(--sila-font);
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: var(--sila-radius-sm);
    border: 1.5px solid transparent;
    background: var(--sila-primary);
    color: white;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
}

    button:hover:not(:disabled), .btn:hover:not(:disabled) {
        background: var(--sila-primary-dark);
    }

    button:active:not(:disabled) {
        transform: scale(0.98);
    }

    button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    button.secondary, .btn-secondary {
        background: var(--sila-surface);
        color: var(--sila-primary);
        border-color: var(--sila-border);
    }

    button.danger, .btn-danger {
        background: var(--sila-danger);
    }

        button.danger:hover:not(:disabled), .btn-danger:hover:not(:disabled) {
            background: #c33a4a;
        }

/* ---------- cards, page header, tables ---------- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* A page whose title is a bare heading reads the same as one in a header. */
.admin-content > h1 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 800;
}

.admin-content > h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
}

    .page-header h1, .page-header h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 800;
    }

.card {
    background: var(--sila-surface);
    border: 1px solid var(--sila-border);
    border-radius: var(--sila-radius-lg);
    box-shadow: var(--sila-shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--sila-surface);
    border: 1px solid var(--sila-border);
    border-radius: var(--sila-radius-lg);
    box-shadow: var(--sila-shadow-sm);
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stat-card-label {
    font-size: 0.8rem;
    color: var(--sila-text-muted);
    font-weight: 600;
}

.stat-card-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--sila-text);
}

table {
    border-collapse: collapse;
    width: 100%;
    background: var(--sila-surface);
    border: 1px solid var(--sila-border);
    border-radius: var(--sila-radius-lg);
    overflow: hidden;
    box-shadow: var(--sila-shadow-sm);
}

table th, table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sila-border);
    text-align: start;
}

table th {
    background: var(--sila-bg);
    font-size: 0.78rem;
    color: var(--sila-text-muted);
    font-weight: 700;
}

table tr:last-child td {
    border-bottom: none;
}

table tbody tr:hover {
    background: var(--sila-primary-light);
}

/* ---------- icons, table toolbar (search), pager ---------- */

.sila-icon {
    flex: none;
    vertical-align: -3px;
}

.table-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.table-search {
    position: relative;
    flex: 0 1 20rem;
    display: flex;
    align-items: center;
}

    .table-search .sila-icon {
        position: absolute;
        inset-inline-start: 0.75rem;
        color: var(--sila-text-muted);
        pointer-events: none;
    }

    .table-search input {
        width: 100%;
        padding-inline-start: 2.35rem;
    }

.table-count {
    font-size: 0.82rem;
    color: var(--sila-text-muted);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

    .pager button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.1rem;
        height: 2.1rem;
        padding: 0;
        background: var(--sila-surface);
        color: var(--sila-primary);
        border: 1px solid var(--sila-border);
    }

        .pager button:hover:not(:disabled) {
            background: var(--sila-primary-light);
        }

.pager-status {
    font-size: 0.82rem;
    color: var(--sila-text-muted);
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--sila-primary-light);
    color: var(--sila-primary-dark);
}

    .badge.success {
        background: var(--sila-success-light);
        color: var(--sila-success);
    }

    .badge.warning {
        background: var(--sila-warning-light);
        color: var(--sila-warning);
    }

    .badge.danger {
        background: var(--sila-danger-light);
        color: var(--sila-danger);
    }

/* ---------- login pages (SuperAdmin + Company Admin) ---------- */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, var(--sila-sidebar-bg-start), var(--sila-sidebar-bg-end));
}

.login-box {
    max-width: 24rem;
    width: 100%;
    margin: 2rem;
    padding: 2.25rem 2rem;
    background: var(--sila-surface);
    border-radius: var(--sila-radius-lg);
    box-shadow: var(--sila-shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .login-box h1 {
        margin: 0 0 0.25rem;
        font-size: 1.4rem;
        font-weight: 800;
        text-align: center;
    }

.login-box-logo {
    height: 3.5rem;
    width: auto;
    align-self: center;
}

.login-box form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.login-error {
    color: var(--sila-danger);
    font-size: 0.85rem;
    text-align: center;
}

/* A one-time secret (see Components/Shared/OneTimeSecret.razor). Deliberately
   the loudest thing on any page that shows one: it is the only moment this
   value will ever exist, and the previous treatment — a grey sentence above a
   table — was missed by the person it was written for. */
.one-time-secret {
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--sila-accent);
    border-radius: var(--sila-radius-md);
    background: var(--sila-accent-light);
    box-shadow: var(--sila-shadow-md);
    outline: none;
}

.one-time-secret-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.one-time-secret-head strong {
    font-size: 1.05rem;
    color: var(--sila-text);
}

.one-time-secret-warning {
    font-size: 0.8rem;
    color: var(--sila-accent-dark);
}

.one-time-secret-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* The value itself: monospace, left-to-right even on this right-to-left page
   — a base64 secret read in the wrong direction is a secret typed wrong. */
.one-time-secret-body code {
    flex: 1 1 22rem;
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--sila-border);
    border-radius: var(--sila-radius-sm);
    background: var(--sila-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    word-break: break-all;
    user-select: all;
}

.one-time-secret-copy {
    padding: 0.55rem 1.4rem;
    border: 0;
    border-radius: var(--sila-radius-sm);
    background: var(--sila-primary);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.one-time-secret-copy:hover {
    background: var(--sila-primary-dark);
}

.one-time-secret-hint {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--sila-text-muted);
}

/* A template's variable (see CompanyAdminMessageTemplates.razor). Drawn as a
   chip inside a <bdi>, which is the part that matters: a Latin name inside an
   Arabic sentence otherwise drags its braces to the wrong side of itself, and
   the text that was stored perfectly correctly looks broken every time it is
   read back. */
.template-var {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    margin: 0 0.15rem;
    border-radius: var(--sila-radius-sm);
    background: var(--sila-primary-light);
    color: var(--sila-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    unicode-bidi: isolate;
}

.template-preview {
    margin: 0.5rem 0 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--sila-border);
    border-radius: var(--sila-radius-sm);
    background: var(--sila-surface);
    line-height: 1.9;
}

.template-preview-label {
    margin-inline-end: 0.5rem;
    color: var(--sila-text-muted);
    font-size: 0.8rem;
}

.template-hint {
    margin: 0.25rem 0 0;
    color: var(--sila-text-muted);
    font-size: 0.82rem;
}

.template-variable-suggestion {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--sila-border);
    border-radius: 999px;
    background: var(--sila-surface);
    color: var(--sila-text);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.template-variable-suggestion:hover {
    background: var(--sila-primary-light);
}

/* Ids are read to be typed into somebody else's code — left to right, and
   selectable in one click. */
.template-id {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    user-select: all;
}

/* A product's photograph, shown where it was uploaded. The key was stored
   and never read back, so the table printed an emoji and the person who had
   just chosen a picture could not see which one. */
.product-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    vertical-align: middle;
    margin-inline-end: 8px;
    background: #eaeaf2;
}

/* ---------- dark: the same tokens, darker; chosen, or the system's ---------- */

:root[data-theme="dark"] {
    color-scheme: dark;
    --sila-primary: #7b7bf2;
    --sila-primary-dark: #6262e0;
    --sila-primary-light: rgba(123, 123, 242, 0.16);
    --sila-accent-light: rgba(201, 162, 39, 0.16);
    --sila-success-light: rgba(31, 157, 107, 0.18);
    --sila-danger-light: rgba(224, 71, 90, 0.18);
    --sila-warning-light: rgba(217, 154, 31, 0.18);
    --sila-bg: #0e0e1c;
    --sila-surface: #17172b;
    --sila-border: #2b2b47;
    --sila-text: #e8e8f5;
    --sila-text-muted: #9a9cb8;
    --sila-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sila-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --sila-sidebar-bg-start: #0b0b2e;
    --sila-sidebar-bg-end: #05051a;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --sila-primary: #7b7bf2;
        --sila-primary-dark: #6262e0;
        --sila-primary-light: rgba(123, 123, 242, 0.16);
        --sila-accent-light: rgba(201, 162, 39, 0.16);
        --sila-success-light: rgba(31, 157, 107, 0.18);
        --sila-danger-light: rgba(224, 71, 90, 0.18);
        --sila-warning-light: rgba(217, 154, 31, 0.18);
        --sila-bg: #0e0e1c;
        --sila-surface: #17172b;
        --sila-border: #2b2b47;
        --sila-text: #e8e8f5;
        --sila-text-muted: #9a9cb8;
        --sila-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --sila-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
        --sila-sidebar-bg-start: #0b0b2e;
        --sila-sidebar-bg-end: #05051a;
    }
}

/* ---------- language and theme switches ---------- */

.prefs {
    display: flex;
    gap: 0.4rem;
}

.prefs-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--sila-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    cursor: pointer;
}

    .prefs-button:hover {
        background: rgba(255, 255, 255, 0.16);
    }

.prefs-floating {
    position: fixed;
    top: 1rem;
    inset-inline-end: 1rem;
    z-index: 10;
}

.theme-label {
    display: none;
}

:root:not([data-theme]) .theme-label-system,
:root[data-theme="light"] .theme-label-light,
:root[data-theme="dark"] .theme-label-dark {
    display: inline;
}

/* English reads left to right: the current page's gold mark on the other side. */
[dir="ltr"] .admin-sidebar-nav a.active {
    box-shadow: inset 3px 0 0 var(--sila-accent);
}

/* ---------- floating windows (Components/Shared/Modal.razor) ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 1rem;
    overflow-y: auto;
    background: rgba(5, 5, 26, 0.55);
    backdrop-filter: blur(2px);
}

.modal {
    width: 100%;
    max-width: 34rem;
    background: var(--sila-surface);
    color: var(--sila-text);
    border: 1px solid var(--sila-border);
    border-radius: var(--sila-radius-lg);
    box-shadow: var(--sila-shadow-md);
    animation: modal-in 0.14s ease-out;
}

.modal-wide {
    max-width: 52rem;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sila-border);
}

    .modal-head h2 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 800;
    }

.modal-close {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    background: transparent;
    color: var(--sila-text-muted);
    border: 1px solid var(--sila-border);
}

    .modal-close:hover:not(:disabled) {
        background: var(--sila-bg);
        color: var(--sila-text);
    }

.modal-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

    .modal-body input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]), .modal-body textarea, .modal-body select {
        width: 100%;
    }

.modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    .form-row > label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--sila-text-muted);
    }

/* The logo's lettering is navy: on the navy sidebar, and on the dark sign-in
   card, it sits on a light plate so it can be read. */
.admin-sidebar-brand img {
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.15rem 0.35rem;
}

:root[data-theme="dark"] .login-box-logo {
    background: #fff;
    border-radius: 0.6rem;
    padding: 0.3rem 0.6rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .login-box-logo {
        background: #fff;
        border-radius: 0.6rem;
        padding: 0.3rem 0.6rem;
    }
}

.prefs-button {
    white-space: nowrap;
}

/* Lists of settings and facts (a page's <dl>): a card, each label beside its
   value on a wide screen and above it on a narrow one. They were bare text,
   labels and values running into each other. */
.admin-content > dl,
.card dl {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    gap: 0;
    margin: 0 0 1.5rem;
    background: var(--sila-surface);
    border: 1px solid var(--sila-border);
    border-radius: var(--sila-radius-lg);
    box-shadow: var(--sila-shadow-sm);
    overflow: hidden;
}

.card dl {
    box-shadow: none;
}

    .admin-content > dl > dt,
    .admin-content > dl > dd,
    .card dl > dt,
    .card dl > dd {
        margin: 0;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--sila-border);
    }

    .admin-content > dl > dt,
    .card dl > dt {
        font-weight: 700;
        font-size: 0.88rem;
        color: var(--sila-text-muted);
        background: var(--sila-bg);
    }

    .admin-content > dl > :nth-last-child(-n+2),
    .card dl > :nth-last-child(-n+2) {
        border-bottom: none;
    }

.admin-content > dl:empty {
    display: none;
}

@media (max-width: 700px) {
    .admin-content > dl,
    .card dl {
        grid-template-columns: 1fr;
    }

        .admin-content > dl > dt,
        .card dl > dt {
            border-bottom: none;
            padding-bottom: 0.2rem;
        }
}

/* A list's row opens its record: the whole line is the link, not a
   "details" column at its end. */
tr.row-link {
    cursor: pointer;
}

/* A record's decisions, at the top beside its name and status. */
.page-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-inline-start: auto;
}

.page-header .badge {
    margin-inline-end: auto;
}

/* A column of controls: a form's fields, a window's actions. */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 26rem;
}

.totp-qr {
    width: 12rem;
    height: 12rem;
    image-rendering: pixelated;
    background: #fff;
    padding: 0.5rem;
    border-radius: var(--sila-radius-sm);
}

/* The count beside a page in the sidebar: something there waits for action. */
.nav-badge {
    margin-inline-start: auto;
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--sila-danger);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.3rem;
}

    .nav-badge.advice {
        background: rgba(255, 255, 255, 0.16);
        color: var(--sila-sidebar-text);
    }

/* "Needs action": a row per waiting item, coloured by how pressing it is. */
.action-center-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.6rem;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--sila-radius-md);
    border: 1px solid var(--sila-border);
    border-inline-start: 4px solid var(--sila-warning);
    background: var(--sila-surface);
    color: var(--sila-text);
    transition: background-color 0.15s ease;
}

    .action-item:hover {
        background: var(--sila-bg);
    }

    .action-item.urgent {
        border-inline-start-color: var(--sila-danger);
    }

    .action-item.advice {
        border-inline-start-color: var(--sila-border);
    }

.action-count {
    min-width: 2.2rem;
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
}

.action-item.urgent .action-count {
    color: var(--sila-danger);
}

.action-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

    .action-text small {
        color: var(--sila-text-muted);
        font-size: 0.8rem;
    }

/* Reports: charts in a grid, two to a row on a wide screen. */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.chart-card {
    margin: 0;
}

.chart-wide {
    grid-column: 1 / -1;
}

.chart-area {
    position: relative;
}

.period-picker {
    display: inline-flex;
    gap: 0.3rem;
}

    .period-picker button.active {
        background: var(--sila-primary);
        color: #fff;
    }

/* Busy hours: seven days by twenty-four hours, darker where busier. */
.heatmap {
    display: grid;
    grid-template-columns: 4.5rem repeat(24, 1fr);
    gap: 2px;
    font-size: 0.7rem;
    color: var(--sila-text-muted);
}

    .heatmap span {
        height: 1.35rem;
        border-radius: 3px;
    }

    .heatmap .heat-label {
        height: auto;
        display: flex;
        align-items: center;
    }

/* The sidebar's groups: a heading that opens to show the pages inside. */
.nav-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: 0;
    border-radius: var(--sila-radius-sm);
    color: rgba(203, 198, 240, 0.7);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

    .nav-group:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.06);
        color: var(--sila-sidebar-text-active);
    }

.nav-group-arrow {
    display: inline-block;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

[dir="rtl"] .nav-group-arrow {
    transform: scaleX(-1);
}

.nav-group.open .nav-group-arrow {
    transform: rotate(90deg);
}

.nav-group-links {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-inline-start: 0.4rem;
}

@media (max-width: 900px) {
    .nav-group {
        width: auto;
        margin-top: 0;
        white-space: nowrap;
        flex: none;
    }

    .nav-group-links {
        flex-direction: row;
        padding-inline-start: 0;
    }
}

/* A list's status filter: chips with counts. */
.status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--sila-surface);
    color: var(--sila-text);
    border: 1px solid var(--sila-border);
    font-size: 0.85rem;
}

    .chip:hover:not(:disabled) {
        background: var(--sila-bg);
    }

    .chip.active {
        background: var(--sila-primary);
        border-color: var(--sila-primary);
        color: #fff;
    }

.chip-count {
    min-width: 1.3rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(127, 127, 160, 0.18);
    font-size: 0.75rem;
    font-weight: 700;
}

/* The overview: figures in groups, every card a link to the list behind it. */
.overview-heading {
    margin: 1.4rem 0 0.6rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--sila-text-muted);
}

a.stat-card {
    color: var(--sila-text);
    transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

    a.stat-card:hover {
        transform: translateY(-1px);
        box-shadow: var(--sila-shadow-md);
        border-color: var(--sila-primary);
    }

.stat-card.attention {
    border-inline-start: 4px solid var(--sila-warning);
}

.stat-card.danger {
    border-inline-start: 4px solid var(--sila-danger);
}

.register-box {
    max-width: 30rem;
}

.register-links {
    margin: 0;
    font-size: 0.85rem;
    text-align: center;
    color: var(--sila-text-muted);
}