/* ============================================
   EEVAA EVENT MANAGEMENT - STIILID
   ============================================ */

/* Onest font (EEVAA brändifont) — self-hosted for zero external dependency */
@font-face { font-family: 'Onest'; src: url('../fonts/onest-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('../fonts/onest-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('../fonts/onest-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('../fonts/onest-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    /* ============================================
       EEVAA DESIGN SYSTEM TOKENS
       ============================================ */

    /* === TYPOGRAPHY === */
    --font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* === BRAND COLORS === */
    --primary: #ff5600;          /* EEVAA oranž */
    --primary-text: #d14600;     /* WCAG AA oranž teksti jaoks valgel taustal (4.64:1) */
    --primary-dark: #7e00ff;     /* Brand purple — used as secondary gradient end (same as --secondary) */
    --primary-light: #ff7a33;    /* Heledam oranž */
    --secondary: #7e00ff;        /* Brand purple — same value as --primary-dark */
    --brand-gradient: linear-gradient(135deg, #ff5600 0%, #7e00ff 100%);

    /* === SEMANTIC COLORS === */
    --success: #10b981;
    --success-dark: #059669;
    --success-light: #d1fae5;
    --success-text: #065f46;

    --warning: #f59e0b;
    --warning-dark: #d97706;
    --warning-light: #fef3c7;
    --warning-text: #92400e;

    --danger: #ef4444;
    --danger-dark: #dc2626;
    --danger-light: #fee2e2;
    --danger-text: #991b1b;

    --info: #2563eb;          /* WCAG AA sinine — eristub --secondary lillast */
    --info-dark: #1d4ed8;
    --info-light: #dbeafe;
    --info-text: #1e40af;     /* WCAG AA sinine tekst heledal taustal */

    --purple: #8b5cf6;
    --purple-dark: #7c3aed;
    --purple-light: #ede9fe;
    --purple-text: #5b21b6;

    /* === NEUTRAL COLORS === */
    /* Warm neutral ramp — aligned with EEVAA brand.json (was Tailwind slate). */
    /* Makes orange brand color read saturated against neutrals vs. cool slate. */
    --white: #ffffff;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #8a8a8a;  /* Darkened from #a3a3a3 for WCAG AA contrast (4.5:1) */
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    --text-primary: #111827;     /* audit: was undefined, fallback value matched */

    /* === TYPOGRAPHY SCALE (7 sizes) === */
    --text-stat: 1.75rem;         /* 28px — KPI/stat card values */
    --text-page-title: 1.5rem;    /* 24px — page titles only */
    --text-section: 1rem;         /* 16px — section headers */
    --text-data: 0.875rem;        /* 14px — primary data, inputs, buttons */
    --text-body: var(--text-data); /* alias — dropdown/menu item text (audit: was undefined) */
    --text-secondary: 0.8125rem;  /* 13px — supporting info, descriptions */
    --text-micro: 0.6875rem;      /* 11px — column headers, badges, timestamps */

    /* === BORDER RADIUS (4 steps) === */
    --radius-sm: 4px;         /* small elements: badges, tags */
    --radius: 8px;            /* default: buttons, inputs, cards */
    --radius-lg: 12px;        /* large: modals, panels */
    --radius-full: 9999px;    /* pills, avatars */

    /* Legacy aliases */
    --border-radius: var(--radius);
    --border-radius-lg: var(--radius-lg);

    /* === SPACING SCALE (0.25rem = 4px step) === */
    /* Audit 2026-04-17: 39 unique padding values leitud. Scale konsolideerimiseks. */
    --space-1:  0.25rem;      /*  4px */
    --space-2:  0.5rem;       /*  8px */
    --space-3:  0.75rem;      /* 12px */
    --space-4:  1rem;         /* 16px */
    --space-5:  1.25rem;      /* 20px */
    --space-6:  1.5rem;       /* 24px */
    --space-8:  2rem;         /* 32px */
    --space-10: 2.5rem;       /* 40px */
    --space-12: 3rem;         /* 48px */
    --space-16: 4rem;         /* 64px */

    /* === LAYOUT === */
    --sidebar-width: 260px;
    --header-height: 64px;

    /* === BORDERS === */
    --card-border: var(--gray-200);
    --border: #e5e7eb;           /* audit: was undefined, fallback value matched */

    /* === SHADOWS === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px rgba(255, 86, 0, 0.25);

    /* === TRANSITIONS === */
    --transition: all 0.2s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.3s ease;

    /* === STATUS GRADIENTS (for stat cards) === */
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-info: linear-gradient(135deg, #7e00ff 0%, #5500bb 100%);
    --gradient-purple: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --gradient-gray: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);

    /* === SURFACE === */
    --bg-surface: #ffffff;
    --surface-alt: #f8f9fb;      /* audit: was undefined, fallback value matched */
    --dark-sidebar: #0f0f23;     /* audit: was undefined, fallback value matched (theme-agnostic overlay bg) */
    --card-bg: var(--white);     /* audit: was undefined (no fallback) — light-mode card surface */

    /* === Z-INDEX SCALE === */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-sidebar: 300;
    --z-modal-backdrop: 1000;
    --z-modal: 1010;
    --z-modal-above: 1100;
    --z-modal-top: 1200;
    --z-popover: 1300;
    --z-toast: 2000;
    --z-tooltip: 2500;
    --z-confirm: 3000;

    /* === EXTENDED TRANSITIONS === */
    --transition-modal: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-color: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

/* Skip-to-content link (CSS-only, no inline JS) */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 99999;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: white;
    text-decoration: none;
    font-weight: 600;
}
.skip-to-content:focus {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    overflow: visible;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overscroll-behavior-x: none; /* Takista Safari back-gesture SPA-s */
}

body {
    font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--gray-100);
    color: var(--gray-800);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior-x: none;
}

/* Brand selection color */
::selection {
    background: rgba(255, 86, 0, 0.15);
    color: inherit;
}

/* Scrollbar — light mode */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

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

a:hover {
    text-decoration: underline;
}

/* Sisselogimise leht */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
    padding: 1rem;
}

.login-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
}

.login-card h1 {
    font-size: var(--text-page-title);
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--gray-900);
}

.login-card p {
    text-align: center;
    color: var(--gray-500);
    margin-bottom: 2rem;
}

/* Rakenduse põhistruktuur */
.app-container {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Külgriba - EEVAA brändi gradient */
.sidebar {
    --primary-text: #ff5600; /* Sidebar stays dark in both themes. */
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #1a1a2e 0%, #16162a 50%, #0d0d1a 100%);
    color: #fff;
    position: fixed;
    height: 100vh;
    height: 100dvh;
    left: 0;
    top: 0;
    z-index: var(--z-sidebar);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    border-right: 1px solid rgba(255, 86, 0, 0.1);
}

.sidebar-header {
    padding: 1.25rem;
    border-bottom: 1px solid var(--gray-700);
}

.sidebar-logo {
    font-size: var(--text-page-title);
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-logo svg {
    width: 32px;
    height: 32px;
}

.sidebar-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.nav-item {
    position: relative; /* required for .nav-item.active::before pseudo-element */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: #b0b8c8;
    cursor: pointer;
    transition: var(--transition);
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: rgba(255, 86, 0, 0.1);
    color: #fff;
}

.nav-item.active {
    background: rgba(255, 86, 0, 0.15);
    color: var(--primary-text);
    border-left-color: var(--primary);
}

.nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav-section {
    padding: 1rem 1.25rem 0.5rem;
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8892a4;
}

.sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--gray-700);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-data);
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-weight: 500;
    font-size: var(--text-data);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.user-role {
    font-size: var(--text-secondary);
    color: rgba(255, 255, 255, 0.55);
}

/* Põhisisu */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    min-width: 0;
}

/* Ülemine riba */
.top-bar {
    background: var(--white);
    height: var(--header-height);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.page-title {
    font-size: var(--text-page-title);
    font-weight: 600;
    color: var(--gray-900);
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 1 auto;
    min-width: 0;
}

.top-bar { gap: 1.5rem; }
.top-bar-actions > button { flex-shrink: 0; }
#current-date { white-space: nowrap; }
@media (min-width: 769px) {
    .top-bar > div:first-child { flex: 0 0 auto; max-width: 38%; }
}
@media (min-width: 769px) and (max-width: 1279px) {
    #current-date { display: none; }
}
@media (max-width: 768px) {
    .top-bar-actions { flex-shrink: 0; }
}

.top-bar > div:first-child {
    min-width: 0;
}

.top-bar .page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-menu-btn {
    flex-shrink: 0;
}

/* Sisu ala */
.content-area {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
    padding-bottom: 2rem;
}

/* Kaardid */
.card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition);
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title {
    font-size: var(--text-section);
    font-weight: 600;
    color: var(--gray-900);
}

.card-body {
    padding: 1.5rem;
}

/* Statistika kaardid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--card-border);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

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

.stat-icon.blue { background: var(--info-light); color: var(--primary-text); }
.stat-icon.green { background: var(--success-light); color: var(--success); }
.stat-icon.yellow { background: var(--warning-light); color: var(--warning); }
.stat-icon.red { background: var(--danger-light); color: var(--danger); }
.stat-icon.purple { background: var(--purple-light); color: var(--purple-dark); }

.stat-icon svg {
    width: 24px;
    height: 24px;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: var(--text-stat);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

.stat-label {
    font-size: var(--text-data);
    color: var(--gray-500);
    margin-top: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-change {
    font-size: var(--text-secondary);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stat-change.positive { color: var(--success); }
.stat-change.negative { color: var(--danger); }

/* Tabelid */
.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

th {
    font-weight: 600;
    font-size: var(--text-micro);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    background: var(--gray-50);
}

tr:hover td {
    background: var(--gray-50);
}

/* Staatuse märgised */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--text-micro);
    font-weight: 500;
}

.badge-success { background: var(--success-light); color: var(--success-text); }
.badge-warning { background: var(--warning-light); color: var(--warning-text); }
.badge-danger { background: var(--danger-light); color: var(--danger-text); }
.badge-info { background: var(--info-light); color: var(--info-text); }
.badge-gray { background: var(--gray-200); color: var(--gray-700); }
.badge-primary { background: rgba(255, 86, 0, 0.12); color: var(--primary-text); }
.badge-purple { background: var(--purple-light, rgba(126, 0, 255, 0.12)); color: var(--purple-text, #7e00ff); }

/* Nupud */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--border-radius);
    font-size: var(--text-data);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    min-height: 44px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--gray-300);
}

.btn-success {
    background: var(--success);
    color: var(--white);
}

.btn-success:hover:not(:disabled) {
    background: var(--success-dark);
}

.btn-danger {
    background: var(--danger-dark);
    color: var(--white);
}

.btn-danger:hover:not(:disabled) {
    background: var(--danger-dark);
}

.btn-warning {
    background: #b45309; /* Darkened from --warning (#f59e0b) for WCAG AA 4.5:1 contrast with white */
    color: white;
    border: none;
}
.btn-warning:hover:not(:disabled) {
    background: var(--warning-text);
    color: white;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
}

.btn-outline:hover:not(:disabled) {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--text-data);
}

.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--text-section);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius);
    color: var(--gray-500);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-icon:hover:not(:disabled) {
    background: var(--gray-100);
    color: var(--gray-700);
}

.btn svg {
    width: 18px;
    height: 18px;
}

/* Vormielemendid */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: var(--text-data);
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

/* .form-textarea still used in older modals (note/subcontractor/inventory/installation/email) */
.form-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: var(--text-data);
    transition: var(--transition);
    background: var(--white);
}

/* Globaalne focus-visible stiil kõigile interaktiivsetele elementidele */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Nav items, tabs and other interactive non-button elements need explicit focus ring
   because browsers don't always apply :focus-visible to div[tabindex] */
.nav-item:focus-visible,
.tab:focus-visible,
.event-tab:focus-visible,
.timeline-filter-btn:focus-visible,
.timeline-item:focus-visible,
.bottom-nav-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Automaatselt kasvav textarea, app-wide (2026-09-04): tühjana 8 rida kõrge, laieneb sisuga.
   min-height on !important, sest event-description/new-note-content kannavad legacy
   inline style="min-height:...px" mis muidu selle üle kirjutaks. field-sizing:content
   kasvatab Chrome'is (123+) natiivselt; Safari jaoks vt app.js textareaAutoGrow fallback. */
textarea {
    min-height: calc(8 * 1.5em + 1rem + 2px) !important;
    overflow-y: hidden;
    resize: vertical;
    field-sizing: content;
}

.form-row {
    display: grid;
    gap: 1rem;
}

.form-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
    margin-top: 1rem;
}

/* Modaalaknad */
.modal-overlay {
    position: fixed;
    inset: 0;
    /* Tihedam taust + blur — modaal hüppab fookusesse, taust kaob kontekstiks */
    background: rgba(13, 13, 15, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-modal), visibility var(--transition-modal);
}

.modal-overlay:not(.active) {
    display: none;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Kliendi modal peab olema teiste modaalide peal */
#client-modal {
    z-index: var(--z-modal-above);
}

/* Äriregistri otsing peab olema kliendi modali peal */
#company-search-modal {
    z-index: var(--z-modal-top);
}

.modal {
    background: var(--white);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.96) translateY(8px);
    transition: transform var(--transition-modal);
}

/* Form modalis kui flex konteiner */
.modal form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-overlay.active .modal {
    transform: scale(1) translateY(0);
}

.modal-lg { max-width: 1000px; }
.modal-xl { max-width: 1400px; }

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: var(--text-section);
    font-weight: 600;
    color: var(--gray-900);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius);
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}

.modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0; /* Footer ei kahane */
    background: var(--white);
    position: sticky;
    bottom: 0;
}

/* Otsing ja filtrid */
.search-input {
    width: 100%;
    padding: 0.625rem 0.875rem 0.625rem 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: var(--text-data);
}

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

/* Paigutus */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--gray-500);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.empty-state h3 {
    font-size: var(--text-section);
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

/* Teated */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 300px;
    max-width: 500px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.toast-success { border-left: 4px solid var(--success); }
.toast-error { border-left: 4px solid var(--danger); }
.toast-warning { border-left: 4px solid var(--warning); }
.toast-info { border-left: 4px solid var(--info); }

/* Laadimine */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 1.5rem;
}

.tab {
    padding: 0.75rem 1.25rem;
    font-size: var(--text-data);
    font-weight: 500;
    color: var(--gray-500);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
}

.tab:hover {
    color: var(--gray-700);
}

.tab.active {
    color: var(--primary-text);
    border-bottom-color: var(--primary);
}

/* Kalender */
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.calendar-views,
.calendar-view-group,
.calendar-filter-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.calendar-views {
    margin-left: auto;
}

.calendar-title {
    font-size: var(--text-section);
    font-weight: 600;
    min-width: 140px;
    text-align: center;
}

.calendar-day-add {
    margin-left: auto;
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--primary-text);
    font: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.calendar-day-add:hover,
.calendar-day-add:focus-visible {
    background: var(--primary);
    color: #fff;
}

.calendar-day-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.calendar-day-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--gray-200);
    color: var(--gray-700);
    font-size: var(--text-micro);
    font-weight: 700;
    line-height: 1;
}

