/* ========================================
   ZO24 Sales CRM — ZINTRA Design System v3
   Polished rounded UI
   ======================================== */

:root {
    --sidebar-bg: #1a1f2e;
    --sidebar-hover: #252b3d;
    --sidebar-text: #8892a4;
    --sidebar-width: 260px;

    --bg: #f5f6f8;
    --bg-white: #ffffff;
    --text: #1a1f2e;
    --text-sec: #64748b;
    --text-muted: #94a3b8;

    --blue: #2563eb;
    --blue-hover: #1d4ed8;
    --blue-light: #dbeafe;
    --green: #10b981;
    --green-light: #d1fae5;
    --green-dark: #065f46;
    --orange: #f59e0b;
    --orange-light: #fef3c7;
    --orange-dark: #92400e;
    --red: #ef4444;
    --red-light: #fee2e2;
    --red-dark: #991b1b;
    --purple: #8b5cf6;
    --purple-light: #ede9fe;
    --purple-dark: #5b21b6;
    --pink: #ec4899;
    --pink-light: #fce7f3;
    --pink-dark: #9d174d;
    --teal: #14b8a6;
    --teal-light: #ccfbf1;
    --indigo: #6366f1;
    --indigo-light: #e0e7ff;
    --indigo-dark: #3730a3;
    --slate: #64748b;
    --slate-light: #e2e8f0;

    --border: #e2e8f0;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    --shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
    --shadow-md: 0 4px 14px rgba(0,0,0,.07);
    --shadow-lg: 0 12px 28px rgba(0,0,0,.1);
    --tr: .18s ease;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ======== SIDEBAR ======== */
.sidebar {
    width: var(--sidebar-width); background: var(--sidebar-bg);
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow: hidden;
    transition: width .25s ease;
}
.sidebar-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.logo-icon { width: 34px; height: 34px; background: var(--blue); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.logo-text { color: #fff; font-size: 17px; font-weight: 700; white-space: nowrap; }
.logo-sub { color: var(--blue); font-weight: 400; }

.sidebar-toggle {
    background: none; border: none; color: var(--sidebar-text); cursor: pointer;
    width: 28px; height: 28px; border-radius: var(--radius); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--tr);
}
.sidebar-toggle:hover { background: var(--sidebar-hover); color: #fff; }

.zintra-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s;
}
.zintra-back-btn:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.04);
}
.zintra-back-btn svg { flex-shrink: 0; }
.sidebar.collapsed .zintra-back-btn span { display: none; }
.sidebar.collapsed .zintra-back-btn { justify-content: center; padding: 10px; }

