/* Official application-wide theme */

.app-shell {
    background: var(--canvas);
}

.app-shell main {
    background: var(--canvas);
}

.sidebar {
    background: var(--surface);
}

.brand__mark {
    background: var(--surface-soft);
    color: var(--primary);
}
.avatar {
    background: var(--surface-soft);
    color: var(--primary);
}

.nav-item.active {
    background: var(--surface-soft);
    box-shadow: inset -3px 0 var(--brand-gold);
}

.app-shell[dir='ltr'] .nav-item.active {
    box-shadow: inset 3px 0 var(--brand-gold);
}

.language-switch .fi {
    width: 20px;
    height: 15px;
    flex: 0 0 20px;
    border-radius: 3px;
    box-shadow: none;
    background-size: cover;
}

.language-switch {
    gap: 8px;
}

.theme-button > .bi {
    color: var(--muted);
}

.theme-menu,
.theme-palette {
    position: fixed;
    z-index: 1100;
    color: var(--text);
    background: var(--popover);
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 4px 12px #00000024;
    font-size: 12px;
}

.theme-menu[hidden],
.theme-palette[hidden] {
    display: none;
}

.theme-menu {
    min-width: 136px;
    padding: 6px;
}

.theme-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 3px;
    color: var(--text);
    background: transparent;
    text-align: start;
}

.theme-menu button span {
    flex: 1;
}

.theme-menu button[aria-checked='true'] {
    background: var(--action-primary);
    color: var(--action-primary-text);
}

.theme-menu button:not([aria-checked='true']) .bi-check2 {
    visibility: hidden;
}

.theme-menu button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.theme-menu button:not([aria-checked='true']):hover {
    background: var(--selection);
}

.theme-palette-toggle {
    position: fixed;
    /* Below the modal backdrop (1000). At 1100 this floated above every dialog,
       so a colour-palette button sat on top of confirmations and forms. */
    z-index: 120;
    /* Logical, not physical: it kept the same visual corner in Arabic and English,
       which put it at the start of the line in one and the end in the other. */
    inset-inline-end: 18px;
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--action-primary-text);
    background: var(--action-primary);
    box-shadow: 0 3px 8px #00000026;
    font-size: 20px;
}

.theme-palette {
    inset-inline-end: 12px;
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 52px));
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - 90px);
    overflow: auto;
}

.theme-palette header,
.theme-palette footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}

.theme-palette header {
    border-bottom: 1px solid var(--line);
}

.theme-palette h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.theme-palette__subtitle,
.theme-palette small,
.theme-palette [data-hex] {
    color: var(--text-secondary);
    font-size: 11px;
}

.theme-palette__subtitle {
    margin: 3px 0 0;
}

.theme-palette button {
    border: 0;
    padding: 3px;
    background: transparent;
    color: var(--text);
}

.theme-palette__fields {
    padding: 10px 16px;
}

.theme-palette__row {
    display: grid;
    grid-template-columns: 1fr 66px 28px;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

.theme-palette__row label {
    margin: 0;
    cursor: pointer;
}

.theme-palette__row input[type='color'] {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--popover);
    cursor: pointer;
}

.theme-palette__row [data-hex] {
    width: 66px;
    min-height: 0;
    height: 28px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font-family: inherit;
}

.theme-palette__row [data-hex]:focus {
    border-color: var(--primary);
    outline: none;
}

.theme-palette footer {
    border-top: 1px solid var(--line);
}

.theme-palette [data-reset] {
    color: var(--danger);
    font-size: 11px;
}

.theme-palette [data-reset]:disabled {
    opacity: 0.5;
    cursor: default;
}

@media print {
    .theme-menu,
    .theme-palette,
    .theme-palette-toggle {
        display: none !important;
    }
}

html[data-theme='dark'] {
    color-scheme: dark;
}

/* Native scrollbars also need explicit colors inside nested scrolling containers. */
html[data-theme='dark'] {
    scrollbar-color: var(--muted) var(--canvas);
}
html[data-theme='dark'] * {
    scrollbar-color: var(--muted) var(--canvas);
}

/* Quartz declares a light color scheme independently of the application theme. */
html[data-theme='dark'] .ag-theme-quartz {
    color-scheme: dark;
}
html[data-theme='dark'] .ag-theme-quartz-dark {
    color-scheme: dark;
}
html[data-theme='dark'] .ag-styled-root {
    color-scheme: dark;
}

html[data-theme='dark'] body {
    color: var(--text);
    background: var(--canvas);
}
html[data-theme='dark'] .app-shell {
    color: var(--text);
    background: var(--canvas);
}
html[data-theme='dark'] main {
    color: var(--text);
    background: var(--canvas);
}

html[data-theme='dark'] .sidebar {
    background: var(--surface);
}

html[data-theme='dark'] .topbar h1 {
    color: var(--on-brand);
}
html[data-theme='dark'] .page-title h2 {
    color: var(--on-brand);
}
html[data-theme='dark'] .section-heading h2 {
    color: var(--on-brand);
}
html[data-theme='dark'] .settings-toolbar h3 {
    color: var(--on-brand);
}
html[data-theme='dark'] .profile-data h3 {
    color: var(--on-brand);
}

html[data-theme='dark'] .topbar p {
    color: var(--on-brand-muted);
}
html[data-theme='dark'] .page-title p {
    color: var(--on-brand-muted);
}
html[data-theme='dark'] .section-heading p {
    color: var(--on-brand-muted);
}
html[data-theme='dark'] .settings-toolbar span {
    color: var(--on-brand-muted);
}
html[data-theme='dark'] .metrics span {
    color: var(--on-brand-muted);
}
html[data-theme='dark'] .metrics small {
    color: var(--on-brand-muted);
}
html[data-theme='dark'] .profile-data p {
    color: var(--on-brand-muted);
}