.calendar-mobile-indicator {
    display: none;
}

.calendar-event.is-cancelled,
#day-events-modal .is-cancelled {
    opacity: 1;
    filter: grayscale(1);
}

.calendar-event.is-cancelled .calendar-event-title,
#day-events-modal .is-cancelled strong {
    text-decoration: line-through;
}

/* ===== KLIENDI AJALUGU ===== */
.client-timeline {
    position: relative;
    padding-left: 2rem;
}

.client-timeline::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.timeline-item {
    position: relative;
    padding: 0.75rem 0 0.75rem 1.5rem;
    border-bottom: 1px solid var(--gray-50);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.timeline-item:hover {
    background-color: var(--gray-50);
}

.timeline-item:last-child {
    border-bottom: none;
}

.timeline-icon {
    position: absolute;
    left: -1.35rem;
    top: 0.85rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-data);
    z-index: 1;
}

.timeline-item.type-quote .timeline-icon {
    border-color: var(--secondary);
    background: linear-gradient(135deg, rgba(126, 0, 255, 0.06) 0%, rgba(126, 0, 255, 0.03) 100%);
}

.timeline-item.type-invoice .timeline-icon {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(255, 86, 0, 0.06) 0%, rgba(255, 86, 0, 0.03) 100%);
}

.timeline-item.type-payment .timeline-icon {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(16,185,129,0.03) 100%);
}

.timeline-item.type-event .timeline-icon {
    border-color: var(--info);
    background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(37,99,235,0.03) 100%);
}

.timeline-item.type-activity .timeline-icon {
    border-color: var(--gray-400);
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-50) 100%);
}

.timeline-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

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

.timeline-title {
    font-size: var(--text-data);
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: 0.15rem;
    word-break: break-word;
}

.timeline-date {
    font-size: var(--text-micro);
    color: var(--gray-500);
}

.timeline-amount {
    font-weight: 600;
    font-size: var(--text-data);
    white-space: nowrap;
    color: var(--primary-text);
}

.timeline-status {
    font-size: var(--text-micro);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
    white-space: nowrap;
    background: var(--gray-100);
    color: var(--gray-600);
}

.timeline-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.timeline-filter-btn {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--gray-200);
    background: var(--white);
    font-size: var(--text-data);
    cursor: pointer;
    transition: var(--transition-fast);
    color: var(--gray-700);
}

.timeline-filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary-text);
}

.timeline-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

[data-theme="dark"] .timeline-icon {
    background: var(--dark-card);
    border-color: var(--dark-border);
}

[data-theme="dark"] .client-timeline::before {
    background: var(--dark-border);
}

[data-theme="dark"] .timeline-item {
    border-bottom-color: var(--dark-border);
}

[data-theme="dark"] .timeline-item:hover {
    background-color: var(--dark-card);
}

[data-theme="dark"] .timeline-status {
    background: var(--dark-card);
    color: var(--gray-400);
}

[data-theme="dark"] .timeline-title {
    color: var(--dark-text);
}

/* Responsiivne */
@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        z-index: var(--z-modal-backdrop);
        top: 0;
        left: 0;
        bottom: 0;
        transition: transform 0.3s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: calc(var(--z-modal-backdrop) - 1);
    }

    .sidebar.open + .sidebar-overlay,
    .sidebar.open ~ .sidebar-overlay {
        display: block;
    }

    .main-content {
        margin-left: 0;
    }

    .mobile-menu-btn {
        display: inline-flex !important;
    }

    .form-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Eemaldatud PR #5: input width fix oli vastuolus uue .global-search-wrapper
       responsive layout'iga (flex: 1; max-width: 420px). Wrapper ise käitub
       responsive'lt; input täidab wrapperit (width: 100%). */
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .form-row,
    .form-row-2,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    .modal {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }

    .modal-xl {
        width: 100% !important;
    }

    .table-container {
        margin: 0 -1rem;
        overflow-x: auto;
    }

    th, td {
        padding: 0.5rem;
        font-size: var(--text-secondary);
    }

    .top-bar {
        padding: 0.5rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .page-title {
        font-size: var(--text-section);
    }

    .content-area {
        padding: 1rem;
    }

    /* Eemaldatud PR #5 — vt @media (max-width: 1024px) kommentaari */

    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }

    .modal-footer {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer > div {
        width: 100%;
        flex-wrap: wrap;
    }

    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: var(--text-section);
    }
}

/* Utiliidid */
.text-center { text-align: center; }
.text-muted { color: var(--gray-500); }

.mb-4 { margin-bottom: 1.5rem; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }

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

/* Arverea inventarivalik säilitab ka töölaua tabelis eraldi puuteala. */
#invoice-modal .invoice-item-description-controls .invoice-item-inventory {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Prindi stiilid — merged with the duplicate @media print block that was near line 4064 */
@media print {
    .sidebar,
    .top-bar,
    .bottom-nav,
    .fab-button,
    .fab-menu,
    #dev-switcher,
    .no-print {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .content-area {
        padding: 0 !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid var(--gray-300);
    }

    .modal-overlay {
        position: static !important;
    }
}

/* ==========================================
   EVENT MANAGEMENT STIILID
   ========================================== */

/* Dashboard year stat cards (desktop/mobile toggle) */
.dash-year-stat-desktop {
    display: flex;
}
.dash-year-stat-mobile {
    display: none;
}

/* Event tabid */
#event-tabs-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
}
#event-tabs-bar::-webkit-scrollbar {
    display: none;
}

.event-tab {
    flex: 1 1 0%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: var(--text-data);
    color: var(--gray-600);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 0;
}

.event-tab:hover {
    color: var(--primary-text);
    background: var(--gray-50);
}

.event-tab.active {
    color: var(--primary-text);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.tab-badge {
    background: var(--primary);
    color: white;
    font-size: var(--text-micro);
    padding: 0.125rem 0.4rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
}

.event-tab-content {
    display: none;
}

.event-tab-content.active {
    display: block;
}

/* Faili üleslaadimise ala */
.file-dropzone {
    border: 2px dashed var(--gray-300);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: var(--transition);
    background: var(--gray-50);
}

.file-dropzone:hover,
.file-dropzone.dragover {
    border-color: var(--primary);
    background: rgba(255, 86, 0, 0.05);
}

/* Faili kaart */
.file-card {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    text-align: center;
    position: relative;
}

.file-card img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
}

.file-card .file-icon {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
}

.file-card .file-name {
    font-size: var(--text-secondary);
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-card .file-delete {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    border: none;
    cursor: pointer;
    font-size: var(--text-micro);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.file-card:hover .file-delete,
.file-card:hover .file-rename,
.file-card:focus-within .file-delete,
.file-card:focus-within .file-rename,
.file-card .file-delete:focus-visible,
.file-card .file-rename:focus-visible {
    opacity: 1;
}

.file-card .file-rename {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    font-size: var(--text-micro);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.file-card .file-delete:focus-visible,
.file-card .file-rename:focus-visible {
    outline: 2px solid var(--primary-text);
    outline-offset: 2px;
}

@media screen and (max-width: 1024px), screen and (hover: none) {
    .file-card .file-delete,
    .file-card .file-rename {
        opacity: 1 !important;
    }
}

.file-card.previewable {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.file-card.previewable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.file-card.previewable::after {
    content: '🔍';
    position: absolute;
    bottom: 0.25rem;
    left: 0.25rem;
    font-size: var(--text-micro);
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.15s;
}

.file-card.previewable:hover::after {
    opacity: 1;
}

/* .form-row-3 is defined above in the form section — removed duplicate */

/* .status-X ja .badge.X (dead) — audit 2026-04-17: 0 usage
 * 3 badge/status perekonda olid paralleelselt; ainult .status-badge.X
 * (allpool) on kasutuses. */

/* Status select värvid */
.status-select option[value="draft"] { background: var(--gray-100); }
.status-select option[value="sent"] { background: var(--info-light); }
.status-select option[value="accepted"], .status-select option[value="paid"] { background: var(--success-light); }
.status-select option[value="rejected"], .status-select option[value="cancelled"] { background: var(--danger-light); }

/* Staatuse badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: var(--text-micro);
    font-weight: 600;
}

.status-badge.draft { background: var(--gray-200); color: var(--gray-700); }
.status-badge.sent { background: var(--info-light); color: var(--info-text); }
.status-badge.accepted, .status-badge.paid, .status-badge.confirmed { background: var(--success-light); color: var(--success-text); }
.status-badge.rejected, .status-badge.cancelled { background: var(--danger-light); color: var(--danger-text); }
.status-badge.pending, .status-badge.scheduled { background: var(--warning-light); color: var(--warning-text); }
.status-badge.completed { background: var(--success-light); color: var(--success-text); }
.status-badge.overdue { background: var(--danger-light); color: var(--danger-text); }
.status-badge.expired { background: var(--warning-light); color: var(--warning-text); }

/* ==========================================
   KOMPAKTSED TABELISISESED VORMID
   ========================================== */

/* Tabelilahtreid kompaktsemaks modalis */
.modal table th,
.modal table td {
    padding: 0.5rem 0.5rem;
}

/* Pakkumise tabeli esimene veerg (tüüp) */
table td:first-child span {
    white-space: nowrap;
}

/* Kustutamise nupud väiksemaks */
table .btn-danger.btn-sm {
    padding: 0.25rem 0.5rem;
    min-width: 28px;
}

/* ==========================================
   FLATPICKR KOHANDUSED
   ========================================== */

/* Flatpickr põhistiil */
.flatpickr-calendar {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-200);
    font-family: 'Onest', sans-serif;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    display: none;
}

/* Päise stiil */
.flatpickr-months {
    background: var(--primary);
    border-radius: var(--radius-lg) 10px 0 0;
    padding: 0.5rem 0;
}

.flatpickr-months .flatpickr-month {
    color: white;
    fill: white;
}

.flatpickr-current-month {
    color: white;
    font-weight: 600;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent;
    color: white;
    font-weight: 600;
}

.flatpickr-current-month input.cur-year {
    color: white;
    font-weight: 600;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: white;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

/* Nädalapäevad */
.flatpickr-weekdays {
    background: var(--gray-50);
}

.flatpickr-weekday {
    color: var(--gray-600);
    font-weight: 600;
    font-size: var(--text-micro);
}

/* Kuupäeva lahtrid */
.flatpickr-day {
    border-radius: var(--radius);
    color: var(--gray-700);
    font-weight: 500;
}

.flatpickr-day:hover {
    background: var(--gray-100);
    border-color: var(--gray-200);
}

/* Valitud kuupäevad */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Vahemik */
.flatpickr-day.inRange {
    background: rgba(255, 86, 0, 0.15);
    border-color: transparent;
    box-shadow: -5px 0 0 rgba(255, 86, 0, 0.15), 5px 0 0 rgba(255, 86, 0, 0.15);
}

/* Täna */
.flatpickr-day.today {
    border-color: var(--primary);
    color: var(--primary-text);
    font-weight: 700;
}

.flatpickr-day.today:hover {
    background: var(--primary);
    color: white;
}

/* Keelatud päevad */
.flatpickr-day.flatpickr-disabled {
    color: var(--gray-300);
}

/* Sisendi stiil */
#event-date-range {
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") no-repeat right 12px center;
    padding-right: 40px;
    cursor: pointer;
}

#event-date-range:focus {
    border-color: var(--primary);
}

/* ============================================
   KALENDRI RESPONSIVE STIILID
   ============================================ */

/* Dashboard compact: fit everything in one viewport */
.content-area.dashboard-compact {
    padding: 0.75rem;
    padding-bottom: 0.5rem;
    overflow-y: hidden;
    height: calc(100vh - var(--header-height)); /* fallback */
    height: calc(100dvh - var(--header-height));
    box-sizing: border-box;
    min-height: 0;
}

/* Kalendri konteiner mahub aknasse */
.calendar-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height) - 6rem);
    min-height: calc(100dvh - var(--header-height) - 6rem);
}

.calendar-container .card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.calendar-container .card-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 2rem;
}

/* Aasta vaade - 4x3 grid */
.calendar-year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    height: 100%;
}

@media (max-width: 1400px) {
    .calendar-year-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .calendar-year-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .calendar-year-grid {
        grid-template-columns: 1fr;
    }
}

/* Kuu vaade - päevade lahtrid */
.calendar-day-cell {
    min-height: 80px !important;
}

@media (max-height: 800px) {
    .calendar-day-cell {
        min-height: 70px !important;
    }
}

@media (max-height: 700px) {
    .calendar-day-cell {
        min-height: 60px !important;
    }
}

/* Tühistatud üritus — de-emfaas kalendris ja dashboardil */
.is-cancelled {
    opacity: .45;
}

.is-cancelled .calendar-event-title,
.is-cancelled .list-event-title,
.is-cancelled .day-event-title,
.is-cancelled .dash-event-title {
    text-decoration: line-through;
    color: var(--gray-500);
}

.is-cancelled {
    border-left-color: var(--gray-300) !important;
}

.calendar-event.is-cancelled {
    /* Fikseeritud hall paar jääb loetavaks ka siis, kui teema muutub ilma
       kalendrivaadet uuesti joonistamata. */
    background: #f3f4f6 !important;
    border: 1px solid var(--gray-300);
    color: #30343b !important;
    box-shadow: none;
}

.calendar-event.is-cancelled .calendar-event-title {
    color: #30343b !important;
}

.event-data-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.75rem;
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-light);
    color: var(--danger-text);
}

.hover-row.is-cancelled .list-status-bar,
.dash-event-row.is-cancelled .dash-event-statusbar {
    background: var(--gray-300) !important;
}

/* Aastavaade: päev, mille kõik üritused on tühistatud */
.day-cancelled {
    background: repeating-linear-gradient(45deg, var(--gray-100) 0 4px, var(--gray-200) 4px 8px);
    color: var(--gray-500);
}

/* ============================================
   EEVAA UNIFIED MODAL STYLES
   ============================================ */

/* EEVAA-stiilis modaali päis (PR #6 — gradient → diskreetne aktsent)
   Brand säilib 3px oranž triip vasakul, ei domineeri iga modaali ülaosa.
   Opt-in brand-modaalile (success/error etc): lisa class .eevaa-modal-header--brand */
.eevaa-modal-header {
    background: var(--white);
    color: var(--gray-900);
    /* +4px vasak padding aktsendi jaoks */
    padding: 20px 24px 18px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border-bottom: 1px solid var(--gray-200);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

/* 3px oranž aktsent vasakul (asendab gradient-päise + decorative ringid) */
.eevaa-modal-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
}

