html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

:root {
    --app-bg: #e8eef6;
    --app-surface: #ffffff;
    --app-surface-muted: #f4f8fc;
    --app-border: #d4dfeb;
    --app-border-strong: #bcccdc;
    --app-text: #1f2937;
    --app-text-muted: #66758a;
    --app-accent: #2c6fb2;
    --app-accent-soft: #deebf8;
    --app-accent-strong: #1e5f99;
    --app-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #101923;
    --app-surface: #162230;
    --app-surface-muted: #1d2b3a;
    --app-border: #2f4052;
    --app-border-strong: #45586c;
    --app-text: #e8eef6;
    --app-text-muted: #aebccd;
    --app-accent: #6db6ff;
    --app-accent-soft: rgba(109, 182, 255, 0.14);
    --app-accent-strong: #9bcfff;
    --app-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(47, 111, 173, 0.2);
}

html {
    min-height: 100%;
    position: relative;
}

body {
    background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 38%, var(--app-bg) 100%);
    color: var(--app-text);
    margin: 0;
    min-height: 100vh;
}

html[data-theme="dark"] body {
    background: linear-gradient(180deg, #0b1118 0%, #101923 45%, #0e1720 100%);
}

a {
    color: var(--app-accent);
    text-decoration: none;
}

a:hover {
    color: #245985;
}

html[data-theme="dark"] a:hover {
    color: var(--app-accent-strong);
}

.app-shell {
    min-height: 100vh;
}

.app-header {
    padding: 1rem 0 0;
}

.app-navbar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 249, 253, 0.94) 100%);
    border: 1px solid rgba(208, 220, 233, 0.98);
    border-radius: 10px;
    box-shadow: var(--app-shadow);
    margin: 0 auto;
    max-width: 1320px;
    padding: 0.55rem 0.9rem;
}

html[data-theme="dark"] .app-navbar {
    background: linear-gradient(180deg, rgba(28, 41, 55, 0.96) 0%, rgba(19, 30, 42, 0.96) 100%);
    border-color: rgba(68, 88, 108, 0.95);
}

.app-navbar-container {
    align-items: center;
    gap: 1rem;
}

.app-brand {
    align-items: center;
    color: var(--app-text);
    display: flex;
    gap: 0.85rem;
    margin-right: 1rem;
    min-width: 0;
}

.app-brand:hover {
    color: var(--app-text);
}

