/* Glassmorphism theme overrides (login + left sidebar only)
   Keeping these in a separate file makes future theme tweaks safer.
*/

:root {
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-strong: rgba(255, 255, 255, 0.14);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-highlight: rgba(255, 255, 255, 0.28);
    --glow-blue: rgba(99, 102, 241, 0.38);
    --glow-purple: rgba(168, 85, 247, 0.24);
}

/* Sidebar glass */
.nav-brand {
    position: relative;
    z-index: 1;
}

.sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
    backdrop-filter: blur(18px) saturate(130%);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 120px rgba(99, 102, 241, 0.14);
    position: relative;
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: -80px;
    background:
        radial-gradient(600px 380px at 20% 10%, rgba(99, 102, 241, 0.35) 0%, rgba(99, 102, 241, 0) 55%),
        radial-gradient(520px 360px at 85% 35%, rgba(168, 85, 247, 0.26) 0%, rgba(168, 85, 247, 0) 60%),
        radial-gradient(520px 520px at 40% 95%, rgba(14, 165, 233, 0.18) 0%, rgba(14, 165, 233, 0) 62%);
    filter: blur(18px);
    opacity: 0.65;
    pointer-events: none;
}

.sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.7;
    pointer-events: none;
}

.nav-menu {
    padding: 0.75rem;
    position: relative;
    z-index: 1;
}

.nav-link {
    border: 1px solid transparent;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.96);
    transform: translateY(-1px);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 0 28px rgba(99, 102, 241, 0.22);
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.20);
}

.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.nav-link:hover::before,
.nav-link.active::before {
    opacity: 1;
}

.user-profile-bottom {
    position: relative;
    z-index: 1;
}

.user-profile-card {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22), 0 0 30px rgba(99, 102, 241, 0.14);
}

.user-profile-card:hover {
    box-shadow:
        0 22px 64px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 0 40px rgba(168, 85, 247, 0.16);
}

/* Login glass (scoped to main login overlay only) */
#loginOverlay.login-overlay {
    background:
        radial-gradient(900px 520px at 20% 15%, rgba(99, 102, 241, 0.55) 0%, rgba(99, 102, 241, 0) 62%),
        radial-gradient(780px 520px at 85% 35%, rgba(168, 85, 247, 0.42) 0%, rgba(168, 85, 247, 0) 62%),
        radial-gradient(680px 540px at 45% 90%, rgba(14, 165, 233, 0.26) 0%, rgba(14, 165, 233, 0) 62%),
        rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px) saturate(130%);
}

#loginOverlay.login-overlay::before {
    content: '';
    position: absolute;
    inset: -120px;
    background:
        radial-gradient(520px 380px at 30% 30%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(520px 380px at 70% 60%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(520px 380px at 45% 90%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 62%);
    filter: blur(22px);
    opacity: 0.85;
    pointer-events: none;
}

#loginOverlay .login-modal {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 34px 120px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 0 80px rgba(99, 102, 241, 0.24);
}

#loginOverlay .login-title {
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

#loginOverlay .login-subtitle {
    color: rgba(255, 255, 255, 0.72);
}

#loginOverlay .form-field label {
    color: rgba(255, 255, 255, 0.82);
}

#loginOverlay .form-field input {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

#loginOverlay .form-field input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

#loginOverlay .form-field input:focus {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.28);
}

#loginOverlay .login-btn {
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32), 0 0 46px rgba(99, 102, 241, 0.26);
}

#loginOverlay .login-btn:hover:not(:disabled) {
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34), 0 0 60px rgba(168, 85, 247, 0.28);
}

/* Ticket detail modal glass (scoped to ticket modal only) */
#ticketModal.modal {
    background:
        radial-gradient(900px 520px at 18% 16%, rgba(99, 102, 241, 0.45) 0%, rgba(99, 102, 241, 0) 62%),
        radial-gradient(780px 520px at 82% 32%, rgba(168, 85, 247, 0.34) 0%, rgba(168, 85, 247, 0) 62%),
        radial-gradient(720px 540px at 42% 88%, rgba(14, 165, 233, 0.20) 0%, rgba(14, 165, 233, 0) 62%),
        rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px) saturate(130%);
}