.eevaa-modal-header .modal-title {
    color: var(--gray-900);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    margin: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eevaa-modal-header .modal-title .modal-icon {
    font-size: 17px;
}

.eevaa-modal-header .modal-close {
    background: transparent;
    color: var(--gray-500);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    z-index: 1;
}

.eevaa-modal-header .modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.eevaa-modal-header .modal-close svg {
    color: currentColor;
    width: 18px;
    height: 18px;
}

/* Brand variant (opt-in) — säilib gradient kus brand-moment vajalik
   Kasutus: <div class="eevaa-modal-header eevaa-modal-header--brand"> */
.eevaa-modal-header--brand {
    background: var(--brand-gradient);
    color: white;
}
.eevaa-modal-header--brand::before {
    /* Brand-modal: aktsent peidetud — gradient ise on brand */
    display: none;
}
.eevaa-modal-header--brand .modal-title,
.eevaa-modal-header--brand .modal-close {
    color: white;
}
.eevaa-modal-header--brand .modal-close {
    background: rgba(255,255,255,0.2);
}
.eevaa-modal-header--brand .modal-close:hover {
    background: rgba(255,255,255,0.3);
    color: white;
}

/* NB: Dark mode käitub automaatselt — codebase swap'ib CSS muutujate
   väärtused (:root vs [data-theme="dark"] :root). var(--white) dark
   mode'is = #1a1a2e (tume), var(--gray-900) = #f5f7fa (hele) — seega
   eraldi dark mode override pole vaja. */

/* Modaali sektsioonid */
.eevaa-section {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--gray-100);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    position: relative;
}

.eevaa-section.purple {
    background: linear-gradient(135deg, rgba(126,0,255,0.02) 0%, rgba(255,86,0,0.02) 100%);
}

.eevaa-section-title {
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-text);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.eevaa-section.purple .eevaa-section-title {
    color: var(--secondary);
    border-bottom-color: rgba(126,0,255,0.15);
}

/* Dünaamiliselt suurenev sektsioon */
.eevaa-section.eevaa-collapsible {
    padding: 0.75rem 1rem;
}

.eevaa-section.eevaa-collapsible.is-empty {
    padding: 0.5rem 1rem;
}

/* Ühtne vormivälja stiil */
.eevaa-form-grid {
    display: grid;
    gap: 0.75rem;
}

.eevaa-form-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.eevaa-form-group {
    display: flex;
    flex-direction: column;
}

.eevaa-form-group.span-2 {
    grid-column: span 2;
}

.eevaa-form-label {
    font-size: var(--text-secondary);
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 0.35rem;
}

.eevaa-form-input,
.eevaa-form-select,
.eevaa-form-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-data);
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    background: var(--white);
    transition: var(--transition);
}

.eevaa-form-input:focus,
.eevaa-form-select:focus,
.eevaa-form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}

.eevaa-form-textarea {
    min-height: 80px;
    resize: vertical;
}

/* EEVAA tabeli stiil */
.eevaa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-data);
    margin-top: 0.75rem;
}

/* Pakkumise/arve ridade tabel: fikseeritud veerulaiused, kirjeldus murtakse mitmele reale */
#quote-items-table,
#qp-items-table {
    table-layout: fixed;
}
#quote-items-table td,
#qp-items-table td {
    overflow: hidden;
    vertical-align: middle;
}
#quote-items-table td input,
#qp-items-table td input,
#quote-items-table td select,
#qp-items-table td select {
    min-width: 0;
    width: 100%;
}
/* Drag & drop indikaatorid */
tr.drag-above { box-shadow: 0 -2px 0 0 var(--primary) inset; }
tr.drag-below { box-shadow: 0 2px 0 0 var(--primary) inset; }
[data-drag-handle] { cursor: grab; color: var(--gray-400); user-select: none; }
[data-drag-handle]:active { cursor: grabbing; }

/* Sektsiooni rida pakkumises */
.quote-section-row {
    background: linear-gradient(135deg, rgba(126,0,255,0.04) 0%, rgba(255,86,0,0.04) 100%) !important;
    border-top: 2px solid var(--secondary) !important;
}
.quote-section-row:hover {
    background: linear-gradient(135deg, rgba(126,0,255,0.08) 0%, rgba(255,86,0,0.08) 100%) !important;
}

/* Kompaktne pakkumise tabel */
#quote-items-table td,
#qp-items-table td {
    padding: 0.55rem 0.25rem;
}
#quote-items-table input,
#quote-items-table select,
#quote-items-table textarea,
#qp-items-table input,
#qp-items-table select,
#qp-items-table textarea {
    padding: 0.2rem 0.25rem;
    font-size: 0.85rem;
    height: 28px;
    line-height: 1.3;
}
#quote-items-table textarea,
#qp-items-table textarea {
    height: 28px;
    min-height: 28px;
    overflow: hidden;
}
/* Kirjelduse textarea kasvab sisuga */
#quote-items-table textarea,
#qp-items-table textarea {
    width: 100%;
    padding: 0.25rem 0.35rem;
    font-size: 0.85rem;
    font-family: inherit;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    resize: none;
    overflow: hidden;
    min-height: 30px;
    line-height: 1.3;
    transition: border-color 0.15s;
}
#quote-items-table textarea:focus,
#qp-items-table textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 86, 0, 0.35);
}

/* Kompaktsed rea-textarea'd juhib oma JS (autoResizeTA, app.js) — jäta app-wide 8-rea
   reegli (eespool) min-height/field-sizing väljapoole, ID-spetsiifilisus + !important võidab. */
#quote-items-table textarea,
#qp-items-table textarea {
    min-height: 30px !important;
    field-sizing: fixed;
}

.eevaa-table thead {
    background: var(--gray-50);
}

.eevaa-table th {
    padding: 0.5rem 0.5rem;
    text-align: left;
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200);
}

.eevaa-table td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

/* Peida number inputide nooled kõikjalt */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}


.eevaa-table tbody tr:hover {
    background: rgba(255,86,0,0.02);
}

.eevaa-table .input-cell input,
.eevaa-table .input-cell select,
.eevaa-table input,
.eevaa-table select {
    width: 100%;
    padding: 0.35rem 0.5rem;
    font-size: var(--text-data);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color 0.15s;
}

.eevaa-table .input-cell input:focus,
.eevaa-table .input-cell select:focus,
.eevaa-table input:focus,
.eevaa-table select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 86, 0, 0.35); /* matches --shadow-focus standard */
}

/* Summade sektsioon */
.eevaa-totals {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.eevaa-totals-box {
    width: 260px;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
}

.eevaa-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: var(--text-data);
    color: var(--gray-600);
}

.eevaa-totals-row span:last-child {
    font-weight: 600;
    color: var(--gray-800);
}

.eevaa-totals-row.total {
    font-weight: 700;
    font-size: var(--text-section);
    color: var(--primary-text);
    border-top: 1px solid var(--gray-200);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.eevaa-totals-row.total span:last-child {
    color: var(--primary-text);
}

/* EEVAA modaali jalus */
.eevaa-modal-footer {
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.eevaa-modal-footer .btn-group {
    display: flex;
    gap: 0.75rem;
}

/* Kliendivormi põhisalvestus peab jääma nähtavaks ka GDPR-i toimingute kõrval. */
#client-modal .client-modal-footer {
    flex-direction: column;
    align-items: stretch;
}

#client-modal .client-modal-primary-actions,
#client-modal .client-modal-secondary-actions {
    display: flex;
    width: 100%;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

#client-modal .client-modal-primary-actions {
    order: 1;
    justify-content: flex-end;
}

#client-modal .client-modal-secondary-actions {
    order: 2;
    gap: 0.375rem;
}

#client-modal .client-modal-secondary-actions .btn {
    flex: 0 0 auto;
    min-height: 44px;
}

#client-modal #client-gdpr-btns {
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 0.375rem !important;
}

/* EEVAA nupud — .btn-primary jagab sama väljanägemist (unifitseeritud, audit 2026-09-03) */
.btn-eevaa,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--brand-gradient);
    color: white;
    border: none;
    padding: 0.6rem 1.25rem;
    font-size: var(--text-data);
    font-weight: 600;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    font-family: inherit;
}

.btn-eevaa:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 86, 0, 0.3);
}

.btn-eevaa:disabled,
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-eevaa-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--white);
    color: var(--primary-text);
    border: 1px solid var(--primary);
    padding: 0.4rem 0.875rem;
    font-size: var(--text-data);
    font-weight: 500;
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.btn-eevaa-outline:hover:not(:disabled) {
    background: rgba(255, 86, 0, 0.08);
    border-color: var(--primary);
}

.btn-eevaa-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive modaalid */
@media (max-width: 768px) {
    .eevaa-form-grid.cols-2 {
        grid-template-columns: 1fr;
    }

    .eevaa-form-group.span-2 {
        grid-column: span 1;
    }
}

/* Reports responsive - 2-col grid to single col on mobile */
@media (max-width: 768px) {
    #page-content > div > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   MOBILE RESPONSIVE OVERHAUL
   ============================================ */

/* Bottom navigation bar - mobiil */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    z-index: var(--z-popover);
    padding: 0.25rem 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}

.bottom-nav-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.75rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--gray-500);
    font-size: var(--text-micro);
    font-weight: 500;
    transition: color 0.2s;
    -webkit-tap-highlight-color: transparent;
    min-width: 64px;
}

.bottom-nav-item svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.8;
}

.bottom-nav-item.active {
    color: var(--primary-text);
}

.bottom-nav-item:hover {
    color: var(--primary-text);
    opacity: 0.85;
}

.bottom-nav-item:active {
    transform: scale(0.92);
}

/* FAB - Floating Action Button — taastatud mobiilile (PR #2.1) */
.fab-button {
    display: none; /* desktop'il peidetud, mobile media override paneb display: flex */
    position: fixed;
    bottom: 80px;
    right: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(255, 86, 0, 0.35);
    cursor: pointer;
    z-index: var(--z-popover);
    align-items: center;
    justify-content: center;
    font-size: var(--text-page-title);
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.fab-button:active {
    transform: scale(0.92);
}

/* Näita FAB ainult mobiilis (≤768px) — desktop'il sidebar on ülemus */
@media (max-width: 768px) {
    .fab-button {
        display: flex;
    }
}

/* FAB menu */
.fab-menu {
    display: none;
    position: fixed;
    bottom: 4.5rem;
    right: 1rem;
    z-index: calc(var(--z-popover) + 1);
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.fab-menu.open {
    display: flex;
}

.fab-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: 2rem;
    box-shadow: var(--shadow-md);
    font-size: var(--text-data);
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.fab-menu-item:active {
    background: var(--gray-50);
}

@media (max-width: 768px) {
    /* ---- FAB removed ---- */

    /* ---- Hide sidebar completely on mobile ---- */
    .sidebar {
        width: 280px;
    }

    /* ---- Top bar compact ---- */
    .top-bar {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }
    
    .top-bar .page-title {
        font-size: var(--text-section);
    }

    /* ---- Global search: hide full bar, show icon on mobile ---- */
    #global-search-wrapper {
        display: none;
    }
    #global-search-wrapper.mobile-active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 0.5rem;
        background: var(--white);
        border-bottom: 1px solid var(--gray-200);
        z-index: 100;
    }
    #global-search-wrapper.mobile-active #global-search-input {
        width: 100% !important;
    }
    .mobile-search-toggle {
        display: inline-flex !important;
    }

    /* ---- Date and some top-bar items hide ---- */
    #current-date {
        display: none;
    }

    /* ---- Fullscreen modals on mobile ---- */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal-overlay .modal {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100vh;
        height: 100dvh;
        border-radius: 0 !important;
        margin: 0;
    }

    .modal-overlay .modal .eevaa-modal-header {
        border-radius: 0;
        padding: 1rem 1rem;
    }

    .modal-overlay .modal .modal-body {
        padding: 1rem !important;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-overlay .modal .modal-header {
        padding: 0.75rem 1rem;
    }

    /* ---- Modal footer sticky at bottom ---- */
    .modal-overlay .modal .eevaa-modal-footer,
    .modal-overlay .modal .modal-footer {
        padding: 0.75rem 1rem;
        position: sticky;
        bottom: 0;
        border-radius: 0 !important;
        flex-direction: row;
    }

    /* ---- Quote modal settings grid: 2 cols on mobile ---- */
    #quote-modal .eevaa-form-grid[style*="grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1.5fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    /* ---- Quote items table -> card layout ---- */
    #quote-items-table thead {
        display: none;
    }

    #quote-items-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        background: var(--white);
        border: 1px solid var(--card-border);
        border-radius: var(--border-radius);
        position: relative;
    }

    #quote-items-table tbody tr td {
        border: none;
        padding: 0.2rem 0;
    }

    /* Description spans full width */
    #quote-items-table tbody tr td:first-child {
        grid-column: 1 / -1;
        font-weight: 500;
    }

    /* Actions (▲▼×) top-right */
    #quote-items-table tbody tr td:last-child {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: auto;
    }

    /* Sum column full width */
    #quote-items-table tbody tr td:nth-child(7) {
        grid-column: 1 / -1;
        text-align: right;
        font-weight: 600;
        font-size: var(--text-data);
        color: var(--primary-text);
        border-top: 1px solid var(--gray-100);
        padding-top: 0.35rem;
        margin-top: 0.25rem;
    }

    /* ---- Invoice items table similar treatment ---- */
    #invoice-modal .eevaa-table thead {
        display: none;
    }

    #invoice-modal .eevaa-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.35rem;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        background: var(--white);
        border: 1px solid var(--card-border);
        border-radius: var(--border-radius);
        position: relative;
    }

    #invoice-modal .eevaa-table tbody tr td {
        border: none;
        padding: 0.2rem 0;
    }

    #invoice-modal .eevaa-table tbody tr td:first-child {
        grid-column: 1 / -1;
        font-weight: 500;
    }

    #invoice-modal .eevaa-table tbody tr td:last-child {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    /* ---- Totals box full width ---- */
    .eevaa-totals {
        justify-content: stretch;
    }

    .eevaa-totals-box {
        width: 100%;
    }

    /* ---- Event modal 2-col grid to single col ---- */
    #event-info > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- Touch-friendly inputs ---- */
    .eevaa-form-input,
    .eevaa-form-select,
    .eevaa-form-textarea,
    .form-textarea {
        font-size: var(--text-section) !important;
        padding: 0.625rem 0.75rem !important;
        min-height: 44px;
    }

    /* ---- Touch-friendly buttons ---- */
    .btn, .btn-eevaa, .btn-eevaa-outline, 
    button[type="submit"], button[type="button"] {
        min-height: 44px;
        font-size: var(--text-data);
    }

    /* ---- Card header actions wrap ---- */
    .card-header .btn-group,
    .card-header [style*="display: flex"][style*="gap"] {
        flex-wrap: wrap;
    }

    /* ---- Stats cards 2-col grid ---- */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .stat-card {
        padding: 0.75rem;
    }

    .stat-value {
        font-size: var(--text-page-title);
    }

    .stat-label {
        font-size: var(--text-micro);
    }

    /* ---- Page content list tables: horizontal scroll ---- */
    .card .table-container,
    .card > table,
    .card > div > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Notification panel fullscreen ---- */
    #notification-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        right: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    /* ---- Client view modal ---- */
    #client-view-modal .modal {
        max-width: 100% !important;
    }
}

/* Notification badge */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--danger);
    color: #fff;
    font-size: var(--text-micro);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Extra small screens (375px and below) */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.375rem;
    }

    .content-area {
        padding: 0.75rem;
    }

    .bottom-nav-item {
        min-width: 56px;
        padding: 0.35rem 0.5rem;
        font-size: var(--text-micro);
    }

    /* Compact modal header on small phones */
    .eevaa-modal-header .modal-title {
        font-size: var(--text-section);
    }

    .eevaa-section {
        padding: 0.875rem;
    }
}

