/* Shurouq Al Hamra: presentation-only pastel theme layer. */
:root {
    color-scheme: light;
    --pastel-canvas: #fbf8f4;
    --pastel-surface: #ffffff;
    --pastel-surface-muted: #f4effa;
    --pastel-surface-strong: #ebe4f5;
    --pastel-sidebar: #eee8f7;
    --pastel-border: #ded7e8;
    --pastel-border-strong: #c9bfd8;
    --pastel-text: #292432;
    --pastel-text-soft: #4f4858;
    --pastel-text-muted: #655d6f;
    --pastel-primary: #5c529c;
    --pastel-primary-hover: #4d438c;
    --pastel-primary-soft: #e6e0f6;
    --pastel-primary-border: #9187c7;
    --pastel-mint: #d9eee5;
    --pastel-mint-text: #28614f;
    --pastel-mint-border: #78a994;
    --pastel-peach: #f8e3d8;
    --pastel-peach-text: #82513d;
    --pastel-peach-border: #b87552;
    --pastel-rose: #f7dfe4;
    --pastel-rose-text: #8b4051;
    --pastel-rose-border: #c58c99;
    --pastel-table-heading: rgb(244 239 250 / 0.72);
    --pastel-shadow: 0 8px 24px rgb(73 58 91 / 0.06);
}

[data-theme="dark"] {
    color-scheme: dark;
    --pastel-canvas: #101522;
    --pastel-surface: #18202f;
    --pastel-surface-muted: #141b29;
    --pastel-surface-strong: #252e40;
    --pastel-sidebar: #171d2c;
    --pastel-border: #344056;
    --pastel-border-strong: #46536b;
    --pastel-text: #f1eef6;
    --pastel-text-soft: #d0c9da;
    --pastel-text-muted: #aaa2b7;
    --pastel-primary: #b6aef0;
    --pastel-primary-hover: #cbc5f7;
    --pastel-primary-soft: #302d4d;
    --pastel-primary-border: #655d99;
    --pastel-mint: #193a33;
    --pastel-mint-text: #afe4d2;
    --pastel-mint-border: #477668;
    --pastel-peach: #3b2c25;
    --pastel-peach-text: #f2c4aa;
    --pastel-peach-border: #ba7956;
    --pastel-rose: #3d232c;
    --pastel-rose-text: #f0b7c4;
    --pastel-rose-border: #865563;
    --pastel-table-heading: rgb(37 46 64 / 0.82);
    --pastel-shadow: 0 10px 28px rgb(0 0 0 / 0.2);
}

html body {
    background: var(--pastel-canvas) !important;
    color: var(--pastel-text) !important;
}

body > header[style] {
    background: var(--pastel-sidebar) !important;
    border-color: var(--pastel-border) !important;
    box-shadow: 0 1px 0 rgb(73 58 91 / 0.04);
}

body > header[style] a,
body > header[style] button {
    color: var(--pastel-text) !important;
    border-color: var(--pastel-border-strong) !important;
}

#admin-sidebar,
#staff-sidebar {
    background: var(--pastel-sidebar) !important;
    color: var(--pastel-text) !important;
    border-color: var(--pastel-border) !important;
}

#admin-sidebar .border-gray-800,
#staff-sidebar .border-gray-800 {
    border-color: var(--pastel-border) !important;
}

/* Existing dark-first utilities are deliberately recolored, not restructured. */
.bg-gray-950,
.bg-gray-900 { background-color: var(--pastel-surface-muted) !important; }
.bg-gray-800 { background-color: var(--pastel-surface) !important; }
.bg-gray-800\/50,
.bg-gray-700\/50 { background-color: var(--pastel-table-heading) !important; }
.bg-gray-700,
.bg-gray-600 { background-color: var(--pastel-surface-strong) !important; }

.border-gray-900,
.border-gray-800,
.border-gray-700 { border-color: var(--pastel-border) !important; }
.border-gray-600,
.border-gray-500 { border-color: var(--pastel-border-strong) !important; }

.text-white,
.text-gray-50,
.text-gray-100,
.text-gray-200 { color: var(--pastel-text) !important; }
.text-gray-300,
.text-gray-400 { color: var(--pastel-text-soft) !important; }
.text-gray-500,
.text-gray-600 { color: var(--pastel-text-muted) !important; }

