/* Timer Sidebar CSS - Works with existing HTML structure */

/* Variables */
:root {
    --xd-primary: #0056b3;
    --xd-success: #00a854;
    --xd-gray-900: #1a1d23;
    --xd-gray-600: #6c757d;
    --xd-gray-500: #909399;
    --xd-gray-300: #d3d5d9;
    --xd-gray-200: #e9ecef;
    --xd-gray-100: #f5f6f8;
    --xd-white: #ffffff;
}

/* Keep your existing timer spine styles */
.timer-display {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 2rem;
    font-weight: 300;
    color: var(--bs-dark);
}

.timer-spine-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% - 1.125rem - 2rem);
    position: relative;
    padding: 1rem 0;
}

.timer-spine-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    position: relative;
}

.timer-spine-time {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 1.125rem;
    font-weight: 700;
    color: #212529;
    letter-spacing: 0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    margin: 0;
    flex-shrink: 0;
}

.timer-spine-matter {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.625rem;
    font-weight: 500;
    color: #6c757d;
    max-height: 9.375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.8;
    margin-top: 1rem;
    flex-shrink: 1;
    line-height: 1.2;
}

.timer-spine-controls {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.timer-spine-control {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.125);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    cursor: pointer;
    transition: all 200ms ease;
    font-size: 12px;
}

    .timer-spine-control:hover {
        transform: scale(1.1);
        border-color: #0d6efd;
        color: #0d6efd;
    }

    .timer-spine-control.is-playing {
        border-color: #198754;
        color: #198754;
        background: rgba(25, 135, 84, 0.05);
    }

@keyframes timer-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.sidebar-secondary:not(.sidebar-collapsed) .timer-spine-display {
    display: none;
}

/* Hide the entire expand button when sidebar is expanded */
.sidebar-expand-lg.sidebar-secondary:not(.sidebar-collapsed) .btn-sidebar-expand {
    display: none !important;
}


/* ========================================
   EXPANDED STATE - Style existing elements
   ======================================== */

/* Fix the wrapper to use flex layout */
.sidebar-secondary .sidebar-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Style the header section */
.sidebar-secondary:not(.sidebar-collapsed) .sidebar-section:first-child {
    background: var(--xd-gray-100) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

    .sidebar-secondary:not(.sidebar-collapsed) .sidebar-section:first-child h5 {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: var(--xd-gray-900) !important;
    }

/* Style the close button */
.sidebar-secondary:not(.sidebar-collapsed) .sidebar-control.btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: white !important;
}

    .sidebar-secondary:not(.sidebar-collapsed) .sidebar-control.btn:hover {
        background: var(--xd-gray-200) !important;
    }

/* Style the timer card */
.sidebar-secondary:not(.sidebar-collapsed) .card {
    background: var(--xd-gray-100) !important;
    border: 2px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
}

    .sidebar-secondary:not(.sidebar-collapsed) .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--xd-gray-300);
    }

/* Timer display in expanded state */
.sidebar-secondary:not(.sidebar-collapsed) .timer-display {
    font-size: 2.5rem !important;
    font-weight: 300 !important;
}

/* Button container - side by side */
.sidebar-secondary:not(.sidebar-collapsed) .d-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

