:root {
    /* === Base === */
    --base-font-size: 14px;
    --base-color: #111;
    --base-border-radius: 3px;
    --brand-primary: #0F2751;

    /* === Tabler overrides === */
    --tblr-primary: #0F2751;
    --tblr-primary-rgb: 15, 39, 81;
    --tblr-body-color: #111;
    --tblr-border-radius: 3px;
    --tblr-border-radius-sm: 2px;
    --tblr-border-radius-lg: 4px;

    /* === Status Colors === */
    --status-critical: #A20101;
    --status-critical-lt: #FDEAEA;
    --status-high: #A56418;
    --status-high-lt: #FDF4E8;
    --status-medium: #275082;
    --status-medium-lt: #EAF0F7;
    --status-low: #47566F;
    --status-low-lt: #ECEEF1;
    --status-success: #037605;
    --status-success-lt: #E6F4E6;
    --status-neutral: #626D7D;
    --status-neutral-lt: #EDEFF2;

    /* === Scan Widget === */
    --scan-widget-bg: rgba(255, 255, 255, 0.1);
    --scan-widget-border: rgba(255, 255, 255, 0.2);
    --scan-widget-text: white;
    --scan-widget-text-muted: rgba(255, 255, 255, 0.8);

    /* === Stat Cards (Preline style) === */
    --stat-text-value: #111827;
    --stat-text-label: #6b7280;
    --stat-text-muted: #9ca3af;
    --stat-border: #e5e7eb;
    --stat-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

html {
    font-size: var(--base-font-size);
}

body {
    color: var(--base-color);
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--base-color);
}

h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--base-color);
}

h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--base-color);
}

/* === Buttons === */
.btn .icon,
.btn .ti {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* Table buttons - compact icons, no margin */
.table .btn .icon,
.table .btn .ti {
    width: 14px;
    height: 14px;
    font-size: 14px;
    margin-right: 0;
}

/* === Page Header === */
.page-header {
    padding: 2rem 0;
}

.page-header .page-title {
    color: var(--base-color);
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.page-header .page-subtitle {
    color: var(--tblr-secondary-color);
    margin-top: 0.25rem;
    font-size: 0.875rem;
}


.priority-CRITICAL { color: var(--status-critical); font-weight: bold; }
.priority-HIGH { color: var(--status-high); }
.priority-MEDIUM { color: var(--status-medium); }
.priority-LOW { color: var(--status-low); }


/* Scan Status Widget in Navbar */
.scan-status-widget {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    min-width: 280px;
    max-width: 360px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.scan-status-widget.scan-status-running {
    border-color: var(--status-high);
    background: var(--status-high-lt);
}

.scan-status-widget.scan-status-error {
    border-color: var(--status-critical);
    background: var(--status-critical-lt);
}

.scan-status-widget .status-dot {
    width: 8px;
    height: 8px;
    margin-right: 0.625rem;
    flex-shrink: 0;
}

.scan-status-widget.scan-status-running .status-dot {
    background-color: var(--status-high);
}

.scan-status-widget.scan-status-error .status-dot {
    background-color: var(--status-critical);
}

.scan-status-progress {
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
    flex: 1;
}

.scan-status-progress-bar {
    height: 100%;
    background: var(--status-high);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.scan-status-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tblr-body-color);
    line-height: 1.3;
}

.scan-status-details {
    font-size: 0.6875rem;
    color: var(--tblr-secondary);
    line-height: 1.3;
}

.scan-status-widget .btn-resume {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.resume-scan-btn {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--tblr-primary);
    color: white;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
}

:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
}

.btn-icon:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
}

/* === Table Overrides === */
.table {
    --tblr-table-color: var(--base-color);
    font-size: 13px;
}

.table thead th,
.markdown > table thead th {
    background: #1F2937;
    color: white;
    font-weight: 500;
}

/* Row with errors - left border instead of yellow background */
.table tr.table-warning {
    --tblr-table-bg: transparent;
}
.table tr.row-has-errors {
    position: relative;
}
.table tr.row-has-errors > td:first-child {
    box-shadow: inset 4px 0 0 var(--status-critical);
}

