/* ---------------------------------------------------------------------------
   MAGArchive — formal government theme.

   Palette is anchored on Kuwait Blue, taken from the State of Kuwait Visual
   Identity v1.0 (Ministry of Information, November 2024):
       Pantone 286 C · CMYK 100-80-0-10 · RGB 0-51-160 · #0033A0

   The flag's green and red appear only as success/danger semantics, never as
   decoration. No state emblem is used anywhere in this application.

   Everything below is expressed as Bootstrap 5.3 CSS variables so light and
   dark themes and RTL all follow from the same tokens.
--------------------------------------------------------------------------- */

:root {
    --kw-blue: #0033A0;
    --kw-blue-800: #001F63;
    --kw-blue-700: #002B85;
    --kw-blue-600: #0033A0;
    --kw-blue-500: #1A4BB5;
    --kw-blue-100: #E6EBF6;
    --kw-blue-050: #F3F6FC;

    --kw-green: #007A3D;   /* flag green — success only */
    --kw-red: #CE1126;     /* flag red — danger only    */
    --kw-sand: #C8A96B;    /* restrained accent for official rules */

    --kw-ink: #14181F;
    --kw-slate: #4A5568;
}

[data-bs-theme="light"] {
    --bs-primary: var(--kw-blue-600);
    --bs-primary-rgb: 0, 51, 160;
    --bs-link-color: var(--kw-blue-700);
    --bs-link-hover-color: var(--kw-blue-500);
    --bs-success: var(--kw-green);
    --bs-danger: var(--kw-red);
    --bs-body-color: var(--kw-ink);
    --bs-secondary-color: var(--kw-slate);
    --bs-border-color: #D8DEE9;
    --bs-tertiary-bg: #F5F7FA;
}

[data-bs-theme="dark"] {
    --bs-primary: #4C7BE0;
    --bs-primary-rgb: 76, 123, 224;
    --bs-link-color: #8FB0F0;
    --bs-link-hover-color: #B4CBF6;
    --bs-success: #2E9E63;
    --bs-danger: #E8546A;
}

/* --- typography ---------------------------------------------------------- */

html {
    font-size: 15px;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    letter-spacing: 0;
}

/* Arabic needs a font stack that actually has Arabic glyphs, and slightly more
   line height — Arabic ascenders and descenders are taller than Latin ones. */
html[lang="ar"] body,
html[dir="rtl"] body {
    font-family: "Segoe UI", "Dubai", "Noto Naskh Arabic", "Traditional Arabic", Tahoma, Arial, sans-serif;
    line-height: 1.75;
}

/* --- official header ------------------------------------------------------ */

.gov-topbar {
    background: var(--kw-blue-600);
    color: #fff;
    font-size: .8125rem;
    padding: .35rem 0;
}

.gov-topbar a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
}

.gov-topbar a:hover {
    color: #fff;
    text-decoration: underline;
}

/* The thin sand rule under the header is the one decorative flourish; it reads
   as official without imitating any state emblem. */
.gov-rule {
    height: 3px;
    background: linear-gradient(to left, var(--kw-sand), var(--kw-blue-600));
}

.navbar-brand {
    font-weight: 600;
    letter-spacing: .01em;
}

.brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    background: var(--kw-blue-600);
    color: #fff;
    flex: 0 0 auto;
}

/* --- layout -------------------------------------------------------------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.page-header h1 {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0;
}

.card {
    border-color: var(--bs-border-color);
}

.card-header {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

/* --- accessibility -------------------------------------------------------- */

:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 1080;
    background: var(--kw-blue-600);
    color: #fff;
    padding: .5rem 1rem;
}

.skip-link:focus {
    inset-inline-start: 0;
}

/* --- data tables ---------------------------------------------------------- */

.table-responsive-card {
    overflow-x: auto;
}

.table-archive {
    font-size: .9rem;
}

.table-archive td,
.table-archive th {
    vertical-align: middle;
}

.table-archive thead th {
    white-space: nowrap;
    font-weight: 600;
    background: var(--bs-tertiary-bg);
    border-bottom: 2px solid var(--bs-border-color);
}

.cell-truncate {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-chip {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 1rem;
    font-size: .75rem;
    line-height: 1.4;
    border: 1px solid var(--bs-border-color);
}

.auth-card {
    max-width: 26rem;
    margin: 3rem auto;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bs-secondary-color);
}