/* Style buttons */
.sidebar-secondary:not(.sidebar-collapsed) .btn-primary {
    background: var(--xd-primary) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.sidebar-secondary:not(.sidebar-collapsed) .btn-secondary {
    background: var(--xd-gray-600) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Style outline buttons */
.sidebar-secondary:not(.sidebar-collapsed) .btn-outline-info {
    border: 1.5px solid #17a2b8 !important;
    color: #17a2b8 !important;
    background: transparent !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

    .sidebar-secondary:not(.sidebar-collapsed) .btn-outline-info:hover {
        background: #17a2b8 !important;
        color: white !important;
    }

.sidebar-secondary:not(.sidebar-collapsed) .btn-outline-primary {
    border: 1.5px solid var(--xd-primary) !important;
    color: var(--xd-primary) !important;
    background: transparent !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

    .sidebar-secondary:not(.sidebar-collapsed) .btn-outline-primary:hover {
        background: var(--xd-primary) !important;
        color: white !important;
    }

.sidebar-secondary:not(.sidebar-collapsed) .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure row/col work properly */
.sidebar-secondary:not(.sidebar-collapsed) .row {
    margin: 0 !important;
    display: flex !important;
}

.sidebar-secondary:not(.sidebar-collapsed) .col-6 {
    padding: 0 4px !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

/* Responsive - stack on very narrow widths */
@media (max-width: 320px) {
    .sidebar-secondary:not(.sidebar-collapsed) .d-grid {
        grid-template-columns: 1fr !important;
    }

    .sidebar-secondary:not(.sidebar-collapsed) .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
    }
}

/* Style form controls */
.sidebar-secondary:not(.sidebar-collapsed) .form-select,
.sidebar-secondary:not(.sidebar-collapsed) .form-control {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
}

    .sidebar-secondary:not(.sidebar-collapsed) .form-select:focus,
    .sidebar-secondary:not(.sidebar-collapsed) .form-control:focus {
        border-color: var(--xd-primary) !important;
        box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1) !important;
    }

/* Style section headers */
.sidebar-secondary:not(.sidebar-collapsed) .sidebar-section-header {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--xd-gray-500) !important;
}

/* Style recent items */
.sidebar-secondary:not(.sidebar-collapsed) .nav-sidebar .nav-link {
    background: var(--xd-gray-100) !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    padding: 16px !important;
    border: 1px solid transparent !important;
    transition: all 150ms ease !important;
}

    .sidebar-secondary:not(.sidebar-collapsed) .nav-sidebar .nav-link:hover {
        background: var(--xd-gray-200) !important;
        border-color: var(--xd-primary) !important;
        transform: translateX(4px) !important;
    }

    /* Fix recent timer layout - prevent badge overlap */
    .sidebar-secondary:not(.sidebar-collapsed) .nav-sidebar .nav-link > span {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important; /* Critical: allows flex items to shrink */
    }

        .sidebar-secondary:not(.sidebar-collapsed) .nav-sidebar .nav-link > span > span:first-child {
            flex: 1 1 0 !important; /* Allow shrinking below content size */
            min-width: 0 !important; /* Critical: allows text truncation */
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }

/* Style badges - warning color for paused timers */
.sidebar-secondary:not(.sidebar-collapsed) .badge {
    background-color: var(--xd-warning) !important;
    color: var(--xd-gray-900) !important;
    font-family: 'SF Mono', Monaco, monospace !important;
    font-weight: 600 !important;
    flex: 0 0 auto !important; /* Never shrink */
    padding: 4px 8px !important;
}

/* Ensure no horizontal overflow in sidebar */
.sidebar-secondary:not(.sidebar-collapsed) .sidebar-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.sidebar-secondary:not(.sidebar-collapsed) .sidebar-section {
    overflow-x: hidden !important;
}

/* Add padding to sections */
.sidebar-secondary:not(.sidebar-collapsed) .sidebar-section-body {
    padding: 16px !important;
}

/* Ensure proper scrolling */
.sidebar-secondary:not(.sidebar-collapsed) .sidebar-content {
    overflow-y: auto !important;
}

/* Add footer styling if there's a footer element */
.timer-footer {
    position: sticky;
    bottom: 0;
    background: var(--xd-gray-900) !important;
    color: white !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    text-align: center !important;
    margin-top: auto !important;
}

/* ========================================
   AS-IMPLEMENTED TIMER SYSTEM ADDITIONS
   ======================================== */

/* Matter Search Autocomplete (NEW) */
#timerMatterSearch {
    background: var(--xd-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    font-size: 14px;
    padding: 8px 16px;
    transition: all 0.2s ease;
}

    #timerMatterSearch:focus {
        border-color: var(--xd-primary);
        box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
    }

    #timerMatterSearch[readonly] {
        background: var(--xd-gray-100);
        cursor: not-allowed;
    }

/* Timer Running State Indicators (NEW) */
.card.timer-running::before {
    background: var(--xd-success);
    animation: timer-progress 1s ease-in-out infinite;
}

.card.timer-paused::before {
    background: var(--xd-warning);
}