/* Dark mode bottom nav */
[data-theme="dark"] .bottom-nav {
    background: #12122a;
    border-top-color: #253352;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .bottom-nav-item {
    color: var(--gray-400);
}

[data-theme="dark"] .bottom-nav-item.active {
    color: var(--primary);
}

[data-theme="dark"] .event-tab:hover {
    background: rgba(255, 86, 0, 0.08);
    color: var(--primary);
}

[data-theme="dark"] .fab-menu-item {
    background: #1a1a2e;
    border-color: #253352;
    color: #b0c4de;
}

[data-theme="dark"] #quote-items-table tbody tr,
[data-theme="dark"] #invoice-modal .eevaa-table tbody tr {
    background: #16213e;
    border-color: #253352;
}

[data-theme="dark"] .eevaa-table tbody tr:hover {
    background: rgba(255, 86, 0, 0.05);
}



/* ============================================
   DARK MODE
   ============================================ */
[data-theme="dark"] {
    --primary-text: #ff5600;  /* Original orange is AA-compliant on dark backgrounds */
    --white: #1a1a2e;
    --gray-50: #16213e;
    --gray-100: #1a2540;
    --gray-200: #253352;
    --gray-300: #374769;
    --gray-400: #8294b5;  /* Lightened from #6b7fa3 for WCAG AA 4.5:1 on dark bg */
    --gray-500: #8da2c4;
    --gray-600: #b0c4de;
    --gray-700: #d0dae8;
    --gray-800: #e8edf5;
    --gray-900: #f5f7fa;
    --card-border: #2a3a5c;
    --text-primary: var(--gray-900);
    --surface-alt: var(--gray-100);
    --border: var(--gray-200);

    /* Semantic light colors - darker for dark mode */
    --success-light: rgba(16, 185, 129, 0.15);
    --success-text: #6ee7b7;
    --warning-light: rgba(245, 158, 11, 0.15);
    --warning-text: #fcd34d;
    --danger-light: rgba(239, 68, 68, 0.15);
    --danger-text: #fca5a5;
    --info-light: rgba(37, 99, 235, 0.15);
    --info-text: #93c5fd;
    --purple-light: rgba(139, 92, 246, 0.15);
    --purple-text: #c4b5fd;
    --purple-dark: #a78bfa;

    /* Shadows */
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 3px rgba(255, 86, 0, 0.25);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

    /* Surface & layout */
    --dark-card: #1a1a2e;
    --card-bg: var(--dark-card); /* audit: was undefined (no fallback) — dropdown/global-search dark surface */
    --dark-bg: #0f0f23;
    --dark-border: rgba(255, 255, 255, 0.08);
    --dark-text: #d0dae8;
    --bg-surface: #1a1a2e;

    color-scheme: dark;
}

[data-theme="dark"] body {
    background: #0f0f23;
    color: #d0dae8;
}

[data-theme="dark"] .sidebar {
    background: #12122a !important;
    border-right-color: rgba(255, 86, 0, 0.15);
}

[data-theme="dark"] .main-content {
    background: #0f0f23;
}

[data-theme="dark"] .top-bar {
    background: #12122a !important;
    border-bottom-color: #253352;
}

[data-theme="dark"] .card {
    background: #1a1a2e;
    border-color: #253352;
}

[data-theme="dark"] .card-header {
    background: #16213e;
    border-bottom-color: #253352;
}

[data-theme="dark"] .table thead th {
    background: #16213e;
    border-color: #253352;
    color: #8da2c4;
}

[data-theme="dark"] .table td {
    border-color: #253352;
}

[data-theme="dark"] .table tbody tr:hover {
    background: #16213e;
}

[data-theme="dark"] .form-textarea {
    background: #16213e;
    border-color: #253352;
    color: #d0dae8;
}

[data-theme="dark"] .form-textarea:focus {
    border-color: var(--primary);
    background: #1a2540;
    box-shadow: var(--shadow-focus);
}

[data-theme="dark"] .btn-outline {
    border-color: #374769;
    color: #b0c4de;
}

[data-theme="dark"] .btn-outline:hover {
    background: #253352;
}

[data-theme="dark"] .modal {
    background: #1a1a2e;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #253352;
}

[data-theme="dark"] .modal-footer {
    border-top-color: #253352;
}

[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-item.active {
    background: rgba(255, 86, 0, 0.15);
}

[data-theme="dark"] .badge-gray {
    background: #253352;
    color: #8da2c4;
}

/* Dark mode button variants */
[data-theme="dark"] .btn-secondary {
    background: rgba(255,255,255,0.08);
    color: var(--dark-text, #d0dae8);
    border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .btn-success {
    background: #1a7a3a;
    color: #fff;
    border-color: #1a7a3a;
}
[data-theme="dark"] .btn-danger {
    background: #8b1a1a;
    color: #fff;
    border-color: #8b1a1a;
}
[data-theme="dark"] .btn-warning {
    background: #7a5200;
    color: #fff;
    border-color: #7a5200;
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    background: rgba(255,255,255,0.14);
}
[data-theme="dark"] .btn-success:hover:not(:disabled) {
    background: #1d8a42;
}
[data-theme="dark"] .btn-danger:hover:not(:disabled) {
    background: #9e1f1f;
}
[data-theme="dark"] .btn-warning:hover:not(:disabled) {
    background: #8a5f00;
}
[data-theme="dark"] .btn-ghost {
    color: var(--dark-text, #d0dae8);
    border-color: rgba(255,255,255,0.15);
}
[data-theme="dark"] .btn-ghost:hover {
    background: rgba(255,255,255,0.08);
}

/* Dark mode badge variants */
[data-theme="dark"] .badge-success, [data-theme="dark"] .status-badge.completed {
    background: rgba(34,197,94,0.2);
    color: #4ade80;
}
[data-theme="dark"] .badge-warning, [data-theme="dark"] .status-badge.pending {
    background: rgba(234,179,8,0.2);
    color: #fbbf24;
}
[data-theme="dark"] .badge-danger, [data-theme="dark"] .status-badge.cancelled {
    background: rgba(239,68,68,0.2);
    color: #f87171;
}
[data-theme="dark"] .badge-info, [data-theme="dark"] .status-badge.active {
    background: var(--info-light);
    color: var(--info-text);
}
[data-theme="dark"] .badge-primary {
    background: rgba(255,86,0,0.2);
    color: #ff8040;
}
[data-theme="dark"] .badge-purple {
    background: var(--purple-light);
    color: var(--purple-text);
}
[data-theme="dark"] .status-badge.sent {
    background: rgba(126, 0, 255, 0.2);
    color: #c084fc;
}
[data-theme="dark"] .status-badge.scheduled {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}
[data-theme="dark"] .status-badge.overdue {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}
[data-theme="dark"] .status-badge.expired {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

[data-theme="dark"] .content-area {
    background: #0f0f23;
}

[data-theme="dark"] .login-card {
    background: #1a1a2e;
}

[data-theme="dark"] #global-search-input {
    background: #16213e !important;
    border-color: #253352 !important;
    color: #d0dae8;
}

[data-theme="dark"] #global-search-results {
    background: #1a1a2e;
    border-color: #253352;
}

/* Dark mode toggle button */
.dark-mode-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    font-size: var(--text-section);
}
.dark-mode-toggle:hover {
    background: var(--gray-100);
}

/* ============================================
   DARK MODE - Extended Component Overrides
   ============================================ */

/* Eevaa modal & section components */
[data-theme="dark"] .eevaa-section {
    background: #1a1a2e;
    border-color: #253352;
}
[data-theme="dark"] .eevaa-section.purple {
    background: linear-gradient(135deg, rgba(126,0,255,0.07) 0%, rgba(255,86,0,0.04) 100%);
}

[data-theme="dark"] .eevaa-form-input,
[data-theme="dark"] .eevaa-form-select,
[data-theme="dark"] .eevaa-form-textarea {
    background: #16213e;
    border-color: #253352;
    color: #d0dae8;
}

[data-theme="dark"] .eevaa-form-input:focus,
[data-theme="dark"] .eevaa-form-select:focus,
[data-theme="dark"] .eevaa-form-textarea:focus {
    border-color: var(--primary);
    background: #1a2540;
    box-shadow: var(--shadow-focus);
}

[data-theme="dark"] .eevaa-table .input-cell input,
[data-theme="dark"] .eevaa-table .input-cell select,
[data-theme="dark"] .eevaa-table .input-cell textarea {
    background: #16213e;
    border-color: #253352;
    color: #d0dae8;
}

[data-theme="dark"] .eevaa-totals-box {
    background: #1a1a2e;
    border-color: #253352;
}

[data-theme="dark"] .eevaa-modal-footer {
    background: #1a1a2e;
    border-top-color: #253352;
}

[data-theme="dark"] .btn-eevaa-outline {
    background: #1a1a2e;
    border-color: var(--primary);
    color: var(--primary);
}

[data-theme="dark"] .btn-eevaa-outline:hover {
    background: rgba(255, 86, 0, 0.15);
}

/* Timeline filter buttons */
[data-theme="dark"] .timeline-filter-btn {
    background: #1a1a2e;
    border-color: #253352;
    color: #b0c4de;
}

[data-theme="dark"] .timeline-filter-btn.active,
[data-theme="dark"] .timeline-filter-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Calendar date input */
[data-theme="dark"] #event-date-range {
    background-color: #16213e;
    border-color: #253352;
    color: #d0dae8;
}

/* Dropdown menus */
[data-theme="dark"] [class*="dropdown"] ul {
    background: #1a1a2e;
    border-color: #253352;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Invoice overdue row highlighting */
[data-theme="dark"] tr.overdue,
[data-theme="dark"] .invoice-overdue {
    background: rgba(220, 38, 38, 0.15) !important;
}

/* Stat cards */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .stats-card {
    background: #1a1a2e;
    border-color: #253352;
}

/* Todo cards */
[data-theme="dark"] .todo-item {
    background: #1a1a2e;
    border-color: #253352;
}

/* Team member cards */
[data-theme="dark"] .team-card {
    background: #1a1a2e;
    border-color: #253352;
}

/* Inventory table */
[data-theme="dark"] .inventory-row {
    background: #1a1a2e;
    border-color: #253352;
}

/* Admin settings cards */
[data-theme="dark"] .admin-card {
    background: #1a1a2e;
    border-color: #253352;
}

/* Select/option elements */
[data-theme="dark"] select,
[data-theme="dark"] option {
    background: #16213e;
    color: #d0dae8;
}

/* Text color for dark mode consistency */
[data-theme="dark"] .text-gray,
[data-theme="dark"] .text-muted {
    color: #8da2c4;
}

/* Page header area */
[data-theme="dark"] .page-header {
    color: #d0dae8;
}

/* Links in dark mode */
[data-theme="dark"] a {
    color: #6bb5ff;
}

[data-theme="dark"] a:hover {
    color: #8ec8ff;
}

/* Calendar specific dark mode */
[data-theme="dark"] .calendar-day,
[data-theme="dark"] .cal-day {
    background: #1a1a2e;
    border-color: #253352;
}

[data-theme="dark"] .calendar-day:hover,
[data-theme="dark"] .cal-day:hover {
    background: #253352;
}

[data-theme="dark"] .calendar-day.today,
[data-theme="dark"] .cal-day.today {
    border-color: var(--primary);
}

[data-theme="dark"] .calendar-header,
[data-theme="dark"] .cal-header {
    background: #16213e;
    color: #8da2c4;
}

/* Report charts area */
[data-theme="dark"] .chart-container {
    background: #1a1a2e;
    border-color: #253352;
}

/* Toast notifications in dark mode */
[data-theme="dark"] .toast {
    background: var(--gray-50);
    border-color: var(--card-border);
    color: var(--gray-700);
}

/* Scrollbar dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: var(--radius-sm);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* Hover utility classes (replace JS onmouseover/onmouseout) */
.hover-lift {
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.hover-lift:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gray-300);
    transform: translateY(-1px);
}
.hover-bg {
    transition: background var(--transition-fast);
}
.hover-bg:hover {
    background: var(--gray-100);
}
.hover-scale {
    transition: transform 0.15s;
}
.hover-scale:hover {
    transform: scale(1.02);
}
.hover-row {
    transition: background 0.15s;
}
.hover-row:hover {
    background: var(--gray-50);
}
[data-theme="dark"] .hover-row:hover {
    background: rgba(255, 86, 0, 0.06);
}
.hover-border-primary {
    transition: border-color var(--transition-fast);
}
.hover-border-primary:hover {
    border-color: var(--primary);
}



/* Form checkbox */
.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}

/* Login logo */
.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.login-logo img {
    max-height: 60px;
    width: auto;
}

/* Modal container */
.modal-container {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   ACCESSIBILITY: High contrast & forced colors
   ========================================== */

/* prefers-contrast: more — increase border/text contrast for users who need it */
@media (prefers-contrast: more) {
    :root {
        --gray-200: #767676;
        --gray-300: #595959;
        --gray-400: #3d3d3d;
        --gray-500: #2a2a2a;
    }

    body {
        background: var(--white);
        color: #000000;
    }

    .card,
    .modal,
    .eevaa-section,
    .form-control,
    .eevaa-form-input,
    .eevaa-form-select,
    .eevaa-form-textarea {
        border: 2px solid #000000 !important;
    }

    .badge {
        border: 1px solid currentColor;
        font-weight: 700;
    }

    a, a:visited {
        color: #0000cc;
        text-decoration: underline;
    }

    button, [role="button"] {
        border: 2px solid currentColor !important;
    }

    .btn-eevaa,
    .btn-primary {
        background: #000000;
        color: var(--white);
        border: 2px solid #000000 !important;
    }

    :focus-visible {
        outline: 3px solid #000000;
        outline-offset: 2px;
    }

    tr:hover,
    [tabindex="0"]:hover {
        background: #e0e0e0 !important;
        outline: 2px solid #000000;
    }
}

/* forced-colors: active — Windows High Contrast Mode compatibility */
@media (forced-colors: active) {
    /* Gradient buttons: fall back to system colors */
    .btn-eevaa,
    .btn-primary {
        background: ButtonText;
        color: ButtonFace;
        border: 2px solid ButtonText;
        forced-color-adjust: none;
    }

    .btn-eevaa:hover,
    .btn-eevaa:focus,
    .btn-primary:hover,
    .btn-primary:focus {
        background: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }

    /* Modal header gradient: fall back */
    .eevaa-modal-header {
        background: Canvas;
        color: CanvasText;
        border-bottom: 2px solid ButtonText;
        forced-color-adjust: none;
    }

    /* Sidebar active item */
    .nav-item.active {
        border-left-color: Highlight;
        color: HighlightText;
        background: Highlight;
    }

    /* Focus ring */
    :focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }

    /* Badges — ensure text is readable */
    .badge {
        border: 1px solid ButtonText;
    }

    /* Spinner */
    .spinner {
        border-color: ButtonText;
        border-top-color: Highlight;
    }

    /* Status color bars in invoice/quote rows */
    [style*="background: var(--success)"],
    [style*="background: var(--danger)"],
    [style*="background: var(--warning)"],
    [style*="background: var(--info)"] {
        forced-color-adjust: none;
    }
}

