/* ==========================================================================
   Hlithskjalf Theme — Design Tokens & Radzen Overrides
   US-031: Thematic Design Adaptation
   ========================================================================== */

/* --- Font Faces (Self-Hosted, Offline-First) --- */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Material Icons';
    src: url('../fonts/material-icons.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
}

/* --- Design Tokens (CSS Custom Properties) --- */

:root {
    /* Colors — Primary */
    --hlith-color-accent: #2B6CB0;
    --hlith-color-accent-dark: #1E4F7E;
    --hlith-color-accent-light: rgba(43, 108, 176, 0.4);

    /* Colors — Semantic */
    --hlith-color-success: #10B981;
    --hlith-color-warning: #F59E0B;
    --hlith-color-critical: #EF4444;

    /* Colors — Text */
    --hlith-color-text-primary: #1A1A2E;
    --hlith-color-text-secondary: #6B7280;

    /* Colors — Backgrounds */
    --hlith-color-bg: #FFFFFF;
    --hlith-color-bg-surface: #F8F9FA;

    /* Colors — Domain */
    --hlith-color-jira: #0052CC;
    --hlith-color-task: #059669;
    --hlith-color-meeting: #8B5CF6;

    /* Colors — Thematic Accents */
    --hlith-color-throne-gold: #B8860B;
    --hlith-color-throne-gold-light: #DAA520;
    --hlith-color-worlds-green: #1E3A24;

    /* Spacing */
    --hlith-space-xs: 4px;
    --hlith-space-sm: 8px;
    --hlith-space-md: 16px;
    --hlith-space-lg: 24px;
    --hlith-space-xl: 32px;
    --hlith-space-2xl: 48px;

    /* Border Radius */
    --hlith-radius-sm: 4px;
    --hlith-radius-md: 8px;
    --hlith-radius-lg: 12px;
    --hlith-radius-full: 9999px;

    /* Shadows */
    --hlith-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --hlith-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --hlith-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Z-Index Scale */
    --hlith-z-base: 0;
    --hlith-z-dropdown: 100;
    --hlith-z-sticky: 200;
    --hlith-z-modal: 300;
    --hlith-z-toast: 400;
    --hlith-z-command: 500;

    /* Typography */
    --hlith-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hlith-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --hlith-font-weight-normal: 400;
    --hlith-font-weight-medium: 500;
    --hlith-font-weight-semibold: 600;
    --hlith-font-weight-bold: 700;

    /* Shadows — Extended */
    --hlith-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
    --hlith-shadow-command: 0 12px 36px rgba(0, 0, 0, 0.16);

    /* Component Colors */
    --hlith-color-timer-active: var(--hlith-color-accent);
    --hlith-color-timer-paused: var(--hlith-color-throne-gold);
    --hlith-color-today-button: var(--hlith-color-throne-gold);
    --hlith-color-today-button-dark: #9A6F08;

    /* Header Timer Accent */
    --hlith-color-header-timer-accent: #E91E63;
    --hlith-color-header-timer-accent-hover: #C2185B;

    /* Border Accent */
    --hlith-border-width-accent: 3px;

    /* Sidebar */
    --hlith-sidebar-width-compact: 48px;
    --hlith-sidebar-width-expanded: 220px;

    /* --- Radzen Theme Overrides --- */
    --rz-primary: var(--hlith-color-accent);
    --rz-primary-light: rgba(43, 108, 176, 0.15);
    --rz-primary-lighter: rgba(43, 108, 176, 0.08);
    --rz-primary-dark: var(--hlith-color-accent-dark);

    --rz-success: var(--hlith-color-success);
    --rz-success-light: rgba(16, 185, 129, 0.15);
    --rz-success-lighter: rgba(16, 185, 129, 0.08);
    --rz-success-dark: #059669;

    --rz-warning: var(--hlith-color-warning);
    --rz-warning-light: rgba(245, 158, 11, 0.15);
    --rz-warning-lighter: rgba(245, 158, 11, 0.08);
    --rz-warning-dark: #D97706;

    --rz-danger: var(--hlith-color-critical);
    --rz-danger-light: rgba(239, 68, 68, 0.15);
    --rz-danger-lighter: rgba(239, 68, 68, 0.08);
    --rz-danger-dark: #DC2626;

    --rz-text-color: var(--hlith-color-text-primary);
    --rz-text-secondary-color: var(--hlith-color-text-secondary);
    --rz-base-background-color: var(--hlith-color-bg);
    --rz-base-900: var(--hlith-color-text-primary);
}