@keyframes timer-progress {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Spine Status Enhancements (MODIFIED) */
.timer-spine-status.is-active {
    background: #198754;
    animation: timer-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 0 8px rgba(25, 135, 84, 0.4);
}

.timer-spine-status.is-paused {
    background: var(--xd-warning);
    animation: timer-pulse-warning 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes timer-pulse-warning {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

/* Loading State (NEW) */
.timer-loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

    .timer-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid var(--xd-primary);
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Timer Control Button States (ENHANCED) */
.btn-success.timer-active {
    background: linear-gradient(135deg, var(--xd-success) 0%, #00c851 100%);
    box-shadow: 0 4px 6px rgba(25, 135, 84, 0.2);
}

.btn-warning.timer-paused {
    background: linear-gradient(135deg, var(--xd-warning) 0%, #ffbb33 100%);
    box-shadow: 0 4px 6px rgba(255, 193, 7, 0.2);
    animation: pulse-button 2s infinite;
}

@keyframes pulse-button {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

/* Pending Timer Enhancements (MODIFIED) */
.nav-sidebar .nav-link[data-timer-id] {
    position: relative;
    cursor: pointer;
}

    .nav-sidebar .nav-link[data-timer-id]::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 0;
        background: var(--xd-primary);
        transition: height 0.2s ease, top 0.2s ease;
    }

    .nav-sidebar .nav-link[data-timer-id]:hover::after {
        height: 70%;
        top: 15%;
    }

/* Timer spine status indicator - Add to timer-sidebar.css */
.timer-spine-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    border-radius: 50%;
    transition: all 0.3s ease;
}

    /* Running state - green dot with pulse */
    .timer-spine-status.active {
        background: #10b981;
        animation: pulse-timer 2s infinite;
    }

    /* Paused state - orange dot */
    .timer-spine-status.paused {
        background: #f59e0b;
        animation: none;
    }

/* Pulse animation for running state */
@keyframes pulse-timer {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Timer card states (these may already exist) */
.timer-card.timer-running {
    border-left: 3px solid #10b981;
}

.timer-card.timer-paused {
    border-left: 3px solid #f59e0b;
}


/* Timer Footer Stats (NEW) */
.timer-footer-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(0, 0, 0, 0.1);
    padding: 1px;
    margin-top: auto;
}

.timer-stat {
    background: var(--xd-gray-900);
    color: white;
    padding: 12px 8px;
    text-align: center;
}

.timer-stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, monospace;
}

.timer-stat-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    opacity: 0.7;
    margin-top: 4px;
}

/* Sync Indicator (NEW) */
.sync-indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--xd-gray-500);
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .sync-indicator.syncing {
        opacity: 1;
        background: var(--xd-info);
        animation: sync-pulse 1s ease-in-out infinite;
    }

@keyframes sync-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}

/* Toast Notifications for Timer (NEW) */
.toast.timer-notification {
    min-width: 300px;
    border-left: 4px solid var(--xd-primary);
}

    .toast.timer-notification.success {
        border-left-color: var(--xd-success);
    }

    .toast.timer-notification.warning {
        border-left-color: var(--xd-warning);
    }

/* Accessibility Enhancements (NEW) */
.timer-spine-control:focus-visible,
#timerMatterSearch:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--xd-primary);
    outline-offset: 2px;
}

/* Dark Mode Support (ENHANCED) */
@media (prefers-color-scheme: dark) {
    #timerMatterSearch {
        background: var(--xd-gray-800);
        border-color: var(--xd-gray-700);
        color: var(--xd-white);
    }

    .timer-loading::after {
        border-color: var(--xd-gray-400);
        border-top-color: transparent;
    }
}