/* =============================================
   PREFERS-REDUCED-MOTION
   Respect users who prefer less animation
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .modal {
        transform: none !important;
    }

    .modal-overlay {
        transition: none !important;
    }

    .toast {
        animation: none !important;
    }

    .content-area > * {
        animation: none;
    }
}

/* =============================================
   BUTTON ACTIVE STATES (press effect)
   ============================================= */
.btn:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-eevaa:active:not(:disabled),
.btn-primary:active:not(:disabled) {
    transform: scale(0.97);
}

/* =============================================
   ICON BUTTON IMPROVEMENTS
   — .btn-icon properties consolidated into the base definition above (~line 640)
   ============================================= */

/* =============================================
   TABLE ROW — SMOOTHER HOVER
   ============================================= */
tr {
    transition: background var(--transition-fast);
}

/* =============================================
   LINK TRANSITIONS — merged into base a {} definition above
   ============================================= */

/* =============================================
   AUDIT FIXES — dark mode unclassed inputs
   ============================================= */

/* Issue #1: ALL form controls in dark mode get dark background (no exceptions by class)
   Uses !important to override any specificity wars. Flatpickr inputs are visually
   contained in .flatpickr-calendar which has its own dark override.             */
[data-theme="dark"] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #16213e !important;
    border-color: #253352 !important;
    color: #d0dae8 !important;
    color-scheme: dark;
}

[data-theme="dark"] input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--primary) !important;
    background-color: #1a2540 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 86, 0, 0.1);
}

/* Issue #5: Dev-switcher hides on mobile so it doesn't block FAB */
@media (max-width: 768px) {
    #dev-switcher {
        display: none !important;
    }
}

/* Issue #3: Calendar header compact on mobile — prevent buttons pushing grid below fold */
@media (max-width: 480px) {
    .calendar-header {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-views {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        justify-content: flex-start;
    }
    .calendar-container .card-body {
        padding: 0.75rem !important;
    }
}

/* Issue #2 & #15: Timetracking stats-grid responsive */
@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* Issue #11: Inline selects (without class) get proper styling in dark mode */
[data-theme="dark"] .page-header select,
[data-theme="dark"] .page-actions select,
[data-theme="dark"] .content-area > div > select,
[data-theme="dark"] label + select {
    background: #16213e;
    border-color: #253352;
    color: #d0dae8;
    color-scheme: dark;
}

/* =============================================
   INTERACTION POLISH — micro-detail improvements
   ============================================= */

/* Table rows with onclick get pointer cursor via CSS */
tr[onclick],
tr[tabindex] {
    cursor: pointer;
}

/* Clickable table rows get smooth hover */
tr[onclick]:hover td,
tr[tabindex]:hover td {
    background: var(--gray-50) !important;
    transition: background var(--transition-fast);
}

[data-theme="dark"] tr[onclick]:hover td,
[data-theme="dark"] tr[tabindex]:hover td {
    background: rgba(255, 86, 0, 0.06) !important;
}

/* Badge hover for status badges that are interactive */
.status-badge[onclick],
.badge[onclick] {
    cursor: pointer;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.status-badge[onclick]:hover,
.badge[onclick]:hover {
    opacity: 0.85;
    transform: scale(1.03);
}

/* Nav item active indicator — thicker for visibility */
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 3px;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
}
/* .nav-item { position: relative } — merged into the base .nav-item definition above (~line 267) */

/* Notification panel dark mode */
[data-theme="dark"] .notifications-panel {
    background: #1a1a2e;
    border-color: #253352;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    color-scheme: dark;
}
[data-theme="dark"] .notifications-header,
[data-theme="dark"] .notifications-footer {
    border-color: #253352;
}
[data-theme="dark"] .notification-item {
    border-bottom-color: #253352;
}
[data-theme="dark"] .notification-item:hover {
    background: #16213e;
}
[data-theme="dark"] .notification-message {
    color: #8da2c4;
}
[data-theme="dark"] .notification-time {
    color: var(--gray-400);
}

/* Smooth page content transitions */
.content-area > * {
    animation: fadeInUp 0.18s ease-out; /* ilma fill-mode'ita: animeeritud transform jääks muidu efektina alles ja lukustaks position:fixed lapsed */
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none; /* none, mitte translateY(0): identiteet-transform jääks fill-mode'iga alles ja lukustaks position:fixed lapsed (event-save-bar) */
    }
}
/* Input group — consistent styling */
.input-group {
    display: flex;
    gap: 0;
}
.input-group > .eevaa-form-input {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
}
.input-group > .btn {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Form field: required indicator */
.eevaa-form-label .required,
.form-label .required {
    color: var(--danger);
    margin-left: 2px;
}

/* =============================================
   MOBILE GRID COLLAPSE — any inline 2-column grid
   collapses to 1-column on narrow screens.
   class="form-row" targets JS-generated form rows.
   ============================================= */
@media (max-width: 600px) {
    /* Stats row — reports, dashboard */
    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Form rows used in modals / page sections */
    .form-row[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Invoice/quote 2-col info section */
    .modal-body [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Dark mode: flatpickr calendar overrides — keep calendar readable */
[data-theme="dark"] .flatpickr-calendar {
    background: #16213e;
    border-color: #253352;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    color-scheme: dark;
}
[data-theme="dark"] .flatpickr-day {
    color: #c9d8ef;
}
[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus {
    background: #253352;
}
[data-theme="dark"] .flatpickr-day.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
[data-theme="dark"] .flatpickr-months,
[data-theme="dark"] .flatpickr-weekdays {
    background: #1a1a2e;
    color: #8da2c4;
}
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-monthDropdown-months,
[data-theme="dark"] span.flatpickr-weekday {
    color: #c9d8ef;
}
[data-theme="dark"] .numInputWrapper input,
[data-theme="dark"] .flatpickr-monthDropdown-months {
    background-color: #16213e !important;
    color: #d0dae8 !important;
    border-color: #253352 !important;
}

/* Accessibility: reduce motion — merged into main block above (line 3843) */

/* =============================================
   MOBILE BUG FIXES — 2026-03-29
   All fixes scoped to mobile only (≤768px).
   Desktop layout remains untouched.
   ============================================= */
@media (max-width: 768px) {

    /* ---- P1: Hanked table — ensure horizontal scroll works ---- */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .table-container table {
        min-width: 640px;
    }
    .table-container table th,
    .table-container table td {
        white-space: nowrap;
    }
    /* Allow hange title column to wrap (it has long text) */
    .table-container table td:nth-child(2) {
        white-space: normal;
        min-width: 180px;
    }

    /* Old table scroll removed — replaced by card layout below */

    /* ---- P2: Event/Quote/Invoice detail header ---- */
    /* Force back-button + title area to stack vertically */
    #page-content div[style*="align-items: flex-start"][style*="display: flex"][style*="gap: 1rem"] {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    #page-content div[style*="align-items: flex-start"] h1 {
        font-size: 1.25rem !important;
    }

    /* ---- P2: Client detail Pakkumised/Arved side-by-side → stack ---- */
    .eevaa-section > div[style*="grid-template-columns: 1fr 1fr"],
    .eevaa-section > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .eevaa-section > div[style*="grid-template-columns"] > div[style*="border-left"] {
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid var(--gray-200);
        padding-top: 1rem;
        margin-top: 0.75rem;
    }
    .eevaa-section > div[style*="grid-template-columns"] > div[style*="padding-right"] {
        padding-right: 0 !important;
    }

    /* ---- P2: Status filter cards (quotes/invoices list top) ---- */
    .status-filter-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        overflow: visible !important;
    }
    .status-filter-cards > div,
    .status-filter-cards > .hover-scale {
        min-width: 100% !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        /* Internal: label left, amount center, count right */
        display: flex !important;
        align-items: baseline !important;
        justify-content: space-between !important;
    }
    /* Parent container may clip — prevent it */
    .status-filter-cards + .card,
    .card-body > .status-filter-cards {
        overflow: visible !important;
    }

    /* ---- P3: Doc list items (quotes/invoices cards) ---- */
    /* Keep horizontal layout but fix number cell width and price+badge row */
    .doc-list-item {
        flex-wrap: wrap !important;
    }
    /* Number cell — wider so "EEVAA-P_0026" fits on one line */
    .doc-list-item > div[style*="flex: 0 0 90px"] {
        flex: 0 0 auto !important;
        min-width: 100px !important;
        white-space: nowrap !important;
    }
    /* Price+badge cell — full width row, sum left, badge right */
    .doc-list-item > div[style*="flex: 0 0 auto"][style*="flex-direction: column"][style*="align-items: flex-end"] {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        padding-left: 1rem !important;
    }
    /* Hide PDF button on mobile to save space */
    .doc-list-item > div:last-child:has(.btn) {
        display: none !important;
    }
    /* Title row: name left, event badge right */
    .doc-list-item div[style*="font-weight: 600"][style*="display: flex"] {
        justify-content: space-between !important;
    }
    /* Meta row: client left, kehtiv/tähtaeg right */
    .doc-list-item div[style*="color: var(--gray-500)"][style*="display: flex"][style*="gap: 0.75rem"] {
        justify-content: space-between !important;
    }

    /* ---- P3: Badges — never truncate ---- */
    .badge {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* ---- P3: Reports chart — smaller text, no overlap ---- */
    .eevaa-section canvas {
        max-height: 200px;
    }
    /* Reports YTD text wraps properly */
    .eevaa-section > div[style*="font-size"] {
        font-size: 0.75rem !important;
        line-height: 1.4;
    }

    /* ---- Allhanke inventar + inventar — card layout on mobile ---- */
    .inv-table thead { display: none !important; }
    .inv-table, .inv-table tbody { display: block !important; }
    .inv-table { min-width: 0 !important; }
    .inv-table tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        padding: 0.75rem 0.75rem !important;
        border-bottom: 1px solid var(--gray-200) !important;
        gap: 0.25rem 0.5rem !important;
        align-items: center !important;
    }
    .inv-table td {
        padding: 0 !important;
        min-width: 0;
        overflow-wrap: anywhere;
        border-bottom: none !important;
        font-size: 0.85rem !important;
    }
    /* Row 1: name/product (full width) */
    .inv-table td:first-child {
        grid-column: 1 / -1 !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        margin-bottom: 0.15rem;
    }
    .inv-table td .inv-name { font-weight: 600; }
    .inv-table td .inv-code { color: var(--gray-500); font-size: 0.75rem; }
    /* Row 2+: data fields side by side */
    .inv-table td.inv-price { font-weight: 600 !important; color: var(--success-dark) !important; }
    /* Actions occupy their own row so every touch target stays visible. */
    .inv-table td:last-child {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        margin-top: 0.5rem;
    }
    .inv-table td .inv-actions {
        justify-content: flex-end;
    }

    /* ---- Quote/Invoice meta row — Kehtiv right-aligned ---- */
    .doc-list-item div[style*="color: var(--gray-500)"][style*="gap: 0.75rem"] > span:last-child {
        margin-left: auto !important;
        text-align: right !important;
    }

    /* ---- P3: Event detail notes — Muuda button positioning ---- */
    #page-content [style*="white-space: pre-wrap"] + div {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    /* ---- Detail header title row — badge right-aligned ---- */
    #page-content div[style*="align-items: center"][style*="gap: 0.75rem"][style*="flex-wrap"] {
        justify-content: space-between !important;
    }

    /* ---- Detail header metadata — firma+date row 1, location row 2 ---- */
    #page-content div[style*="color: var(--gray-500)"][style*="flex-wrap"] {
        gap: 0.15rem 0.4rem !important;
        font-size: 0.75rem !important;
        line-height: 1.4;
    }
    /* Location span (contains 📍) takes full width = new row */
    #page-content div[style*="color: var(--gray-500)"][style*="flex-wrap"] > span[style]:last-of-type,
    #page-content div[style*="color: var(--gray-500)"][style*="flex-wrap"] > span:last-child {
        flex-basis: 100% !important;
    }
    /* Hide dot before location */
    #page-content div[style*="color: var(--gray-500)"][style*="flex-wrap"] > span:nth-last-child(2) {
        display: none !important;
    }

    /* ---- Event tabs — wrap to multiple rows, all visible ---- */
    #event-tabs-bar {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }
    #event-tabs-bar .event-tab {
        flex: 0 0 auto !important;
        font-size: 0.8rem !important;
        padding: 0.5rem 0.6rem !important;
    }

    /* FAB button polish moved to @media(max-width:480px) block above (~line 3047) */
}

/* Print styles — merged into the single @media print block above (~line 1360) */

/* =============================================
   CONTRACTS (Lepingupõhjad) + EMAIL PREVIEW
   Added 2026-04-17. Uses design-system tokens only.
   ============================================= */