.empty-state i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
    opacity: .45;
}

/* --- public welcome page --------------------------------------------------- */

.hero-welcome {
    background: linear-gradient(135deg, var(--kw-blue-800) 0%, var(--kw-blue-600) 55%, var(--kw-blue-500) 100%);
    color: #fff;
    border-radius: .75rem;
    padding: 3.5rem 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

/* One restrained decorative flourish, echoing the sand accent used in the
   official header rule — never a state emblem, just a soft shape. */
.hero-welcome::after {
    content: "";
    position: absolute;
    inset-inline-end: -4rem;
    top: -4rem;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
}

.hero-kicker {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .8rem;
    font-weight: 600;
    color: var(--kw-sand);
}

.hero-motto {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.3;
    margin: .5rem 0 1rem;
}

.hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .85);
    max-width: 42rem;
}

.feature-card i {
    font-size: 1.75rem;
    color: var(--bs-primary);
}

/* --- clickable hub tiles (e.g. Admin/Users/Overview) ------------------------ */

.link-card {
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.link-card:hover {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
    transform: translateY(-2px);
    border-color: var(--bs-primary);
}

.link-card i {
    font-size: 1.75rem;
    color: var(--bs-primary);
}

/* --- storage admin ---------------------------------------------------------- */

/* Blocked via a click handler rather than the disabled attribute — see the
   comment beside lockActive() in Storage/Index.cshtml for why — so this is
   the only signal that the checkbox is not actually interactive right now. */
.locked-checkbox {
    opacity: .6;
    cursor: not-allowed;
}

/* --- dashboard container tree --------------------------------------------- */

.container-tree {
    font-size: .9rem;
}

.tree-root,
.tree-children {
    margin: 0;
    padding: 0;
}

/* Each level's vertical guide is the child list's own inline-start border, so
   it flips correctly under RTL with no separate rule needed. */
.tree-children {
    padding-inline-start: 1.375rem;
    border-inline-start: 1px solid var(--bs-border-color);
    margin-inline-start: .8rem;
}

.tree-node {
    list-style: none;
}

.tree-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem .5rem;
    border-radius: .375rem;
}

.tree-row:hover {
    background: var(--bs-tertiary-bg);
}

.tree-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: var(--bs-body-color);
    text-decoration: none;
    flex: 1 1 auto;
}

.tree-label:hover .tree-name {
    color: var(--bs-link-color);
    text-decoration: underline;
}

.tree-icon {
    color: var(--kw-sand);
    flex: 0 0 auto;
}

.tree-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

.tree-count {
    font-size: .8125rem;
    font-weight: 600;
    min-width: 2.25rem;
    padding: .35em .65em;
    text-align: center;
}

.tree-open-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .55rem;
    font-size: .8125rem;
}

/* Folding and filtering (wwwroot/js/list-tools.js). The toggle sits in a slot that is always the same width,
   so leaf rows line up with branch rows. */
.tree-toggle-slot {
    display: inline-flex;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    justify-content: center;
}

.tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: .25rem;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: .65rem;
}

.tree-toggle:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.tree-toggle i {
    transition: transform .12s ease;
}

.tree-toggle[aria-expanded="true"] i {
    transform: rotate(90deg);
}

/* The caret points the way the text reads: right in LTR, left in RTL, then down when open. */
[dir="rtl"] .tree-toggle[aria-expanded="false"] i {
    transform: rotate(180deg);
}

/* A branch whose children are all filtered out should not leave its guide line behind. */
.tree-children:not(:has(> .tree-node:not(.d-none))) {
    display: none;
}

.tree-tools .tree-search {
    max-width: 18rem;
    flex: 1 1 12rem;
}

/* A tree that loads on demand shows only the branches that are open; the markup of a closed one is there
   (or not yet fetched) but out of sight. */
[data-tree="lazy"] .tree-node:not(.is-open) > .tree-children {
    display: none;
}

/* What the AI filled in on the upload form: marked until the person edits it, so it is plain what to check. */
.ai-filled {
    border-color: var(--bs-warning-border-subtle) !important;
    background-color: var(--bs-warning-bg-subtle);
    animation: ai-pop 1.4s ease-out;
}

@keyframes ai-pop {
    0% { box-shadow: 0 0 0 .35rem rgba(var(--bs-warning-rgb), .45); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bs-warning-rgb), 0); }
}