/* Mobile Responsiveness (ENHANCED) */
@media (max-width: 576px) {
    .timer-display {
        font-size: 1.75rem;
    }

    .timer-spine-time {
        font-size: 0.875rem;
    }

    .timer-footer-stats {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   CIRCULAR TIMER DESIGN SYSTEM - APPLE QUALITY
   Enterprise-grade, responsive, pixel-perfect implementation
   =================================================================== */
/* Design Tokens - Scalable Foundation */
:root {
    /* Base unit for responsive scaling */
    --timer-base-unit: clamp(14px, 1.5vw, 16px);
    /* Clock dimensions - 250px equivalent, responsive */
    --timer-clock-size: min(15.625rem, 65vw);
    --timer-clock-progress-stroke: 5;
    --timer-clock-track-stroke: 3;
    /* Typography Scale */
    --timer-font-xs: calc(var(--timer-base-unit) * 0.6875); /* ~11px */
    --timer-font-sm: calc(var(--timer-base-unit) * 0.8125); /* ~13px */
    --timer-font-md: calc(var(--timer-base-unit) * 0.9375); /* ~15px */
    --timer-font-lg: calc(var(--timer-base-unit) * 1.125); /* ~18px */
    --timer-font-xl: calc(var(--timer-base-unit) * 1.5); /* ~24px */
    --timer-font-2xl: calc(var(--timer-base-unit) * 2.5); /* ~40px */
    /* Clock-specific typography */
    --timer-clock-font: clamp(2rem, 5vw, 2.75rem);
    --timer-clock-status-font: calc(var(--timer-base-unit) * 0.75);
    /* Spacing Scale */
    --timer-spacing-2xs: calc(var(--timer-base-unit) * 0.125); /* 2px */
    --timer-spacing-xs: calc(var(--timer-base-unit) * 0.25); /* 4px */
    --timer-spacing-sm: calc(var(--timer-base-unit) * 0.5); /* 8px */
    --timer-spacing-md: calc(var(--timer-base-unit) * 1); /* 16px */
    --timer-spacing-lg: calc(var(--timer-base-unit) * 1.5); /* 24px */
    --timer-spacing-xl: calc(var(--timer-base-unit) * 2); /* 32px */
    --timer-spacing-2xl: calc(var(--timer-base-unit) * 3); /* 48px */
    /* Control Sizes */
    --timer-button-size: calc(var(--timer-base-unit) * 3); /* 48px */
    --timer-button-primary-size: calc(var(--timer-base-unit) * 3.5); /* 56px */
    --timer-button-icon-size: calc(var(--timer-base-unit) * 1.125); /* 18px */
    /* Colors - System Palette */
    --timer-green: #00c781;
    --timer-green-hover: #00a86b;
    --timer-orange: #ff9500;
    --timer-red: #ff3b30;
    --timer-gray-50: #f9fafb;
    --timer-gray-100: #f3f4f6;
    --timer-gray-200: #e5e7eb;
    --timer-gray-300: #d1d5db;
    --timer-gray-400: #9ca3af;
    --timer-gray-500: #6b7280;
    --timer-gray-600: #4b5563;
    --timer-gray-700: #374151;
    --timer-gray-800: #1f2937;
    --timer-gray-900: #111827;
    /* Shadows - Neumorphic System */
    --timer-shadow-sm: 2px 2px 4px rgba(0, 0, 0, 0.06), -2px -2px 4px rgba(255, 255, 255, 0.5);
    --timer-shadow-md: 5px 5px 10px rgba(0, 0, 0, 0.08), -5px -5px 10px rgba(255, 255, 255, 0.8);
    --timer-shadow-lg: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 1);
    --timer-shadow-inset: inset 2px 2px 4px rgba(0, 0, 0, 0.06), inset -2px -2px 4px rgba(255, 255, 255, 0.5);
    /* Transitions */
    --timer-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --timer-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --timer-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Border Radius */
    --timer-radius-sm: calc(var(--timer-base-unit) * 0.5);
    --timer-radius-md: calc(var(--timer-base-unit) * 0.75);
    --timer-radius-lg: calc(var(--timer-base-unit) * 1);
    --timer-radius-full: 9999px;
}

/* ===================================================================
   CIRCULAR TIMER CLOCK - PERFECTLY CENTERED
   =================================================================== */

.timer-clock-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--timer-spacing-xl) 0;
    min-height: calc(var(--timer-clock-size) + var(--timer-spacing-2xl));
}