.app-brand-mark {
    align-items: center;
    background: linear-gradient(180deg, #4f89c3 0%, #2c6fb2 100%);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #fff;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    letter-spacing: 0;
    width: 40px;
}

html[data-theme="dark"] .app-brand-mark {
    background: linear-gradient(180deg, #5fa9ee 0%, #2874bb 100%);
}

.app-brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.app-brand-title {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 700;
}

.app-brand-subtitle {
    color: var(--app-text-muted);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.app-navbar-toggler {
    border-color: var(--app-border);
}

.app-nav-list {
    align-items: center;
    gap: 0.3rem;
}

.app-navbar .navbar-nav .nav-link.app-nav-link,
.app-navbar .navbar-nav .nav-link.app-nav-link:visited {
    border-radius: 8px;
    color: #324255 !important;
    font-weight: 600;
    padding: 0.55rem 0.8rem !important;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

html[data-theme="dark"] .app-navbar .navbar-nav .nav-link.app-nav-link,
html[data-theme="dark"] .app-navbar .navbar-nav .nav-link.app-nav-link:visited {
    color: #d6e1ef !important;
}

.app-navbar .navbar-nav .nav-link.app-nav-link:hover,
.app-navbar .navbar-nav .nav-link.app-nav-link:focus {
    background: var(--app-accent-soft);
    color: var(--app-accent-strong) !important;
}

.app-navbar .navbar-nav .nav-link.app-nav-link.active,
.app-navbar .navbar-nav .show > .nav-link.app-nav-link {
    background: linear-gradient(180deg, rgba(222, 235, 248, 0.95) 0%, rgba(213, 229, 245, 0.95) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: var(--app-accent-strong) !important;
}

html[data-theme="dark"] .app-navbar .navbar-nav .nav-link.app-nav-link.active,
html[data-theme="dark"] .app-navbar .navbar-nav .show > .nav-link.app-nav-link {
    background: rgba(109, 182, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-navbar .navbar-nav .nav-link.app-nav-link.app-nav-link-alert,
.app-navbar .navbar-nav .nav-link.app-nav-link.app-nav-link-alert:visited {
    color: #c2410c !important;
}

html[data-theme="dark"] .app-navbar .navbar-nav .nav-link.app-nav-link.app-nav-link-alert,
html[data-theme="dark"] .app-navbar .navbar-nav .nav-link.app-nav-link.app-nav-link-alert:visited {
    background: rgba(248, 113, 113, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.34);
    box-shadow: 0 0 0 1px rgba(127, 29, 29, 0.16);
    color: #fca5a5 !important;
}

.app-navbar .navbar-nav .nav-link.app-nav-link.app-nav-link-alert:hover,
.app-navbar .navbar-nav .nav-link.app-nav-link.app-nav-link-alert:focus,
.app-navbar .navbar-nav .show > .nav-link.app-nav-link.app-nav-link-alert {
    color: #9a3412 !important;
}

html[data-theme="dark"] .app-navbar .navbar-nav .nav-link.app-nav-link.app-nav-link-alert:hover,
html[data-theme="dark"] .app-navbar .navbar-nav .nav-link.app-nav-link.app-nav-link-alert:focus,
html[data-theme="dark"] .app-navbar .navbar-nav .show > .nav-link.app-nav-link.app-nav-link-alert {
    background: rgba(248, 113, 113, 0.2);
    border-color: rgba(252, 165, 165, 0.48);
    color: #fecaca !important;
}

.app-dropdown-menu {
    border: 1px solid var(--app-border);
    border-radius: 10px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
    padding: 0.45rem;
}

html[data-theme="dark"] .app-dropdown-menu {
    background: #172332;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
}

.app-dropdown-menu .dropdown-item {
    border-radius: 8px;
    color: var(--app-text);
    padding: 0.5rem 0.75rem;
}

.app-dropdown-menu .dropdown-item:hover,
.app-dropdown-menu .dropdown-item:focus {
    background: var(--app-accent-soft);
    color: var(--app-text);
}

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

.app-user-nav {
    align-items: center;
    gap: 0.25rem;
}

.app-user-link {
    border-radius: 8px;
    color: #445467 !important;
    display: inline-flex;
    font-weight: 600;
    padding: 0.55rem 0.75rem !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

html[data-theme="dark"] .app-user-link {
    color: #d6e1ef !important;
}

.app-user-link:hover,
.app-user-link:focus {
    background: var(--app-accent-soft);
    color: var(--app-accent-strong) !important;
}

.app-user-icon {
    align-items: center;
    font-size: 1rem;
    justify-content: center;
    min-width: 2.6rem;
}

.app-user-icon.has-alert {
    color: #c2410c !important;
}

html[data-theme="dark"] .app-user-icon.has-alert {
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.42);
    box-shadow: 0 0 0 1px rgba(120, 53, 15, 0.18), 0 0 18px rgba(251, 191, 36, 0.16);
    color: #fcd34d !important;
    position: relative;
}

html[data-theme="dark"] .app-user-icon.has-alert::after {
    background: #f87171;
    border: 2px solid #162230;
    border-radius: 999px;
    content: "";
    height: 0.65rem;
    position: absolute;
    right: 0.42rem;
    top: 0.38rem;
    width: 0.65rem;
}

.app-user-greeting,
.app-login-link {
    background: rgba(245, 249, 253, 0.9);
    border: 1px solid var(--app-border);
}

html[data-theme="dark"] .app-user-greeting,
html[data-theme="dark"] .app-login-link {
    background: rgba(29, 43, 58, 0.92);
}

.app-theme-toggle {
    align-items: center;
    border: 1px solid var(--app-border) !important;
    gap: 0.45rem;
}

.app-theme-toggle .app-theme-toggle-icon-light {
    display: none !important;
}

.app-theme-toggle .app-theme-toggle-icon-dark {
    display: inline-block !important;
}

html[data-theme="dark"] .app-theme-toggle .app-theme-toggle-icon-dark {
    display: none !important;
}

html[data-theme="dark"] .app-theme-toggle .app-theme-toggle-icon-light {
    display: inline-block !important;
}

.app-logout-link {
    background: transparent;
}

.app-main {
    padding: 1.15rem 0 1.5rem;
}

.app-content-shell {
    max-width: 1320px;
}

.app-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 254, 0.92) 100%);
    border: 1px solid rgba(212, 223, 235, 0.95);
    border-radius: 12px;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.06);
    min-height: calc(100vh - 220px);
    padding: 1.4rem;
}

html[data-theme="dark"] .app-content {
    background: linear-gradient(180deg, rgba(22, 34, 48, 0.98) 0%, rgba(18, 29, 41, 0.96) 100%);
    border-color: rgba(57, 76, 96, 0.95);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.24);
}

.app-content > :last-child {
    margin-bottom: 0;
}

.alert,
.card,
.table,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.form-check-input,
.btn {
    border-radius: 8px;
}

.card,
.table,
.modal-content {
    border-color: var(--app-border);
}

html[data-theme="dark"] .alert,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .bg-white {
    background-color: var(--app-surface) !important;
    color: var(--app-text);
}

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

html[data-theme="dark"] .modal-header .btn-close {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    filter: invert(1) grayscale(100%) brightness(1.75);
    opacity: 0.88;
}

html[data-theme="dark"] .modal-header .btn-close:hover,
html[data-theme="dark"] .modal-header .btn-close:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: 0 0 0 0.2rem rgba(109, 182, 255, 0.18);
    opacity: 1;
}

html[data-theme="dark"] [class*="-status-badge"],
html[data-theme="dark"] [class*="-status-pill"],
html[data-theme="dark"] [class*="-priority-badge"],
html[data-theme="dark"] [class*="-type-badge"],
html[data-theme="dark"] [class*="-tag-badge"],
html[data-theme="dark"] [class*="-tag-pill"],
html[data-theme="dark"] [class*="-toolbar-badge"] {
    border: 1px solid currentColor !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.16) !important;
}