/* ==========================================================================
   Dark Mode Overrides (US-052)
   ========================================================================== */

html[data-theme="dark"] {
    /* App backgrounds */
    --hlith-color-bg: #1A1A2E;
    --hlith-color-bg-surface: #2D2D44;

    /* Text */
    --hlith-color-text-primary: #E2E8F0;
    --hlith-color-text-secondary: #94A3B8;

    /* Shadows */
    --hlith-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --hlith-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --hlith-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --hlith-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Radzen overrides */
    --rz-text-color: #E2E8F0;
    --rz-text-secondary-color: #94A3B8;
    --rz-base-background-color: #1A1A2E;
    --rz-base-900: #E2E8F0;
    --rz-base-800: #CBD5E1;
    --rz-base-700: #94A3B8;
    --rz-base-600: #64748B;
    --rz-base-500: #475569;
    --rz-base-400: #334155;
    --rz-base-300: #2D2D44;
    --rz-base-200: #252540;
    --rz-base-100: #1A1A2E;

    --rz-border-color: rgba(148, 163, 184, 0.2);
    --rz-input-border: rgba(148, 163, 184, 0.3);
    --rz-input-background-color: #252540;
    --rz-input-color: #E2E8F0;

    --rz-card-background-color: #2D2D44;
    --rz-panel-background-color: #2D2D44;

    --rz-dialog-background-color: #2D2D44;
    --rz-dialog-titlebar-background-color: #252540;

    --rz-grid-header-background-color: #252540;
    --rz-grid-row-background-color: #2D2D44;
    --rz-grid-row-alt-background-color: #252540;

    --rz-scheduler-background-color: #2D2D44;
    --rz-scheduler-header-background-color: #252540;

    --rz-dropdown-background-color: #2D2D44;
    --rz-dropdown-item-hover-background-color: #334155;

    --rz-body-background-color: #1A1A2E;

    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: #1A1A2E;
    color: #E2E8F0;
}

html[data-theme="dark"] .rz-card {
    border-color: rgba(148, 163, 184, 0.15);
    background-color: #2D2D44;
}

html[data-theme="dark"] .rz-body {
    background-color: #1A1A2E;
}

/* Dismissed events bar dark mode */
html[data-theme="dark"] .dismissed-events-bar {
    background: rgba(245, 158, 11, 0.15);
}

/* Current time line stays visible in dark mode */
html[data-theme="dark"] .current-time-line {
    background-color: var(--hlith-color-critical);
}

/* --- Radzen Header Styling --- */