/* Covers the page while a batch is filed. */
.batch-busy {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-body-bg-rgb), .75);
}

.batch-busy.d-none {
    display: none !important;
}

.batch-busy .card {
    min-width: 18rem;
    max-width: 26rem;
}

/* A branch being fetched. */
.tree-toggle.is-loading {
    opacity: .5;
    pointer-events: none;
}

.tree-results .tree-row {
    padding-block: .45rem;
}

/* Chevrons that separate names in a path should point the way the text runs. */
[dir="rtl"] .flip-rtl {
    transform: scaleX(-1);
}

/* Access level pills, ordered light to dark as the level rises. */
.level-pill {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: .25rem;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.level-read { background: var(--kw-blue-050); color: var(--kw-blue-700); border-color: var(--kw-blue-100); }
.level-contribute { background: #E8F3EC; color: #16653C; border-color: #CBE5D5; }
.level-edit { background: #FFF4E0; color: #92620A; border-color: #F5E0B8; }
.level-delete { background: #FDECEE; color: #9B1122; border-color: #F5C9CF; }
.level-full { background: var(--kw-blue-600); color: #fff; }

/* --- RTL ------------------------------------------------------------------ */

/* Bootstrap 5.3 handles most direction flipping via logical properties; these
   cover the few places this application sets physical ones. */
[dir="rtl"] .dropdown-menu-end {
    --bs-position: start;
}

[dir="rtl"] .bi-arrow-left::before {
    content: "\f138"; /* arrow-right, so "back" still points backwards */
}

/* Tree indentation must follow the reading direction. */
.tree-indent {
    padding-inline-start: var(--tree-depth, 0);
}

/* --- print ---------------------------------------------------------------- */

/* The audit log has to be printable as a formal report, so screen chrome is
   removed and the table is allowed to break across pages sensibly. */
@media print {
    .gov-topbar,
    .gov-rule,
    .navbar,
    footer,
    .no-print,
    .pagination,
    form.no-print,
    .btn {
        display: none !important;
    }

    body {
        font-size: 11pt;
        color: #000;
        background: #fff;
    }

    .card {
        border: none;
        box-shadow: none;
    }

    .card-header {
        background: none;
        border-bottom: 1px solid #000;
    }

    .print-only {
        display: block !important;
    }

    .table-archive {
        font-size: 9.5pt;
    }

    .table-archive thead {
        display: table-header-group; /* repeat headers on every page */
    }

    .table-archive tr {
        page-break-inside: avoid;
    }

    a[href]::after {
        content: ""; /* no URL noise in a formal report */
    }

    .print-header {
        border-bottom: 2px solid var(--kw-blue-600);
        margin-bottom: 1rem;
        padding-bottom: .5rem;
    }
}

.print-only {
    display: none;
}

/* ----------------------------------------------------------- Recovery codes
   The sheet somebody prints and puts in a drawer.

   On screen it is one card among several. On paper it has to be the whole
   output: printing the page as it stood carried the status card, the enrolment
   form and the page header along with it, and the ten codes were pushed onto a
   second sheet — so half the codes ended up on a page somebody might not keep.
   Below, everything outside the sheet is removed from the printed document and
   the sheet is told not to break. */

.recovery-sheet-heading {
    border-bottom: 1px solid #000;
    padding-bottom: .4rem;
    margin-bottom: .6rem;
    font-size: 10pt;
}

.recovery-sheet-guidance {
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    padding: .6rem .75rem;
    margin-bottom: .75rem;
    background: var(--bs-tertiary-bg);
}

.recovery-sheet-warning {
    margin-top: .75rem;
    padding-top: .5rem;
    border-top: 1px solid #000;
}

@media print {
    /* Hide everything that is neither the sheet, nor one of its ancestors, nor
       one of its descendants. Expressed against the sheet itself rather than
       against the layout's shape, so moving the card or renesting the page
       cannot quietly start printing the navigation bar again. */
    body :not(:has(.recovery-sheet)):not(.recovery-sheet):not(.recovery-sheet *) {
        display: none !important;
    }

    /* The same thing written out for an engine without :has(). An unsupported
       :has() invalidates the rule above in its entirety, so this is a real
       fallback rather than a duplicate. */
    body > *:not(#main),
    #main > div > *:not(.recovery-sheet) {
        display: none !important;
    }

    /* Start at the top of the sheet of paper, not below where a navigation bar
       used to be. */
    #main,
    #main > div {
        padding: 0 !important;
        margin: 0 !important;
    }

    .recovery-sheet {
        display: block !important;
        border: 1px solid #000 !important;
        margin: 0 !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .recovery-sheet .card-header {
        background: none !important;
        font-size: 12pt;
    }

    .recovery-sheet .card-body {
        padding: .5rem .75rem;
    }

    .recovery-sheet,
    .recovery-sheet * {
        font-size: 9.5pt;
    }

    .recovery-sheet-guidance {
        background: none;
        border-color: #000;
    }

    /* Ten codes on one row of five apiece, whatever the paper width — the grid
       is the point of the sheet and must not reflow into a column. */
    .recovery-code-grid {
        page-break-inside: avoid;
        break-inside: avoid;
        margin-top: .5rem;
    }

    .recovery-code-grid .col {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .recovery-code-grid code {
        font-size: 11pt;
        font-weight: 600;
        color: #000;
        border-color: #000 !important;
        padding: .3rem .1rem !important;
    }

    @page {
        margin: 12mm;
    }
}

/* Audit details: labelled values rather than the raw JSON they are stored as. */
.audit-detail {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .1rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    white-space: nowrap;
    max-width: 100%;
}

.audit-detail-label {
    color: var(--bs-secondary-color);
    font-size: .75rem;
}

.audit-detail-value {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media print {
    .audit-detail { border-color: #999; }
}

/* ---------------------------------------------------------------- Annotations
   Comments laid over a document. The list sits beside the viewer rather than
   floating over it: a reviewer reads the comments and the page together, and a
   popup that covers the thing being discussed helps nobody.

   Each entry leads with who wrote it and who may read it, because on a shared
   document those are the two things worth knowing before the words. */

.annotation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 26rem;
    overflow-y: auto;
}

.annotation-item {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .6rem .75rem;
    margin-bottom: .5rem;
    background: var(--bs-body-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.annotation-item:hover {
    border-color: var(--bs-primary-border-subtle);
}

/* The entry whose mark-up was last jumped to, so the eye can get back to its
   place after looking away at the page. */
.annotation-item.is-active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .15rem var(--bs-primary-bg-subtle);
}

.annotation-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.annotation-kind {
    color: var(--bs-secondary-color);
}

.annotation-who {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    margin-inline-end: auto;
    min-width: 0;
}

.annotation-author {
    font-weight: 600;
    font-size: .875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.annotation-page {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

.annotation-comment {
    margin: 0 0 .35rem;
    font-size: .875rem;
    /* Comments are prose and often long; wrapping mid-word beats a scrollbar. */
    overflow-wrap: anywhere;
}

.annotation-shared {
    margin-bottom: .35rem;
}

.annotation-actions {
    display: flex;
    gap: .75rem;
    font-size: .8125rem;
}

.annotation-composer {
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius);
    background: var(--bs-primary-bg-subtle);
    padding: .75rem;
    margin-top: .5rem;
}

.annotation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.annotation-chip {
    display: inline-flex;
    align-items: center;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    font-size: .8125rem;
}

.annotation-results {
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-top: .25rem;
}

/* Settings sub-menu. The settings used to be one long page; each group now has
   its own address and this is the list that moves between them. */
.settings-nav .list-group-item {
    border-inline-start-width: 3px;
    border-inline-start-color: transparent;
}

.settings-nav .list-group-item.active {
    /* Marked with an edge rather than a filled block: this is a place marker,
       not the most important thing on the page. */
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-border-color);
    border-inline-start-color: var(--bs-primary);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}


/* ------------------------------------------------------------- Nested menus
   Bootstrap has no submenu of its own. The administration menu had grown to
   sixteen entries in no order anybody could predict, with the four user
   screens scattered among storage and drafts — so it is grouped, and a group
   that cannot be opened is not a group.

   Written with logical properties (inline-start/end) so it opens away from its
   parent in both reading directions, rather than off the edge of the screen in
   Arabic. */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    inset-inline-start: 100%;
    margin-top: -0.5rem;
    margin-inline-start: 0.125rem;
}

/* Hover is for a mouse; the .show class is what a tap or a keyboard press
   sets, so this is not mouse-only. */
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu > .dropdown-menu.show {
    display: block;
}

/* The parent row points the way its menu will open.

   Laid out as a flex row rather than by floating the caret. A float is taken
   out of the flow, and in a .dropdown-item — a block box with an icon, a label
   and no fixed width — it dropped onto its own line below the text instead of
   sitting beside it. Pushing it with an auto margin keeps it on the baseline of
   the row at any label length, in either writing direction. */
.dropdown-submenu > .dropdown-toggle {
    display: flex;
    align-items: center;
    /* Keeps a gap on the widest row, where the auto margin resolves to zero
       and the caret would otherwise touch the last letter. */
    gap: .5rem;
}

.dropdown-submenu > .dropdown-toggle::after {
    border-top: .3em solid transparent;
    border-bottom: .3em solid transparent;
    border-inline-start: .3em solid;
    border-inline-end: 0;
    margin-inline-start: auto;
    flex: none;
}

/* A phone has no hover and no room to fly out sideways, so the groups become
   plain indented sections instead of something unreachable. */
@media (max-width: 991.98px) {
    .dropdown-submenu > .dropdown-menu {
        position: static;
        display: block;
        inset-inline-start: auto;
        margin: 0;
        border: 0;
        box-shadow: none;
        padding-inline-start: 1rem;
    }

    .dropdown-submenu > .dropdown-toggle::after {
        display: none;
    }

    .dropdown-submenu > .dropdown-toggle {
        display: block;
    }
}

/* ---- A large upload in progress ---------------------------------------------- */

.upload-progress {
    margin-top: .75rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--bs-border-color-translucent);
    background:
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), .07), rgba(var(--bs-primary-rgb), .02)),
        var(--bs-body-bg);
    box-shadow: 0 8px 24px -16px rgba(15, 23, 42, .45);
}

.upload-progress-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; }
.upload-progress-name { flex: 1 1 auto; min-width: 0; }

.upload-progress-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .8rem;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary), #7c3aed);
}