.contracts-page { padding: var(--space-4, 16px); }
.contracts-page .page-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--space-4, 16px); margin-bottom: var(--space-4, 16px);
    flex-wrap: wrap;
}
.contracts-page .filters-bar {
    display: flex; gap: var(--space-3, 12px); align-items: center;
    flex-wrap: wrap; margin-bottom: var(--space-4, 16px);
    padding: var(--space-3, 12px);
    background: var(--surface-alt, #f8f9fb);
    border-radius: var(--radius, 8px);
    border: 1px solid var(--border, #e5e7eb);
}
.contracts-page .filter-group {
    display: flex; gap: var(--space-2, 8px); align-items: center;
}
.contracts-page .filter-group label {
    font-size: var(--text-secondary); color: var(--gray-500); font-weight: 500;
}

.segmented {
    display: inline-flex; border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 8px); overflow: hidden; background: var(--bg-surface);
}
.segmented .seg-btn {
    border: 0; background: transparent; padding: 6px 12px;
    font-size: var(--text-secondary); cursor: pointer; color: var(--gray-500);
    transition: background 0.15s, color 0.15s;
}
.segmented .seg-btn:not(:last-child) {
    border-right: 1px solid var(--border, #e5e7eb);
}
.segmented .seg-btn:hover { background: var(--surface-alt, #f8f9fb); }
.segmented .seg-btn.active {
    background: #d14600; color: #fff;
}

.contracts-list { display: flex; flex-direction: column; gap: var(--space-6, 24px); }
.contracts-group-title {
    font-size: var(--text-data); font-weight: 600; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0 0 var(--space-3, 12px) 0;
    padding-bottom: var(--space-2, 8px);
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.contracts-cards {
    display: grid; gap: var(--space-3, 12px);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.contract-card {
    background: var(--bg-surface); border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 8px); padding: var(--space-4, 16px);
    display: flex; flex-direction: column; gap: var(--space-3, 12px);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.contract-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-color: var(--primary, #ff5600);
}
.contract-card-head {
    display: flex; justify-content: space-between; gap: var(--space-3, 12px);
    align-items: flex-start;
}
.contract-card-title { font-weight: 600; font-size: 15px; color: var(--text-primary, #111827); }
.contract-card-desc { margin: 0; font-size: var(--text-secondary); color: var(--gray-500); line-height: 1.5; }
.contract-card-badges { display: flex; gap: 6px; flex-shrink: 0; }
.contract-card-actions {
    display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto;
    padding-top: var(--space-2, 8px); border-top: 1px dashed var(--border, #e5e7eb);
}

.lang-badge {
    font-size: var(--text-micro); font-weight: 700; padding: 2px 8px; border-radius: 4px;
    letter-spacing: 0.05em;
}
.lang-badge.lang-et { background: var(--warning-light); color: var(--warning-text); }
.lang-badge.lang-en { background: var(--purple-light); color: var(--purple-text); }
.inactive-badge {
    font-size: var(--text-micro); padding: 2px 8px; border-radius: 4px;
    background: var(--gray-100); color: var(--gray-600);
}

/* Preview modal */
.contract-preview-body { padding: var(--space-4, 16px); max-height: 70vh; overflow-y: auto; }
.contract-preview-note {
    background: var(--warning-light); border-left: 3px solid var(--warning);
    padding: 10px 14px; border-radius: 4px; margin-bottom: var(--space-4, 16px);
    font-size: var(--text-secondary); color: var(--warning-text);
}
.contract-preview-content {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--text-data); line-height: 1.7; color: var(--gray-800);
}
.contract-preview-content h1 { font-size: 22px; margin: 0 0 16px 0; }
.contract-preview-content h2 { font-size: 17px; margin: 24px 0 8px 0; }
.contract-preview-content p  { margin: 8px 0; }

/* Email preview modal */
.email-preview-body { padding: var(--space-4, 16px); max-height: 70vh; overflow-y: auto; }
.email-preview-loading { text-align: center; padding: var(--space-6, 24px); color: var(--gray-500); }
.email-preview-meta {
    background: var(--surface-alt, #f8f9fb); border-radius: var(--radius, 8px);
    padding: var(--space-3, 12px); margin-bottom: var(--space-3, 12px);
}
.email-preview-row { display: flex; gap: var(--space-3, 12px); padding: 4px 0; font-size: var(--text-data); }
.email-preview-row strong { min-width: 70px; color: var(--gray-500); }
.email-preview-warning {
    margin-top: var(--space-2, 8px);
    background: var(--warning-light); border-left: 3px solid var(--warning);
    padding: 8px 12px; border-radius: 4px; color: var(--warning-text); font-size: var(--text-secondary);
}
.email-preview-message-edit { margin-bottom: var(--space-3, 12px); }
.email-preview-message-edit label { display: block; margin-bottom: 6px; font-size: var(--text-secondary); }
.email-preview-message-edit textarea {
    width: 100%; font-family: inherit; font-size: var(--text-secondary);
    padding: 8px; border-radius: 4px; border: 1px solid var(--border, #e5e7eb);
    resize: vertical; margin-bottom: 8px;
}
.email-preview-iframe-wrap {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 8px); overflow: hidden;
    background: #fff;
}
.email-preview-iframe-wrap iframe {
    width: 100%; min-height: 500px; border: 0; display: block;
}

/* Responsive */
@media (max-width: 720px) {
    .contracts-page .filters-bar { flex-direction: column; align-items: stretch; }
    .contract-card-head { flex-direction: column; }
    .contract-card-actions { flex-direction: column; }
    .contract-card-actions .btn { width: 100%; }
}

/* ==========================================
   LISA EVENT DROPDOWN (+ Lisa ▾) - 2026-05-03
   Asendab "+ Lisa üritus" nupu - kasutaja saab valida 3 tüübi seast.
   Kasutab natiivset <details>/<summary> elementi.
========================================== */
.lisa-dropdown {
    position: relative;
    display: inline-block;
}
.lisa-dropdown summary {
    list-style: none;
    user-select: none;
}
.lisa-dropdown summary::-webkit-details-marker { display: none; }
.lisa-dropdown summary::marker { content: ''; }

.lisa-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-dropdown);
    min-width: 180px;
    z-index: var(--z-dropdown);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.lisa-dropdown-item {
    background: transparent;
    border: none;
    padding: 0.625rem 0.875rem;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--text-body);
    color: var(--primary-text);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    transition: background-color 120ms ease;
}
.lisa-dropdown-item:hover,
.lisa-dropdown-item:focus-visible {
    background: var(--gray-100);
    outline: none;
}
.lisa-dropdown-item .lisa-icon {
    font-size: 1.1em;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

/* Vasakule joondatud variant (kui dropdown on lehe vasakul küljel - näiteks kliendikaardil) */
.lisa-dropdown.left .lisa-dropdown-menu {
    right: auto;
    left: 0;
}

/* Dark mode */
[data-theme="dark"] .lisa-dropdown-menu {
    background: var(--card-bg);
    border-color: var(--card-border);
}
[data-theme="dark"] .lisa-dropdown-item:hover,
[data-theme="dark"] .lisa-dropdown-item:focus-visible {
    background: var(--gray-200);
}

/* ============================================================
   Tabular numerals (PR #3)
   ============================================================
   Onest font on proportsionaalne — numbrid eri laiusega ("1" kitsam
   kui "8"), mistõttu tabelites/totals-ridades numbrid "hüppavad".
   tabular-nums sunnib kõik numbrid sama laiusele, joondades veerud
   korralikult. Mõju ainult numbritele — tekst (sh segasisuga lahtrid)
   jääb muutmata, seega kogu .eevaa-table'le rakendamine on ohutu.

   NB: spec (CLAUDE-CODE-TASK.md PR #3) kasutas geneerilisi klasse
   (.invoice-table, .quote-table, .totals-row, .dashboard-stat-value)
   — codebase kasutab .eevaa-table, .eevaa-totals-row, .stat-value.
   Selektorid kohaldatud reaalsetele klassidele. */
.eevaa-table,
.eevaa-table input[type="number"],
.eevaa-table input[inputmode="numeric"],
.eevaa-table input[inputmode="decimal"],
.eevaa-totals-row span:last-child,
.stat-value,
.dashboard-summary-cards,
.dash-stat-year-cards,
.dash-year-stat-mobile,
.dash-year-stat-desktop,
.dash-stat-financial,
td.num,
th.num,
[data-num] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* Opt-in numeric markers — paremjoondus (esimese veeru erand säilib) */
td.num,
th.num,
[data-num] {
    text-align: right;
}

td.num:first-child,
th.num:first-child,
[data-num]:first-child {
    text-align: left;
}

/* ============================================================
   Globaalne otsing (PR #5)
   ============================================================
   Suurem visuaalne kaal — top-bar'i kõige võimsam funktsioon ei
   peaks tunduma kõrval-tööriistana. ⌘K shortcut on juba JS-is
   (global-search.js:71), nüüd lisatud nähtav badge ja paremad
   focus-indicators. */
.global-search-wrapper {
    position: relative;
    width: 420px;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 420px;
}

#global-search-input {
    width: 100%;
    padding: 10px 56px 10px 14px;
    font-size: var(--text-data);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    transition: border-color .15s, box-shadow .15s;
}

#global-search-input:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 86, 0, 0.12);
}

.search-hint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--gray-500);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    padding: 2px 6px;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 1024px) {
    .search-hint { display: none; }
    .global-search-wrapper { width: 100%; max-width: none; }
}

/* Dark mode kohandused */
[data-theme="dark"] #global-search-input {
    background: var(--card-bg);
    border-color: var(--card-border);
}

[data-theme="dark"] .search-hint {
    background: var(--gray-200);
    color: var(--gray-700);
    border-color: var(--gray-300);
}

/* ============================================================
   Pakkumise modaali "Seaded" grid responsive (PR #4)
   ============================================================
   Asendab inline-style fixed 6-veeruse grid'i (1fr 1fr 1fr 1fr 1fr 1.5fr)
   auto-fit responsive grid'iga: ridade arv kohaneb viewport laiusega.
   Märkmed-väli (.field-notes) võtab alati täislaiuse (grid-column: 1 / -1).

   NB: mobile.css:567-569 paneb .eevaa-form-grid'ile globaalse 1fr !important
   override'i (õige default teistele vormidele). Quote-settings-grid opt-out
   tehtud !important'iga, et auto-fit käituks kõikidel viewport'idel:
     - desktop ≥1280px: 6 välja real (Märkmed alati täislaius eraldi real)
     - tablet 820px: 4–5 välja real
     - mobile 390px: 2 välja real (390/140 ≈ 2.78 → 2 cols) */
.eevaa-form-grid.quote-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}

.eevaa-form-grid.quote-settings-grid .field-notes {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .eevaa-form-grid.quote-settings-grid {
        /* Opt-out globaalsest .eevaa-form-grid 1-veerg defaultist */
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    }
}

/* ============================================================
   Dashboard stat-cards: severity accent + delta-rida (PR #8)
   ============================================================
   Kasutab inset box-shadow'i 3px aktsendi jaoks (mitte ::before
   ega border-left) — inline-style border ei lase border-left'i
   CSS'iga override'da ilma !important'iga. Inset box-shadow on
   inline border'iga kompatibel.

   Severity:
   - vaikimisi: oranž aktsent (brand)
   - --danger:  punane (Maksmata arved kui > 0; Avatud ülesanded
                       kui hilinenud > 0)
   - --warning: kollane (reserveeritud)
   - --success: roheline (reserveeritud) */
.stat-card {
    box-shadow: inset 3px 0 0 0 var(--primary);
}

.stat-card--danger { box-shadow: inset 3px 0 0 0 var(--danger); }
.stat-card--warning { box-shadow: inset 3px 0 0 0 var(--warning); }
.stat-card--success { box-shadow: inset 3px 0 0 0 var(--success); }

/* Delta-rida võrdluseks eelmise kuuga */
.stat-card__delta {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.stat-card__delta--up   { color: var(--success-dark, var(--success)); }
.stat-card__delta--down { color: var(--danger-dark, var(--danger)); }

/* Haldustabelid jäävad kitsal ekraanil loetavaks ja klaviatuuriga keritavaks. */
.admin-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
#admin-tab-content .admin-table-scroll table {
    min-width: 640px;
}
#admin-tab-content .admin-table-scroll th {
    white-space: nowrap;
}
#admin-tab-content .admin-backup-table table {
    min-width: 800px;
}
#admin-tab-content .admin-backup-table td:nth-child(2),
#admin-tab-content .admin-backup-table td:nth-child(3) {
    white-space: nowrap;
}
#admin-tab-content .admin-table-scroll td {
    word-break: normal;
    overflow-wrap: break-word;
}

/* Client list controls share the same filters on desktop and mobile. */
.client-filter-toggle { display: none; }
.client-contact-link { display: block; color: var(--primary-text); overflow-wrap: anywhere; }
.client-name-button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.client-name-button:hover { text-decoration: underline; }

/* Report bars share a zero baseline so credit notes remain visible below zero. */
.report-chart-total { color: var(--gray-600); font-size: var(--text-secondary); margin: 0 0 1rem; }
.report-chart-total strong { color: var(--gray-900); }
.report-chart-scroll { overflow-x: auto; max-width: 100%; }
.report-chart-months { position: relative; display: flex; min-width: 480px; gap: 4px; padding-bottom: 8px; }
.report-chart-month { flex: 1; min-width: 0; text-align: center; color: var(--gray-600); font-size: var(--text-micro); }
.report-month-bars { position: relative; height: 180px; margin-bottom: 6px; }
.report-month-bar { position: absolute; left: 10%; width: 36%; border-radius: 3px; }
.report-month-bar + .report-month-bar { left: 54%; }
.report-chart-zero { position: absolute; left: 0; right: 0; border-top: 1px solid var(--gray-300); }
.report-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin: 0.75rem 0; font-size: var(--text-secondary); color: var(--gray-600); }
.report-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.report-month-details summary { cursor: pointer; color: var(--primary-text); padding: 0.75rem 0; font-size: var(--text-secondary); }
.report-month-table { width: 100%; min-width: 340px; font-size: var(--text-secondary); }
.report-month-table caption { text-align: left; padding: 0.75rem; color: var(--gray-600); }
.report-month-table th, .report-month-table td { padding: 0.5rem 0.75rem; }
.report-month-table td { text-align: right; white-space: nowrap; }
.report-client-link { display: block; margin-bottom: 0.75rem; color: inherit; text-decoration: none; border-radius: var(--radius); }
.report-client-link:hover { background: var(--gray-50); }

/* Client detail uses the shared theme surfaces and readable document links. */
.client-detail-header h2, .client-detail-columns a { overflow-wrap: anywhere; }
.client-detail-related:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.client-detail-kpis > div { min-width: 0; overflow-wrap: anywhere; }

/* Client tasks keep named touch controls and readable task context. */
.client-task-row { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--gray-200); }
.client-task-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.client-task-title { font-size: var(--text-data); color: var(--gray-900); padding-top: .6rem; }
.client-task-description { font-size: var(--text-secondary); color: var(--gray-600); white-space: pre-wrap; margin-top: .25rem; }
.client-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; font-size: var(--text-secondary); color: var(--gray-600); margin-top: .25rem; }
.client-task-toggle, .client-task-edit { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; flex-shrink: 0; }
.client-task-toggle { border: 0; border-radius: var(--radius); background: transparent; cursor: pointer; }
.client-task-toggle span { width: 22px; height: 22px; border: 2px solid var(--gray-400); border-radius: 4px; display: grid; place-items: center; }
.client-task-toggle[aria-checked="true"] span { border-color: var(--success-text); background: var(--success-light); color: var(--success-text); }
.client-task-toggle:focus-visible { outline: 2px solid var(--primary); }
.client-task-toggle:disabled { cursor: default; opacity: .6; }
.client-task-event { padding: .25rem 0; min-height: 44px; border: 0; background: transparent; color: var(--primary-text); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.client-task-event:hover { text-decoration: underline; }
.client-task-completed { color: var(--gray-600); font-size: var(--text-secondary); margin: 1rem 0 .25rem; }
.client-task-row.is-done .client-task-title { text-decoration: line-through; color: var(--gray-600); }
.client-task-row.is-overdue .client-task-title { color: var(--danger-text); }
#clt-fields { min-width: 0; margin: 0; }
#clt-feedback { margin: 0 0 1rem; color: var(--gray-700); }
#clt-feedback.client-task-error { color: var(--danger-text); }
#clt-retry-btn { margin-bottom: 1rem; }
#client-task-modal [hidden] { display: none !important; }
#client-task-modal input, #client-task-modal textarea, #client-task-modal select, #client-task-modal button { font-family: inherit; }

/* Arve detail: loetavad read, maksed ja tegevused kõigil ekraanidel. */
.invoice-page-title,
.invoice-page-wrap .eevaa-form-input { overflow-wrap: anywhere; }
.invoice-page-wrap select { font-family: inherit; }
.invoice-lines-table { width: 100%; min-width: 640px; table-layout: fixed; }
.invoice-lines-table td { overflow-wrap: anywhere; }
.invoice-line-meta { display: block; margin-top: .35rem; font-size: var(--text-micro); color: var(--gray-600); }
.invoice-line-section th { background: var(--gray-100); text-align: left; overflow-wrap: anywhere; }
.invoice-totals > div { gap: .25rem .75rem; flex-wrap: wrap; }
.invoice-totals > div > span:last-child { white-space: nowrap; margin-left: auto; }
.invoice-payment-row { gap: 1rem; }
.invoice-payment-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.invoice-payment-row > span:last-child { flex-shrink: 0; white-space: nowrap; }
.invoice-payment-empty,
.invoice-payment-history-note { color: var(--gray-600); font-size: var(--text-secondary); }
.invoice-page-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; border-top: 2px solid var(--gray-200); padding: 1rem 0; background: var(--white); }
.invoice-page-actions > div { flex-wrap: wrap; }
.invoice-page-actions .btn,
.invoice-page-actions .btn-eevaa { min-height: 44px; }
@media (min-width: 769px) {
    .invoice-page-actions { position: sticky; bottom: 0; z-index: 10; }
}