#ticketModal .modal-content {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 40px 140px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.14) inset,
        0 0 120px rgba(99, 102, 241, 0.20);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#ticketModal .modal-content::before {
    content: '';
    position: absolute;
    inset: -120px;
    background:
        radial-gradient(520px 380px at 20% 25%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(520px 380px at 78% 40%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(620px 520px at 48% 92%, rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0) 62%);
    filter: blur(22px);
    opacity: 0.9;
    pointer-events: none;
}

#ticketModal .modal-header,
#ticketModal .modal-body {
    position: relative;
    z-index: 1;
}

#ticketModal .modal-header {
    border-bottom-color: rgba(15, 23, 42, 0.10);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 100%);
}

#ticketModal .modal-title {
    color: rgba(15, 23, 42, 0.92);
}

#ticketModal .close-modal {
    color: rgba(15, 23, 42, 0.62);
    border: 1px solid transparent;
}

#ticketModal .close-modal:hover {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.40);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    color: rgba(15, 23, 42, 0.92);
}

#ticketModal .ticket-content,
#ticketModal .ticket-sidebar {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 22px 64px rgba(0, 0, 0, 0.20),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

#ticketModal .response-section {
    border-top-color: rgba(15, 23, 42, 0.10);
}

#ticketModal .response-form {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px) saturate(140%);
}

#ticketModal .response-textarea {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(148, 163, 184, 0.70);
}

#ticketModal .response-textarea:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22);
}

#ticketModal .conversation-item {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-left-width: 4px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.14);
}

#ticketModal .conversation-item.outbound {
    background: rgba(240, 249, 255, 0.65);
}

/* Ticket modal (Dark Mode) */
html.theme-dark #ticketModal .modal-content {
    background: rgba(17, 24, 39, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark #ticketModal .modal-content::before {
    opacity: 0.30;
}

html.theme-dark #ticketModal .modal-header {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.55) 0%, rgba(17, 24, 39, 0.20) 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark #ticketModal .modal-title {
    color: rgba(226, 232, 240, 0.90) !important;
}

html.theme-dark #ticketModal .close-modal {
    color: rgba(226, 232, 240, 0.78) !important;
}

html.theme-dark #ticketModal .close-modal:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(226, 232, 240, 0.92) !important;
}

html.theme-dark #ticketModal .ticket-content,
html.theme-dark #ticketModal .ticket-sidebar {
    background: rgba(17, 24, 39, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark #ticketModal .conversation-item {
    background: rgba(17, 24, 39, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.32) !important;
}

html.theme-dark #ticketModal .conversation-item.outbound {
    background: rgba(59, 130, 246, 0.10) !important;
}

html.theme-dark #ticketModal .response-textarea {
    background: rgba(17, 24, 39, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(226, 232, 240, 0.90) !important;
}

/* Override inline light surfaces inside the ticket modal */
html.theme-dark #ticketModal div[style*="background: #f9fafb"],
html.theme-dark #ticketModal div[style*="background: white"] {
    background: rgba(17, 24, 39, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Override inline light gray chips inside the ticket modal */
html.theme-dark #ticketModal span[style*="background: #f3f4f6"] {
    background: rgba(255, 255, 255, 0.10) !important;
    color: rgba(226, 232, 240, 0.82) !important;
}

/* Override inline light-mode text colors used in ticket modal */
html.theme-dark #ticketModal h3[style*="color: #374151"],
html.theme-dark #ticketModal h3[style*="color: #1f2937"] {
    color: rgba(226, 232, 240, 0.88) !important;
}

html.theme-dark #ticketModal [style*="color: #111827"] {
    color: rgba(226, 232, 240, 0.86) !important;
}

html.theme-dark #ticketModal [style*="color: #374151"] {
    color: rgba(226, 232, 240, 0.82) !important;
}

html.theme-dark #ticketModal [style*="color: #6b7280"],
html.theme-dark #ticketModal p[style*="color: #64748b"] {
    color: rgba(203, 213, 225, 0.72) !important;
}

/* Ensure sidebar inputs/selects aren't bright in dark mode */
html.theme-dark #ticketModal input[type="text"],
html.theme-dark #ticketModal input[type="email"],
html.theme-dark #ticketModal input[type="tel"],
html.theme-dark #ticketModal input[type="search"],
html.theme-dark #ticketModal input.form-input,
html.theme-dark #ticketModal select,
html.theme-dark #ticketModal textarea {
    background: rgba(15, 23, 42, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(226, 232, 240, 0.88) !important;
}

