/* ============================================================
   LaborGuard — Light Theme
   Full-featured light UI theme with CSS variables, animations
   and Bootstrap 5 overrides. Mirrors dark-theme.css structure.
   ============================================================ */

/* ---------- 1. CSS Variables (Light) ---------- */
[data-theme=light] {
    /* Backgrounds */
    --bg-base:      #ffffff;
    --bg-surface:   #f8f9fc;
    --bg-elevated:  #f0f2f7;
    --bg-hover:     #e8eaf2;
    --bg-overlay:   rgba(0, 0, 0, 0.25);

    /* Accent palette — same as dark for brand consistency */
    --accent-primary:    #7c6cff;
    --accent-primary-hover: #6b5af0;
    --accent-secondary:  #0099cc;
    --accent-tertiary:   #00b894;
    --accent-gradient:   linear-gradient(135deg, #7c6cff 0%, #0099cc 100%);
    --accent-gradient-hover: linear-gradient(135deg, #6b5af0 0%, #0080b3 100%);
    --accent-glow:       rgba(124, 108, 255, 0.2);
    --accent-glow-cyan:  rgba(0, 153, 204, 0.15);

    /* Semantic colors */
    --color-success:  #2ed573;
    --color-warning:  #ffa502;
    --color-danger:   #ff4757;
    --color-info:     #0099cc;

    /* Text */
    --text-primary:    #1a1a2e;
    --text-secondary:  #4a4a68;
    --text-muted:      #8a8aa0;
    --text-inverse:    #ffffff;

    /* Borders */
    --border-color:    #e0e3ed;
    --border-light:    #eef0f6;
    --border-focus:    #7c6cff;

    /* Shadows — softer for light bg */
    --shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 20px var(--accent-glow);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --sidebar-width:          260px;
    --sidebar-width-collapsed: 72px;
    --topbar-height:          64px;
    --content-max-width:      100%;

    /* Fonts */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Bootstrap 5.3 root variable overrides for light mode */
    --bs-body-bg: var(--bg-base);
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-secondary-bg: var(--bg-surface);
    --bs-tertiary-bg: var(--bg-elevated);
    --bs-tertiary-color: var(--text-muted);
    --bs-border-color: var(--border-color);
    --bs-border-color-translucent: var(--border-light);
    --bs-link-color: var(--accent-secondary);
    --bs-link-hover-color: var(--accent-primary);
    --bs-heading-color: var(--text-primary);
    --bs-primary: var(--accent-primary);
    --bs-primary-bg: var(--bg-elevated);
    --bs-primary-bg-subtle: rgba(124, 108, 255, 0.1);
    --bs-primary-text-emphasis: var(--accent-primary);
    --bs-danger-bg-subtle: rgba(255, 71, 87, 0.1);
    --bs-success-bg-subtle: rgba(46, 213, 115, 0.1);
    --bs-warning-bg-subtle: rgba(255, 165, 2, 0.1);
    --bs-info-bg-subtle: rgba(0, 153, 204, 0.1);
}

/* Bootstrap 5.3 light theme overrides */
[data-bs-theme=light] {
    --bs-body-bg: var(--bg-base);
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-secondary-bg: var(--bg-surface);
    --bs-tertiary-bg: var(--bg-elevated);
    --bs-tertiary-color: var(--text-muted);
    --bs-border-color: var(--border-color);
    --bs-border-color-translucent: var(--border-light);
    --bs-link-color: var(--accent-secondary);
    --bs-link-hover-color: var(--accent-primary);
    --bs-heading-color: var(--text-primary);

    /* Table-specific variables */
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-light);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--text-primary);
    --bs-table-striped-bg: var(--bg-surface);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-hover-bg: var(--bg-hover);
    --bs-table-active-color: var(--text-primary);
    --bs-table-active-bg: var(--bg-elevated);

    /* Pagination variables */
    --bs-pagination-bg: var(--bg-elevated);
    --bs-pagination-color: var(--text-primary);
    --bs-pagination-hover-bg: var(--bg-hover);
    --bs-pagination-hover-color: var(--text-primary);
    --bs-pagination-active-bg: var(--accent-primary);
    --bs-pagination-active-border-color: var(--accent-primary);

    /* Form controls */
    --bs-form-control-bg: var(--bg-base);
    --bs-form-control-color: var(--text-primary);
    --bs-form-control-border-color: var(--border-color);
    --bs-form-select-bg: var(--bg-base);
    --bs-form-select-color: var(--text-primary);

    /* Modal */
    --bs-modal-bg: var(--bg-surface);
    --bs-modal-color: var(--text-primary);
    --bs-modal-border-color: var(--border-color);

    /* Card */
    --bs-card-bg: var(--bg-surface);
    --bs-card-color: var(--text-primary);
    --bs-card-border-color: var(--border-light);
    --bs-card-cap-bg: var(--bg-elevated);
    --bs-card-cap-color: var(--text-primary);

    /* Dropdown */
    --bs-dropdown-bg: var(--bg-surface);
    --bs-dropdown-color: var(--text-primary);
    --bs-dropdown-border-color: var(--border-color);
    --bs-dropdown-link-color: var(--text-secondary);
    --bs-dropdown-link-hover-bg: var(--bg-hover);
    --bs-dropdown-link-hover-color: var(--text-primary);
}