/* Hover states */
.table-hover tbody tr:hover,
tr.cursor-pointer:hover {
    cursor: pointer;
    background-color: var(--tblr-bg-surface-secondary);
}
.table-hover tbody tr.row-has-errors:hover {
    background-color: color-mix(in srgb, var(--status-critical) 4%, white);
}

/* Numeric columns */
.table .col-numeric {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 12px;
}
.table .col-sku {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
}
.table .col-id {
    font-variant-numeric: tabular-nums;
    color: var(--stat-text-label);
    font-size: 12px;
}
.table .col-name {
    font-size: 12px;
}
.table .col-brand {
    font-size: 12px;
}

/* Action column - arrow like D1 */
.table .btn-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--stat-text-muted);
    background: transparent;
    border: none;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.table .btn-row-action:hover {
    color: var(--tblr-primary);
    background: var(--tblr-bg-surface-secondary);
}
.table .btn-row-action .ti {
    font-size: 18px;
    transition: transform 0.15s ease;
}
.table tr:hover .btn-row-action .ti {
    transform: translateX(2px);
}

/* =============================================================================
   Badge System
   ============================================================================= */

.badge {
    padding: 0.25em 0.65em;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 10rem;
}

.badge.status-critical { background-color: var(--status-critical-lt); color: var(--status-critical); }
.badge.status-high { background-color: var(--status-high-lt); color: var(--status-high); }
.badge.status-medium { background-color: var(--status-medium-lt); color: var(--status-medium); }
.badge.status-low { background-color: var(--status-low-lt); color: var(--status-low); }
.badge.status-success { background-color: var(--status-success-lt); color: var(--status-success); }
.badge.status-neutral { background-color: var(--status-neutral-lt); color: var(--status-neutral); }

/* Outline variants (secondary status indicators) */
.badge.status-outline-success { background-color: transparent; color: var(--status-success); border: 1px solid currentColor; }
.badge.status-outline-neutral { background-color: transparent; color: var(--tblr-secondary); border: 1px solid var(--tblr-border-color); }

/* =============================================================================
   Alert Variants
   ============================================================================= */

.alert-critical { background-color: var(--status-critical-lt); border-color: var(--status-critical); color: var(--status-critical); }
.alert-high { background-color: var(--status-high-lt); border-color: var(--status-high); color: var(--status-high); }
.alert-medium { background-color: var(--status-medium-lt); border-color: var(--status-medium); color: var(--status-medium); }
.alert-low { background-color: var(--status-low-lt); border-color: var(--status-low); color: var(--status-low); }
.alert-success { background-color: var(--status-success-lt); border-color: var(--status-success); color: var(--status-success); }
.alert-neutral { background-color: var(--status-neutral-lt); border-color: var(--status-neutral); color: var(--status-neutral); }

/* Alert icon spacing */
.alert .alert-icon {
    margin-right: 0.75rem;
}

/* =============================================================================
   Text Color Utilities
   ============================================================================= */

.text-status-critical { color: var(--status-critical); }
.text-status-high { color: var(--status-high); }
.text-status-medium { color: var(--status-medium); }
.text-status-low { color: var(--status-low); }
.text-status-success { color: var(--status-success); }
.text-status-neutral { color: var(--status-neutral); }

/* =============================================================================
   Badge Dots (for priority indicators)
   ============================================================================= */

.badge-dot.status-critical { background-color: var(--status-critical); }
.badge-dot.status-high { background-color: var(--status-high); }
.badge-dot.status-medium { background-color: var(--status-medium); }
.badge-dot.status-low { background-color: var(--status-low); }
.badge-dot.status-success { background-color: var(--status-success); }
.badge-dot.status-neutral { background-color: var(--status-neutral); }

/* =============================================================================
   Form Improvements
   ============================================================================= */

/* Better disabled state visibility */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--tblr-bg-surface-secondary);
    opacity: 0.7;
}

/* Required field indicator */
.form-label.required::after {
    content: " *";
    color: var(--tblr-red);
}

/* =============================================================================
   Card Enhancements
   ============================================================================= */

/* Card with loading state */
.card.is-loading {
    position: relative;
    pointer-events: none;
}

.card.is-loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

/* =============================================================================
   Animation Utilities
   ============================================================================= */

