/**
 * Custom CSS for Kommune Data Search Application
 */

/* Font loaded via HTML <link> for better performance */

:root {
    /* Default Light Theme - These will be overridden by themes.js */
    --bs-body-bg: #f8fafc; /* Slate-50 */
    --bs-body-color: #0f172a; /* Slate-900 */
    --card-bg: #ffffff;
    /* Replace standard Slate-200 with a translucent border for better blending */
    --card-border-color: rgba(0, 0, 0, 0.06);
    --bs-primary: #2563eb; /* Blue-600 - Modern Blue */
    --bs-primary-rgb: 37, 99, 235;
    --bs-secondary: #64748b; /* Slate-500 */
    --text-muted: #64748b;
    --navbar-bg: #ffffff;
    --navbar-text: #0f172a;
    --link-color: #2563eb;
    --mark-bg: rgba(250, 204, 21, 0.4); /* Yellow-400 at 40% - visible highlight */
    --mark-color: inherit;
    --card-title-color: #0f172a;
    --result-link-color: #1e293b;
    
    /* Design System */
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    
    /* 8px Spacing Grid System */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 2.5rem;    /* 40px */
    --space-8: 3rem;      /* 48px */
    --space-9: 4rem;      /* 64px */
    --space-10: 5rem;     /* 80px */
    
    /* Shadows */
    --shadow-subtle: 
        0 1px 2px 0 rgba(0, 0, 0, 0.02),
        0 2px 4px 0 rgba(0, 0, 0, 0.02);
        
    --shadow-card: 
        0 0 0 1px rgba(0, 0, 0, 0.03), /* The "Sub-pixel" border */
        0 2px 8px 0 rgba(0, 0, 0, 0.04),
        0 12px 24px -6px rgba(0, 0, 0, 0.06);
        
    --shadow-hover: 
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 8px 16px -4px rgba(0, 0, 0, 0.04),
        0 24px 48px -12px rgba(0, 0, 0, 0.08);

    /* Mapping old shadows to new system for compatibility */
    --shadow-sm: var(--shadow-subtle);
    --shadow-md: var(--shadow-card);
    --shadow-lg: var(--shadow-hover);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.07), 0 8px 10px -6px rgb(0 0 0 / 0.07);
    
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Body and Layout */
html {
    overflow-y: scroll;
}

body.modal-open,
body.offcanvas-open {
    padding-right: 0 !important;
    overflow: auto !important;
}

body.modal-open .sticky-top,
body.offcanvas-open .sticky-top {
    padding-right: 0 !important;
}

/* Prevent Bootstrap from adding padding when offcanvas opens */
body {
    padding-right: 0 !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 16px;
    line-height: 1.65;
    /* Enable Inter's "Swiss" features */
    /* cv05: lowercase 'l' with tail (distinguishable from I) */
    /* cv11: Single-story 'a' (cleaner, more geometric) */
    /* ss01: Alternate digits (optional, but often cleaner) */
    font-feature-settings: "cv05", "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .card-title, .display-title {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.025em; /* Tighter tracking for that "headline" feel */
    font-weight: 600;
    color: #111827; /* Almost black, but not quite (Gray-900) */
}

h1 { font-size: 1.75rem; font-weight: 600; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 500; }
h5 { font-size: 1rem; font-weight: 500; }
h6 { font-size: 0.875rem; font-weight: 500; }

/* Utility class for headings */
.heading-sans {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em;
}

/* Navbar */
.navbar {
    box-shadow: none;
    background-color: transparent !important;
    padding: 0;
    min-height: auto;
    border-bottom: none;
    position: relative;
    z-index: 1030; /* Above sticky search bar (1000), below offcanvas (1045) */
}

.navbar > .container-fluid {
    min-height: auto;
    padding: 0;
}

/* Navbar content alignment - matches card edge */
.navbar-content {
    /* px-3 (1rem) */
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .navbar-content {
        /* px-md-4 (1.5rem) */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.navbar-brand {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    color: var(--bs-body-color) !important;
}

.navbar-brand svg {
    opacity: 0.9;
}

.navbar-brand, .navbar-text, .navbar .nav-link {
    color: var(--navbar-text, var(--bs-body-color)) !important;
}

.navbar .btn-outline-secondary {
    border-color: var(--card-border-color);
    color: var(--text-muted);
    border-radius: var(--border-radius-md);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all var(--transition-fast);
}

.navbar .btn-outline-secondary:hover {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    transform: translateY(-1px);
}

/* Icon buttons in navbar - better touch targets */
.navbar .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--border-radius-md);
    opacity: 0.85;
    transition: all var(--transition-fast);
    background: transparent;
    border: none;
    color: var(--navbar-text, var(--text-muted)) !important;
}

.navbar .btn-icon:hover {
    opacity: 1;
    background-color: var(--bs-body-bg);
    color: var(--bs-primary) !important;
}

.navbar .doc-count {
    font-size: 0.8125rem;
    opacity: 0.75;
    color: var(--text-muted) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Navbar Overflow Dropdown */
.navbar .dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-lg);
    padding: var(--space-2);
    min-width: 200px;
    margin-top: var(--space-2);
    z-index: 1030; /* Above sticky search (1000) */
}

.navbar .dropdown {
    position: relative;
    z-index: 1030;
}

.navbar .dropdown-item {
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
    color: var(--bs-body-color);
    transition: all var(--transition-fast);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

.navbar .dropdown-item i {
    width: 18px;
    font-size: 1rem;
}

.navbar .dropdown-item kbd {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--card-border-color);
    border-radius: 4px;
    color: var(--text-muted);
}

.navbar .dropdown-divider {
    border-color: var(--card-border-color);
    opacity: 0.5;
}

/* Search Input */
#searchInput {
    border: none;
    font-size: 1.125rem;
    font-weight: 400;
    background-color: transparent;
    color: var(--bs-body-color);
    padding: 1rem 1.25rem;
    transition: all var(--transition-fast);
    border-radius: var(--border-radius-md);
    letter-spacing: -0.006em; /* Match body text */
}

#searchInput:focus {
    box-shadow: none;
    outline: none;
}

#searchInput::placeholder {
    color: var(--text-muted);
    opacity: 0.65;
    font-weight: 400;
}

#searchInput:focus {
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.07);
    border-color: var(--bs-primary);
    background-color: var(--card-bg);
    outline: none;
}

.input-group-text {
    border: 1px solid var(--card-border-color);
    border-right: none;
    background-color: var(--bs-body-bg);
    color: var(--text-muted);
    padding: 0 1.25rem;
}

.input-group-text i {
    font-size: 1.1rem;
    opacity: 0.6;
}

#searchInput:focus ~ .input-group-text,
.input-group:focus-within .input-group-text {
    border-color: var(--bs-primary);
    background-color: var(--card-bg);
}

/* Search Card Wrapper */
/* Styles handled in .sticky-search block above */

.sticky-search .input-group-lg > .form-control {
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

/* Result Cards */
.result-card {
    border: none; /* Remove the solid border */
    box-shadow: var(--shadow-card);
    background-color: var(--card-bg);
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--space-5); /* 24px - proper breathing room */
    overflow: hidden;
    position: relative;
}

.result-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover) !important;
}

.result-card .card-body {
    padding: 2rem; /* 32px - Significant increase from standard Bootstrap */
}

/* Separate meta-data from title */
.result-card .card-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--card-title-color, var(--bs-body-color));
    line-height: 1.4;
    margin-bottom: 1rem; /* 16px */
    letter-spacing: -0.02em;
}

.result-card .card-title a {
    color: var(--result-link-color, var(--bs-body-color)) !important;
    transition: color var(--transition-fast);
}

.result-card .card-title a:hover {
    color: var(--bs-primary) !important;
}

/* Result card elements - theme aware */
.result-kommune {
    color: var(--bs-body-color);
}

.result-title-link {
    color: var(--result-link-color, var(--bs-body-color)) !important;
    transition: color var(--transition-fast);
}

.result-title-link:hover {
    color: var(--bs-primary) !important;
}

/* Result badge - clean, readable on all themes */
.result-badge {
    font-weight: 500;
    padding: 0.35em 0.75em;
    font-size: 0.75rem;
    border-radius: 6px;
}

.result-badge.bg-info { 
    background-color: rgba(59, 130, 246, 0.15) !important; 
    color: #3b82f6 !important; 
}
.result-badge.bg-warning { 
    background-color: rgba(245, 158, 11, 0.15) !important; 
    color: #d97706 !important; 
}
.result-badge.bg-success { 
    background-color: rgba(34, 197, 94, 0.15) !important; 
    color: #16a34a !important; 
}
.result-badge.bg-danger { 
    background-color: rgba(239, 68, 68, 0.15) !important; 
    color: #dc2626 !important; 
}
.result-badge.bg-primary { 
    background-color: rgba(var(--bs-primary-rgb), 0.15) !important; 
    color: var(--bs-primary) !important;
}
.result-badge.bg-secondary { 
    background-color: rgba(100, 116, 139, 0.15) !important; 
    color: #64748b !important;
}
.result-badge.bg-dark { 
    background-color: rgba(55, 65, 81, 0.15) !important; 
    color: #4b5563 !important;
}

.result-card .card-title mark {
    background-color: var(--mark-bg);
    color: var(--mark-color);
    padding: 0;
    border-radius: 2px;
    font-weight: inherit;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.result-card .card-subtitle {
    font-size: 0.875rem;
    letter-spacing: 0;
}

.result-card .result-meta,
.result-card .pdf-excerpt,
.result-card .card-footer,
.result-card .badge {
    position: relative;
    z-index: 2;
}

/* Subtle left accent - removed for cleaner look */
.result-card::before {
    display: none;
}

/* Result Meta */
.result-meta {
    font-size: 0.875rem;
    color: #374151; /* Gray-700 - High contrast but not harsh */
    line-height: 1.6;
    display: flex;
    gap: 1.5rem; /* 24px spacing between meta items */
}

p {
    line-height: 1.6; /* Relaxed reading */
    color: #374151; /* Gray-700 - High contrast but not harsh */
}

/* PDF Excerpt */
.pdf-excerpt {
    background-color: var(--bs-body-bg);
    border-left: 3px solid var(--bs-primary);
    padding: var(--space-4); /* 16px */
    border-radius: var(--border-radius-md);
    margin-top: var(--space-4); /* 16px */
    color: var(--bs-body-color);
    font-size: 0.9rem;
    line-height: 1.6;
}

.pdf-excerpt mark {
    background-color: var(--mark-bg);
    color: var(--mark-color);
    padding: 0;
    border-radius: 2px;
    font-weight: 500;
}

/* PDF Match Indicator - GDPR compliant, shows only that search matched */
.pdf-match-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.625rem;
    background-color: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border-radius: var(--border-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
}

.pdf-match-indicator i {
    font-size: 0.875rem;
}

/* PDF indicator - always red */
.pdf-indicator {
    color: #dc2626;
}

.pdf-indicator .pdf-match-check {
    color: #16a34a;
    font-size: 0.6875rem;
    margin-left: 0.25rem;
    vertical-align: middle;
    position: relative;
    top: -0.5px;
    animation: pdf-match-pulse 1.5s ease-out;
}

@keyframes pdf-match-pulse {
    0% {
        opacity: 0;
        transform: scale(0.5);
        filter: drop-shadow(0 0 6px rgba(22, 163, 74, 0.8));
    }
    30% {
        opacity: 1;
        transform: scale(1.3);
        filter: drop-shadow(0 0 8px rgba(22, 163, 74, 0.6));
    }
    60% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(22, 163, 74, 0.4));
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 0 transparent);
    }
}