html.theme-dark #ticketModal input::placeholder,
html.theme-dark #ticketModal textarea::placeholder {
    color: rgba(203, 213, 225, 0.55) !important;
}

/* New ticket modal glass (scoped to new ticket modals only) */
#newTicketModal.modal,
#customerNewTicketModal.modal {
    background:
        radial-gradient(900px 520px at 18% 16%, rgba(99, 102, 241, 0.45) 0%, rgba(99, 102, 241, 0) 62%),
        radial-gradient(780px 520px at 82% 32%, rgba(168, 85, 247, 0.34) 0%, rgba(168, 85, 247, 0) 62%),
        radial-gradient(720px 540px at 42% 88%, rgba(14, 165, 233, 0.20) 0%, rgba(14, 165, 233, 0) 62%),
        rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px) saturate(130%);
}

#newTicketModal .modal-content,
#customerNewTicketModal .modal-content {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 40px 140px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.14) inset,
        0 0 120px rgba(99, 102, 241, 0.20);
    position: relative;
    overflow: hidden;
}

#newTicketModal .modal-content::before,
#customerNewTicketModal .modal-content::before {
    content: '';
    position: absolute;
    inset: -120px;
    background:
        radial-gradient(520px 380px at 20% 25%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(520px 380px at 78% 40%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(620px 520px at 48% 92%, rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0) 62%);
    filter: blur(22px);
    opacity: 0.9;
    pointer-events: none;
}

#newTicketModal .modal-header,
#newTicketModal .modal-body,
#customerNewTicketModal .modal-header,
#customerNewTicketModal .modal-body {
    position: relative;
    z-index: 1;
}

#newTicketModal .modal-header,
#customerNewTicketModal .modal-header {
    border-bottom-color: rgba(15, 23, 42, 0.10);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.12) 100%);
}

#newTicketModal .modal-title,
#customerNewTicketModal .modal-title {
    color: rgba(15, 23, 42, 0.92);
}

#newTicketModal .close-modal,
#customerNewTicketModal .close-modal {
    color: rgba(15, 23, 42, 0.62);
    border: 1px solid transparent;
}

#newTicketModal .close-modal:hover,
#customerNewTicketModal .close-modal:hover {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.40);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    color: rgba(15, 23, 42, 0.92);
}

#newTicketModal .form-label,
#customerNewTicketModal .form-label {
    color: rgba(15, 23, 42, 0.82);
}

#newTicketModal .form-input,
#customerNewTicketModal .form-input {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(148, 163, 184, 0.70);
}

#newTicketModal .form-input:focus,
#customerNewTicketModal .form-input:focus {
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22);
}

#newTicketModal small,
#customerNewTicketModal small {
    color: rgba(15, 23, 42, 0.62) !important;
}

/* New ticket modals (Dark Mode) */
html.theme-dark #newTicketModal.modal,
html.theme-dark #customerNewTicketModal.modal {
    background:
        radial-gradient(900px 520px at 18% 16%, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0) 62%),
        radial-gradient(780px 520px at 82% 32%, rgba(168, 85, 247, 0.18) 0%, rgba(168, 85, 247, 0) 62%),
        radial-gradient(720px 540px at 42% 88%, rgba(14, 165, 233, 0.12) 0%, rgba(14, 165, 233, 0) 62%),
        rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(10px) saturate(130%);
}

html.theme-dark #newTicketModal .modal-content,
html.theme-dark #customerNewTicketModal .modal-content {
    background: rgba(17, 24, 39, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark #newTicketModal .modal-content::before,
html.theme-dark #customerNewTicketModal .modal-content::before {
    opacity: 0.30;
}

html.theme-dark #newTicketModal .modal-header,
html.theme-dark #customerNewTicketModal .modal-header {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.55) 0%, rgba(17, 24, 39, 0.18) 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark #newTicketModal .modal-title,
html.theme-dark #customerNewTicketModal .modal-title {
    color: rgba(226, 232, 240, 0.90) !important;
}

html.theme-dark #newTicketModal .close-modal,
html.theme-dark #customerNewTicketModal .close-modal {
    color: rgba(226, 232, 240, 0.78) !important;
}

html.theme-dark #newTicketModal .close-modal:hover,
html.theme-dark #customerNewTicketModal .close-modal:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(226, 232, 240, 0.92) !important;
}

