/**
 * Quotes Management - Modern UX/UI 2026
 * Matchar Company Dashboard Tema
 */

/* ===========================
   CSS VARIABLES & TOKENS
   =========================== */
:root {
    /* Status Colors - Behåller originalen */
    --status-draft: #94a3b8;
    --status-sent: #3b82f6;
    --status-pending: #f59e0b;
    --status-accepted: #10b981;
    --status-rejected: #ef4444;
    --status-signed: #8b5cf6;
    --status-archived: #64748b;
    
    /* Theme colors överskriven av company-dashboard-modern.css */
    /* Men definierar här för fallback */
    --quotes-primary: #0f172a;
    --quotes-accent: #0f172a;
}

/* ===========================
   BASE STYLES - matchar company-dashboard
   =========================== */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--company-bg-subtle, #f8fafc) !important;
    background-color: var(--company-bg-subtle, #f8fafc) !important;
    background-image: none !important;
    color: var(--text-primary);
    min-height: 100vh;
}

/* ===========================
   PAGE CONTAINER - matchar company-dashboard
   =========================== */
.page-container {
    background-color: var(--company-bg-subtle, #F2EFE9);
    max-width: var(--arv-shell-max, 1600px);
    margin: 0 auto;
    padding: var(--spacing-lg, 1.5rem);
    padding-top: 110px;
    padding-bottom: calc(2rem + var(--safe-area-inset-bottom, 0px));
}

/* Med ARV-rail (desktop): samma shell som dashboard — ingen header-offset */
@media (min-width: 1025px) {
    body.company-arv-rail:not(.quote-generator-page) .page-container {
        max-width: min(var(--arv-shell-max, 1600px), 100%);
        padding: var(--arv-pad-y, 1rem) var(--arv-pad-x, 2rem);
        padding-bottom: calc(var(--arv-pad-y, 1rem) + 1.25rem);
        background-color: transparent;
    }
}

/* Page Header - minimalistiskt som company-dashboard */
.page-header {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-xl, 1rem);
    padding: var(--spacing-xl, 2rem) var(--spacing-2xl, 3rem);
    margin-bottom: 32px;
    box-shadow: none;
    color: var(--text-primary, #0f172a);
}

.page-header h1 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-primary, #0f172a);
}

.page-header p {
    font-size: 1rem;
    margin: 0;
    color: var(--text-secondary, #64748b);
}

/* Hero med Unsplash (Oleg Ivanov – laptop), svartvit; text vänster som övriga dashboards */
.page-header.quotes-page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
    border-radius: var(--radius-xl, 1rem);
    padding-top: 5.25rem;
    padding-bottom: 5.25rem;
    padding-left: var(--spacing-2xl, 3rem);
    padding-right: var(--spacing-2xl, 3rem);
    min-height: 17rem;
    text-align: left;
    /* Åsidosätt customer-pages-common .page-header (flex row + space-between) som tryckte underraden till höger */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
}

.page-header.quotes-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #e8edf2;
    background-image: url('/images/quotes-hero-bg.jpg');
    background-size: cover;
    /* Flytta tyngdpunkt åt höger så laptop/dator syns mer i bred beskärning */
    background-position: 82% 42%;
    filter: grayscale(100%);
    z-index: 0;
}

.page-header.quotes-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Lite mer genomskinligt till höger så datorn syns tydligare */
    background: linear-gradient(
        105deg,
        rgba(248, 250, 252, 0.94) 0%,
        rgba(248, 250, 252, 0.78) 34%,
        rgba(248, 250, 252, 0.35) 58%,
        rgba(248, 250, 252, 0.08) 100%
    );
    z-index: 1;
}