.upload-progress-percent {
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bs-primary);
}

.upload-progress .progress { height: .5rem; border-radius: 999px; }
.upload-progress .progress-bar { border-radius: 999px; transition: width .3s ease; }

.upload-progress-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .65rem; }
.upload-progress-actions:empty { display: none; }

.upload-progress.done .upload-progress-icon { background: var(--bs-success); }
.upload-progress.done .upload-progress-percent { color: var(--bs-success); }
.upload-progress.done .progress-bar { background: var(--bs-success); }

.upload-progress.failed { border-color: rgba(var(--bs-danger-rgb), .35); }
.upload-progress.failed .upload-progress-icon { background: var(--bs-danger); }
.upload-progress.failed .upload-progress-percent { color: var(--bs-danger); }
.upload-progress.failed .progress-bar { background: var(--bs-danger); }

/* ---- Icon toolbar: a record's actions, compact and grouped -------------------- */

.item-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .3rem;
    border-radius: .9rem;
    border: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-tertiary-bg);
}

.toolbar-group { display: flex; align-items: center; gap: .3rem; }

/* A thin rule between groups; a group with nothing the reader may do is not shown. */
.toolbar-group + .toolbar-group {
    padding-inline-start: .35rem;
    border-inline-start: 1px solid var(--bs-border-color);
}

