/* ============================================
   ImportPanel v5.0 - Base Styles & Reset
   ============================================ */

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Typography */
h1 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

p {
    margin-bottom: 8px;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
}

img {
    max-width: 100%;
    display: block;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Button click feedback - subtle scale down */
button:active:not(:disabled) {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
}

/* Selection */
::selection {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

/* Hidden utility */
[hidden] {
    display: none !important;
}

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Fade transition utility */
.fade-in {
    animation: fadeInUp 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

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

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

/* Page transition animations */
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

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

#app-content.page-enter {
    animation: pageEnter 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

#app-content.page-exit {
    animation: pageExit 100ms ease-in forwards;
}

/* Card/element entrance animation (staggered fade-up) */
.card {
    animation: cardEntrance 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* Stagger delay for sequential card/stat-card/list-item animation */
.card:nth-child(1) { animation-delay: 0.02s; }
.card:nth-child(2) { animation-delay: 0.05s; }
.card:nth-child(3) { animation-delay: 0.08s; }
.card:nth-child(4) { animation-delay: 0.11s; }
.card:nth-child(5) { animation-delay: 0.14s; }
.card:nth-child(6) { animation-delay: 0.17s; }
.card:nth-child(7) { animation-delay: 0.20s; }
.card:nth-child(8) { animation-delay: 0.23s; }

/* Stat cards staggered entrance */
.stat-card {
    animation: cardEntrance 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stat-card:nth-child(1) { animation-delay: 0.03s; }
.stat-card:nth-child(2) { animation-delay: 0.07s; }
.stat-card:nth-child(3) { animation-delay: 0.11s; }
.stat-card:nth-child(4) { animation-delay: 0.15s; }
.stat-card:nth-child(5) { animation-delay: 0.19s; }
.stat-card:nth-child(6) { animation-delay: 0.23s; }

/* Scroll-to-top button */
.scroll-to-top,
.scroll-top-btn {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--color-text-secondary, #4b5563);
    border: 1px solid var(--color-border-light, #e5e7eb);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease,
                background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.scroll-to-top.visible,
.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-to-top:hover,
.scroll-top-btn:hover {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Tooltip component (item 14) */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip-wrapper .tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: var(--color-text);
    color: var(--color-bg);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tooltip-wrapper .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-text) transparent transparent transparent;
}

.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Breadcrumb route indicator (item 16) */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb .breadcrumb-separator {
    color: var(--color-text-muted);
    opacity: 0.5;
    font-size: 11px;
}

.breadcrumb .breadcrumb-current {
    color: var(--color-text);
    font-weight: 500;
}

/* ============================================
   Comprehensive Print Stylesheet
   ============================================ */

/* CSS counter for page numbering (print) */
@media print {

    /* ------------------------------------------
       1. Hide non-printable UI elements
       ------------------------------------------ */
    #sidebar,
    #topbar,
    .bottom-nav,
    #toast-container,
    .toast,
    #modal-overlay,
    .modal-backdrop,
    .modal-container,
    .sidebar-overlay,
    .scroll-to-top,
    .scroll-top-btn,
    .scroll-progress,
    .bulk-bar,
    .pagination,
    .pagination-wrapper,
    .view-switcher,
    .imports-toolbar,
    .page-header-actions,
    .filter-chips,
    .filter-presets,
    .filter-presets-bar,
    .notification-bell,
    .notification-dropdown,
    .side-panel-backdrop,
    .tag-editor,
    .tag-add-btn,
    .cell-dropdown,
    .dropdown-menu,
    .kebab-menu,
    .breadcrumb,
    .tooltip-wrapper .tooltip-text,
    .empty-state-cta,
    .btn:not(.print-visible),
    button:not(.print-visible),
    .hamburger-btn,
    .search-shortcut,
    .keyboard-shortcuts-modal,
    .command-palette-overlay,
    .quick-filters-bar,
    .sort-indicator-bar,
    .auto-refresh-status,
    .advanced-search-panel,
    .column-toggle-dropdown,
    .export-csv-dropdown,
    .notes-popover,
    .automation-popover,
    .formatting-popover,
    .import-comparison-modal,
    .kanban-card-popup-backdrop,
    .offline-banner,
    .connectivity-dot,
    .skip-link {
        display: none !important;
    }

    /* ------------------------------------------
       2. Force light mode: white bg, black text
       ------------------------------------------ */
    html {
        scroll-behavior: auto !important;
    }

    html, html[data-theme="dark"] {
        --color-bg: #ffffff;
        --color-surface: #ffffff;
        --color-surface-alt: #f8f8f8;
        --color-text: #000000;
        --color-text-secondary: #333333;
        --color-text-muted: #666666;
        --color-border: #cccccc;
        --color-border-light: #dddddd;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 11pt !important;
        line-height: 1.4 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    #app-shell {
        display: block !important;
    }

    .app-main {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    #app-content {
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .page-content,
    .page-wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000000 !important;
        page-break-after: avoid;
    }

    p, span, div, li, label {
        color: #000000 !important;
    }

    .text-muted,
    .stat-label {
        color: #444444 !important;
    }

    /* ------------------------------------------
       3. Tables: visible borders, compact, no hover
       ------------------------------------------ */
    table {
        border-collapse: collapse !important;
        width: 100% !important;
        font-size: 9pt !important;
    }

    thead {
        display: table-header-group !important;
    }

    thead th {
        background-color: #f0f0f0 !important;
        border: 1px solid #999 !important;
        border-bottom: 2px solid #333 !important;
        padding: 4px 6px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        font-size: 8pt !important;
        text-align: left !important;
        position: static !important;
        top: auto !important;
    }

    tbody td {
        border: 1px solid #ccc !important;
        padding: 3px 6px !important;
        color: #000000 !important;
        background: #ffffff !important;
        vertical-align: top !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
    }

    tbody tr {
        page-break-inside: avoid !important;
    }

    tbody tr:hover,
    tbody tr:hover td {
        background: #ffffff !important;
        transform: none !important;
    }

    /* Remove row status color indicators for cleaner print */
    tbody tr[data-status] {
        border-left: none !important;
    }

    /* Remove editable cell styling */
    .cell-editable {
        cursor: default !important;
    }

    .cell-editable:hover {
        background: transparent !important;
    }

    /* Table checkbox column - hide in print */
    th:first-child:has(input[type="checkbox"]),
    td:first-child:has(input[type="checkbox"]) {
        display: none !important;
    }

    /* Column resize handles */
    .resize-handle,
    .col-resize-handle {
        display: none !important;
    }

    /* Remove sticky positioning (causes duplication on pages) */
    .table-wrapper thead,
    .table-wrapper thead th,
    .data-table thead,
    .data-table thead th {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Compact row heights for density */
    tbody td {
        line-height: 1.3 !important;
    }

    /* Row numbering column */
    .row-number-cell {
        font-size: 7pt !important;
        color: #999 !important;
    }

    /* ------------------------------------------
       4. Cards: no shadows, thin borders, no radius
       ------------------------------------------ */
    .card,
    .chart-card,
    .stat-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        border-radius: 2px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        background: #ffffff !important;
    }

    .card:hover,
    .chart-card:hover,
    .stat-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* ------------------------------------------
       5. Charts: full width, higher contrast
       ------------------------------------------ */
    .chart-row {
        display: block !important;
        width: 100% !important;
    }

    .chart-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12pt !important;
        page-break-inside: avoid !important;
    }

    .chart-card .chart-body {
        width: 100% !important;
    }

    .chart-card .chart-body canvas {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 250px !important;
    }

    /* Gantt chart - full width for timeline */
    .gantt-wrapper {
        width: 100% !important;
        overflow: visible !important;
    }

    .gantt-bar {
        border: 1px solid #333 !important;
    }

    .gantt-today-line {
        border-color: #000000 !important;
    }

    .gantt-header,
    .gantt-month {
        color: #000000 !important;
        border-color: #999 !important;
    }

    .gantt-row {
        border-color: #ccc !important;
    }

    .gantt-label-row {
        color: #000000 !important;
    }

    /* Chart legends - higher contrast */
    .chart-legend-item {
        color: #000000 !important;
    }

    /* ------------------------------------------
       6. Status badges: text-only with brackets
       ------------------------------------------ */
    .badge {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        font-size: 9pt !important;
        color: #000000 !important;
        font-weight: 600 !important;
    }

    .badge::before {
        content: "[" !important;
    }

    .badge::after {
        content: "]" !important;
    }

    .badge-success,
    .badge-warning,
    .badge-danger,
    .badge-info,
    .badge-default,
    .badge-primary {
        background: transparent !important;
        color: #000000 !important;
    }

    /* Tag pills - text only */
    .tag-pill {
        background: transparent !important;
        border: 1px solid #999 !important;
        color: #000000 !important;
        padding: 0 3px !important;
        font-size: 8pt !important;
    }

    .tag-pill .tag-remove {
        display: none !important;
    }

    /* Trend indicators - plain text */
    .trend-up,
    .trend-down,
    .trend-neutral {
        color: #000000 !important;
    }

    /* ------------------------------------------
       7. Links: show URL after text
       ------------------------------------------ */
    a[href]::after {
        content: " (" attr(href) ")" !important;
        font-size: 8pt !important;
        color: #555 !important;
        font-weight: 400 !important;
    }

    /* Don't show URL for navigation and action links */
    a[href^="#"]::after,
    a[href^="javascript"]::after,
    nav a::after,
    .breadcrumb a::after,
    .sidebar a::after {
        content: "" !important;
    }

    /* ------------------------------------------
       8. Page breaks: avoid inside cards/rows
       ------------------------------------------ */
    .card,
    .stat-card,
    .chart-card,
    tr,
    .kanban-card,
    .gantt-row,
    .activity-item,
    .sp-section,
    .sp-field,
    .sp-payment-item,
    .sp-comment {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    h1, h2, h3, h4 {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    table {
        page-break-before: auto !important;
    }

    thead {
        display: table-header-group !important;
    }

    tfoot {
        display: table-footer-group !important;
    }

    /* Ensure content sections start cleanly */
    .page-section {
        page-break-before: auto !important;
    }

    /* ------------------------------------------
       9. Remove all animations and transitions
       ------------------------------------------ */
    *,
    *::before,
    *::after {
        animation: none !important;
        animation-duration: 0ms !important;
        animation-delay: 0ms !important;
        transition: none !important;
        transition-duration: 0ms !important;
        transition-delay: 0ms !important;
    }

    #app-content.page-enter,
    #app-content.page-exit {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .fade-in,
    .card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .skeleton-base,
    .skeleton-text {
        animation: none !important;
        background: #e0e0e0 !important;
    }

    .empty-state-icon {
        animation: none !important;
    }

    /* ------------------------------------------
       10. Stat cards: 2x2 grid for printing
       ------------------------------------------ */
    .stats-row,
    .stats-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8pt !important;
        width: 100% !important;
    }

    .stat-card {
        flex: 0 0 calc(50% - 4pt) !important;
        max-width: calc(50% - 4pt) !important;
        padding: 8pt !important;
        margin: 0 !important;
    }

    .stat-card-top {
        display: flex !important;
        align-items: center !important;
        gap: 6pt !important;
    }

    .stat-icon {
        width: 24px !important;
        height: 24px !important;
        border-radius: 4px !important;
    }

    .stat-label {
        font-size: 8pt !important;
        margin-bottom: 2pt !important;
    }

    .stat-value {
        font-size: 14pt !important;
        color: #000000 !important;
    }

    /* Financial summary compact layout */
    .financial-summary,
    .summary-cards {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6pt !important;
    }

    /* Dashboard stat cards grid */
    .dashboard-stats {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8pt !important;
    }

    /* Archive stat cards */
    .archive-stats {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8pt !important;
    }

    /* ------------------------------------------
       11. Dashboard print layout
       ------------------------------------------ */
    .dash-widget-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10pt !important;
    }

    .dash-widget {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border: 1px solid #ccc !important;
        border-radius: 2px !important;
        box-shadow: none !important;
    }

    .dash-widget--col2 {
        grid-column: span 2 !important;
    }

    /* Hide drag handles and widget action buttons */
    .dash-widget-drag-handle,
    .dash-widget-collapse-btn,
    .dash-widget-remove-btn,
    .dash-widget-actions {
        display: none !important;
    }

    .dash-widget-header {
        padding: 6pt 8pt !important;
        border-bottom: 1px solid #ddd !important;
        background: #f8f8f8 !important;
    }

    .dash-widget-body {
        padding: 8pt !important;
    }

    /* Charts: constrain height on paper */
    .dash-widget canvas,
    .chart-card canvas {
        max-height: 200px !important;
    }

    /* Dashboard greeting/refresh - simplify */
    .dash-greeting {
        font-size: 14pt !important;
        margin-bottom: 8pt !important;
    }

    .dash-refresh-timestamp {
        display: none !important;
    }

    /* ------------------------------------------
       12. Kanban columns: stack for print
       ------------------------------------------ */
    .kanban-board {
        display: block !important;
    }

    .kanban-column {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12pt !important;
        page-break-inside: avoid !important;
    }

    .kanban-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        margin-bottom: 4pt !important;
        background: #ffffff !important;
    }

    /* Hide kanban interactive elements */
    .kanban-wip-config,
    .kanban-column-add,
    .kanban-quick-status {
        display: none !important;
    }

    /* ------------------------------------------
       13. Calendar: simplify for print
       ------------------------------------------ */
    .calendar-grid {
        border: 1px solid #999 !important;
    }

    .calendar-cell {
        border: 1px solid #ccc !important;
        background: #ffffff !important;
    }

    /* ------------------------------------------
       14. Market data cards
       ------------------------------------------ */
    .market-card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    /* ------------------------------------------
       15. Activity log
       ------------------------------------------ */
    .activity-item {
        border-bottom: 1px solid #ddd !important;
        background: #ffffff !important;
    }

    /* ------------------------------------------
       16. Reports: ensure clean output
       ------------------------------------------ */
    .report-section {
        page-break-inside: avoid !important;
    }

    /* ------------------------------------------
       17. Remove focus outlines and scrollbars
       ------------------------------------------ */
    *:focus,
    *:focus-visible {
        outline: none !important;
    }

    ::-webkit-scrollbar {
        display: none !important;
    }

    * {
        scrollbar-width: none !important;
        overflow: visible !important;
    }

    /* Keep table overflow visible for layout */
    table,
    .table-wrapper {
        overflow: visible !important;
    }

    /* ------------------------------------------
       18. Page settings: margins, size, numbering
       ------------------------------------------ */
    @page {
        margin: 1.5cm 1.2cm;
        size: A4 landscape;

        @bottom-right {
            content: "Strona " counter(page) " z " counter(pages);
            font-size: 8pt;
            color: #999;
        }

        @bottom-left {
            content: "ImportPanel v5.0";
            font-size: 8pt;
            color: #999;
        }
    }

    @page :first {
        margin-top: 2cm;

        @top-center {
            content: "ImportPanel - Wydruk";
            font-size: 9pt;
            color: #666;
            font-weight: 600;
        }
    }
}

/* Loading spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.spinner-lg {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

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

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Smooth scroll for all scrollable containers */
.table-wrapper,
.modal-body,
.side-panel-body,
.changelog-list,
.kanban-cards,
.csv-error-list,
.activity-feed,
#app-content {
    scroll-behavior: smooth;
}

/* ============================================
   Reduced Motion - Accessibility
   Disable animations for users who prefer reduced motion
   ============================================ */
@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 !important;
    }

    #app-content.page-enter,
    #app-content.page-exit {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .empty-state-icon {
        animation: none !important;
    }

    .card,
    .stat-card,
    .fade-in {
        animation: none !important;
        animation-delay: 0ms !important;
    }

    .card:hover,
    .stat-card:hover {
        transform: none !important;
    }

    .btn::after {
        display: none !important;
    }

    .btn:active:not(:disabled) {
        transform: none !important;
    }

    button:active:not(:disabled) {
        transform: none !important;
    }

    .badge-pulse,
    .rate-dot-fresh,
    .activity-live-dot {
        animation: none !important;
    }

    .spinner {
        animation: none !important;
        border-top-color: var(--color-primary);
    }

    .skeleton-base {
        animation: none !important;
    }

    .shortcut-action-pill {
        transition: none !important;
    }

    .scroll-to-top,
    .scroll-top-btn {
        transition: none !important;
    }
}