/* Case Title Excerpt - shown when search matches case_title but not title */
.case-title-excerpt {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bs-body-bg);
    border-radius: var(--border-radius-sm);
    font-size: 0.875rem;
    line-height: 1.5;
}

.case-title-label {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.case-title-text {
    color: var(--bs-body-color);
}

.case-title-excerpt mark {
    background-color: var(--mark-bg);
    color: var(--mark-color);
    padding: 0;
    border-radius: 2px;
    font-weight: 500;
}

/* Company Info - displayed when entry has company match */
.company-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.company-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background-color: var(--bs-body-bg);
    border-radius: var(--border-radius-sm);
    font-size: 0.8125rem;
    text-decoration: none;
    color: var(--bs-body-color);
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
}

.company-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    border-color: rgba(var(--bs-primary-rgb), 0.2);
    color: var(--bs-primary);
}

.company-link i {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.company-link:hover i {
    color: var(--bs-primary);
}

.company-name {
    font-weight: 500;
}

.company-role-badge {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    margin-left: 0.25rem;
}

.company-role-badge.sender {
    background-color: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.company-role-badge.recipient {
    background-color: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

/* Dark mode adjustments for company info */
[data-theme="dark"] .company-link {
    background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .company-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}

[data-theme="dark"] .company-role-badge.sender {
    background-color: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}

[data-theme="dark"] .company-role-badge.recipient {
    background-color: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

/* Company Viewer Offcanvas */
.company-viewer-offcanvas {
    width: 500px !important;
    max-width: 90vw;
}

.company-viewer-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--card-border-color);
    padding: 1rem 1.25rem;
}

.company-viewer-offcanvas .offcanvas-title {
    font-size: 1rem;
    display: flex;
    align-items: center;
}

#companyViewerName {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.company-viewer-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--card-bg);
    z-index: 1;
}

.company-viewer-loading.d-none {
    display: none !important;
}

/* Company Viewer Error State */
.company-viewer-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

.company-viewer-error i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.company-viewer-error.d-none {
    display: none !important;
}

/* Company Viewer Content */
.company-viewer-content {
    padding: 1.25rem;
    overflow-y: auto;
    height: 100%;
}

.company-viewer-content.d-none {
    display: none !important;
}

.company-field {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--card-border-color);
    gap: 0.5rem;
}

.company-field:last-child {
    border-bottom: none;
}

.company-field-content {
    flex: 1;
    min-width: 0;
}

.company-field-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.company-field-value {
    font-size: 0.875rem;
    color: var(--bs-body-color);
    word-break: break-word;
}

.company-field-value a {
    color: var(--bs-primary);
    text-decoration: none;
}

.company-field-value a:hover {
    text-decoration: underline;
}

.company-field-copy {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.5;
    transition: all var(--transition-fast);
    padding: 0;
}

.company-field:hover .company-field-copy {
    opacity: 1;
}

.company-field-copy:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    opacity: 1;
}

.company-field-copy.copied {
    color: #16a34a;
    opacity: 1;
}

.company-field-copy i {
    font-size: 0.875rem;
}

/* Inline map for forretningsadresse */
.company-inline-map {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--card-border-color);
}

.company-inline-map .company-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.company-map-fullscreen {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.company-map-fullscreen:hover {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.company-map-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Inline map container (legacy - kept for compatibility) */
.company-map-container {
    margin-top: 0.5rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 1px solid var(--card-border-color);
}

.company-map-frame-wrapper {
    position: relative;
    min-height: 250px;
}

.company-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 1;
}

.company-map-frame {
    width: 100%;
    height: 250px;
    border: none;
    display: block;
}

/* Company section headers */
.company-section-header {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 2px solid var(--bs-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.company-section-header:first-child {
    margin-top: 0;
}

.company-section-header i {
    color: var(--bs-primary);
}

@media (max-width: 576px) {
    .company-viewer-offcanvas {
        width: 100% !important;
    }
}

/* Category Badges - Minimal & Clear */
.badge {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    letter-spacing: 0.01em;
    text-transform: none;
    border-radius: 6px;
}

.badge.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.625rem;
}

/* Softer badge colors for less visual noise */
.result-card .badge {
    font-weight: 500;
}

/* Filters Card */
.sticky-top {
    position: -webkit-sticky;
    position: sticky;
}

.card {
    background-color: var(--card-bg);
    border-color: var(--card-border-color);
}

.card-header {
    border-bottom: 1px solid var(--card-border-color);
    background-color: var(--card-bg) !important;
    color: var(--bs-body-color);
    padding: var(--space-4) var(--space-5); /* 16px 24px */
    font-weight: 600;
}

/* Form Controls */
.form-label {
    margin-bottom: var(--space-2); /* 8px */
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.form-select,
.form-control {
    font-size: 0.9rem;
    border-radius: var(--border-radius-md);
    background-color: var(--card-bg);
    border-color: var(--card-border-color);
    color: var(--bs-body-color);
    padding: var(--space-3) var(--space-4); /* 12px 16px */
    transition: all var(--transition-fast);
}

.form-select:focus,
.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.084);
}

.form-select:hover,
.form-control:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
}

/* Buttons */
.btn {
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
    font-weight: 500;
    font-size: 0.875rem;
    padding: var(--space-2) var(--space-4); /* 8px 16px */
    letter-spacing: 0.01em;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.14);
}

.btn-primary:hover {
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.21);
}

.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.175);
}

.btn-outline-secondary {
    border-color: var(--card-border-color);
    color: var(--text-muted);
}

.btn-outline-secondary:hover {
    background-color: var(--bs-body-bg);
    border-color: var(--text-muted);
    color: var(--bs-body-color);
}

/* Pagination */
.pagination {
    margin-top: var(--space-8); /* 48px */
    gap: var(--space-1); /* 4px */
}

.page-link {
    color: var(--bs-primary);
    border-radius: var(--border-radius-md);
    margin: 0 var(--space-1); /* 4px */
    background-color: var(--card-bg);
    border-color: var(--card-border-color);
    font-weight: 500;
    padding: var(--space-2) var(--space-4); /* 8px 16px */
    transition: all var(--transition-fast);
}

.page-link:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    transform: translateY(-1px);
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.21);
}

.page-item.disabled .page-link {
    background-color: var(--bs-body-bg);
    border-color: var(--card-border-color);
    color: var(--text-muted);
    opacity: 0.6;
}

/* Loading Spinner */
#loadingSpinner {
    animation: fadeIn 0.3s ease;
}

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

.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Empty States */
#emptyState i,
#noResults i {
    font-size: 4rem;
    opacity: 0.3;
}

#emptyState,
#noResults {
    animation: fadeIn 0.5s ease;
}

/* Results Info Bar */
#resultsInfo {
    animation: slideDown 0.3s ease;
}

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

/* Modal */
.modal-content {
    border-radius: var(--border-radius-lg);
    /* Glass Material */
    background: rgba(255, 255, 255, 0.85) !important; /* High transparency */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* The "Glass Edge" */
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.5), /* Inner light */
        0 4px 24px -1px rgba(0, 0, 0, 0.1); /* Deep shadow */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Physical border */
    color: var(--bs-body-color);
    overflow: hidden;
}

.modal-header {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--card-border-color);
    color: var(--bs-body-color);
    padding: var(--space-4) var(--space-5); /* 16px 24px */
}

.modal-header .modal-title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
}

.modal-body {
    padding: var(--space-5); /* 24px */
}

.modal-footer {
    border-top: 1px solid var(--card-border-color);
    padding: var(--space-4) var(--space-5); /* 16px 24px */
}

.modal-backdrop.show {
    opacity: 0.5;
    backdrop-filter: blur(2px);
}

.btn-close {
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.btn-close:hover {
    opacity: 1;
}

/* Hover Effects */
.hover-shadow {
    transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.105) !important;
}

/* Badge Colors */
.badge.bg-info { 
    background-color: rgba(59, 130, 246, 0.12) !important; 
    color: #1d4ed8 !important; 
}
.badge.bg-warning { 
    background-color: rgba(245, 158, 11, 0.12) !important; 
    color: #b45309 !important; 
}
.badge.bg-success { 
    background-color: rgba(34, 197, 94, 0.12) !important; 
    color: #15803d !important; 
}
.badge.bg-danger { 
    background-color: rgba(239, 68, 68, 0.12) !important; 
    color: #b91c1c !important; 
}
.badge.bg-primary { 
    background-color: rgba(var(--bs-primary-rgb), 0.12) !important; 
    color: var(--bs-primary) !important;
}
.badge.bg-secondary { 
    background-color: rgba(100, 116, 139, 0.12) !important; 
    color: #475569 !important;
}
.badge.bg-dark { 
    background-color: rgba(55, 65, 81, 0.12) !important; 
    color: #1f2937 !important;
}

/* Search Help Text */
#searchHelp {
    font-size: 0.85rem;
    color: var(--text-muted);
}


/* Stats Cards in Modal */
.modal-body .card {
    border: none;
    background-color: var(--bs-body-bg);
}

/* Keyword Pills */
.keyword-pill {
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--card-border-color);
    color: var(--text-muted);
    background-color: var(--card-bg);
    border-radius: 6px;
    padding: var(--space-2) var(--space-3); /* 8px 12px */
    font-size: 0.8125rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    user-select: none;
    gap: var(--space-2); /* 8px */
}

.keyword-pill:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.25);
}

.keyword-pill .badge {
    background-color: var(--bs-body-bg);
    color: var(--text-muted);
    border-radius: 4px;
    font-weight: 600;
    min-width: 20px;
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
}

.keyword-pill:hover .badge {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

/* Active/Selected state - clear and visible */
.keyword-pill.active {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.245);
}