.timer-clock-face {
    position: relative;
    width: var(--timer-clock-size);
    height: var(--timer-clock-size);
    background: linear-gradient(145deg, var(--timer-gray-50) 0%, var(--timer-gray-100) 100%);
    border-radius: var(--timer-radius-full);
    box-shadow: var(--timer-shadow-lg), var(--timer-shadow-inset);
    cursor: pointer;
    transition: transform var(--timer-transition-base), box-shadow var(--timer-transition-base);
    /* Flexbox for perfect centering */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .timer-clock-face:hover {
        transform: scale(1.02);
    }

    .timer-clock-face:active {
        transform: scale(0.98);
        box-shadow: var(--timer-shadow-md), var(--timer-shadow-inset);
    }

/* Progress Ring - Absolute positioning */
.timer-progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.timer-progress-circle {
    width: 100%;
    height: 100%;
}

.timer-progress-track {
    fill: none;
    stroke: var(--timer-gray-200);
    stroke-width: var(--timer-clock-track-stroke);
    opacity: 0.5;
}

.timer-progress-bar {
    fill: none;
    stroke: var(--timer-green);
    stroke-width: var(--timer-clock-progress-stroke);
    stroke-linecap: round;
    stroke-dasharray: 0 553; /* Circumference for r=88 */
    transition: stroke-dasharray 1s linear;
    filter: drop-shadow(0 0 8px rgba(0, 199, 129, 0.3));
}

/* Timer Content - Perfectly Centered */
.timer-time-content {
    position: relative;
    z-index: 2;
    text-align: center;
    /* Use flexbox for vertical centering within */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--timer-spacing-xs);
}

.timer-display {
    font-size: var(--timer-clock-font);
    font-weight: 700;
    color: var(--timer-gray-900);
    font-family: -apple-system-mono, 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.02em;
    /* Remove any default margins */
    margin: 0;
    padding: 0;
}

.timer-status-text {
    font-size: var(--timer-clock-status-font);
    color: var(--timer-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    /* Remove any default margins */
    margin: 0;
    padding: 0;
}

/* State-based colors */
.state-running .timer-progress-bar {
    stroke: var(--timer-green);
}

.state-paused .timer-progress-bar {
    stroke: var(--timer-orange);
    filter: drop-shadow(0 0 8px rgba(255, 149, 0, 0.3));
}

.state-running .timer-status-text {
    color: var(--timer-green);
}

.state-paused .timer-status-text {
    color: var(--timer-orange);
}

/* ===================================================================
   CONTROL BUTTONS - RESPONSIVE & ACCESSIBLE
   =================================================================== */

.d-flex.gap-2 {
    gap: var(--timer-spacing-sm);
}

.timer-control-btn {
    width: var(--timer-button-size);
    height: var(--timer-button-size);
    min-width: var(--timer-button-size);
    min-height: var(--timer-button-size);
    border-radius: var(--timer-radius-full);
    border: none;
    background: var(--timer-gray-50);
    color: var(--timer-gray-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--timer-button-icon-size);
    cursor: pointer;
    transition: all var(--timer-transition-base);
    box-shadow: var(--timer-shadow-md);
    position: relative;
    padding: 0;
    /* Ensure icon centering */
    line-height: 1;
}

    .timer-control-btn i {
        display: block;
        line-height: 1;
    }

    .timer-control-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--timer-shadow-lg);
    }

    .timer-control-btn:active {
        transform: translateY(0);
        box-shadow: var(--timer-shadow-sm);
    }

    .timer-control-btn.primary {
        background: linear-gradient(135deg, var(--timer-green) 0%, var(--timer-green-hover) 100%);
        color: white;
        width: var(--timer-button-primary-size);
        height: var(--timer-button-primary-size);
        min-width: var(--timer-button-primary-size);
        min-height: var(--timer-button-primary-size);
        font-size: calc(var(--timer-button-icon-size) * 1.2);
    }

/* ===================================================================
   MATTER CARD - CLEAN & MODERN
   =================================================================== */

.matter-info-card {
    background: white;
    border: 2px solid var(--timer-gray-200);
    border-radius: var(--timer-radius-lg);
    padding: var(--timer-spacing-md);
    margin: var(--timer-spacing-lg) 0;
    cursor: pointer;
    transition: all var(--timer-transition-base);
    position: relative;
    overflow: hidden;
}

    .matter-info-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--timer-gray-400);
        transition: all var(--timer-transition-base);
    }

    .matter-info-card:hover {
        border-color: var(--timer-gray-300);
        transform: translateY(-1px);
        box-shadow: var(--timer-shadow-md);
    }

    .matter-info-card.active {
        border-color: var(--timer-green);
        background: linear-gradient(135deg, rgba(0, 199, 129, 0.05) 0%, transparent 100%);
    }

        .matter-info-card.active::before {
            background: var(--timer-green);
        }

    .matter-info-card.warning {
        border-color: var(--timer-orange);
        background: linear-gradient(135deg, rgba(255, 149, 0, 0.05) 0%, transparent 100%);
    }

        .matter-info-card.warning::before {
            background: var(--timer-orange);
        }