.toolbar-group:not(:has(.btn)) { display: none; }
.toolbar-group:not(:has(.btn)) + .toolbar-group { border-inline-start: 0; padding-inline-start: 0; }

.btn-icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: .65rem;
    font-size: 1.05rem;
    line-height: 1;
}

.item-toolbar .btn-outline-secondary,
.item-toolbar .btn-outline-primary,
.item-toolbar .btn-outline-success,
.item-toolbar .btn-outline-danger { background: var(--bs-body-bg); }

.btn-group > .btn-icon { border-start-end-radius: 0; border-end-end-radius: 0; }
.btn-icon-split {
    width: 1.5rem;
    height: 2.25rem;
    padding: 0;
    border-start-end-radius: .65rem !important;
    border-end-end-radius: .65rem !important;
}

.btn-icon-sm { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .45rem; border-radius: .55rem; }

/* How many: a small bubble on the corner of an icon button. */
.btn-icon-count {
    position: absolute;
    top: -.4rem;
    inset-inline-end: -.4rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.15rem;
    color: #fff;
    background: var(--bs-primary);
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

/* ---- Related items ---------------------------------------------------------------- */

.related-modal { border-radius: 1.1rem; overflow: hidden; }

.related-badge {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .85rem;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary), #7c3aed);
    box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .8);
}

