/* ==========================================================================
   Phase 4: Polish
   Dark Mode, Micro-animations, Smooth Scrolling, Print Styles, Performance
   ========================================================================== */

/* ==========================================================================
   1. Dark Mode - CSS Custom Properties
   ========================================================================== */

:root {
    /* Light Mode (Default) */
    --dm-bg-primary: #C8E9F1;
    --dm-bg-secondary: #ffffff;
    --dm-bg-tertiary: #f2f2f2;
    --dm-bg-offwhite: #F4F4F8;
    --dm-text-primary: #002B51;
    --dm-text-secondary: #5B5B63;
    --dm-text-muted: #6c757d;
    --dm-text-inverse: #ffffff;
    --dm-border-color: #ddd;
    --dm-shadow-color: rgba(0, 0, 0, 0.1);
    --dm-overlay-color: rgba(0, 0, 0, 0.9);
    --dm-header-bg: #002B51;
    --dm-footer-bg: #002B51;
    --dm-card-bg: #ffffff;
    --dm-input-bg: #ffffff;
    --dm-input-border: #ddd;
    --dm-hover-overlay: rgba(0, 0, 0, 0.05);
}

/* Dark mode disabled */
/* [data-theme="dark"] {
    --dm-bg-primary: #0f172a;
    --dm-bg-secondary: #1e293b;
    --dm-bg-tertiary: #334155;
    --dm-bg-offwhite: #1e293b;
    --dm-text-primary: #e2e8f0;
    --dm-text-secondary: #94a3b8;
    --dm-text-muted: #64748b;
    --dm-text-inverse: #0f172a;
    --dm-border-color: #475569;
    --dm-shadow-color: rgba(0, 0, 0, 0.3);
    --dm-overlay-color: rgba(0, 0, 0, 0.7);
    --dm-header-bg: #1e293b;
    --dm-footer-bg: #1e293b;
    --dm-card-bg: #1e293b;
    --dm-input-bg: #334155;
    --dm-input-border: #475569;
    --dm-hover-overlay: rgba(255, 255, 255, 0.05);
} */

/* ==========================================================================
   2. Dark Mode Base Styles
   ========================================================================== */

body {
    background-color: var(--dm-bg-primary);
    color: var(--dm-text-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.header {
    background-color: var(--dm-header-bg);
    transition: background-color var(--transition-base);
}

.footer {
    background-color: var(--dm-footer-bg);
    transition: background-color var(--transition-base);
}

/* Cards and Containers */
.login-container,
.form-data,
.user-management-container,
.admin-container,
.applicant-data,
.accordion,
.empty-state,
.modal-content,
.toast {
    background-color: var(--dm-card-bg);
    transition: background-color var(--transition-base);
}

/* Tables */
.applicant-data,
.form-data table,
.user-management-table,
.admin-management-table,
.outcomes-table,
.ec-table {
    background-color: var(--dm-card-bg);
}

.form-data th,
.user-management-table th,
.admin-management-table th {
    background-color: var(--color-primary-blue);
}

.applicant-data tr:nth-child(even),
.form-data tr:nth-child(even),
.user-management-table tbody tr:nth-child(even) {
    background-color: var(--dm-bg-tertiary);
}

.user-management-table tbody tr:hover,
.admin-management-table tbody tr:hover {
    background-color: var(--dm-hover-overlay);
}

/* Forms */
.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"],
.form-data input[type="text"],
.form-data select,
.form-data textarea,
.form-input {
    background-color: var(--dm-input-bg);
    border-color: var(--dm-input-border);
    color: var(--dm-text-primary);
}

/* Burger Menu - White background for stripes */
.burger-menu-items {
    background-color: #ffffff !important;
    border-color: var(--dm-border-color);
}

/* Dark mode border support for burger menu - disabled */
/* [data-theme="dark"] .burger-menu-items .admin-button:not(:last-child),
/* [data-theme="dark"] .burger-menu-items .logout-button:not(:last-child),

/* [data-theme="dark"] .burger-menu-items .create-button:not(:last-child),

/* [data-theme="dark"] .burger-menu-items .list-button:not(:last-child),

/* [data-theme="dark"] .burger-menu-items .appsearch-button:not(:last-child),

/* [data-theme="dark"] .burger-menu-items .user-button:not(:last-child),

/* [data-theme="dark"] .burger-menu-items .uploadword-button:not(:last-child) {

    border-bottom-color: var(--dm-border-color);
} */

/* Modals */
.modal,
.img-modal {
    background-color: var(--dm-overlay-color);
}

.modal-content {
    background-color: var(--dm-card-bg);
}

/* Alerts */
.alert,
.alert-enc {
    background-color: var(--color-success);
}

.alert-error {
    background-color: var(--color-error);
}

/* ==========================================================================
   3. Dark Mode Toggle Switch
   ========================================================================== */

.theme-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-right: var(--space-md);
}

.theme-toggle-label {
    font-size: var(--font-size-sm);
    color: var(--dm-text-inverse);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.theme-switch {
    position: relative;
    width: 52px;
    height: 28px;
    appearance: none;
    background-color: var(--dm-bg-tertiary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-base);
    border: 2px solid var(--dm-border-color);
}

.theme-switch:checked {
    background-color: var(--color-accent-teal);
}

.theme-switch::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--dm-text-inverse);
    border-radius: var(--radius-full);
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.theme-switch:checked::before {
    transform: translateX(24px);
}

/* Sun/Moon icons */
.theme-switch-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    opacity: 0.7;
    pointer-events: none;
}