.keyword-pill.active .badge {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Delete button - harmonious, not jarring red */
.keyword-pill .delete-btn {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background-color: transparent;
    color: var(--text-muted);
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all var(--transition-fast);
    opacity: 0.5;
    margin-left: 0.125rem;
}

.keyword-pill .delete-btn:hover {
    opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
}

.keyword-pill.active .delete-btn {
    color: white;
    opacity: 0.7;
}

.keyword-pill.active .delete-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Negative Keyword Pill - Softer red for exclusion */
.keyword-pill.negative {
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.08);
}

.keyword-pill.negative:hover {
    background-color: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.4);
}

.keyword-pill.negative.active {
    background-color: #ef4444;
    color: white;
    border-color: #ef4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.21);
}

.keyword-pill.negative .badge {
    background-color: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.keyword-pill.negative.active .badge {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
}

.keyword-pill.negative .delete-btn {
    color: #ef4444;
}

.keyword-pill.negative .delete-btn:hover {
    background-color: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

.keyword-pill.negative.active .delete-btn {
    color: white;
    opacity: 0.7;
}

.keyword-pill.negative.active .delete-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Prevent layout shift */
#resultsContainer {
    min-height: 200px;
}

/* Sticky Search Bar */
.sticky-search {
    position: -webkit-sticky;
    position: sticky;
    top: var(--space-4); /* 16px */
    z-index: 1000;
    margin-bottom: var(--space-4); /* 16px */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.sticky-search.is-hidden {
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
}

/* Scrolled state - adds subtle depth */
.sticky-search.is-scrolled .card {
    border-color: transparent;
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.06);
}

.sticky-search .card {
    border-radius: 16px;
    /* Glass Material */
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    
    /* The "Glass Edge" */
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.5), /* Inner light */
        0 4px 24px -1px rgba(0, 0, 0, 0.1); /* Deep shadow */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Physical border */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-search:focus-within .card {
    box-shadow: 
        0 0 0 2px var(--bs-primary),
        0 0 0 4px rgba(var(--bs-primary-rgb), 0.07),
        0 12px 32px rgba(0, 0, 0, 0.084);
}

.sticky-search .card-body {
    padding: var(--space-2) var(--space-4); /* 8px 16px */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .sticky-search {
        top: 0.5rem;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .sticky-search .card {
        border-radius: 12px;
    }

    .result-card .card-body {
        padding: 1.5rem; /* 24px */
    }
}

/* Large screen alignment */
@media (min-width: 1400px) {
    .navbar-inner {
        padding: 0 1rem;
    }
}

/* Card Footer */
.card-footer {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    color: var(--text-muted);
}

/* Scrollbar Styling */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bs-body-bg); }
::-webkit-scrollbar-thumb { background: var(--bs-secondary); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Focus Outline */
*:focus { outline: none; }

/* Link Styling */
a { text-decoration: none; color: var(--link-color); }
a:hover { text-decoration: none; color: var(--link-color); opacity: 0.8; }

/* Clear Search Button */
#clearSearch { border-left: none; }

/* Results Container Animation */
#resultsContainer { animation: fadeIn 0.5s ease; }

/* Info Badge in Navbar */
.navbar .badge { font-size: 0.9rem; font-weight: normal; }

/* Card Body Padding - Removed to avoid conflict with main definition */
/* .result-card .card-body { padding: 1.25rem; } */

/* Small Text in Cards */
.result-card .small { font-size: 0.875rem; }

/* Text Muted Color */
.text-muted { color: var(--text-muted) !important; }

/* Strong Text in Cards */
.result-card strong { font-weight: 600; }

/* Form Check Switch */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Button Group */
.btn-group .btn { font-size: 0.875rem; padding: 0.375rem 0.75rem; }

/* Alert Styling */
.alert { border-radius: 0.5rem; animation: fadeIn 0.3s ease; }

/* Mark Highlighting */
mark {
    background-color: var(--mark-bg);
    color: var(--mark-color);
    padding: 0.1em 0;
    margin: 0 -0.05em;
    border-radius: 2px;
    font-weight: inherit;
}

/* Filter Toggle Icon */
.filter-toggle-icon { transition: transform 0.3s ease; }
[aria-expanded="false"] .filter-toggle-icon { transform: rotate(180deg); }

/* Table Styles */
.table {
    color: var(--bs-body-color);
    border-color: var(--card-border-color);
}

.table > :not(caption) > * > * {
    background-color: var(--card-bg);
    color: var(--bs-body-color);
    border-color: var(--card-border-color);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Offcanvas Filters */
.offcanvas {
    /* Glass Material */
    background: rgba(255, 255, 255, 0.85) !important; /* High transparency */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    /* The "Glass Edge" */
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.5), /* Inner light */
        0 4px 24px -1px rgba(0, 0, 0, 0.1); /* Deep shadow */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Physical border */
    color: var(--bs-body-color);
    border-left: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.offcanvas-header {
    border-bottom: 1px solid var(--card-border-color);
    padding: var(--space-5) var(--space-5); /* 24px */
}

.offcanvas-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
}

.offcanvas-body {
    padding: var(--space-5); /* 24px */
}

/* Filter Toggle Button */
.filter-toggle-btn,
.filter-btn {
    border: 1px solid var(--card-border-color);
    background-color: var(--card-bg);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: var(--space-3) var(--space-4); /* 12px 16px */
    transition: all var(--transition-fast);
    border-radius: var(--border-radius-md);
}

.filter-toggle-btn:hover,
.filter-btn:hover {
    background-color: var(--bs-body-bg);
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.filter-btn .badge {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    margin-left: 0.25rem;
}

.filter-toggle-btn i,
.filter-btn i {
    font-size: 1rem;
    opacity: 0.8;
    transition: all var(--transition-fast);
}

/* Filter button active state */
.filter-btn.has-filters {
    border-color: var(--bs-primary);
    background-color: var(--card-bg);
    color: var(--bs-primary);
    box-shadow: inset 0 0 0 1px var(--bs-primary), 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.filter-btn.has-filters i {
    opacity: 1;
}

.filter-btn.has-filters:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* Empty State Hints */

/* Card Refinements */
.card {
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--card-border-color);
    box-shadow: var(--shadow-sm);
}

/* ======================================
   FINAL TOUCHES
   ====================================== */

/* Results Count Badge */
#resultsCount {
    background-color: var(--bs-primary) !important;
    color: white !important;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.5rem 0.875rem;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Copy Link Button - appears on card hover */
.copy-link-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--border-radius-sm);
    opacity: 0;
    transform: translateX(8px);
    transition: all 0.2s ease;
    cursor: pointer;
}

.result-card:hover .copy-link-btn {
    opacity: 1;
    transform: translateX(0);
}

.copy-link-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.copy-link-btn.copied {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.copy-link-btn i {
    font-size: 1rem;
}

/* Link Buttons (Åpne Sak) - Subtle, not garish green */
.btn-success,
.result-card .btn-success {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: white !important;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    font-weight: 500;
}

.btn-success:hover,
.result-card .btn-success:hover {
    opacity: 0.9;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Category badges - softer, more muted */
.result-card .badge.bg-primary,
.result-card .badge.bg-info,
.result-card .badge.bg-secondary {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: var(--bs-primary) !important;
    font-weight: 500;
}

/* Kommune badge - light and subtle */
.result-card .badge.bg-light {
    background-color: var(--bs-body-bg) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--card-border-color);
}

/* Loading State */
#loadingSpinner {
    padding: 4rem 0;
}

#loadingSpinner .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
    color: var(--bs-primary);
}

#loadingSpinner p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 1rem;
}

/* Results Info */
#resultsInfo {
    padding: var(--space-3) 0; /* 12px 0 */
}

#resultsCount {
    font-size: 0.8rem;
    padding: 0.5rem 0.875rem;
}

/* Smooth Page Transitions */
#resultsContainer,
#emptyState,
#noResults {
    animation: fadeInUp 0.4s ease;
}

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

/* PDF Excerpt */
.pdf-excerpt {
    background-color: rgba(var(--bs-primary-rgb), 0.04);
    border-left: 3px solid var(--bs-primary);
    padding: var(--space-4) var(--space-5); /* 16px 24px */
    border-radius: var(--border-radius-md);
    margin-top: var(--space-4); /* 16px */
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Result Meta */
.result-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.result-meta i {
    opacity: 0.7;
}

/* Card Footer */
.card-footer {
    font-size: 0.8rem;
    padding: var(--space-3) var(--space-5); /* 12px 24px */
    color: var(--text-muted);
    background-color: rgba(var(--bs-primary-rgb), 0.02);
    border-top: 1px solid var(--card-border-color);
}

/* Focus States - Accessibility */
:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* Selection Colors */
::selection {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    color: var(--bs-body-color);
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Container Max Width for Large Screens */
@media (min-width: 1600px) {
    .container-fluid {
        max-width: 1600px;
        margin: 0 auto;
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    .navbar {
        padding: 0;
    }
    
    .navbar-inner {
        padding: 0 0.75rem;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
    
    .navbar .btn-icon {
        width: 36px;
        height: 36px;
    }
    
    .navbar .btn-icon i {
        font-size: 1rem;
    }
    
    .sticky-search .card-body {
        padding: 0.875rem;
    }
    
    .result-card .card-body {
        padding: 1.5rem; /* 24px */
    }
    
    .result-card .card-title {
        font-size: 0.95rem;
    }
    
    .modal-dialog {
        margin: 0.5rem;
    }
    
    /* Keyword pills more compact on mobile */
    .keyword-pill {
        padding: 0.3125rem 0.625rem;
        font-size: 0.75rem;
    }
    
    .keyword-pill .badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.25rem;
    }
    
    /* Filter toggle button */
    .filter-toggle-btn {
        padding: 0.625rem 1rem;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .navbar-inner {
        padding: 0 0.5rem;
    }
    
    .navbar .gap-2 {
        gap: 0.375rem !important; /* Minimum for touch targets */
    }
    
    .navbar .btn-icon {
        width: 32px;
        height: 32px;
    }
    
    .navbar .btn-outline-light {
        padding: 0.375rem 0.625rem;
        font-size: 0.75rem;
    }
    
    .keyword-row {
        gap: 0.375rem;
    }
    
    .keyword-label {
        font-size: 0.625rem;
    }
}

/* Back to Top Button - positioned near content */
#backToTop {
    position: fixed;
    bottom: var(--space-6); /* 32px */
    /* Position relative to content area (max-width 960px centered) */
    right: calc(50% - 480px - 60px); /* Half of 960px + offset */
    width: var(--space-8); /* 48px */
    height: var(--space-8); /* 48px */
    z-index: 1050;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex !important; /* Override inline style for animation */
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Clickable only when visible */
    background-color: var(--bs-primary);
    border: none;
}

/* On smaller screens, keep it at edge */
@media (max-width: 1140px) {
    #backToTop {
        right: var(--space-4); /* 16px on smaller screens */
    }
}

#backToTop.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#backToTop:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
}

#backToTop i {
    font-size: 1.25rem;
}