html[data-theme="dark"] [class*="-status-badge"].active,
html[data-theme="dark"] [class*="-status-pill"].is-good {
    background: rgba(34, 197, 94, 0.24) !important;
    color: #86efac !important;
}

html[data-theme="dark"] [class*="-status-badge"].archived,
html[data-theme="dark"] [class*="-status-pill"].is-neutral {
    background: rgba(148, 163, 184, 0.2) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] [class*="-status-pill"].is-bad,
html[data-theme="dark"] [class*="-priority-badge"].high {
    background: rgba(248, 113, 113, 0.24) !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] [class*="-status-pill"].is-warning,
html[data-theme="dark"] [class*="-priority-badge"].medium {
    background: rgba(251, 191, 36, 0.24) !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] [class*="-priority-badge"].low,
html[data-theme="dark"] [class*="-type-badge"] {
    background: rgba(96, 165, 250, 0.26) !important;
    color: #93c5fd !important;
}

html[data-theme="dark"] [class*="-tag-badge"],
html[data-theme="dark"] [class*="-tag-pill"],
html[data-theme="dark"] [class*="-toolbar-badge"] {
    background: rgba(109, 182, 255, 0.18) !important;
    border-color: rgba(147, 197, 253, 0.46) !important;
    color: #dbeafe !important;
}

html[data-theme="dark"] [class*="-tag-pill"]:hover,
html[data-theme="dark"] [class*="-tag-pill"]:focus {
    background: rgba(109, 182, 255, 0.26) !important;
    border-color: rgba(191, 219, 254, 0.62) !important;
    color: #f3f8ff !important;
}