html.theme-dark #newTicketModal .form-label,
html.theme-dark #customerNewTicketModal .form-label {
    color: rgba(226, 232, 240, 0.82) !important;
}

html.theme-dark #newTicketModal small,
html.theme-dark #customerNewTicketModal small {
    color: rgba(203, 213, 225, 0.70) !important;
}

html.theme-dark #newTicketModal .form-input,
html.theme-dark #customerNewTicketModal .form-input {
    background: rgba(15, 23, 42, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(226, 232, 240, 0.88) !important;
}

html.theme-dark #newTicketModal .form-input:focus,
html.theme-dark #customerNewTicketModal .form-input:focus {
    border-color: rgba(99, 102, 241, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22) !important;
}

html.theme-dark #newTicketModal input::placeholder,
html.theme-dark #newTicketModal textarea::placeholder,
html.theme-dark #customerNewTicketModal input::placeholder,
html.theme-dark #customerNewTicketModal textarea::placeholder {
    color: rgba(203, 213, 225, 0.55) !important;
}

/* Override inline warning box in dark mode */
html.theme-dark #newTicketModal div[style*="background: #fef3c7"],
html.theme-dark #newTicketModal div[style*="border: 1px solid #f59e0b"] {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
}

html.theme-dark #newTicketModal [style*="color: #92400e"] {
    color: rgba(251, 191, 36, 0.92) !important;
}

/* Tickets page list cards (scoped to Tickets page only) */
#tickets .tickets-grid .ticket-card,
#tickets .tickets-list .ticket-card {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 0 70px rgba(99, 102, 241, 0.10);
}

#tickets .tickets-grid .ticket-card:hover,
#tickets .tickets-list .ticket-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.44);
    box-shadow:
        0 26px 74px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.14) inset,
        0 0 90px rgba(168, 85, 247, 0.12);
}

#tickets .tickets-list .ticket-card.selected {
    background: rgba(255, 255, 255, 0.66);
    border-color: rgba(99, 102, 241, 0.40);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.14) inset,
        0 0 110px rgba(99, 102, 241, 0.16);
}

#tickets .ticket-subject {
    color: rgba(15, 23, 42, 0.92);
}

#tickets .ticket-meta {
    color: rgba(15, 23, 42, 0.62);
}

/* Glass pages: Dashboard, Analytics, Settings, User Management */
/* Intentionally keep these pages using the base white `.page` surface
   so they match the Tickets page container. Only card-like elements
   inside these pages get the glass surface treatment. */

/* Dashboard */
#dashboard .dashboard-filter {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    backdrop-filter: blur(12px) saturate(140%);
}

#dashboard .dashboard-filter:focus {
    border-color: rgba(99, 102, 241, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22) !important;
}

#dashboard .metric-card,
#dashboard .chart-card {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 0 70px rgba(99, 102, 241, 0.10);
}

#dashboard .metric-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.44);
    box-shadow:
        0 26px 74px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.14) inset,
        0 0 90px rgba(168, 85, 247, 0.12);
}

/* Dashboard (Dark Mode) */
html.theme-dark #dashboard {
    color: rgba(203, 213, 225, 0.78);
}

html.theme-dark #dashboard .dashboard-filter {
    background: rgba(17, 24, 39, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: rgba(226, 232, 240, 0.86) !important;
}

html.theme-dark #dashboard .dashboard-filter:focus {
    border-color: rgba(59, 130, 246, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.22) !important;
}

html.theme-dark #dashboard .metric-card,
html.theme-dark #dashboard .chart-card {
    background: rgba(17, 24, 39, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark #dashboard .metric-card:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
}

html.theme-dark #dashboard .metric-label {
    color: rgba(203, 213, 225, 0.72) !important;
}

html.theme-dark #dashboard .metric-value {
    color: rgba(226, 232, 240, 0.88) !important;
}

html.theme-dark #dashboard .metric-period {
    color: rgba(203, 213, 225, 0.56) !important;
}

html.theme-dark #dashboard .metric-trend {
    color: rgba(203, 213, 225, 0.68);
}

html.theme-dark #dashboard .metric-trend.trend-up {
    color: rgba(16, 185, 129, 0.90) !important;
}

html.theme-dark #dashboard .metric-trend.trend-down {
    color: rgba(239, 68, 68, 0.90) !important;
}