.theme-switch-icon.sun {
    left: 6px;
    color: #fbbf24;
}

.theme-switch-icon.moon {
    right: 6px;
    color: #94a3b8;
    opacity: 0;
}

.theme-switch:checked ~ .theme-switch-icon.sun {
    opacity: 0;
}

.theme-switch:checked ~ .theme-switch-icon.moon {
    opacity: 0.7;
}

/* ==========================================================================
   4. Micro-animations - Button Hover Effects
   ========================================================================== */

/* Enhanced Button Hover with Transform */
.btn,
.logout-button,
.admin-button,
.user-button,
.back-button,
.report-button,
.download-button,
.uploadword-button,
.create-button,
.list-button,
.appsearch-button,
.tile,
.empty-state-action {
    transform: translateY(0);
    will-change: transform, box-shadow;
}

.btn:hover,
.logout-button:hover,
.admin-button:hover,
.user-button:hover,
.back-button:hover,
.report-button:hover,
.download-button:hover,
.uploadword-button:hover,
.create-button:hover,
.list-button:hover,
.appsearch-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--dm-shadow-color);
}

.btn:active,
.logout-button:active,
.admin-button:active,
.user-button:active,
.back-button:active,
.report-button:active,
.download-button:active,
.uploadword-button:active,
.create-button:active,
.list-button:active,
.appsearch-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px var(--dm-shadow-color);
}

/* Tile Hover Enhancement */
.tile:hover {
    transform: translateY(-5px) scale(1.02);
}

/* ==========================================================================
   5. Micro-animations - Form Focus Transitions
   ========================================================================== */

.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus,
.login-container input[type="email"]:focus,
.form-data input[type="text"]:focus,
.form-data select:focus,
.form-data textarea:focus,
.form-input:focus {
    transform: scale(1.01);
    box-shadow: 0 0 0 3px rgba(0, 121, 163, 0.15), 0 2px 4px var(--dm-shadow-color);
}

/* Radio Button Group Animation */
.radio-button label,
.btn-group-radio label {
    transform: scale(1);
    transition: all var(--transition-base);
}

.radio-button input[type="radio"]:checked + label,
.btn-group-radio input[type="radio"]:checked + label {
    transform: scale(1.05);
}

/* Checkbox Animation */
.form-check-input {
    transition: transform var(--transition-fast);
}

.form-check-input:checked {
    transform: scale(1.1);
}

/* ==========================================================================
   6. Micro-animations - Subtle Fade-ins
   ========================================================================== */