/* ============================================
   Empty State - Enhanced Base Styling
   ============================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    margin: 0 auto;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 30, 58, 95), 0.08), rgba(var(--color-primary-rgb, 30, 58, 95), 0.16));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    animation: emptyStateFloat 3s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.empty-state-icon svg {
    width: 36px;
    height: 36px;
    color: var(--color-primary);
    opacity: 0.85;
}

.empty-state h3,
.empty-state .empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
    text-align: center;
}

.empty-state p,
.empty-state .empty-state-desc {
    font-size: 14px;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 auto 20px;
}

.empty-state .btn-primary,
.empty-state .empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.empty-state .btn-primary:hover,
.empty-state .empty-state-cta:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
}

@keyframes emptyStateFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ============================================
   Scroll Progress Indicator
   ============================================ */
.scroll-progress {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: transparent;
    z-index: 5;
    pointer-events: none;
}

.scroll-progress::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--scroll-progress, 0%);
    background-color: var(--color-primary);
    border-radius: 0 2px 2px 0;
    transition: width 80ms linear;
}

/* ============================================
   Card Hover Enhancement
   ============================================ */
.card:hover {
    transform: translateY(-1px);
}

/* ============================================
   Skip Navigation Link - Accessibility
   ============================================ */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary);
    color: #ffffff;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-radius: 0 0 var(--radius-md) 0;
    z-index: var(--z-max);
    transition: top 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* ============================================
   Focus-Visible - Keyboard Navigation
   Consistent 2px solid ring with 2px offset in primary color
   ============================================ */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure interactive elements get consistent focus rings */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