/* Print Styles */
@media print {
    .navbar,
    .sticky-search,
    #paginationNav,
    .btn,
    .offcanvas {
        display: none !important;
    }
    
    .result-card {
        break-inside: avoid;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }
}

/* ======================================
   UTILITY CLASSES (replacing inline styles)
   ====================================== */

/* Brand text size */
.brand-text {
    font-size: 1.125rem;
    margin-left: 0.625rem;
}

/* Brand mark */
.brand-mark {
    width: 36px;
    height: 36px;
    background: var(--bs-primary);
    border-radius: 10px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.175);
}

.brand-mark svg {
    width: 20px;
    height: 20px;
}

/* LCX Logo Text Styling */
.brand-logo-text {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
    letter-spacing: -0.03em;
}

.brand-logo-text .brand-main {
    color: #000000;
}

.brand-logo-text .brand-bracket {
    color: #3b82f6;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.brand-logo-text .brand-main {
    transition: all 0.3s ease;
}

/* Hover effect - Subtle */
.navbar-brand:hover .brand-bracket {
    opacity: 1;
    color: #2563eb;
}

.navbar-brand:hover .brand-main {
    color: #1a1a1a;
}

/* Footer brand mark - smaller variant */
.brand-mark-small {
    width: 24px;
    height: 24px;
    background: var(--bs-primary);
    border-radius: 6px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(var(--bs-primary-rgb), 0.14);
}

.brand-mark-small svg {
    width: 14px;
    height: 14px;
}

/* Z-index utilities */
.z-5 {
    z-index: 5;
}

/* Search input padding for icon */
.search-input-padded {
    padding-left: 3rem !important;
}

/* Clear search button */
.clear-search-btn {
    text-decoration: none;
}

/* Hidden by default (JS will toggle) */
.d-none-initial {
    display: none;
}

/* Skeleton loading opacity variants */
.skeleton-fade-1 {
    opacity: 0.7;
}

.skeleton-fade-2 {
    opacity: 0.4;
}

/* State icon circle */
.state-icon-circle {
    width: 80px;
    height: 80px;
}

/* Constrained text width */
.text-constrained {
    max-width: 400px;
    margin: 0 auto;
}

/* Kommune buttons text size */
.btn-kommune-action {
    font-size: 0.8rem;
}

/* Kommune count badge */
.kommune-count-badge {
    background-color: var(--bs-body-bg);
    color: var(--text-muted);
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.btn-primary .kommune-count-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Kommune pills container */
.kommune-pills-scroll {
    max-height: 300px;
    overflow-y: auto;
}

/* PDF modal content */
.pdf-content-pre {
    white-space: pre-wrap;
    font-family: inherit;
}

/* Footer background */
.footer-bg {
    background-color: var(--card-bg);
    padding: var(--space-6) 0; /* 32px 0 */
}

/* ======================================
   KEYBOARD SHORTCUTS
   ====================================== */

/* Keyboard shortcut badge */
kbd, .keyboard-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--space-2);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--text-muted);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--card-border-color);
    border-radius: 4px;
    box-shadow: 0 1px 0 var(--card-border-color);
    white-space: nowrap;
}

/* Hide shortcut hint when input is focused */
#searchInput:focus ~ div .keyboard-shortcut,
#searchInput:not(:placeholder-shown) ~ div .keyboard-shortcut {
    display: none;
}

/* Shortcuts modal styles */
.shortcuts-list {
    padding: 0;
}

.shortcut-group {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--card-border-color);
}

.shortcut-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.shortcut-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.shortcut-description {
    color: var(--bs-body-color);
    font-size: 0.875rem;
}

.shortcut-item kbd {
    margin-left: var(--space-4);
}

/* Shortcut toast notification */
.shortcut-toast {
    position: fixed;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: var(--bs-body-color);
    color: var(--bs-body-bg);
    border-radius: var(--border-radius-lg);
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 1100;
    opacity: 0;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.shortcut-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
}

.toast-progress {
    height: 3px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
}

.toast-progress-bar {
    height: 100%;
    width: 100%;
    background-color: #60a5fa;
    transform-origin: right;
}

.shortcut-toast .toast-action-btn {
    background: rgba(96, 165, 250, 0.15);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 4px;
    color: #60a5fa;
    font-weight: 700;
    padding: 2px 8px;
    margin: 0;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.shortcut-toast .toast-action-btn:hover {
    background: rgba(96, 165, 250, 0.25);
    text-decoration: none;
    color: #93c5fd;
}

/* ======================================
   ACTIVE FILTERS SUMMARY BAR
   ====================================== */

.filter-summary {
    animation: fadeInUp 0.2s ease;
    margin-top: calc(-1 * var(--space-2));
}

.filter-summary-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

/* Embedded filter bar inside search card */
.search-card-filters {
    border-top: 1px solid var(--card-border-color);
    background: var(--card-bg);
    animation: filterBarSlideIn 0.2s ease;
    border-radius: 0 0 16px 16px; /* Match the card's border-radius */
}

@keyframes filterBarSlideIn {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 60px;
    }
}

.search-card-filters-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
}

.filter-summary-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

.filter-summary-label i {
    font-size: 0.75rem;
    opacity: 0.7;
}

.filter-summary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex-grow: 1;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25rem 0.625rem;
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border: none;
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-primary);
    transition: all var(--transition-fast);
}

.filter-tag-label {
    color: var(--bs-primary);
    opacity: 0.7;
    font-weight: 400;
}

.filter-tag-value {
    color: var(--bs-primary);
    font-weight: 600;
}

.filter-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--bs-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
    font-size: 0.625rem;
    opacity: 0.6;
}

.filter-tag-remove:hover {
    opacity: 1;
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.filter-summary-clear {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    margin-left: auto;
}

.filter-summary-clear:hover {
    background-color: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

.filter-summary-clear i {
    font-size: 0.625rem;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .brand-logo-text {
        font-size: 1.35rem;
    }
    
    .navbar-brand {
        gap: 0.75rem;
    }
    
    .filter-summary-inner,
    .search-card-filters-inner {
        padding: var(--space-2);
        gap: var(--space-2);
    }
    
    .filter-summary-label {
        font-size: 0.6875rem;
    }
    
    .filter-tag {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.5rem;
    }
    
    .filter-summary-clear {
        font-size: 0.6875rem;
        padding: var(--space-1) var(--space-2);
    }
    
    /* Don't force full-width on mobile, let it flow naturally */
    .filter-summary-tags {
        flex: 1;
        min-width: 0;
    }
}

/* Footer links */
.footer-link {
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--bs-primary) !important;
}

/* Small brand mark for footer */
.brand-mark-small {
    width: 24px;
    height: 24px;
    background: var(--bs-primary);
    border-radius: 6px;
    color: white;
    flex-shrink: 0;
}

.brand-mark-small svg {
    width: 14px;
    height: 14px;
}

/* ======================================
   THEME BROWSER MODAL STYLES
   ====================================== */

.theme-option {
    cursor: pointer;
    border-bottom: 1px solid var(--card-border-color);
    transition: background-color 0.15s;
}

.theme-option:hover {
    background-color: var(--bs-body-bg);
}

.theme-option:last-child {
    border-bottom: none;
}

.theme-swatch-container {
    width: 48px;
}

.theme-swatch-primary {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--card-border-color);
}

.theme-swatch-bg {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--card-border-color);
}

.theme-name {
    font-size: 0.875rem;
}

.theme-type {
    font-size: 0.75rem;
}

/* ======================================
   ENTERPRISE POLISH - FINAL LAYER
   ====================================== */

/* Premium Micro-interactions */
.result-card {
    will-change: transform, box-shadow;
}

.result-card:active {
    transform: translateY(0) scale(0.995);
    transition-duration: 50ms;
}

/* Button press feedback */
.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    transition-duration: 50ms;
}

/* Smooth icon transitions */
.bi {
    transition: transform var(--transition-fast);
}

.btn:hover .bi {
    transform: scale(1.05);
}

/* Premium input focus ring */
.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 
        0 0 0 3px rgba(var(--bs-primary-rgb), 0.08),
        inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Refined link underline animation */
.result-title-link {
    position: relative;
    text-decoration: none;
}

.result-title-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background-color: var(--bs-primary);
    transition: width var(--transition-base);
    border-radius: 1px;
}

.result-title-link:hover::after {
    width: 100%;
}

/* Navbar icon button ripple effect */
.btn-icon {
    position: relative;
    overflow: hidden;
}

.btn-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, var(--bs-primary) 10%, transparent 10.01%);
    transform: scale(10);
    opacity: 0;
    transition: transform 0.4s, opacity 0.4s;
}

.btn-icon:active::after {
    transform: scale(0);
    opacity: 0.1;
    transition: 0s;
}

/* Premium badge hover states */
.badge {
    transition: all var(--transition-fast);
}

.result-card .badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Smooth scroll indicator (progress bar) */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--bs-primary), rgba(var(--bs-primary-rgb), 0.6));
    z-index: 9999;
    transition: width 50ms linear;
}

/* Empty state illustration with floating animation */
.empty-state-illustration {
    transition: transform var(--transition-slow);
    animation: gentleFloat 4s ease-in-out infinite;
}

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

#emptyState:hover .empty-state-illustration,
#noResults:hover .empty-state-illustration {
    animation-play-state: paused;
    transform: scale(1.05);
}

/* Clickable search suggestion badges */
.empty-state-hint {
    cursor: pointer;
    transition: all 0.2s ease;
}

.empty-state-hint:hover {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.25);
}

.empty-state-hint:active {
    transform: translateY(0);
}

/* No results state enhancements */
#noResults .search-tips {
    max-width: 400px;
    margin: 0 auto;
}

#noResults .tip-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: left;
}

#noResults .tip-item i {
    color: var(--bs-primary);
    opacity: 0.7;
}

/* Keyboard shortcut modal key styling enhancement */
.shortcut-item kbd {
    transition: all var(--transition-fast);
}

.shortcut-item:hover kbd {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
    box-shadow: 0 2px 4px rgba(var(--bs-primary-rgb), 0.2);
}

/* Modal backdrop blur */
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* Prevent scroll leaking from modals */
.modal-dialog-scrollable .modal-body {
    overscroll-behavior: contain;
}

.modal.show {
    overscroll-behavior: contain;
}

/* Offcanvas premium entrance */
.offcanvas.show {
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.12);
}

/* Footer subtle gradient */
.footer-bg {
    background: linear-gradient(
        180deg,
        var(--bs-body-bg) 0%,
        var(--card-bg) 100%
    );
    border-top: 1px solid var(--card-border-color);
}