html[data-theme='dark'] .metrics article {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
html[data-theme='dark'] .workspace-card {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
html[data-theme='dark'] .profile-card {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
html[data-theme='dark'] .settings-content {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
html[data-theme='dark'] .settings-menu {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
html[data-theme='dark'] .module-card {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
html[data-theme='dark'] .profile-menu {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
html[data-theme='dark'] .modal {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
html[data-theme='dark'] .official-user-modal {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
html[data-theme='dark'] .decision-modal {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
html[data-theme='dark'] .print-preview-dialog {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

html[data-theme='dark'] .icon-button {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--primary);
}
html[data-theme='dark'] .language-switch {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--primary);
}
html[data-theme='dark'] .secondary-button {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--primary);
}
html[data-theme='dark'] .row-action {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--primary);
}
html[data-theme='dark'] .profile-link {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--primary);
}
html[data-theme='dark'] .upload-avatar {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--primary);
}
html[data-theme='dark'] .logout-button {
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--primary);
}

html[data-theme='dark'] .icon-button > .bi {
    color: var(--primary);
}
html[data-theme='dark'] .theme-button > .bi {
    color: var(--primary);
}
html[data-theme='dark'] .language-switch > .bi {
    color: var(--primary);
}

html[data-theme='dark'] :where(input) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] :where(select) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] :where(textarea) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] :where(.search) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] :where(.select-trigger) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] :where(.select-popover) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] :where(.select-option) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

html[data-theme='dark'] input::placeholder {
    color: var(--muted);
}
html[data-theme='dark'] textarea::placeholder {
    color: var(--muted);
}

html[data-theme='dark'] .select-option:hover {
    color: var(--text) !important;
    background: var(--surface) !important;
}
html[data-theme='dark'] .select-option.selected {
    color: var(--text) !important;
    background: var(--surface) !important;
}

html[data-theme='dark'] .security-tabs {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] .user-editor-tabs {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] .settings-toolbar {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] .official-user-fields {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] .official-user-permissions fieldset {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] .request-summary {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

html[data-theme='dark'] .security-tabs button {
    color: var(--muted);
    background: transparent;
}
html[data-theme='dark'] .user-editor-tab {
    color: var(--muted);
    background: transparent;
}
html[data-theme='dark'] .settings-menu button {
    color: var(--muted);
    background: transparent;
}

html[data-theme='dark'] .security-tabs button.active {
    color: var(--muted) !important;
    background: var(--surface) !important;
}
html[data-theme='dark'] .user-editor-tab.active {
    color: var(--muted) !important;
    background: var(--surface) !important;
}
html[data-theme='dark'] .settings-menu button.active {
    color: var(--muted) !important;
    background: var(--surface) !important;
}

html[data-theme='dark'] .modal-context {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] .official-user-modal > .modal-context {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] .official-user-modal > .modal-actions {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] .modal-actions {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] .print-preview-toolbar {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

html[data-theme='dark'] .modal-context h3 {
    color: var(--text);
}
html[data-theme='dark'] .official-user-modal > .modal-context h3 {
    color: var(--text);
}
html[data-theme='dark'] .decision-heading h3 {
    color: var(--text);
}
html[data-theme='dark'] .settings-modal h3 {
    color: var(--text);
}

html[data-theme='dark'] .modal-context p {
    color: var(--muted);
}
html[data-theme='dark'] .official-user-modal > .modal-context p {
    color: var(--muted);
}
html[data-theme='dark'] .decision-heading p {
    color: var(--muted);
}

html[data-theme='dark'] .ag-theme-quartz {
    --ag-background-color: var(--canvas);
    --ag-foreground-color: var(--text);
    --ag-header-background-color: var(--grid-header);
    --ag-header-foreground-color: var(--text);
    --ag-border-color: var(--line);
    --ag-row-border-color: var(--line);
    --ag-odd-row-background-color: var(--grid-odd);
    --ag-row-hover-color: var(--grid-hover);
    --ag-selected-row-background-color: var(--grid-selected);
    --ag-input-background-color: var(--grid-header);
    --ag-input-border-color: var(--line);
    --ag-modal-overlay-background-color: #00000099;
}

html[data-theme='dark'] .status-check {
    color: var(--muted);
    border-color: var(--line);
    background: var(--surface);
}
html[data-theme='dark'] .permission-checks .check:has(input:checked) {
    color: var(--muted);
    border-color: var(--line);
    background: var(--surface);
}

html[data-theme='dark'] .official-user-fields label:not(.check) {
    color: var(--muted);
}
html[data-theme='dark'] .official-user-permissions .permission-checks .check {
    color: var(--muted);
}
html[data-theme='dark'] .official-user-permissions legend {
    color: var(--muted);
}

html[data-theme='dark'] .official-user-permissions legend {
    background: transparent;
}

html[data-theme='dark'] .official-user-permissions .permission-checks .check:hover {
    background: var(--surface);
    border-color: var(--line);
}

html[data-theme='dark'] .mobile-nav-trigger {
    border-color: var(--line);
    background: var(--surface);
    color: var(--muted);
}

@media print {
    html[data-theme='dark'] body,
    html[data-theme='dark'] .catalog-print-sheet {
        color: #111 !important;
        background: #fff !important;
    }
}

/* Strong high-contrast brand actions */