#invoice-payment-modal fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#invoice-payment-modal input,
#invoice-payment-modal select,
#invoice-payment-modal textarea,
#invoice-payment-modal button { font-family: inherit; }
#invoice-payment-modal .eevaa-form-group { margin-bottom: 1rem; }
#invoice-payment-summary { overflow-wrap: anywhere; font-weight: 600; }
#invoice-payment-feedback { color: var(--gray-700); }
#invoice-payment-feedback[role="alert"] { color: var(--danger-text); }
#invoice-payment-modal .eevaa-modal-footer { justify-content: flex-end; gap: .75rem; }
#invoice-payment-modal .eevaa-modal-footer button { min-height: 44px; }
#invoice-payment-modal [hidden] { display: none !important; }
#invoice-payment-modal .modal-close { min-width: 44px; min-height: 44px; font-size: 1.5rem; }

.invoice-edit-wrap input, .invoice-edit-wrap textarea, .invoice-edit-wrap select, .invoice-edit-wrap button { font-family: inherit; }
.invoice-edit-table { width: 100%; min-width: 880px; table-layout: fixed; }
.invoice-edit-table td { vertical-align: top; padding: .75rem .5rem; }
.invoice-edit-table input, .invoice-edit-table select, .invoice-edit-table textarea { width: 100%; min-width: 0; }
.invoice-edit-table button { min-width: 44px; min-height: 44px; }
.ipe-mobile-label { display: none; }
.invoice-edit-actions { justify-content: flex-end; }
#ipe-feedback[hidden] { display: none !important; }
#ipe-feedback[role="alert"] { color: var(--danger-text); }

/* Invoice list: shared controls, direct links and visible financial context. */
.invoice-list-view input, .invoice-list-view select, .invoice-list-view button { font-family: inherit; }
.invoice-list-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: .75rem; margin-bottom: 1rem; }
.invoice-stat-button { display: flex; flex-direction: column; gap: .35rem; padding: .85rem 1rem; min-height: 44px; min-width: 0; text-align: left; border: 2px solid transparent; border-radius: var(--radius); background: var(--gray-100); color: var(--gray-700); cursor: pointer; overflow-wrap: anywhere; }
.invoice-stat-button strong { font-size: var(--text-section); }
.invoice-stat-button > span { font-size: var(--text-secondary); }
.invoice-stat-button[data-status="paid"] { background: var(--success-light); color: var(--success-text); }
.invoice-stat-button[data-status="sent"] { background: var(--info-light); color: var(--info-text); }
.invoice-stat-button[data-status="partial"] { background: var(--warning-light); color: var(--warning-text); }
.invoice-stat-button[data-status="overdue"] { background: var(--danger-light); color: var(--danger-text); }
.invoice-stat-button[aria-pressed="true"] { border-color: currentColor; }
.invoice-list-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.invoice-list-header h2 { margin: 0; }
.invoice-list-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: .75rem; padding: 1rem; }
.invoice-list-toolbar label { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 160px; min-width: 0; color: var(--gray-600); font-size: var(--text-secondary); }
.invoice-list-toolbar .invoice-search-field { flex: 2 1 210px; }
.invoice-list-toolbar label input, .invoice-list-toolbar label select { width: 100%; min-width: 0; }
.invoice-list-view button, .invoice-list-view input, .invoice-list-view select { min-height: 44px; }
#invoice-list-root #invoice-sort { display: block; }
.invoice-list-summary { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .25rem 1rem 1rem; font-size: var(--text-secondary); color: var(--gray-600); }
#invoices-list-container { max-height: 65vh; overflow-y: auto; }
#invoices-list-container[aria-busy="true"] { opacity: .55; }
.invoice-list-row { display: grid; grid-template-columns: minmax(100px,.8fr) minmax(200px,2fr) minmax(100px,1fr) minmax(135px,1fr) auto; gap: 1rem; align-items: center; padding: 1rem; border-top: 1px solid var(--gray-200); border-left: 4px solid transparent; cursor: pointer; }
.invoice-list-row:hover { background: var(--gray-50); }
.invoice-list-row.is-overdue { border-left-color: var(--danger-text); }
.invoice-list-row a { color: var(--primary-text); text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.invoice-list-row > div { min-width: 0; }
.invoice-row-identity, .invoice-row-client, .invoice-row-due, .invoice-row-amount { display: flex; flex-direction: column; gap: .4rem; }
.invoice-row-identity > span, .invoice-row-due, .invoice-reference, .invoice-row-paid { font-size: var(--text-secondary); color: var(--gray-600); overflow-wrap: anywhere; }
.invoice-number-link, .invoice-row-client > a:first-child { font-weight: 600; }
.invoice-event-link { font-size: var(--text-secondary); }
.invoice-row-amount { text-align: right; align-items: flex-end; overflow-wrap: anywhere; }
.invoice-row-amount > strong { font-size: var(--text-section); }
.invoice-list-row.is-overdue .invoice-row-due { color: var(--danger-text); }
.invoice-row-pdf { align-self: center; }
@media (max-width: 1200px) and (min-width: 769px) {
    .invoice-list-row { grid-template-columns: minmax(100px,1fr) minmax(200px,2fr) minmax(135px,1fr); }
    .invoice-row-identity { grid-row: 1 / 3; }
    .invoice-row-amount { grid-column: 3; grid-row: 1; }
    .invoice-row-due { grid-column: 2; grid-row: 2; }
    .invoice-row-pdf { grid-column: 3; grid-row: 2; justify-self: end; }
}

/* Document composition keeps the real recipient, optional note and attachment visible. */
#send-email-modal fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#send-email-modal input, #send-email-modal textarea, #send-email-modal button { font-family: inherit; }
#send-email-modal button, #send-email-modal input:not([type="checkbox"]) { min-height: 44px; }
#send-email-modal .modal-footer { flex-wrap: wrap; gap: .5rem; }
#document-email-context, #document-email-cc { overflow-wrap: anywhere; margin: 0 0 .5rem; }
#document-email-cc { color: var(--gray-600); font-size: var(--text-secondary); }
#document-email-feedback { margin-bottom: .75rem; }
#document-email-feedback[role="alert"] { color: var(--danger-text); }
#send-email-modal [hidden], #email-preview-overlay [hidden] { display: none !important; }
#email-preview-overlay .email-preview-meta { background: var(--gray-100); }
#email-preview-overlay .email-preview-row > span { min-width: 0; overflow-wrap: anywhere; }
#email-preview-overlay button { min-height: 44px; }
@media (max-width: 768px) {
    #send-email-modal .modal-footer button { flex: 1 1 80px; }
    #email-preview-overlay .email-preview-row { flex-wrap: wrap; }
}

#send-email-modal .modal-close, #email-preview-overlay .modal-close { min-width: 44px; min-height: 44px; font-size: 1.5rem; }

/* Quote editing: descriptions and every row action stay available at any width. */
.quote-page-wrap { min-width: 0; overflow-wrap: anywhere; }
.quote-page-wrap .quote-totals { max-width: 100%; }
.quote-page-wrap .quote-totals > div { gap: .75rem; }
.quote-page-wrap .quote-totals span:last-child { text-align: right; }
#quote-page-form input, #quote-page-form select, #quote-page-form textarea { font-family: inherit; }
#quote-page-form #qp-items-table { width: 100%; min-width: 0; table-layout: fixed; }
#quote-page-form #qp-items-table td { vertical-align: top; }
#quote-page-form #qp-items-table button { min-width: 44px; min-height: 44px; }
#quote-page-form #qp-items-table .quote-line-description > div { flex-wrap: nowrap; }
#quote-page-form #qp-items-table textarea { width: 100%; min-width: 0; min-height: 44px !important; height: auto; field-sizing: fixed; line-height: 1.5; }
#quote-page-form #qp-items-table input, #quote-page-form #qp-items-table select { min-height: 44px; }
#quote-page-form .quote-page-actions { gap: .5rem; }
#quote-page-form #qp-feedback { color: var(--gray-700); overflow-wrap: anywhere; }
#quote-page-form #qp-feedback[role="alert"] { color: var(--danger-text); }
@media (max-width: 1024px) {
    #quote-page-form #qp-items-table thead { display: none; }
    #quote-page-form #qp-items-table, #quote-page-form #qp-items-table tbody { display: block; }
    #quote-page-form #qp-items-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: .75rem; margin-bottom: 1rem; }
    #quote-page-form #qp-items-table td { display: block; width: auto; min-width: 0; border: 0; padding: 0; }
    #quote-page-form #qp-items-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .3rem; color: var(--gray-600); font-size: var(--text-secondary); font-weight: 500; text-align: left; }
    #quote-page-form #qp-items-table td.quote-line-description { grid-column: 1 / -1; }
    #quote-page-form #qp-items-table tr.quote-section-row td:first-child { grid-column: 1 / -1; }
    #quote-page-form #qp-items-table .qp-sum { align-self: end; }
    #quote-page-form #qp-items-table td:last-child { text-align: right; }
    #quote-page-form .quote-page-actions { position: static !important; margin: 0 !important; padding: .75rem 0 !important; }
}

/* Quote details and historical snapshots share the same readable document layout. */
#page-content .quote-detail-wrap table.quote-detail-lines, .quote-detail-wrap table.quote-detail-lines { width: 100%; min-width: 0; table-layout: fixed; }
.quote-detail-lines td { vertical-align: top; overflow-wrap: anywhere; }
.quote-detail-description { white-space: pre-wrap; }
.quote-detail-lines td[data-label="Hind"], .quote-detail-lines td[data-label="Summa"] { white-space: nowrap; }
.quote-detail-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; padding: 1rem 0; border-top: 2px solid var(--gray-200); }
.quote-detail-actions > div { display: flex; flex-wrap: wrap; gap: .5rem; }
.quote-detail-actions button, .quote-detail-wrap button { min-height: 44px; }
.quote-detail-wrap a.eevaa-form-input { display: block; }
.quote-version-list { display: grid; gap: .75rem; }
.quote-version-entry { width: 100%; display: grid; gap: .4rem; text-align: left; padding: 1rem; background: var(--gray-50); color: var(--gray-800); border: 1px solid var(--gray-200); border-radius: var(--radius); font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.quote-version-entry:hover { border-color: var(--primary); }
.quote-version-entry:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.quote-version-notice { padding: .75rem; background: var(--info-light); color: var(--info-text); border-radius: var(--radius); }
#quote-action-feedback { color: var(--gray-600); }
@media (max-width: 768px) {
    .quote-detail-wrap table.quote-detail-lines, .quote-detail-lines tbody { display: block; }
    .quote-detail-lines colgroup, .quote-detail-lines thead { display: none; }
    .quote-detail-lines tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; padding: .75rem; border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: .75rem; }
    .quote-detail-lines td { display: block; padding: 0; border: 0; min-width: 0; text-align: left !important; }
    .quote-detail-lines td::before { content: attr(data-label); display: block; color: var(--gray-600); font-size: var(--text-secondary); margin-bottom: .25rem; }
    .quote-detail-lines .quote-detail-description, .quote-detail-lines .quote-section-row td { grid-column: 1 / -1; }
    .quote-detail-lines td[data-label="Summa"] { text-align: right !important; }
    .quote-detail-actions, .quote-detail-actions > div { width: 100%; }
    .quote-detail-actions button { flex: 1 1 110px; }
    .quote-detail-actions { padding-bottom: 5rem; }
    #versions-content .quote-detail-wrap > div:first-child > div { flex-wrap: wrap; }
}
@media (max-width: 768px) {
    #versions-content .quote-detail-wrap > div:first-child > div > div { flex-basis: 100% !important; }
}

/* Quote creation: readable fields and the same row cards as the quote editor. */
#quote-form input, #quote-form select, #quote-form textarea { font-family: inherit; }
#quote-modal #quote-create-feedback { color: var(--gray-700); overflow-wrap: anywhere; margin: 0 0 1rem; }
#quote-modal #quote-create-feedback[role="alert"] { color: var(--danger-text); }
#quote-modal #quote-create-retry[hidden] { display: none; }
#quote-modal .eevaa-section-title { flex-wrap: wrap; gap: .75rem; color: var(--gray-900); }
#quote-modal .eevaa-section-title > div { flex-wrap: wrap; }
#quote-modal button { min-width: 44px; min-height: 44px; }
#quote-modal #quote-items-table { width: 100%; table-layout: fixed; min-width: 0; }
#quote-modal #quote-items-table td { vertical-align: top; }
#quote-modal #quote-items-table td:first-child > div { flex-wrap: nowrap; }
#quote-modal #quote-items-table textarea { min-height: 44px !important; line-height: 1.5; field-sizing: fixed; width: 100%; min-width: 0; }
#quote-modal #quote-notes { min-height: calc(8 * 1.5em + 1.5rem) !important; line-height: 1.5; field-sizing: content; width: 100%; min-width: 0; }
#quote-modal #quote-items-table input, #quote-modal #quote-items-table select { min-width: 0; min-height: 44px; }
#quote-modal .eevaa-totals-row.total { color: var(--gray-900); -webkit-text-fill-color: currentColor; }
#quote-modal .quote-section-row input { color: var(--gray-900) !important; }
@media (max-width: 1024px) {
    #quote-modal #quote-items-table thead { display: none; }
    #quote-modal #quote-items-table, #quote-modal #quote-items-table tbody { display: block; }
    #quote-modal #quote-items-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; padding: .75rem; margin-bottom: 1rem; border: 1px solid var(--gray-200); border-radius: var(--radius); }
    #quote-modal #quote-items-table td { display: block; width: auto !important; min-width: 0; padding: 0; border: 0; }
    #quote-modal #quote-items-table td:first-child { grid-column: 1 / -1; }
    #quote-modal #quote-items-table td:last-child { position: static; grid-column: auto; }
    #quote-modal #quote-items-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .3rem; color: var(--gray-600); font-size: var(--text-secondary); font-weight: 500; text-align: left; }
    #quote-modal #quote-items-table td:nth-child(7) { grid-column: auto; }
}

#quote-modal #quote-items-table textarea, #quote-modal #quote-notes { font-size: 1rem; }

#quote-modal #quote-items-table [data-action="removeQuoteItem"] { font-size: 1.25rem !important; color: var(--danger-text) !important; }