/* Override inline title color in dashboard header */
html.theme-dark #dashboard .page-title,
html.theme-dark #dashboard h1[style*="color: #1f2937"] {
    color: rgba(226, 232, 240, 0.88) !important;
}

/* Override inline light gray text used in dashboard markup */
html.theme-dark #dashboard label[style*="color: #64748b"],
html.theme-dark #dashboard h3[style*="color: #64748b"],
html.theme-dark #dashboard span[style*="color: #64748b"] {
    color: rgba(203, 213, 225, 0.60) !important;
}

/* Analytics */
#analytics .chart-container {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 0 70px rgba(99, 102, 241, 0.10);
}

#analytics .breakdown-item,
#analytics .trend-item {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

#analytics .performance-table {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 10px;
    overflow: hidden;
}

#analytics .performance-table th {
    background: rgba(255, 255, 255, 0.70);
}

#analytics .performance-table th,
#analytics .performance-table td {
    border-bottom-color: rgba(15, 23, 42, 0.10);
}

#analytics .stat-card {
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 22px 64px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

/* Settings */
#settings .settings-section {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 12px;
    padding: 1.75rem;
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

#settings .form-input {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(148, 163, 184, 0.70);
}

#settings .form-input:focus {
    border-color: rgba(99, 102, 241, 0.55);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.22);
}

#settings div[style*="background: #f8fafc"] {
    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    backdrop-filter: blur(14px) saturate(140%);
}

#settings div[style*="border-top: 1px solid #e2e8f0"] {
    border-top-color: rgba(255, 255, 255, 0.18) !important;
}

html.theme-dark #settings .settings-section {
    background: rgba(17, 24, 39, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32) !important;
}

/* User Management */
#user-management .tab-navigation {
    border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}

#user-management .tab-btn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

#user-management .filters-container,
#user-management .data-table,
#user-management .company-card {
    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 18px 54px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

#user-management .data-table thead th {
    background: rgba(255, 255, 255, 0.70) !important;
    border-bottom-color: rgba(255, 255, 255, 0.22) !important;
}

#user-management .data-table tbody td {
    border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}

#user-management .data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}

html.theme-dark #user-management .tab-navigation {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark #user-management .tab-btn {
    color: rgba(229, 231, 235, 0.78) !important;
}

html.theme-dark #user-management .tab-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

html.theme-dark #user-management .tab-btn.active {
    color: rgba(199, 210, 254, 0.95) !important;
    border-bottom-color: rgba(99, 102, 241, 0.80) !important;
}

html.theme-dark #user-management .filters-container,
html.theme-dark #user-management .data-table,
html.theme-dark #user-management .company-card {
    background: rgba(17, 24, 39, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark #user-management .data-table table {
    color: rgba(229, 231, 235, 0.92) !important;
}

html.theme-dark #user-management .data-table thead th {
    background: rgba(17, 24, 39, 0.72) !important;
    color: rgba(229, 231, 235, 0.92) !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark #user-management .data-table tbody td {
    color: rgba(229, 231, 235, 0.88) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.theme-dark #user-management .data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

html.theme-dark #user-management .empty-state {
    color: rgba(229, 231, 235, 0.78) !important;
}

html.theme-dark #user-management .um-user-name,
html.theme-dark #user-management .um-company-name {
    color: rgba(255, 255, 255, 0.92) !important;
}

html.theme-dark #user-management .um-user-email,
html.theme-dark #user-management .um-company-domain,
html.theme-dark #user-management .um-secondary {
    color: rgba(229, 231, 235, 0.72) !important;
}

html.theme-dark #user-management .um-user-title,
html.theme-dark #user-management .um-muted {
    color: rgba(229, 231, 235, 0.56) !important;
}

html.theme-dark #user-management .um-count-badge {
    background: rgba(59, 130, 246, 0.18) !important;
    color: rgba(191, 219, 254, 0.98) !important;
}

/* Dark Mode (site-wide) */
html.theme-dark {
    color-scheme: dark;
}

html.theme-dark body {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%) !important;
}

html.theme-dark .sidebar {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.72) 0%, rgba(17, 24, 39, 0.56) 100%) !important;
    border-right-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 120px rgba(99, 102, 241, 0.10) !important;
}

html.theme-dark .nav-link {
    color: rgba(255, 255, 255, 0.82) !important;
}

html.theme-dark .nav-link:hover,
html.theme-dark .nav-link.active {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.96) !important;
}