.sidebar-nav { flex: 1; min-height: 0; padding: 12px 10px; display: flex; flex-direction: column; gap: 0; overflow-y: auto; overflow-x: hidden; }
.sidebar-nav-top { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-scroll { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 4px; padding-top: 4px; }
.sidebar-nav-scroll::-webkit-scrollbar { width: 5px; }
.sidebar-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }
.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
.nav-section-label { color: var(--sidebar-text); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 16px 14px 6px; white-space: nowrap; overflow: hidden; transition: opacity .2s ease; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; border-radius: var(--radius); }
.nav-section-label:hover { color: #fff; }
.nav-section-label .section-chevron { width: 14px; height: 14px; transition: transform .2s ease; flex-shrink: 0; }
.nav-section-label.collapsed .section-chevron { transform: rotate(-90deg); }
.nav-section-content { display: flex; flex-direction: column; gap: 2px; overflow: hidden; transition: max-height .25s ease, opacity .2s ease; }
.nav-section-content.collapsed { max-height: 0 !important; opacity: 0; pointer-events: none; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; border-radius: var(--radius);
    color: var(--sidebar-text); text-decoration: none;
    font-size: 13px; font-weight: 500; transition: all var(--tr);
    white-space: nowrap; overflow: hidden;
}
.nav-item:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item.active { background: rgba(37,99,235,.15); color: var(--blue); }
.nav-item.active svg { stroke: var(--blue); }
.nav-item svg { flex-shrink: 0; }
.nav-item-add { opacity: .6; } .nav-item-add:hover { opacity: 1; }
.nav-seller-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---- Sync status indicator ---- */
.sync-status-bar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; cursor: pointer; border-radius: var(--radius); transition: background .2s; margin-bottom: 4px; }
.sync-status-bar:hover { background: var(--sidebar-hover); }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: background .3s; }
.sync-dot.green { background: #22c55e; box-shadow: 0 0 4px #22c55e88; }
.sync-dot.yellow { background: #eab308; box-shadow: 0 0 4px #eab30888; }
.sync-dot.red { background: #ef4444; box-shadow: 0 0 4px #ef444488; }
.sync-dot.blue { background: #3b82f6; box-shadow: 0 0 4px #3b82f688; animation: syncPulse 1.2s ease-in-out infinite; }
@keyframes syncPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.sync-label { color: var(--sidebar-text); font-size: 11px; white-space: nowrap; overflow: hidden; }
.sidebar.collapsed .sync-status-bar { justify-content: center; padding: 6px; }
.sidebar.collapsed .sync-label { opacity: 0; width: 0; overflow: hidden; pointer-events: none; }
.sidebar-footer { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.user-info { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 32px; height: 32px; background: var(--blue); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 12px; flex-shrink: 0; }
.user-name { color: #fff; font-size: 13px; font-weight: 600; display: block; white-space: nowrap; }
.user-role { color: var(--sidebar-text); font-size: 11px; display: block; white-space: nowrap; }
.user-details { overflow: hidden; }

/* ---- Collapsed sidebar ---- */
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .logo-text,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-section-content,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-item-add,
.sidebar.collapsed .user-details { opacity: 0; width: 0; overflow: hidden; pointer-events: none; }
.sidebar.collapsed .sidebar-header { padding: 20px 15px; justify-content: center; }
.sidebar.collapsed .sidebar-toggle { position: absolute; right: 8px; top: 18px; }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar.collapsed .logo { justify-content: center; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 9px 0; }
.sidebar.collapsed .sidebar-footer { padding: 14px 16px; display: flex; justify-content: center; }
.sidebar.collapsed .user-info { justify-content: center; }
.sidebar.collapsed .sidebar-nav { padding: 12px 6px; align-items: center; }

/* Tooltip on hover in collapsed mode */
.sidebar.collapsed .nav-item { position: relative; }
.sidebar.collapsed .nav-item::after {
    content: attr(data-tooltip);
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    background: var(--sidebar-bg); color: #fff; padding: 6px 12px;
    border-radius: var(--radius); font-size: 12px; font-weight: 600;
    white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .15s ease;
    margin-left: 8px; box-shadow: var(--shadow-lg);
    z-index: 200;
}
.sidebar.collapsed .nav-item:hover::after { opacity: 1; }

/* ======== MAIN ======== */
.main-content { margin-left: var(--sidebar-width); flex: 1; height: 100vh; display: flex; flex-direction: column; overflow: hidden; transition: margin-left .25s ease; }
body.sidebar-collapsed .main-content { margin-left: 64px; }
.topbar { background: var(--bg-white); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.topbar-left { display: flex; align-items: baseline; gap: 12px; }
.page-title { font-size: 18px; font-weight: 700; }
.page-subtitle { font-size: 13px; color: var(--text-sec); }
.topbar-right { display: flex; gap: 8px; }

/* ======== BUTTONS ======== */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border: none; border-radius: var(--radius-full);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all var(--tr); white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.25); }
.btn-primary:hover { background: var(--blue-hover); box-shadow: 0 4px 12px rgba(37,99,235,.3); transform: translateY(-1px); }
.btn-outline { background: var(--bg-white); color: var(--text); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.btn-danger { background: var(--red); color: #fff; border-radius: var(--radius-full); }
.btn-danger:hover { background: #dc2626; }
.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn-icon { background: none; border: none; cursor: pointer; padding: 5px; color: var(--text-muted); border-radius: var(--radius); transition: all var(--tr); display: inline-flex; align-items: center; }
.btn-icon:hover { background: var(--blue-light); color: var(--blue); }

/* ======== VIEWS ======== */
.view { padding: 20px 28px; flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.hidden { display: none !important; }

/* ======== CARDS ======== */
.card { background: var(--bg-white); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 20px; }
.card-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.card-header h2 { font-size: 15px; font-weight: 700; }

/* ======== DASHBOARD ======== */
.dashboard-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-bottom: 20px; }
.stat-card { background: var(--bg-white); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.stat-card.clickable { cursor: pointer; transition: all var(--tr); }
.stat-card.clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-icon { width: 30px; height: 30px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.stat-icon svg { width: 15px; height: 15px; }
.si-blue { background: var(--blue-light); } .si-blue svg { stroke: var(--blue); }
.si-green { background: var(--green-light); } .si-green svg { stroke: var(--green); }
.si-orange { background: var(--orange-light); } .si-orange svg { stroke: var(--orange); }
.si-red { background: var(--red-light); } .si-red svg { stroke: var(--red); }
.stat-label { font-size: 10px; color: var(--text-sec); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; height: 28px; line-height: 14px; overflow: hidden; }
.stat-value { font-size: 16px; font-weight: 800; margin-bottom: 1px; white-space: nowrap; }
.stat-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.text-muted { color: var(--text-muted); font-size: 13px; }

.budget-controls { display: flex; align-items: center; gap: 8px; }
.budget-section { padding: 20px; }
.budget-bar { height: 22px; background: var(--bg); border-radius: var(--radius-full); overflow: hidden; }
.budget-bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: var(--radius-full); transition: width .6s ease; }
.budget-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--text-sec); }
.budget-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.budget-detail { text-align: center; padding: 12px; background: var(--bg); border-radius: var(--radius); }
.budget-detail-label { font-size: 11px; color: var(--text-sec); margin-bottom: 4px; }
.budget-detail-value { font-size: 17px; font-weight: 700; }

.pipeline-chart { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.pipeline-row { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px 0; border-radius: var(--radius); }
.pipeline-row:hover { background: #f8fafc; }
.pipeline-label { width: 130px; font-size: 12px; font-weight: 600; text-align: right; flex-shrink: 0; }
.pipeline-bar-wrap { flex: 1; height: 30px; background: var(--bg); border-radius: var(--radius-full); overflow: hidden; }
.pipeline-bar-inner { height: 100%; border-radius: var(--radius-full); transition: width .5s ease; display: flex; align-items: center; padding: 0 12px; font-size: 11px; font-weight: 600; color: #fff; min-width: fit-content; }
.pipeline-count { width: 70px; font-size: 12px; color: var(--text-sec); flex-shrink: 0; }

/* ======== TABLES ======== */
.table-container { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-sec); text-transform: uppercase; letter-spacing: .4px; background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--border); }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table tbody tr.clickable-row { cursor: pointer; }
.data-table tbody tr.clickable-row:hover { background: var(--blue-light); }

.input-field { padding: 8px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--text); background: var(--bg-white); outline: none; transition: all var(--tr); width: 100%; }
.input-field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
select.input-field { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
.input-sm { width: 130px; }

/* ======== MONDAY-STYLE TABLE ======== */
.monday-group { margin-bottom: 6px; }
.monday-group-header {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; cursor: pointer; user-select: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transition: filter var(--tr);
}
.monday-group-header:hover { filter: brightness(.92); }
.monday-group-toggle { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transition: transform var(--tr); }
.monday-group-toggle.collapsed { transform: rotate(-90deg); }
.monday-group-title { font-size: 14px; font-weight: 700; }
.monday-group-count { font-size: 12px; opacity: .7; background: rgba(255,255,255,.2); padding: 2px 10px; border-radius: var(--radius-full); }
.monday-group-sum { font-size: 12px; font-weight: 600; margin-left: auto; opacity: .85; }
.monday-group-actions { margin-left: 8px; display: flex; gap: 2px; opacity: 0; transition: opacity var(--tr); }
.monday-group-header:hover .monday-group-actions { opacity: 1; }
.monday-group-actions button { background: none; border: none; cursor: pointer; padding: 3px; color: inherit; opacity: .6; border-radius: 6px; }
.monday-group-actions button:hover { opacity: 1; background: rgba(255,255,255,.2); }

/* Group drag handle */
.group-drag-handle {
    cursor: grab; opacity: .4; display: flex; align-items: center;
    padding: 0 2px; transition: opacity var(--tr); flex-shrink: 0;
}
.monday-group-header:hover .group-drag-handle { opacity: .8; }
.group-drag-handle:active { cursor: grabbing; }

/* Group drag & drop feedback */
.monday-group.group-dragging { opacity: .35; transition: opacity .15s ease; }
.monday-group.group-drop-before { box-shadow: 0 -3px 0 0 var(--blue); }
.monday-group.group-drop-after { box-shadow: 0 3px 0 0 var(--blue); }
.monday-group.group-drop-target { box-shadow: inset 0 0 0 2px var(--blue); border-radius: 8px; }

/* Item drag & drop feedback */
tr.item-dragging { opacity: .3; }
tr.item-drop-above td { box-shadow: inset 0 2px 0 0 var(--blue); }
tr.item-drop-below td { box-shadow: inset 0 -2px 0 0 var(--blue); }
tr[draggable="true"] { cursor: grab; }
tr[draggable="true"]:active { cursor: grabbing; }

/* Context menu */
.context-menu {
    position: fixed; z-index: 9999;
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: 8px; padding: 4px 0; min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.context-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px; font-size: 13px; cursor: pointer;
    color: var(--text-primary);
}
.context-menu-item:hover { background: var(--bg-light); }
.context-menu-item.context-menu-danger { color: #dc2626; }
.context-menu-item.context-menu-danger:hover { background: #fef2f2; }
.context-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* Picker modal items */
.picker-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px; cursor: pointer; font-size: 14px;
    color: var(--text-primary); transition: background .1s;
}
.picker-item:hover { background: var(--bg-light); }
.picker-item .picker-color {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.picker-item .picker-avatar {
    width: 28px; height: 28px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 11px;
    font-weight: 700; color: #fff; flex-shrink: 0;
}

/* Group color picker */
.group-color-picker {
    position: fixed; z-index: 400;
    background: var(--bg-white); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border);
    overflow: hidden; animation: pickerIn .15s ease;
    width: 200px;
}
.group-color-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 6px; padding: 10px;
}
.group-color-swatch {
    width: 36px; height: 36px; border-radius: var(--radius);
    cursor: pointer; border: 3px solid transparent;
    transition: all var(--tr);
}
.group-color-swatch:hover { transform: scale(1.15); border-color: rgba(255,255,255,.5); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.group-color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--text), 0 2px 8px rgba(0,0,0,.25); transform: scale(1.1); }

.monday-table-wrap { background: var(--bg-white); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow-x: auto; scrollbar-width: thin; }
.monday-table-wrap::-webkit-scrollbar { height: 8px; }
.monday-table-wrap::-webkit-scrollbar-track { background: var(--bg); border-radius: 4px; }
.monday-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.monday-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.monday-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1540px; }
.monday-table th { padding: 8px 10px; font-size: 10px; font-weight: 700; color: var(--text-sec); text-transform: uppercase; letter-spacing: .4px; background: #f8fafc; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.monday-table td { padding: 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; vertical-align: middle; }
.monday-table tbody tr { transition: background var(--tr); }
.monday-table tbody tr:hover { background: #fafbfd; }

/* Sticky first columns: color bar + name */
.monday-table th:nth-child(1),
.monday-table td:nth-child(1) { position: sticky; left: 0; z-index: 2; }
.monday-table th:nth-child(2),
.monday-table td:nth-child(2) { position: sticky; left: 6px; z-index: 2; background: var(--bg-white); box-shadow: 4px 0 8px -2px rgba(0,0,0,.06); }
.monday-table thead th:nth-child(2) { background: #f8fafc; }
.monday-table tbody tr:hover td:nth-child(2) { background: #fafbfd; }

.row-color-bar { width: 6px; padding: 0; position: relative; }
.row-color-bar-inner { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }

.cell { padding: 7px 10px; min-height: 40px; display: flex; align-items: center; gap: 6px; }
.cell-edit { cursor: pointer; border-radius: 6px; transition: background var(--tr); }
.cell-edit:hover { background: var(--blue-light); }
.cell-input { width: 100%; border: 2px solid var(--blue); border-radius: 8px; padding: 6px 10px; font-size: 13px; outline: none; background: #fff; font-family: inherit; }
.cell-name { font-weight: 600; }
.cell-value { font-weight: 700; color: var(--blue); }
.cell-muted { color: var(--text-muted); font-size: 12px; }

.col-name { width: 220px; } .col-entry { width: 100px; } .col-kunde { width: 150px; }
.col-person { width: 150px; } .col-koord { width: 150px; } .col-sales { width: 120px; }
.col-status { width: 160px; } .col-month { width: 110px; } .col-closure { width: 100px; }
.col-followup { width: 100px; } .col-kontakt { width: 100px; } .col-kundegruppe { width: 120px; }
.col-actions { width: 95px; }
.col-ball { width: 80px; }

/* ======== BALL HOLDER ======== */
.ball-holder-cell {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    padding: 4px 10px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700; letter-spacing: .2px;
    white-space: nowrap; min-width: 100%; text-align: center;
    transition: all var(--tr);
}
.ball-seller {
    background: #dbeafe; color: #1e40af;
}
.ball-coord {
    background: #dcfce7; color: #166534;
}
.ball-holder-cell:hover {
    filter: brightness(0.92);
}
.ball-emoji {
    display: inline-block;
    transition: transform 0.15s ease;
}
@keyframes ballKick {
    0%   { transform: rotate(0deg) translateX(0); }
    20%  { transform: rotate(-20deg) translateX(-3px); }
    50%  { transform: rotate(30deg) translateX(8px) translateY(-6px); }
    70%  { transform: rotate(-10deg) translateX(4px) translateY(-2px); }
    100% { transform: rotate(0deg) translateX(0) translateY(0); }
}
.ball-kick-anim {
    animation: ballKick 0.5s ease-out;
}

/* ======== STATUS PILLS ======== */
.status-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 14px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700; letter-spacing: .2px;
    white-space: nowrap; transition: all var(--tr);
    min-width: 100%; text-align: center; cursor: default;
}
.sp-afventer-kunde { background: #fef3c7; color: #92400e; }
.sp-afventer-salg { background: var(--indigo-light); color: var(--indigo-dark); }
.sp-afventer-mode { background: var(--pink-light); color: var(--pink-dark); }
.sp-afventer-indkob { background: var(--purple-light); color: var(--purple-dark); }
.sp-win { background: var(--green-light); color: var(--green-dark); }
.sp-lost { background: var(--red-light); color: var(--red-dark); }
.sp-done { background: var(--slate-light); color: var(--slate); }
.sp-empty { background: #f1f5f9; color: #b0b8c4; }

/* Status picker in forms */
.status-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.status-picker-btn {
    padding: 7px 16px; border-radius: var(--radius-full);
    font-size: 12px; font-weight: 700; cursor: pointer;
    border: 2px solid transparent; transition: all var(--tr);
    opacity: .55;
}
.status-picker-btn:hover { opacity: .85; transform: scale(1.05); }
.status-picker-btn.selected { opacity: 1; border-color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.15); transform: scale(1.05); }

/* ======== KUNDE GRUPPE PILLS ======== */
.kg-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 12px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700; letter-spacing: .2px;
}
.kg-b2b { background: var(--blue-light); color: var(--blue); }
.kg-efterskole { background: var(--green-light); color: var(--green-dark); }
.kg-teamsport { background: var(--orange-light); color: var(--orange-dark); }
.kg-empty { background: #f1f5f9; color: #b0b8c4; }

.kunde-gruppe-picker { display: flex; gap: 8px; }
.kg-picker-btn {
    padding: 7px 16px; border-radius: var(--radius-full);
    font-size: 12px; font-weight: 700; cursor: pointer;
    border: 2px solid transparent; transition: all var(--tr);
    opacity: .55;
}
.kg-picker-btn:hover { opacity: .85; transform: scale(1.05); }
.kg-picker-btn.selected { opacity: 1; border-color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.15); transform: scale(1.05); }

/* ======== PERSON AVATAR ======== */
.person-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 10px 3px 3px; border-radius: var(--radius-full);
    background: var(--bg); font-size: 12px; font-weight: 600;
    transition: all var(--tr); cursor: pointer;
}
.person-chip:hover { background: var(--blue-light); }
.person-avatar {
    width: 26px; height: 26px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.person-chip-name { color: var(--text); }
.person-empty { color: var(--text-muted); font-size: 12px; cursor: pointer; }
.person-empty:hover { color: var(--blue); }

/* Person dropdown */
.person-dropdown {
    position: fixed; z-index: 9999;
    background: var(--bg-white); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border);
    min-width: 220px; max-height: 250px; overflow-y: auto;
    padding: 6px;
}
.person-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: var(--radius);
    cursor: pointer; font-size: 13px; transition: background var(--tr);
}
.person-dropdown-item:hover { background: var(--blue-light); }
.person-dropdown-item .person-avatar { width: 30px; height: 30px; font-size: 11px; }

/* Summary row */
.monday-summary { display: flex; align-items: center; padding: 10px 14px; background: #f8fafc; border-top: 2px solid var(--border); font-size: 12px; color: var(--text-sec); gap: 8px; }
.monday-summary strong { color: var(--text); font-weight: 700; }

.monday-add-row { display: flex; align-items: center; padding: 10px 16px; gap: 8px; color: var(--text-muted); font-size: 13px; cursor: pointer; border-top: 1px solid #f1f5f9; transition: all var(--tr); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.monday-add-row:hover { background: var(--blue-light); color: var(--blue); }

/* ======== KANBAN ======== */
#view-kanban { display: flex; flex-direction: column; overflow: hidden; }
#view-kanban.hidden { display: none !important; }
.kanban-board { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding-bottom: 16px; flex: 1; min-height: 0; }
.kanban-column { min-width: 270px; max-width: 300px; flex: 1; display: flex; flex-direction: column; }
.kanban-column-header { padding: 10px 14px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; display: flex; align-items: center; justify-content: space-between; background: var(--bg-white); border: 1px solid var(--border); border-bottom: 3px solid var(--blue); }
.kanban-column-title { font-size: 13px; font-weight: 700; }
.kanban-column-count { background: var(--bg); padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; color: var(--text-sec); }
.kanban-column-total { font-size: 11px; color: var(--text-sec); font-weight: 600; }
.kanban-cards { flex: 1; background: var(--bg); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 150px; }
.kanban-cards.drag-over { background: var(--blue-light); border-color: var(--blue); }
.kanban-card { background: var(--bg-white); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); cursor: grab; transition: all var(--tr); border-left: 4px solid var(--blue); }
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kanban-card.dragging { opacity: .5; }
.kanban-card-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.kanban-card-company { font-size: 12px; color: var(--text-sec); margin-bottom: 2px; }
.kanban-card-seller { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.kanban-card-footer { display: flex; justify-content: space-between; align-items: center; }
.kanban-card-value { font-size: 13px; font-weight: 700; color: var(--blue); }
.kanban-card-month { font-size: 10px; color: var(--text-muted); }

/* ======== TEAM GRID ======== */
.team-grid { padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.team-card {
    background: var(--bg); border-radius: var(--radius-lg); padding: 20px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    transition: all var(--tr); position: relative;
}
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.team-avatar-lg {
    width: 64px; height: 64px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.team-card-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.team-card-role { font-size: 12px; color: var(--text-sec); }
.team-card-delete { position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity var(--tr); }
.team-card:hover .team-card-delete { opacity: 1; }

/* ======== MODALS ======== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal { background: var(--bg-white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 600px; max-width: 95vw; max-height: 90vh; overflow-y: auto; }
.modal-sm { width: 420px; }
.modal-lg { width: 820px; }
.modal-header { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-white); z-index: 1; }
.modal-header h2 { font-size: 16px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; transition: all var(--tr); }
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-footer { padding: 14px 22px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--bg-white); z-index: 1; }
.modal-body { padding: 20px; max-height: 60vh; overflow-y: auto; }
.modal-text { padding: 16px 24px; color: var(--text-sec); }

.form-grid { padding: 20px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-sec); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
.form-group.full { grid-column: 1 / -1; }

/* Deal modal compact 3-col layout */
.modal-deal { width: 760px; }
.deal-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 12px 16px !important; padding: 16px 22px !important; }
.deal-grid .status-picker { gap: 5px; }
.deal-grid .status-picker-btn { padding: 5px 11px; font-size: 11px; }
.deal-grid .kunde-gruppe-picker { gap: 5px; }
.deal-grid .kg-picker-btn { padding: 5px 11px; font-size: 11px; }

/* ======== IMPORT ======== */
.import-area { padding: 20px; }
.import-options { margin-bottom: 16px; max-width: 300px; }
.drop-zone { border: 2px dashed var(--border); border-radius: var(--radius-xl); padding: 40px 20px; text-align: center; cursor: pointer; transition: all var(--tr); margin-bottom: 20px; }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--blue); background: var(--blue-light); }
.drop-zone p { color: var(--text-sec); margin-top: 10px; font-size: 14px; }
.drop-zone-sub { font-size: 12px !important; color: var(--text-muted) !important; }
.import-note { margin-top: 10px; font-size: 12px; color: var(--text-muted); font-style: italic; }

/* Color picker */
.color-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.color-swatch { width: 30px; height: 30px; border-radius: var(--radius); cursor: pointer; border: 3px solid transparent; transition: all var(--tr); }
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* ======== PICKER PANELS (Month & Date) ======== */
.picker-panel {
    position: fixed; z-index: 9999;
    background: var(--bg-white); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border);
    overflow: hidden; animation: pickerIn .15s ease;
}
@keyframes pickerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.picker-header {
    padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--text-sec);
    text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    background: #f8fafc;
}

/* ---- Month Picker ---- */
.month-picker-panel { width: 260px; }
.month-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 4px; padding: 10px;
}
.month-tile {
    padding: 10px 6px; border-radius: var(--radius);
    text-align: center; cursor: pointer; font-size: 12px; font-weight: 600;
    transition: all var(--tr); color: var(--text);
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    background: var(--bg);
}
.month-tile:hover { background: var(--blue-light); color: var(--blue); transform: scale(1.05); }
.month-tile.selected {
    background: var(--blue); color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.month-tile-short { font-size: 14px; font-weight: 700; line-height: 1.2; }
.month-tile-full { font-size: 9px; opacity: .7; text-transform: uppercase; letter-spacing: .3px; }

/* ---- Date/Calendar Picker ---- */
.date-picker-panel { width: 280px; }
.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 2px; padding: 8px 10px;
}
.cal-day-name {
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-align: center; padding: 4px 0; text-transform: uppercase;
}
.cal-day {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all var(--tr); color: var(--text);
}
.cal-day:hover:not(.empty) { background: var(--blue-light); color: var(--blue); }
.cal-day.empty { cursor: default; }
.cal-day.today {
    border: 2px solid var(--blue); font-weight: 700;
}
.cal-day.selected {
    background: var(--blue); color: #fff; font-weight: 700;
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.cal-nav {
    background: none; border: none; cursor: pointer;
    width: 28px; height: 28px; border-radius: var(--radius-full);
    font-size: 18px; font-weight: 700; color: var(--text-sec);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--tr);
}
.cal-nav:hover { background: var(--blue-light); color: var(--blue); }
.cal-title { font-size: 13px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: 0; }
.cal-footer {
    display: flex; justify-content: space-between; padding: 8px 10px;
    border-top: 1px solid var(--border);
}
.cal-clear, .cal-today {
    background: none; border: none; cursor: pointer;
    font-size: 12px; font-weight: 600; padding: 5px 12px;
    border-radius: var(--radius-full); transition: all var(--tr);
}
.cal-clear { color: var(--text-muted); }
.cal-clear:hover { background: var(--red-light); color: var(--red); }
.cal-today { color: var(--blue); }
.cal-today:hover { background: var(--blue-light); }

/* ======== BRANCH BOARD ======== */
.branch-summary-cards {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-bottom: 20px;
}
.branch-stat {
    background: var(--bg-white); border-radius: var(--radius-lg);
    padding: 20px; box-shadow: var(--shadow);
}
.branch-stat-label { font-size: 12px; font-weight: 600; color: var(--text-sec); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.branch-stat-value { font-size: 24px; font-weight: 800; margin-bottom: 2px; }
.branch-stat-sub { font-size: 12px; color: var(--text-muted); }

/* ======== ÅRSHJUL (YEARLY TIMELINE) ======== */
.aarshjul { overflow-x: auto; }
.aarshjul-header {
    display: grid; grid-template-columns: 160px repeat(12, 1fr);
    border-bottom: 2px solid var(--border); background: #f8fafc;
}
.aarshjul-label-col {
    padding: 10px 14px; font-size: 11px; font-weight: 700;
    color: var(--text-sec); text-transform: uppercase; letter-spacing: .4px;
}
.aarshjul-month-col {
    padding: 10px 4px; font-size: 11px; font-weight: 700;
    color: var(--text-sec); text-align: center; border-left: 1px solid #eef1f5;
}
.aarshjul-month-col.current { background: var(--blue-light); color: var(--blue); font-weight: 800; }

.aarshjul-body { position: relative; min-height: 60px; }

.aarshjul-today-line {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: var(--red); z-index: 5; opacity: .5; pointer-events: none;
}
.aarshjul-today-line::after {
    content: ''; position: absolute; top: 0; left: -3px;
    width: 8px; height: 8px; background: var(--red); border-radius: 50%;
}

.aarshjul-row {
    display: grid; grid-template-columns: 160px 1fr;
    align-items: center; min-height: 52px;
    border-bottom: 1px solid #f5f7fa; transition: background var(--tr);
}
.aarshjul-row:hover { background: #fafbfd; }

.aarshjul-campaign-info { padding: 6px 14px; display: flex; flex-direction: column; gap: 3px; }
.aarshjul-name { font-size: 13px; font-weight: 600; color: var(--text); }
.aarshjul-status-badge {
    font-size: 9px; padding: 2px 8px; border-radius: var(--radius-full);
    font-weight: 700; width: fit-content; letter-spacing: .3px; text-transform: uppercase;
}

.aarshjul-track { position: relative; height: 36px; margin: 4px 14px 4px 0; }

.aarshjul-bar {
    position: absolute; top: 4px; height: 28px;
    border-radius: var(--radius-full); display: flex; align-items: center;
    padding: 0 12px; cursor: pointer; transition: all var(--tr);
    opacity: .85; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.aarshjul-bar:hover {
    opacity: 1; transform: scaleY(1.12);
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.aarshjul-bar-label {
    color: #fff; font-size: 11px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.aarshjul-deadline { position: absolute; top: 0; bottom: 0; z-index: 6; pointer-events: none; }
.aarshjul-deadline-dot {
    width: 10px; height: 10px; background: var(--red);
    border-radius: 50%; border: 2px solid var(--bg-white);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    position: absolute; top: 0; left: -5px;
}
.aarshjul-deadline-line {
    position: absolute; top: 10px; bottom: 0; left: -1px;
    width: 2px; background: var(--red); opacity: .4;
}

.aarshjul-empty {
    padding: 40px 20px; text-align: center;
    color: var(--text-muted); font-size: 14px;
}

/* ======== KEY ACCOUNT DASHBOARD ======== */
.ka-dashboard {
    background: var(--bg-white); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md); margin-bottom: 24px; overflow: hidden;
    border: 1px solid rgba(37,99,235,.08);
}
.ka-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    padding: 18px 24px; display: flex; align-items: center; justify-content: space-between;
}
.ka-header-left { display: flex; align-items: center; gap: 14px; }
.ka-icon {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--orange), #f97316);
    border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(245,158,11,.3); flex-shrink: 0;
}
.ka-title { color: #fff; font-size: 16px; font-weight: 700; margin: 0; }
.ka-week { color: rgba(255,255,255,.6); font-size: 12px; font-weight: 500; }
.ka-nav { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.ka-nav-btn {
    background: rgba(255,255,255,.1); border: none; color: rgba(255,255,255,.7);
    width: 28px; height: 28px; border-radius: var(--radius-full); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--tr); font-size: 16px; font-weight: 700;
}
.ka-nav-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.ka-nav-today { font-size: 11px; width: auto; padding: 0 10px; font-weight: 600; }

.ka-table-wrap { overflow-x: auto; }
.ka-table { width: 100%; border-collapse: collapse; }
.ka-table thead th {
    padding: 10px 12px; font-size: 10px; font-weight: 700; color: var(--text-sec);
    text-transform: uppercase; letter-spacing: .5px; background: #f8fafc;
    border-bottom: 2px solid var(--border); white-space: nowrap; text-align: center;
}
.ka-table thead th:first-child,
.ka-table thead th:nth-child(2) { text-align: left; }
.ka-th-today {
    background: var(--blue-light) !important; color: var(--blue) !important;
    position: relative;
}
.ka-th-today::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 2px; background: var(--blue);
}

.ka-row { transition: background var(--tr); }
.ka-row:hover { background: #fafbfd; }

.ka-customer {
    padding: 12px 16px; font-weight: 700; font-size: 13px;
    border-bottom: 1px solid #f1f5f9; min-width: 160px;
}
.ka-customer-inner { display: flex; align-items: center; gap: 10px; }
.ka-priority-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ka-priority-high { background: var(--red); box-shadow: 0 0 6px rgba(239,68,68,.4); }
.ka-priority-normal { background: var(--blue); }

.ka-action {
    padding: 12px 12px; font-size: 12px; color: var(--text-sec);
    border-bottom: 1px solid #f1f5f9; min-width: 140px;
}

.ka-day {
    padding: 8px; text-align: center; border-bottom: 1px solid #f1f5f9;
    cursor: pointer; transition: all var(--tr); width: 56px;
}
.ka-day:hover { background: var(--blue-light); }
.ka-day.ka-today { background: rgba(37,99,235,.04); }
.ka-day.ka-today:hover { background: var(--blue-light); }
.ka-day.ka-checked { background: rgba(16,185,129,.06); }
.ka-day.ka-checked:hover { background: rgba(16,185,129,.12); }
.ka-day.ka-overdue { background: rgba(239,68,68,.05); animation: kaPulse 2s ease-in-out infinite; }
@keyframes kaPulse {
    0%, 100% { background: rgba(239,68,68,.06); }
    50% { background: rgba(239,68,68,.12); }
}

.ka-checkbox-target {
    width: 24px; height: 24px; border: 2.5px solid var(--border); border-radius: 8px;
    margin: 0 auto; transition: all var(--tr); background: var(--bg-white);
}
.ka-day:hover .ka-checkbox-target { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.ka-day.ka-overdue .ka-checkbox-target { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,.15); }

.ka-checkbox-opt {
    width: 20px; height: 20px; border: 1.5px dashed #d1d5db; border-radius: 6px;
    margin: 0 auto; transition: all var(--tr); opacity: .35;
}
.ka-day:hover .ka-checkbox-opt { opacity: 1; border-color: var(--blue); border-style: solid; }

.ka-check-icon {
    width: 26px; height: 26px; background: var(--green); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; margin: 0 auto;
    box-shadow: 0 2px 8px rgba(16,185,129,.3); animation: kaCheckIn .25s ease;
}
@keyframes kaCheckIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ka-row-actions {
    padding: 8px 12px; border-bottom: 1px solid #f1f5f9; white-space: nowrap;
}

.ka-footer {
    padding: 14px 24px; display: flex; align-items: center; gap: 16px;
    background: #f8fafc; border-top: 1px solid var(--border);
}
.ka-progress-label { font-size: 12px; font-weight: 600; color: var(--text-sec); white-space: nowrap; }
.ka-progress-bar {
    flex: 1; height: 8px; background: var(--bg); border-radius: var(--radius-full);
    overflow: hidden; max-width: 200px;
}
.ka-progress-fill {
    height: 100%; border-radius: var(--radius-full); transition: width .5s ease;
    background: linear-gradient(90deg, var(--green), var(--teal));
}
.ka-progress-pct { font-size: 13px; font-weight: 800; }

.ka-empty { padding: 30px 24px; text-align: center; }
.ka-empty p { color: var(--text-sec); font-size: 14px; }
.ka-empty-sub { color: var(--text-muted) !important; font-size: 12px !important; margin-top: 6px; }

.ka-day-picker { display: flex; gap: 6px; }
.ka-day-btn {
    width: 48px; height: 40px; border-radius: var(--radius); border: 2px solid var(--border);
    background: var(--bg-white); cursor: pointer; font-size: 12px; font-weight: 700;
    color: var(--text-sec); transition: all var(--tr);
    display: flex; align-items: center; justify-content: center;
}
.ka-day-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.ka-day-btn.selected {
    background: var(--blue); color: #fff; border-color: var(--blue);
    box-shadow: 0 2px 8px rgba(37,99,235,.3);
}

/* ======== CHAT / KORRESPONDANCE ======== */
.btn-chat-icon {
    position: relative;
}
.cell-chat-col {
    width: 32px;
    padding: 0 4px !important;
    text-align: center;
    vertical-align: middle;
}
.chat-badge {
    position: absolute;
    top: -6px; right: -6px;
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.modal-chat {
    width: 600px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.chat-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
}
.chat-header-info h2 {
    font-size: 18px; font-weight: 700; margin: 0;
}
.chat-header-meta {
    display: flex; align-items: center; gap: 6px;
    margin-top: 4px; font-size: 13px; color: var(--text-sec);
}
.chat-header-sep { color: var(--text-muted); }
.chat-header-deal { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: var(--blue); }

/* BCC Section */
.chat-bcc-section {
    padding: 12px 24px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}
.chat-bcc-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-sec); margin-bottom: 6px;
}
.chat-bcc-row {
    display: flex; align-items: center; gap: 8px;
}
.chat-bcc-email {
    flex: 1;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--text);
    font-family: 'SF Mono', 'Fira Code', monospace;
    word-break: break-all;
}
.btn-xs {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius);
    white-space: nowrap;
}
.chat-bcc-hint {
    font-size: 11px; color: var(--text-muted); margin-top: 6px;
    font-style: italic;
}

/* Message List */
.chat-message-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    min-height: 200px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.chat-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1; padding: 40px 20px; text-align: center;
}
.chat-empty p { color: var(--text-sec); font-size: 14px; }
.chat-empty-sub { color: var(--text-muted) !important; font-size: 12px !important; margin-top: 4px; }

/* Message Bubble */
.chat-message {
    display: flex; gap: 10px; align-items: flex-start;
}
.chat-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
.chat-bubble {
    flex: 1;
    background: #f1f5f9;
    border-radius: 0 12px 12px 12px;
    padding: 10px 14px;
    min-width: 0;
}
.chat-meta {
    display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.chat-author {
    font-size: 13px; font-weight: 700; color: var(--text);
}
.chat-time {
    font-size: 11px; color: var(--text-muted);
}
.chat-text {
    font-size: 13px; line-height: 1.5; color: var(--text);
    word-wrap: break-word;
}

/* Chat Files */
.chat-files {
    margin-top: 8px;
    display: flex; flex-direction: column; gap: 6px;
}
.chat-file-thumb {
    display: flex; flex-direction: column; gap: 4px;
}
.chat-file-thumb img {
    max-width: 200px; max-height: 150px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    object-fit: cover;
}
.chat-file-name {
    font-size: 11px; color: var(--text-muted);
}
.chat-file-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
}
.chat-file-link {
    color: var(--blue); text-decoration: none; font-weight: 500;
}
.chat-file-link:hover { text-decoration: underline; }

/* Input Area */
.chat-input-area {
    border-top: 1px solid var(--border);
    padding: 12px 24px 16px;
    background: #fff;
}
.chat-file-preview {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 0;
}
.chat-file-preview:not(:empty) { margin-bottom: 8px; }
.chat-pending-file {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 11px;
    color: var(--text-sec);
}
.chat-pending-thumb {
    width: 28px; height: 28px;
    border-radius: 4px;
    object-fit: cover;
}
.chat-remove-file {
    background: none; border: none;
    color: var(--text-muted); font-size: 14px;
    cursor: pointer; padding: 0 2px;
    line-height: 1;
}
.chat-remove-file:hover { color: var(--red); }
.chat-input-row {
    display: flex; align-items: flex-end; gap: 8px;
}
.chat-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 13px;
    font-family: inherit;
    resize: none;
    outline: none;
    min-height: 40px;
    max-height: 120px;
    line-height: 1.4;
    transition: border-color var(--tr);
}
.chat-input:focus { border-color: var(--blue); }
.chat-attach-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    color: var(--text-sec);
    flex-shrink: 0;
}
.chat-attach-btn:hover { background: var(--bg); color: var(--blue); }
.chat-send-btn {
    display: flex; align-items: center; gap: 4px;
    height: 40px;
    flex-shrink: 0;
    padding: 0 16px;
}

/* ======== BUDGET VIEW ======== */
.budget-year-header {
    display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.budget-year-header h2 {
    font-size: 24px; font-weight: 800; min-width: 80px; text-align: center;
}

.budget-overview-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px;
}
.budget-overview-card {
    background: var(--bg-white); border-radius: var(--radius-lg); padding: 20px;
    box-shadow: var(--shadow); text-align: center;
}
.budget-overview-label {
    font-size: 12px; font-weight: 600; color: var(--text-sec);
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px;
}
.budget-overview-value {
    font-size: 22px; font-weight: 800;
}
.budget-overview-sub {
    font-size: 12px; color: var(--text-muted); margin-top: 2px;
}

/* ======== BAR CHART: REALISERET VS BUDGET ======== */
.bc-card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    padding: 24px;
}
.bc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}
.bc-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.bc-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.bc-header-stats {
    display: flex;
    gap: 20px;
}
.bc-header-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bc-header-stat-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.bc-header-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.bc-header-stat-val {
    font-size: 13px;
    font-weight: 700;
}
/* Chart area */
.bc-chart {
    display: flex;
    align-items: flex-end;
    gap: 0;
    height: 240px;
    padding: 0 4px 0 4px;
    border-bottom: 1px solid var(--border);
}
.bc-month {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.bc-month.bc-current {
    background: rgba(37,99,235,.05);
    border-radius: 8px 8px 0 0;
}
.bc-bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 190px;
    padding: 0 4px;
    width: 100%;
    justify-content: center;
}
.bc-col {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
}
.bc-bar {
    width: 100%;
    min-width: 6px;
    max-width: 28px;
    border-radius: 4px 4px 0 0;
    transition: height .4s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
}
.bc-bar-budget {
    background: #e2e8f0;
}
.bc-bar-inv {
    background: #d1fae5;
}
.bc-seg {
    width: 100%;
    min-height: 2px;
    transition: height .4s cubic-bezier(.4,0,.2,1);
    cursor: default;
    position: relative;
}
.bc-seg:last-child {
    border-radius: 4px 4px 0 0;
}
.bc-seg:hover {
    opacity: .8;
}
.bc-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
}
.bc-pct {
    font-size: 10px;
    font-weight: 700;
    margin-top: 2px;
    text-align: center;
    margin-bottom: 4px;
}
/* Legend */
.bc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.bc-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-sec);
}
.bc-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.budget-table td {
    padding: 6px 8px; vertical-align: middle;
}
.budget-seller-col { min-width: 160px; }
.budget-month-col { text-align: center; min-width: 90px; }
.budget-total-col { text-align: right; min-width: 110px; }
.budget-total-cell { text-align: right; }
.budget-current-month { background: rgba(37,99,235,.05) !important; }
.budget-highlight-row { background: rgba(37,99,235,.04); }