html[data-theme="dark"] [class*="-tag-pill"].active {
    background: rgba(96, 165, 250, 0.3) !important;
    border-color: rgba(191, 219, 254, 0.7) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .admin-home-page .row.bg-white {
    background: linear-gradient(180deg, #1b2a3a 0%, #142130 100%) !important;
    border: 1px solid var(--app-border);
    border-left: 4px solid rgba(109, 182, 255, 0.68);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2) !important;
    color: var(--app-text);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

html[data-theme="dark"] .admin-home-page .row.bg-white:hover {
    border-color: rgba(147, 197, 253, 0.56);
    border-left-color: #93c5fd;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.26) !important;
    transform: translateY(-1px);
}

html[data-theme="dark"] .admin-home-page .row.bg-white h5 {
    color: #f3f8ff;
}

.table {
    background: var(--app-surface);
}

html[data-theme="dark"] .table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: rgba(109, 182, 255, 0.1);
    color: var(--app-text);
}

.table thead th {
    background: linear-gradient(180deg, #f7fafd 0%, var(--app-surface-muted) 100%);
    border-bottom-color: var(--app-border);
    color: #415164;
}

html[data-theme="dark"] .table thead th {
    background: linear-gradient(180deg, #213246 0%, var(--app-surface-muted) 100%);
    color: #d8e5f2;
}

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

html[data-theme="dark"] .table tbody td a:not(.btn) {
    color: var(--app-accent-strong);
}

.form-control,
.form-select {
    border-color: var(--app-border);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-check-input {
    background-color: #111b26;
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled {
    background-color: #223143;
    color: var(--app-text-muted);
}

.form-control::placeholder {
    color: #93a1b2;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #7f91a5;
}

.btn-primary {
    background: linear-gradient(180deg, #3e80c0 0%, var(--app-accent) 100%);
    border-color: var(--app-accent);
    box-shadow: 0 8px 18px rgba(44, 111, 178, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(180deg, #3674af 0%, #245f92 100%);
    border-color: #245f92;
}

.btn-outline-secondary {
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--app-border-strong);
    color: #415164;
}

html[data-theme="dark"] .btn-outline-secondary {
    background: rgba(22, 34, 48, 0.72);
    color: #d8e5f2;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--app-surface-muted);
    border-color: #b7c6d7;
    color: var(--app-text);
}

.app-footer {
    color: var(--app-text-muted);
    font-size: 0.9rem;
    padding: 0 0 1.2rem;
}

.app-footer-container {
    align-items: center;
    display: flex;
    justify-content: space-between;
    max-width: 1320px;
}

.app-dev-footer {
    background: #b91c1c;
    bottom: 0;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    left: 0;
    letter-spacing: 0.08em;
    padding: 0.7rem 1rem;
    position: fixed;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 1100;
}

.app-shell-with-dev-footer {
    padding-bottom: 3.25rem;
}

#cookieConsent {
    padding-top: 100px;
}

#cookieConsentdiv {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--app-border);
    border-radius: 18px 18px 0 0;
    bottom: 0;
    box-shadow: 0px 10px 30px rgba(15, 23, 42, 0.18);
    font-family: 'Century Gothic', sans-serif;
    left: 50%;
    padding: 20px 30px;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    width: 400px;
    z-index: 1000;
}

html[data-theme="dark"] #cookieConsentdiv {
    background-color: rgba(22, 34, 48, 0.97);
}

#cookieConsentdiv button {
    background-color: #2f6fad;
    border: none;
    color: white;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -5px;
    padding: 10px 50px;
    transition: all ease 0.3s;
}

#cookieConsentdiv button:hover {
    background-color: #245985;
}

#cookieConsentdiv h3 {
    font-size: 22px;
}

#cookieConsentdiv p {
    font-size: 13px;
}

#cookieConsentdiv a {
    color: #6b7280;
    text-decoration: underline;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .dataTables_wrapper {
    color: var(--app-text);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: #111b26 !important;
    border: 1px solid var(--app-border-strong) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_length select:focus,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--app-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(109, 182, 255, 0.18) !important;
}