/* Document count subtle pulse on load */
@keyframes countPulse {
    0% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

.doc-count {
    animation: countPulse 0.5s ease-out;
}

/* Premium loading state for buttons */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 0.6s linear infinite;
}

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

/* Tooltip-style hover for icon buttons */
.btn-icon[title] {
    position: relative;
}

/* Search clear button animation */
.clear-search-btn {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: all var(--transition-fast);
    right: 0.75rem;
    z-index: 10;
    padding: 0.5rem;
    border-radius: var(--border-radius-md);
    color: var(--text-muted) !important;
}

.clear-search-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.clear-search-btn:hover {
    color: var(--bs-primary) !important;
    background: rgba(var(--bs-primary-rgb), 0.1);
    transform: scale(1.05);
}

.clear-search-btn:active {
    transform: scale(0.95);
}

/* Hide keyboard hint when clear button is visible */
.clear-search-btn.visible + .search-hints {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Active filter badge count pulse */
#activeFilterCount:not(.d-none) {
    animation: badgePop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes badgePop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* Results stagger animation - cascading waterfall effect */
.card-stagger {
    --stagger-delay: 0ms;
    animation: cardStaggerIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: var(--stagger-delay);
}

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

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .card-stagger {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Pagination premium styling */
.page-item .page-link {
    position: relative;
    overflow: hidden;
}

.page-item .page-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bs-primary);
    transform: translateY(100%);
    transition: transform var(--transition-base);
    z-index: -1;
}

.page-item .page-link:hover::before {
    transform: translateY(0);
}

.page-item .page-link:hover {
    color: white;
    border-color: var(--bs-primary);
}

.page-item.active .page-link::before {
    transform: translateY(0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .scroll-progress {
        display: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --shadow-sm: 0 0 0 1px var(--bs-body-color);
        --shadow-md: 0 0 0 2px var(--bs-body-color);
        --shadow-lg: 0 0 0 3px var(--bs-body-color);
    }
    
    .result-card {
        border: 2px solid var(--bs-body-color);
    }
    
    .btn {
        border-width: 2px;
    }
}

/* Print refinements */
@media print {
    .result-card {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .result-card + .result-card {
        margin-top: 1rem;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ======================================
   OFFLINE STATE
   ====================================== */

#offlineState {
    animation: fadeInUp 0.4s ease;
}

/* ======================================
   UNIFIED SEARCH DROPDOWN
   ====================================== */

.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    overflow: hidden;
    animation: dropdownFadeIn 0.15s ease;
}

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

/* Section within dropdown */
.search-dropdown-section {
    border-bottom: 1px solid var(--card-border-color);
}

.search-dropdown-section:last-child {
    border-bottom: none;
}

.search-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background-color: var(--bs-body-bg);
}

.search-dropdown-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.search-dropdown-label i {
    font-size: 0.75rem;
    opacity: 0.6;
}

.search-dropdown-clear {
    background: none;
    border: none;
    padding: 2px 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    opacity: 0.5;
}

.search-dropdown-clear:hover {
    opacity: 1;
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

/* Dropdown items list */
.search-dropdown-list {
    list-style: none;
    margin: 0;
    padding: var(--space-1);
    max-height: 240px;
    overflow-y: auto;
}

.search-dropdown-list li {
    margin: 0;
}

/* Individual dropdown item */
.search-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--bs-body-color);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.search-dropdown-item:hover,
.search-dropdown-item.active {
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.search-dropdown-item i {
    color: var(--text-muted);
    font-size: 0.8125rem;
    opacity: 0.5;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.search-dropdown-item:hover i {
    color: var(--bs-primary);
    opacity: 0.8;
}

.search-dropdown-item .item-text {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-dropdown-item .item-text mark {
    background: var(--mark-bg);
    color: inherit;
    font-weight: 600;
    padding: 0;
    border-radius: 0;
}

.search-dropdown-item .item-meta {
    font-size: 0.6875rem;
    color: var(--text-muted);
    opacity: 0.6;
    flex-shrink: 0;
}

.search-dropdown-item .item-badge {
    font-size: 0.5625rem;
    color: var(--text-muted);
    opacity: 0.5;
    background: var(--bs-body-bg);
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.search-dropdown-item .item-remove {
    opacity: 0;
    padding: 2px 4px;
    color: var(--text-muted);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.search-dropdown-item:hover .item-remove {
    opacity: 0.5;
}

.search-dropdown-item .item-remove:hover {
    opacity: 1;
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

/* Empty state */
.search-dropdown-empty {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.search-dropdown-empty i {
    font-size: 1.25rem;
    display: block;
    margin-bottom: var(--space-2);
    opacity: 0.3;
}

/* Keyboard hint at bottom */
.search-dropdown-hint {
    padding: var(--space-2) var(--space-3);
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--card-border-color);
    font-size: 0.6875rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.search-dropdown-hint kbd {
    font-size: 0.5625rem;
    padding: 1px 4px;
    min-width: 16px;
    text-align: center;
}

.offline-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #ef4444;
    border-radius: 50%;
    margin-right: 0.5rem;
    animation: offlinePulse 2s infinite;
    vertical-align: middle;
}

@keyframes offlinePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

/* Online indicator (when back online) */
.online-indicator {
    background-color: #22c55e;
    animation: none;
}

/* ============================================
   SAVED FILTER PRESETS
   ============================================ */

/* Presets section in offcanvas */
.filter-presets-section {
    background: transparent;
    border-radius: var(--radius-lg);
    padding: 0;
    border: none;
}

/* Preset divider in quick selector */
.preset-divider {
    margin-left: var(--space-2);
    margin-right: 0;
}

.filter-presets-section .form-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.filter-presets-section .form-label i {
    color: var(--bs-primary);
}

/* Save button */
.preset-save-btn {
    font-size: 0.75rem;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.preset-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Saved presets list */
.saved-presets-list {
    max-height: 280px;
    overflow-y: auto;
    margin-top: var(--space-2);
}

/* Empty state */
.presets-empty-state {
    padding: var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.presets-empty-icon {
    font-size: 1.5rem;
    opacity: 0.4;
    margin-bottom: var(--space-1);
}

.presets-empty-hint {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-top: var(--space-1);
}

/* Individual preset item */
.preset-item {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.preset-item:hover {
    border-color: var(--bs-primary);
    box-shadow: var(--shadow-sm);
}

.preset-item:last-child {
    margin-bottom: 0;
}

.preset-item-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3);
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    min-width: 0;
    transition: background var(--transition-fast);
}

.preset-item-btn:hover,
.preset-item-btn:focus {
    background: var(--surface-hover);
    outline: none;
}

.preset-item-btn:focus-visible {
    box-shadow: inset 0 0 0 2px var(--bs-primary);
}

.preset-item-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    width: 100%;
}

.preset-item-name i {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.preset-item-summary {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: var(--space-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    padding-left: calc(0.75rem + var(--space-2)); /* Align with name text */
}

.preset-item-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-3);
    background: none;
    border: none;
    border-left: 1px solid var(--bs-border-color);
    color: var(--text-tertiary);
    cursor: pointer;
    opacity: 0;
    transition: all var(--transition-fast);
}

.preset-item:hover .preset-item-delete,
.preset-item-delete:focus {
    opacity: 1;
}

.preset-item-delete:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

.preset-item-delete:active {
    background: var(--bs-danger);
    color: white;
}



/* Quick preset selector in main area - spacing handled by flex gap */

.preset-dropdown-btn {
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-3);
    transition: all var(--transition-fast);
}

.preset-dropdown-btn:hover {
    background: var(--surface-hover);
}

.preset-dropdown-menu {
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--bs-border-color);
    padding: var(--space-2);
}

.preset-quick-item {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.preset-quick-item:hover {
    background: var(--surface-hover);
}

.preset-quick-item i {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.preset-quick-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

.preset-quick-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.preset-quick-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.preset-quick-summary {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: calc(0.75rem + var(--space-2));
}

.preset-manage-btn {
    font-size: 0.8rem !important;
}

/* Highlight animation for presets section */
.presets-highlight {
    animation: presets-pulse 1.5s ease-out;
}

@keyframes presets-pulse {
    0% { 
        background: rgba(var(--bs-primary-rgb), 0.15);
        border-radius: var(--radius-lg);
    }
    100% { 
        background: transparent;
    }
}

/* Save preset modal */
#savePresetModal .modal-content {
    border-radius: var(--radius-xl);
    border: none;
    box-shadow: var(--shadow-xl);
}

#savePresetModal .modal-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding: var(--space-4);
}

#savePresetModal .modal-title {
    font-size: 1rem;
    font-weight: 600;
}

#savePresetModal .modal-title i {
    color: var(--bs-primary);
}

#savePresetModal .modal-body {
    padding: var(--space-4);
}

#savePresetModal .form-control {
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

#savePresetModal .form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.preset-summary {
    background: var(--surface-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    border: 1px solid var(--bs-border-color);
}

.preset-summary-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    line-height: 1.5;
    word-break: break-word;
}

#savePresetModal .modal-footer {
    border-top: 1px solid var(--bs-border-color);
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
}

#savePresetModal .btn {
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    #presetQuickSelector .d-lg-inline {
        display: none !important;
    }
    
    .preset-dropdown-btn {
        padding: var(--space-2);
    }
    
    .filter-presets-section {
        padding: var(--space-3);
    }
    
    .saved-presets-list {
        max-height: 200px;
    }
}

/* ============================================
   UNDO DELETE TOAST
   ============================================ */

.undo-delete-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--bs-dark);
    color: white;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    max-width: calc(100vw - 32px);
}

.undo-delete-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.undo-delete-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.undo-delete-icon {
    color: var(--bs-danger);
    font-size: 1rem;
    flex-shrink: 0;
}

.undo-delete-text {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.undo-delete-btn {
    background: transparent;
    border: none;
    color: var(--bs-primary);
    font-size: 0.875rem;
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.undo-delete-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.undo-delete-btn:active {
    transform: scale(0.95);
}

/* Progress bar that shows time remaining */
.undo-delete-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--bs-primary);
    width: 100%;
    animation: undo-progress 5s linear forwards;
}

@keyframes undo-progress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ======================================
   ADVANCED SEARCH BUILDER - Apple Style
   Enterprise-grade search term management
   ====================================== */

/* Wrapper - provides containment and spacing */
.search-builder-wrapper {
    padding: 0;
    border-top: 1px solid var(--card-border-color);
}

/* Main container - no separate card styling when inside search card */
.search-builder {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    transition: all var(--transition-base);
    box-shadow: none;
}

.search-builder:hover {
    box-shadow: none;
}