/* Input elements: inset focus ring via box-shadow (no outline offset) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(30, 58, 95, 0.2));
}

/* Tab elements in navigation */
.sidebar-nav-item:focus-visible,
.settings-tab:focus-visible,
.tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Close buttons */
.modal-close:focus-visible,
.toast-close:focus-visible,
.side-panel-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================
   Numeric & Transition Utilities
   ============================================ */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.number-transition {
    transition: color 200ms ease;
}

/* ============================================
   Loading Skeleton - Base Utility
   More subtle shimmer, lighter gradient, slower animation
   ============================================ */
.skeleton-base {
    background: linear-gradient(
        105deg,
        var(--color-surface-alt, #f0f0f0) 0%,
        var(--color-surface-alt, #f0f0f0) 35%,
        rgba(30, 58, 95, 0.02) 45%,
        var(--color-border-light, #e8eaf0) 50%,
        rgba(30, 58, 95, 0.02) 55%,
        var(--color-surface-alt, #f0f0f0) 65%,
        var(--color-surface-alt, #f0f0f0) 100%
    );
    background-size: 300% 100%;
    animation: shimmer 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text.skeleton-text--short {
    width: 60%;
}

.skeleton-text.skeleton-text--medium {
    width: 80%;
}

.skeleton-circle {
    border-radius: 50%;
}

@keyframes shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: -100% 50%; }
}

/* 404 Error Page */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    gap: 16px;
}
.error-page__code {
    font-size: 120px;
    font-weight: 800;
    color: var(--color-text-muted);
    line-height: 1;
    opacity: 0.3;
}
.error-page__text {
    font-size: 20px;
    color: var(--color-text-secondary);
}