html[data-theme="dark"] table.dataTable {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] table.dataTable thead th,
html[data-theme="dark"] table.dataTable thead td {
    background: linear-gradient(180deg, #24384d 0%, #1d2e40 100%) !important;
    border-bottom-color: var(--app-border-strong) !important;
    color: #edf5ff !important;
}

html[data-theme="dark"] table.dataTable thead .sorting::before,
html[data-theme="dark"] table.dataTable thead .sorting::after,
html[data-theme="dark"] table.dataTable thead .sorting_asc::before,
html[data-theme="dark"] table.dataTable thead .sorting_asc::after,
html[data-theme="dark"] table.dataTable thead .sorting_desc::before,
html[data-theme="dark"] table.dataTable thead .sorting_desc::after {
    color: #cfe4ff !important;
    opacity: 0.72 !important;
}

html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th {
    background-color: transparent !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] table.dataTable.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.035) !important;
}

html[data-theme="dark"] table.dataTable.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(109, 182, 255, 0.025) !important;
}

html[data-theme="dark"] table.dataTable tbody tr:hover {
    background-color: rgba(109, 182, 255, 0.1) !important;
}

html[data-theme="dark"] table.dataTable tbody td,
html[data-theme="dark"] table.dataTable tbody th {
    border-top-color: var(--app-border) !important;
}

html[data-theme="dark"] table.dataTable tbody td[class*="details"],
html[data-theme="dark"] table.dataTable tbody td [class*="details"],
html[data-theme="dark"] table.dataTable tbody td[class*="locked"],
html[data-theme="dark"] table.dataTable tbody td [class*="locked"] {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .dataTables_wrapper .page-link {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-accent);
}

html[data-theme="dark"] .dataTables_wrapper .page-item.active .page-link {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: #07111d;
}

html[data-theme="dark"] .dataTables_wrapper .page-item.disabled .page-link {
    background-color: #111b26;
    border-color: var(--app-border);
    color: #718397;
}

html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown {
    background-color: #111b26;
    border-color: var(--app-border-strong);
    color: var(--app-text);
}

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] .select2-results__option {
    color: var(--app-text);
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--app-accent);
    color: #07111d;
}

html[data-theme="dark"] [class$="-hero"],
html[data-theme="dark"] [class*="-hero "],
html[data-theme="dark"] .weekly-records-page,
html[data-theme="dark"] .month-records-shell,
html[data-theme="dark"] [class$="-hero-card"],
html[data-theme="dark"] [class*="-hero-card "],
html[data-theme="dark"] [class$="-card"],
html[data-theme="dark"] [class*="-card "],
html[data-theme="dark"] [class$="-panel"],
html[data-theme="dark"] [class*="-panel "],
html[data-theme="dark"] [class$="-table-card"],
html[data-theme="dark"] [class*="-table-card "],
html[data-theme="dark"] [class$="-section-card"],
html[data-theme="dark"] [class*="-section-card "],
html[data-theme="dark"] [class$="-sidebar-card"],
html[data-theme="dark"] [class*="-sidebar-card "],
html[data-theme="dark"] [class$="-form-card"],
html[data-theme="dark"] [class*="-form-card "],
html[data-theme="dark"] [class$="-summary-item"],
html[data-theme="dark"] [class*="-summary-item "],
html[data-theme="dark"] [class$="-range-card"],
html[data-theme="dark"] [class*="-range-card "],
html[data-theme="dark"] [class$="-metric-card"],
html[data-theme="dark"] [class*="-metric-card "],
html[data-theme="dark"] [class$="-stat-card"],
html[data-theme="dark"] [class*="-stat-card "],
html[data-theme="dark"] [class$="-stat"],
html[data-theme="dark"] [class*="-stat "],
html[data-theme="dark"] .admin-reports-header,
html[data-theme="dark"] [class$="-launcher"],
html[data-theme="dark"] [class*="-launcher "],
html[data-theme="dark"] [class$="-quick-action"],
html[data-theme="dark"] [class*="-quick-action "],
html[data-theme="dark"] [class$="-approval-item"],
html[data-theme="dark"] [class*="-approval-item "],
html[data-theme="dark"] [class$="-request-option"],
html[data-theme="dark"] [class*="-request-option "],
html[data-theme="dark"] [class$="-day-cell"],
html[data-theme="dark"] [class*="-day-cell "],
html[data-theme="dark"] [class$="-field"],
html[data-theme="dark"] [class*="-field "],
html[data-theme="dark"] [class$="-empty-state"],
html[data-theme="dark"] [class*="-empty-state "] {
    background: linear-gradient(180deg, rgba(22, 34, 48, 0.98) 0%, rgba(18, 29, 41, 0.96) 100%) !important;
    border-color: var(--app-border) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] [class$="-summary-item"],