/* Subtle styling when collapsed and empty */
.search-builder[data-expanded="false"]:not(:has(.search-term.active)) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.search-builder[data-expanded="false"]:not(:has(.search-term.active)):hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* ========================================
   Collapsible Toggle Header
   ======================================== */
.search-builder-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    gap: var(--space-3);
    min-height: 44px;
}

.search-builder-toggle:hover {
    background: rgba(var(--bs-primary-rgb), 0.02);
}

.search-builder-toggle:focus {
    outline: none;
}

.search-builder-toggle:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(var(--bs-primary-rgb), 0.2);
}

.search-builder-toggle-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.search-builder-toggle-icon {
    font-size: 1rem;
    color: var(--bs-primary);
    opacity: 0.8;
}

.search-builder-toggle-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-body-color);
    letter-spacing: -0.01em;
}

.search-builder-toggle-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.search-builder-chevron {
    font-size: 0.875rem;
    color: var(--text-muted);
    transition: transform var(--transition-base);
    opacity: 0.6;
}

.search-builder-toggle:hover .search-builder-chevron {
    opacity: 1;
}

.search-builder[data-expanded="true"] .search-builder-chevron {
    transform: rotate(180deg);
}

/* Preview of terms in collapsed state */
.search-builder-toggle-preview {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin: 0 var(--space-3);
}

.search-builder-toggle-preview .preview-term {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-builder-toggle-preview .preview-term.exclude {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

.search-builder-toggle-preview .preview-more {
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Hide preview when expanded */
.search-builder[data-expanded="true"] .search-builder-toggle-preview {
    display: none;
}

/* ========================================
   Expandable Content Area
   ======================================== */
.search-builder-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid transparent;
}

.search-builder[data-expanded="true"] .search-builder-content {
    grid-template-rows: 1fr;
    border-top-color: var(--card-border-color);
    background: var(--bs-body-bg);
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

/* Inner wrapper handles overflow for grid animation */
.search-builder-content-inner {
    overflow: hidden;
    min-height: 0;
}

/* Header section */
.search-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--card-border-color);
    background: linear-gradient(180deg, var(--card-bg) 0%, rgba(var(--bs-primary-rgb), 0.02) 100%);
}

.search-builder-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.search-builder-title-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-body-color);
    letter-spacing: -0.01em;
}

/* Header actions */
.search-builder-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.search-builder-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-builder-action-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

.search-builder-action-btn i {
    font-size: 0.875rem;
}

.search-builder-action-btn.search-builder-clear:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

.search-builder-divider {
    width: 1px;
    height: 16px;
    background: var(--card-border-color);
    margin: 0 var(--space-1);
}

/* Terms container */
.search-terms-container {
    display: flex;
    gap: 1px;
    background: var(--card-border-color);
}

/* Terms zones */
.terms-zone {
    flex: 1;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.terms-zone-include {
    flex: 2;
}

.terms-zone-exclude {
    flex: 1;
    background: var(--card-bg);
}

/* Zone header */
.terms-zone-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.terms-zone-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.terms-zone-indicator.include {
    background: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.terms-zone-indicator.exclude {
    background: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.15);
}

.terms-zone-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.terms-zone-hint {
    font-size: 0.625rem;
    color: var(--text-muted);
    opacity: 0.7;
    margin-left: auto;
}

/* Terms list - drag drop container */
.terms-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2);
    border: 2px dashed transparent;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
}

.terms-list.drag-over {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.terms-list.drag-over-exclude {
    border-color: var(--text-muted);
    background: rgba(100, 116, 139, 0.06);
}

/* Empty state */
.terms-empty-state {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    color: var(--text-muted);
    font-size: 0.8125rem;
    opacity: 0.6;
}

.terms-empty-state i {
    font-size: 1rem;
}

.terms-list:not(:has(.search-term)) .terms-empty-state {
    display: flex;
}

.terms-list:has(.search-term) .terms-empty-state {
    display: none;
}

/* Individual search term pill */
.search-term {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.75rem;
    padding-left: 0.625rem; /* Slightly less left to balance handle */
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-body-color);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    position: relative;
    min-height: 34px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.search-term:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.25);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    background: var(--card-bg);
}

.search-term:active:not(.is-editing) {
    transform: scale(0.98);
    transition-duration: 50ms;
}

/* Drag handle - hidden by default, subtle on hover */
.search-term-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: grab;
    padding: 0 2px;
    margin-left: -4px;
    margin-right: -2px;
    touch-action: none;
    flex-shrink: 0;
}

.search-term-handle:active {
    cursor: grabbing;
}

.search-term:hover .search-term-handle {
    opacity: 0.35;
}

.search-term-handle:hover {
    opacity: 0.6 !important;
}

.search-term-handle i {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Legacy grip (backward compat) */
.search-term-grip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0.4;
    transition: opacity var(--transition-fast);
    margin-right: -2px;
}

.search-term:hover .search-term-grip {
    opacity: 0.7;
}

.search-term-grip i {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Term text */
.search-term-text {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
    transition: color 0.15s ease;
}

/* Rename button - subtle pencil icon */
.search-term-rename {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 0.625rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-left: -2px;
}

.search-term:hover .search-term-rename {
    opacity: 0.4;
}

.search-term-rename:hover {
    opacity: 0.8 !important;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

.search-term.active .search-term-rename {
    color: rgba(255, 255, 255, 0.7);
}

.search-term.active .search-term-rename:hover {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

/* Inline edit input */
.search-term-edit-input {
    background: transparent;
    border: none;
    outline: none;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 160px;
    min-width: 60px;
}

.search-term-edit-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
}

.search-term.active .search-term-edit-input {
    color: white;
    caret-color: white;
}

.search-term.active .search-term-edit-input::selection {
    background-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.search-term.is-editing {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
    cursor: text;
}

.search-term.is-editing .search-term-handle,
.search-term.is-editing .search-term-rename,
.search-term.is-editing .search-term-remove {
    display: none;
}

/* Term count badge */
.search-term-count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    min-width: 22px;
    text-align: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.search-term:hover .search-term-count {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

/* Remove button - subtle, less aggressive */
.search-term-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 0.625rem;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.search-term:hover .search-term-remove {
    opacity: 0.4;
}

.search-term-remove:hover {
    opacity: 0.8 !important;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

/* Active state */
.search-term.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
    box-shadow: 
        0 1px 2px rgba(var(--bs-primary-rgb), 0.3),
        0 4px 8px -2px rgba(var(--bs-primary-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.search-term.active:hover {
    box-shadow: 
        0 2px 4px rgba(var(--bs-primary-rgb), 0.35),
        0 6px 12px -2px rgba(var(--bs-primary-rgb), 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.search-term.active .search-term-handle {
    opacity: 0;
}

.search-term.active:hover .search-term-handle {
    opacity: 0.5;
}

.search-term.active .search-term-handle i {
    color: rgba(255, 255, 255, 0.9);
}

.search-term.active .search-term-grip i,
.search-term.active .search-term-count {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.18);
}

.search-term.active .search-term-remove {
    color: rgba(255, 255, 255, 0.7);
}

.search-term.active:hover .search-term-remove {
    opacity: 0.6;
}

.search-term.active .search-term-remove:hover {
    opacity: 1 !important;
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* Exclude term styling */
.search-term.exclude {
    background: var(--card-bg);
    border-color: var(--card-border-color);
    color: var(--text-muted);
}

.search-term.exclude .search-term-text {
    text-decoration: none;
}

.search-term.exclude.active {
    background: #64748b;
    border-color: #64748b;
    color: white;
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.25);
}

/* .search-term.exclude.active .search-term-text {
    text-decoration-color: rgba(255, 255, 255, 0.5);
} */

/* Status indicators for edited presets */
.search-term.status-new {
    border-color: #22c55e !important; /* Green-500 */
    border-width: 2px;
}
.search-term.status-new:not(.active) {
    background-color: rgba(34, 197, 94, 0.05);
}

.search-term.status-modified {
    border-color: #f59e0b !important; /* Amber-500 */
    border-width: 2px;
}
.search-term.status-modified:not(.active) {
    background-color: rgba(245, 158, 11, 0.05);
}

.search-term.status-moved {
    border-width: 2px;
    border-style: dashed;
}
.search-term.status-moved:not(.active) {
    border-color: #3b82f6 !important; /* Blue-500 */
    background-color: rgba(59, 130, 246, 0.05);
}
.search-term.status-moved.active {
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Dragging state */
.search-term.dragging {
    opacity: 0.95;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 8px;
    /* background: var(--card-bg); Removed to preserve active state color */
    pointer-events: none;
}

.search-term.dragging .search-term-handle {
    cursor: grabbing;
    opacity: 1;
}

/* Placeholder that maintains space in the flow */
.search-term-placeholder {
    display: inline-flex;
    border: 2px dashed rgba(var(--bs-primary-rgb), 0.4);
    border-radius: 8px;
    background: rgba(var(--bs-primary-rgb), 0.06);
    box-sizing: border-box;
}

/* Drop zone highlight */
.terms-list.drag-over {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.terms-list.drag-over-exclude {
    border-color: var(--text-muted);
    background: rgba(100, 116, 139, 0.04);
}

/* Priority indicator (position number) */
.search-term-priority {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 18px;
    height: 18px;
    background: var(--bs-secondary);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--transition-fast);
    z-index: 3;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border: 2px solid var(--card-bg);
}

.terms-zone-include:hover .search-term:not(.exclude) .search-term-priority,
.search-term:hover .search-term-priority {
    opacity: 1;
    transform: scale(1);
}

/* Always show priority for items with status */
.search-term.status-new .search-term-priority,
.search-term.status-modified .search-term-priority,
.search-term.status-moved .search-term-priority {
    opacity: 1;
    transform: scale(1);
}

/* Show all priority badges when in edit mode */
.keyword-builder[data-editing="true"] .search-term-priority {
    opacity: 1;
    transform: scale(1);
}

/* Status colors for priority badge */
.search-term.status-new .search-term-priority {
    background-color: #22c55e;
}

.search-term.status-modified .search-term-priority {
    background-color: #f59e0b;
}

.search-term.status-moved .search-term-priority {
    background-color: #3b82f6;
}

/* Add term button */
.add-term-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px dashed var(--card-border-color);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    align-self: flex-start;
    min-height: 36px;
}

.add-term-btn:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.add-term-btn i {
    font-size: 1rem;
}

.add-term-btn-exclude:hover {
    border-color: var(--text-muted);
    color: var(--text-muted);
    background: rgba(100, 116, 139, 0.06);
}

/* Add term input (replaces button when clicked) */
.add-term-input {
    padding: 0.5rem 0.875rem;
    background: var(--card-bg);
    border: 1px solid var(--bs-primary);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    outline: none;
    width: 160px;
    min-height: 36px;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
    transition: all var(--transition-fast);
}

.add-term-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.add-term-input.exclude-input {
    border-color: var(--text-muted);
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.1);
}

/* Footer with drag hint */
.search-builder-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--bs-body-bg);
    border-top: 1px solid var(--card-border-color);
    font-size: 0.6875rem;
    color: var(--text-muted);
    opacity: 0.6;
}

.search-builder-footer i {
    font-size: 0.875rem;
}

/* Saved presets dropdown - Premium Popover */
.search-presets-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 20px 25px -5px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    overflow: hidden;
    animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
}

.search-presets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--card-border-color);
    background: var(--bs-body-bg);
}

.search-presets-header span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.search-presets-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.search-presets-close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--bs-body-color);
}