.bg-indigo-600.text-white,
.bg-indigo-500.text-white,
.bg-red-500.text-white,
.bg-red-600.text-white { color: #ffffff !important; }

.bg-indigo-600,
.bg-indigo-500 { background-color: var(--pastel-primary) !important; }
.bg-indigo-700 { background-color: var(--pastel-primary-hover) !important; }
.bg-indigo-900\/10,
.bg-indigo-900\/20,
.bg-indigo-900\/30,
.bg-indigo-900\/40,
.bg-indigo-600\/20,
.bg-indigo-500\/10,
.bg-purple-500\/10 { background-color: var(--pastel-primary-soft) !important; }
.text-indigo-100,
.text-indigo-200,
.text-indigo-300,
.text-indigo-400,
.text-indigo-500 { color: var(--pastel-primary) !important; }
.border-indigo-500,
.border-indigo-600,
.border-indigo-700,
.border-indigo-800,
.border-indigo-500\/20,
.border-indigo-500\/30,
.border-indigo-700\/60,
.border-indigo-800\/60 { border-color: var(--pastel-primary-border) !important; }
.ring-indigo-500\/20 { --tw-ring-color: rgb(109 99 173 / 0.2) !important; }

.bg-green-900\/10,
.bg-green-900\/20,
.bg-green-900\/30,
.bg-green-900\/40,
.bg-green-900\/50,
.bg-emerald-900\/30,
.bg-emerald-500\/10 { background-color: var(--pastel-mint) !important; }
.text-green-200,
.text-green-300,
.text-green-400,
.text-emerald-300,
.text-emerald-400 { color: var(--pastel-mint-text) !important; }
.border-green-500,
.border-green-600,
.border-green-700,
.border-green-800,
.border-green-500\/30 { border-color: var(--pastel-mint-border) !important; }

.bg-amber-900\/30,
.bg-amber-900\/40,
.bg-amber-900\/50,
.bg-yellow-900\/30,
.bg-yellow-500\/10 { background-color: var(--pastel-peach) !important; }
.text-amber-200,
.text-amber-300,
.text-amber-400,
.text-yellow-300,
.text-yellow-400 { color: var(--pastel-peach-text) !important; }

.bg-red-900\/20,
.bg-red-900\/30,
.bg-red-900\/40,
.bg-red-500\/10 { background-color: var(--pastel-rose) !important; }
.text-red-200,
.text-red-300,
.text-red-400,
.text-red-500 { color: var(--pastel-rose-text) !important; }
.border-red-500,
.border-red-600,
.border-red-700,
.border-red-800,
.border-red-500\/30 { border-color: var(--pastel-rose-border) !important; }

.hover\:bg-gray-800:hover,
.hover\:bg-gray-700:hover { background-color: var(--pastel-surface-strong) !important; }
.hover\:text-white:hover { color: var(--pastel-text) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--pastel-primary-hover) !important; }

input,
select,
textarea {
    background-color: var(--pastel-surface) !important;
    border-color: var(--pastel-border-strong) !important;
    color: var(--pastel-text) !important;
}

input::placeholder,
textarea::placeholder { color: #928a9b !important; }

.shadow,
.shadow-sm,
.shadow-lg,
.shadow-xl { box-shadow: var(--pastel-shadow) !important; }

table { color: var(--pastel-text); }
thead,
th { color: var(--pastel-text-soft) !important; }
tbody,
td { color: var(--pastel-text) !important; }
tbody tr { border-color: var(--pastel-border) !important; }

label { color: var(--pastel-text-soft); }

nav[aria-label="Pagination Navigation"] a,
nav[aria-label="Pagination Navigation"] span {
    border-color: var(--pastel-border) !important;
    color: var(--pastel-text-soft) !important;
}

*:focus-visible {
    outline-color: var(--pastel-primary);
    outline-offset: 2px;
}

.document-expiry {
    display: inline-flex;
    max-width: 100%;
    flex-direction: column;
    gap: 0.125rem;
    border-left: 3px solid transparent;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    color: var(--pastel-text-soft);
}

.document-expiry__date {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
}

.document-expiry__label {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.25;
}

.document-expiry--warning {
    border-color: var(--pastel-peach-border);
    background: var(--pastel-peach);
    color: var(--pastel-peach-text);
}

.document-expiry--urgent,
.document-expiry--expired {
    border-color: var(--pastel-rose-border);
    background: var(--pastel-rose);
    color: var(--pastel-rose-text);
}

.document-expiry--missing {
    color: var(--pastel-text-muted);
}

.searchable-select {
    min-width: min(100%, 12rem);
    position: relative;
}

.searchable-select__list {
    position: absolute;
    z-index: 40;
    width: 100%;
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--pastel-border-strong);
    border-radius: 0.5rem;
    background: var(--pastel-surface, #1f2937);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.2);
}

.searchable-select__choice {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    color: inherit;
}

.searchable-select__choice:hover,
.searchable-select__choice[aria-selected="true"] {
    background: rgb(99 102 241 / 0.25);
}

.searchable-select__search {
    width: 100%;
    margin-bottom: 0.375rem;
    border: 1px solid var(--pastel-border-strong);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.searchable-select__empty {
    margin-top: 0.25rem;
    color: var(--pastel-text-muted);
    font-size: 0.75rem;
}

@media (max-width: 640px) {
    .searchable-select,
    .searchable-select select {
        width: 100%;
    }

    .document-expiry {
        white-space: normal;
    }
}