html.theme-dark .user-profile-bottom {
    border-top-color: rgba(255, 255, 255, 0.10) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}

html.theme-dark .user-profile-card {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30) !important;
}

html.theme-dark .user-profile-card:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

html.theme-dark .user-role-badge span,
html.theme-dark .user-role {
    background: rgba(255, 255, 255, 0.16) !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

html.theme-dark .logout-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.82) !important;
}

html.theme-dark .main-content {
    background: rgba(17, 24, 39, 0.12) !important;
}

html.theme-dark .page {
    background: rgba(17, 24, 39, 0.58) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
    color: rgba(229, 231, 235, 0.92) !important;
}

html.theme-dark .page-header {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark .page-title {
    color: #f9fafb !important;
}

html.theme-dark .page-subtitle {
    color: rgba(229, 231, 235, 0.85) !important;
}

html.theme-dark .chart-container,
html.theme-dark .tickets-list-panel,
html.theme-dark .ticket-card,
html.theme-dark .ticket-detail-panel,
html.theme-dark .filters-container,
html.theme-dark .data-table,
html.theme-dark .company-card,
html.theme-dark .conversation-item,
html.theme-dark .modal-content,
html.theme-dark .login-card {
    background: rgba(17, 24, 39, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark .ticket-subject {
    color: #f9fafb !important;
}

html.theme-dark .ticket-meta {
    color: rgba(229, 231, 235, 0.72) !important;
}

html.theme-dark .tickets-list .ticket-card:hover {
    background: rgba(31, 41, 55, 0.60) !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
}

html.theme-dark #tickets .tickets-grid .ticket-card:hover {
    background: rgba(31, 41, 55, 0.60) !important;
    border-color: rgba(59, 130, 246, 0.55) !important;
}

html.theme-dark .tickets-list .ticket-card.selected {
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: rgba(59, 130, 246, 0.65) !important;
}

html.theme-dark #tickets .tickets-grid .ticket-card.selected {
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: rgba(59, 130, 246, 0.65) !important;
}

html.theme-dark .modal-header,
html.theme-dark .ticket-header,
html.theme-dark .ticket-actions,
html.theme-dark .ticket-response {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark .chart-container h3,
html.theme-dark #analytics h3[style],
html.theme-dark #settings h3[style],
html.theme-dark #settings h4[style] {
    color: #e5e7eb !important;
}

html.theme-dark #settings p[style],
html.theme-dark #analytics p[style],
html.theme-dark #settings small,
html.theme-dark #analytics small {
    color: rgba(229, 231, 235, 0.78) !important;
}

html.theme-dark #settings div[style*="background: #f8fafc"],
html.theme-dark #analytics div[style*="background: #f8fafc"] {
    background: rgba(17, 24, 39, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark .breakdown-item,
html.theme-dark .trend-item {
    background: rgba(17, 24, 39, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark .breakdown-item,
html.theme-dark .trend-item,
html.theme-dark .performance-table,
html.theme-dark .performance-table th,
html.theme-dark .performance-table td {
    color: #e5e7eb !important;
}

html.theme-dark .performance-table {
    background: rgba(17, 24, 39, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark .performance-table th {
    background: rgba(17, 24, 39, 0.72) !important;
}

html.theme-dark .performance-table th,
html.theme-dark .performance-table td {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html.theme-dark .form-input,
html.theme-dark select,
html.theme-dark textarea,
html.theme-dark input[type="text"],
html.theme-dark input[type="email"],
html.theme-dark input[type="password"] {
    background: rgba(17, 24, 39, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f9fafb !important;
}

html.theme-dark .form-input::placeholder,
html.theme-dark textarea::placeholder {
    color: rgba(229, 231, 235, 0.55) !important;
}

html.theme-dark .setting-label {
    color: #f9fafb !important;
}

html.theme-dark .setting-hint {
    color: rgba(229, 231, 235, 0.78) !important;
}

html:not(.theme-dark) #user-management input[style*="border: 1px solid #d1d5db"],
html:not(.theme-dark) #user-management select[style*="border: 1px solid #d1d5db"] {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(148, 163, 184, 0.70) !important;
}

html.theme-dark #user-management input[style*="border: 1px solid #d1d5db"],
html.theme-dark #user-management select[style*="border: 1px solid #d1d5db"] {
    background: rgba(17, 24, 39, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f9fafb !important;
}