.search-presets-list {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-2);
}

.search-preset-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    margin-bottom: 2px;
}

.search-preset-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.04);
    border-color: rgba(var(--bs-primary-rgb), 0.1);
}

.search-preset-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bs-primary);
}

.search-preset-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.search-preset-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-preset-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.search-preset-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transform: translateX(4px);
    transition: all var(--transition-fast);
    padding-left: var(--space-2);
}

.search-preset-item:hover .search-preset-actions,
.search-preset-item:focus-within .search-preset-actions {
    opacity: 1;
    transform: translateX(0);
}

.search-preset-action {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-preset-action:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.search-preset-action.delete:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* Deleting animation */
.search-preset-item.deleting {
    opacity: 0;
    transform: translateX(-10px);
    height: 0 !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.search-presets-empty {
    padding: var(--space-5);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

/* Update Button State */
.btn-update-active {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.2);
}

.btn-update-active:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

/* Responsive - Stack zones on mobile */
@media (max-width: 640px) {
    .search-terms-container {
        flex-direction: column;
    }
    
    .terms-zone-include,
    .terms-zone-exclude {
        flex: none;
    }
    
    .search-builder-header {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .search-builder-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .terms-zone-hint {
        display: none;
    }
    
    .search-term-text {
        max-width: 100px;
    }
}

/* Animation for new terms */
@keyframes termAppear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.search-term.new {
    animation: termAppear 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Collapsed/minimized state for mobile */
.search-builder.collapsed .search-terms-container,
.search-builder.collapsed .search-builder-footer {
    display: none;
}

.search-builder.collapsed .search-builder-header {
    border-bottom: none;
}

/* Offline indicator for saved terms */
.offline-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f59e0b;
    border-radius: 50%;
    margin-right: var(--space-2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Results Toolbar - Enterprise Grade */
.results-toolbar {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border-color);
    transition: all 0.3s ease;
}

.results-badge {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: -0.01em;
}

.results-query {
    font-size: 0.9rem;
    line-height: 1.2;
}

/* Refined Select in Toolbar */
.results-toolbar .form-select {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.results-toolbar .input-group-text {
    background-color: var(--bs-body-bg);
    border-color: var(--card-border-color);
}

/* ========================================
   SEARCH BUILDER SAVE MODAL
   ======================================== */
.search-builder-save-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    animation: fadeIn 0.15s ease;
}

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

.search-builder-save-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

.search-builder-save-content {
    position: relative;
    width: 90%;
    max-width: 400px;
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.search-builder-save-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--card-border-color);
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.search-builder-save-header i {
    color: var(--bs-primary);
    font-size: 1.125rem;
}

.search-builder-save-body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.search-builder-save-field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.search-builder-save-field input {
    width: 100%;
    padding: var(--space-3);
    background: var(--bs-body-bg);
    border: 2px solid var(--card-border-color);
    border-radius: var(--border-radius-md);
    font-size: 0.9375rem;
    color: var(--bs-body-color);
    transition: all var(--transition-fast);
}

.search-builder-save-field input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.search-builder-save-field input.is-invalid {
    border-color: #ef4444;
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.search-builder-save-hint {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Radio options for update/save new */
.search-builder-save-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.search-builder-save-radio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bs-body-bg);
    border: 2px solid var(--card-border-color);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-builder-save-radio:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    background: rgba(var(--bs-primary-rgb), 0.02);
}

.search-builder-save-radio input[type="radio"] {
    display: none;
}

.search-builder-save-radio input[type="radio"]:checked + .radio-custom {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
}

.search-builder-save-radio input[type="radio"]:checked + .radio-custom::after {
    opacity: 1;
    transform: scale(1);
}

.search-builder-save-radio input[type="radio"]:checked ~ .radio-label {
    color: var(--bs-primary);
}

.radio-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--card-border-color);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: all var(--transition-fast);
}

.radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all var(--transition-fast);
}

.radio-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.radio-label strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.radio-label small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Preview section */
.search-builder-save-preview {
    padding: var(--space-3);
    background: var(--bs-body-bg);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.search-builder-save-preview .preview-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.search-builder-save-preview .preview-terms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.search-builder-save-preview .preview-term {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.search-builder-save-preview .preview-term.active {
    background: var(--bs-primary);
    color: white;
}

.search-builder-save-preview .preview-term.exclude {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.search-builder-save-preview .preview-term.exclude.active {
    background: #ef4444;
    color: white;
}

.search-builder-save-preview .preview-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Footer buttons */
.search-builder-save-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--card-border-color);
    background: rgba(var(--bs-body-bg-rgb), 0.5);
}

.search-builder-save-cancel {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-builder-save-cancel:hover {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.search-builder-save-confirm {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    background: var(--bs-primary);
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-builder-save-confirm:hover {
    background: var(--bs-primary-dark, #1d4ed8);
    transform: translateY(-1px);
}

.search-builder-save-confirm:active {
    transform: translateY(0);
}

/* ========================================
   EDITING STATE - Notion-style
   ======================================== */

/* Loaded preset name display - always visible when preset is loaded */
.search-builder-preset-name {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.06) 0%, transparent 100%);
    border-bottom: 1px solid var(--card-border-color);
    font-size: 0.8125rem;
    color: var(--bs-body-color);
}

/* Show when loaded OR editing, but only when expanded */
.search-builder[data-expanded="true"][data-loaded="true"] .search-builder-preset-name,
.search-builder[data-expanded="true"][data-editing="true"] .search-builder-preset-name {
    display: flex;
}

/* When has unsaved changes, show with orange accent */
.search-builder-preset-name.has-changes {
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.08) 0%, transparent 100%);
    border-bottom-color: rgba(249, 115, 22, 0.2);
}

.search-builder-preset-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-radius: var(--border-radius-sm);
    color: var(--bs-primary);
    font-size: 0.875rem;
}

.search-builder-preset-name.has-changes .search-builder-preset-label {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}

.search-builder-preset-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.search-builder-preset-text {
    font-weight: 600;
    color: var(--bs-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.search-builder-preset-text:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.search-builder-preset-input {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-primary);
    background: var(--card-bg);
    border: 2px solid var(--bs-primary);
    border-radius: var(--border-radius-sm);
    outline: none;
}

.search-builder-preset-input:focus {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.search-builder-preset-edit-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    font-size: 0.75rem;
}

.search-builder-preset-edit-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.search-builder-preset-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
}

.search-builder-preset-count {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: -4px;
}

.search-builder-preset-save-btn {
    padding: 4px 10px;
    background: var(--bs-primary);
    border: none;
    color: white;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.search-builder-preset-save-btn:hover {
    background: var(--bs-primary-dark, #1d4ed8);
    transform: translateY(-1px);
}

.search-builder-preset-discard-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--card-border-color);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.search-builder-preset-discard-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Status when saved (no unsaved changes) */
.search-builder-preset-status {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.search-builder-preset-saved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(34, 197, 94, 0.08);
    color: #16a34a;
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 500;
}

/* Close button to unload preset */
.search-builder-preset-close-btn {
    padding: 4px 6px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    font-size: 0.875rem;
    margin-left: var(--space-2);
    opacity: 0.6;
}

.search-builder-preset-close-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    opacity: 1;
}

/* When editing a preset, show visual indicator */
.search-builder[data-editing="true"] {
    border-color: #f97316;
    box-shadow: 
        0 0 0 1px rgba(249, 115, 22, 0.3),
        var(--shadow-md);
}

.search-builder[data-editing="true"] .search-builder-toggle {
    background: rgba(249, 115, 22, 0.04);
}

/* Editing badge indicator */
.search-builder-editing-badge {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: 0.125rem 0.5rem;
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
    border-radius: var(--border-radius-pill);
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: var(--space-2);
    animation: editingPulse 2s ease-in-out infinite;
}

.search-builder[data-editing="true"] .search-builder-editing-badge {
    display: inline-flex;
}

@keyframes editingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Save button changes to "Lagre endring" state */
.search-builder-action-btn.is-editing {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.search-builder-action-btn.is-editing:hover {
    background: rgba(249, 115, 22, 0.15);
    color: #c2410c;
}

/* Cancel editing button */
.search-builder-cancel-btn {
    display: none;
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-md);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-builder[data-editing="true"] .search-builder-cancel-btn {
    display: inline-flex;
}

.search-builder-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Search Builder Load Modal Specifics */
.search-builder-load-list {
    max-height: 400px;
    overflow-y: auto;
    padding: var(--space-3);
}

.search-builder-load-item {
    margin-bottom: var(--space-2);
    border: 1px solid var(--card-border-color);
}

/* ========================================
   SEARCH BUILDER LOAD DROPDOWN
   Replaces the modal for "Åpne samlinger"
   ======================================== */
.search-builder-load-dropdown {
    position: fixed;
    min-width: 280px;
    max-width: 340px;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1060;
    overflow: hidden;
    animation: dropdownFadeIn 0.15s ease;
}

.search-builder-load-dropdown-header {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--card-border-color);
    background: var(--bs-body-bg);
}

.search-builder-load-dropdown-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.search-builder-load-dropdown-title i {
    font-size: 0.875rem;
    color: var(--bs-primary);
}

.search-builder-load-dropdown-list {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-2);
}

.search-builder-load-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    margin-bottom: 2px;
}

.search-builder-load-dropdown-item:last-child {
    margin-bottom: 0;
}

.search-builder-load-dropdown-item:hover {
    background: rgba(var(--bs-primary-rgb), 0.04);
    border-color: rgba(var(--bs-primary-rgb), 0.1);
}

.search-builder-load-dropdown-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bs-primary);
}

.search-builder-load-dropdown-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.search-builder-load-dropdown-item-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-builder-load-dropdown-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.search-builder-load-dropdown-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transform: translateX(4px);
    transition: all var(--transition-fast);
    padding-left: var(--space-2);
}

.search-builder-load-dropdown-item:hover .search-builder-load-dropdown-item-actions,
.search-builder-load-dropdown-item:focus-within .search-builder-load-dropdown-item-actions {
    opacity: 1;
    transform: translateX(0);
}