/* ===================================================================
   RESPONSIVE BREAKPOINTS
   =================================================================== */

/* Tablet */
@media (max-width: 768px) {
    :root {
        --timer-base-unit: clamp(13px, 2vw, 15px);
        --timer-clock-size: min(13rem, 70vw);
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        --timer-base-unit: clamp(12px, 2.5vw, 14px);
        --timer-clock-size: min(11rem, 75vw);
        --timer-clock-font: clamp(1.75rem, 6vw, 2.25rem);
    }

    .timer-control-btn {
        width: calc(var(--timer-button-size) * 0.9);
        height: calc(var(--timer-button-size) * 0.9);
    }

        .timer-control-btn.primary {
            width: calc(var(--timer-button-primary-size) * 0.9);
            height: calc(var(--timer-button-primary-size) * 0.9);
        }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .timer-clock-face {
        image-rendering: -webkit-optimize-contrast;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ===================================================================
   REMAINING STYLES - Using Design Tokens
   =================================================================== */

/* Session Info */
.timer-session-info {
    background: var(--timer-gray-50);
    border-radius: var(--timer-radius-md);
    padding: var(--timer-spacing-sm) var(--timer-spacing-md);
    margin-top: var(--timer-spacing-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--timer-spacing-sm) * -1));
    transition: all var(--timer-transition-slow);
}

    .timer-session-info.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

/* Pending Timer Items */
.pending-timer-item {
    position: relative;
    margin-bottom: 0.5rem;
}

.pending-timer-wrapper {
    position: relative;
    padding: 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pending-timer-content {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.pending-timer-actions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.pending-timer-wrapper:hover {
    background: rgba(0, 0, 0, 0.05);
}

    .pending-timer-wrapper:hover .pending-timer-content {
        opacity: 0.3;
        filter: blur(1px);
    }

    .pending-timer-wrapper:hover .pending-timer-actions {
        opacity: 1;
        pointer-events: auto;
    }

/* Button styling to match circular UI */
.pending-timer-actions .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 0.5rem;
    transition: transform 0.2s ease;
}

    .pending-timer-actions .btn:hover {
        transform: scale(1.05);
    }

.pending-timer-actions .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.pending-timer-actions .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Billable Badge - Refined & Minimal */
#billableBadge,
.billable-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 500;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    transition: opacity 0.2s ease;
}

    /* Billable State - Subtle Success */
    #billableBadge:not(.bg-warning),
    .billable-badge:not(.bg-warning) {
        background: rgba(16, 185, 129, 0.1);
        color: var(--bs-success, #10b981);
        border: 1px solid rgba(16, 185, 129, 0.2);
    }

    /* Non-Billable State - Subtle Warning */
    #billableBadge.bg-warning,
    .billable-badge.bg-warning {
        background: rgba(245, 158, 11, 0.08);
        color: color-mix(in srgb, var(--bs-warning, #f59e0b) 90%, black);
        border: 1px solid rgba(245, 158, 11, 0.15);
    }

    /* Hover State - Slight emphasis */
    #billableBadge:hover,
    .billable-badge:hover {
        opacity: 0.85;
    }

/* Session Info Container */
#sessionInfo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    #sessionInfo.visible {
        opacity: 1;
    }

/* Responsive - Slightly larger on desktop */
@media (min-width: 1024px) {
    #billableBadge,
    .billable-badge {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.5625rem;
    }
}

/* ================================================
   SPINE STATUS LIGHT ANIMATIONS (COLLAPSED STATE)
   ================================================ */

/* Base status element - ensure it's visible */
.timer-spine-status {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    /* Force GPU acceleration */
    transform: translateZ(0) !important;
    will-change: transform, box-shadow !important;
}

    /* Active (running) status - green with SLOW pulse (6 seconds) */
    .timer-spine-status.active {
        background: #30d158 !important;
        /* Very slow pulse - 6 second cycle */
        animation: statusPulse 6s ease-in-out infinite !important;
        -webkit-animation: statusPulse 6s ease-in-out infinite !important;
    }

/* Slow pulse animation - 6 second cycle */
@-webkit-keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.7);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(48, 209, 88, 0);
    }
}

