/*
 * Zynolo dark theme.
 *
 * Active when <html data-theme="dark"> (set by js/zn-theme.js). Hard-coded colours in style.css and in each
 * page's own <style> blocks are converted at runtime by zn-theme.js; this file covers the shared layout,
 * Bootstrap pieces that need hand-tuning, and third-party CSS served from CDNs (which can't be converted).
 *
 * Screen only - printouts and print previews always stay light.
 */
@media screen {
    html[data-theme="dark"] {
        color-scheme: dark;
        background: #0f141b;

        --zd-page: #0f141b;
        --zd-well: #151a21;
        --zd-surface: #1b2129;
        --zd-raised: #232a34;
        --zd-border: #2f3743;
        --zd-border-strong: #3c4553;
        --zd-text: #e6edf3;
        --zd-text-soft: #c3ccd7;
        --zd-muted: #93a1b1;
        --zd-primary: #5b9bff;
        --zd-primary-soft: rgba(91, 155, 255, 0.14);

        --zn-primary: #5b9bff;
        --zn-primary-soft: rgba(91, 155, 255, 0.14);
        --zn-bg: var(--zd-page);
        --zn-surface: var(--zd-surface);
        --zn-text: var(--zd-text);
        --zn-muted: var(--zd-muted);
        --zn-border: var(--zd-border);
        --zn-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

        --bs-body-bg: var(--zd-page);
        --bs-body-color: var(--zd-text);

        --fc-page-bg-color: var(--zd-surface);
        --fc-neutral-bg-color: var(--zd-raised);
        --fc-neutral-text-color: var(--zd-muted);
        --fc-border-color: var(--zd-border);
        --fc-today-bg-color: rgba(91, 155, 255, 0.12);
        --fc-list-event-hover-bg-color: var(--zd-raised);
        --fc-highlight-color: rgba(91, 155, 255, 0.18);
        --fc-non-business-color: rgba(255, 255, 255, 0.03);
    }

    html.zn-theme-switching *,
    html.zn-theme-switching *::before,
    html.zn-theme-switching *::after {
        transition: none !important;
    }

    html[data-theme="dark"] body {
        background: var(--zd-page);
        color: var(--zd-text);
    }

    html[data-theme="dark"] ::selection {
        background: rgba(91, 155, 255, 0.35);
        color: #fff;
    }

    /* ---------- Layout ---------- */
    html[data-theme="dark"] body .page-body-wrapper,
    html[data-theme="dark"] body .main-panel,
    html[data-theme="dark"] body .main-panel .content-wrapper {
        background: var(--zd-page) !important;
    }

    html[data-theme="dark"] body .navbar {
        background: rgba(21, 26, 33, 0.92) !important;
        box-shadow: 0 1px 0 var(--zd-border), 0 2px 14px rgba(0, 0, 0, 0.3);
    }

    html[data-theme="dark"] body .navbar .navbar-brand-wrapper,
    html[data-theme="dark"] body .navbar .navbar-menu-wrapper {
        background: transparent !important;
        border-color: var(--zd-border) !important;
    }

    html[data-theme="dark"] body .navbar .navbar-toggler,
    html[data-theme="dark"] body .navbar .nav-link,
    html[data-theme="dark"] body .navbar .nav-profile-name,
    html[data-theme="dark"] body .navbar .text-dark {
        color: var(--zd-text-soft) !important;
    }

    /* The logo artwork has dark lettering on a transparent background. */
    html[data-theme="dark"] body .navbar .brand-logo img,
    html[data-theme="dark"] body .navbar .brand-logo-mini img {
        background: #fff;
        border-radius: 6px;
        padding: 2px 3px;
    }

    /* The sidebar carries its own light/dark palette in side-nav-bar.blade.php. */

    html[data-theme="dark"] body .page-header-bar {
        border-bottom-color: var(--zd-border);
    }

    html[data-theme="dark"] body .page-header-title,
    html[data-theme="dark"] body .card-title,
    html[data-theme="dark"] body .zn-modal__title,
    html[data-theme="dark"] body .section-title,
    html[data-theme="dark"] body .content-wrapper > h1,
    html[data-theme="dark"] body .content-wrapper > h2,
    html[data-theme="dark"] body .content-wrapper > h3,
    html[data-theme="dark"] body .content-wrapper > h4,
    html[data-theme="dark"] body .content-wrapper > h5 {
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .page-header-path {
        color: var(--zd-muted);
    }

    html[data-theme="dark"] body .page-header-path .current,
    html[data-theme="dark"] body .page-header-path a {
        color: #8fbaff;
    }

    html[data-theme="dark"] body .footer {
        background: var(--zd-page) !important;
        border-top-color: var(--zd-border) !important;
        color: var(--zd-muted);
    }

    /* ---------- Theme toggle ---------- */
    .zn-theme-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        color: #475569;
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .zn-theme-toggle:hover {
        background: #eef4ff;
        color: #1d4ed8;
    }

    .zn-theme-toggle:focus-visible {
        outline: 2px solid #5b9bff;
        outline-offset: 2px;
    }

    .zn-theme-toggle .zn-theme-icon {
        display: inline-flex;
        animation: zn-theme-spin 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .zn-theme-toggle .zn-theme-icon-light,
    html[data-theme="dark"] .zn-theme-toggle .zn-theme-icon-dark {
        display: none;
    }

    html[data-theme="dark"] .zn-theme-toggle .zn-theme-icon-light {
        display: inline-flex;
    }

    html[data-theme="dark"] body .zn-theme-toggle {
        color: #fbbf24;
    }

    html[data-theme="dark"] body .zn-theme-toggle:hover {
        background: var(--zd-raised);
        border-color: var(--zd-border);
        color: #fcd34d;
    }

    .zn-theme-toggle svg {
        width: 20px;
        height: 20px;
    }

    /* Standalone pages (sign-in, errors) have no navbar, so the toggle floats in the corner. */
    .zn-theme-toggle.is-floating {
        position: fixed;
        top: 16px;
        right: 16px;
        z-index: 1080;
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(15, 23, 42, 0.1);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
        backdrop-filter: blur(6px);
    }

    html[data-theme="dark"] body .zn-theme-toggle.is-floating {
        background: var(--zd-surface);
        border-color: var(--zd-border);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    }

    @keyframes zn-theme-spin {
        from {
            opacity: 0;
            transform: rotate(-90deg) scale(0.6);
        }
    }

    /* ---------- Surfaces ---------- */
    html[data-theme="dark"] body .card,
    html[data-theme="dark"] body .modal-content,
    html[data-theme="dark"] body .offcanvas,
    html[data-theme="dark"] body .toast,
    html[data-theme="dark"] body .popover,
    html[data-theme="dark"] body .accordion-item,
    html[data-theme="dark"] body .list-group-item {
        background-color: var(--zd-surface);
        color: var(--zd-text);
        border-color: var(--zd-border);
    }

    html[data-theme="dark"] body .card-header,
    html[data-theme="dark"] body .card-footer,
    html[data-theme="dark"] body .modal-header,
    html[data-theme="dark"] body .modal-footer {
        border-color: var(--zd-border);
    }

    html[data-theme="dark"] body .content-wrapper .grid-margin.stretch-card {
        background: transparent;
    }

    html[data-theme="dark"] body .zn-modal .modal-body {
        background: var(--zd-well);
    }

    html[data-theme="dark"] body .dropdown-menu {
        background-color: var(--zd-surface);
        border: 1px solid var(--zd-border);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .dropdown-item,
    html[data-theme="dark"] body .profile-menu-item {
        color: var(--zd-text-soft);
    }

    html[data-theme="dark"] body .dropdown-item:hover,
    html[data-theme="dark"] body .dropdown-item:focus,
    html[data-theme="dark"] body .profile-menu-item:hover {
        background: var(--zd-raised);
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .dropdown-divider,
    html[data-theme="dark"] body .profile-divider,
    html[data-theme="dark"] body hr {
        border-color: var(--zd-border);
        opacity: 1;
    }

    /* ---------- Text utilities ---------- */
    html[data-theme="dark"] body .text-dark,
    html[data-theme="dark"] body .text-black,
    html[data-theme="dark"] body .text-body {
        color: var(--zd-text) !important;
    }

    html[data-theme="dark"] body .text-muted,
    html[data-theme="dark"] body .text-secondary {
        color: var(--zd-muted) !important;
    }

    html[data-theme="dark"] body .text-primary {
        color: var(--zd-primary) !important;
    }

    html[data-theme="dark"] body .bg-white,
    html[data-theme="dark"] body .bg-body {
        background-color: var(--zd-surface) !important;
    }

    html[data-theme="dark"] body .bg-light {
        background-color: var(--zd-raised) !important;
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .border,
    html[data-theme="dark"] body .border-top,
    html[data-theme="dark"] body .border-bottom,
    html[data-theme="dark"] body .border-start,
    html[data-theme="dark"] body .border-end {
        border-color: var(--zd-border) !important;
    }

    html[data-theme="dark"] body h1,
    html[data-theme="dark"] body h2,
    html[data-theme="dark"] body h3,
    html[data-theme="dark"] body h4,
    html[data-theme="dark"] body h5,
    html[data-theme="dark"] body h6 {
        color: inherit;
    }

    /* ---------- Forms ---------- */
    html[data-theme="dark"] body .form-control,
    html[data-theme="dark"] body .form-select,
    html[data-theme="dark"] body .input-group-text {
        background-color: var(--zd-well);
        border-color: var(--zd-border-strong);
        color: var(--zd-text);
    }

    /* Bare inputs get a low-specificity default so each page's own input styling still wins. */
    html[data-theme="dark"] :where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="hidden"])) {
        background-color: var(--zd-well);
        border-color: var(--zd-border-strong);
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .form-control:focus,
    html[data-theme="dark"] body .form-select:focus {
        background-color: var(--zd-well);
        border-color: var(--zd-primary);
        color: var(--zd-text);
        box-shadow: 0 0 0 0.2rem rgba(91, 155, 255, 0.2);
    }

    html[data-theme="dark"] body .form-control:disabled,
    html[data-theme="dark"] body .form-control[readonly],
    html[data-theme="dark"] body .form-select:disabled {
        background-color: var(--zd-raised);
        color: var(--zd-muted);
    }

    html[data-theme="dark"] body ::placeholder {
        color: #6f7d8d;
        opacity: 1;
    }

    /* Same specificity as Bootstrap's .form-select so page styles that drop the arrow still win. */
    :where(html[data-theme="dark"]) .form-select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2393a1b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }

    html[data-theme="dark"] body select option,
    html[data-theme="dark"] body select optgroup {
        background-color: var(--zd-surface);
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .form-check-input {
        background-color: var(--zd-well);
        border-color: var(--zd-border-strong);
    }

    html[data-theme="dark"] body .form-check-input:checked {
        background-color: var(--zd-primary);
        border-color: var(--zd-primary);
    }

    html[data-theme="dark"] body input:-webkit-autofill,
    html[data-theme="dark"] body input:-webkit-autofill:hover,
    html[data-theme="dark"] body input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px var(--zd-well) inset;
        -webkit-text-fill-color: var(--zd-text);
        caret-color: var(--zd-text);
    }

    html[data-theme="dark"] body label,
    html[data-theme="dark"] body .form-label,
    html[data-theme="dark"] body .col-form-label {
        color: var(--zd-text-soft);
    }

    /* ---------- Tables ---------- */
    html[data-theme="dark"] body .table {
        --bs-table-bg: transparent;
        --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
        --bs-table-striped-color: var(--zd-text);
        --bs-table-hover-bg: rgba(255, 255, 255, 0.045);
        --bs-table-hover-color: var(--zd-text);
        --bs-table-active-bg: rgba(255, 255, 255, 0.06);
        --bs-table-active-color: var(--zd-text);
        color: var(--zd-text);
        border-color: var(--zd-border);
    }

    html[data-theme="dark"] body .table > :not(caption) > * > * {
        border-bottom-color: var(--zd-border);
    }

    html[data-theme="dark"] body .table thead th,
    html[data-theme="dark"] body .zn-table thead th,
    html[data-theme="dark"] body .table-light,
    html[data-theme="dark"] body .table-light > th,
    html[data-theme="dark"] body .table-light > td {
        background-color: var(--zd-well) !important;
        color: var(--zd-text-soft) !important;
        border-color: var(--zd-border) !important;
    }

    html[data-theme="dark"] body .table td,
    html[data-theme="dark"] body .table th {
        border-color: var(--zd-border);
    }

    html[data-theme="dark"] body .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: rgba(255, 255, 255, 0.025);
    }

    /* ---------- Buttons ---------- */
    html[data-theme="dark"] body .btn-light,
    html[data-theme="dark"] body .btn-white,
    html[data-theme="dark"] body .btn-outline-light {
        background-color: var(--zd-raised);
        border-color: var(--zd-border-strong);
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .btn-light:hover,
    html[data-theme="dark"] body .btn-white:hover,
    html[data-theme="dark"] body .btn-outline-light:hover {
        background-color: #2b3340;
        color: #fff;
    }

    html[data-theme="dark"] body .btn-outline-dark,
    html[data-theme="dark"] body .btn-outline-secondary {
        border-color: var(--zd-border-strong);
        color: var(--zd-text-soft);
    }

    html[data-theme="dark"] body .btn-outline-dark:hover,
    html[data-theme="dark"] body .btn-outline-secondary:hover {
        background-color: var(--zd-raised);
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .btn:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
    }

    html[data-theme="dark"] body .btn-close {
        filter: invert(1) grayscale(1) brightness(1.6);
    }

    /* ---------- Navigation components ---------- */
    html[data-theme="dark"] body .nav-tabs {
        border-bottom-color: var(--zd-border);
    }

    html[data-theme="dark"] body .nav-tabs .nav-link {
        color: var(--zd-muted);
    }

    html[data-theme="dark"] body .nav-tabs .nav-link:hover {
        border-color: var(--zd-border) var(--zd-border) transparent;
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .nav-tabs .nav-link.active,
    html[data-theme="dark"] body .nav-tabs .nav-item.show .nav-link {
        background-color: var(--zd-surface);
        border-color: var(--zd-border) var(--zd-border) var(--zd-surface);
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .page-link {
        background-color: var(--zd-surface);
        border-color: var(--zd-border);
        color: var(--zd-text-soft);
    }

    html[data-theme="dark"] body .page-link:hover {
        background-color: var(--zd-raised);
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .page-item.disabled .page-link {
        background-color: var(--zd-well);
        border-color: var(--zd-border);
        color: #5f6b7a;
    }

    html[data-theme="dark"] body .breadcrumb {
        background-color: transparent;
    }

    html[data-theme="dark"] body .progress {
        background-color: var(--zd-raised);
    }

    html[data-theme="dark"] body .tooltip-inner {
        background-color: #e6edf3;
        color: #0f141b;
    }

    /* ---------- Alerts ---------- */
    html[data-theme="dark"] body .alert-success {
        background-color: rgba(34, 197, 94, 0.14);
        color: #86efac;
    }

    html[data-theme="dark"] body .alert-danger {
        background-color: rgba(239, 68, 68, 0.15);
        color: #fca5a5;
    }

    html[data-theme="dark"] body .alert-warning {
        background-color: rgba(245, 158, 11, 0.15);
        color: #fcd34d;
    }

    html[data-theme="dark"] body .alert-info,
    html[data-theme="dark"] body .alert-primary {
        background-color: rgba(91, 155, 255, 0.14);
        color: #a5c8ff;
    }

    html[data-theme="dark"] body .alert {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    /* ---------- DataTables (CDN css) ---------- */
    html[data-theme="dark"] body .dataTables_wrapper,
    html[data-theme="dark"] body .dataTables_wrapper .dataTables_length,
    html[data-theme="dark"] body .dataTables_wrapper .dataTables_filter,
    html[data-theme="dark"] body .dataTables_wrapper .dataTables_info,
    html[data-theme="dark"] body .dataTables_wrapper .dataTables_processing,
    html[data-theme="dark"] body .dataTables_wrapper .dataTables_paginate {
        color: var(--zd-text-soft) !important;
    }

    html[data-theme="dark"] body .dataTables_wrapper .dataTables_paginate .paginate_button {
        color: var(--zd-text-soft) !important;
        border-color: transparent;
    }

    html[data-theme="dark"] body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: var(--zd-raised) !important;
        border-color: var(--zd-border) !important;
        color: var(--zd-text) !important;
    }

    html[data-theme="dark"] body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    html[data-theme="dark"] body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--zd-primary-soft) !important;
        border-color: rgba(91, 155, 255, 0.45) !important;
        color: #a5c8ff !important;
    }

    html[data-theme="dark"] body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    html[data-theme="dark"] body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
        background: transparent !important;
        border-color: transparent !important;
        color: #5f6b7a !important;
    }

    html[data-theme="dark"] body table.dataTable thead > tr > th,
    html[data-theme="dark"] body table.dataTable thead > tr > td,
    html[data-theme="dark"] body table.dataTable tfoot > tr > th,
    html[data-theme="dark"] body table.dataTable tfoot > tr > td {
        border-color: var(--zd-border) !important;
    }

    html[data-theme="dark"] body table.dataTable > tbody > tr {
        background-color: transparent;
    }

    html[data-theme="dark"] body table.dataTable.stripe > tbody > tr.odd > *,
    html[data-theme="dark"] body table.dataTable.display > tbody > tr.odd > * {
        box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.025);
    }

    html[data-theme="dark"] body table.dataTable.hover > tbody > tr:hover > *,
    html[data-theme="dark"] body table.dataTable.display > tbody > tr:hover > * {
        box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.05);
    }

    html[data-theme="dark"] body table.dataTable.display > tbody > tr > .sorting_1,
    html[data-theme="dark"] body table.dataTable.order-column > tbody > tr > .sorting_1 {
        box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.03);
    }

    html[data-theme="dark"] body table.dataTable.row-border > tbody > tr > *,
    html[data-theme="dark"] body table.dataTable.display > tbody > tr > * {
        border-top-color: var(--zd-border);
    }

    html[data-theme="dark"] body div.dt-button-collection,
    html[data-theme="dark"] body button.dt-button,
    html[data-theme="dark"] body div.dt-button,
    html[data-theme="dark"] body a.dt-button {
        background: var(--zd-raised) !important;
        border-color: var(--zd-border-strong) !important;
        color: var(--zd-text) !important;
    }

    html[data-theme="dark"] body button.dt-button:hover:not(.disabled),
    html[data-theme="dark"] body a.dt-button:hover:not(.disabled) {
        background: #2b3340 !important;
    }

    /* ---------- Auth screens ---------- */
    html[data-theme="dark"] body .top-right-logo {
        background: #fff !important;
    }

    html[data-theme="dark"] body .form-container {
        border: 1px solid var(--zd-border);
        box-shadow: 0 22px 46px rgba(0, 0, 0, 0.4) !important;
    }

    /* Auth buttons are near-black in light mode; invert them so they stand out on the dark card. */
    html[data-theme="dark"] body .form-container .login-btn,
    html[data-theme="dark"] body .form-container .btn-primary {
        background: #e6edf3 !important;
        border-color: #e6edf3 !important;
        color: #0f141b !important;
    }

    html[data-theme="dark"] body .form-container .login-btn:hover,
    html[data-theme="dark"] body .form-container .btn-primary:hover {
        background: #fff !important;
    }

    /* Error pages (Tailwind): same inversion for the primary "Go Home" action. */
    html[data-theme="dark"] body .modern-card a.bg-zinc-900 {
        background-color: #e6edf3 !important;
        color: #0f141b !important;
    }

    html[data-theme="dark"] body .modern-card a.bg-zinc-900:hover {
        background-color: #fff !important;
    }

    /* ---------- Dashboard stat cards ---------- */
    html[data-theme="dark"] body .admin-stats-grid .stat-card::after {
        background: var(--stat-accent, var(--zd-primary)) !important;
        opacity: 0.14;
    }

    html[data-theme="dark"] body .admin-stats-grid .stat-card:hover::after {
        opacity: 0.24;
    }

    /* ---------- Google Charts ---------- */
    html[data-theme="dark"] body svg text[fill="#222222"],
    html[data-theme="dark"] body svg text[fill="#444444"],
    html[data-theme="dark"] body svg text[fill="#000000"],
    html[data-theme="dark"] body svg text[fill="#757575"] {
        fill: var(--zd-text-soft);
    }

    html[data-theme="dark"] body .google-visualization-tooltip {
        background: var(--zd-surface) !important;
        border-color: var(--zd-border) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    }

    html[data-theme="dark"] body .google-visualization-tooltip-item,
    html[data-theme="dark"] body .google-visualization-tooltip * {
        color: var(--zd-text) !important;
    }

    /* ---------- FullCalendar ---------- */
    html[data-theme="dark"] body .fc {
        color: var(--zd-text);
    }

    html[data-theme="dark"] body .fc .fc-col-header-cell,
    html[data-theme="dark"] body .fc .fc-scrollgrid {
        background: var(--zd-surface);
    }

    html[data-theme="dark"] body .fc .fc-daygrid-day-number,
    html[data-theme="dark"] body .fc .fc-col-header-cell-cushion {
        color: var(--zd-text-soft);
    }

    /* ---------- Misc ---------- */
    html[data-theme="dark"] body .ps__rail-y:hover,
    html[data-theme="dark"] body .ps__rail-x:hover {
        background-color: var(--zd-raised);
    }

    html[data-theme="dark"] body .modal-backdrop.show {
        opacity: 0.7;
    }

    html[data-theme="dark"] body code {
        color: #f9a8d4;
    }
}