.rz-header.header-bar {
    background: linear-gradient(135deg, #1A1A2E 0%, #2D2D44 100%);
    border-bottom: 1px solid rgba(184, 134, 11, 0.3);
    /* Override Radzen text variables for dark header context */
    color: rgba(255, 255, 255, 0.9);
    --rz-text-h6-color: var(--hlith-color-throne-gold-light);
    --rz-text-title-color: var(--hlith-color-throne-gold-light);
    --rz-on-primary: #ffffff;
    --rz-header-color: rgba(255, 255, 255, 0.9);
}

/* --- Radzen Sidebar Styling --- */

.rz-sidebar {
    background: linear-gradient(180deg, #1A1A2E 0%, #2D2D44 100%);
    color: rgba(255, 255, 255, 0.8);
    /* Override Radzen variables for dark sidebar context */
    --rz-text-color: rgba(255, 255, 255, 0.8);
    --rz-text-secondary-color: rgba(255, 255, 255, 0.6);
    --rz-link-color: rgba(255, 255, 255, 0.8);
    --rz-base-900: rgba(255, 255, 255, 0.8);
}

.rz-sidebar.sidebar-compact {
    width: var(--hlith-sidebar-width-compact);
    min-width: var(--hlith-sidebar-width-compact);
    max-width: var(--hlith-sidebar-width-compact);
    transition: width 0.2s ease, min-width 0.2s ease;
}

.rz-sidebar.sidebar-expanded {
    width: var(--hlith-sidebar-width-expanded);
    min-width: var(--hlith-sidebar-width-expanded);
    max-width: var(--hlith-sidebar-width-expanded);
    transition: width 0.2s ease, min-width 0.2s ease;
}

/* NavMenu links — scoped CSS can't reach NavLink's <a> tags,
   so ALL .nav-link styles must be global */

/* Base layout & appearance */
.rz-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

/* Hover */
.rz-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Active state */
.rz-sidebar .nav-link.active {
    background: rgba(184, 134, 11, 0.12);
    border-left-color: var(--hlith-color-throne-gold);
    color: var(--hlith-color-throne-gold);
    font-weight: var(--hlith-font-weight-semibold);
}

/* Icon colors */
.rz-sidebar .nav-link:hover .nav-icon {
    color: #fff;
}

.rz-sidebar .nav-link.active .nav-icon {
    color: var(--hlith-color-throne-gold);
}

/* Compact mode — centered icon pill */
.rz-sidebar .compact .nav-link {
    justify-content: center;
    padding: 0.75rem 0;
    gap: 0;
    border-left: none;
    margin: 0 var(--hlith-space-xs);
    border-radius: var(--hlith-radius-md);
}

/* Compact mode — active uses pill background instead of left border */
.rz-sidebar .compact .nav-link.active {
    border-left: none;
}

/* --- Radzen Scheduler Styling --- */

.rz-scheduler {
    font-family: var(--hlith-font-sans);
}

.rz-scheduler .rz-event {
    border-radius: var(--hlith-radius-sm);
    box-shadow: var(--hlith-shadow-sm);
    min-width: 40px;
    overflow: hidden;
}

/* Radzen Scheduler DOM: .rz-event (wrapper, Radzen-controlled) > inner div (OnAppointmentRender attrs).
   Our CSS classes (solid-event, planned-block) are on the inner div, NOT on .rz-event.
   CSS variables (--apt-color, --apt-border-color) are also on the inner div. */

/* Planned blocks: transparent background with dashed border */
.rz-scheduler .rz-event:has(> .planned-block) {
    box-shadow: none;
    z-index: 0;
    pointer-events: auto;
    border: none !important;
    background: transparent !important;
}

.rz-scheduler .rz-event > .planned-block {
    border: 2px dashed var(--apt-color);
    border-radius: var(--hlith-radius-sm);
    background: color-mix(in srgb, var(--apt-color) 12%, transparent);
    color: var(--apt-color);
    text-shadow: none;
    height: 100%;
    padding: 0 4px;
}

.rz-scheduler .rz-event:has(> .planned-block.is-done) {
    opacity: 0.5;
}

/* Solid events: timer segments + meetings */
.rz-scheduler .rz-event:has(> .solid-event) {
    z-index: 1;
    border: none !important;
}

.rz-scheduler .rz-event > .solid-event {
    background: var(--apt-color);
    border-left: 4px solid var(--apt-border-color);
    border-radius: var(--hlith-radius-sm);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    height: 100%;
    padding: 0 4px;
}

/* External events: read-only, no drag cursor */
.rz-scheduler .rz-event > .external-event {
    cursor: default !important;
}

.rz-scheduler .rz-event:has(> .external-event) {
    cursor: default !important;
}

/* Pending change indicator on external events */
.rz-scheduler .rz-event > .has-pending-change {
    position: relative;
    border-left: 4px solid #f59e0b !important;
    background-image: linear-gradient(
        rgba(245, 158, 11, 0.18),
        rgba(245, 158, 11, 0.18)
    ) !important;
}

.rz-scheduler .rz-event > .has-pending-change::before {
    content: "\26A0";
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: #f59e0b;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    text-align: center;
    z-index: 2;
    line-height: 1.1rem;
}

@keyframes pendingPulse {
    0%, 100% { box-shadow: -4px 0 0 #f59e0b, 0 0 0 0 rgba(245, 158, 11, 0); }
    50%       { box-shadow: -4px 0 0 #f59e0b, 0 0 6px 2px rgba(245, 158, 11, 0.35); }
}

.rz-scheduler .rz-event:has(> .has-pending-change) {
    animation: pendingPulse 2.5s ease-in-out infinite;
    cursor: pointer !important;
}

/* Eisenhower task card — needs relative for absolute-positioned star icon */
.eisenhower-task-card {
    position: relative;
}

/* Big Rock star indicator on calendar appointments */
.rz-scheduler .rz-event > .is-big-rock::after {
    content: "⭐";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
}

/* US-076: External iCal events — dashed border (non-all-day) */
/* IMPORTANT: Child combinator, NOT compound selector (CLAUDE.md Radzen rule) */
.rz-scheduler .rz-event:has(> .dashed-event) {
    z-index: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none;
}

.rz-scheduler .rz-event > .dashed-event {
    background: color-mix(in srgb, var(--apt-color) 12%, transparent);
    border: 2px dashed var(--apt-border-color, #6d4bb0);
    border-radius: var(--hlith-radius-sm);
    color: var(--apt-color);
    height: 100%;
    padding: 0 4px;
}

/* US-041: Unplanned task blocks — dashed border with distinct color */
.rz-scheduler .rz-event:has(> .unplanned-task-block) {
    z-index: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none;
}

.rz-scheduler .rz-event > .unplanned-task-block {
    background: color-mix(in srgb, var(--apt-color) 15%, transparent);
    border: 2px dashed var(--apt-border-color);
    border-radius: var(--hlith-radius-sm);
    color: var(--apt-color);
    height: 100%;
    padding: 0 4px;
    text-shadow: none;
}

/* Event time entries button inside appointments (US-078) */
.rz-scheduler .rz-event > .solid-event .apt-entries-btn {
    position: absolute;
    top: 2px;
    right: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0 2px;
    color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.rz-scheduler .rz-event > .dashed-event .apt-entries-btn {
    position: absolute;
    top: 2px;
    right: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0 2px;
    color: color-mix(in srgb, var(--apt-color) 70%, transparent);
    z-index: 1;
}

.rz-scheduler .rz-event > .solid-event .apt-entries-btn:hover {
    color: white;
}

.rz-scheduler .rz-event > .dashed-event .apt-entries-btn:hover {
    color: var(--apt-color);
}

/* Dismiss button inside appointments (US-076) */
.rz-scheduler .rz-event > .solid-event .apt-dismiss-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.rz-scheduler .rz-event > .dashed-event .apt-dismiss-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    color: color-mix(in srgb, var(--apt-color) 70%, transparent);
    z-index: 1;
}

.rz-scheduler .rz-event > .solid-event .apt-dismiss-btn:hover {
    color: white;
}

.rz-scheduler .rz-event > .dashed-event .apt-dismiss-btn:hover {
    color: var(--apt-color);
}

/* Appointment title text */
.rz-scheduler .rz-event .apt-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    padding-right: 36px;
}

/* Dismissed events indicator bar (US-076) */
.dismissed-events-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: var(--rz-warning-lighter);
    border-radius: 4px;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

/* Pending (unassigned ad-hoc) time entries — dashed border, semi-transparent (US-074) */
.rz-scheduler .rz-event > .pending-entry {
    border: 2px dashed var(--apt-border-color) !important;
    background: repeating-linear-gradient(
        -45deg,
        var(--apt-color),
        var(--apt-color) 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0.7;
    cursor: pointer !important;
}

.rz-scheduler .rz-event:has(> .pending-entry) {
    cursor: pointer !important;
}

/* --- Current Time Line (US-073) --- */

.rz-view-content {
    position: relative; /* Required for absolute child positioning */
}

.current-time-line {
    position: absolute;
    left: 60px;      /* Offset to align with appointment columns, not time labels */
    right: 0;
    height: 2px;
    background-color: var(--hlith-color-critical); /* #EF4444 */
    z-index: 10;
    pointer-events: none;
}

.current-time-line::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--hlith-color-critical);
}

/* --- Zoom Controls --- */

.zoom-controls {
    display: flex;
    align-items: center;
    gap: var(--hlith-space-sm);
    padding: var(--hlith-space-xs) 0;
    justify-content: flex-end;
}

.zoom-controls .zoom-label {
    font-family: var(--hlith-font-mono);
    font-size: 0.85rem;
    min-width: 3rem;
    text-align: center;
    color: var(--hlith-color-text-secondary);
}

/* --- Radzen Card Themed Override --- */

.rz-card {
    border: 1px solid rgba(43, 108, 176, 0.1);
    box-shadow: var(--hlith-shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* --- Responsive: Mobile sidebar always compact icon-only --- */

@media (max-width: 640.98px) {
    .rz-sidebar.sidebar-expanded {
        width: var(--hlith-sidebar-width-compact);
        min-width: var(--hlith-sidebar-width-compact);
        max-width: var(--hlith-sidebar-width-compact);
    }

    .rz-sidebar .expanded .nav-link {
        justify-content: center;
        padding: 0.75rem 0;
        gap: 0;
        border-left: none;
        margin: 0 var(--hlith-space-xs);
        border-radius: var(--hlith-radius-md);
    }

    .rz-sidebar .expanded .nav-link.active {
        border-left: none;
    }

    .rz-sidebar .expanded .nav-label {
        display: none;
    }
}

/* --- Utility Classes --- */

.hlith-mono {
    font-family: var(--hlith-font-mono);
}

/* --- Animations --- */

@keyframes hlith-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}