#quote-modal .eevaa-section-title .btn-eevaa-outline { color: var(--gray-900) !important; }
@media (min-width: 1025px) {
    #quote-modal #quote-items-table th:nth-child(2) { width: 75px !important; }
    #quote-modal #quote-items-table th:nth-child(3) { width: 90px !important; }
    #quote-modal #quote-items-table th:nth-child(4) { width: 100px !important; }
    #quote-modal #quote-items-table th:nth-child(5) { width: 60px !important; }
    #quote-modal #quote-items-table th:nth-child(6) { width: 80px !important; }
    #quote-modal #quote-items-table th:nth-child(7) { width: 100px !important; }
    #quote-modal #quote-items-table th:nth-child(8) { width: 55px !important; }
}

/* Quote and invoice lists share the same visual components. */
#quotes-list-container { max-height: 65vh; overflow-y: auto; }
#quotes-list-container[aria-busy="true"] { opacity: .55; }
.quote-stat-button[data-status="accepted"] { background: var(--success-light); color: var(--success-text); }
.quote-stat-button[data-status="rejected"], .quote-stat-button[data-status="expired"] { background: var(--danger-light); color: var(--danger-text); }
.quote-list-title { overflow-wrap: anywhere; }
.quote-list-billing-info, .quote-list-billing { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--text-secondary); }
#quote-list-root .quote-billed-popover { position: static !important; min-width: 0 !important; width: 100%; box-shadow: none !important; }
#quote-list-root #quote-sort { display: block; }

/* Inventory uses the shared theme palette and full-size actions. */
#page-content .inv-tab.active { background: var(--gray-100); color: var(--primary-text); border-bottom: 2px solid var(--primary); }
#page-content .inv-tab { color: var(--gray-600); min-height:44px; }
#page-content .inv-cat-badge { background:var(--gray-100); color:var(--gray-700); }
#page-content .inv-price { color:var(--primary-text) !important; white-space:normal; overflow-wrap:anywhere; }
#page-content .inv-btn { width:44px; height:44px; flex-shrink:0; }
#page-content .inv-btn-del { color:var(--danger-text); }
#page-content .inv-name, #page-content .inv-code { overflow-wrap:anywhere; }
#page-content .inv-code, #page-content .inv-empty { color:var(--gray-600); }
#page-content .inv-status-field { display:flex; align-items:center; gap:.5rem; }
#page-content #inv-count { color:var(--gray-600); font-size:var(--text-secondary); }
#inventory-fields { border:0; margin:0; padding:0; min-width:0; }
#inventory-description { min-height:216px !important; font:inherit; resize:vertical; }
#inventory-feedback { margin-bottom:1rem; }
#inventory-feedback.inventory-form-error { color:var(--danger-text); }
@media(max-width:768px) {
    #page-content .inv-tabs { display:grid !important; grid-template-columns:1fr 1fr; overflow:visible !important; }
    #page-content .inv-tab { padding:.625rem .35rem !important; white-space:normal !important; }
    #page-content .inv-status-field { justify-content:space-between; }
    #page-content .inv-table td .inv-actions { flex-wrap:wrap; }
}

#inventory-retry[hidden], #inventory-feedback[hidden] { display:none !important; }
#page-content .inv-search input::placeholder { color:var(--gray-500); opacity:1; }
#page-content .inv-table tr:not([data-action]) { cursor:default; }

/* Installation composition uses the same controls and mobile line cards as documents. */
#installation-fields { border:0; padding:0; margin:0; min-width:0; }
#installation-modal [hidden] { display:none!important; }
#installation-feedback { padding:.75rem; margin-bottom:.75rem; color:var(--gray-700); background:var(--gray-100); border-radius:var(--radius); }
#installation-feedback[role=alert] { color:var(--danger-text); }
#installation-modal textarea { min-height:216px!important; font:inherit; resize:vertical; }
#installation-modal small { display:block; color:var(--gray-600); font-size:var(--text-data); line-height:1.5; margin-top:.35rem; }
.installation-items-toolbar,.installation-items-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.installation-items-toolbar { justify-content:space-between; margin:1rem 0; }
.installation-items-table { table-layout:fixed; width:100%; }
.installation-items-table th:first-child { width:35%; }
.installation-items-table th:nth-child(2),.installation-items-table th:nth-child(3) { width:11%; }
.installation-items-table td { vertical-align:top; overflow-wrap:anywhere; }
.installation-items-table input,.installation-items-table textarea { width:100%; min-width:0; box-sizing:border-box; }
#installation-modal button,.installation-picker-option { min-height:44px; }
.installation-row-total { font-weight:600; color:var(--gray-900); }
.installation-summary { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:1rem; padding:1rem; background:var(--gray-100); border-radius:var(--radius); }
.installation-summary strong { color:var(--primary-text); font-size:var(--text-section); }
#installation-delete-btn { margin-right:auto; color:var(--danger-text); }
.installation-picker-option { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left; padding:1rem; margin-bottom:.5rem; background:var(--card-bg); color:var(--gray-900); border:1px solid var(--card-border); border-radius:var(--radius); cursor:pointer; overflow-wrap:anywhere; font:inherit; }
.installation-picker-option>span { min-width:0; }
.installation-picker-option>strong { color:var(--primary-text); flex-shrink:0; }
.installation-picker-option small { display:block; font-size:var(--text-data); color:var(--gray-600); }
.installation-picker-option:focus-visible { outline:2px solid var(--primary-text); outline-offset:2px; }
@media(max-width:767px) {
 .installation-items-table,.installation-items-table tbody { display:block; }
 .installation-items-table thead { display:none; }
 .installation-items-table tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--card-border); border-radius:var(--radius); margin-bottom:1rem; padding:.5rem; }
 .installation-items-table td { display:block; min-width:0; padding:.5rem!important; border:0!important; }
 .installation-items-table td:first-child { grid-column:1/-1; }
 .installation-items-table td[data-label]::before { content:attr(data-label); display:block; margin-bottom:.35rem; font-size:var(--text-data); color:var(--gray-600); }
 .installation-items-table td:last-child { display:flex; align-items:end; }
 .installation-items-actions { width:100%; }
 .installation-items-actions button { flex:1; }
 .installation-picker-option { align-items:flex-start; flex-wrap:wrap; }
}
.installation-items-table th:first-child { width:29%; }
.installation-items-table th:nth-child(2) { width:14%; }
.installation-items-table th:nth-child(3),.installation-items-table th:nth-child(4) { width:10%; }
.installation-items-table select { width:100%; min-width:0; }
@media(max-width:767px) {
 #installation-modal .modal-footer { flex-wrap:wrap; gap:.5rem; }
 #installation-modal .modal-footer button { flex:1 1 auto; margin:0; }
 #installation-modal #installation-delete-btn { flex-basis:100%; }
}

/* Allhanke: readable prices, filters and guarded editor. */
.subcontractor-toolbar,.subcontractor-filters,.subcontractor-actions { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.subcontractor-toolbar { justify-content:space-between; margin-bottom:1rem; }
.subcontractor-filters { align-items:end; margin-bottom:1rem; }
.subcontractor-filters label { display:grid; gap:.35rem; flex:1 1 170px; }
.subcontractor-filters label:first-child { flex:2 1 240px; }
.subcontractor-table td { overflow-wrap:anywhere; }
.subcontractor-table td small { display:block; color:var(--gray-600); margin-top:.3rem; }
.subcontractor-table button { white-space:normal; }
#subcontractor-fields { border:0; margin:0; padding:0; min-width:0; }
#subcontractor-feedback[role="alert"] { color:var(--danger-text); }
#subcontractor-notes { min-height:184px !important; }
#subcontractor-price-hint { font-size:var(--text-secondary); margin-bottom:1rem; }
@media(max-width:600px) { #subcontractor-modal .form-row-2,#subcontractor-modal .form-row-3 { grid-template-columns:minmax(0,1fr); } .subcontractor-actions { gap:.5rem; } }
#subcontractor-modal .modal { max-width:800px; }
#subcontractor-modal .form-row-3 { align-items:end; }
#subcontractor-retry[hidden],#subcontractor-feedback[hidden] { display:none !important; }
.subcontractor-product { min-width:0; flex:1; }
/* The sidebar leaves less table space on laptops than a standalone preview. */
.subcontractor-table td[data-label="Ostuhind"],.subcontractor-table td[data-label="Müügihind"],.subcontractor-table td[data-label="Juurdehindlus"],.subcontractor-table td[data-label="Saadaval"] { white-space:nowrap; }
@media(max-width:1279px) {
    #subcontractor-results .subcontractor-table { display:block; width:100%; }
    #subcontractor-results .subcontractor-table thead { display:none; }
    #subcontractor-results .subcontractor-table tbody { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:1rem; }
    #subcontractor-results .subcontractor-table tr { display:block; border:1px solid var(--gray-200); border-radius:var(--radius-sm); padding:.75rem; background:var(--white); }
    #subcontractor-results .subcontractor-table td { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; padding:.4rem 0; border:0; text-align:right; }
    #subcontractor-results .subcontractor-table td::before { content:attr(data-label); flex:0 0 40%; text-align:left; font-size:var(--text-secondary); color:var(--gray-600); }
    #subcontractor-results .subcontractor-actions { justify-content:flex-end; }
}

.event-data-unavailable { margin: 0; padding: 0.75rem; color: var(--gray-600); background: var(--gray-100); border-radius: var(--radius-sm); }

/* Ürituse detaili olekusilt jääb loetavaks ka tumeda teema toonitud taustal. */
.event-detail-status-scheduled { color: #1d4ed8 !important; }
[data-theme="dark"] .event-detail-status-scheduled { color: #bfdbfe !important; background: #1e3a8a !important; }
[data-theme="dark"] .event-detail-status-pending { color: #fef3c7 !important; background: #78350f !important; }
[data-theme="dark"] .event-detail-status-confirmed { color: #d1fae5 !important; background: #065f46 !important; }
[data-theme="dark"] .event-detail-status-completed { color: #e5e7eb !important; background: #374151 !important; }
[data-theme="dark"] .event-detail-status-cancelled { color: #fee2e2 !important; background: #991b1b !important; }

/* Meeskonna planeerimine — kanoniline liikmelisus, faasid ja saadavus */
.team-planning .planning-toolbar,
.team-planning .planning-toolbar-group,
.team-planning .planning-legend,
.team-planning .planning-time-row,
.team-planning .planning-date-row { display: flex; align-items: center; gap: 0.5rem; }
.team-planning .planning-toolbar { justify-content: space-between; flex-wrap: wrap; margin-bottom: 1rem; }
.team-planning .planning-toolbar-group,
.team-planning .planning-legend { flex-wrap: wrap; }
.team-planning .planning-week-range { font-weight: 600; margin-left: 0.5rem; }
.team-planning .gantt-container { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius); }
.team-planning .gantt-container:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.team-planning .gantt-grid { width: 100%; min-width: 1040px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.team-planning .gantt-grid th,
.team-planning .gantt-grid td { border-right: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); min-width: 0; vertical-align: top; }
.team-planning .gantt-grid th:first-child,
.team-planning .gantt-grid td:first-child { width: 200px; }
.team-planning .gantt-header { padding: 0.75rem; text-align: center; background: var(--gray-100); }
.team-planning .gantt-header span,
.team-planning .gantt-user small { display: block; color: var(--gray-500); font-size: var(--text-secondary); }
.team-planning .gantt-header.is-today { background: var(--warning-light); }
.team-planning .gantt-header.is-weekend,
.team-planning .gantt-cell.is-weekend { background: var(--gray-50); }
.team-planning .gantt-user { padding: 0.75rem; text-align: left; background: var(--bg-surface); text-transform: none; letter-spacing: normal; font-weight: 400; }
.team-planning .gantt-user small { line-height: 1.35; }
.team-planning .gantt-user-content { display: flex; align-items: center; gap: 0.5rem; }
.team-planning .user-avatar-small { display: inline-flex; width: 2rem; height: 2rem; flex: 0 0 2rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 600; }
.team-planning .gantt-cell { position: relative; min-height: 4.5rem; padding: 0.25rem; }
.team-planning .gantt-cell.is-drop-target { background: rgba(255, 86, 0, 0.12); }
.team-planning .planning-event-entry { margin-bottom: 0.25rem; }
.team-planning .event-block { display: block; width: 100%; border: 0; border-radius: var(--radius-sm); padding: 0.3rem 0.45rem; background: var(--planning-event-color); color: var(--planning-event-text, #fff); font: inherit; font-size: var(--text-secondary); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

.team-planning .event-block:focus-visible,
.team-planning .planning-event-actions .btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.team-planning .planning-event-actions { display: flex; gap: 0.35rem; padding: 0.15rem 0.25rem 0; }
.team-planning .planning-event-actions .btn { min-height: 32px; padding: 0.25rem 0.45rem; border: 1px solid; border-radius: var(--radius-sm); font-weight: 600; white-space: nowrap; }
.team-planning .planning-edit { color: #1e3a8a; background: #dbeafe; border-color: #93c5fd; }
.team-planning .planning-remove { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }
.team-planning .planning-availability-restore { color: #065f46; background: #d1fae5; border: 1px solid #6ee7b7; border-radius: var(--radius-sm); font-weight: 600; white-space: nowrap; }
.team-planning .availability-unavailable { background: var(--danger-light); }
.team-planning .availability-partial { background: var(--warning-light); }
.team-planning .planning-availability { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; min-height: 1.5rem; font-size: var(--text-secondary); overflow-wrap: anywhere; }
.team-planning .planning-availability-text { display: inline-block; }
.team-planning .planning-availability-restore { min-height: 32px; padding: 0.15rem; font-size: var(--text-micro); }
.team-planning .planning-legend { margin-top: 1rem; color: var(--gray-600); font-size: var(--text-data); }
.team-planning .planning-legend i { display: inline-block; width: 1rem; height: 1rem; margin-right: 0.25rem; vertical-align: middle; border-radius: var(--radius-sm); }
.team-planning .planning-legend-setup { background: var(--warning); }
.team-planning .planning-legend-event { background: var(--primary); }
.team-planning .planning-legend-teardown { background: var(--secondary); }
.team-planning .planning-legend-unavailable { background: var(--danger); }
.team-planning .planning-legend-partial { background: var(--warning-light); border: 1px solid var(--warning); }
.team-planning .planning-time-row > .form-group { flex: 1; min-width: 0; }

@media (max-width: 768px) {
    .team-planning .planning-toolbar { align-items: stretch; }
    .team-planning .planning-toolbar .btn { min-height: 44px; }
    .team-planning .planning-week-range { flex-basis: 100%; margin-left: 0; }
    .team-planning .gantt-grid { min-width: 930px; }
    .team-planning .gantt-grid th:first-child,
    .team-planning .gantt-grid td:first-child { width: 160px; position: sticky; left: 0; z-index: 2; }
    .team-planning .gantt-grid thead th:first-child { z-index: 3; }
    .team-planning .planning-time-row { align-items: stretch; flex-direction: column; gap: 0; }
    .team-planning .planning-event-actions { flex-direction: column; align-items: stretch; gap: 0.25rem; }
    .team-planning .planning-event-actions .btn, .team-planning .planning-availability-restore { min-height: 44px; width: 100%; }
}