/* ---------- 2. Base Styles (Light overrides) ---------- */
[data-theme=light] body {
    background-color: var(--bg-base);
    color: var(--text-primary);
}

/* Subtle gradient background for light theme */
[data-theme=light] body::before {
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(124, 108, 255, 0.04), transparent),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(0, 153, 204, 0.03), transparent);
}

/* Custom scrollbars — light */
[data-theme=light] ::-webkit-scrollbar-track {
    background: var(--bg-base);
}
[data-theme=light] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border: 2px solid var(--bg-base);
}
[data-theme=light] ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

[data-theme=light] h1,
[data-theme=light] h2,
[data-theme=light] h3,
[data-theme=light] h4,
[data-theme=light] h5,
[data-theme=light] h6 {
    color: var(--text-primary);
}

[data-theme=light] a {
    color: var(--accent-secondary);
}
[data-theme=light] a:hover {
    color: var(--accent-primary);
}

/* ---------- 3. Layout: Sidebar (Light) ---------- */
[data-theme=light] .sidebar {
    background: var(--bg-surface);
    border-right: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

[data-theme=light] .sidebar__header {
    border-bottom: 1px solid var(--border-light);
}

[data-theme=light] .sidebar__link {
    color: var(--text-secondary);
}
[data-theme=light] .sidebar__link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
[data-theme=light] .sidebar__link.active {
    background: var(--bg-elevated);
    color: var(--accent-primary);
}

[data-theme=light] .sidebar__footer {
    border-top: 1px solid var(--border-light);
}

/* ---------- 4. Layout: Topbar (Light) ---------- */
[data-theme=light] .topbar {
    background: rgba(248, 249, 252, 0.85);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

[data-theme=light] .topbar__toggle {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}
[data-theme=light] .topbar__toggle:hover {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

[data-theme=light] .topbar__user {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}
[data-theme=light] .topbar__user:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

/* ---------- 5. Content Area (Light) ---------- */
[data-theme=light] .content-wrapper {
    background: transparent;
}

/* ---------- 6. Footer (Light) ---------- */
[data-theme=light] .app-footer {
    border-top: 1px solid var(--border-light);
    background: var(--bg-surface);
}

/* ---------- 7. Bootstrap Card (Light) ---------- */
[data-theme=light] .card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}
[data-theme=light] .card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-color);
}
[data-theme=light] .card-header {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-light);
}

/* ---------- 8. Stat Cards (Light) ---------- */
[data-theme=light] .stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}
[data-theme=light] .stat-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

/* ---------- 9. Tables (Light) ---------- */
[data-theme=light] .table {
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-light);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--text-primary);
    --bs-table-striped-bg: var(--bg-surface);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-hover-bg: var(--bg-hover);
    --bs-table-active-color: var(--text-primary);
    --bs-table-active-bg: var(--bg-elevated);
}

[data-theme=light] .table > :not(caption) > * > * {
    background-color: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary) !important;
}

[data-theme=light] .table thead th {
    background: var(--bg-elevated) !important;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-secondary) !important;
}

[data-theme=light] .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--bg-base) !important;
    color: var(--text-primary) !important;
}

