/*
 * Personal appearance
 * Defines user-selectable screen themes and their colour-token overrides.
 * Components retain light fallbacks, while print and export colours remain unchanged.
 */

    /* Theme colour tokens
    ========================================================================================================================== */
        :root { color-scheme: light; }

            @media screen {
                :root[data-theme="dark"] {
                    color-scheme: dark;
                    --crm-ink: #e5ebe7;
                    --crm-green: #a5d8b1;
                    --crm-green-light: #87bb93;
                    --crm-canvas: #151b18;
                    --crm-panel: #202823;
                    --crm-line: #3c4b41;
                    --crm-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
                    --crm-surface: #28322c;
                    --crm-surface-soft: #242d27;
                    --crm-surface-overlay: #29332d;
                    --crm-text-muted: #b3c0b7;
                    --crm-border-strong: #667e6d;
                    --crm-accent-text: #b4e0be;
                    --crm-accent-surface: #304d39;
                    --crm-control-track: #526459;
                    --crm-danger-surface: #492f2c;
                    --crm-danger-text: #ffb6ab;
                    --crm-danger-border: #b97c73;
                    --crm-warning-surface: #403923;
                    --crm-warning-text: #f0d38b;
                    --crm-warning-border: #a4915e;
                    --crm-info-surface: #2b384f;
                    --crm-info-text: #b8d2ff;
                    --crm-info-border: #7b96c0;
                    --vulscan-ink: #e5ebe7;
                    --vulscan-green: #a5d8b1;
                    --vulscan-mint: #304d39;
                    --vulscan-paper: #28322c;
                    --vulscan-line: #3c4b41;
                    --vulscan-orange: #f0c188;
                    --vulscan-red: #ffb6ab;
                }

                /* Quill appends CSS dynamically: specificity must win in either load order. */
                    html[data-theme="dark"] .ql-toolbar.ql-snow,
                    html[data-theme="dark"] .ql-container.ql-snow,
                    html[data-theme="dark"] .ql-snow .ql-picker-options,
                    html[data-theme="dark"] .ql-snow .ql-tooltip { background: var(--crm-surface); color: var(--crm-ink); border-color: var(--crm-border-strong); }
                    html[data-theme="dark"] .ql-snow .ql-picker { color: var(--crm-ink); }
                    html[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--crm-ink); }
                    html[data-theme="dark"] .ql-snow .ql-fill { fill: var(--crm-ink); }
                    html[data-theme="dark"] .ql-snow .ql-editor.ql-blank::before { color: var(--crm-text-muted); }
                    html[data-theme="dark"] .ql-snow .ql-tooltip input { color: var(--crm-ink); background: var(--crm-canvas); }
                    html[data-theme="dark"] .ql-snow .ql-picker-item:hover,
                    html[data-theme="dark"] .ql-snow .ql-picker-item.ql-selected,
                    html[data-theme="dark"] .ql-snow .ql-picker-label:hover,
                    html[data-theme="dark"] .ql-snow .ql-picker-label.ql-active { color: var(--crm-green); }
                    html[data-theme="dark"] .ql-snow button:hover .ql-stroke,
                    html[data-theme="dark"] .ql-snow button.ql-active .ql-stroke { stroke: var(--crm-green); }
                    html[data-theme="dark"] .ql-snow button:hover .ql-fill,
                    html[data-theme="dark"] .ql-snow button.ql-active .ql-fill { fill: var(--crm-green); }
                    html[data-theme="dark"] a { color: var(--crm-green); }
                    html[data-theme="dark"] input::placeholder,
                    html[data-theme="dark"] textarea::placeholder { color: var(--crm-text-muted); opacity: 1; }
                    html[data-theme="dark"] input,
                    html[data-theme="dark"] select { accent-color: var(--crm-green-light); }
                    html[data-theme="dark"] :is(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid #b4e0be; outline-offset: 3px; }

                /* A QR code needs its original white quiet zone. No image filtering. */
                    html[data-theme="dark"] .mfa-qr-panel { background: #fff; color: #173627; }
                    html[data-theme="dark"] .mfa-qr-panel p { color: #52615c; }
            }
    /* ======================================================================================================================= */


    /* Appearance switch controls
    ========================================================================================================================== */
        .crm-mainmenu, .crm-navigation, .crm-account { flex-wrap: wrap; }
        .crm-account { justify-content: flex-end; }
        .shared-files-new-badge { display: inline-block; margin-inline-start: .45rem; padding: .12rem .5rem; border-radius: 999px; background: var(--crm-danger, #a52323); color: #fff; font-size: .75em; font-weight: 700; line-height: 1.4; vertical-align: middle; }
        .crm-appearance-switch-form { display: inline-flex; align-items: center; position: relative; }
        .crm-appearance-switch { display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 52px; min-height: 28px; padding: 3px; border: 1px solid var(--crm-border-strong, #9fbda1); border-radius: 24px; background: var(--crm-surface, #fff); color: var(--crm-green); cursor: pointer; }
        .crm-appearance-switch svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.8; }
        .crm-appearance-switch .crm-appearance-sun { background: #e1ece1; color: #244a2b; }
        .crm-appearance-switch[aria-checked="true"] .crm-appearance-sun { background: transparent; color: inherit; }
        .crm-appearance-switch[aria-checked="true"] .crm-appearance-moon { background: #b4e0be; color: #173627; }
        .crm-appearance-switch:disabled { cursor: wait; opacity: .65; }
        .crm-appearance-switch:focus-visible { outline: 3px solid var(--crm-green-light); outline-offset: 3px; }
        .crm-appearance-status:not(.is-error) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
        .crm-appearance-status.is-error { position: absolute; top: 100%; right: 0; z-index: 10; width: 240px; padding: 12px; background: var(--crm-danger-surface, #fdecec); color: var(--crm-danger-text, #9b1c1c); border: 1px solid var(--crm-danger-border, #e7a8a8); border-radius: 8px; text-transform: none; letter-spacing: normal; }

        [data-appearance-status].is-error { color: var(--crm-danger-text, #9b1c1c); }

        @media print { .crm-appearance-switch-form { display: none; } }
    /* ======================================================================================================================= */