/* Page Content Fade-in */
.container,
.container-enc,
.admin-container,
.user-management-container,
.login-container {
    animation: fadeInUp var(--transition-slow) ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alert Fade-in */
.alert,
.alert-error,
.toast {
    animation: fadeInSlide var(--transition-base) ease-out;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Content Zoom-fade */
.modal-content {
    animation: zoomFade var(--transition-base) ease-out;
}

@keyframes zoomFade {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Table Row Stagger Animation */
.user-management-table tbody tr,
.admin-management-table tbody tr,
.applicant-data tbody tr {
    animation: fadeInRow var(--transition-base) ease-out;
    animation-fill-mode: both;
}

.user-management-table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.user-management-table tbody tr:nth-child(2) { animation-delay: 0.04s; }
.user-management-table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.user-management-table tbody tr:nth-child(4) { animation-delay: 0.08s; }
.user-management-table tbody tr:nth-child(5) { animation-delay: 0.10s; }
.user-management-table tbody tr:nth-child(6) { animation-delay: 0.12s; }
.user-management-table tbody tr:nth-child(7) { animation-delay: 0.14s; }
.user-management-table tbody tr:nth-child(8) { animation-delay: 0.16s; }
.user-management-table tbody tr:nth-child(9) { animation-delay: 0.18s; }
.user-management-table tbody tr:nth-child(10) { animation-delay: 0.20s; }

@keyframes fadeInRow {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Accordion Body Slide */
.accordion-body {
    transition: max-height var(--transition-slow) ease-out, padding var(--transition-slow);
}

/* ==========================================================================
   7. Smooth Scrolling
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* Smooth scroll for anchor links */
a[href^="#"] {
    scroll-behavior: smooth;
}

/* Scroll margin for fixed header */
* {
    scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

/* Smooth scroll for back-to-top buttons */
.scroll-to-top {
    scroll-behavior: smooth;
}

/* ==========================================================================
   8. Print Styles
   ========================================================================== */

@media print {
    /* Hide non-essential elements */
    .header,
    .footer,
    .burger-menu,
    .menu-container,
    .theme-toggle,
    .toast-container,
    .search-container,
    .timer-container,
    .modal,
    .img-modal,
    .alert,
    .alert-error {
        display: none !important;
    }
    
    /* Reset body for print */
    body {
        background-color: white;
        color: black;
        font-size: 12pt;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        min-height: auto;
        display: block;
    }
    
    /* Container adjustments */
    .container,
    .container-enc,
    .admin-container,
    .user-management-container,
    .login-container,
    .form-data,
    .applicant-data {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        background: none;
    }
    
    /* Tables for print */
    .user-management-table,
    .admin-management-table,
    .applicant-data,
    .form-data table,
    .outcomes-table,
    .ec-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .user-management-table th,
    .user-management-table td,
    .admin-management-table th,
    .admin-management-table td,
    .applicant-data th,
    .applicant-data td,
    .form-data th,
    .form-data td {
        border: 1px solid #000;
        padding: 6pt;
        font-size: 10pt;
    }
    
    .user-management-table th,
    .admin-management-table th,
    .form-data th {
        background-color: #f0f0f0 !important;
        color: black !important;
        font-weight: bold;
    }
    
    /* Prevent page breaks inside important elements */
    .applicant-data,
    .form-data,
    table {
        page-break-inside: avoid;
    }
    
    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
    
    /* Links */
    a {
        text-decoration: none;
        color: black;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    /* Remove hover effects */
    .btn:hover,
    .admin-button:hover,
    .logout-button:hover,
    .tile:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Buttons in print */
    .btn,
    .admin-button,
    .logout-button,
    .back-button,
    .report-button {
        border: 1px solid #000;
        padding: 6pt 12pt;
        background: none;
        color: black;
    }
    
    /* Form elements */
    input,
    select,
    textarea {
        border: 1px solid #000;
        background: none;
    }
    
    /* Hide empty states in print */
    .empty-state {
        display: none;
    }
    
    /* Accordion - expand all */
    .accordion-body {
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }
    
    .accordion-header {
        font-weight: bold;
        border-bottom: 1px solid #000;
    }
    
    /* Page breaks for sections */
    h1, h2, h3 {
        page-break-after: avoid;
    }
    
    /* Images */
    .logo {
        max-width: 150pt;
        height: auto;
    }
    
    /* Remove animations */
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   9. Performance Optimizations
   ========================================================================== */

/* CSS Containment for complex components */
.tile-container,
.user-management-table,
.admin-management-table,
.dataTables_wrapper,
.accordion {
    contain: layout style paint;
}

/* Will-change hints for animated elements */
.tile,
.burger-menu-button,
.theme-switch,
.modal-content,
.toast,
.accordion-header {
    will-change: transform, opacity;
}

/* Optimize repaint areas */
.header,
.footer {
    contain: layout style;
}

/* GPU acceleration for transforms */
.tile:hover,
.btn:hover,
.modal-content {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce paint complexity for large lists */
.user-management-table tbody,
.admin-management-table tbody {
    contain: strict;
}

/* ==========================================================================
   10. System Preference Detection (Auto Dark Mode)
   ========================================================================== */

/* Dark mode disabled */
/* @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dm-bg-primary: #0f172a;
        --dm-bg-secondary: #1e293b;
        --dm-bg-tertiary: #334155;
        --dm-bg-offwhite: #1e293b;
        --dm-text-primary: #e2e8f0;
        --dm-text-secondary: #94a3b8;
        --dm-text-muted: #64748b;
        --dm-text-inverse: #0f172a;
        --dm-border-color: #475569;
        --dm-shadow-color: rgba(0, 0, 0, 0.3);
        --dm-overlay-color: rgba(0, 0, 0, 0.7);
        --dm-header-bg: #1e293b;
        --dm-footer-bg: #1e293b;
        --dm-card-bg: #1e293b;
        --dm-input-bg: #334155;
        --dm-input-border: #475569;
        --dm-hover-overlay: rgba(255, 255, 255, 0.05);
    }
} */

/* ==========================================================================
   11. Responsive Adjustments for Dark Mode Toggle
   ========================================================================== */

@media (max-width: 767px) {
    .theme-toggle {
        margin-right: 0;
        margin-bottom: var(--space-sm);
    }
    
    .theme-toggle-label {
        font-size: var(--font-size-xs);
    }
    
    .theme-switch {
        width: 44px;
        height: 24px;
    }
    
    .theme-switch::before {
        width: 16px;
        height: 16px;
    }
    
    .theme-switch:checked::before {
        transform: translateX(20px);
    }
}

/* ==========================================================================
   12. High Contrast Mode Support (Enhanced)
   ========================================================================== */

@media (prefers-contrast: high) {
    /* Dark mode disabled */
    /* [data-theme="dark"] {
        --dm-bg-primary: #000000;
        --dm-bg-secondary: #1a1a1a;
        --dm-text-primary: #ffffff;
        --dm-text-secondary: #e0e0e0;
        --dm-border-color: #ffffff;
    } */
    
    .btn,
    .admin-button,
    .logout-button,
    .tile {
        border: 2px solid currentColor;
    }
}

/* ==========================================================================
   13. Reduced Motion Support (Enhanced)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   14. Hotfix: Button Group, Logo Size, Theme Toggle
   ========================================================================== */

/* Fix overlapping buttons in btn-group */
.btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0;
}

.btn-group .btn {
    position: relative;
    flex: 0 0 auto;
    border-radius: 0;
    margin-right: -1px;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    margin-right: 0;
}

.btn-group .btn:hover,
.btn-group .btn:focus {
    z-index: 1;
}

/* Fix logo size */
.logo {
    height: 60px;
    width: 180px;
    object-fit: contain;
}

/* Fix theme toggle z-index for clickability */
.theme-toggle {
    z-index: calc(var(--z-fixed) + 20);
    position: relative;
}

.theme-switch-icon {
    z-index: 1;
}