.related-search { position: relative; }
.related-search > i {
    position: absolute;
    top: 50%;
    inset-inline-start: .9rem;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}
.related-search .form-control {
    padding-inline-start: 2.4rem;
    height: 2.75rem;
    border-radius: .85rem;
    background: var(--bs-tertiary-bg);
}
.related-search .form-control:focus { background: var(--bs-body-bg); }

.related-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.1rem 0 .5rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.related-list { display: flex; flex-direction: column; gap: .4rem; }
.related-list:empty { display: none; }

.related-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .65rem;
    border-radius: .85rem;
    border: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-body-bg);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.related-row:hover { border-color: rgba(var(--bs-primary-rgb), .35); box-shadow: 0 6px 18px -14px rgba(15, 23, 42, .6); }

.related-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .7rem;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.related-avatar.file { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); }
.related-avatar.folder { color: #b45309; background: rgba(245, 158, 11, .15); font-size: 1.1rem; }

.related-row-body { flex: 1 1 auto; min-width: 0; }
.related-row-title {
    display: block;
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-row-title:hover { color: var(--bs-primary); text-decoration: underline; }
.related-row-meta { font-size: .76rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.related-link-button { flex: 0 0 auto; border-radius: .6rem; white-space: nowrap; }
.related-remove { flex: 0 0 auto; }
.related-remove.confirming { color: #fff; background: var(--bs-danger); border-color: var(--bs-danger); }

.related-list-compact { padding: .5rem; }
.related-list-compact .related-row { padding: .4rem .5rem; border-color: transparent; }
.related-list-compact .related-row:hover { border-color: var(--bs-border-color-translucent); }
.related-list-compact .related-avatar { width: 2rem; height: 2rem; }

.related-empty { text-align: center; padding: 1.5rem 1rem; }
.related-empty-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .5rem;
    border-radius: 50%;
    font-size: 1.3rem;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .1);
}

.related-message { padding: .6rem .75rem; font-size: .85rem; color: var(--bs-secondary-color); }

.related-skeleton {
    height: 3.4rem;
    border-radius: .85rem;
    background: linear-gradient(90deg, var(--bs-tertiary-bg), var(--bs-secondary-bg), var(--bs-tertiary-bg));
    background-size: 400% 100%;
    animation: related-shimmer 1.2s ease infinite;
}

@keyframes related-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---- Hiding parts of a document ------------------------------------------------
   The layer sits inside the viewer's own element for a page and is placed with
   percentages, so a mark is in the same place at any zoom without being asked to move.
   It lets clicks through to the page unless the reader is drawing, because the page
   underneath is still being read, selected from and scrolled. */

.redaction-layer {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
}

.redaction-layer.is-drawing {
    pointer-events: auto;
    cursor: crosshair;
    touch-action: none;
}

.redaction-box {
    position: absolute;
    box-sizing: border-box;
    background: rgba(220, 53, 69, .30);
    border: 2px dashed var(--bs-danger);
    border-radius: 2px;
    pointer-events: none;
}

.redaction-box.is-pending {
    background: rgba(13, 110, 253, .22);
    border-color: var(--bs-primary);
}

.redaction-remove {
    position: absolute;
    top: -.85rem;
    inset-inline-end: -.85rem;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bs-danger);
    color: #fff;
    line-height: 1.5rem;
    font-size: 1rem;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease;
}

.redaction-box:hover .redaction-remove,
.redaction-remove:focus-visible {
    opacity: 1;
}

.redaction-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
}

.redaction-item {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .5rem .75rem;
    margin-bottom: .4rem;
    padding-inline-end: 3rem;
}

.redaction-item-remove {
    position: absolute;
    top: .4rem;
    inset-inline-end: .5rem;
}

.redaction-where {
    overflow-wrap: anywhere;
}

/* A drop-down that draws a picture beside each choice (wwwroot/js/icon-select.js). The real <select> stays in the form,
   invisible, so that it still posts and still validates. */