.budget-cell-input {
    width: 100%; max-width: 90px; padding: 5px 6px;
    border: 1.5px solid var(--border); border-radius: 6px;
    font-size: 12px; text-align: right; color: var(--text);
    background: var(--bg-white); outline: none; transition: all var(--tr);
    font-family: inherit;
}
.budget-cell-input:focus {
    border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.budget-cell-input::placeholder { color: var(--text-muted); }

.budget-cell-progress {
    display: flex; align-items: center; gap: 4px; margin-top: 3px;
}
.budget-cell-bar {
    height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; flex: 1;
}
.budget-cell-bar-fill {
    height: 100%; border-radius: 2px; transition: width .4s ease;
}
.budget-cell-pct {
    font-size: 10px; font-weight: 700; min-width: 28px; text-align: right;
}

.budget-totals-row td {
    background: #f8fafc; border-top: 2px solid var(--border);
    padding: 10px 8px; font-size: 13px;
}

/* ======== SELLER BUDGET BANNER ======== */
.seller-budget-banner {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: var(--radius-xl); padding: 24px;
    margin-bottom: 20px; color: #fff;
    display: flex; gap: 24px; align-items: center;
    box-shadow: var(--shadow-md);
}
.seller-budget-main {
    flex: 1; display: flex; gap: 24px; align-items: center;
}
.seller-budget-month-info {
    text-align: center; min-width: 100px;
}
.seller-budget-month-label {
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;
}
.seller-budget-pct {
    font-size: 36px; font-weight: 900; line-height: 1;
}
.seller-budget-pct.pct-green { color: #34d399; }
.seller-budget-pct.pct-blue { color: #60a5fa; }
.seller-budget-pct.pct-orange { color: #fbbf24; }
.seller-budget-pct-label {
    font-size: 11px; color: rgba(255,255,255,.5); margin-top: 2px;
}

.seller-budget-bar-section { flex: 1; }
.seller-budget-bar {
    height: 16px; background: rgba(255,255,255,.1); border-radius: var(--radius-full);
    overflow: hidden; display: flex;
}
.seller-budget-bar-won {
    height: 100%; background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    transition: width .6s ease;
}
.seller-budget-bar-pipe {
    height: 100%; background: rgba(96,165,250,.4);
    transition: width .6s ease;
}
.seller-budget-bar-labels {
    display: flex; justify-content: space-between; margin-top: 8px;
    font-size: 12px; color: rgba(255,255,255,.7);
}
.seller-budget-bar-labels span { font-weight: 600; }

.seller-budget-stats {
    display: flex; gap: 20px;
}
.seller-budget-stat {
    text-align: center; min-width: 80px;
    padding: 8px 12px; background: rgba(255,255,255,.08);
    border-radius: var(--radius);
}
.seller-budget-stat-label {
    font-size: 10px; font-weight: 600; color: rgba(255,255,255,.5);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px;
}
.seller-budget-stat-value {
    font-size: 16px; font-weight: 800; color: #fff;
}

@media (max-width: 1100px) {
    .budget-overview-cards { grid-template-columns: repeat(2, 1fr); }
    .seller-budget-banner { flex-direction: column; }
    .seller-budget-main { flex-direction: column; width: 100%; }
}
@media (max-width: 768px) {
    .budget-overview-cards { grid-template-columns: 1fr; }
    .seller-budget-stats { flex-wrap: wrap; }
}

/* ======== CAMPAIGN COLUMN ======== */
.col-campaign { width: 140px; }

.campaign-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 12px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700; letter-spacing: .2px;
    white-space: nowrap; cursor: pointer;
    max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}

/* ======== CAMPAIGN FILE UPLOAD ======== */
.campaign-file-upload-area {
    display: flex; flex-direction: column; gap: 8px;
}
.campaign-file-preview {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.campaign-pending-file {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 11px;
    color: var(--text-sec);
}
.campaign-pending-thumb {
    width: 28px; height: 28px;
    border-radius: 4px;
    object-fit: cover;
}
.campaign-remove-file {
    background: none; border: none;
    color: var(--text-muted); font-size: 14px;
    cursor: pointer; padding: 0 2px;
    line-height: 1;
}
.campaign-remove-file:hover { color: var(--red); }

/* ======== CAMPAIGN DETAIL MODAL ======== */
.campaign-detail-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 16px; margin-bottom: 20px;
}
.campaign-detail-stat {
    padding: 12px; background: var(--bg); border-radius: var(--radius);
}
.campaign-detail-stat-label {
    font-size: 11px; font-weight: 600; color: var(--text-sec);
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px;
}
.campaign-detail-stat-value {
    font-size: 15px; font-weight: 700;
}

.campaign-detail-budget-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.campaign-detail-budget-card {
    text-align: center; padding: 16px;
    background: var(--bg); border-radius: var(--radius-lg);
}
.campaign-detail-budget-value {
    font-size: 20px; font-weight: 800; margin-top: 4px;
}

.campaign-detail-section {
    margin-bottom: 20px;
}
.campaign-detail-section h3 {
    font-size: 13px; font-weight: 700; color: var(--text-sec);
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px;
}
.campaign-detail-intro {
    font-size: 14px; line-height: 1.6; color: var(--text);
    padding: 16px; background: var(--bg); border-radius: var(--radius-lg);
}

.campaign-detail-files {
    display: flex; flex-wrap: wrap; gap: 12px;
}
.campaign-detail-file-thumb {
    display: flex; flex-direction: column; gap: 4px;
}
.campaign-detail-file-thumb img {
    max-width: 200px; max-height: 150px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    object-fit: cover;
}
.campaign-detail-file-name {
    font-size: 11px; color: var(--text-muted);
}
.campaign-detail-file-item {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
}
.campaign-detail-file-link {
    color: var(--blue); text-decoration: none; font-weight: 500;
}
.campaign-detail-file-link:hover { text-decoration: underline; }

.campaign-name-link {
    cursor: pointer; transition: color var(--tr);
}
.campaign-name-link:hover {
    color: var(--blue); text-decoration: underline;
}

/* ======== DEAL DETAIL MODAL ======== */
.modal-detail { width: 700px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.deal-detail-header { flex-shrink: 0; }
.deal-detail-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; color: var(--text-sec); }
.deal-detail-deal-id { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: var(--blue); }
.deal-detail-sep { color: var(--text-muted); }
.deal-detail-kunde { font-weight: 600; }
.deal-detail-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; }

.dd-status-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding: 12px 16px; background: var(--bg); border-radius: var(--radius-lg); }
.dd-status-bar .status-pill { font-size: 12px; padding: 5px 12px; flex-shrink: 0; }
.dd-status-value { font-size: 18px; font-weight: 800; color: var(--text); }
.dd-status-label { font-size: 10px; color: var(--text-sec); text-transform: uppercase; letter-spacing: .3px; }

/* Budget tracker in deal detail */
.dd-budget-tracker { margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.dd-budget-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: linear-gradient(135deg, #1e293b, #334155); color: #fff; }
.dd-budget-header-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dd-budget-header-left svg { opacity: .7; flex-shrink: 0; }
.dd-budget-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.dd-budget-debitor { font-size: 11px; opacity: .7; font-family: 'SF Mono', 'Fira Code', monospace; }
.dd-budget-body { padding: 14px; background: var(--bg-white); }
.dd-budget-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.dd-budget-kpi { text-align: center; padding: 6px 2px; background: var(--bg); border-radius: var(--radius); min-width: 0; overflow: hidden; }
.dd-budget-kpi-value { font-size: 13px; font-weight: 800; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.dd-budget-kpi-label { font-size: 9px; color: var(--text-sec); text-transform: uppercase; letter-spacing: .2px; font-weight: 600; }
.dd-budget-progress { margin-bottom: 12px; }
.dd-budget-bar { height: 22px; background: var(--bg); border-radius: var(--radius-full); overflow: hidden; position: relative; }
.dd-budget-bar-fill { height: 100%; border-radius: var(--radius-full); transition: width .6s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 10px; font-weight: 700; color: #fff; min-width: 32px; }
.dd-budget-bar-labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--text-sec); }
.dd-budget-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.dd-budget-month { background: var(--bg); border-radius: 4px; padding: 5px 1px; text-align: center; cursor: pointer; transition: all var(--tr); min-width: 0; overflow: hidden; }
.dd-budget-month:hover { background: var(--blue-light); }
.dd-budget-month-name { font-size: 8px; color: var(--text-sec); font-weight: 700; text-transform: uppercase; margin-bottom: 2px; }
.dd-budget-month-value { font-size: 9px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-budget-month-bar { height: 3px; background: #e2e8f0; border-radius: 2px; margin-top: 2px; overflow: hidden; }
.dd-budget-month-bar-fill { height: 100%; border-radius: 2px; }

.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; min-width: 0; }
.dd-section { background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.dd-section-header { padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-sec); background: #f8fafc; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; }
.dd-section-header svg { flex-shrink: 0; width: 14px; height: 14px; }
.dd-section-body { padding: 2px 0; }
.dd-row { display: flex; align-items: first baseline; padding: 6px 14px; font-size: 12px; min-width: 0; gap: 8px; }
.dd-row-label { width: 90px; flex-shrink: 0; color: var(--text-sec); font-weight: 600; font-size: 10px; line-height: 1.3; word-break: break-word; }
.dd-row-value { flex: 1; color: var(--text); min-width: 0; word-break: break-word; }
.dd-row-value.muted { color: var(--text-muted); font-style: italic; }
.dd-row-editable { cursor: pointer; border-radius: var(--radius); transition: background var(--tr); }
.dd-row-editable:hover { background: var(--blue-light); }

.dd-section.full { grid-column: 1 / -1; }
.dd-notes-area { padding: 10px 14px; font-size: 13px; color: var(--text); line-height: 1.6; white-space: pre-wrap; min-height: 36px; }
.dd-notes-area.muted { color: var(--text-muted); font-style: italic; }

.dd-people { display: flex; gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
.dd-person-card { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg); border-radius: var(--radius); flex: 1; min-width: 0; }
.dd-person-role { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.dd-person-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ======== DASHBOARD TASKS (Dagens Opgaver) ======== */
.dashboard-tasks-section {
    background: var(--bg-white); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden;
}
.dashboard-tasks-header {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.dashboard-tasks-header svg { stroke: var(--blue); flex-shrink: 0; }
.dashboard-tasks-header h2 { font-size: 15px; font-weight: 700; }
.dashboard-tasks-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 0; }
.dashboard-tasks-col { padding: 16px 20px; }
.dashboard-tasks-col:first-child { border-right: 1px solid var(--border); }
.dashboard-tasks-col-header {
    font-size: 12px; font-weight: 700; color: var(--text-sec);
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.dashboard-tasks-badge {
    background: var(--bg); padding: 2px 8px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 600; color: var(--text-sec);
}
.dashboard-tasks-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }

.dashboard-task-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: var(--radius); margin-bottom: 4px;
    transition: all var(--tr); cursor: pointer;
}
.dashboard-task-item:hover { background: var(--bg); }
.dashboard-task-item-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dashboard-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dashboard-task-dot.followup-overdue { background: var(--red); }
.dashboard-task-dot.followup-today { background: var(--orange); }
.dashboard-task-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-task-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-task-date {
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    border-radius: var(--radius-full); flex-shrink: 0; white-space: nowrap;
}
.dashboard-task-date.followup-overdue { background: var(--red-light); color: var(--red-dark); }
.dashboard-task-date.followup-today { background: var(--orange-light); color: var(--orange-dark); }

.dashboard-tasks-add { display: flex; gap: 8px; margin-bottom: 12px; }
.dashboard-tasks-add .input-field { flex: 1; }
.quick-task { cursor: default; }
.quick-task-check {
    width: 20px; height: 20px; border: 2px solid var(--border);
    border-radius: 6px; flex-shrink: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--tr);
}
.quick-task-check:hover { border-color: var(--blue); background: var(--blue-light); }
.quick-task-check.checked { background: var(--green); border-color: var(--green); }
.quick-task-text { font-size: 13px; font-weight: 500; }
.dashboard-task-item.quick-task.done .quick-task-text {
    text-decoration: line-through; color: var(--text-muted);
}

/* ======== MOBILE MENU BUTTON ======== */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--tr);
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:hover { background: var(--bg); }

/* ======== SIDEBAR OVERLAY (mobile) ======== */
body.mobile-menu-open {
    overflow: hidden !important;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99;
    opacity: 0;
    transition: opacity .3s ease;
    -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* ======== CEO DASHBOARD ======== */
.ceo-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.ceo-kpi-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
    transition: box-shadow var(--tr);
}
.ceo-kpi-card:hover { box-shadow: var(--shadow-md); }
.ceo-kpi-label { font-size: 12px; color: var(--text-sec); font-weight: 500; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .3px; }
.ceo-kpi-value { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.2; }
.ceo-kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.ceo-section { margin-bottom: 24px; }
.ceo-section-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }

.ceo-alerts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ceo-alert-card {
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}

.ceo-ops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.ceo-ops-card {
    background: var(--bg-white);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
}
.ceo-ops-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .3px; }
.ceo-ops-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--border); }
.ceo-ops-row:last-child { border-bottom: none; }