/* Rotating icon for loading states */
.icon.rotate {
    animation: rotate 1s linear infinite;
}

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

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* =============================================================================
   Settings Page - Drag & Drop Zone
   ============================================================================= */

/* Drag and drop file upload zone */
.drop-zone {
    border: 2px dashed var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary);
    transition: all 0.3s ease;
    cursor: pointer;
}

.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
}

.drop-zone.bg-light-darker {
    background: var(--tblr-bg-surface-tertiary);
    border-color: var(--tblr-primary);
}

#drop-zone {
    border: 2px dashed var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary);
    transition: all 0.3s ease;
    cursor: pointer;
}

#drop-zone:hover,
#drop-zone.drag-over {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
}

#drop-zone.bg-light-darker {
    background: var(--tblr-bg-surface-tertiary);
    border-color: var(--tblr-primary);
}

.progress-bar-indeterminate {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

.btn-ghost-danger {
    color: var(--tblr-danger);
    background: transparent;
    border: none;
}

.btn-ghost-danger:hover {
    color: white;
    background: var(--tblr-danger);
}

.btn-ghost-danger:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-danger-rgb), 0.25);
}

/* =============================================================================
   Table Action Buttons
   ============================================================================= */

/* Destructive action hover */
.btn-danger-subtle:hover {
    color: var(--tblr-danger);
    border-color: var(--tblr-danger);
}

/* Warning action hover */
.btn-warning-subtle:hover {
    color: var(--tblr-warning);
    border-color: var(--tblr-warning);
}

.spinner {
    animation: rotate 2s linear infinite;
}


.empty {
    padding: 3rem 0;
    text-align: center;
}

.empty-icon {
    margin-bottom: 1rem;
    color: var(--tblr-secondary);
}

.empty-icon .icon {
    width: 3rem;
    height: 3rem;
}

.empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.empty-subtitle {
    color: var(--tblr-secondary);
}

.file-checkbox {
    cursor: pointer;
}

.nav-tabs .icon {
    vertical-align: -0.125em;
}

.page-header-text {
    margin-top: 0.25rem;
}

.card-table tbody tr:last-child td {
    border-bottom: 0;
}

.icon-lg {
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
}

.icon-xl {
    width: 4rem;
    height: 4rem;
    font-size: 4rem;
}


/* =============================================================================
   Stat Card System (Preline Style)
   ============================================================================= */

.stat-card {
    border: 1px solid var(--stat-border);
    box-shadow: var(--stat-shadow);
    border-radius: 8px;
}

.stat-card .card-body {
    padding: 20px;
}

.stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--stat-text-label);
    line-height: 1.2;
}

.stat-value {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--stat-text-value);
}

.stat-value-lg {
    font-size: 36px;
}

.stat-value-sm {
    font-size: 24px;
}

.stat-meta {
    font-size: 13px;
    font-weight: 400;
    color: var(--stat-text-label);
}

.stat-icon-outline {
    color: var(--stat-text-muted);
    font-size: 20px;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    font-weight: 500;
}

.stat-trend-up {
    color: var(--status-success);
}

.stat-trend-down {
    color: var(--status-critical);
}

.stat-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.stat-detail-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--stat-text-label);
}

.stat-detail-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--stat-text-value);
}

.stat-header {
    margin-bottom: 3px;
}

.stat-icon-priority {
    font-size: 20px;
}

.stat-problem-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--stat-text-value);
    margin-bottom: 10px;
}

.stat-badge-container {
    margin-top: 7px;
    margin-bottom: 10px;
}

.stat-icon-critical { color: var(--status-critical); }
.stat-icon-high { color: var(--status-high); }
.stat-icon-medium { color: var(--status-medium); }
.stat-icon-low { color: var(--status-low); }
.stat-icon-success { color: var(--status-success); }

.stat-inline .stat-value-sm {
    margin-bottom: 3px;
}

.stat-inline .stat-label {
    font-weight: 400;
}

/* Details/Summary for collapsible sections */
.card-header .card-subtitle {
    font-size: 12px;
}