.icon-select { position: relative; }
.icon-select-native {
    position: absolute; inset-inline-start: 0; bottom: 0; width: 1px; height: 1px;
    opacity: 0; pointer-events: none; padding: 0; border: 0;
}
.icon-select-button { display: flex; align-items: center; gap: .5rem; width: 100%; }
.icon-select-icon { display: inline-flex; width: 1.25rem; justify-content: center; flex: none; color: var(--bs-secondary-color); }
.icon-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-select-menu { max-height: 20rem; overflow: hidden; padding-top: .5rem; }
.icon-select-list { max-height: 16rem; overflow-y: auto; }
.icon-select-item { display: flex; align-items: center; gap: .5rem; }
.icon-select-item.active .icon-select-icon { color: inherit; }

/* An approval drawn as a flow (Pages/Shared/_ApprovalFlow.cshtml): the submission, a box per level, and how it ended. */
.flow-scroll { overflow-x: auto; padding-bottom: .25rem; }
.flow { display: flex; align-items: stretch; gap: .25rem; flex-wrap: wrap; }
.flow-node {
    min-width: 11rem; max-width: 16rem; padding: .6rem .75rem; border-radius: .6rem;
    border: 1.5px solid var(--bs-border-color); background: var(--bs-body-bg);
}
.flow-title { font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.flow-step {
    display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;
    border-radius: 50%; background: var(--bs-secondary-bg); font-size: .8rem; flex: none;
}
.flow-people { margin-top: .35rem; }
.flow-arrow { display: flex; align-items: center; color: var(--bs-secondary-color); }
[dir="rtl"] .flow-arrow i { transform: scaleX(-1); }
.flow-passed { border-color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.flow-passed .flow-step { background: var(--bs-success); color: #fff; }
.flow-current { border-color: var(--bs-warning); background: var(--bs-warning-bg-subtle); box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .25); }
.flow-current .flow-step { background: var(--bs-warning); }
.flow-rejected { border-color: var(--bs-danger); background: var(--bs-danger-bg-subtle); }
.flow-rejected .flow-step { background: var(--bs-danger); color: #fff; }
.flow-waiting { border-style: dashed; }
.flow-skipped { border-style: dashed; opacity: .75; }
.flow-state { color: var(--bs-secondary-color); }
.flow-end { align-self: center; }
@media (max-width: 575.98px) {
    .flow { flex-direction: column; }
    .flow-node { max-width: none; }
    .flow-arrow { justify-content: center; }
    .flow-arrow i { transform: rotate(90deg); }
    [dir="rtl"] .flow-arrow i { transform: rotate(90deg); }
}

/* --- Hijri calendar popup (date-input.js) ---------------------------------- */

.hijri-picker {
    position: absolute;
    top: calc(100% + .35rem);
    inset-inline-start: 0;
    z-index: 1056;
    width: 19.5rem;
    padding: .75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

.hijri-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.hijri-picker-title { text-align: center; line-height: 1.2; }
.hijri-picker-month { font-weight: 600; }
.hijri-picker-sub { font-size: .75rem; color: var(--bs-secondary-color); }

.hijri-picker-nav {
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.hijri-picker-nav:hover { background: var(--bs-secondary-bg); }

.hijri-picker-week,
.hijri-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .15rem;
    text-align: center;
}

.hijri-picker-week span {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    padding-bottom: .2rem;
}

.hijri-picker-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 2.6rem;
    padding: 0;
    border: 0;
    border-radius: .65rem;
    background: transparent;
    color: var(--bs-body-color);
    line-height: 1.1;
}

.hijri-picker-day:hover { background: var(--bs-tertiary-bg); }
.hijri-picker-hd { font-weight: 600; }
.hijri-picker-gd { font-size: .62rem; color: var(--bs-secondary-color); }

.hijri-picker-day.is-today { box-shadow: inset 0 0 0 1px var(--bs-primary); }

.hijri-picker-day.is-selected { background: var(--bs-primary); color: #fff; }
.hijri-picker-day.is-selected .hijri-picker-gd { color: rgba(255, 255, 255, .8); }

.hijri-picker-foot { margin-top: .4rem; text-align: center; }

/* --- e-mail capture ------------------------------------------------------------ */

.mail-stat {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    height: 100%;
}

.mail-stat > i {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .625rem;
    font-size: 1.25rem;
    color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.mail-stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.mail-stat-label {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

.mail-stat-warn > i {
    color: var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
}

.mail-stat-on > i {
    color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
}

.mail-error {
    max-width: 26rem;
    overflow-wrap: anywhere;
}

/* The reading pane for an archived message: a card with the headers on top and the body in a sandboxed frame. */

.mail-view-head {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    font-size: .875rem;
}

.mail-view-head dt {
    color: var(--bs-secondary-color);
    font-weight: 500;
    margin: 0;
}

.mail-view-head dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.mail-frame {
    width: 100%;
    min-height: 36rem;
    border: 0;
    background: #fff;
    border-radius: 0 0 .75rem .75rem;
}

.mail-attachment {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    text-decoration: none;
    color: inherit;
    font-size: .875rem;
}

.mail-attachment:hover {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

/* --- role file-extension chooser --------------------------------------------------- */

.ext-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ext-chip {
    cursor: pointer;
    margin: 0;
}

.ext-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ext-chip span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    background: var(--bs-body-bg);
    font-size: .875rem;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.ext-chip:hover span {
    border-color: var(--bs-primary);
}

.ext-chip input:checked + span {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

.ext-chip input:focus-visible + span {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.ext-chip input:disabled + span {
    cursor: not-allowed;
}

/* --- feature packs ------------------------------------------------------------- */

.feature-card,
.feature-hero {
    --feature-color: var(--bs-primary);
    position: relative;
    display: flex;
    gap: .875rem;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-inline-start: 4px solid var(--feature-color);
    border-radius: .75rem;
    transition: box-shadow .15s ease, transform .15s ease;
}

.feature-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.feature-hero {
    align-items: center;
}

.feature-card-icon,
.feature-dot {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--feature-color);
    background: color-mix(in srgb, var(--feature-color) 14%, transparent);
}

.feature-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    font-size: 1.4rem;
}

.feature-dot {
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
}

.feature-card-body {
    min-width: 0;
    flex: 1;
}

.feature-card-title {
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
}

/* --- labels for paper folders and boxes ------------------------------------------ */

.label-sheets {
    direction: ltr;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    overflow: auto;
}

.label-page {
    flex: none;
    background: #fff;
    color: #000;
    box-shadow: 0 0 0 1px var(--bs-border-color);
}

/* The cell is the size container; the grid inside it measures itself against the cell (container units do not apply to the
   container's own properties, only to what is inside it). */
.label-cell {
    container-type: size;
    overflow: hidden;
    outline: 1px dashed #c9ced4;
    outline-offset: -1px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.label-inner {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 62cqh minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 30cqh;
    column-gap: 4cqh;
    padding: 4cqh 5cqh;
}

.label-blank {
    outline-style: dotted;
    opacity: .5;
}

.label-qr {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
}

.label-qr svg,
.label-bars svg {
    display: block;
    width: 100%;
    height: 100%;
}

.label-text {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    line-height: 1.15;
}

.label-title,
.label-title-ar {
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.label-title { font-size: 9.5cqh; }
.label-title-ar { font-size: 8.5cqh; margin-top: 1cqh; }
.label-line { font-size: 6.2cqh; margin-top: 1.2cqh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.label-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 2cqh;
}

.label-bars { flex: 1; min-height: 0; }

.label-code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 6cqh;
    text-align: center;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
}

@media print {
    /* Only the labels reach the paper: everything that is neither the labels, nor one of their ancestors, nor one of their
       descendants is hidden, written against the labels themselves so renesting the page cannot bring the navigation back. */
    body :not(:has(.label-sheets)):not(.label-sheets):not(.label-sheets *) {
        display: none !important;
    }

    body > *:not(#main),
    #main > div > *:not(.label-sheets) {
        display: none !important;
    }

    #main,
    #main > div {
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
    }

    .label-sheets {
        display: block !important;
        overflow: visible;
    }

    .label-page {
        box-shadow: none;
        break-after: page;
        page-break-after: always;
    }

    .label-page:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .label-cell,
    .label-blank {
        outline: none;
    }

    .label-blank { visibility: hidden; }
}

/* --- redaction: places found by a search, and marks carried over to a new version -------------- */

.redaction-box.is-found {
    background: rgba(255, 193, 7, .35);
    border: 2px dashed #b58100;
}

.redaction-box.is-carried {
    border-style: dashed;
    outline: 2px solid #ffc107;
}

.redaction-found-list {
    max-height: 14rem;
    overflow: auto;
}

.redaction-found-item {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .2rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}