[data-theme=light] .table > tbody > tr:hover > *,
[data-theme=light] .table-hover > tbody > tr:hover > * {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

[data-theme=light] .table > :not(:last-child) > :last-child > * {
    border-bottom-color: var(--border-light);
}

/* ---------- 10. Forms (Light) ---------- */
[data-theme=light] .form-control,
[data-theme=light] .form-select,
[data-theme=light] .form-control:focus,
[data-theme=light] .form-select:focus {
    background-color: var(--bg-base);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}
[data-theme=light] .form-control::placeholder {
    color: var(--text-muted);
}
[data-theme=light] .form-control:focus,
[data-theme=light] .form-select:focus {
    background-color: var(--bg-surface);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
[data-theme=light] .form-control:disabled,
[data-theme=light] .form-control[readonly] {
    background-color: var(--bg-surface);
}

[data-theme=light] .form-label,
[data-theme=light] label {
    color: var(--text-secondary);
}

[data-theme=light] .input-group-text {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

[data-theme=light] select.form-select option {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* ---------- 11. Buttons (Light) ---------- */
[data-theme=light] .btn {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-bg: var(--bg-elevated);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-color: var(--text-primary);
    --bs-btn-hover-bg: var(--bg-hover);
    --bs-btn-hover-border-color: var(--accent-primary);
    --bs-btn-active-color: var(--text-primary);
    --bs-btn-active-bg: var(--bg-hover);
    --bs-btn-active-border-color: var(--accent-primary);
    --bs-btn-disabled-color: var(--text-muted);
    --bs-btn-disabled-bg: var(--bg-surface);
    color: var(--text-secondary);
    background-color: var(--bg-elevated);
    border-color: var(--border-color);
}
[data-theme=light] .btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
    border-color: var(--accent-primary);
}

[data-theme=light] .btn-default {
    color: var(--text-secondary) !important;
    background-color: var(--bg-elevated) !important;
    border: 1px solid var(--border-color) !important;
}
[data-theme=light] .btn-default:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-hover) !important;
    border-color: var(--accent-primary) !important;
}

/* ---------- 12. Alerts (Light) ---------- */
[data-theme=light] .alert {
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}
[data-theme=light] .alert .close {
    color: var(--text-muted);
}

/* ---------- 13. Pagination (Light) — consolidated ---------- */
[data-theme=light] .page-link,
[data-theme=light] button.page-link,
[data-theme=light] button.btn.page-link,
[data-theme=light] button.btn.btn-link.page-link,
[data-theme=light] button.page-link.btn,
[data-theme=light] button.page-link.btn-link,
[data-theme=light] .pagination .btn,
[data-theme=light] .pagination li > .btn,
[data-theme=light] .pagination li > span,
[data-theme=light] ul.pagination .btn,
[data-theme=light] ul.pagination .page-link,
[data-theme=light] ul.pagination button,
[data-theme=light] ul.pagination li > a,
[data-theme=light] ul.pagination li > span,
[data-theme=light] ul.pagination li > button,
[data-theme=light] ul.pagination .page-item .page-link,
[data-theme=light] ul.pagination .page-item button.page-link,
[data-theme=light] ul.pagination .page-item .btn,
[data-theme=light] ul.pagination .page-item span,
[data-theme=light] ul.pagination .page-item a,
[data-theme=light] ul.pagination .page-item button {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    min-width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    font-weight: 600 !important;
    transition: all var(--transition-fast) !important;
    box-shadow: none !important;
}
[data-theme=light] .page-link:hover,
[data-theme=light] button.page-link:hover,
[data-theme=light] button.btn.page-link:hover,
[data-theme=light] button.btn.btn-link.page-link:hover,
[data-theme=light] .pagination .btn:hover,
[data-theme=light] .pagination li > .btn:hover,
[data-theme=light] ul.pagination .btn:hover,
[data-theme=light] ul.pagination .page-link:hover,
[data-theme=light] ul.pagination li > a:hover,
[data-theme=light] ul.pagination li > span:hover,
[data-theme=light] ul.pagination li > button:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent-primary) !important;
}
[data-theme=light] .page-item.active .page-link,
[data-theme=light] .page-item.active button.page-link,
[data-theme=light] .page-item.active button.btn.page-link,
[data-theme=light] .pagination .page-item.active .btn,
[data-theme=light] .pagination .page-item.active button,
[data-theme=light] .pagination .page-item.active a,
[data-theme=light] .pagination .page-item.active span,
[data-theme=light] .pagination .page-item.active .page-link,
[data-theme=light] ul.pagination .page-item.active .page-link,
[data-theme=light] ul.pagination .page-item.active button.page-link,
[data-theme=light] ul.pagination .page-item.active button.btn.page-link,
[data-theme=light] ul.pagination .page-item.active .btn,
[data-theme=light] ul.pagination .page-item.active span {
    background: var(--accent-gradient) !important;
    color: #fff !important;
    border: 2px solid var(--accent-primary) !important;
    box-shadow: var(--shadow-glow) !important;
    font-weight: 700 !important;
    transform: scale(1.05);
}
[data-theme=light] .page-item.active .page-link:hover,
[data-theme=light] .page-item.active button.page-link:hover,
[data-theme=light] .page-item.active button.btn.page-link:hover,
[data-theme=light] .pagination .page-item.active .btn:hover,
[data-theme=light] .pagination .page-item.active button:hover,
[data-theme=light] .pagination .page-item.active a:hover,
[data-theme=light] ul.pagination .page-item.active .page-link:hover,
[data-theme=light] ul.pagination .page-item.active button.page-link:hover,
[data-theme=light] ul.pagination .page-item.active button.btn.page-link:hover,
[data-theme=light] ul.pagination .page-item.active .btn:hover,
[data-theme=light] ul.pagination .page-item.active span:hover {
    box-shadow: 0 0 32px rgba(124, 108, 255, 0.45) !important;
}
[data-theme=light] .page-item.disabled .page-link,
[data-theme=light] .page-item.disabled button.page-link,
[data-theme=light] .page-item.disabled button.btn.page-link,
[data-theme=light] .pagination .page-item.disabled .btn,
[data-theme=light] .pagination .page-item.disabled button,
[data-theme=light] .pagination .page-item.disabled a,
[data-theme=light] .pagination .page-item.disabled span,
[data-theme=light] ul.pagination .page-item.disabled .btn,
[data-theme=light] ul.pagination .page-item.disabled button,
[data-theme=light] ul.pagination .page-item.disabled a,
[data-theme=light] ul.pagination .page-item.disabled span {
    opacity: 0.35 !important;
    cursor: default !important;
}