/* CEO shimmer loading placeholder */
.ceo-shimmer {
    display: inline-block;
    background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border) 50%, var(--bg-alt) 75%);
    background-size: 200% 100%;
    animation: ceoShimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
    color: transparent !important;
    user-select: none;
}
@keyframes ceoShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ceo-loading-badge {
    display: inline-block;
    font-size: 10px;
    background: var(--orange-light);
    color: var(--orange-dark);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 600;
    animation: ceoShimmer 1.5s ease-in-out infinite;
    background-size: 200% 100%;
}
/* CEO Lead Pipeline KPI cards */
.ceo-lead-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }

/* ======== RESPONSIVE ======== */

/* --- Tablets (max 1024px) --- */
@media (max-width: 1100px) {
    .dashboard-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
    .topbar { padding: 12px 16px; }
    .topbar-right { gap: 6px; }
    .topbar-right .btn-sm { padding: 6px 10px; font-size: 11px; }
    .view { padding: 16px; }
    .stat-value { font-size: 20px; }
    .stat-card { padding: 16px; }
    .kanban-column { min-width: 240px; max-width: 280px; }
    .dd-grid { grid-template-columns: 1fr; }
    .deal-grid { grid-template-columns: 1fr 1fr !important; }
    .branch-summary-cards { grid-template-columns: repeat(2, 1fr); }
    .campaign-detail-grid { grid-template-columns: 1fr; }
    .ceo-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .ceo-lead-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .ceo-alerts-grid { grid-template-columns: repeat(2, 1fr); }
    .ceo-ops-grid { grid-template-columns: 1fr 1fr; }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {
    /* Hamburger button visible */
    .mobile-menu-btn { display: flex !important; }

    /* CEO Dashboard mobile */
    .ceo-kpi-grid { grid-template-columns: 1fr; }
    .ceo-lead-kpi-grid { grid-template-columns: 1fr 1fr; }
    .ceo-alerts-grid { grid-template-columns: 1fr; }
    .ceo-ops-grid { grid-template-columns: 1fr; }
    .ceo-kpi-value { font-size: 18px; }

    /* Sidebar: slide-in from left */
    .sidebar {
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        z-index: 200;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    /* Reset collapsed state on mobile when open */
    .sidebar.mobile-open.collapsed {
        width: var(--sidebar-width);
    }
    .sidebar.mobile-open.collapsed .logo-text,
    .sidebar.mobile-open.collapsed .nav-section-label,
    .sidebar.mobile-open.collapsed .nav-section-content,
    .sidebar.mobile-open.collapsed .nav-item span,
    .sidebar.mobile-open.collapsed .nav-item-add,
    .sidebar.mobile-open.collapsed .user-details {
        opacity: 1; width: auto; pointer-events: auto;
    }
    .sidebar.mobile-open.collapsed .sidebar-header { padding: 20px; justify-content: space-between; }
    .sidebar.mobile-open.collapsed .nav-item { justify-content: flex-start; padding: 9px 14px; }
    .sidebar.mobile-open.collapsed .sidebar-footer { padding: 14px 20px; justify-content: flex-start; }
    .sidebar.mobile-open.collapsed .user-info { justify-content: flex-start; }
    .sidebar.mobile-open.collapsed .sidebar-nav { padding: 12px 10px; align-items: stretch; }
    .sidebar.mobile-open.collapsed .sidebar-logout-btn { display: flex; }

    /* Sidebar: scrollable on mobile */
    .sidebar.mobile-open {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
    .sidebar.mobile-open .sidebar-nav {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
    .sidebar.mobile-open .sidebar-nav-scroll {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }

    /* Main content full-width */
    .main-content { margin-left: 0; }
    body.sidebar-collapsed .main-content { margin-left: 0; }

    /* Topbar */
    .topbar { padding: 10px 12px; gap: 8px; }
    .page-title { font-size: 15px; }
    .page-subtitle { font-size: 11px; }
    .topbar-left { gap: 6px; align-items: center; }
    .topbar-right { gap: 4px; }
    .topbar-right .btn { padding: 7px 10px; font-size: 11px; }
    .topbar-right .btn svg { width: 12px; height: 12px; }
    /* Hide button text on mobile, show only icon */
    #btnAddGroup span, #btnAddItem span { display: inline; }

    /* Dashboard */
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-card { padding: 10px 12px; }
    .stat-icon { width: 28px; height: 28px; margin-bottom: 6px; }
    .stat-icon svg { width: 14px; height: 14px; }
    .stat-label { font-size: 9px; height: 22px; line-height: 11px; margin-bottom: 2px; }
    .stat-value { font-size: 15px; }
    .stat-sub { font-size: 10px; }
    .budget-details { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .budget-detail { padding: 8px 6px; }
    .budget-detail-label { font-size: 10px; }
    .budget-detail-value { font-size: 14px; }
    .budget-section { padding: 12px; }
    .budget-labels { font-size: 11px; }

    /* Revenue chart smaller on mobile */
    .chart-container { height: 200px !important; }

    /* Dashboard tasks */
    .dashboard-tasks-grid { grid-template-columns: 1fr; }
    .dashboard-tasks-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
    .dashboard-tasks-col { border-left: none !important; border-bottom: 1px solid var(--border); }
    .dashboard-tasks-col:last-child { border-bottom: none; }
    .dashboard-tasks-col { padding: 12px 14px; }

    /* Mini badges */
    .mini-badges { gap: 6px !important; }
    .mini-badge { padding: 4px 8px !important; gap: 4px !important; flex: 1; min-width: 0; justify-content: center; }
    .mini-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
    .mini-badge-label { font-size: 10px !important; }
    .mini-badge-value { font-size: 11px !important; }
    .mini-badge-sub { display: none; }

    /* Pipeline chart */
    .pipeline-label { width: 90px; font-size: 11px; }
    .pipeline-count { width: 60px; font-size: 11px; }

    /* Views */
    .view { padding: 12px; }
    .card-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
    .card-header h2 { font-size: 14px; }

    /* Forms */
    .form-grid { grid-template-columns: 1fr; padding: 14px 16px; gap: 12px; }
    .deal-grid { grid-template-columns: 1fr !important; gap: 10px !important; padding: 14px 16px !important; }

    /* Kanban: stacked columns */
    .kanban-board { flex-direction: column; overflow-x: hidden; overflow-y: auto; gap: 12px; padding-bottom: 12px; }
    .kanban-column { min-width: 0; max-width: 100%; width: 100%; }
    .kanban-card { padding: 10px; }
    .kanban-card-title { font-size: 13px; }
    .kanban-cards { min-height: 60px; padding: 8px; }

    /* Monday table */
    .monday-table { min-width: 900px; }
    .monday-table-wrap { -webkit-overflow-scrolling: touch; }
    .col-name { width: 160px; }
    .col-kunde { width: 120px; }
    .col-person { width: 110px; }
    .col-koord { width: 110px; }
    .col-ball { width: 70px; }
    .col-sales { width: 90px; }

    /* Data tables */
    .table-container { -webkit-overflow-scrolling: touch; }
    .data-table th { padding: 8px 10px; font-size: 10px; }
    .data-table td { padding: 8px 10px; font-size: 12px; }

    /* Modals: full-screen on mobile */
    .modal-overlay { align-items: flex-end; }
    .modal {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh;
        min-height: 50vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    .modal-sm, .modal-lg, .modal-xl, .modal-deal, .modal-detail, .modal-chat {
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Deal detail modal */
    .modal-detail {
        max-height: 100vh;
        min-height: 70vh;
    }
    .dd-grid { grid-template-columns: 1fr; }
    .dd-budget-kpis { grid-template-columns: repeat(2, 1fr); }
    .dd-budget-months { grid-template-columns: repeat(6, 1fr); }
    .dd-people { flex-direction: column; }

    /* Chat modal full screen */
    .modal-chat {
        max-height: 100vh;
        min-height: 80vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    .chat-message-list { max-height: none; min-height: 150px; }
    .chat-input-area { padding: 10px 14px 14px; }
    .chat-bcc-section { padding: 10px 14px; }

    /* Modal header/footer */
    .modal-header { padding: 14px 16px; }
    .modal-header h2 { font-size: 15px; }
    .modal-footer { padding: 12px 16px; flex-wrap: wrap; }
    .modal-footer .btn { flex: 1; min-width: 100px; justify-content: center; }
    .modal-body { padding: 14px; }

    /* Team grid */
    .team-grid { grid-template-columns: 1fr; gap: 10px; padding: 14px; }

    /* Budget */
    .budget-overview-cards { grid-template-columns: 1fr; }
    .budget-year-header h2 { font-size: 20px; }
    .bc-chart { height: 180px; }
    .bc-bars { height: 140px; }
    .bc-header { flex-direction: column; gap: 8px; }
    .bc-header-stats { flex-wrap: wrap; gap: 10px; }

    /* Branch board */
    .branch-summary-cards { grid-template-columns: 1fr; }

    /* Seller budget banner */
    .seller-budget-banner { flex-direction: column; padding: 16px; gap: 14px; }
    .seller-budget-main { flex-direction: column; width: 100%; gap: 14px; }
    .seller-budget-stats { flex-wrap: wrap; gap: 10px; }
    .seller-budget-pct { font-size: 28px; }

    /* Key account dashboard */
    .ka-header { flex-direction: column; gap: 10px; padding: 14px 16px; }
    .ka-table-wrap { -webkit-overflow-scrolling: touch; }

    /* Årshjul */
    .aarshjul { -webkit-overflow-scrolling: touch; }

    /* Customers view: stack filter bar */
    #customerFilterBar { flex-direction: column; gap: 8px; padding: 10px 14px; }
    #customerFilterBar > div,
    #customerFilterBar > select,
    #customerFilterBar > button { width: 100%; min-width: 0; }
    #customerFilterBar > div[style*="position:relative"] { width: 100%; }

    /* Quote builder */
    #quoteBuilderModal .modal { border-radius: 0; max-height: 100vh; min-height: 100vh; }
    .qb-product-grid { grid-template-columns: 1fr; }

    /* Touch-friendly: inputs 16px to prevent iOS zoom */
    .input-field, select.input-field, textarea.input-field { font-size: 16px; }

    /* Touch-friendly: all clickable elements min 44px */
    .btn, .btn-sm { min-height: 44px; }
    .nav-item { padding: 11px 14px; min-height: 44px; }
    .status-picker-btn { min-height: 40px; padding: 8px 14px; }
    .kg-picker-btn { min-height: 40px; padding: 8px 14px; }
    .modal-close { width: 44px; height: 44px; font-size: 24px; }

    /* Person dropdown: larger touch targets */
    .person-dropdown-item { padding: 12px 14px; min-height: 44px; }

    /* Dropdown options: larger touch targets */
    .kunde-search-item { padding: 12px 14px; min-height: 44px; }

    /* Column picker */
    .column-picker-item { padding: 12px 14px; min-height: 44px; }

    /* Color swatches */
    .color-swatch { width: 40px; height: 40px; }
    .group-color-swatch { width: 42px; height: 42px; }

    /* Ka day picker */
    .ka-day-btn { width: 44px; height: 44px; }

    /* Admin Log: stack filters on mobile */
    #view-adminlog .card > div[style*="display:flex"] { flex-direction: column; }
    #view-adminlog .form-group { width: 100%; }
    #view-adminlog .form-group select,
    #view-adminlog .form-group input { width: 100%; min-width: 0 !important; }

    /* Auto-sync indicator: out of the way on mobile */
    #autoSyncIndicator { bottom: 8px; right: 8px; font-size: 11px; padding: 4px 10px; }

    /* Margin view: tabs wrap */
    #view-margin > div:first-child { flex-wrap: wrap; gap: 4px; }
    .margin-tab { padding: 5px 10px !important; font-size: 11px !important; }

    /* Margin view: filter bar stacks */
    #view-margin > div:nth-child(2) { flex-direction: column; align-items: stretch; }
    #view-margin > div:nth-child(2) > div { width: 100%; }
    #view-margin #marginSearch { width: 100% !important; }
    #view-margin #marginFilterYear { flex: 1; }
    #view-margin #marginFilterMonth { flex: 1; }
    #view-margin #btnGlobalNoCost { width: 100%; }
    #view-margin #btnSyncMargin { width: 100%; justify-content: center; }

    /* Margin KPIs: 2 columns on mobile */
    #marginKPIs { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
    #marginKPIs .stat-card { padding: 8px 10px; }

    /* Margin table: horizontal scroll + compact */
    #marginTable { min-width: 700px; font-size: 12px; }
    #marginTable th { padding: 6px 8px; font-size: 10px; white-space: nowrap; }
    #marginTable td { padding: 6px 8px; font-size: 11px; white-space: nowrap; }

    /* Margin chart smaller */
    #marginChart { height: 160px !important; }

    /* Margin detail modal: order lines table scrollable */
    #marginDetailModal .modal { max-width: 100vw !important; width: 100% !important; }
    #marginLinesTable { min-width: 500px; font-size: 11px !important; }
    #marginLinesTable th { padding: 4px 6px !important; font-size: 10px !important; }
    #marginLinesTable td { padding: 4px 6px !important; font-size: 11px !important; }
}

/* --- Small phones (max 480px) --- */
@media (max-width: 480px) {
    .topbar { padding: 8px 10px; }
    .page-title { font-size: 14px; }
    .topbar-right .btn { padding: 6px 8px; font-size: 10px; }

    /* Hide text in topbar buttons, show only icon */
    .topbar-right .btn span:not(:only-child) { display: none; }

    .dashboard-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .stat-card { padding: 8px 10px; }
    .stat-value { font-size: 13px; }
    .stat-label { font-size: 8px; height: 18px; line-height: 9px; }
    .stat-sub { font-size: 9px; }
    .stat-icon { width: 24px; height: 24px; margin-bottom: 4px; }
    .stat-icon svg { width: 12px; height: 12px; }
    .budget-detail-value { font-size: 13px; }

    .card-header { padding: 10px 12px; }
    .view { padding: 8px; }

    /* Kanban cards tighter */
    .kanban-column-header { padding: 8px 10px; }
    .kanban-card { padding: 8px; }
    .kanban-card-title { font-size: 12px; }
    .kanban-card-company { font-size: 11px; }
    .kanban-card-value { font-size: 12px; }

    /* Monday table even smaller */
    .monday-table { min-width: 700px; }
    .monday-group-header { padding: 9px 10px; }
    .monday-group-title { font-size: 13px; }

    /* Modal takes full screen */
    .modal-overlay { align-items: stretch; }
    .modal {
        border-radius: 0 !important;
        min-height: 100vh;
        max-height: 100vh;
    }

    /* Deal detail */
    .dd-status-bar { flex-direction: column; gap: 6px; padding: 10px 12px; }
    .dd-status-value { font-size: 16px; }
    .dd-budget-kpis { grid-template-columns: repeat(2, 1fr); gap: 4px; }
    .dd-budget-months { grid-template-columns: repeat(4, 1fr); }

    /* Budget chart */
    .bc-chart { height: 150px; }
    .bc-bars { height: 110px; }
    .budget-cell-input { max-width: 70px; font-size: 11px; }

    /* Seller budget */
    .seller-budget-pct { font-size: 24px; }
    .seller-budget-stat { min-width: 70px; padding: 6px 8px; }

    /* Forms */
    .form-grid { padding: 10px 12px; gap: 10px; }

    /* Buttons full width */
    .modal-footer .btn { flex: 1 1 100%; }

    /* Mini badges tighter */
    .mini-badge { padding: 3px 6px !important; }
    .mini-badge-label { font-size: 9px !important; }
    .mini-badge-value { font-size: 10px !important; }

    /* Chart even smaller */
    .chart-container { height: 160px !important; }

    /* Budget details stay 3-col but tighter */
    .budget-details { gap: 4px; }
    .budget-detail { padding: 6px 4px; }
    .budget-detail-label { font-size: 9px; }

    /* Login */
    .login-container { padding: 28px 20px; margin: 0 12px; }

    /* Margin view: even tighter on small phones */
    .margin-tab { padding: 4px 8px !important; font-size: 10px !important; }
    #marginKPIs .stat-card .stat-value { font-size: 13px; }
    #marginKPIs .stat-card .stat-label { font-size: 8px; }
    #marginTable { min-width: 600px; }
    #marginTable td { font-size: 10px; }
}

/* Spinner for loading states */
.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Kunde search dropdown */
.kunde-search-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    max-height: 200px; overflow-y: auto;
    background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12); margin-top: 2px;
}
.kunde-search-dropdown.hidden { display: none; }
.kunde-search-item {
    padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.kunde-search-item:last-child { border-bottom: none; }
.kunde-search-item:hover, .kunde-search-item.active { background: var(--hover-bg, #f1f5f9); }
.kunde-search-item .kunde-search-sub { font-size: 11px; color: #6b7280; margin-top: 1px; }
.kunde-search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #6b7280; font-size: 16px; line-height: 1; padding: 2px 4px;
}
.kunde-search-clear:hover { color: var(--text); }

/* ======== BUDGET OVERLAY BAR CHART ======== */
.bc-bars-overlay {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 4px;
}
.bc-bar-bg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 40px;
    background: #e2e8f0;
    border-radius: 4px 4px 0 0;
    transition: height .4s cubic-bezier(.4,0,.2,1);
}
.bc-bar-fg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 30px;
    border-radius: 4px 4px 0 0;
    transition: height .4s cubic-bezier(.4,0,.2,1);
    z-index: 2;
}
.budget-target-line {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 0;
    border-top: 2px dashed #94a3b8;
    z-index: 3;
    pointer-events: none;
}
.bc-budget-label {
    position: absolute;
    left: 0; right: 0;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    z-index: 4;
    pointer-events: none;
    white-space: nowrap;
}
.bc-invoiced-label {
    position: absolute;
    left: 0; right: 0;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    z-index: 5;
    pointer-events: none;
    white-space: nowrap;
}

/* ======== BUDGET DATA ADMIN NOTICE ======== */
.budget-data-admin-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ede9fe 0%, #dbeafe 100%);
    border: 1px solid rgba(139,92,246,.2);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}
.budget-data-admin-notice svg {
    flex-shrink: 0;
    stroke: #7c3aed;
    margin-top: 2px;
}
.budget-data-admin-notice strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #5b21b6;
    margin-bottom: 2px;
}
.budget-data-admin-notice span {
    font-size: 13px;
    color: #6d28d9;
}

/* ======== LOGIN SCREEN ======== */
.login-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-screen.hidden { display: none !important; }
.login-container {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
}
.login-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 32px;
}
.login-field { margin-bottom: 16px; }
.login-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-sec);
    margin-bottom: 6px;
}
.login-field .input-field {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
}
.login-error {
    background: var(--red-light);
    color: var(--red-dark);
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 12px;
}

/* ======== ROLE VISIBILITY ======== */
.admin-only { display: none !important; }
body.role-admin .admin-only { display: flex !important; }
.admin-salgschef-only { display: none !important; }
body.role-admin .admin-salgschef-only,
body.role-salgschef .admin-salgschef-only { display: inline-flex !important; }
.admin-or-viewer { display: none !important; }
body.role-admin .admin-or-viewer,
body.role-viewer .admin-or-viewer { display: inline-flex !important; }

.viewer-hidden { display: none !important; }
body:not(.role-viewer) .viewer-hidden { display: none !important; }

/* Hide app content until authenticated */
body:not(.authenticated) .sidebar,
body:not(.authenticated) .main-content { display: none !important; }

/* ======== SIDEBAR LOGOUT ======== */
.sidebar-logout-btn {
    background: none;
    border: none;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: all var(--tr);
    flex-shrink: 0;
}
.sidebar-logout-btn:hover { color: var(--red); background: rgba(239,68,68,.1); }
.sidebar.collapsed .sidebar-logout-btn { display: none; }

/* ============ TILBUD / QUOTE BUILDER ============ */
.qb-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.qb-section:last-child { border-bottom: none; margin-bottom: 0; }
.qb-section-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.qb-section-title::before { content: ''; width: 4px; height: 18px; border-radius: 4px; background: var(--blue); }

.qb-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.qb-product-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all .15s; background: var(--bg-white); }
.qb-product-card:hover { border-color: var(--blue); background: var(--blue-light); }
.qb-product-card.selected { border-color: var(--blue); background: var(--blue-light); }
.qb-product-card img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--bg); }
.qb-product-card .qb-pc-info { flex: 1; min-width: 0; }
.qb-product-card .qb-pc-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-product-card .qb-pc-meta { font-size: 11px; color: var(--text-sec); }
.qb-product-card .qb-pc-price { font-size: 12px; font-weight: 700; color: var(--blue); white-space: nowrap; }
.qb-product-card .qb-pc-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qb-product-card.selected .qb-pc-check { background: var(--blue); border-color: var(--blue); color: #fff; }

.product-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--bg); }
.product-thumb-placeholder { width: 40px; height: 40px; border-radius: 6px; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 10px; }
.qb-img-drop { cursor: pointer; position: relative; }
.qb-img-drop.qb-img-dragover { outline: 2px dashed var(--blue); outline-offset: 2px; border-radius: 6px; background: rgba(37,99,235,0.06); }
.qb-drop-hint { border: 1px dashed var(--border); color: var(--text-muted); text-align: center; line-height: 1.2; }