@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.7);
    }

    50% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(48, 209, 88, 0);
    }
}

/* Paused status - orange with blink */
.timer-spine-status.paused {
    background: #ff9500 !important;
    animation: statusBlink 1.5s ease-in-out infinite !important;
    -webkit-animation: statusBlink 1.5s ease-in-out infinite !important;
}

@-webkit-keyframes statusBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.95);
    }
}

@keyframes statusBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.95);
    }
}

/* Stopped status - gray */
.timer-spine-status.stopped {
    background: #8e8e93 !important;
    box-shadow: none !important;
    animation: none !important;
}



/* ================================================
   FORCE ANIMATION EXECUTION
   ================================================ */

/* Ensure animations run by forcing GPU acceleration */
.card.timer-running,
.card.timer-paused,
.timer-spine-status {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

    /* Force reflow to trigger animations */
    .card.timer-running,
    .card.timer-paused,
    .timer-spine-status.active,
    .timer-spine-status.paused {
        will-change: opacity, box-shadow;
    }

/* ================================================
   COLLAPSED SIDEBAR ENHANCEMENT
   ================================================ */

.sidebar-secondary.sidebar-collapsed .btn-sidebar-expand {
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100% ) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ================================================
   BROWSER COMPATIBILITY
   ================================================ */

/* Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .card.timer-running::before {
        -webkit-animation: rotateRing 60s linear infinite !important;
    }

    .timer-spine-status.active {
        -webkit-animation: statusPulse 6s ease-in-out infinite !important;
    }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    /* Firefox-specific adjustments if needed */
}

/* ================================================
   ACCESSIBILITY
   ================================================ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .card.timer-running::before,
    .card.timer-paused,
    .timer-spine-status.active,
    .timer-spine-status.paused {
        animation: none !important;
        -webkit-animation: none !important;
    }

    /* Static indicators for reduced motion */
    .card.timer-running {
        border: 3px solid #30d158 !important;
    }

    .card.timer-paused {
        border: 3px solid #ff9500 !important;
    }

    .timer-spine-status.active {
        box-shadow: 0 0 10px rgba(48, 209, 88, 0.5) !important;
    }
}

/* timer-sidebar.css - Add these styles for status messages */

/* ================================================
   SPINE STATUS MESSAGE DISPLAY
   Enterprise-grade state communication
   ================================================ */

/* Status message mode - when timer is idle/stopped */
.timer-spine-time.status-message {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #6c757d !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    opacity: 0.9 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Time display mode - when timer has value */
.timer-spine-time.time-display {
    font-family: 'SF Mono', Monaco, monospace !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #212529 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    opacity: 1 !important;
}

/* Container state classes for contextual styling */
.sidebar-secondary.state-stopped .timer-spine-time.status-message {
    animation: subtle-pulse 4s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.6;
    }
}

/* Different status message variations (for future extensibility) */
.timer-spine-time.status-message[data-status="ready"] {
    color: #6c757d !important;
}

.timer-spine-time.status-message[data-status="syncing"] {
    color: #0d6efd !important;
}

.timer-spine-time.status-message[data-status="error"] {
    color: #dc3545 !important;
}

.timer-spine-time.status-message[data-status="offline"] {
    color: #ffc107 !important;
}

/* Hover state for interactive feedback */
.sidebar-collapsed .btn-sidebar-expand:hover .timer-spine-time.status-message {
    color: #495057 !important;
    transform: rotate(180deg) scale(1.05);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .timer-spine-time.status-message {
        font-weight: 700 !important;
        color: #000000 !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .timer-spine-time.status-message {
        color: #adb5bd !important;
    }

    .timer-spine-time.time-display {
        color: #f8f9fa !important;
    }
}

/* Responsive font sizing for smaller screens */
@media (max-width: 768px) {
    .timer-spine-time.status-message {
        font-size: 0.75rem !important;
    }
}

/* Accessibility - Ensure readability */
.timer-spine-time {
    min-height: 3rem; /* Ensures consistent height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Transition between states */
.timer-spine-time {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}