html[data-theme="dark"] [class*="-summary-item "],
html[data-theme="dark"] [class$="-range-card"],
html[data-theme="dark"] [class*="-range-card "],
html[data-theme="dark"] [class$="-metric-card"],
html[data-theme="dark"] [class*="-metric-card "],
html[data-theme="dark"] [class$="-stat-card"],
html[data-theme="dark"] [class*="-stat-card "],
html[data-theme="dark"] [class$="-stat"],
html[data-theme="dark"] [class*="-stat "],
html[data-theme="dark"] [class$="-launcher"],
html[data-theme="dark"] [class*="-launcher "],
html[data-theme="dark"] [class$="-quick-action"],
html[data-theme="dark"] [class*="-quick-action "],
html[data-theme="dark"] [class$="-approval-item"],
html[data-theme="dark"] [class*="-approval-item "],
html[data-theme="dark"] [class$="-request-option"],
html[data-theme="dark"] [class*="-request-option "],
html[data-theme="dark"] [class$="-day-cell"],
html[data-theme="dark"] [class*="-day-cell "],
html[data-theme="dark"] [class$="-field"],
html[data-theme="dark"] [class*="-field "],
html[data-theme="dark"] [class$="-empty-state"],
html[data-theme="dark"] [class*="-empty-state "] {
    background: linear-gradient(180deg, #1b2a3a 0%, #142130 100%) !important;
}

html[data-theme="dark"] [class$="-header"],
html[data-theme="dark"] [class*="-header "] {
    border-color: var(--app-border) !important;
}

html[data-theme="dark"] .weekly-records-shell,
html[data-theme="dark"] .month-records-grid {
    background: #172536 !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .weekly-records-time-header,
html[data-theme="dark"] .weekly-records-day-header,
html[data-theme="dark"] .weekly-records-time-column {
    background: #13202e !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .weekly-records-day-column,
html[data-theme="dark"] .weekly-records-slot,
html[data-theme="dark"] .weekly-records-slot-disabled,
html[data-theme="dark"] .month-records-day-header {
    background: #172536 !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .weekly-records-day-header.current-day,
html[data-theme="dark"] .weekly-records-day-column.current-day,
html[data-theme="dark"] .weekly-records-day-column.current-day .weekly-records-slot,
html[data-theme="dark"] .month-records-day-cell.today {
    background: #1d344c !important;
}

html[data-theme="dark"] .weekly-records-slot:hover,
html[data-theme="dark"] .weekly-records-day-column.current-day .weekly-records-slot:hover,
html[data-theme="dark"] .month-records-day-cell:hover,
html[data-theme="dark"] .month-records-day-cell:focus-visible {
    background: rgba(109, 182, 255, 0.12) !important;
}

html[data-theme="dark"] .month-records-day-cell.other-month {
    background: #0f1823 !important;
}

html[data-theme="dark"] .month-records-day-number {
    color: #eef6ff !important;
}

html[data-theme="dark"] .month-records-day-cell.other-month .month-records-day-number {
    color: #7f93aa !important;
}

html[data-theme="dark"] .month-records-entry {
    background: rgba(109, 182, 255, 0.22) !important;
    border-color: rgba(147, 197, 253, 0.46) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: var(--app-text) !important;
}

html[data-theme="dark"] .month-records-entry:hover,
html[data-theme="dark"] .month-records-entry:focus-visible {
    background: rgba(109, 182, 255, 0.3) !important;
    border-color: rgba(191, 219, 254, 0.62) !important;
}

html[data-theme="dark"] .month-records-entry.holiday-submitted,
html[data-theme="dark"] .month-records-entry.holiday-pending {
    background: rgba(96, 165, 250, 0.26) !important;
    border-color: rgba(147, 197, 253, 0.52) !important;
}

html[data-theme="dark"] .month-records-entry.holiday-approved {
    background: rgba(74, 222, 128, 0.22) !important;
    border-color: rgba(134, 239, 172, 0.5) !important;
}

html[data-theme="dark"] .month-records-entry.shift-swap-original {
    background: rgba(192, 132, 252, 0.24) !important;
    border-color: rgba(216, 180, 254, 0.5) !important;
}

html[data-theme="dark"] .month-records-entry.shift-swap-new {
    background: rgba(251, 146, 60, 0.24) !important;
    border-color: rgba(253, 186, 116, 0.5) !important;
}

html[data-theme="dark"] .month-records-entry span,
html[data-theme="dark"] .weekly-records-subtitle,
html[data-theme="dark"] .month-records-subtitle,
html[data-theme="dark"] .admin-dashboard-quick-action .subtitle,
html[data-theme="dark"] .admin-report-launcher-subtitle {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .weekly-records-title-block h1,
html[data-theme="dark"] .month-records-title-block h2 {
    color: #f3f8ff !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 18px rgba(109, 182, 255, 0.16);
}

html[data-theme="dark"] [class$="-header"][class*="panel"],
html[data-theme="dark"] [class*="-panel-header"] {
    background: linear-gradient(180deg, #203246 0%, #19283a 100%) !important;
}

html[data-theme="dark"] [class$="-eyebrow"],
html[data-theme="dark"] [class*="-eyebrow "],
html[data-theme="dark"] [class$="-label"],
html[data-theme="dark"] [class*="-label "],
html[data-theme="dark"] [class="label"],
html[data-theme="dark"] [class$="-summary-item"] .label,
html[data-theme="dark"] [class*="-summary-item "] .label,
html[data-theme="dark"] [class$="-range-card"] .label,
html[data-theme="dark"] [class*="-range-card "] .label,
html[data-theme="dark"] [class$="-metric-card"] .label,
html[data-theme="dark"] [class*="-metric-card "] .label,
html[data-theme="dark"] [class$="-stat-card"] .label,
html[data-theme="dark"] [class*="-stat-card "] .label,
html[data-theme="dark"] [class$="-stat"] .label,
html[data-theme="dark"] [class*="-stat "] .label,
html[data-theme="dark"] [class$="-field"] label,
html[data-theme="dark"] [class*="-field "] label,
html[data-theme="dark"] dt {
    color: var(--app-accent-strong) !important;
}

html[data-theme="dark"] [class$="-hero"] h1,
html[data-theme="dark"] [class*="-hero "] h1,
html[data-theme="dark"] [class$="-card"] h2,
html[data-theme="dark"] [class*="-card "] h2,
html[data-theme="dark"] [class$="-panel"] h2,
html[data-theme="dark"] [class*="-panel "] h2,
html[data-theme="dark"] [class$="-header"] h2,
html[data-theme="dark"] [class*="-header "] h2,
html[data-theme="dark"] [class$="-title"],
html[data-theme="dark"] [class*="-title "],
html[data-theme="dark"] [class$="-summary-item"] strong,
html[data-theme="dark"] [class*="-summary-item "] strong,
html[data-theme="dark"] [class$="-range-card"] strong,
html[data-theme="dark"] [class*="-range-card "] strong,
html[data-theme="dark"] [class$="-metric-card"] strong,
html[data-theme="dark"] [class*="-metric-card "] strong,
html[data-theme="dark"] [class$="-stat-card"] strong,
html[data-theme="dark"] [class*="-stat-card "] strong,
html[data-theme="dark"] [class$="-stat"] strong,
html[data-theme="dark"] [class*="-stat "] strong,
html[data-theme="dark"] [class$="-launcher"] .title,
html[data-theme="dark"] [class*="-launcher "] .title,
html[data-theme="dark"] [class$="-quick-action"] .title,
html[data-theme="dark"] [class*="-quick-action "] .title,
html[data-theme="dark"] [class$="-card"] strong,
html[data-theme="dark"] [class*="-card "] strong,
html[data-theme="dark"] [class$="-panel"] strong,
html[data-theme="dark"] [class*="-panel "] strong,
html[data-theme="dark"] dd {
    color: var(--app-text) !important;
}

html[data-theme="dark"] [class$="-hero"] p,
html[data-theme="dark"] [class*="-hero "] p,
html[data-theme="dark"] [class$="-card"] p,
html[data-theme="dark"] [class*="-card "] p,
html[data-theme="dark"] [class$="-panel"] p,
html[data-theme="dark"] [class*="-panel "] p,
html[data-theme="dark"] [class$="-muted"],
html[data-theme="dark"] [class*="-muted "],
html[data-theme="dark"] [class$="-meta"],
html[data-theme="dark"] [class*="-meta "],
html[data-theme="dark"] [class$="-subtitle"],
html[data-theme="dark"] [class*="-subtitle "],
html[data-theme="dark"] [class$="-summary-item"] small,
html[data-theme="dark"] [class*="-summary-item "] small,
html[data-theme="dark"] [class$="-range-card"] small,
html[data-theme="dark"] [class*="-range-card "] small,
html[data-theme="dark"] [class$="-metric-card"] small,
html[data-theme="dark"] [class*="-metric-card "] small,
html[data-theme="dark"] [class$="-stat-card"] small,
html[data-theme="dark"] [class*="-stat-card "] small,
html[data-theme="dark"] [class$="-stat"] small,
html[data-theme="dark"] [class*="-stat "] small,
html[data-theme="dark"] [class$="-launcher"] .subtitle,
html[data-theme="dark"] [class*="-launcher "] .subtitle,
html[data-theme="dark"] [class$="-quick-action"] .subtitle,
html[data-theme="dark"] [class*="-quick-action "] .subtitle,
html[data-theme="dark"] [class$="-copy"] span,
html[data-theme="dark"] [class*="-copy "] span,
html[data-theme="dark"] [class$="-title"] span,
html[data-theme="dark"] [class*="-title "] span {
    color: var(--app-text-muted) !important;
}

.project-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.25rem;
}

.project-color-option {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 0.4rem;
    margin: 0;
}

.project-color-option input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.project-color-swatch {
    border: 2px solid rgba(100, 116, 139, 0.45);
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
    display: inline-block;
    height: 1.8rem;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
    width: 1.8rem;
}

.project-color-label {
    color: var(--app-text-muted);
    font-size: 0.88rem;
}

.project-color-option:hover .project-color-swatch {
    transform: translateY(-1px);
}

.project-color-option input:focus-visible + .project-color-swatch,
.project-color-option input:checked + .project-color-swatch {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22), inset 0 0 0 2px rgba(255, 255, 255, 0.82);
}

.tasks-name-inline {
    align-items: center;
    display: inline-flex;
    gap: 0.55rem;
}

.tasks-color-indicator {
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
    display: inline-block;
    flex: 0 0 auto;
    height: 0.95rem;
    width: 0.95rem;
}

html[data-theme="dark"] .project-color-option input:focus-visible + .project-color-swatch,
html[data-theme="dark"] .project-color-option input:checked + .project-color-swatch {
    border-color: #f8fafc;
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.24), inset 0 0 0 2px rgba(15, 23, 42, 0.4);
}

@media (max-width: 991.98px) {
    .app-navbar {
        border-radius: 0;
        margin: 0;
        max-width: none;
    }

    .app-content {
        min-height: auto;
        padding: 1rem;
    }

    .app-nav-list,
    .app-user-nav {
        align-items: stretch;
        gap: 0.2rem;
        margin-top: 0.75rem;
    }

    .app-user-nav {
        border-top: 1px solid var(--app-border);
        padding-top: 0.75rem;
    }

    .app-footer-container {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }
}

@media (max-width: 767.98px) {
    .app-header {
        padding-top: 0;
    }

    .app-main {
        padding-top: 0.85rem;
    }

    .app-content-shell {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .app-brand-subtitle {
        display: none;
    }

    #cookieConsentdiv {
        border-radius: 16px 16px 0 0;
        width: min(92vw, 400px);
    }
}