/* =========================================================================== DLN Employee System — global stylesheet =========================================================================== Design tokens are CSS custom properties so component-scoped CSS (e.g. SmartGrid.razor.css) can reuse them. Naming follows the DLN Handyman conventions: --primary-blue, --secondary-blue, --accent-orange, plus a semantic surface palette. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* Brand palette — deep navy + accent orange. */ --primary-blue: #1E3884; --primary-blue-dark: #16306f; --secondary-blue: #2096CB; --accent-orange: #FFA800; /* Semantic surfaces. Light mode. */ --surface: #ffffff; --surface-alt: #f8fafc; --surface-hover: #f1f5f9; --workspace-bg: #f5f7fb; --modal-overlay: rgba(15, 23, 42, .55); --modal-bg: #ffffff; --text-primary: #1f2937; --text-secondary: #374151; --text-muted: #6b7280; --text-on-dark: #e5e7eb; --border-color: #e5e7eb; --border-strong: #cbd5e1; --row-alt: #fafbfc; --row-hover: #f1f5f9; --input-bg: #ffffff; --input-border: #d1d5db; --grid-header-bg: #f3f4f6; --kanban-card-bg: #ffffff; --kanban-column-bg: #f8fafc; --code-bg: #f3f4f6; /* Status palette — used by .status-badge variants below. */ --status-new: #ef4444; --status-new-bg: #fef2f2; --status-assigned: #6366f1; --status-assigned-bg: #eef2ff; --status-inprogress: #2563eb; --status-inprogress-bg: #eff6ff; --status-pending: #d97706; --status-pending-bg: #fffbeb; --status-resolved: #059669; --status-resolved-bg: #ecfdf5; --status-closed: #6b7280; --status-closed-bg: #f3f4f6; /* Elevation. */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05); --shadow-md: 0 4px 12px rgba(15, 23, 42, .06); --shadow-lg: 0 10px 25px rgba(15, 23, 42, .12); } /* Dark theme — activated by data-theme="dark" on . Stay close to the "deep navy / charcoal" tone the spec calls for, with the DLN brand blue slightly lifted so it still pops on dark backgrounds. */ [data-theme="dark"] { --primary-blue: #3b5bb5; --primary-blue-dark: #1E3884; --secondary-blue: #4cb6e2; --accent-orange: #FFB930; --surface: #1e2740; --surface-alt: #18213a; --surface-hover: #263054; --workspace-bg: #121826; --modal-overlay: rgba(0, 0, 0, .65); --modal-bg: #1e2740; --text-primary: #f5f5f5; --text-secondary: #d1d5db; --text-muted: #cbd5e1; --text-on-dark: #f5f5f5; --border-color: #2d3a5c; --border-strong: #3d4a72; --row-alt: #1a2237; --row-hover: #28335a; --input-bg: #18213a; --input-border: #3d4a72; --grid-header-bg: #18213a; --kanban-card-bg: #263054; --kanban-column-bg: #18213a; --code-bg: #18213a; /* Status palette — softer foreground tones + dark BG for readability. */ --status-new: #f87171; --status-new-bg: rgba(239, 68, 68, .15); --status-assigned: #818cf8; --status-assigned-bg: rgba(99, 102, 241, .18); --status-inprogress: #60a5fa; --status-inprogress-bg: rgba(37, 99, 235, .18); --status-pending: #fbbf24; --status-pending-bg: rgba(217, 119, 6, .20); --status-resolved: #34d399; --status-resolved-bg: rgba(5, 150, 105, .18); --status-closed: #9ca3af; --status-closed-bg: rgba(107, 114, 128, .18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 10px 25px rgba(0, 0, 0, .55); color-scheme: dark; } /* Smooth transitions when toggling theme. Limited to color/background to avoid janky layout transitions when the theme flips. */ html, body, .topbar, .sidebar, .workarea, .content, .modal, .modal-backdrop, .smart-grid, .smartgrid-toolbar, .smart-grid table, .smart-grid th, .smart-grid td, .kanban-column, .kanban-card, .command-palette, .command-palette-input, .action-menu-popup, .planning-calendar, .cal-day-cell, .day-task-chip, .cal-task-block, input, select, textarea, button { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ── Reset + base typography ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text-primary); background-color: var(--workspace-bg) !important; -webkit-font-smoothing: antialiased; } h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; letter-spacing: -.01em; color: var(--text-primary); } h2 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 .75rem; color: var(--text-primary); } h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 .5rem; color: var(--text-primary); } /* Force labels + inputs to use the theme variables so dark mode never gets dark-on-dark text. Light mode keeps the same variable mapping. */ label { color: var(--text-primary); } input, select, textarea { color: var(--text-primary); background-color: var(--input-bg, var(--surface)); } a { color: var(--primary-blue); text-decoration: none; } a:hover { text-decoration: underline; } /* ── App shell: sidebar + workspace ──────────────────────────────────── */ .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } /* Sidebar — deep navy gradient, generous padding, sticky. */ .sidebar { background: linear-gradient(180deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%); color: var(--text-on-dark); padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar .brand { color: #fff; padding: .25rem .25rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; align-items: stretch; gap: .5rem; } .sidebar .brand-mark { background-color: #fff; border-radius: 8px; padding: .6rem .75rem; display: flex; align-items: center; justify-content: center; } .sidebar .brand-mark img { width: 100%; height: auto; max-width: 180px; display: block; /* Skarpere downscaling — browseren default-bruger smooth scaling der blødgør tynde streger i tekst-logoer. crisp-edges holder kanter skarpe på højere DPI'er. */ image-rendering: -webkit-optimize-contrast; } .sidebar .brand-subtitle { font-weight: 600; font-size: .85rem; letter-spacing: .02em; color: rgba(255, 255, 255, .92); text-align: center; text-transform: uppercase; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; } /* `::deep` is Razor-scoped-CSS only — in a global stylesheet we target the anchor directly. NavLink renders an with class="active" when matched. */ .sidebar nav a { color: rgba(229, 231, 235, .85); text-decoration: none; padding: .55rem .75rem; border-radius: 6px; font-size: .875rem; font-weight: 500; display: flex; align-items: center; gap: .55rem; transition: background .12s, color .12s; } .sidebar nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; } .sidebar nav a.active { background: rgba(255, 168, 0, .15); color: #fff; box-shadow: inset 3px 0 0 var(--accent-orange); } .sidebar .nav-section { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(229, 231, 235, .45); padding: 1rem .75rem .25rem; } .nav-icon { width: 16px; height: 16px; flex: none; opacity: .9; } /* Workspace + topbar. */ .workarea { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 30; } .topbar .spacer { flex: 1; } .topbar .current-user { font-size: .85rem; color: var(--text-muted); padding-right: .5rem; border-right: 1px solid var(--border-color); margin-right: .5rem; } .topbar .linkbutton { background: transparent; border: 0; color: var(--secondary-blue); cursor: pointer; font-size: .85rem; font-weight: 500; padding: 0 .25rem; } .topbar .linkbutton:hover { color: var(--primary-blue); text-decoration: underline; } .logout-form { display: inline; } /* Top-bar Ctrl+K trigger. */ .top-bar-search { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: 999px; padding: .4rem .9rem .4rem .75rem; color: var(--text-muted); cursor: pointer; font-size: .85rem; transition: background .12s, border-color .12s; } .top-bar-search:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-primary); } .top-bar-search-text { font-weight: 500; } .top-bar-help { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--surface-alt); color: var(--text-muted); cursor: pointer; font-weight: 700; font-size: .9rem; transition: background .12s, color .12s, border-color .12s; } .top-bar-help:hover { background: var(--surface-hover); color: var(--primary-blue); border-color: var(--border-strong); } /* Shortcuts help modal — separate from .modal-backdrop because it's a plain DOM element shown/hidden by raw onclick (no Blazor wiring). */ .shortcuts-modal { position: fixed; inset: 0; background: var(--modal-overlay); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 1100; animation: fade-in .15s ease; } .shortcuts-card { background: var(--surface); border-radius: 12px; padding: 1.5rem 1.75rem; width: 540px; max-width: calc(100vw - 2rem); max-height: calc(100vh - 4rem); overflow-y: auto; box-shadow: var(--shadow-lg); animation: pop-in .15s cubic-bezier(.2, .8, .25, 1); } .shortcuts-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border-color); } .shortcuts-header h2 { margin: 0; font-size: 1.05rem; } .shortcuts-close { background: transparent; border: 0; font-size: 1.5rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 .25rem; } .shortcuts-close:hover { color: var(--text-primary); } .shortcuts-body h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 1rem 0 .5rem; } .shortcuts-body table { width: 100%; border-collapse: collapse; font-size: .9rem; } .shortcuts-body td { padding: .35rem .5rem; } .shortcuts-body td:first-child { width: 40%; white-space: nowrap; } .shortcuts-body kbd { display: inline-block; padding: .15rem .5rem; background: var(--surface-alt); border: 1px solid var(--border-color); border-bottom-width: 2px; border-radius: 4px; font-family: 'JetBrains Mono', 'SFMono-Regular', monospace; font-size: .78rem; color: var(--text-primary); } .top-bar-kbd, kbd.cp-kbd { font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border-color); border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; } .content { padding: 1.75rem 2rem; overflow: auto; } /* ── Page header (title + count + spacer + buttons) ──────────────────── */ .page-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; } .page-header h1 { margin: 0; } .page-header .spacer { flex: 1; } .count-pill { background: var(--primary-blue); color: #fff; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; } /* ── Unified buttons ─────────────────────────────────────────────────── */ .btn, .btn-primary, .btn-ghost, .btn-assign, button.btn-primary, button.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 36px; padding: 0 1rem; border-radius: 6px; font-family: inherit; font-size: .85rem; font-weight: 500; line-height: 1; cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; box-sizing: border-box; } .btn-primary, .btn-assign { background: var(--primary-blue); color: #fff; border-color: var(--primary-blue); box-shadow: var(--shadow-sm); } .btn-primary:hover:not(:disabled), .btn-assign:hover:not(:disabled) { background: var(--primary-blue-dark); border-color: var(--primary-blue-dark); box-shadow: var(--shadow-md); } .btn-ghost { background: var(--surface); color: var(--text-primary); border-color: var(--border-color); box-shadow: var(--shadow-sm); } .btn-ghost:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); } .btn-primary:disabled, .btn-ghost:disabled, .btn-assign:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } .hotkey-hint { display: inline-block; margin-left: .35rem; padding: .05rem .35rem; border-radius: 4px; background: rgba(255, 255, 255, .25); font-size: .68rem; font-weight: 600; color: rgba(255, 255, 255, .9); } /* ── Cards ───────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); } /* KPI dashboard cards. */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .kpi-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: 10px; padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .35rem; position: relative; overflow: hidden; transition: box-shadow .15s, transform .15s; } .kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .kpi-card .kpi-icon { position: absolute; right: 1rem; top: 1rem; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 1.25rem; background: var(--surface-alt); color: var(--primary-blue); } .kpi-card .kpi-label { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .kpi-card .kpi-value { font-size: 2rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; letter-spacing: -.02em; } .kpi-card .kpi-trend { font-size: .75rem; color: var(--text-muted); } .kpi-card.kpi-warn .kpi-icon { background: var(--status-pending-bg); color: var(--status-pending); } .kpi-card.kpi-bad .kpi-icon { background: var(--status-new-bg); color: var(--status-new); } .kpi-card.kpi-good .kpi-icon { background: var(--status-resolved-bg); color: var(--status-resolved); } /* Recent activity feed. */ .activity-feed { display: flex; flex-direction: column; gap: .5rem; } .activity-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; font-size: .875rem; } .activity-item .activity-when { color: var(--text-muted); font-size: .75rem; min-width: 70px; } .activity-item .activity-who { font-weight: 600; } .activity-item .activity-what { color: var(--text-primary); flex: 1; } /* ── Status & priority badges ────────────────────────────────────────── */ .status-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1; } .status-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status-badge.status-new { background: var(--status-new-bg); color: var(--status-new); } .status-badge.status-assigned { background: var(--status-assigned-bg); color: var(--status-assigned); } .status-badge.status-inprogress { background: var(--status-inprogress-bg); color: var(--status-inprogress); } .status-badge.status-pendingcustomer{ background: var(--status-pending-bg); color: var(--status-pending); } .status-badge.status-resolved { background: var(--status-resolved-bg); color: var(--status-resolved); } .status-badge.status-closed { background: var(--status-closed-bg); color: var(--status-closed); } .priority { display: inline-block; padding: .15rem .55rem; border-radius: 4px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .priority-low { background: var(--status-resolved-bg); color: var(--status-resolved); } .priority-normal { background: var(--status-inprogress-bg); color: var(--status-inprogress); } .priority-high { background: var(--status-pending-bg); color: var(--status-pending); } .priority-critical { background: var(--status-new-bg); color: var(--status-new); } /* ── Table fallback (used by pages that haven't moved to SmartGrid) ── */ .ticket-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; font-size: .9rem; box-shadow: var(--shadow-sm); } .ticket-table th, .ticket-table td { text-align: left; padding: .75rem 1rem; color: var(--text-primary); border-bottom: 1px solid var(--border-color); } .ticket-table th { background: var(--surface-alt); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; } .ticket-table tbody tr:last-child td { border-bottom: none; } .ticket-table tbody tr:hover { background: var(--row-hover); } .ticket-table.sticky-headers thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-alt); box-shadow: inset 0 -1px 0 var(--border-color); } .row-clickable { cursor: pointer; } .subject-cell { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .mono { font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace; font-size: .8rem; color: var(--text-muted); } .muted { color: var(--text-muted); } .col-action { text-align: right; width: 1%; white-space: nowrap; } .empty-state { background: var(--surface); border: 1px dashed var(--border-color); border-radius: 10px; padding: 2.5rem; text-align: center; color: var(--text-muted); } /* ── Modals — centred, with clear typography ─────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: var(--modal-overlay); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 1000; animation: fade-in .15s ease; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border-radius: 12px; padding: 1.75rem 1.75rem 1.5rem; width: 460px; max-width: calc(100vw - 2rem); max-height: calc(100vh - 4rem); overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-lg); animation: pop-in .15s cubic-bezier(.2, .8, .25, 1); } /* Wider variant for forms with many fields (e.g. customer create/edit). */ .modal.modal-wide { width: 880px; } /* Fixed vs Flexible mode toggle in the planning modal — pill-shaped segmented control. Active option gets the brand-blue fill so the current mode reads at a glance. The radio inputs are visually hidden but still keyboard-driven. */ .modal .mode-toggle { display: inline-flex; border: 1px solid var(--border-color); border-radius: 999px; padding: 3px; background: var(--surface-alt, var(--surface)); align-self: flex-start; } .modal .mode-option { cursor: pointer; padding: 0.4rem 0.95rem; border-radius: 999px; font-size: 0.88rem; font-weight: 500; color: var(--text-muted); transition: background 0.15s, color 0.15s; user-select: none; display: inline-flex; align-items: center; gap: 0.4rem; } .modal .mode-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .modal .mode-option.active { background: var(--primary-blue); color: #fff; } .modal .mode-option:hover:not(.active) { color: var(--text-primary); } /* Two-column Start / End datetime-local row in the planning modal. Stacks on narrow viewports so the picker doesn't get cramped. */ .modal .datetime-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .modal .datetime-row label { width: 100%; } .modal .datetime-row input[type="datetime-local"] { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--surface)); color: var(--text-primary); font: inherit; } .modal .datetime-summary { font-size: 0.85rem; margin-top: -0.4rem; } @media (max-width: 540px) { .modal .datetime-row { grid-template-columns: 1fr; } } /* Standalone-appointment block inside the planning modal. Visually grouped so the user understands these fields only apply when no ticket is selected. */ .modal .standalone-section { border: 1px dashed var(--border-color); border-radius: 8px; padding: 0.75rem 0.875rem 0.875rem; background: rgba(245, 158, 11, 0.06); display: flex; flex-direction: column; gap: 0.65rem; } .modal .standalone-section .standalone-hint { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; } .modal .badge-standalone { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: #b45309; color: #fff; border-radius: 4px; padding: 2px 6px; } .modal .standalone-section textarea { width: 100%; resize: vertical; font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--surface)); color: var(--text-primary); } /* Two-column layout inside a modal — used by the customer modal so basic info sits on the left and invoice settings on the right. The columns collapse to a single stack on narrow viewports. */ .modal .two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; } .modal .two-col-grid > .col { display: flex; flex-direction: column; gap: .75rem; } @media (max-width: 720px) { .modal .two-col-grid { grid-template-columns: 1fr; } } .modal-section-header { margin: .25rem 0 .25rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border-color); padding-bottom: .35rem; } /* Inline field-level warning (e.g. "Uniconta account already in use — click to edit X instead"). Rendered as a button so it's keyboard-focusable; styled like a soft alert. */ .field-warning { margin-top: .35rem; padding: .45rem .65rem; background: var(--status-pending-bg); border: 1px solid var(--status-pending); color: var(--status-pending); border-radius: 6px; font-size: .8rem; font-weight: 500; text-align: left; cursor: pointer; line-height: 1.3; } .field-warning:hover { filter: brightness(1.05); } .field-warning:focus-visible { outline: 2px solid var(--status-pending); outline-offset: 1px; } /* Typeahead search combo at the top of the customer-create modal. The list sits flush below the input — we don't position:absolute it because the modal already gives the layout room (and absolute would clip on overflow). */ .search-combo { position: relative; } .search-combo .search-input { width: 100%; padding: .55rem .75rem; font-size: .9rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface); } .search-combo .search-input:focus { outline: 2px solid var(--primary-blue); outline-offset: 1px; } .search-combo .search-results { list-style: none; margin: .35rem 0 0; padding: .25rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); max-height: 240px; overflow-y: auto; } .search-combo .search-results li { display: flex; gap: .75rem; align-items: baseline; padding: .45rem .6rem; border-radius: 4px; cursor: pointer; font-size: .85rem; } .search-combo .search-results li .mono { min-width: 80px; color: var(--text-muted); } .search-combo .search-results li:hover, .search-combo .search-results li.highlighted { background: rgba(32, 150, 203, 0.16); color: var(--text-primary); } @keyframes pop-in { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal h2 { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; } .modal label { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; font-weight: 500; color: var(--text-muted); } .modal label.inline { flex-direction: row; align-items: center; gap: .5rem; color: var(--text-primary); font-weight: 400; } /* Checkbox + label-text pair on one line. Without this rule the label would inherit the default flex-direction:column and the checkbox + caption would stack vertically (looks like an orphan checkbox above an orphan label). */ .modal label.checkbox-row { flex-direction: row; align-items: center; gap: .55rem; color: var(--text-primary); font-weight: 400; } .modal label.checkbox-row input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; } .modal label.checkbox-row span { flex: 1 1 auto; } .modal label input[type="text"], .modal label input[type="email"], .modal label input[type="password"], .modal label input[type="number"], .modal label select, .modal label textarea { padding: .55rem .75rem; border: 1px solid var(--border-color); border-radius: 6px; font-family: inherit; font-size: .9rem; color: var(--text-primary); background: var(--input-bg); transition: border-color .12s, box-shadow .12s; } .modal label input:focus, .modal label select:focus, .modal label textarea:focus { border-color: var(--secondary-blue); outline: none; box-shadow: 0 0 0 3px rgba(32, 150, 203, .15); } .modal-actions { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .modal-actions .spacer { flex: 1; } /* ── Planned-time badge (ticket SmartGrid + detail summary) ── Adapted from the DLN Handyman budget-bar pattern: thin progress bar sandwiched against numerical labels. Green when within estimate, red when over. Width capped to 100% so an over-budget ticket still renders cleanly. */ .planned-time-badge { display: inline-flex; flex-direction: column; gap: 3px; min-width: 110px; font-size: .72rem; line-height: 1.2; } .planned-time-badge.muted { color: var(--text-muted); padding: 4px 0; } .planned-time-badge .planned-bar { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.08); overflow: hidden; } .planned-time-badge .planned-fill { height: 100%; border-radius: 3px; transition: width 0.2s ease; } .planned-fill-ok { background: var(--status-resolved); } .planned-fill-over { background: var(--status-new); } .planned-fill-neutral { background: var(--text-muted); } .planned-time-badge .planned-numbers { white-space: nowrap; } .planned-time-badge .planned-numbers strong { font-weight: 700; } .planned-time-badge.over-budget .planned-numbers strong { color: var(--status-new); } /* Larger variant used on the ticket-detail summary card. */ .planned-time-badge.large { min-width: 180px; font-size: .8rem; } .planned-time-badge.large .planned-bar { height: 8px; border-radius: 4px; } /* ── Planning summary card on ticket-detail ── */ .planning-summary { margin-bottom: 1rem; } .planning-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)) 2fr; gap: 1rem; align-items: center; padding: .25rem 0; } .planning-summary-grid .summary-tile { display: flex; flex-direction: column; gap: 2px; padding: .35rem .65rem; background: var(--surface-alt); border-radius: 6px; } .planning-summary-grid .summary-tile strong { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); } .planning-summary-grid .summary-tile.summary-over strong { color: var(--status-new); } .planning-summary-grid .summary-bar { padding: 0 .25rem; } @media (max-width: 720px) { .planning-summary-grid { grid-template-columns: 1fr 1fr; } .planning-summary-grid .summary-bar { grid-column: 1 / -1; } } /* ── Breadcrumb (above page-header on detail pages) ── */ .breadcrumb { display: flex; align-items: center; gap: .35rem; font-size: .8rem; margin-bottom: .5rem; flex-wrap: wrap; } .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.15s; } .breadcrumb a:hover { color: var(--primary-blue, #1E3884); text-decoration: underline; } .breadcrumb-sep { color: var(--text-muted); opacity: 0.6; } /* ── Attachments panel ── */ .attachments-panel { margin-bottom: 1rem; } .attachments-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; } .attachments-header h2 { margin: 0; font-size: 1rem; } .attachments-upload-btn { cursor: pointer; position: relative; overflow: hidden; padding: .4rem .9rem; font-size: .85rem; } .attachments-upload-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .attachments-progress { padding: .35rem 0; font-size: .82rem; } .attachments-empty { padding: .75rem 0; text-align: center; } .attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; } .attachment-tile { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: var(--surface); transition: box-shadow .15s, border-color .15s; } .attachment-tile:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); } .attachment-thumb { display: flex; align-items: center; justify-content: center; height: 110px; background: var(--surface-alt); color: var(--text-muted); text-decoration: none; overflow: hidden; } .attachment-thumb img { max-width: 100%; max-height: 100%; object-fit: cover; } .attachment-icon { font-size: 2.4rem; line-height: 1; } .attachment-meta { padding: 6px 8px 0; font-size: .78rem; } .attachment-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .attachment-actions { display: flex; align-items: center; gap: 4px; padding: 4px 6px 6px; justify-content: flex-end; } /* Danger variant — used on Delete buttons inside modals so they stand out as destructive even though they share the .btn-ghost base styling. */ .btn-ghost.btn-danger { color: var(--status-new); } .btn-ghost.btn-danger:hover { background: var(--status-new-bg); color: var(--status-new); } /* ── Planning view tabs ── */ .planning-controls { display: flex; gap: .75rem; align-items: center; flex: 1; } .planning-view-tabs { display: inline-flex; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; } .planning-view-tabs button { background: transparent; border: none; padding: .35rem .75rem; font-size: .8rem; color: var(--text-muted); cursor: pointer; border-right: 1px solid var(--border-color); } .planning-view-tabs button:last-child { border-right: none; } .planning-view-tabs button:hover { background: var(--surface-hover); color: var(--text-primary); } .planning-view-tabs button.active { background: var(--primary-blue, #1E3884); color: #fff; } /* ── 3-dot ActionMenu ────────────────────────────────────────────────── */ .action-menu { position: relative; display: inline-block; } .action-menu-trigger { border: none; background: transparent; width: 32px; height: 32px; border-radius: 6px; font-size: 18px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0; } .action-menu-trigger:hover { background: var(--surface-hover); color: var(--text-primary); } .action-menu-backdrop { position: fixed; inset: 0; background: transparent; border: none; padding: 0; cursor: default; z-index: 1199; } .action-menu-popup { /* Fixed positioning lifts the popup out of the .smart-grid-table-wrapper overflow-clip; the actual top/left are set by the dlnPositionActionMenu JS observer below (see App.razor) so the popup hangs directly under its trigger button regardless of how the row is scrolled. */ position: fixed; width: max-content; min-width: 220px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--shadow-lg); padding: .35rem; display: flex; flex-direction: column; gap: 1px; z-index: 1200; animation: pop-in .12s ease; } .action-menu-popup button { width: 100%; text-align: left; background: transparent; border: none; padding: .5rem .75rem; font-family: inherit; font-size: .85rem; color: var(--text-primary); border-radius: 4px; cursor: pointer; height: auto; white-space: nowrap; } .action-menu-popup button:hover, .action-menu-popup button:focus { background: var(--surface-hover); outline: none; } .action-menu-popup button:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-orange); } /* Inline row-action icons (edit / delete) — sit next to the 3-dot menu. */ .row-actions { display: inline-flex; align-items: center; gap: .15rem; } .action-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; padding: 0; transition: background .12s, color .12s; } .action-icon:hover { background: var(--surface-hover); color: var(--primary-blue); } .action-icon-danger:hover { background: var(--status-new-bg); color: var(--status-new); } .action-icon svg { width: 16px; height: 16px; } /* Highlight the focused grid row. `:focus` styling is unreliable on tables — each `` paints its own background (alt-row stripe + hover) and an outline/box-shadow on the `` ends up obscured under the cell backgrounds. So we paint the cells directly. !important is needed because SmartGrid's scoped CSS sets `tbody tr:nth-child(even) td` and `tr:hover td` with higher specificity. The left-edge accent is drawn with a box-shadow on the first cell so the highlight has a clear visual anchor. */ [data-grid-row]:focus { outline: none; } [data-grid-row]:focus > td { background-color: rgba(32, 150, 203, 0.16) !important; color: var(--text-primary); } [data-grid-row]:focus > td:first-child { box-shadow: inset 4px 0 0 var(--accent-orange); } /* ── Filters / SmartGrid extras (legacy fallback) ─────────────────── */ .filters { display: flex; gap: .5rem; margin-bottom: 1rem; } .filters select { padding: .45rem .65rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface); font-size: .9rem; } .smartgrid { display: flex; flex-direction: column; gap: .5rem; } .smartgrid-toolbar { display: flex; gap: .5rem; align-items: center; } .smartgrid-search { flex: 0 0 280px; padding: .5rem .75rem; border: 1px solid var(--border-color); border-radius: 999px; font-size: .85rem; background: var(--surface); } /* ── Result banners ──────────────────────────────────────────────────── */ .result-banner { display: flex; flex-direction: column; gap: .25rem; padding: .85rem 1.1rem; border-radius: 8px; font-size: .9rem; border: 1px solid var(--border-color); } .result-banner strong { font-weight: 600; } .result-ok { background: var(--status-resolved-bg); color: var(--status-resolved); border-color: var(--status-resolved); } .result-warn { background: var(--status-pending-bg); color: var(--status-pending); border-color: var(--status-pending); } .result-fail { background: var(--status-new-bg); color: var(--status-new); border-color: var(--status-new); } .result-errors { margin: .25rem 0 0; padding-left: 1.25rem; font-size: .85rem; } /* ── Login screen ────────────────────────────────────────────────────── */ .empty-layout { min-height: 100vh; display: grid; place-items: center; background: var(--workspace-bg); } .login-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; } .login-card { background: var(--surface); border: 1px solid var(--border-color); border-radius: 14px; padding: 2.25rem 2rem; width: 380px; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-lg); } .login-card h1 { margin: 0; font-size: 1.35rem; font-weight: 700; } .login-subtitle { margin: 0; color: var(--text-muted); font-size: .9rem; } .login-card label { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; font-weight: 500; color: var(--text-muted); } .login-card label.inline { flex-direction: row; align-items: center; gap: .5rem; color: var(--text-primary); font-weight: 400; } .login-card input[type="email"], .login-card input[type="password"] { padding: .65rem .85rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: .95rem; transition: border-color .12s, box-shadow .12s; } .login-card input:focus { border-color: var(--secondary-blue); outline: none; box-shadow: 0 0 0 3px rgba(32, 150, 203, .15); } .login-card button[type="submit"] { background: var(--primary-blue); color: #fff; border: 0; padding: .75rem; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background .12s; } .login-card button[type="submit"]:hover { background: var(--primary-blue-dark); } .login-card button[type="submit"]:disabled { opacity: .6; cursor: progress; } .login-error { background: var(--status-new-bg); color: var(--status-new); border: 1px solid var(--status-new); padding: .55rem .8rem; border-radius: 6px; font-size: .85rem; } /* Branded email HTML (BrandedEmailTemplate.Wrap output) rendered inside a * .message-body wrapper via MarkupString. The email document carries its own * white-card layout + a hardcoded `` — but the * browser strips nested `` tags when the document is embedded in * another DOM, so the inner text color is lost. In dark mode that means * email body text inherits --text-primary (off-white) on the email's hardcoded * white background → unreadable. * * Re-apply the email's intended dark text on the inner presentation-table so * the email looks identical in dark and light mode (matches what the recipient * would see in their own email client). Elements with explicit inline color * (h1, strong, etc.) keep their inline values. */ .message-body table[role="presentation"] { color: #1f2937; } /* Sub-actions under the login form (Glemt adgangskode? · Opret bruger). * Sits centered below the primary submit button so the user has a clear * escape path without it competing with the main "Log ind"-CTA. */ .login-links { display: flex; justify-content: center; align-items: center; gap: .65rem; margin-top: .25rem; font-size: .82rem; } .login-links a { color: var(--secondary-blue); text-decoration: none; transition: color .12s; } .login-links a:hover { color: var(--primary-blue); text-decoration: underline; } .login-link-sep { color: var(--text-muted); } /* ── Culture switcher ────────────────────────────────────────────────── */ .culture-switcher, .culture-switcher-form select { padding: .35rem .55rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface); font-size: .82rem; cursor: pointer; } /* ── Gantt chart ─────────────────────────────────────────────────────── */ .gantt { background: var(--surface); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); } .gantt-header { display: flex; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color); align-items: center; background: var(--surface-alt); } .gantt-header strong { font-weight: 600; } .gantt-scroll { overflow-x: auto; } .gantt-svg { display: block; min-width: 100%; } .gantt-svg .day-cell { fill: #fff; stroke: var(--border-color); stroke-width: .5; cursor: pointer; } .gantt-svg .day-cell.weekend { fill: #f8fafc; } .gantt-svg .day-cell:hover { fill: #eef2ff; } .gantt-svg .day-label { font-size: 11px; fill: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; pointer-events: none; } .gantt-svg .day-label-num { font-size: 13px; fill: var(--text-primary); font-weight: 600; pointer-events: none; } .gantt-svg .user-cell { fill: var(--surface-alt); stroke: var(--border-color); stroke-width: .5; } .gantt-svg .user-name { font-size: 13px; fill: var(--text-primary); font-weight: 500; pointer-events: none; } .gantt-svg .capacity-label { font-size: 11px; pointer-events: none; font-weight: 600; } .gantt-svg .slot-bar { fill: var(--secondary-blue); cursor: pointer; transition: fill .12s; } .gantt-svg .slot:hover .slot-bar { fill: var(--primary-blue); } .gantt-svg .slot-label { font-size: 11px; fill: #fff; pointer-events: none; font-weight: 500; } .gantt-loading { padding: 2rem; text-align: center; color: var(--text-muted); } .planning-controls { display: flex; align-items: center; gap: .75rem; } /* Pagination + skeleton + spinner. */ .pagination { display: flex; gap: .75rem; align-items: center; justify-content: center; margin-top: 1rem; } .skeleton-table { display: flex; flex-direction: column; gap: .5rem; } .skeleton-row { height: 48px; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; border-radius: 6px; animation: shimmer 1.2s infinite linear; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .progress-track { height: 4px; background: var(--border-color); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; width: 30%; background: var(--secondary-blue); animation: progress-slide 1.4s infinite ease-in-out; } @keyframes progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } /* ── Audit ───────────────────────────────────────────────────────────── */ .audit-action { display: inline-block; padding: .15rem .55rem; border-radius: 4px; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .audit-action-create { background: var(--status-resolved-bg); color: var(--status-resolved); } .audit-action-update { background: var(--status-inprogress-bg); color: var(--status-inprogress); } .audit-action-delete { background: var(--status-new-bg); color: var(--status-new); } .audit-filters { display: grid; grid-template-columns: 200px 200px 220px 1fr; gap: 1rem; align-items: end; margin-bottom: 1rem; } .audit-filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; font-weight: 500; color: var(--text-muted); } .audit-filters input, .audit-filters select { padding: .55rem .75rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: .9rem; background: var(--input-bg); } .filters-actions { display: flex; gap: .5rem; align-items: end; } /* ── Conversation thread on TicketDetail ─────────────────────────────── */ .thread { display: flex; flex-direction: column; gap: 1rem; } .message { border: 1px solid var(--border-color); border-radius: 10px; padding: 1rem 1.25rem; background: var(--surface); } .message.inbound { background: #fefce8; border-color: #fde68a; border-left: 4px solid #d97706; } .message.outbound { background: #eff6ff; border-color: #bfdbfe; border-left: 4px solid #2563eb; margin-left: 2rem; /* nudge agent replies to the right so they read like a chat */ } :root[data-theme="dark"] .message.inbound { background: #422006; border-color: #92400e; } :root[data-theme="dark"] .message.outbound { background: #1e293b; border-color: #1d4ed8; } .message-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; font-size: .85rem; gap: .75rem; } .message-author { display: inline-flex; gap: .35rem; align-items: baseline; flex-wrap: wrap; } .message-time { white-space: nowrap; } .message-body { font-size: .9rem; line-height: 1.55; } .message-body p:first-child { margin-top: 0; } /* "Show older messages" toggle that expands collapsed thread tail. */ .show-older-btn { align-self: center; margin-top: .25rem; } /* Reply card pinned at the top of the communication area. The textarea is compact by default (4 rows) so the reply box doesn't dominate the page; it grows on focus via the existing rules. */ .reply-card { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; } .reply-card-header { margin: 0; display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; } .reply-card-header h2 { margin: 0; } /* The rich-text editor inside the reply card gets a slightly taller default so the agent has room to compose without immediately scrolling. */ .reply-card .quill-host { min-height: 220px; } /* Invoicing-pipeline badges in the Tickets grid + Billing dashboard. Color-coding from the workflow spec: Gray = NotInvoiced (default, agent hasn't flagged for billing yet) Yellow = ReadyForInvoicing (agent says it's done; admin review pending) Green = Invoiced (admin pushed to Uniconta) Blue = NonBillable (internal / warranty / goodwill — never billed) */ .invoicing-badge { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; border: 1px solid transparent; white-space: nowrap; } .invoicing-notinvoiced { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; } .invoicing-readyforinvoicing { background: #fef3c7; color: #92400e; border-color: #fcd34d; } .invoicing-invoiced { background: #dcfce7; color: #047857; border-color: #6ee7b7; } .invoicing-nonbillable { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; } .invoicing-internal { background: #dbeafe; color: #1e40af; border-color: #93c5fd; } :root[data-theme="dark"] .invoicing-notinvoiced { background: #374151; color: #d1d5db; } :root[data-theme="dark"] .invoicing-readyforinvoicing { background: #78350f; color: #fde68a; } :root[data-theme="dark"] .invoicing-invoiced { background: #064e3b; color: #6ee7b7; } :root[data-theme="dark"] .invoicing-nonbillable { background: #374151; color: #d1d5db; } :root[data-theme="dark"] .invoicing-internal { background: #1e3a8a; color: #bfdbfe; } /* Second KPI row — small spacer between the two rows so the visual rhythm matches existing dashboards instead of mashing them together. */ .kpi-grid + .kpi-grid-perf { margin-top: 1rem; } /* Period selector inside the 4th performance card. Compact pill control that fits the kpi-card vertical rhythm — not as wide as the schedule- mode toggle on Planning, but visually consistent. */ .kpi-card-controls .kpi-period-toggle { display: inline-flex; border: 1px solid var(--border-color); border-radius: 999px; padding: 2px; margin: .25rem 0; background: var(--surface); align-self: start; gap: 1px; } .kpi-card-controls .kpi-period-toggle button { border: none; background: transparent; color: var(--text-muted); padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 500; cursor: pointer; transition: background 0.12s, color 0.12s; } .kpi-card-controls .kpi-period-toggle button.active { background: #1e3a5f; color: #fff; } .kpi-card-controls .kpi-period-toggle button:hover:not(.active) { color: var(--text-primary); } /* ── Performance Overview cards ─────────────────────────────────────── */ .performance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1rem; margin-top: 1rem; } .performance-card { display: flex; flex-direction: column; gap: .9rem; padding: 1rem 1.1rem; } .performance-header { display: flex; align-items: baseline; gap: .75rem; margin: 0; } .performance-header h2 { margin: 0; font-size: 1rem; } .performance-table { width: 100%; border-collapse: collapse; font-size: .9rem; } .performance-table th, .performance-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--border-color); } .performance-table th { text-align: left; font-weight: 600; color: var(--text-muted); } .performance-table td.num, .performance-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .performance-table .period-label { font-weight: 500; } .performance-table .perf-compare-row td { background: rgba(0,0,0,.025); border-top: 1px dashed var(--border-color); } :root[data-theme="dark"] .performance-table .perf-compare-row td { background: rgba(255,255,255,.04); } .performance-table .perf-yoy-row td { font-size: .85rem; } .rate-warn { color: #b45309; font-weight: 600; } :root[data-theme="dark"] .rate-warn { color: #fbbf24; } /* Inline SVG-free monthly chart. Stacked bars: green at the bottom (billable) topped by amber (non-billable). Hover for the tooltip with exact totals. */ .performance-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 90px; align-items: end; margin-top: .5rem; } .chart-month { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; } .chart-stack { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: end; border-radius: 3px 3px 0 0; overflow: hidden; background: rgba(0,0,0,.04); } :root[data-theme="dark"] .chart-stack { background: rgba(255,255,255,.06); } .chart-billable { background: #16a34a; min-height: 0; } .chart-nonbillable { background: #f59e0b; min-height: 0; } .chart-month-label { font-size: .7rem; color: var(--text-muted); text-align: center; } /* "Default items" fieldset on the Users admin modal — separates the two item-pickers so an admin sees they're distinct fallback paths (customer work vs. internal work). The fieldset border is subtle so it reads as a visual group, not a heavy container. */ .modal .default-items-section { border: 1px dashed var(--border-color); border-radius: 8px; padding: .75rem 1rem; margin-top: .5rem; display: flex; flex-direction: column; gap: .85rem; } .modal .default-items-section legend { padding: 0 .35rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .modal .default-items-section label small { display: block; margin-bottom: 4px; } /* Capacity section in the user-edit modal — same dashed-border treatment as default-items-section, but with the embedded WeeklyScheduleEditor sitting below the utilisation-% field on its own line. */ .modal .capacity-section { border: 1px dashed var(--border-color); border-radius: 8px; padding: .75rem 1rem; margin-top: .5rem; display: flex; flex-direction: column; gap: .75rem; } .modal .capacity-section legend { padding: 0 .35rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .modal .capacity-section label small { display: block; margin-bottom: 4px; } .modal .capacity-section .schedule-block { margin-top: .25rem; border-top: 1px solid var(--border-color); padding-top: .75rem; } .modal .capacity-section .schedule-block h3 { margin: 0 0 .5rem; font-size: .9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .schedule-grid .schedule-row-off td { opacity: .6; } .schedule-grid .schedule-times { white-space: nowrap; } .schedule-grid .schedule-times input[type="time"] { width: 6.5rem; } .schedule-grid .schedule-sep { margin: 0 .35rem; color: var(--text-muted); } /* Capacity-exceeded cell in the planning grid — subtle red wash + slightly stronger left-border so the eye lands on it. Visible badge already carries the message; tint is the at-a-glance signal. */ .cal-day-cell.cal-cell-overloaded { background: rgba(239, 68, 68, .10); border-left: 3px solid #dc2626; } /* ── External Support panel ───────────────────────────────────────── Vendor / third-party thread on a ticket. Purple accent throughout so the eye can immediately tell vendor mails apart from the customer's own message thread (which uses the brand blue). */ .external-support-panel { display: flex; flex-direction: column; gap: .85rem; border-left: 3px solid #8b5cf6; /* violet-500 */ } .external-support-header { display: flex; align-items: center; gap: .5rem; } .external-support-header h2 { margin: 0; font-size: 1.1rem; display: inline-flex; align-items: center; gap: .45rem; } .ext-support-icon { color: #8b5cf6; font-size: 1.2em; } .ext-create-form { display: flex; flex-direction: column; gap: .65rem; max-width: 520px; } .ext-create-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; } .ext-create-form input { padding: .45rem .6rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--surface)); color: var(--text-primary); font: inherit; } .ext-case-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1.5rem; padding: .75rem 0; border-bottom: 1px solid var(--border-color); } .ext-case-field { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; } .ext-case-field strong { color: var(--text-primary); font-weight: 600; font-size: .95rem; } .ext-case-field .muted { color: var(--text-muted); } .ext-case-field input[type="text"] { padding: .35rem .55rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--input-bg, var(--surface)); color: var(--text-primary); font: inherit; max-width: 240px; } /* Compact inline edit buttons. btn-ghost.btn-sm — full ghost-button look but shrunk so the Edit / Save / Cancel cluster doesn't dwarf the value it's editing. */ .ext-case-field .btn-sm, .ext-composer-inline .btn-sm, .btn-ghost.btn-sm { height: 28px; padding: 0 .65rem; font-size: .8rem; color: var(--text-primary); } .ext-actions { display: flex; gap: .5rem; align-items: center; } .ext-timeline { display: flex; flex-direction: column; gap: .65rem; } .ext-message { border: 1px solid var(--border-color); border-left: 3px solid #8b5cf6; border-radius: 6px; padding: .65rem .85rem; background: rgba(139, 92, 246, .04); } :root[data-theme="dark"] .ext-message { background: rgba(139, 92, 246, .08); } .ext-message.ext-inbound { border-left-color: #a78bfa; /* lighter violet for inbound */ background: rgba(167, 139, 250, .06); } :root[data-theme="dark"] .ext-message.ext-inbound { background: rgba(167, 139, 250, .12); } .ext-message-meta { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .35rem; font-size: .82rem; } .ext-direction { color: #6d28d9; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: 0.04em; } :root[data-theme="dark"] .ext-direction { color: #c4b5fd; } .ext-message-subject { font-weight: 600; margin-bottom: .35rem; } .ext-message-body { font-size: .9rem; line-height: 1.5; } .ext-message-body pre { white-space: pre-wrap; word-break: break-word; margin: 0; font-family: inherit; } /* Customer picker — typeahead with "10005 · Deigaard Vinduer"-style rows. Inherits search-combo + service-item-picker base; the per-row layout below adds the account-number prefix in monospace. */ .customer-picker { position: relative; width: 100%; } .customer-picker .search-input { width: 100%; padding: .45rem .6rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--surface)); color: var(--text-primary); font: inherit; } .customer-picker .search-input:focus { outline: 2px solid var(--primary-blue); outline-offset: 1px; } .customer-picker .search-results { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40; max-height: 320px; overflow-y: auto; margin: 0; padding: .25rem; list-style: none; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: var(--shadow-md); } .customer-picker .search-results li { display: flex; align-items: baseline; gap: .5rem; padding: .4rem .55rem; border-radius: 4px; cursor: pointer; color: var(--text-primary); } .customer-picker .search-results li:hover, .customer-picker .search-results li.highlighted { background: var(--surface-hover); } .customer-picker-account { min-width: 64px; color: var(--text-muted); font-size: .85rem; } .customer-picker-sep { color: var(--text-muted); } /* ── Projects (hovedprojekt / underprojekt-træ) ───────────────────── Indented rows render the parent → child hierarchy as a list. Folder icon for parents with children, doc icon with ↳ arrow for sub-projects. All colors come from theme variables so dark mode stays readable. */ .project-tree { display: flex; flex-direction: column; gap: 2px; } .project-row { display: flex; align-items: center; gap: .75rem; padding: .65rem .85rem; border-radius: 6px; cursor: pointer; transition: background .12s; color: var(--text-primary); } .project-row:hover { background: var(--surface-hover); } .project-row-icon { font-size: 1rem; min-width: 32px; text-align: center; } /* Chevron toggle for collapsing sub-project trees. Always reserves the same width so rows with and without children align vertically. */ .project-row-chevron { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; color: var(--text-muted); transition: color .12s, background .12s; } .project-row-chevron:hover { background: var(--surface-hover); color: var(--text-primary); } .chevron-closed, .chevron-open { display: inline-block; transition: transform .15s ease; font-size: .85rem; } .chevron-open { transform: rotate(90deg); } /* Tickets table card on the project-detail page. */ .project-tickets-card { display: flex; flex-direction: column; gap: .75rem; } .project-tickets-header { display: flex; align-items: center; gap: .5rem; } .project-tickets-header h2 { margin: 0; } /* Sub-projects card on the project-detail page — same layout/styling as the tickets card so the two sections read as siblings. Table uses the shared .ticket-table class which already handles dark/light theme via the --surface/--text-primary variables. */ .sub-projects-card { display: flex; flex-direction: column; gap: .75rem; } .sub-projects-header { display: flex; align-items: center; gap: .5rem; } .sub-projects-header h2 { margin: 0; } .sub-projects-table td .mono { color: var(--text-primary); } /* New (richer) sub-projects layout: section is a flex-column of individual sub-project cards. Each card uses --surface-alt for background so it contrasts against the parent's --surface, plus a faint left border to reinforce the "this is a child" visual hierarchy. */ .sub-projects-section { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; } .sub-project-card { background: var(--surface-alt); border-left: 3px solid var(--accent, #3b82f6); display: flex; flex-direction: column; gap: .5rem; } .sub-project-card-header { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; } .sub-project-card-title { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 240px; min-width: 0; } .sub-project-card-title h3 { margin: 0; color: var(--text-primary); font-weight: 600; } .sub-project-card-total { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; color: var(--text-primary); font-size: .95rem; } .sub-project-description { color: var(--text-secondary); margin: 0; line-height: 1.45; } .sub-project-tickets { margin-top: .25rem; font-size: .85rem; } /* Main-project total line — sits just above the parent's tickets table so the per-project breakdown is visible before the row-by-row data. */ .project-total-line { margin: 0 0 .25rem 0; color: var(--text-primary); } /* Sub-section header inside the settings-submenu. Visually groups related admin items (e.g. "Fakturering" → Faktureringskladde, future invoice lists) without claiming a click-target. */ .settings-section-header { color: var(--text-secondary); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: .85rem 1rem .25rem 1rem; margin-top: .25rem; border-top: 1px solid var(--border-color); } /* Billing journal (Faktureringskladde) — color-coded badges for the BillingStatus + JournalLineStatus columns. Each colour follows the same hex palette as the other status pills in the app so the visual vocabulary stays consistent across pages. */ .billing-badge, .journal-badge { display: inline-block; padding: .2rem .6rem; border-radius: 9999px; font-size: .78rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } .billing-billable { background: rgba(22, 163, 74, 0.15); color: #16a34a; } .billing-nonbillable { background: rgba(234, 88, 12, 0.15); color: #ea580c; } .billing-internal { background: rgba(59, 130, 246, 0.18); color: #2563eb; } [data-theme="dark"] .billing-billable { background: rgba(74, 222, 128, 0.18); color: #4ade80; } [data-theme="dark"] .billing-nonbillable { background: rgba(251, 146, 60, 0.2); color: #fb923c; } [data-theme="dark"] .billing-internal { background: rgba(96, 165, 250, 0.2); color: #60a5fa; } .journal-pending { background: rgba(234, 179, 8, 0.18); color: #ca8a04; } .journal-approved { background: rgba(22, 163, 74, 0.15); color: #16a34a; } .journal-rejected { background: rgba(220, 38, 38, 0.15); color: #dc2626; } .journal-synced { background: rgba(100, 116, 139, 0.18); color: #475569; } [data-theme="dark"] .journal-pending { background: rgba(250, 204, 21, 0.2); color: #facc15; } [data-theme="dark"] .journal-approved { background: rgba(74, 222, 128, 0.18); color: #4ade80; } [data-theme="dark"] .journal-rejected { background: rgba(248, 113, 113, 0.18); color: #f87171; } [data-theme="dark"] .journal-synced { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; } .billing-total { display: inline-block; margin-right: 1.5rem; font-size: .9rem; color: var(--text-primary); } .billing-total strong { font-size: 1rem; } .billing-journal-table .billing-status-select { color: var(--text-primary); background-color: var(--input-bg, var(--surface)); } /* Project search-picker used in the Faktureringskladde "Tilføj linje" modal. Results are flat clickable rows below the search input; each row shows ProjectNumber, Name, and Customer for disambiguation. */ .project-picker-results { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; margin-top: .25rem; max-height: 280px; overflow-y: auto; background: var(--surface); } .project-picker-row { display: flex; align-items: baseline; gap: .65rem; padding: .55rem .75rem; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; width: 100%; } .project-picker-row:last-child { border-bottom: none; } .project-picker-row:hover { background: var(--surface-hover); } .project-picker-row-active { background: var(--accent-orange); color: #1a1a1a; box-shadow: inset 3px 0 0 var(--primary-blue, #1e3a5f); } .project-picker-row-active .muted { color: rgba(26, 26, 26, 0.7); } .project-picker-selected { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); } /* Internal-shadow project markers — distinct blue palette so admins can tell at-a-glance whether they're looking at the external/customer side (default styling) or the internal copy. Mirrors the .billing-internal badge's hex picks for a coherent vocabulary across the app. */ .project-internal-badge { display: inline-block; margin-left: .5rem; padding: .15rem .55rem; border-radius: 9999px; background: rgba(59, 130, 246, 0.18); color: #2563eb; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; } [data-theme="dark"] .project-internal-badge { background: rgba(96, 165, 250, 0.2); color: #60a5fa; } .project-internal-link { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; margin-right: .5rem; border-radius: 9999px; background: rgba(59, 130, 246, 0.12); color: #2563eb; text-decoration: none; font-size: .85rem; font-weight: 500; } .project-internal-link:hover { background: rgba(59, 130, 246, 0.22); text-decoration: underline; } [data-theme="dark"] .project-internal-link { background: rgba(96, 165, 250, 0.18); color: #93c5fd; } /* Newsletter / news-group module — pill-style group picker reused by the admin send-page AND the customer-edit modal. The pill uses --surface-alt for background so it contrasts against the modal/card; checked state switches to the brand-blue tint. */ .news-group-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0; } .news-group-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border-radius: 9999px; background: var(--surface-alt); border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; user-select: none; transition: background-color .12s ease, border-color .12s ease; } .news-group-pill input[type="checkbox"] { margin: 0; accent-color: var(--accent, #3b82f6); } .news-group-pill:hover { background: var(--surface-hover); } .news-group-pill.checked { background: rgba(59, 130, 246, 0.15); border-color: var(--accent, #3b82f6); } .news-group-pill-name { font-weight: 500; } /* Newsletter compose section. The HTML body is now a Quill WYSIWYG editor; the dark-mode overrides below give it the same surface/text contrast as every other input in the app. */ .newsletter-section { display: flex; flex-direction: column; gap: .75rem; } .newsletter-editor-label > span { display: block; margin-bottom: .25rem; color: var(--text-primary); } .quill-host { min-height: 280px; background: var(--input-bg, var(--surface)); color: var(--text-primary); } /* Quill (snow theme) — light defaults baked into the vendor CSS. We override colours via CSS variables so the editor inherits dark/light theming automatically without forking the upstream stylesheet. */ .ql-toolbar.ql-snow { background: var(--surface-alt); border: 1px solid var(--border-color) !important; border-bottom-color: var(--border-color) !important; } .ql-container.ql-snow { background: var(--input-bg, var(--surface)); border: 1px solid var(--border-color) !important; border-top: none !important; min-height: 240px; color: var(--text-primary); } .ql-editor { color: var(--text-primary); min-height: 240px; } .ql-editor.ql-blank::before { color: var(--text-secondary); font-style: normal; } .ql-toolbar.ql-snow .ql-stroke, .ql-toolbar.ql-snow .ql-fill { stroke: var(--text-primary); } .ql-toolbar.ql-snow .ql-fill { fill: var(--text-primary); } .ql-toolbar.ql-snow .ql-picker-label, .ql-toolbar.ql-snow .ql-picker-item { color: var(--text-primary); } .ql-toolbar.ql-snow button:hover .ql-stroke, .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--accent, #3b82f6); } .ql-toolbar.ql-snow button:hover .ql-fill, .ql-toolbar.ql-snow button.ql-active .ql-fill { fill: var(--accent, #3b82f6); } .ql-snow .ql-picker-options { background: var(--surface) !important; border-color: var(--border-color) !important; } .newsletter-actions { display: flex; align-items: center; gap: 1rem; padding: 1rem; } /* Resource-utilization overview — dense per-week × per-employee matrix. The table uses the same --surface palette as the rest of the app so dark mode works out of the box; zebra-striping kicks in on tbody rows that AREN'T department-header or total rows. */ .utilization-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; padding: .75rem 1rem; } .utilization-filter label { display: flex; flex-direction: column; gap: .15rem; } .utilization-filter input[type="date"] { color: var(--text-primary); background-color: var(--input-bg, var(--surface)); } .utilization-recurring { flex-direction: row !important; align-items: center; gap: .5rem; } .utilization-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface); } .utilization-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; color: var(--text-primary); } .utilization-table th, .utilization-table td { padding: .5rem .65rem; text-align: left; border-bottom: 1px solid var(--border-color); color: var(--text-primary); } .utilization-table th.num, .utilization-table td.num { text-align: right; } .utilization-table thead th { background: var(--surface-alt); color: var(--text-secondary); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; position: sticky; top: 0; z-index: 2; } .utilization-week-header { text-align: center !important; border-left: 1px solid var(--border-color); } .utilization-emp-col { min-width: 180px; } .utilization-emp-name { color: var(--text-primary); font-weight: 500; } /* Zebra stripes — only on regular employee rows (not dept-header / total). */ .utilization-table tbody tr:not(.utilization-dept-row):not(.utilization-total-row):nth-child(even) { background: var(--surface-alt); } .utilization-table tbody tr:hover:not(.utilization-dept-row) { background: var(--surface-hover); } .utilization-dept-row td { background: var(--surface-hover); color: var(--text-primary); padding: .55rem 1rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; } .utilization-total-row td { background: var(--surface-alt); border-top: 2px solid var(--border-color); color: var(--text-primary); } /* Balance colours — green for under-capacity, red for over-capacity. The hex picks are tuned for both themes: AA-contrast on light --surface and AA-contrast on dark --surface (#1e2740). */ .balance-positive { color: #16a34a; font-weight: 600; } .balance-negative { color: #dc2626; font-weight: 600; } [data-theme="dark"] .balance-positive { color: #4ade80; } [data-theme="dark"] .balance-negative { color: #f87171; } /* Icon + label combo used for Assigned and Planlagt cells. Keeps both pieces aligned on one line, with the icon sitting at currentColor so it follows the cell's text colour — that gives us proper dark-mode contrast without per-mode overrides. */ .ticket-cell-meta { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-primary); font-size: .85rem; line-height: 1.2; white-space: nowrap; } .ticket-cell-meta.muted { color: var(--text-secondary); } .cell-icon { width: 1rem; height: 1rem; flex-shrink: 0; stroke-linecap: round; stroke-linejoin: round; opacity: .85; } /* Ticket subject as a link. Stays --text-primary (white in dark mode, near-black in light mode) so it reads as table content, but the dotted underline + colour-shift on hover signals it's clickable. */ .ticket-subject-link { color: var(--text-primary); text-decoration: none; border-bottom: 1px dotted var(--text-secondary); transition: color .12s ease, border-color .12s ease; } .ticket-subject-link:hover, .ticket-subject-link:focus-visible { color: var(--accent, #3b82f6); border-bottom-color: var(--accent, #3b82f6); outline: none; } /* One-line description preview below the ticket subject. Truncates with ellipsis when it overflows; the full text is in the title-attribute so the browser's native tooltip renders on hover. Uses --text-muted so it reads as secondary content next to the subject anchor without competing for attention. Inherits theme-aware colours from the CSS variables. */ .ticket-description-preview { color: var(--text-muted); font-size: .85rem; margin-top: .15rem; max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; } /* Uniconta-medarbejder badge under the employee name in the billing journal grid. Tiny mono pill so the agent can confirm the link is set without opening the user-admin screen. Missing variant is muted-red so un-linked rows surface visibly before sync. */ .employee-uniconta-badge { display: inline-block; margin-top: .15rem; padding: 1px 6px; border-radius: 4px; background: var(--surface-alt); color: var(--text-muted); border: 1px solid var(--border-color); font-size: .72rem; cursor: help; } .employee-uniconta-missing { color: #c0392b; font-style: italic; margin-top: .15rem; cursor: help; } /* ---------- Area tags + filter-tabs ---------- */ /* Pill rendered on Kanban + sprint cards. Areas have no color of their own so we use a neutral surface-alt with border — the pill marks "operating region" (Nordjylland / Sjælland / Værksted / Service), not a brand. */ .area-tag { display: inline-block; padding: 2px 10px; font-size: .78rem; font-weight: 600; color: var(--text-primary); background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: 10px; letter-spacing: .02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .area-tag-sm { padding: 1px 8px; font-size: .7rem; align-self: flex-start; margin-top: .15rem; } /* Area-filter tabs above the sprint backlog. "Alle områder" is the first tab — when active the backlog returns every area. */ .product-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border-color); } .product-tab { background: var(--surface-alt); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 18px; padding: 4px 12px; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; transition: background .12s, border-color .12s; } .product-tab:hover { background: var(--surface-hover); } .product-tab.active { background: var(--primary-blue, #1e3a5f); color: #fff; border-color: var(--primary-blue, #1e3a5f); } /* ---------- Curated-backlog badge + quick-toggle ---------- */ /* Muted purple pill — distinguishable from green Active / yellow Internal badges. Uses inline-block so it tucks into a row of inline content (subject line, h1 with title) without breaking the wrap. Dark-mode safe: semi-transparent fill on top of accent-purple so it stays readable on both --surface (light) and --surface (dark). */ .backlog-badge { display: inline-block; margin-left: .4rem; padding: 1px 8px; font-size: .72rem; font-weight: 600; color: #fff; background: #7c3aed; border-radius: 10px; letter-spacing: .02em; vertical-align: middle; cursor: help; } /* "In backlog"-state for the quick-toggle action-icon. Highlights the icon so the row visually anchors the state at a glance. */ .action-icon.action-icon-backlog-on { color: #7c3aed; } .action-icon.action-icon-backlog-on:hover { background: rgba(124, 58, 237, .12); } .btn-backlog-on { color: #7c3aed; border-color: #7c3aed; } /* ---------- Sprint planning board ---------- */ .sprint-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; /* stretch (ikke flex-start) så alle kolonner får samme højde — ellers krymper en tom kolonne til indholdet og drop-targetet bliver bittesmå. min-height på selve boardet sikrer at selv hvis ALLE kolonner er tomme får drop-zonen en brugbar højde. */ align-items: stretch; min-height: calc(100vh - 220px); } .sprint-column { flex: 0 0 320px; background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: 8px; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; max-height: calc(100vh - 200px); min-height: 420px; } .sprint-column.drag-over { border-color: var(--accent, #3b82f6); box-shadow: 0 0 0 2px var(--accent, #3b82f6); } .sprint-backlog { background: var(--surface); } .sprint-column-header { display: flex; flex-direction: column; gap: .35rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border-color); } .sprint-column-header h2 { margin: 0; font-size: 1.05rem; color: var(--text-primary); } .sprint-column-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .sprint-count { color: var(--text-muted); font-weight: 400; font-size: .9rem; } .sprint-column-meta { font-variant-numeric: tabular-nums; } .sprint-column-actions { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .25rem; } .sprint-column-body { display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; flex: 1; /* Tall min-height so an empty column still presents a big drop target (~220px). Without this the column shrinks to the empty-text line height, making "Træk opgaver hertil" almost impossible to hit. */ min-height: 220px; padding: .25rem; border-radius: 6px; } /* Empty-state drop hint — large dashed box that fills the column body so the drop target matches the visual cue. Brightens on .drag-over to confirm the column will accept the dragged card. */ .sprint-empty-dropzone { flex: 1; width: 100%; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; min-height: 300px; padding: 1.5rem; border: 2px dashed var(--border-color); border-radius: 8px; color: var(--text-muted); font-size: .95rem; font-weight: 500; text-align: center; pointer-events: none; /* events fall through to the parent dropzone */ transition: border-color .12s, background .12s, color .12s; } .sprint-empty-dropzone svg { width: 40px; height: 40px; opacity: .55; } .sprint-column.drag-over .sprint-empty-dropzone { border-color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent, #3b82f6) 10%, transparent); color: var(--text-primary); } .sprint-status { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 10px; color: #fff; } .sprint-status-draft { background: #6b7280; } .sprint-status-active { background: #1e3a8a; } .sprint-status-completed { background: #166534; } .sprint-capacity { display: flex; flex-direction: column; gap: .2rem; } .sprint-capacity-bar { height: 6px; background: var(--border-color); border-radius: 3px; overflow: hidden; } .sprint-capacity-fill { height: 100%; transition: width .15s ease-out; } .sprint-capacity-fill.ok { background: #16a34a; } .sprint-capacity-fill.near { background: #ea580c; } .sprint-capacity-fill.over { background: #dc2626; } .sprint-card { background: var(--surface); border: 1px solid var(--border-color); border-left: 4px solid var(--text-muted); border-radius: 6px; padding: .55rem .65rem; color: var(--text-primary); cursor: grab; display: flex; flex-direction: column; gap: .35rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .sprint-card:active { cursor: grabbing; } .sprint-card.priority-low { border-left-color: #94a3b8; } .sprint-card.priority-normal { border-left-color: #3b82f6; } .sprint-card.priority-high { border-left-color: #f59e0b; } .sprint-card.priority-urgent { border-left-color: #dc2626; } .sprint-card-header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .sprint-card-subject { color: var(--text-primary); text-decoration: none; font-weight: 600; line-height: 1.3; border-bottom: 1px dotted var(--text-secondary); } .sprint-card-subject:hover { color: var(--accent, #3b82f6); } .sprint-card-customer { font-size: .8rem; } .sprint-card-footer { display: flex; gap: .5rem; align-items: center; margin-top: .25rem; } .sprint-card-assignee { flex: 1; font-size: .8rem; padding: 3px 6px; background: var(--input-bg); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; } .sprint-card-hours { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); font-size: .85rem; } /* ---------- Tjekliste (checklist) panel + template editor ---------- */ .checklist-card { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; } .checklist-card-header { display: flex; align-items: baseline; gap: .75rem; } .checklist-card-header h2 { margin: 0; } .checklist-progress-summary { color: var(--text-muted); font-size: .9rem; font-variant-numeric: tabular-nums; } .checklist-template-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .checklist-template-row select { flex: 1; min-width: 220px; } .checklist-progress-bar { width: 100%; height: 6px; background: var(--surface-alt); border-radius: 4px; overflow: hidden; } .checklist-progress-fill { height: 100%; background: var(--accent, #3b82f6); transition: width .15s ease-out; } .checklist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .checklist-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--surface-alt); border-radius: 6px; border: 1px solid var(--border-color); } .checklist-item-label { display: flex; align-items: center; gap: .65rem; cursor: pointer; color: var(--text-primary); } .checklist-item-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent, #3b82f6); } .checklist-item-text { font-size: .95rem; } .checklist-item-meta { text-align: right; white-space: nowrap; } .checklist-item-delete { color: var(--text-muted); padding: .25rem .5rem; } .checklist-item-done .checklist-item-text { text-decoration: line-through; color: var(--text-muted); } .checklist-add-row { display: flex; gap: .5rem; margin-top: .25rem; } .checklist-add-row input { flex: 1; } /* Template-editor (admin page) — same dark-aware variables. */ .checklist-editor { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; } .checklist-editor-header h3 { margin: 0; font-size: 1rem; } .checklist-editor-list { list-style: decimal; margin: 0; padding-left: 1.5rem; display: flex; flex-direction: column; gap: .35rem; } .checklist-editor-row { display: flex; align-items: center; gap: .5rem; } .checklist-editor-row input[type="text"] { flex: 1; } .checklist-editor-actions { display: flex; gap: .25rem; } /* Read-only "Beskrivelse"-card on the ticket detail page. Renders Quill- produced HTML (bold/lists/inline images) via MarkupString — these styles bring it in line with the rest of the page's typography and ensure embedded images don't overflow the card. */ .ticket-description-card { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; } .ticket-description-header { margin: 0; } .ticket-description-header h2 { margin: 0; } .ticket-description-body { color: var(--text-primary); line-height: 1.55; } .ticket-description-body p { margin: 0 0 .75rem; } .ticket-description-body p:last-child { margin-bottom: 0; } .ticket-description-body ul, .ticket-description-body ol { margin: 0 0 .75rem 1.25rem; padding: 0; } .ticket-description-body img { max-width: 100%; height: auto; border-radius: 6px; } .ticket-description-body a { color: var(--accent, #3b82f6); } .ticket-description-body h1, .ticket-description-body h2, .ticket-description-body h3 { color: var(--text-primary); margin: .25rem 0 .5rem; } /* Grand-total tile in the meta-grid — emphasised so it reads as a summary stat rather than just another label. */ .project-meta-grandtotal strong { color: var(--text-primary); font-size: 1.05rem; } .project-row-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; flex: 1; min-width: 0; } .project-row-name { color: var(--text-primary); } .project-row-tickets { white-space: nowrap; } .project-close-hint { display: inline-flex; align-items: center; gap: .25rem; padding: 2px 8px; border-radius: 4px; background: rgba(34, 197, 94, .18); color: #047857; font-size: .75rem; font-weight: 600; white-space: nowrap; } :root[data-theme="dark"] .project-close-hint { color: #6ee7b7; } /* Project Detail page meta-card. Mirror the ticket-meta grid so the two pages feel consistent — same column count, same gutters. */ .project-meta-card { display: flex; flex-direction: column; gap: .75rem; } .project-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem 1.5rem; } .project-meta-grid > div { display: flex; flex-direction: column; gap: .15rem; } .project-meta-grid strong { color: var(--text-primary); } .project-description { margin: 0; padding: .75rem; border-radius: 6px; background: var(--surface-alt); color: var(--text-primary); white-space: pre-wrap; } .project-close-hint-banner { color: var(--text-primary); } /* Blocked-project visual treatment — red warning so a Spærret project reads as "do not use" at a glance. Used both on list rows (chip) and on TicketDetail (the historical link gets the same chip beside it). */ .project-blocked-badge { display: inline-flex; align-items: center; gap: .25rem; padding: 3px 9px; border-radius: 4px; background: rgba(239, 68, 68, .18); color: #b91c1c; font-size: .75rem; font-weight: 700; white-space: nowrap; } :root[data-theme="dark"] .project-blocked-badge { color: #fca5a5; } .project-blocked-banner { display: flex; flex-direction: column; gap: .25rem; color: var(--text-primary); } /* Project linkage on TicketDetail — inline row with link + actions. */ .project-link-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .35rem 0; } .project-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-primary); text-decoration: none; padding: 2px 6px; border-radius: 4px; } .project-link:hover { background: var(--surface-hover); } .project-icon { font-size: 1.1em; } .project-locked-hint { font-size: .9rem; opacity: .7; margin-left: .35rem; } /* ── Leverandør Support overview grid ───────────────────────────────── Whole-row tint when the vendor is overdue for a reply. Variable-controlled tones so dark/light both stay legible. Cell-level red/yellow text on the timer columns reinforces the urgency for users who skim. */ .smart-grid tr.ext-row-stale-yellow td, .smart-grid tr.ext-row-stale-yellow { background: rgba(245, 158, 11, .14); } .smart-grid tr.ext-row-stale-yellow:hover td { background: rgba(245, 158, 11, .22); } .smart-grid tr.ext-row-stale-red td, .smart-grid tr.ext-row-stale-red { background: rgba(239, 68, 68, .14); } .smart-grid tr.ext-row-stale-red:hover td { background: rgba(239, 68, 68, .22); } .ext-stale-yellow { color: #b45309; font-weight: 600; } .ext-stale-red { color: #b91c1c; font-weight: 700; } :root[data-theme="dark"] .ext-stale-yellow { color: #fbbf24; } :root[data-theme="dark"] .ext-stale-red { color: #fca5a5; } .ext-overview-ticket-cell, .ext-overview-vendor-cell { display: flex; flex-direction: column; gap: 2px; } /* Inline composer inside the ExternalSupportPanel. All inputs follow the theme variables so dark mode shows the navy-input-bg + light text, never white-on-white. Resizable textarea so the technician can grow the body when drafting longer requests. */ .ext-composer-inline { display: flex; flex-direction: column; gap: .55rem; padding: .85rem 1rem; border: 1px solid var(--border-color); border-left: 3px solid #8b5cf6; border-radius: 8px; background: var(--surface-alt); } .ext-composer-inline h3 { margin: 0 0 .25rem; font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-primary); } .ext-composer-inline label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--text-primary); } .ext-composer-inline label > span { font-weight: 500; color: var(--text-primary); } .ext-composer-inline input[type="email"], .ext-composer-inline input[type="text"], .ext-composer-inline textarea { padding: .55rem .7rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg); color: var(--text-primary); font: inherit; } .ext-composer-inline textarea { resize: vertical; min-height: 130px; font-family: inherit; line-height: 1.5; } .ext-composer-inline input:focus, .ext-composer-inline textarea:focus { outline: 2px solid #8b5cf6; outline-offset: -1px; } /* Quick-View modal — opens from a Resource-Weekly cell click and lists the tickets planned for that (employee, day) tuple. Compact list, no form. */ .modal.quick-view-modal { max-width: 560px; min-width: 360px; } .quick-view-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; max-height: 380px; overflow-y: auto; } .quick-view-item { display: grid; grid-template-columns: 110px 1fr auto; gap: .75rem; align-items: baseline; padding: .55rem .7rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface-alt); cursor: pointer; transition: background .12s; } .quick-view-item:hover { background: var(--surface-hover); } .qv-time { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; color: var(--text-muted); } .qv-title { font-size: .9rem; } .qv-hours { font-weight: 600; font-size: .8rem; color: var(--text-muted); } /* Hint line under the time-tracking item picker. Renders the fallback rule when a default exists, or an amber warning when the user has no default AND hasn't picked anything (otherwise the entry would be saved with no item). Matches the small-muted typography used throughout the app. */ .item-hint { display: block; margin-top: 4px; font-size: .8rem; line-height: 1.3; } .item-hint .rate-warn { color: #b45309; font-weight: 500; } /* ServiceItemPicker — typeahead dropdown for Uniconta service items. Reuses the .search-combo / .search-results vocabulary from the customer typeahead so styling stays consistent. The wrapper is full-width inside form labels (which give it their grid cell). */ .service-item-picker { position: relative; width: 100%; } .service-item-picker .search-input { width: 100%; padding: .45rem .6rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--surface)); color: var(--text-primary); font: inherit; } .service-item-picker .search-results { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 40; max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.12)); } .service-item-picker .search-results li { padding: .35rem .5rem; border-radius: 4px; cursor: pointer; display: flex; gap: 4px; align-items: baseline; } .service-item-picker .search-results li:hover, .service-item-picker .search-results li.highlighted { background: rgba(30, 58, 95, .12); } :root[data-theme="dark"] .service-item-picker .search-results li:hover, :root[data-theme="dark"] .service-item-picker .search-results li.highlighted { background: rgba(147, 197, 253, .15); } /* SmartDateInput — shorthand-aware text input that replaces native for keyboard-heavy data entry. Renders inline matching the rest of the form controls. */ .smart-date-input { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--surface)); color: var(--text-primary); font: inherit; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; } .smart-date-input:focus { outline: none; border-color: #1e3a5f; box-shadow: 0 0 0 2px rgba(30, 58, 95, .15); } .smart-date-input::placeholder { color: var(--text-muted); opacity: .7; } /* Schedule-window cells in the Tickets grid. The end-date variant flags any planning window that ended before "now" while the ticket is still open — orange so it draws the eye without screaming the way red does. */ .schedule-cell { white-space: nowrap; } .schedule-overdue { color: #b45309; font-weight: 600; border-bottom: 2px dotted currentColor; } :root[data-theme="dark"] .schedule-overdue { color: #fbbf24; } /* ── Live "active timer" indicator (grid + dashboard) ──────────────── */ .live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); animation: live-pulse 2s ease-in-out infinite; vertical-align: middle; } @keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } } .live-indicator { display: inline-flex; align-items: center; margin-right: .35rem; cursor: help; } .ticket-number-cell { display: inline-flex; align-items: center; gap: .15rem; white-space: nowrap; } /* "Currently Working" widget on the Dashboard. */ .currently-working { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: .65rem; } .currently-working-header { display: flex; align-items: center; justify-content: space-between; margin: 0; } .currently-working-header h2 { margin: 0; display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; } .active-timers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; } .active-timer-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(200px, 2fr) auto; align-items: center; gap: 1rem; padding: .5rem .75rem; border-radius: 6px; text-decoration: none; color: var(--text-primary); transition: background 0.12s; } .active-timer-row:hover { background: rgba(22, 163, 74, 0.08); } .active-timer-user { display: inline-flex; align-items: center; gap: .5rem; } .active-timer-elapsed { font-weight: 600; color: #047857; font-variant-numeric: tabular-nums; } :root[data-theme="dark"] .active-timer-elapsed { color: #6ee7b7; } @media (max-width: 720px) { .active-timer-row { grid-template-columns: 1fr; gap: .25rem; } } /* ── Time Tracking card on TicketDetail ─────────────────────────────── */ .time-tracking-card { display: flex; flex-direction: column; gap: 1rem; } .time-tracking-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; } .time-tracking-header h2 { margin: 0; } .time-tracking-total strong { font-size: 1rem; color: var(--text-primary); } .time-tracking-total strong.time-over { color: #b91c1c; } :root[data-theme="dark"] .time-tracking-total strong.time-over { color: #fca5a5; } /* Active-timer block — big monospace HH:MM:SS + Stop button. */ .timer-active { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 8px; } :root[data-theme="dark"] .timer-active { background: #064e3b; border-color: #10b981; } .timer-display { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 2rem; font-weight: 700; color: #065f46; letter-spacing: 0.05em; } :root[data-theme="dark"] .timer-display { color: #6ee7b7; } .timer-stop-btn { background: #b91c1c; border-color: #b91c1c; } .timer-stop-btn:hover { background: #991b1b; } .timer-idle { display: flex; align-items: center; gap: 1rem; padding: .5rem 0; } /* Manual-entry inline form — Hours + Date + Item + Description + Mark-internal + Tilføj. Six cells in one grid row; baseline-aligned via align-items: end so the labels stack consistently above the input row. The Item-hint lives on a *separate* sibling div so its height never pushes the row out of sync. */ .manual-entry h3, .time-log h3 { margin: .25rem 0 .65rem; font-size: .9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-primary); } .manual-entry-row { display: grid; grid-template-columns: minmax(95px, 110px) /* Timer */ minmax(150px, 180px) /* Dato */ minmax(220px, 1.2fr) /* Ydelse — typeahead */ minmax(220px, 1.5fr) /* Beskrivelse */ auto /* Marker som intern tid */ auto; /* + Tilføj */ gap: .75rem 1rem; align-items: end; } .manual-entry-row .form-cell { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .manual-entry-row .form-label { font-size: .8rem; font-weight: 500; color: var(--text-primary); line-height: 1.2; } /* Force every input variant to the same height + padding so the row's baseline is uniform regardless of which control occupies a cell. */ .manual-entry-row .form-input, .manual-entry-row .smart-date-input, .manual-entry-row .service-item-picker .search-input { height: 38px; box-sizing: border-box; width: 100%; padding: .45rem .6rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--surface)); color: var(--text-primary); font: inherit; } .manual-entry-row .form-cell-checkbox { display: inline-flex; align-items: center; gap: .5rem; height: 38px; padding: 0 .65rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg, var(--surface)); font-size: .85rem; cursor: pointer; user-select: none; white-space: nowrap; } .manual-entry-row .form-cell-checkbox input[type="checkbox"] { margin: 0; } .manual-entry-row .form-cell-btn { height: 38px; padding: 0 1.1rem; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; } .manual-entry-row .form-cell-btn .add-icon { font-size: 1.1em; line-height: 1; font-weight: 600; } /* Hint / warning under the Ydelse column — separate row so it can grow without nudging the input baseline above it. */ .item-hint-line { margin-top: .55rem; font-size: .82rem; line-height: 1.35; } .item-hint-line .rate-warn { color: #b45309; font-weight: 500; } /* Idle (no active timer) — bigger Start button and breathable hint. */ .timer-idle { padding: 1rem 1.25rem; background: rgba(30, 58, 95, .04); border: 1px dashed var(--border-color); border-radius: 8px; display: flex; flex-direction: column; gap: .65rem; align-items: flex-start; } :root[data-theme="dark"] .timer-idle { background: rgba(255, 255, 255, .03); } .btn-primary.btn-large { font-size: 1rem; padding: .65rem 1.4rem; border-radius: 8px; } .timer-idle-hint { margin: 0; font-size: .9rem; line-height: 1.4; max-width: 560px; } /* Wrap to a 2-row layout on narrow viewports so cells don't squeeze below readable widths. */ @media (max-width: 1100px) { .manual-entry-row { grid-template-columns: 1fr 1fr; } .manual-entry-row .form-cell-btn, .manual-entry-row .form-cell-checkbox { grid-column: span 2; justify-self: start; } } @media (max-width: 540px) { .manual-entry-row { grid-template-columns: 1fr; } .manual-entry-row .form-cell-btn, .manual-entry-row .form-cell-checkbox { grid-column: auto; } } .time-log table.ticket-table { width: 100%; } .time-log tr.running { background: rgba(34, 197, 94, 0.1); } /* Billable / non-billable badges. Used both in the employee time log (small breakdown line under the duration) and in the billing dashboard sub-tables. Color matches the invoicing-status palette so the eye reads them as the same vocabulary. */ .billable-tag { color: #047857; font-weight: 600; } .nonbillable-tag { color: #b45309; font-weight: 600; } .internal-tag { color: #1e40af; font-weight: 600; } /* Dark-mode overrides — pump the saturation up so small tag text on a navy background reads at a glance. Light-mode shades were too dark for the navy surface; mint / amber / sky pop without looking neon. */ :root[data-theme="dark"] .billable-tag { color: #4ade80; font-weight: 700; } :root[data-theme="dark"] .nonbillable-tag { color: #fcd34d; font-weight: 700; } :root[data-theme="dark"] .internal-tag { color: #bfdbfe; font-weight: 700; } .billable-breakdown { display: inline-flex; gap: 4px; align-items: baseline; margin-top: 2px; } .billable-cell input[type="number"] { width: 70px; padding: 2px 6px; text-align: right; border: 1px solid var(--border-color); border-radius: 4px; font: inherit; } /* Billing entries totals row (sub-table footer). */ .billing-entries-totals td { border-top: 2px solid var(--border-color); } /* Invoiced Archive section — date range header + ratio bar + totals row. */ .archive-section { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; } .archive-header { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; margin: 0; } .archive-header h2 { margin: 0; } .archive-date { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; } .archive-date input { padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 6px; } .ratio-bar { display: inline-block; width: 90px; height: 8px; background: rgba(180, 83, 9, .2); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 6px; } .ratio-fill { height: 100%; background: #047857; transition: width .25s ease; } .archive-totals-row td { border-top: 2px solid var(--border-color); background: rgba(0,0,0,.02); } :root[data-theme="dark"] .archive-totals-row td { background: rgba(255,255,255,.03); } /* Recovery rate cell — right-aligned with extra emphasis on the percentage. */ .recovery-rate { text-align: right; } .recovery-rate strong { font-size: 1.05rem; margin-left: .35rem; } /* History filter — segmented pill control matching the schedule-mode toggle. */ .history-filter { display: inline-flex; border: 1px solid var(--border-color); border-radius: 999px; padding: 3px; background: var(--surface-alt, var(--surface)); gap: 2px; } .history-filter button { border: none; background: transparent; color: var(--text-muted); padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.85rem; cursor: pointer; font-weight: 500; transition: background 0.15s, color 0.15s; } .history-filter button.active { background: #1e3a5f; color: #fff; } .history-filter button:hover:not(.active) { color: var(--text-primary); } /* Group-by-employee toggle in the Financial History header. */ .archive-header .group-toggle { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0; cursor: pointer; user-select: none; } .archive-header .group-toggle input[type="checkbox"] { accent-color: #1e3a5f; } /* Employee groups in the grouped view.