details.card > summary.card-header {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

details.card > summary.card-header::-webkit-details-marker {
    display: none;
}

details.card > summary.card-header::after {
    content: '';
    width: 1rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7a91' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
    transition: transform 0.2s;
}

details.card[open] > summary.card-header::after {
    transform: rotate(180deg);
}

/* === Error Grid List (D1 with collapsible groups) === */
.error-priority-summary {
    font-size: 12px;
    font-weight: 500;
}
.error-grid-list {
    border: 1px solid var(--stat-border, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
}
.error-grid-item {
    display: grid;
    grid-template-columns: 4px minmax(200px, 300px) 1fr 75px 28px;
    align-items: center;
    background: white;
    text-decoration: none !important;
    color: inherit;
    border-bottom: 1px solid var(--stat-border, #e5e7eb);
    transition: background 0.15s ease;
}
.error-grid-item:last-child {
    border-bottom: none;
}
.error-grid-item:hover {
    background: #fafbfc;
    text-decoration: none !important;
}
.error-grid-item:has(.error-grid-bar.critical):hover {
    background: color-mix(in srgb, var(--status-critical) 6%, white);
}
.error-grid-item:has(.error-grid-bar.high):hover {
    background: color-mix(in srgb, var(--status-high) 6%, white);
}
.error-grid-item:has(.error-grid-bar.medium):hover {
    background: color-mix(in srgb, var(--status-medium) 6%, white);
}
.error-grid-item:has(.error-grid-bar.low):hover {
    background: color-mix(in srgb, var(--status-low) 6%, white);
}
.error-grid-item:hover .error-grid-arrow {
    color: var(--tblr-primary);
    transform: translateX(2px);
}
.error-grid-item:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: -2px;
    z-index: 1;
    background: #fafbfc;
}
.error-grid-bar {
    height: 100%;
    align-self: stretch;
}
.error-grid-bar.critical { background: var(--status-critical); }
.error-grid-bar.high { background: var(--status-high); }
.error-grid-bar.medium { background: var(--status-medium); }
.error-grid-bar.low { background: var(--status-low); }

.error-grid-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--stat-text-value);
    padding: 11px 12px;
    line-height: 1.3;
}
.error-grid-desc {
    font-size: 12px;
    color: var(--stat-text-label);
    padding: 11px 16px 11px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.error-grid-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--stat-text-value);
    text-align: right;
    padding: 11px 4px 11px 8px;
    font-variant-numeric: tabular-nums;
}
.error-grid-arrow {
    color: var(--stat-text-muted);
    padding: 11px 12px 11px 4px;
    font-size: 16px;
    transition: all 0.15s ease;
}

/* Collapsible groups */
.error-group {
    border-bottom: 1px solid var(--stat-border, #e5e7eb);
}
.error-group:last-child {
    border-bottom: none;
}
.error-group > summary {
    cursor: pointer;
    list-style: none;
}
.error-group > summary::-webkit-details-marker {
    display: none;
}
.error-group-header {
    display: flex;
    align-items: center;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--stat-border, #e5e7eb);
    user-select: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.error-group-header:hover {
    filter: brightness(0.95);
}
.error-group-header:hover .error-group-chevron {
    opacity: 1;
}
.error-group-header.critical {
    background: color-mix(in srgb, var(--status-critical) 6%, white);
    color: var(--status-critical);
}
.error-group-header.high {
    background: color-mix(in srgb, var(--status-high) 6%, white);
    color: var(--status-high);
}
.error-group-header.medium {
    background: color-mix(in srgb, var(--status-medium) 6%, white);
    color: var(--status-medium);
}
.error-group-header.low {
    background: color-mix(in srgb, var(--status-low) 6%, white);
    color: var(--status-low);
}
.error-group-count {
    margin-left: auto;
    font-weight: 700;
    opacity: 0.8;
}
.error-group-chevron {
    margin-right: 6px;
    font-size: 16px;
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.15s ease;
}
.error-group[open] .error-group-chevron {
    transform: rotate(90deg);
}
.error-group-content .error-grid-item:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .error-grid-desc {
        display: none;
    }
    .error-grid-item {
        grid-template-columns: 4px 1fr 75px 28px;
    }
}

@media print {
    .scan-status-widget,
    .toast-container,
    .btn-list {
        display: none !important;
    }

    .card {
        border: 1px solid #dee2e6 !important;
        box-shadow: none !important;
    }
}