.modal-xl { max-width: 1200px; }

.quote-status-pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; }
.qs-draft { background: var(--slate-light); color: var(--slate); }
.qs-sent { background: var(--blue-light); color: var(--blue); }
.qs-accepted { background: var(--green-light); color: var(--green-dark); }
.qs-won { background: #d1fae5; color: #065f46; font-weight: 700; }
.qs-declined { background: var(--red-light); color: var(--red-dark); }
.qs-cancelled { background: #f1f5f9; color: #94a3b8; font-style: italic; }

/* Quote tabs */
.quote-tab {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.quote-tab:hover { background: #e2e8f0; }
.quote-tab.active {
    background: #1a1f2e;
    color: #fff;
    border-color: #1a1f2e;
}

.quotes-followup-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin-bottom: 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b; border-radius: var(--radius);
    cursor: pointer; transition: all .15s;
    color: #92400e; font-size: 14px; font-weight: 600;
}
.quotes-followup-banner:hover { background: linear-gradient(135deg, #fde68a, #fcd34d); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(245,158,11,.25); }
.quotes-followup-banner .followup-icon { font-size: 20px; }
.quotes-followup-banner .followup-count { background: #dc2626; color: #fff; padding: 2px 10px; border-radius: var(--radius-full); font-size: 13px; font-weight: 700; }
.quotes-followup-banner.active { border-color: #dc2626; background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
.quotes-followup-banner.active:hover { background: linear-gradient(135deg, #fecaca, #fca5a5); }

/* Auto-sync indicator */
#autoSyncIndicator {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-size: 12px;
    color: var(--text-sec);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s;
    z-index: 9999;
}
#autoSyncIndicator.syncing {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.auto-sync-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: autoSyncSpin .8s linear infinite;
}
@keyframes autoSyncSpin {
    to { transform: rotate(360deg); }
}

/* ======== COLUMN PICKER DROPDOWN ======== */
.column-picker-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 4px;
}
.column-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--tr);
}
.column-picker-item:hover {
    background: var(--bg);
}
.column-picker-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--blue);
}

/* ======== CUSTOMER TABLE: GROUPED ROWS ======== */
.parent-row td {
    background: var(--bg);
    font-weight: 600;
}
.parent-row:hover td {
    background: #eef1f5;
}
.child-row td {
    background: #f8fafc;
}
.child-row:hover td {
    background: #f0f4f8;
}

/* ======== SORTABLE HEADER HOVER ======== */
th[onclick]:hover {
    color: var(--blue);
}

/* ======== SET PARENT MODAL: OPTION ITEMS ======== */
.parent-option {
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--tr);
}
.parent-option:hover {
    background: var(--blue-light, #eff6ff);
}

/* ======== QUOTE NOTIFICATION BANNER ======== */
@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.quote-notification {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: slideDown .35s ease-out;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.quote-notification.accepted {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 1px solid #10b981;
}
.quote-notification.rejected {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border: 1px solid #ef4444;
}
.quote-notification .notif-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}
.quote-notification.accepted .notif-icon { background: #10b981; color: #fff; }
.quote-notification.rejected .notif-icon { background: #ef4444; color: #fff; }
.quote-notification .notif-body { flex: 1; }
.quote-notification .notif-title { font-weight: 700; font-size: 14px; }
.quote-notification.accepted .notif-title { color: #065f46; }
.quote-notification.rejected .notif-title { color: #991b1b; }
.quote-notification .notif-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.quote-notification .notif-reason { font-size: 12px; color: #991b1b; margin-top: 4px; font-style: italic; }
.quote-notification .notif-actions { display: flex; gap: 8px; flex-shrink: 0; }
.quote-notification .notif-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.quote-notification .notif-btn-win {
    background: #10b981;
    color: #fff;
}
.quote-notification .notif-btn-win:hover { background: #059669; }
.quote-notification .notif-btn-lost {
    background: #ef4444;
    color: #fff;
}
.quote-notification .notif-btn-lost:hover { background: #dc2626; }
.quote-notification .notif-btn-dismiss {
    background: rgba(0,0,0,.08);
    color: #64748b;
}
.quote-notification .notif-btn-dismiss:hover { background: rgba(0,0,0,.15); }

/* Lead notification banner */
.lead-notification {
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    animation: slideDown .35s ease-out;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border: 1px solid #2563eb;
}
.lead-notification.hot {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
    box-shadow: 0 2px 12px rgba(245,158,11,.3);
}
.lead-notification.reply {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 1px solid #10b981;
}
.lead-notification .notif-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    background: #2563eb;
    color: #fff;
}
.lead-notification.hot .notif-icon { background: #f59e0b; }
.lead-notification.reply .notif-icon { background: #10b981; }
.lead-notification .notif-body { flex: 1; }
.lead-notification .notif-title { font-weight: 700; font-size: 14px; color: #1e3a8a; }
.lead-notification.hot .notif-title { color: #92400e; font-size: 15px; }
.lead-notification.reply .notif-title { color: #065f46; }
.lead-notification .notif-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.lead-notification .notif-actions { display: flex; gap: 8px; flex-shrink: 0; }
.lead-notification .notif-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
}
.lead-notification .notif-btn-view { background: #2563eb; color: #fff; }
.lead-notification .notif-btn-view:hover { background: #1d4ed8; }
.lead-notification.hot .notif-btn-view { background: #f59e0b; }
.lead-notification.hot .notif-btn-view:hover { background: #d97706; }
.lead-notification.reply .notif-btn-view { background: #10b981; }
.lead-notification.reply .notif-btn-view:hover { background: #059669; }
.lead-notification .notif-btn-dismiss {
    background: rgba(0,0,0,.08);
    color: #64748b;
}
.lead-notification .notif-btn-dismiss:hover { background: rgba(0,0,0,.15); }

/* ======== BUDGET MORTEN TOTAL ROW ======== */
.budget-morten-total-row td {
    background: rgba(139, 92, 246, .08);
    font-weight: 700;
    color: #7c3aed;
}

/* ======== CUSTOMER FOLLOWUP ======== */
/* Collapsible banner wrapper */
.seller-banners-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.seller-banners-row > .followup-board-banner,
.seller-banners-row > .followup-board-banner--urgent {
    flex: 1;
    min-width: 0;
}
.seller-banners-row > .seller-banner-wrap {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.seller-banner-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 12px;
}
.seller-banner-collapse {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: rgba(0,0,0,.06);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .15s;
}
.seller-banner-wrap:hover .seller-banner-collapse {
    opacity: 1;
}
.seller-banner-collapse:hover {
    background: rgba(0,0,0,.12);
    color: var(--text);
}
/* KA dashboard has dark header — collapse btn needs light colors */
.seller-banner-wrap:has(.ka-dashboard) .seller-banner-collapse {
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.6);
}
.seller-banner-wrap:has(.ka-dashboard) .seller-banner-collapse:hover {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* Collapsed pills in topbar */
.seller-collapsed-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--bg-white);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    color: var(--text);
}
.seller-collapsed-pill:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.seller-collapsed-pill--blue {
    border-color: rgba(59,130,246,.3);
    color: var(--blue);
}
.seller-collapsed-pill--blue:hover { background: rgba(59,130,246,.06); }
.seller-collapsed-pill--purple {
    border-color: rgba(139,92,246,.3);
    color: var(--purple);
}
.seller-collapsed-pill--purple:hover { background: rgba(139,92,246,.06); }
.seller-collapsed-pill--dark {
    border-color: rgba(30,41,59,.3);
    color: #1e293b;
}
.seller-collapsed-pill--dark:hover { background: rgba(30,41,59,.06); }
.seller-collapsed-pill--orange {
    border-color: rgba(249,115,22,.3);
    color: #ea580c;
}
.seller-collapsed-pill--orange:hover { background: rgba(249,115,22,.06); }
.seller-collapsed-pill--blue {
    border-color: rgba(59,130,246,.3);
    color: #2563eb;
}
.seller-collapsed-pill--blue:hover { background: rgba(59,130,246,.06); }

/* ===== TM Meetings Banner ===== */
.tm-banner-cards {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.tm-banner-cards::-webkit-scrollbar { height: 6px; }
.tm-banner-cards::-webkit-scrollbar-track { background: transparent; }
.tm-banner-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.tm-banner-card {
    min-width: 320px;
    max-width: 360px;
    flex-shrink: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    transition: box-shadow .15s, border-color .15s;
}
.tm-banner-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    border-color: rgba(59,130,246,.3);
}
.tm-banner-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.tm-banner-card-company {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    cursor: pointer;
}
.tm-banner-card-company:hover { color: #3b82f6; text-decoration: underline; }
.tm-banner-card-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.tm-banner-card-contact {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
}
.tm-banner-card-contact a { color: #3b82f6; text-decoration: none; }
.tm-banner-card-contact a:hover { text-decoration: underline; }
.tm-banner-card-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tm-banner-card-comment {
    font-size: 12px;
    color: var(--text);
    background: rgba(0,0,0,.02);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    max-height: 60px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: max-height .3s;
}
.tm-banner-card-comment.expanded { max-height: 300px; overflow-y: auto; }
.tm-banner-card-comment-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 24px;
    background: linear-gradient(transparent, var(--bg-card, #fff));
    pointer-events: none;
}
.tm-banner-card-comment.expanded .tm-banner-card-comment-fade { display: none; }
.tm-banner-card-qa {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s;
}
.tm-banner-card-qa.expanded { max-height: 200px; overflow-y: auto; }
.tm-banner-card-qa-toggle {
    font-size: 11px;
    color: #3b82f6;
    cursor: pointer;
    margin-bottom: 6px;
    user-select: none;
}
.tm-banner-card-qa-toggle:hover { text-decoration: underline; }
.tm-banner-card-notes { margin-top: 8px; }
.tm-banner-card-notes textarea {
    width: 100%;
    min-height: 48px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(0,0,0,.02);
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
    transition: border-color .15s;
    box-sizing: border-box;
}
.tm-banner-card-notes textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.tm-banner-card-notes label,
.tm-banner-card-select-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 3px;
    display: block;
}
.tm-banner-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.tm-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tm-banner-title-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(0,0,0,.04);
    padding: 2px 8px;
    border-radius: 8px;
}
.tm-banner-card select {
    padding: 3px 6px;
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(0,0,0,.02);
    color: var(--text);
    cursor: pointer;
    width: 100%;
    margin-top: 4px;
}

/* Followup dashboard banner */
.followup-board-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(59,130,246,0.02));
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
}
.followup-board-banner:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.followup-board-banner--urgent {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border: none;
    color: #fff;
    animation: followupUrgentPulse 2.5s ease-in-out infinite;
    box-shadow: 0 4px 20px rgba(220,38,38,.3);
}
.followup-board-banner--urgent:hover {
    box-shadow: 0 6px 28px rgba(220,38,38,.4);
}
@keyframes followupUrgentPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(220,38,38,.25); }
    50% { box-shadow: 0 4px 28px rgba(220,38,38,.45); }
}
.followup-board-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(59,130,246,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    flex-shrink: 0;
}
.followup-board-banner-icon--urgent {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.followup-board-banner-alert {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.15);
    padding: 6px 14px;
    border-radius: 10px;
    line-height: 1.2;
}
.followup-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--bg, #f5f6f8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.followup-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
}
.followup-badge-red { background: rgba(239,68,68,.12); color: #dc2626; }
.followup-badge-yellow { background: rgba(245,158,11,.12); color: #d97706; }
.followup-badge-green { background: rgba(34,197,94,.12); color: #16a34a; }
.followup-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.followup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}
.followup-table thead th {
    background: var(--bg-secondary, #f8fafc);
    padding: 10px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
}
.followup-table colgroup .col-risk { width: 80px; }
.followup-table colgroup .col-name { width: 25%; }
.followup-table colgroup .col-rev { width: 100px; }
.followup-table colgroup .col-trend { width: 65px; }
.followup-table colgroup .col-date { width: 85px; }
.followup-table colgroup .col-actions { width: 200px; }
.followup-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.followup-table tbody tr:hover { background: rgba(59,130,246,.04); }
.followup-table td {
    padding: 10px 10px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}
.followup-cell-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.followup-cell-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.followup-cell-trend { text-align: center; }
.followup-cell-date { white-space: nowrap; color: var(--text-muted); }
.followup-cell-actions { white-space: nowrap; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.followup-dismiss-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
}
.followup-dismiss-btn:hover {
    background: var(--red-light);
    color: var(--red);
    border-color: var(--red);
}
.followup-contact-btn {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(37,99,235,.2);
}
.followup-contact-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 4px 12px rgba(37,99,235,.3);
    transform: translateY(-1px);
}
.followup-contact-btn:disabled {
    background: #e2e8f0;
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Risk level badges */
.followup-badge-kritisk {
    background: rgba(239,68,68,.15);
    color: #dc2626;
    animation: kaPulse 2s ease-in-out infinite;
}
.followup-badge-hoej {
    background: rgba(249,115,22,.12);
    color: #ea580c;
}
.followup-badge-medium {
    background: rgba(245,158,11,.12);
    color: #d97706;
}
.followup-badge-lav {
    background: rgba(34,197,94,.12);
    color: #16a34a;
}

.followup-summary-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    margin: 0 4px;
}

.followup-at-risk {
    font-size: 13px;
    font-weight: 700;
    color: #dc2626;
    background: rgba(239,68,68,.1);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(239,68,68,.2);
}

/* Followup tabs */
.followup-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.followup-tab {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.followup-tab:hover { background: #e2e8f0; }
.followup-tab.active {
    background: #1a1f2e;
    color: #fff;
    border-color: #1a1f2e;
}
.followup-tab-count {
    background: rgba(0,0,0,.1);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.followup-tab.active .followup-tab-count {
    background: rgba(255,255,255,.2);
}

/* Sortable column headers */
.followup-sort-header {
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}
.followup-sort-header:hover {
    color: var(--text, #334155);
}

/* Snooze / Dialog button */
.followup-snooze-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(217,119,6,.2);
}
.followup-snooze-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 4px 10px rgba(217,119,6,.3);
    transform: translateY(-1px);
}
.followup-unsnooze-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}
.followup-unsnooze-btn:hover {
    background: #e2e8f0;
    color: #334155;
}
.followup-badge-dialog {
    background: rgba(245,158,11,.12);
    color: #b45309;
}
.followup-row-snoozed {
    opacity: .6;
}
.followup-row-snoozed:hover {
    opacity: .85;
}

/* Restore button */
.followup-restore-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(22,163,74,.2);
}
.followup-restore-btn:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 4px 10px rgba(22,163,74,.3);
    transform: translateY(-1px);
}

/* Template picker popover */
.template-picker-popover {
    position: fixed;
    z-index: 10000;
    width: 340px;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    animation: pickerIn .15s ease;
}
.template-picker-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 8px 12px 8px;
}
.template-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .15s;
}
.template-card:hover {
    background: rgba(59,130,246,.06);
    transform: translateX(2px);
}
.template-card-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg, #f5f6f8);
    border-radius: var(--radius);
}
.template-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.template-card-text strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.template-card-preview {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==================== LEAD BOARD ==================== */
.lead-kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 12px;
}
.lead-kanban-column {
    min-width: 300px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-height: calc(100vh - 260px);
}
.lead-kanban-column-header {
    padding: 12px 16px;
    border-bottom: 3px solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--bg-white);
}
.lead-kanban-cards {
    flex: 1;
    padding: 10px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    transition: background .15s;
}
.lead-kanban-cards.drag-over {
    background: rgba(37, 99, 235, 0.08);
}
.lead-card {
    padding: 12px 14px;
    background: var(--bg-white);
    border-radius: var(--radius);
    border-left: 4px solid;
    cursor: pointer;
    transition: all var(--tr);
    box-shadow: var(--shadow);
}
.lead-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.lead-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

/* Lead board responsive */
@media (max-width: 900px) {
    .lead-kanban-board {
        flex-direction: column;
    }
    .lead-kanban-column {
        min-width: auto;
        max-height: none;
    }
}

/* Customer Correspondence Modal */
.cust-corr-email {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--card);
}
.cust-corr-email-header {
    margin-bottom: 8px;
}
.cust-corr-email-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.cust-corr-email-from {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}
.cust-corr-email-date {
    font-size: 12px;
    color: var(--text-muted);
}
.cust-corr-email-subject {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}
.cust-corr-email-body {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 6px;
}
.followup-corr-btn {
    padding: 2px 6px !important;
    font-size: 13px !important;
}

/* ======== STORE KUNDE LEADS (Big Leads) ======== */
.ka-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ka-split > .ka-split-left { min-width: 0; }
.ka-split > .ka-split-right { min-width: 0; }
@media (max-width: 1100px) { .ka-split { grid-template-columns: 1fr; } }

/* When inside split, remove KA dashboard margin and let split control spacing */
.ka-split .ka-dashboard { margin-bottom: 0; }

.bl-panel {
    background: var(--bg-white); min-height: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    border: 1px solid rgba(139,92,246,.08);
}
.bl-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bl-header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.bl-icon {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--purple), #7c3aed);
    border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(139,92,246,.3); flex-shrink: 0; font-size: 20px;
}
.bl-title { color: #fff; font-size: 15px; font-weight: 700; margin: 0; }
.bl-goal-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.bl-goal-text {
    color: rgba(255,255,255,.6); font-size: 11px; cursor: pointer; padding: 2px 6px;
    border-radius: 4px; transition: background .15s;
}
.bl-goal-text:hover { background: rgba(255,255,255,.1); }
.bl-goal-counter {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full);
    background: rgba(255,255,255,.15); color: #c4b5fd;
}
.bl-add-btn {
    background: var(--purple); border: none; color: #fff; font-size: 12px; font-weight: 600;
    padding: 6px 14px; border-radius: var(--radius); cursor: pointer; transition: all .15s;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
    box-shadow: 0 2px 10px rgba(139,92,246,.4);
}
.bl-add-btn:hover { background: var(--purple-dark); }

.bl-list { padding: 8px 12px 12px; }
.bl-empty { padding: 30px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

.bl-card {
    padding: 14px 16px; margin-bottom: 8px;
    background: var(--bg-white); border: 1px solid #f1f5f9;
    border-radius: var(--radius); transition: all .15s;
}
.bl-card:hover { background: #fafbfd; border-color: rgba(139,92,246,.15); box-shadow: 0 2px 8px rgba(139,92,246,.06); }
.bl-card:last-child { margin-bottom: 0; }
.bl-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bl-card-company { font-weight: 700; font-size: 13px; color: var(--text); }
.bl-card-contact { font-weight: 400; color: var(--text-sec); }
.bl-card-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.bl-card:hover .bl-card-actions { opacity: 1; }

.bl-card-meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.bl-date-badge {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; gap: 4px;
}
.bl-date-green { background: var(--green-light); color: var(--green-dark); }
.bl-date-yellow { background: var(--orange-light); color: var(--orange-dark); }
.bl-date-red { background: var(--red-light); color: var(--red-dark); }
.bl-date-none { background: var(--slate-light); color: var(--slate); }

.bl-next-step {
    font-size: 12px; color: var(--text-sec); flex: 1; min-width: 0;
    cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: background .15s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bl-next-step:hover { background: var(--blue-light); }
.bl-next-step-editing {
    font-size: 12px; flex: 1; min-width: 0; padding: 3px 6px;
    border: 1px solid var(--blue); border-radius: 4px; outline: none;
    font-family: inherit; background: #fff;
}

.bl-tags { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.bl-tag {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; gap: 4px; color: #fff;
    text-transform: uppercase; letter-spacing: .3px;
}
.bl-tag-remove {
    cursor: pointer; opacity: .7; transition: opacity .15s; font-size: 12px; line-height: 1;
}
.bl-tag-remove:hover { opacity: 1; }
.bl-tag-add-btn {
    width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed var(--border);
    background: none; cursor: pointer; font-size: 14px; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center; transition: all .15s;
    position: relative;
}
.bl-tag-add-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }

.bl-tag-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 100;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-md); min-width: 180px; padding: 6px 0;
    max-height: 220px; overflow-y: auto;
}
.bl-tag-dropdown-item {
    padding: 6px 12px; cursor: pointer; font-size: 12px; display: flex; align-items: center; gap: 8px;
    transition: background .1s;
}
.bl-tag-dropdown-item:hover { background: var(--bg); }
.bl-tag-dropdown-item .bl-tag-swatch {
    width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
}
.bl-tag-new-input {
    width: 100%; border: none; border-top: 1px solid var(--border); padding: 8px 12px;
    font-size: 12px; outline: none; font-family: inherit;
}
.bl-tag-new-input::placeholder { color: var(--text-muted); }

/* ======== LEAD GEN PIPELINE ======== */
.lg-board {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 16px; flex: 1; min-height: 0;
}
.lg-column {
    flex: 1; min-width: 200px; display: flex; flex-direction: column;
}
.lg-column-header {
    padding: 10px 12px; font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-white); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border: 1px solid var(--border); border-bottom: none;
}
.lg-column-cards {
    flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 80px;
    transition: background .15s;
}
.lg-column-cards.drag-over {
    background: var(--blue-light);
}
.lg-card {
    background: var(--bg-white); border-radius: var(--radius); padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06); cursor: pointer; transition: box-shadow .15s, transform .15s;
}
.lg-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-1px);
}
.lg-card.dragging {
    opacity: 0.5;
}
.lg-unassigned-badge:hover {
    filter: brightness(0.95);
}

/* ======== LEAD GEN — TOPBAR ALERT ======== */
.lg-topbar-alert {
    background: #fef3c7;
    border: 2px solid #f59e0b;
    color: #92400e;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    animation: lgPulse 2s infinite;
    transition: background .15s, border-color .15s;
}
.lg-topbar-alert:hover {
    background: #fde68a;
    border-color: #d97706;
}
.lg-topbar-alert svg { stroke: #d97706; flex-shrink: 0; }
.lg-topbar-alert-badge {
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* ======== LEAD GEN — NAV BADGE ======== */
.lg-nav-badge {
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 0 5px;
    animation: lgPulse 2s infinite;
}

/* ======== LEAD GEN — CARD HIGHLIGHTS ======== */
.lg-card.lg-card-pending {
    box-shadow: 0 0 0 2px #f59e0b;
}
.lg-card.lg-card-reply {
    box-shadow: 0 0 0 2px #2563eb;
}
.lg-email-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lg-email-badge-pending {
    background: #fef3c7;
    color: #92400e;
    animation: lgPulse 2s infinite;
}
.lg-email-badge-reply {
    background: #dbeafe;
    color: #1e40af;
    animation: lgPulse 2s infinite;
}
.lg-email-badge-sent {
    background: #d1fae5;
    color: #065f46;
}

/* Lead Gen AI Email pulse badge */
@keyframes lgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   SOURCING MODULE
   ======================================== */
.src-badge { display:inline-block; padding:3px 10px; border-radius:var(--radius-full); font-size:11px; font-weight:600; white-space:nowrap; }
.src-badge-draft { background:#e2e8f0; color:#475569; }
.src-badge-submitted { background:var(--blue-light); color:#1e40af; }
.src-badge-sourcing_review { background:var(--purple-light); color:var(--purple-dark); }
.src-badge-design_pending { background:var(--orange-light); color:var(--orange-dark); }
.src-badge-design_approved { background:var(--green-light); color:var(--green-dark); }
.src-badge-sample_pending { background:var(--orange-light); color:var(--orange-dark); }
.src-badge-sample_approved { background:var(--green-light); color:var(--green-dark); }
.src-badge-pp_pending { background:var(--orange-light); color:var(--orange-dark); }
.src-badge-pp_approved { background:var(--green-light); color:var(--green-dark); }
.src-badge-production { background:var(--blue-light); color:#1e40af; }
.src-badge-delivered { background:var(--green-light); color:var(--green-dark); }
.src-badge-closed { background:#e2e8f0; color:#475569; }

/* Sourcing detail modal — 2-column layout */
.src-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; min-height:500px; }
.src-detail-left { padding:20px; border-right:1px solid var(--border); overflow-y:auto; max-height:80vh; }
.src-detail-right { display:flex; flex-direction:column; max-height:80vh; }
@media (max-width: 768px) {
    .src-detail-grid { grid-template-columns:1fr; }
    .src-detail-left { border-right:none; border-bottom:1px solid var(--border); max-height:none; }
    .src-detail-right { max-height:50vh; }
}
.src-field-group { margin-bottom:16px; }
.src-field-group label { display:block; font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.src-field-group .input-field { font-size:13px; }

/* Approval gates */
.src-gates { display:flex; flex-direction:column; gap:8px; margin:16px 0; }
.src-gate { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg); }
.src-gate-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.src-gate-pending .src-gate-icon { background:var(--orange-light); color:var(--orange-dark); }
.src-gate-approved .src-gate-icon { background:var(--green-light); color:var(--green-dark); }
.src-gate-info { flex:1; }
.src-gate-info .gate-label { font-size:13px; font-weight:600; color:var(--text); }
.src-gate-info .gate-meta { font-size:11px; color:var(--text-muted); }

/* Artwork gate states */
.src-gate-rejected { border-color: var(--red); background: var(--red-light); }
.src-gate-rejected .src-gate-icon { background: var(--red-light); color: var(--red-dark); }
.artwork-badge-pending {
    display: inline-block;
    background: var(--orange-light);
    color: var(--orange-dark);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-left: 6px;
    vertical-align: middle;
}

/* Sourcing message thread */
.src-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:8px; }
.src-msg { padding:10px 14px; border-radius:var(--radius); font-size:13px; line-height:1.5; }
.src-msg-reply { background:var(--bg); border:1px solid var(--border); }
.src-msg-internal_note { background:#fef3c7; border:1px solid #fde68a; }
.src-msg-status_change { background:var(--purple-light); border:1px solid #c4b5fd; font-size:12px; text-align:center; color:var(--purple-dark); }
.src-msg-header { display:flex; justify-content:space-between; margin-bottom:4px; }
.src-msg-author { font-weight:600; font-size:12px; color:var(--text); }
.src-msg-time { font-size:11px; color:var(--text-muted); }
.src-msg-input { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; }
.src-msg-input textarea { flex:1; resize:none; font-size:13px; min-height:36px; }
.src-kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-bottom:20px; }
.src-kpi { background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.src-kpi-value { font-size:24px; font-weight:700; color:var(--text); }
.src-kpi-label { font-size:12px; color:var(--text-muted); margin-top:2px; }
.src-file-item:hover { border-color:var(--blue); background:var(--bg-white); }
#srcExcelPreview table td, #srcExcelPreview table th { border:1px solid var(--border); }

/* ===== Seller Tab Bar ===== */
.seller-tab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); margin:0 0 16px 0; padding:0; }
.seller-tab { background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; padding:10px 20px; font-size:14px; font-weight:500; color:var(--text-sec); cursor:pointer; transition:all .15s; }
.seller-tab:hover { color:var(--text); background:rgba(0,0,0,.02); }
.seller-tab.active { border-bottom-color:var(--blue); color:var(--blue); font-weight:700; }
.seller-tab #sellerTabKsCount:not(:empty)::before { content:''; }
.seller-tab #sellerTabKsCount:not(:empty) { display:inline-block; background:var(--red); color:#fff; font-size:11px; font-weight:700; padding:1px 7px; border-radius:var(--radius-full); margin-left:6px; vertical-align:middle; }

/* ===== Budget Plan Tab ===== */
.bp-month-nav { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.bp-month-nav button { background:var(--card); border:1px solid var(--border); border-radius:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); font-size:18px; transition:all .15s; }
.bp-month-nav button:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.bp-month-nav .bp-month-label { font-size:20px; font-weight:700; color:var(--text); min-width:180px; text-align:center; }

.bp-summary-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.bp-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 18px; }
.bp-card-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:4px; }
.bp-card-value { font-size:24px; font-weight:800; }
.bp-card-pct { font-size:13px; font-weight:500; color:var(--text-muted); margin-top:2px; }
.bp-card--budget .bp-card-value { color:var(--text); }
.bp-card--realized .bp-card-value { color:var(--green); }
.bp-card--forecast .bp-card-value { color:var(--blue); }
.bp-card--gap .bp-card-value { color:var(--red); }
.bp-card--clickable { cursor:pointer; transition:transform .15s, box-shadow .15s; }
.bp-card--clickable:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.2); }

.bp-breakdown-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999; display:flex; align-items:center; justify-content:center; }
.bp-breakdown-modal { background:#fff; border:1px solid #e0e0e0; border-radius:16px; width:90%; max-width:560px; max-height:80vh; overflow:hidden; position:relative; color:#1a1a2e; }
.bp-breakdown-header { padding:18px 20px; border-bottom:1px solid #e0e0e0; display:flex; align-items:center; gap:12px; }
.bp-breakdown-header h3 { margin:0; font-size:16px; font-weight:700; color:#1a1a2e; }
.bp-breakdown-total { font-size:18px; font-weight:800; color:#2d8c46; margin-left:auto; margin-right:32px; }
.bp-breakdown-body { padding:12px 20px 20px; overflow-y:auto; max-height:60vh; }
.bp-breakdown-table { width:100%; border-collapse:collapse; }
.bp-breakdown-table thead th { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#888; padding:8px 4px; border-bottom:1px solid #e0e0e0; text-align:left; }
.bp-breakdown-row td { padding:10px 4px; border-bottom:1px solid #f0f0f0; font-size:14px; color:#1a1a2e; }
.bp-breakdown-details { font-size:11px; color:#888; margin-top:4px; line-height:1.5; }
.bp-unlink-btn { background:none; border:none; cursor:pointer; font-size:16px; padding:2px 6px; opacity:.5; }
.bp-unlink-btn:hover { opacity:1; }

.bp-progress { background:var(--bg); border:1px solid var(--border); border-radius:10px; height:32px; display:flex; overflow:hidden; margin-bottom:24px; position:relative; }
.bp-progress-realized { background:var(--green); transition:width .3s; border-radius:10px 0 0 10px; }
.bp-progress-forecast { background:var(--blue); transition:width .3s; }
.bp-progress-gap { flex:1; }
.bp-progress-label { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:700; color:var(--text); }

.bp-forecast-section { margin-bottom:24px; }
.bp-forecast-section h3 { font-size:15px; font-weight:700; margin-bottom:10px; color:var(--text); }
.bp-table { width:100%; border-collapse:collapse; }
.bp-table th { text-align:left; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); padding:8px 10px; border-bottom:2px solid var(--border); }
.bp-table td { padding:6px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.bp-table tr.bp-row-tabt td { opacity:.5; text-decoration:line-through; }
.bp-inline-input { background:transparent; border:1px solid transparent; border-radius:6px; padding:5px 8px; font-size:14px; color:var(--text); width:100%; transition:border-color .15s; font-family:inherit; }
.bp-inline-input:hover { border-color:var(--border); }
.bp-inline-input:focus { border-color:var(--blue); outline:none; background:var(--bg); }
.bp-status-select { background:var(--card); border:1px solid var(--border); border-radius:6px; padding:5px 8px; font-size:13px; color:var(--text); cursor:pointer; font-family:inherit; }
.bp-status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.bp-status-dot--planlagt { background:var(--yellow, #f59e0b); }
.bp-status-dot--vundet { background:var(--green); }
.bp-status-dot--tabt { background:var(--red); }
.bp-delete-btn { background:none; border:none; cursor:pointer; font-size:16px; opacity:.4; transition:opacity .15s; padding:4px; }
.bp-delete-btn:hover { opacity:1; }
.bp-add-btn { display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px dashed var(--border); border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; color:var(--blue); cursor:pointer; transition:all .15s; margin-top:8px; }
.bp-add-btn:hover { background:rgba(59,130,246,.06); border-color:var(--blue); }

.bp-year-grid { margin-top:8px; }
.bp-year-grid h3 { font-size:15px; font-weight:700; margin-bottom:10px; color:var(--text); }
.bp-months-row { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; }
.bp-month-cell { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 4px; text-align:center; cursor:pointer; transition:all .15s; }
.bp-month-cell:hover { border-color:var(--blue); transform:translateY(-1px); }
.bp-month-cell.bp-month-active { border-color:var(--blue); box-shadow:0 0 0 2px rgba(59,130,246,.2); }
.bp-month-cell-name { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
.bp-month-cell-budget { font-size:12px; font-weight:600; color:var(--text); }
.bp-month-cell-bar { height:6px; border-radius:3px; background:var(--bg); margin:4px auto 2px; width:80%; overflow:hidden; display:flex; }
.bp-month-cell-bar-realized { background:var(--green); height:100%; }
.bp-month-cell-bar-forecast { background:var(--blue); height:100%; }
.bp-month-cell-pct { font-size:10px; color:var(--text-muted); }

/* Faktureret status */
.bp-row-faktureret td { background:rgba(34,197,94,.08); }
.bp-status-dot--faktureret { background:var(--green); box-shadow:0 0 4px rgba(34,197,94,.4); }

/* Invoice badge */
.bp-inv-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:10px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; border:1px solid var(--border); background:var(--card); }
.bp-inv-badge:hover { border-color:var(--blue); background:rgba(59,130,246,.06); }
.bp-inv-badge--linked { border-color:var(--green); color:var(--green); background:rgba(34,197,94,.08); }
.bp-inv-badge--none { color:var(--text-muted); cursor:default; opacity:.5; }

/* Auto-import button */
.bp-auto-import-btn { display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; color:var(--green); cursor:pointer; transition:all .15s; margin-top:8px; margin-left:8px; }
.bp-auto-import-btn:hover { background:rgba(34,197,94,.06); border-color:var(--green); }

/* Accumulated deviation row */
.bp-accum-row { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; margin-top:6px; }
.bp-accum-cell { text-align:center; font-size:11px; font-weight:700; padding:4px 2px; border-radius:6px; background:var(--card); border:1px solid var(--border); }
.bp-accum-cell--pos { color:var(--green); }
.bp-accum-cell--neg { color:var(--red); }
.bp-accum-cell--future { color:var(--text-muted); opacity:.4; }
.bp-accum-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-top:8px; margin-bottom:2px; text-align:center; }

/* Catch-up banner */
.bp-catchup-banner { margin-top:12px; padding:12px 18px; border-radius:10px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.bp-catchup-banner--deficit { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25); color:var(--red); }
.bp-catchup-banner--surplus { background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.25); color:var(--green); }

/* Invoice modal table */
.bp-inv-modal-table { width:100%; border-collapse:collapse; margin:12px 0; }
.bp-inv-modal-table th { text-align:left; font-size:11px; font-weight:600; text-transform:uppercase; color:var(--text-muted); padding:8px 10px; border-bottom:2px solid var(--border); }
.bp-inv-modal-table td { padding:8px 10px; border-bottom:1px solid var(--border); font-size:13px; }
.bp-inv-modal-table tr:hover td { background:rgba(59,130,246,.04); }
.bp-inv-modal-actions { display:flex; gap:8px; margin-top:12px; justify-content:flex-end; }

@media (max-width:768px) {
    .bp-summary-cards { grid-template-columns:repeat(2,1fr); }
    .bp-months-row { grid-template-columns:repeat(6,1fr); }
    .bp-accum-row { grid-template-columns:repeat(6,1fr); }
}

/* Flyt forecast til anden måned (højreklik-menu) */
.bp-move-backdrop {
    position:fixed; top:0; left:0; right:0; bottom:0;
    z-index:9998; background:transparent; cursor:default;
}
.bp-move-menu {
    position:absolute; z-index:9999;
    width:260px;
    background:#ffffff; border:1px solid var(--border); border-radius:10px;
    box-shadow:0 12px 32px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
    padding:12px 14px;
    font-size:13px;
    user-select:none;
}
.bp-move-menu-head { display:flex; align-items:center; justify-content:space-between; }
.bp-move-menu-title { font-weight:700; font-size:13px; color:var(--text); }
.bp-move-menu-close { background:none; border:none; font-size:20px; color:var(--text-muted); cursor:pointer; padding:0 4px; line-height:1; }
.bp-move-menu-close:hover { color:var(--text); }
.bp-move-menu-sub { font-size:11px; color:var(--text-muted); margin:2px 0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; letter-spacing:.4px; }
.bp-move-menu-year { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px; padding:6px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.bp-move-year-btn { background:#ffffff; border:1px solid var(--border); border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer; color:var(--text); }
.bp-move-year-btn:hover { border-color:var(--blue); color:var(--blue); }
.bp-move-year-label { font-weight:700; font-size:15px; color:var(--text); min-width:50px; text-align:center; }
.bp-move-months-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.bp-move-month { background:#f8fafc; border:1px solid var(--border); border-radius:6px; padding:10px 4px; font-size:12px; font-weight:600; cursor:pointer; color:var(--text); transition:all .12s; }
.bp-move-month:hover { background:rgba(37,99,235,.08); border-color:var(--blue); color:var(--blue); }
.bp-move-month--current { background:rgba(16,185,129,.1); border-color:var(--green); color:var(--green-dark); font-weight:700; cursor:default; }
.bp-move-month--current:hover { background:rgba(16,185,129,.1); border-color:var(--green); color:var(--green-dark); }
.bp-table tbody tr { cursor:default; }
.bp-table tbody tr:hover { background:rgba(59,130,246,.025); }

/* ======== AFRAPPORTERING ======== */
.afrap-sections { display:flex; flex-direction:column; gap:6px; }
.afrap-checkbox { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--text); user-select:none; padding:4px 0; }
.afrap-checkbox input[type="checkbox"] { width:16px; height:16px; accent-color:var(--blue); cursor:pointer; flex-shrink:0; }
.afrap-checkbox span { line-height:1.3; }
.afrap-preview-wrap { margin-top:16px; }
.afrap-preview { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; font-family:'SF Mono',SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace; font-size:12px; line-height:1.5; color:var(--text); white-space:pre; overflow-x:auto; max-height:500px; overflow-y:auto; margin:0; }
.afrap-actions { display:flex; gap:8px; margin-top:16px; justify-content:flex-end; }