for native collapse/expand without JS. */ .history-grouped { display: flex; flex-direction: column; gap: 0.5rem; } .employee-group { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: var(--surface); } .employee-group[open] .employee-group-header { border-bottom: 1px solid var(--border-color); } .employee-group-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem; cursor: pointer; list-style: none; background: rgba(0,0,0,.025); font-size: 0.95rem; } :root[data-theme="dark"] .employee-group-header { background: rgba(255,255,255,.04); } .employee-group-header::-webkit-details-marker { display: none; } .employee-group-header::before { content: "▶"; font-size: 0.7rem; color: var(--text-muted); margin-right: .35rem; transition: transform .15s; } .employee-group[open] .employee-group-header::before { transform: rotate(90deg); display: inline-block; } .employee-group .employee-name { color: var(--text-primary); } .employee-group table { margin: 0; } .entry-tag { display: inline-block; font-size: .7rem; font-weight: 600; border-radius: 4px; padding: 1px 6px; margin-right: .25rem; vertical-align: 1px; } .entry-tag-timer { background: #dbeafe; color: #1e40af; } .entry-tag-manual { background: #fef3c7; color: #92400e; } .entry-tag-running { background: #bbf7d0; color: #064e3b; animation: pulse-running 1.6s ease-in-out infinite; } .entry-tag-draft { background: #fde68a; color: #78350f; } @keyframes pulse-running { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* Draft (kladde) time-entry — stopped but not confirmed yet. Subtle amber wash so technicians notice they still need to press "Bekræft tid" before the line counts as final billable time. */ .time-log tr.draft { background: rgba(245, 158, 11, 0.10); } .time-log tr.draft:hover { background: rgba(245, 158, 11, 0.16); } .draft-actions { margin-top: .35rem; } .draft-actions .btn-sm { font-size: .75rem; padding: .25rem .55rem; } /* Status dropdown in the sticky ticket header. Compact pill that picks up colour from the .status-{value} modifier so the agent gets visual reinforcement of the current state. */ .status-select { padding: .35rem .65rem; border-radius: 999px; border: 1px solid var(--border-color); font-size: .82rem; font-weight: 600; background: var(--surface); color: var(--text-primary); cursor: pointer; } .status-select.status-resolved { background: #ecfdf5; color: #047857; border-color: #6ee7b7; } .status-select.status-closed { background: #f3f4f6; color: #4b5563; border-color: #d1d5db; } .status-select.status-reopened { background: #fef3c7; color: #92400e; border-color: #fcd34d; } .status-select.status-inprogress { background: #dbeafe; color: #1e40af; border-color: #93c5fd; } .status-select.status-pendingcustomer { background: #fdf4ff; color: #86198f; border-color: #f0abfc; } /* "This ticket was re-opened by a customer reply" banner. Sits between the sticky header and the ticket-meta card. */ .reopened-banner { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } /* Archive toggle in the Tickets list header. Labelled checkbox, sits between the ticket count and the New-button. */ .archive-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--text-muted); cursor: pointer; user-select: none; } .archive-toggle input[type="checkbox"] { accent-color: #1e3a5f; } /* Sticky ticket action bar — only on the TicketDetail page. The base .page-header keeps its normal flow layout; this variant glues it to the viewport top once the user starts scrolling through messages. */ .page-header-sticky { position: sticky; top: 0; z-index: 30; background: var(--bg); padding-top: .75rem; padding-bottom: .75rem; margin-top: -.75rem; border-bottom: 1px solid var(--border-color); backdrop-filter: blur(6px); } :root[data-theme="dark"] .page-header-sticky { background: rgba(17, 24, 39, .9); } /* ── Original Message / Initial Request card on TicketDetail ─────────── */ .card.original-message { display: flex; flex-direction: column; gap: .75rem; } .original-message-header { display: flex; align-items: center; gap: .75rem; margin: 0; } .original-message-header h2 { margin: 0; } .badge-original { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #1e3a5f; color: #fff; border-radius: 4px; padding: 2px 8px; } .original-sender { font-size: .9rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; } .original-sender .spacer-dot { opacity: .5; } .original-subject { font-size: .9rem; } /* The "well" container — light gray box that hosts the rendered email HTML. Constrains nested element widths so a wide from Outlook can't blow out the page; allows scrolling inside the well instead. */ .email-well { background: #f8fafc; border: 1px solid var(--border-color); border-left: 4px solid #1e3a5f; border-radius: 8px; padding: 1rem 1.25rem; font-size: .92rem; line-height: 1.55; color: var(--text-primary); overflow-x: auto; max-height: 60vh; overflow-y: auto; } .email-well img { max-width: 100%; height: auto; } .email-well table { max-width: 100%; } .email-well a { color: #1e3a5f; text-decoration: underline; } .email-well p:first-child { margin-top: 0; } .email-well p:last-child { margin-bottom: 0; } :root[data-theme="dark"] .email-well { background: #1f2937; border-color: #374151; border-left-color: #93c5fd; color: #e5e7eb; } :root[data-theme="dark"] .email-well a { color: #93c5fd; } .reply-input { width: 100%; padding: .75rem; border: 1px solid var(--border-color); border-radius: 6px; font-family: inherit; font-size: .9rem; resize: vertical; margin-bottom: .75rem; } .ticket-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.5rem; font-size: .9rem; } .ticket-subject { margin-left: .5rem; font-weight: 500; color: var(--text-primary); } .budget-card { display: flex; flex-direction: column; gap: 1rem; } .budget-card h2 { margin: 0; font-size: 1rem; } .budget-grid { display: grid; grid-template-columns: 160px 160px 1fr; gap: 1rem 1.25rem; align-items: end; } .budget-grid label { display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; color: var(--text-muted); min-width: 0; } .budget-grid input { height: 38px; box-sizing: border-box; padding: .45rem .6rem; border: 1px solid var(--border-color); border-radius: 6px; font-size: .9rem; color: var(--text-primary); background: var(--input-bg, var(--surface)); } .budget-summary { display: flex; flex-direction: column; justify-content: end; gap: .45rem; font-size: .85rem; padding-bottom: .25rem; } .budget-bar { height: 8px; background: var(--border-color); border-radius: 4px; overflow: hidden; } .budget-fill { height: 100%; transition: width .2s, background .2s; border-radius: 4px; } @media (max-width: 720px) { .budget-grid { grid-template-columns: 1fr 1fr; } .budget-grid .budget-summary { grid-column: span 2; } } /* ── Integrations card ───────────────────────────────────────────────── */ .integration-card { display: flex; flex-direction: column; gap: 1rem; } .integration-header { display: flex; flex-direction: column; gap: .15rem; } .integration-header h2 { margin: 0; font-size: 1rem; font-weight: 600; } .integration-actions { display: flex; gap: .5rem; align-items: center; } .integration-actions button { display: inline-flex; align-items: center; gap: .5rem; } .history.card { padding: 0; overflow: hidden; } .history .ticket-table { border: none; box-shadow: none; } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 992px) { .app { grid-template-columns: 200px 1fr; } } @media (max-width: 768px) { .app { grid-template-columns: 1fr; } .sidebar { position: relative; height: auto; } .content { padding: 1rem; } .ticket-meta { grid-template-columns: 1fr; } .audit-filters { grid-template-columns: 1fr; } }