/* ---------- 14. Badges (Light) ---------- */
[data-theme=light] .badge.bg-success { background: rgba(46, 213, 115, 0.15) !important; color: var(--color-success); }
[data-theme=light] .badge.bg-danger  { background: rgba(255, 71, 87, 0.15) !important;  color: var(--color-danger); }
[data-theme=light] .badge.bg-warning { background: rgba(255, 165, 2, 0.15) !important;  color: var(--color-warning); }
[data-theme=light] .badge.bg-info    { background: rgba(0, 153, 204, 0.15) !important;  color: var(--accent-secondary); }
[data-theme=light] .badge.bg-primary { background: rgba(124, 108, 255, 0.15) !important; color: var(--accent-primary); }

/* ---------- 15. Spinners & Loading (Light) ---------- */
[data-theme=light] .loading-text {
    color: var(--text-muted);
}
[data-theme=light] .loading-text::before {
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
}

/* Skeleton loading shimmer — light */
[data-theme=light] .skeleton {
    background: linear-gradient(90deg,
        var(--bg-surface) 25%,
        var(--bg-elevated) 50%,
        var(--bg-surface) 75%);
}

/* ---------- 16. Modals (Light) ---------- */
[data-theme=light] .modal-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}
[data-theme=light] .modal-header {
    border-bottom: 1px solid var(--border-light);
}
[data-theme=light] .modal-backdrop.show {
    opacity: 0.4;
}

/* ---------- 17. Dropdown (Light) ---------- */
[data-theme=light] .dropdown-menu {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}
[data-theme=light] .dropdown-item {
    color: var(--text-secondary);
}
[data-theme=light] .dropdown-item:hover,
[data-theme=light] .dropdown-item:focus {
    background: var(--bg-hover);
    color: var(--text-primary);
}
[data-theme=light] .dropdown-divider {
    border-color: var(--border-light);
}

/* ---------- 18. Utility & Animation Classes (Light) ---------- */
[data-theme=light] .glass-panel {
    background: rgba(248, 249, 252, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-light);
}

/* ---------- 19. Mobile Overlay (Light) ---------- */
[data-theme=light] .sidebar-overlay {
    background: var(--bg-overlay);
}

/* ---------- 20. Error UI (Light) ---------- */
[data-theme=light] #blazor-error-ui {
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}
[data-theme=light] #blazor-error-ui .reload {
    color: var(--accent-secondary);
}

[data-theme=light] .blazor-error-boundary {
    background: var(--bg-base);
    color: var(--text-primary);
}

/* ---------- 21. Theme Toggle Button ---------- */
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 1.1rem;
    border: 1px solid var(--border-light);
}
.theme-toggle-btn:hover {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
    transform: scale(1.05);
}
.theme-toggle-btn i {
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* ---------- 22. Theme transition for theme switch ---------- */
/* Scoped to [data-theme=light] to avoid global !important on *.
   The no-theme-transition class excludes specific elements. */
[data-theme=light] *,
[data-theme=light] *::before,
[data-theme=light] *::after {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exclude transition for elements that shouldn't animate */
.no-theme-transition,
.no-theme-transition *,
.no-theme-transition *::before,
.no-theme-transition *::after {
    transition: none !important;
}