.search-builder-load-dropdown-action {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-builder-load-dropdown-action:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.search-builder-load-dropdown-action.delete:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* Inline rename input */
.search-builder-load-dropdown-rename-input {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    background: var(--card-bg);
    border: 1px solid var(--bs-primary);
    border-radius: var(--border-radius-md);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

/* ========================================
   KEYWORD SUGGESTIONS DROPDOWN
   Dropdown for recent/suggested keywords
   ======================================== */
.keyword-suggestions-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1100;
    max-height: 260px;
    overflow-y: auto;
    animation: dropdownFadeDown 0.12s ease;
}

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

.keyword-dropdown-section {
    padding: var(--space-2);
}

.keyword-dropdown-section + .keyword-dropdown-section {
    border-top: 1px solid var(--card-border-color);
}

.keyword-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-1);
}

.keyword-dropdown-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.keyword-dropdown-label i {
    font-size: 0.75rem;
    opacity: 0.7;
}

.keyword-dropdown-clear {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 6px;
    font-size: 0.6875rem;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.keyword-dropdown-clear:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.keyword-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.keyword-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.1s ease;
}

.keyword-dropdown-item:hover:not(.is-disabled),
.keyword-dropdown-item.is-active:not(.is-disabled) {
    background: rgba(var(--bs-primary-rgb), 0.06);
}

.keyword-dropdown-item.is-disabled {
    opacity: 0.5;
    cursor: default;
}

.keyword-dropdown-item.is-disabled i {
    color: var(--bs-success);
}

.keyword-dropdown-item i {
    font-size: 0.875rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.keyword-dropdown-item:hover i,
.keyword-dropdown-item.is-active i {
    color: var(--bs-primary);
}

.keyword-dropdown-text {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.keyword-dropdown-text mark {
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--bs-primary);
    padding: 0 1px;
    border-radius: 2px;
}

.keyword-dropdown-meta {
    font-size: 0.6875rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.keyword-dropdown-badge {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 5px;
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

/* Exclude variant */
.keyword-section-exclude .keyword-suggestions-dropdown .keyword-dropdown-badge {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .keyword-suggestions-dropdown {
        max-height: 220px;
    }
    
    .keyword-dropdown-item {
        padding: var(--space-2);
    }
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .search-builder-load-dropdown {
        min-width: 240px;
        max-width: calc(100vw - 32px);
        right: -8px;
    }
    
    .search-builder-load-dropdown-item {
        padding: var(--space-2);
    }
    
    .search-builder-load-dropdown-item-name {
        font-size: 0.8125rem;
    }
    
    .search-builder-load-dropdown-item-actions {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   COLLECTIONS PREVIEW - Collapsed State
   Shows all saved collections with match counts
   ======================================== */

/* Container for collection items in collapsed state */
.search-builder[data-expanded="false"] .search-builder-toggle-preview {
    display: flex;
    flex: 1;
    gap: var(--space-2);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-1) 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.search-builder[data-expanded="false"] .search-builder-toggle-preview::-webkit-scrollbar {
    display: none;
}

/* Individual collection preview item - clean chip style */
.collection-preview-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-pill);
    font-size: 0.8125rem;
    color: var(--bs-body-color);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.collection-preview-item:hover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.04);
}

/* Loaded/active collection - uses filled background instead of checkmark */
.collection-preview-item.is-loaded {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.25);
}

.collection-preview-item.is-loaded:hover {
    background: var(--bs-primary);
    opacity: 0.9;
}

/* Collection name */
.collection-preview-name {
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Match count */
.collection-preview-count {
    font-weight: 400;
    font-size: 0.75rem;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.collection-preview-item.is-loaded .collection-preview-count {
    opacity: 0.85;
}

.collection-preview-count:empty {
    display: none;
}

/* Empty state when no collections */
.search-builder[data-expanded="false"] .search-builder-toggle-preview:empty + .search-builder-toggle-right .search-builder-toggle-hint {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .collection-preview-item {
        padding: var(--space-1) var(--space-2);
        font-size: 0.6875rem;
    }
    
    .collection-preview-name {
        max-width: 80px;
    }
    
    .collection-preview-icon {
        font-size: 0.75rem;
    }
}

/* ========================================
   KEYWORD BUILDER - Redesigned v2
   Streamlined, minimal, focused
   ======================================== */

.keyword-builder {
    border-top: 1px solid var(--card-border-color);
}

/* Quick bar - always visible */
.keyword-builder-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: 48px;
}

/* Collections horizontal scroll */
.keyword-collections {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: var(--space-1) 0;
}

.keyword-collections::-webkit-scrollbar {
    display: none;
}

/* Collection chip */
.keyword-collection {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.keyword-collection:hover {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.keyword-collection.is-active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.keyword-collection-count {
    font-size: 0.6875rem;
    opacity: 0.6;
}

.keyword-collection.is-active .keyword-collection-count {
    opacity: 0.8;
}

/* Empty state for collections */
.keyword-collections-empty {
    font-size: 0.8125rem;
    color: var(--text-muted);
    opacity: 0.6;
    padding: 0 var(--space-2);
}

/* Toggle button for detail view */
.keyword-builder-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.keyword-builder-toggle:hover {
    background: var(--bs-body-bg);
    color: var(--bs-primary);
    border-color: var(--card-border-color);
}

.keyword-builder-toggle[aria-expanded="true"] {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
    border-color: rgba(var(--bs-primary-rgb), 0.2);
}

/* Expandable panel */
.keyword-builder-panel {
    display: none;
    border-top: 1px solid var(--card-border-color);
    background: var(--bs-body-bg);
    border-radius: 0 0 16px 16px;
    overflow: visible;
}

.keyword-builder-toggle[aria-expanded="true"] ~ .keyword-builder-panel,
.keyword-builder-panel.is-expanded {
    display: block;
    animation: panelSlideDown 0.2s ease;
}

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

/* Keyword sections */
.keyword-section {
    padding: var(--space-4);
    min-height: 120px;
    position: relative;
}

.keyword-section + .keyword-section {
    border-top: 1px solid var(--card-border-color);
}

.keyword-section-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.keyword-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-body-color);
}

.keyword-section-hint {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

/* Keyword list */
.keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 40px;
    margin-bottom: var(--space-3);
}

/* Empty state */
.keyword-empty {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-2);
    color: var(--text-muted);
    font-size: 0.8125rem;
    opacity: 0.5;
}

.keyword-list:has(.search-term) .keyword-empty {
    display: none;
}

/* Input row */
.keyword-input-row {
    display: flex;
    gap: var(--space-2);
    position: relative;
}

.keyword-input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: var(--card-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
    color: var(--bs-body-color);
    transition: all 0.15s ease;
}

.keyword-input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

.keyword-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.keyword-input-exclude:focus {
    border-color: #64748b;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.1);
}

.keyword-add-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    border: none;
    border-radius: var(--border-radius-md);
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.keyword-add-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.keyword-add-btn-exclude {
    background: #64748b;
}

/* Panel footer */
.keyword-builder-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--card-border-color);
    background: var(--card-bg);
}

.keyword-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.keyword-footer-btn:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--bs-primary);
}

.keyword-footer-btn-muted:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

.keyword-footer-spacer {
    flex: 1;
}

/* Exclude section styling */
.keyword-section-exclude .keyword-section-label {
    color: #64748b;
}

/* Active keyword indicator */
.keyword-active-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: rgba(var(--bs-primary-rgb), 0.06);
    border-radius: var(--border-radius-pill);
    font-size: 0.75rem;
    color: var(--bs-primary);
}

/* Responsive */
@media (max-width: 640px) {
    .keyword-builder-bar {
        padding: var(--space-2) var(--space-3);
    }
    
    .keyword-section {
        padding: var(--space-3);
    }
    
    .keyword-builder-footer {
        padding: var(--space-2) var(--space-3);
    }
}

/* ========================================
   KEYWORD BUILDER - Edit Mode & Drag States
   ======================================== */

/* Edit mode indicator banner */
.edit-mode-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 20px;
    background: var(--bs-primary);
    color: white;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.edit-mode-banner.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.edit-mode-banner i {
    font-size: 1.125rem;
    opacity: 0.9;
}

/* Edit mode state on builder */
.keyword-builder.is-editing-mode {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
    border-radius: 0 0 16px 16px;
}

.keyword-builder.is-editing-mode .keyword-section {
    background: rgba(var(--bs-primary-rgb), 0.02);
}

/* Drag over states for keyword-list */
.keyword-list.drag-over {
    border: 2px dashed var(--bs-primary);
    border-radius: var(--border-radius-md);
    background: rgba(var(--bs-primary-rgb), 0.04);
    padding: calc(var(--space-2) - 2px);
    min-height: 44px;
}

.keyword-list.drag-over-exclude {
    border: 2px dashed #64748b;
    border-radius: var(--border-radius-md);
    background: rgba(100, 116, 139, 0.04);
    padding: calc(var(--space-2) - 2px);
}

/* Preset name bar with changes */
.search-builder-preset-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(var(--bs-primary-rgb), 0.04);
    border-top: 1px solid var(--card-border-color);
}

.search-builder-preset-name.has-changes {
    background: rgba(245, 158, 11, 0.06);
    border-top-color: rgba(245, 158, 11, 0.3);
}

.search-builder-preset-label {
    color: var(--bs-primary);
    opacity: 0.6;
}

.search-builder-preset-value {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.search-builder-preset-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.search-builder-preset-text:hover {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.search-builder-preset-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.search-builder-preset-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
}

.search-builder-preset-value:hover .search-builder-preset-edit-btn {
    opacity: 0.6;
}

.search-builder-preset-edit-btn:hover {
    opacity: 1 !important;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.search-builder-preset-input {
    flex: 1;
    padding: 4px 8px;
    background: var(--card-bg);
    border: 1px solid var(--bs-primary);
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

/* Preset action buttons (save/discard) */
.search-builder-preset-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.search-builder-preset-save-btn,
.search-builder-preset-discard-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-builder-preset-save-btn {
    background: var(--bs-primary);
    color: white;
}

.search-builder-preset-save-btn:hover {
    opacity: 0.9;
}

.search-builder-preset-discard-btn {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--card-border-color);
}

.search-builder-preset-discard-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.search-builder-preset-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.15s ease;
    margin-left: auto;
}

.search-builder-preset-close-btn:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

/* Editing badge */
.search-builder-editing-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 100px;
    margin-left: var(--space-2);
}

/* Save button editing state */
.keyword-footer-btn.is-editing {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.keyword-footer-btn.is-editing:hover {
    background: var(--bs-primary);
    color: white;
}