.page-header.quotes-page-hero h1,
.page-header.quotes-page-hero p {
    position: relative;
    z-index: 2;
    max-width: 42rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

.page-header.quotes-page-hero h1 i {
    margin-right: 0.5rem;
}

/* ===========================
   QUOTES TABS
   =========================== */
.quotes-tabs {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.quotes-tab {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #0f172a;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quotes-tab svg {
    width: 16px;
    height: 16px;
}

.quotes-tab:hover {
    border-color: var(--primary, #0f172a);
    color: var(--primary, #0f172a);
    background: #f8fafc;
}

.quotes-tab.active {
    background: var(--primary, #0f172a);
    border-color: var(--primary, #0f172a);
    color: #ffffff;
}

.quotes-tab-badge {
    background: rgba(15, 23, 42, 0.15);
    color: inherit;
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
    font-size: 0.75rem;
}

.quotes-tab.active .quotes-tab-badge {
    background: rgba(255, 255, 255, 0.2);
}

/* Dropdown för flikar (visas endast på mobil) */
.quotes-tabs-dropdown {
    display: none;
    position: relative;
    margin-bottom: 1rem;
}
.quotes-tabs-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.quotes-tabs-dropdown-trigger:hover {
    border-color: var(--primary, #0f172a);
}
.quotes-tabs-dropdown-trigger svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.quotes-tabs-dropdown.is-open .quotes-tabs-dropdown-trigger svg {
    transform: rotate(180deg);
}
.quotes-tabs-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    z-index: 100;
    overflow: hidden;
}
.quotes-tabs-dropdown.is-open .quotes-tabs-dropdown-panel {
    display: block;
}
.quotes-tabs-dropdown-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.quotes-tabs-dropdown-option:hover {
    background: #f1f5f9;
}
.quotes-tabs-dropdown-option.active {
    background: #f1f5f9;
    font-weight: 600;
    color: var(--primary, #0f172a);
}
.quotes-tabs-dropdown-option svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .page-header {
        padding: var(--spacing-xl, 2rem) var(--spacing-2xl, 3rem);
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
}

/* ===========================
   MODERN FILTER SYSTEM
   =========================== */

/* Sticky Filter Bar */
.filters-bar-sticky {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    background: white;
    padding: 1rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid #f3f4f6;
    position: sticky;
    top: calc(70px + var(--safe-area-inset-top, 0px));
    z-index: var(--z-sticky);
}

.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper > i {
    position: absolute;
    left: 1rem;
    width: 18px;
    height: 18px;
    color: #94a3b8;
    pointer-events: none;
}

.search-input-wrapper input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--company-cta, #0f172a);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.btn-clear-search {
    position: absolute;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: none;
    background: #f3f4f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-clear-search:hover {
    background: #e5e7eb;
}

.btn-clear-search svg {
    width: 14px;
    height: 14px;
    color: #64748b;
}

.filter-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.btn-filters-toggle {
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid #e5e7eb;
    background: white;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.btn-filters-toggle:hover {
    background: var(--bg-hover, #f8fafc);
    border-color: var(--primary, #0f172a);
    color: var(--primary, #0f172a);
}

.btn-filters-toggle.active {
    background: var(--primary, #0f172a);
    color: white;
    border-color: var(--primary, #0f172a);
}

.btn-filters-toggle svg {
    width: 16px;
    height: 16px;
}

.filter-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.view-mode-toggle {
    display: flex;
    gap: 0.25rem;
    background: #f8fafc;
    padding: 0.25rem;
    border-radius: var(--radius-lg);
}

.view-mode {
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
}

.view-mode svg {
    width: 20px;
    height: 20px;
    color: #475569;
    flex-shrink: 0;
    stroke-width: 2.25;
}

.view-mode-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    white-space: nowrap;
}

.view-mode:hover {
    background: #e2e8f0;
}

.view-mode:hover svg,
.view-mode:hover .view-mode-label {
    color: #334155;
}

.view-mode.active {
    background: white;
    box-shadow: var(--shadow-sm);
}

.view-mode.active svg,
.view-mode.active .view-mode-label {
    color: var(--primary, #0f172a);
}

/* Kompakt feed-vy (samma radlayout som dashboard "Senaste offerter") */
.quotes-compact-feed {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.quotes-compact-feed.empty {
    padding: 2.5rem 1.5rem;
    background: white;
    border-radius: var(--radius-xl, 12px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    border: 1px solid #f1f5f9;
}

.quotes-compact-feed .quote-accepted-alert {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 0.25rem;
}

.quotes-compact-feed .quote-feed-item {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    /* Titel | badge | pris | åtgärd — samma kolumner på varje rad */
    grid-template-columns: minmax(0, 1fr) 8.5rem 7rem 2.5rem;
    gap: 0.75rem 1rem;
    align-items: center;
    min-height: 3.75rem;
    padding: 0.85rem 1rem;
    margin: 0;
    border: 1px solid #ebe7df;
    border-radius: 0.85rem;
    background: #FAF9F6;
    overflow: hidden;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.quotes-compact-feed .quote-feed-item:last-child {
    border-bottom: 1px solid #ebe7df;
}

.quotes-compact-feed .quote-feed-item:hover {
    transform: none;
    margin: 0;
    padding: 0.85rem 1rem;
    background: #FFFFFF;
    box-shadow: none;
    border-color: #ddd7cb;
}

.quotes-compact-feed .quote-feed-main {
    min-width: 0;
    overflow: hidden;
}

.quotes-compact-feed .quote-feed-title,
.quotes-compact-feed .quote-feed-customer {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quotes-compact-feed .quote-feed-item .badge-status {
    justify-self: start;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    padding: 0.3rem 0.55rem;
    box-sizing: border-box;
}

.quotes-compact-feed .quote-feed-amount {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
    font-weight: 600;
}

.quotes-compact-feed .quote-feed-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    justify-self: end;
}

.quotes-compact-feed .quote-feed-actions .btn-feed-action {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.65rem;
    flex-shrink: 0;
}

.quotes-compact-feed .quote-feed-actions-spacer {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
}

.quotes-compact-feed .quote-status-dot.draft {
    background: #94a3b8;
}

.quotes-compact-feed .quote-status-dot.signed {
    background: var(--success, #16a34a);
}

@media (max-width: 768px) {
    .quotes-compact-feed .quote-feed-item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.45rem 0.75rem;
        padding: 0.75rem 0.85rem;
    }

    .quotes-compact-feed .quote-feed-main {
        grid-column: 1 / -1;
    }

    .quotes-compact-feed .badge-status {
        grid-column: 1;
        justify-self: start;
    }

    .quotes-compact-feed .quote-feed-amount {
        grid-column: 2;
        justify-self: end;
    }

    .quotes-compact-feed .quote-feed-actions {
        grid-column: 2;
        justify-self: end;
        grid-row: 3;
    }
}

/* Filter Panel */
.filters-panel {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid #f3f4f6;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.filters-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.filters-panel-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.btn-close-filters {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-close-filters:hover {
    background: var(--bg-hover, #f8fafc);
    border-color: var(--primary, #0f172a);
}

.btn-close-filters svg {
    width: 16px;
    height: 16px;
    color: #64748b;
}

.filters-panel-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #334155;
    font-size: 0.9375rem;
}

.filter-label svg {
    width: 16px;
    height: 16px;
    color: #94a3b8;
}

.filter-chips {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-chip {
    padding: 0.625rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-full);
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
}

.filter-chip svg {
    width: 14px;
    height: 14px;
}

.filter-chip:hover {
    border-color: var(--primary, #0f172a);
    background: var(--bg-tertiary, #f1f5f9);
    transform: translateY(-1px);
}

.filter-chip.active {
    background: var(--primary, #0f172a);
    color: white;
    border-color: var(--primary, #0f172a);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.filter-chip.active svg {
    color: white;
}

.filters-panel-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-clear-filters {
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid #e5e7eb;
    background: white;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
}

.btn-clear-filters:hover {
    background: #f8fafc;
    border-color: #ef4444;
    color: #ef4444;
}

.btn-clear-filters svg {
    width: 14px;
    height: 14px;
}

/* Active Filters Bar */
.active-filters-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.active-filters-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
}

.active-filters-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
}

.filter-pill {
    padding: 0.5rem 0.75rem;
    background: #eff6ff;
    color: #1e40af;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #dbeafe;
}

.filter-pill svg {
    width: 14px;
    height: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-pill svg:hover {
    color: #ef4444;
}

/* ===========================
   BULK ACTIONS
   =========================== */
.bulk-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: #eff6ff;
    border-radius: var(--radius-xl);
    border: 2px solid #3b82f6;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.bulk-selection-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bulk-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.bulk-count {
    font-size: 0.9375rem;
    color: #1e293b;
}

.bulk-count strong {
    font-weight: 700;
    color: var(--primary, #0f172a);
}

.bulk-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-bulk-action {
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid #3b82f6;
    background: white;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #3b82f6;
}

.btn-bulk-action:hover {
    background: #3b82f6;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-bulk-action svg {
    width: 16px;
    height: 16px;
}

.btn-bulk-danger {
    border-color: #ef4444;
    color: #ef4444;
}

.btn-bulk-danger:hover {
    background: #ef4444;
    color: white;
}

.btn-clear-selection {
    padding: 0.625rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
    background: white;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
}

.btn-clear-selection:hover {
    background: #f8fafc;
    border-color: #ef4444;
    color: #ef4444;
}

.btn-clear-selection svg {
    width: 16px;
    height: 16px;
}

/* ===========================
   QUOTES LIST
   =========================== */
.quotes-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quotes-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ===========================
   QUOTE CARDS
   =========================== */
.quote-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
    transition: all 0.2s ease;
    position: relative;
}

.quote-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

/* Status border indicator */
.quote-card.pending { 
    border-left: 4px solid var(--status-pending); 
}

.quote-card.accepted { 
    border-left: 4px solid var(--status-accepted); 
}

.quote-card.rejected { 
    border-left: 4px solid var(--status-rejected); 
}

.quote-card.sent { 
    border-left: 4px solid var(--status-sent); 
}

.quote-card.draft { 
    border-left: 4px solid var(--status-draft); 
}

.quote-card.archived { 
    border-left: 4px solid var(--status-archived); 
}

/* Quote Card Header */
.quote-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.quote-title {
    flex: 1;
}

.quote-title h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.quote-title .quote-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.quote-title .quote-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #64748b;
}

.quote-title .quote-meta i {
    font-size: 0.75rem;
}

/* Status Badge */
.quote-status,
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.quote-status.pending,
.status-badge.pending { 
    background: #fef3c7; 
    color: #92400e; 
}

.quote-status.accepted,
.status-badge.accepted { 
    background: #d1fae5; 
    color: #065f46; 
}

.quote-status.rejected,
.status-badge.rejected { 
    background: #fee2e2; 
    color: #991b1b; 
}

.quote-status.sent,
.status-badge.sent { 
    background: #dbeafe; 
    color: #1e40af; 
}

.quote-status.draft,
.status-badge.draft { 
    background: #f1f5f9; 
    color: #475569; 
}

.quote-status.signed,
.status-badge.signed { 
    background: #ede9fe; 
    color: #5b21b6; 
}

.quote-status.archived,
.status-badge.archived { 
    background: #e2e8f0; 
    color: #475569; 
}

/* Quote Details (Financial Info) */
.quote-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-item label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.detail-item value {
    font-size: 1rem;
    color: #1e293b;
    font-weight: 500;
}

/* Quote Meta (deprecated - replaced by .quote-title .quote-meta) */
.quote-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.quote-meta-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 600;
}

.quote-meta-value {
    font-size: 1rem;
    color: #1e293b;
    font-weight: 500;
}

/* Quote Actions */
.quote-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.quote-actions button {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: white;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.quote-actions button:hover {
    background: #f8fafc;
    border-color: var(--company-cta, #0f172a);
    color: var(--company-cta, #0f172a);
}

.quote-actions .btn-danger {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.quote-actions .btn-danger:hover {
    background: #fecaca;
    border-color: #fca5a5;
    color: #991b1b;
}

.quote-actions button.primary,
.quote-actions button.btn-primary {
    background: var(--company-cta, #0f172a);
    color: white;
    border: none;
}

.quote-actions button.primary:hover,
.quote-actions button.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* ===========================
   QUOTE ACTIONS MODAL
   =========================== */
.quote-actions-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    animation: fadeIn 0.2s ease-out;
}

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

.quote-actions-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.quote-actions-sheet {
    position: absolute;
    right: 16px;
    left: 16px;
    top: 50%;
    width: min(520px, calc(100% - 32px));
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 2rem);
    margin: 0 auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    border: 1px solid #e2e8f0;
    padding: 0;
    animation: slideInRight 0.3s ease-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-50%);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translate(20px, -50%);
    }
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

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

.quote-actions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem 1rem;
    flex-shrink: 0;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.quote-actions-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
}

.quote-actions-subtitle {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
}

.quote-actions-close {
    border: none;
    background: #dc2626;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.quote-actions-close svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.5;
}

.quote-actions-close:hover {
    background: #b91c1c;
}

.quote-actions-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.5rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.quote-actions-list {
    display: grid;
    gap: 0.75rem;
}

.quote-action-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.quote-action-item:not(.disabled):hover {
    background: #ffffff;
    border-color: var(--primary, #0f172a);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
    cursor: pointer;
}

.quote-action-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0f172a;
    font-weight: 600;
}

.quote-action-label svg {
    width: 18px;
    height: 18px;
    color: #64748b;
}

.quote-action-soon {
    font-size: 0.75rem;
    color: #64748b;
    background: #e2e8f0;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
}

.quote-action-item button {
    margin-left: auto;
}

.quote-action-item.disabled {
    opacity: 0.6;
    background: #f1f5f9;
    cursor: not-allowed;
}

.quote-actions-section {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}

.quote-actions-section label {
    display: block;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.quote-actions-status {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

@media (max-width: 640px) {
    .quote-actions-sheet {
        right: 12px;
        left: 12px;
        top: 50%;
        bottom: auto;
        width: calc(100% - 24px);
        max-height: calc(100vh - 24px);
        transform: translateY(-50%);
    }

    .quote-actions-close {
        width: 44px;
        height: 44px;
    }

    .quote-actions-close svg {
        width: 24px;
        height: 24px;
    }

    .quote-actions-status {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===========================
   EMPTY STATE & LOADING
   =========================== */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--bg-card);
    border-radius: 16px;
    border: 2px dashed var(--border-light);
}

.empty-state i {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.empty-state p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

.loading {
    text-align: center;
    padding: 3rem 2rem;
}

.loading i {
    font-size: 2rem;
    color: var(--company-cta, #0f172a);
    margin-bottom: 1rem;
}

.loading p {
    color: #64748b;
    font-size: 0.9rem;
}

/* ===========================
   MINIMALISTISK STATS UNDER SÖK
   =========================== */
.quotes-stats-strip,
.kpi-dashboard.quotes-stats-strip {
    margin: 0 0 1rem;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.quotes-stats-strip[hidden] {
    display: none !important;
}

.quotes-stats-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.quotes-stats-item strong {
    font-weight: 650;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.quotes-stats-item--won strong {
    color: #15803d;
}

.quotes-stats-item--muted {
    color: #94a3b8;
}

.quotes-stats-item--muted strong {
    color: #64748b;
}

.quotes-stats-item--value strong {
    color: #334155;
}

.quotes-stats-item--followup {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: #9a3412;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.quotes-stats-item--followup strong {
    color: #9a3412;
}

.filter-chip-followup {
    border-color: #fdba74;
    color: #9a3412;
}

.filter-chip-followup.active {
    background: #fff7ed;
    border-color: #ea580c;
    color: #9a3412;
}

.quote-followup-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.35rem 0 0.15rem;
}

.quote-followup-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fdba74;
}

.quotes-stats-sep {
    color: #cbd5e1;
    user-select: none;
}

.quotes-stats-sep--wide {
    margin-left: 0.15rem;
}

/* Legacy KPI-kort (om något fortfarande refererar dem) */
.kpi-dashboard:not(.quotes-stats-strip) {
    margin-bottom: 2rem;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.kpi-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid #f3f4f6;
    display: flex;
    gap: 1rem;
    transition: all 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kpi-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.kpi-icon-blue {
    background: #0f172a;
}

.kpi-icon-orange {
    background: #f59e0b;
}

.kpi-icon-green {
    background: #10b981;
}

.kpi-icon-purple {
    background: #64748b;
}

.kpi-icon-teal {
    background: #0f172a;
}

.kpi-icon-indigo {
    background: #475569;
}

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

.kpi-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.kpi-value-currency {
    font-size: 1.5rem;
}

.kpi-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 0.25rem;
}

.kpi-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.kpi-meta svg {
    width: 12px;
    height: 12px;
}

.kpi-highlight {
    color: var(--primary, #0f172a);
    font-weight: 600;
}

.kpi-warning {
    color: #f59e0b;
    font-weight: 600;
}

/* Quick Actions Bar */
.quick-actions-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-quick-action {
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid #e5e7eb;
    background: white;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-quick-action:hover {
    background: var(--primary, #0f172a);
    color: white;
    border-color: var(--primary, #0f172a);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.btn-quick-action svg {
    width: 16px;
    height: 16px;
}

/* ===========================
   MODERN QUOTE CARDS
   =========================== */
.quote-card-modern {
    position: relative;
}

.quote-external-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.quote-external-accept-meta {
    width: 100%;
    font-size: 0.82rem;
    color: #047857;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.btn-quick-action.btn-ata {
    border-color: #f59e0b;
    color: #b45309;
    background: #fffbeb;
}

.ata-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ata-confirm-modal {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.ata-confirm-modal h3 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.ata-confirm-modal p {
    margin: 0 0 0.75rem;
    color: #475569;
    line-height: 1.5;
}

.ata-confirm-note {
    font-size: 0.9rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 0.75rem;
}

.ata-confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.btn-ata-confirm {
    background: #f59e0b !important;
    color: #fff !important;
    border-color: #f59e0b !important;
}

body.ata-modal-open {
    overflow: hidden;
}

.quote-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 0.75rem;
    margin-top: 0.25rem;
}

.card-header {
    margin-bottom: 1rem;
}

.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    flex: 1;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.status-badge svg {
    width: 14px;
    height: 14px;
}

.priority-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
}

.priority-high {
    background: #fef3c7;
    color: #92400e;
}

.priority-indicator svg {
    width: 16px;
    height: 16px;
}

.card-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #64748b;
}

.meta-item svg {
    width: 14px;
    height: 14px;
}

.card-details-summary {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    margin: 12px 0;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.card-details-summary__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.card-details-summary__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-financials {
    background: #f8fafc;
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

.financial-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

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

.financial-item label {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
}

.financial-item value {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.financial-total {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.value-large {
    font-size: 1.5rem !important;
    color: var(--primary, #0f172a) !important;
}

.value-discount {
    color: #10b981 !important;
}

.financial-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.card-quick-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.card-quick-actions .btn-quick-action {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.card-quick-actions .quote-actions-primary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.card-quick-actions .quote-actions-more {
    position: relative;
}

.card-quick-actions .quote-actions-more > summary {
    list-style: none;
    cursor: pointer;
}

.card-quick-actions .quote-actions-more > summary::-webkit-details-marker {
    display: none;
}

.card-quick-actions .quote-actions-more-menu {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.45rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    min-width: 12rem;
}

@media (max-width: 1024px) {
    .card-quick-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        align-items: stretch;
    }

    .card-quick-actions .quote-actions-primary {
        display: contents;
    }

    .card-quick-actions .quote-actions-primary .btn-quick-action,
    .card-quick-actions .quote-actions-more-toggle {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .card-quick-actions .quote-actions-more {
        width: auto;
        min-width: 0;
        align-self: stretch;
    }

    .card-quick-actions .quote-actions-more > summary {
        width: 100%;
        height: 100%;
        min-height: 44px;
        justify-content: center;
        box-sizing: border-box;
    }

    .card-quick-actions .quote-actions-more[open] {
        grid-column: 1 / -1;
    }

    .card-quick-actions .quote-actions-more-menu {
        width: 100%;
        box-shadow: none;
    }

    .card-quick-actions .quote-actions-more-menu .btn-quick-action {
        width: 100%;
        justify-content: center;
    }

    .quote-card-modern,
    .quote-card {
        padding: 1rem;
    }
}

.btn-accept {
    background: #10b981 !important;
    color: white !important;
    border-color: #10b981 !important;
}

.btn-accept:hover {
    background: #059669 !important;
}

.btn-reject {
    background: #ef4444 !important;
    color: white !important;
    border-color: #ef4444 !important;
}

.btn-reject:hover {
    background: #dc2626 !important;
}

.btn-compare {
    background: #0f172a !important;
    color: white !important;
    border-color: #0f172a !important;
}

.btn-compare:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: white !important;
}

.quotes-compare-discovery {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.quotes-compare-discovery-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    border: 1px solid #93c5fd;
    border-radius: 14px;
}

.quotes-compare-discovery-copy strong {
    display: block;
    font-size: 1rem;
    color: #0f172a;
    margin-bottom: 0.2rem;
}

.quotes-compare-discovery-copy p {
    margin: 0;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.4;
}

.quotes-compare-discovery-copy span {
    font-weight: 600;
    color: #1e293b;
}

.quotes-compare-discovery-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.15rem;
    border: none;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.quotes-compare-discovery-btn:hover {
    background: #1e293b;
}

.quotes-compare-discovery-btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 640px) {
    .quotes-compare-discovery-btn {
        width: 100%;
        justify-content: center;
    }
}

.btn-more {
    margin-left: auto;
}

/* ===========================
   KANBAN BOARD
   =========================== */
.kanban-board {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.kanban-column {
    min-width: 320px;
    background: #f8fafc;
    border-radius: var(--radius-lg);
    padding: 1rem;
    flex-shrink: 0;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.column-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #1e293b;
}

.column-title svg {
    width: 18px;
    height: 18px;
}

.column-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    background: #e2e8f0;
    color: #64748b;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
}

.column-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 200px;
}

.kanban-card {
    background: white;
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e7eb;
    cursor: move;
    transition: all 0.2s ease;
    position: relative;
}

.kanban-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.kanban-card-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.kanban-card-amount {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary, #0f172a);
    margin-bottom: 0.25rem;
}

.kanban-card-meta {
    font-size: 0.75rem;
    color: #94a3b8;
}

.kanban-card-action {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kanban-card-action:hover {
    background: var(--primary, #0f172a);
    border-color: var(--primary, #0f172a);
}

.kanban-card-action:hover svg {
    color: white;
}

.kanban-card-action svg {
    width: 14px;
    height: 14px;
    color: #64748b;
}

/* ===========================
   TIMELINE VIEW
   =========================== */
.timeline-view {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid #f3f4f6;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.timeline-header h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.timeline-header h3 svg {
    width: 24px;
    height: 24px;
    color: var(--primary, #0f172a);
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.timeline-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.date-label {
    font-weight: 700;
    color: #1e293b;
    font-size: 1.125rem;
}

.date-count {
    font-size: 0.875rem;
    color: #94a3b8;
}

.timeline-events {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: 1.5rem;
}

.timeline-event {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeline-event:hover {
    background: #f1f5f9;
    transform: translateX(4px);
}

.event-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-accepted .event-icon {
    background: #d1fae5;
}

.event-accepted .event-icon svg {
    color: #065f46;
}

.event-created .event-icon,
.event-draft .event-icon {
    background: #dbeafe;
}

.event-created .event-icon svg,
.event-draft .event-icon svg {
    color: #1e40af;
}

.event-sent .event-icon {
    background: #e0e7ff;
}

.event-sent .event-icon svg {
    color: #4338ca;
}

.event-rejected .event-icon {
    background: #fee2e2;
}

.event-rejected .event-icon svg {
    color: #991b1b;
}

.event-icon svg {
    width: 20px;
    height: 20px;
}

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

.event-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.event-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.event-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary, #0f172a);
}

/* ===========================
   ANALYTICS MODAL
   =========================== */
.analytics-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.analytics-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.analytics-modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.analytics-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f3f4f6;
}

.analytics-modal-header h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.analytics-modal-header h2 svg {
    width: 24px;
    height: 24px;
    color: var(--primary, #0f172a);
}

.btn-close-modal {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-close-modal:hover {
    background: #f8fafc;
    border-color: var(--company-cta, #0f172a);
}

.btn-close-modal svg {
    width: 18px;
    height: 18px;
    color: #64748b;
}

.analytics-modal-body {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.analytics-card {
    background: #f8fafc;
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
}

.analytics-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1rem 0;
}

.analytics-card h3 svg {
    width: 20px;
    height: 20px;
    color: var(--primary, #0f172a);
}

/* Funnel Chart */
.funnel-chart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.funnel-stage {
    background: var(--primary, #0f172a);
    padding: 1rem;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-weight: 600;
    transition: all 0.2s ease;
}

.funnel-stage:hover {
    transform: translateX(4px);
}

.funnel-summary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    color: var(--primary, #0f172a);
}

/* Insights */
.insights-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.insight-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: var(--radius-md);
    border-left: 4px solid #94a3b8;
}

.insight-warning {
    border-left-color: #f59e0b;
}

.insight-warning .insight-icon {
    background: #fef3c7;
}

.insight-warning .insight-icon svg {
    color: #f59e0b;
}

.insight-info {
    border-left-color: #3b82f6;
}

.insight-info .insight-icon {
    background: #dbeafe;
}

.insight-info .insight-icon svg {
    color: #3b82f6;
}

.insight-success {
    border-left-color: #10b981;
}

.insight-success .insight-icon {
    background: #d1fae5;
}

.insight-success .insight-icon svg {
    color: #10b981;
}

.insight-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insight-icon svg {
    width: 20px;
    height: 20px;
}

.insight-content {
    flex: 1;
}

.insight-content strong {
    display: block;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.insight-content p {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.stat-item {
    background: white;
    padding: 1rem;
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary, #0f172a);
}

.analytics-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid #f3f4f6;
}

.btn-secondary,
.btn-primary {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.btn-secondary {
    border: 1px solid #e5e7eb;
    background: white;
    color: #64748b;
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.btn-primary {
    border: none;
    background: var(--primary, #0f172a);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    background: var(--primary-light, #1e293b);
}

.btn-primary svg,
.btn-secondary svg {
    width: 16px;
    height: 16px;
}

/* ===========================
   RESPONSIVE - MOBILE
   =========================== */
@media (max-width: 768px) {
    .page-container {
        padding: 1rem 0.75rem;
        margin-top: calc(80px + var(--safe-area-inset-top, 0px));
        padding-bottom: calc(100px + var(--safe-area-inset-bottom, 0px));
    }
    
    /* Dölj desktop header i mobilvy */
    .page-header {
        display: none;
    }
    
    /* Mobil: visa dropdown, dölj horisontella flikar */
    #quotesTabsDesktop {
        display: none !important;
    }
    .quotes-tabs-dropdown {
        display: block !important;
    }
    .quotes-tabs-dropdown-trigger {
        min-height: 44px;
    }
    .quotes-tabs-dropdown-option {
        min-height: 44px;
    }
    
    /* Filters bar: stacked layout, touch targets */
    .filters-bar-sticky {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .search-input-wrapper {
        width: 100%;
    }
    .filter-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }
    .btn-filters-toggle {
        min-height: 44px;
    }
    .view-mode-toggle {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .view-mode-toggle .view-mode {
        min-width: 44px;
        min-height: 44px;
        height: 44px;
        padding: 0 0.5rem;
    }
    .view-mode-toggle .view-mode svg {
        width: 22px;
        height: 22px;
    }
    .view-mode-toggle .view-mode-label {
        font-size: 0.75rem;
    }
    
    .quote-card {
        padding: 1.5rem;
    }
    
    .quote-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .quote-details {
        grid-template-columns: 1fr;
    }
    
    .quote-actions {
        flex-direction: column;
    }
    
    .quote-actions button {
        width: 100%;
        justify-content: center;
    }
    
    /* KPI / stats strip Mobile */
    .quotes-stats-strip-inner {
        font-size: 0.8125rem;
        gap: 0.25rem 0.45rem;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .kpi-card {
        padding: 1rem;
    }
    
    .kpi-icon {
        width: 40px;
        height: 40px;
    }
    
    .kpi-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .kpi-value {
        font-size: 1.5rem;
    }
    
    .quick-actions-bar {
        flex-direction: column;
    }
    
    .btn-quick-action {
        width: 100%;
        justify-content: center;
    }
    
    /* Card Quick Actions Mobile — covered by ≤1024 rules */
    
    .financial-row {
        grid-template-columns: 1fr;
    }
    
    /* Kanban Mobile */
    .kanban-board {
        flex-direction: column;
    }
    
    .kanban-column {
        min-width: 100%;
    }
    
    /* Timeline Mobile */
    .timeline-view {
        padding: 1rem;
    }
    
    .timeline-events {
        padding-left: 0;
    }
    
    /* ========== Slutgiltig offert-modal (quote-details-modal) ========== */
    .quote-details-modal .project-details-content {
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        margin: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .quote-details-modal .quote-lines-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
    }
    .quote-details-modal .quote-lines-table table {
        min-width: 480px;
    }
    .quote-details-modal .quote-modal-cost-grid {
        grid-template-columns: 1fr !important;
    }
    .quote-details-modal .quote-modal-info-grid {
        grid-template-columns: 1fr !important;
    }
    .quote-details-modal .modal-footer {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }
    .quote-details-modal .modal-footer .btn-secondary,
    .quote-details-modal .modal-footer .btn-primary {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    .quote-details-modal .modal-close-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .filters-grid {
        grid-template-columns: 1fr;
    }
    
    .quote-title h3,
    .card-title {
        font-size: 1.125rem;
    }
    
    .card-title-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .quote-checkbox {
        margin-right: 0.5rem;
        margin-top: 0.125rem;
    }
}

.quote-card--rejected {
    opacity: 0.92;
    border-left: 4px solid var(--status-rejected) !important;
    background: #fffbfb;
}

.quote-rejection-reason {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #991b1b;
}

/* Företag + company-nav på iPad (769–1024): samma bottenutrymme / touch som telefon */
@media (max-width: 1024px) {
    body.company-mobile-nav-active .page-container,
    body.company-page .page-container {
        padding-bottom: calc(100px + var(--safe-area-inset-bottom, 0px));
    }

    body.company-mobile-nav-active .view-mode-toggle .view-mode,
    body.company-page .view-mode-toggle .view-mode {
        min-width: 44px;
        min-height: 44px;
        height: 44px;
        padding: 0 0.5rem;
    }

    body.company-mobile-nav-active .quote-checkbox,
    body.company-page .quote-checkbox {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }

    body.company-mobile-nav-active .card-quick-actions,
    body.company-page .card-quick-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    body.company-mobile-nav-active .card-quick-actions .btn-sm,
    body.company-page .card-quick-actions .btn-sm {
        min-height: 44px;
    }
}

/* Quote validity editor */
.quote-validity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #fde68a;
  background: #fffbeb;
  color: #92400e;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.quote-validity-chip:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}
.quote-validity-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.quote-validity-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.quote-validity-sheet {
  position: relative;
  width: min(400px, 100%);
  max-width: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  padding: 1.25rem 1.35rem 1.15rem;
  overflow: hidden;
  box-sizing: border-box;
}
.quote-validity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.quote-validity-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #0f172a;
}
.quote-validity-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
  padding: 0.15rem 0.35rem;
}
.quote-validity-hint {
  margin: 0 0 0.85rem;
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.4;
}
.quote-validity-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}
.quote-validity-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-width: 0;
  width: auto;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}
.quote-validity-preset:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  box-shadow: none;
  transform: none;
}
.quote-validity-preset.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
.quote-validity-body label:not(.quote-validity-notify) {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #334155;
}
.quote-validity-body .form-input,
.quote-validity-body input[type="date"] {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.9rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: #0f172a;
}
.quote-validity-notify {
  display: flex !important;
  align-items: flex-start;
  gap: 0.55rem;
  font-weight: 500 !important;
  margin: 0 0 1.15rem !important;
  cursor: pointer;
  color: #334155;
}
.quote-validity-notify input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.quote-validity-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
}
.quote-validity-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-width: 0;
  width: auto;
  max-width: none;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: none;
  transform: none;
  position: static;
  overflow: visible;
}
.quote-validity-btn--ghost {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}
.quote-validity-btn--ghost:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
  box-shadow: none;
  transform: none;
}
.quote-validity-btn--primary {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
.quote-validity-btn--primary:hover {
  background: #1e293b;
  border-color: #1e293b;
  box-shadow: none;
  transform: none;
}
.quote-validity-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ===========================
   DARK MODE (företagsyta)
   =========================== */
body.dark-mode {
  background: var(--company-bg-subtle, #0f172a) !important;
  background-color: var(--company-bg-subtle, #0f172a) !important;
  color: var(--company-text, #f8fafc);
}

body.dark-mode .page-container {
  background-color: transparent;
}

body.dark-mode .page-header {
  background: var(--company-bg, #1e293b);
  border-color: var(--company-border, #334155);
  color: var(--company-text, #f8fafc);
}

body.dark-mode .page-header h1 {
  color: var(--company-text, #f8fafc);
}

body.dark-mode .page-header p {
  color: var(--company-text-muted, #94a3b8);
}

body.dark-mode .quote-card,
body.dark-mode .quotes-list-item,
body.dark-mode .filter-bar,
body.dark-mode .stats-strip,
body.dark-mode .quotes-stats-strip,
body.dark-mode .quotes-stats-strip-inner,
body.dark-mode .filters-bar-sticky,
body.dark-mode .card-financials,
body.dark-mode .card-details-summary,
body.dark-mode .empty-state {
  background: var(--company-bg, #1A201C);
  border-color: var(--company-border, rgba(199, 204, 209, 0.18));
  color: var(--company-text, #F2EFE9);
}

body.dark-mode .btn-filters-toggle {
  background: #243028;
  border-color: var(--company-border, rgba(199, 204, 209, 0.18));
  color: var(--company-text, #F2EFE9);
}

body.dark-mode .btn-filters-toggle:hover,
body.dark-mode .btn-filters-toggle.active {
  background: #2A322E;
  color: #F2EFE9;
}

body.dark-mode .card-financials {
  background: #121614;
}

body.dark-mode .financial-item label {
  color: var(--company-text-muted, #A8B0AA);
}

body.dark-mode .financial-item value,
body.dark-mode .value-large {
  color: var(--company-text, #F2EFE9);
}

body.dark-mode .card-quick-actions .quote-actions-more-menu {
  background: #1A201C;
  border-color: var(--company-border, rgba(199, 204, 209, 0.18));
}

body.dark-mode .quote-validity-btn--ghost {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark-mode .quote-validity-btn--ghost:hover {
  background: #1e293b;
  border-color: #475569;
  color: #f8fafc;
}

body.dark-mode .quote-validity-btn--primary {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #0f172a;
}

body.dark-mode .quote-validity-btn--primary:hover {
  background: #f8fafc;
  border-color: #f8fafc;
}

@media print {
  body.dark-mode,
  body.dark-mode .page-container,
  body.dark-mode .page-header,
  body.dark-mode .quote-card {
    background: #fff !important;
    color: #0f172a !important;
  }
}