/* =====================================================================
   RevisorPro CRM — Shared UI foundation v5.3.2
   Compact, calm B2B administration UI for a Danish accounting firm.
   Pure local CSS. No external CDN or framework. Every existing class
   name from v4.2.x is preserved so all pages keep working.
   ===================================================================== */

:root {
  /* --- Brand: deep, confident navy with a single calm teal-blue accent --- */
  --navy-950: #081d33;
  --navy-900: #0b2440;
  --navy-800: #14385c;
  --navy-700: #1d4e7a;
  --navy-100: #e3eef7;
  --navy-50:  #f1f6fb;

  /* --- Neutrals: warm-cool slate on a soft paper background (not cold grey) --- */
  --slate-950: #14202b;
  --slate-800: #33485c;
  --slate-700: #4a6075;
  --slate-600: #647688;
  --slate-500: #8497a8;
  --slate-400: #a3b3c1;
  --slate-300: #c5d2dd;
  --slate-200: #dde6ee;
  --slate-100: #eef3f8;
  --slate-50:  #f6f9fc;
  --paper:     #f4f7fa;
  --white: #fff;

  /* --- Semantic foundation --- */
  --background: var(--paper);
  --surface: var(--white);
  --surface-muted: var(--slate-50);
  --text: var(--slate-950);
  --text-muted: var(--slate-600);
  --primary: var(--navy-800);
  --primary-hover: var(--navy-900);

  /* --- Status: muted, professional, accessible contrast --- */
  --green-700: #166b46; --green-100: #def2e6;
  --yellow-800: #855600; --yellow-100: #fdeecb;
  --red-700: #b02430;    --red-100: #fbe3e5;
  --blue-700: #1a6fb0;   --blue-100: #e0eefa;
  --accent: #1f7aa8;     /* calm teal-blue, used sparingly for focus + active */
  --accent-strong: #14607f;
  --success: var(--green-700);
  --warning: var(--yellow-800);
  --danger: var(--red-700);
  --info: var(--blue-700);

  /* --- Elevation: softer, layered, deliberate --- */
  --shadow-sm: 0 1px 2px rgba(13, 38, 63, .05);
  --shadow:    0 3px 10px rgba(13, 38, 63, .07);
  --shadow-md: 0 10px 24px rgba(13, 38, 63, .10);
  --shadow-lg: 0 24px 60px rgba(8, 29, 51, .18);
  --ring: 0 0 0 3px rgba(31, 122, 168, .28);

  --border: #dbe4ec;
  --border-strong: #c5d2dd;

  /* --- Radii --- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Spacing scale --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 14px;
  --space-lg: 22px;
  --space-xl: 34px;

  --control-height: 40px;
  --control-height-sm: 34px;
  --page-max-width: 1480px;
  --page-padding: 28px;

  --sidebar: 270px;

  /* Backward-compatible alias for names used by older inline styles */
  --focus: var(--ring);
}

* { box-sizing: border-box; }
html { min-height: 100%; max-width: 100%; overflow-x: clip; scroll-behavior: smooth; background: var(--background); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; max-width: 100%; margin: 0;
  overflow-x: clip;
  color: var(--text);
  background: var(--background);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.55;
  font-feature-settings: "cv05" 1, "ss01" 1, "tnum" 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(31, 122, 168, .14);
}
a { color: var(--accent-strong); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--navy-900); }
button, input, select, textarea { font: inherit; }
button, .btn { cursor: pointer; }
img, svg, canvas { max-width: 100%; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 0; color: var(--navy-950); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -.022em; line-height: 1.18; }
h2 { margin-bottom: 12px; color: var(--navy-950); font-size: 1.1rem; font-weight: 750; letter-spacing: -.012em; }
h3 { margin: 20px 0 10px; color: var(--navy-900); font-size: .98rem; font-weight: 750; }
small { font-size: .76rem; }
::selection { background: rgba(31,122,168,.2); }
pre, code { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.help, .muted, .table-title, .table-sub, .timeline-item, .alert, .pipeline-card, .customer-meta { overflow-wrap: anywhere; word-break: break-word; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; transform: translateY(-150%); padding: 9px 14px; border-radius: 9px; color: var(--white); background: var(--navy-900); font-weight: 700; box-shadow: var(--shadow-md); }
.skip-link:focus { transform: translateY(0); }

.app-shell { display: flex; min-width: 0; max-width: 100%; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: var(--sidebar); flex-direction: column; overflow: hidden; color: #cfe0ee; background: linear-gradient(184deg, #0c2845 0%, var(--navy-950) 60%, #061629 100%); box-shadow: 1px 0 0 rgba(255,255,255,.04), 10px 0 40px rgba(8, 29, 51, .22); scrollbar-width: thin; }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }
.sidebar-head { display: flex; min-height: 80px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--white); }
.brand:hover { color: var(--white); }
.brand-logo { width: 40px; height: 40px; border-radius: 11px; object-fit: contain; background: var(--white); padding: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.brand-text { display: grid; gap: 0; line-height: 1.1; }
.brand-text strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.brand-text small { margin-top: 4px; color: #8fb6d4; font-size: .64rem; font-weight: 800; letter-spacing: .22em; }
.nav { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px 12px 22px; scrollbar-gutter: stable; scrollbar-width: thin; }
.nav-section { margin: 18px 12px 7px; color: #7ba0bf; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nav-section:first-child { margin-top: 6px; }
.nav-link { position: relative; display: flex; min-height: 44px; align-items: center; gap: 11px; margin: 2px 0; padding: 9px 12px; border-radius: 11px; color: #c8dcec; font-size: .875rem; font-weight: 600; transition: background .16s ease, color .16s ease, transform .12s ease; }
.nav-link:hover { color: var(--white); background: rgba(255, 255, 255, .07); }
.nav-link:active { transform: translateX(1px); }
.nav-link.active { color: var(--white); background: linear-gradient(90deg, rgba(57,151,196,.30), rgba(57,151,196,.10)); }
.nav-link.active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: #5cb3e6; box-shadow: 0 0 12px rgba(92,179,230,.7); }
.nav-link .icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }
.nav-link.active .icon { opacity: 1; }
.sidebar-foot { flex: 0 0 auto; margin-top: auto; padding: 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.sidebar-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(8, 24, 41, .55); backdrop-filter: blur(3px); }

/* ---------- Main + topbar ---------- */
.main { min-width: 0; width: calc(100% - var(--sidebar)); margin-left: var(--sidebar); padding: 0 32px 32px; }
.topbar { display: flex; min-height: 88px; align-items: center; justify-content: space-between; gap: 18px; margin: 0 -32px 26px; padding: 18px 32px; border-bottom: 1px solid var(--border); background: rgba(246, 249, 252, .82); backdrop-filter: saturate(140%) blur(14px); }
.topbar-left, .topbar-right, .topbar-actions, .actions { display: flex; min-width: 0; max-width: 100%; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-check { display: inline-flex; min-height: var(--control-height); max-width: 100%; align-items: center; gap: 7px; color: var(--slate-700); font-size: .78rem; font-weight: 700; overflow-wrap: anywhere; }
.inline-check input { flex: 0 0 auto; width: auto; }
.compact-list { margin: 0; padding-left: 18px; }
.compact-list li + li { margin-top: 3px; }
.actions form { max-width: 100%; }
.eyebrow { margin-bottom: 5px; color: var(--accent-strong); font-size: .64rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.user-pill { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--slate-800); background: var(--white); box-shadow: var(--shadow-sm); transition: box-shadow .16s ease, border-color .16s ease; }
.user-pill:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.user-pill span:last-child { display: grid; padding-right: 3px; line-height: 1.15; }
.user-pill small { margin-top: 3px; color: var(--slate-600); }
.user-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: var(--white); background: linear-gradient(140deg, var(--navy-700), var(--navy-900)); font-size: .85rem; font-weight: 800; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.icon-button { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid transparent; border-radius: 11px; color: var(--navy-900); background: transparent; transition: background .15s ease, border-color .15s ease; }
.icon-button:hover { background: var(--white); border-color: var(--border); }
.mobile-menu-button, .sidebar-close-button { display: none; }
.sidebar-close-button { flex: 0 0 44px; color: var(--white); }
.sidebar-close-button:hover { color: var(--white); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
.sidebar-open { overflow: hidden; }
.app-footer { padding-top: 30px; color: var(--slate-500); font-size: .75rem; text-align: center; }

/* ---------- Toolbar / panels / cards ---------- */
.toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.toolbar .help { margin: 0; max-width: 850px; }
.panel, .card { min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.panel { padding: 18px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.panel-header h2 { margin-bottom: 3px; }
.card { padding: 16px; }
.grid { display: grid; min-width: 0; max-width: 100%; gap: 18px; }
.grid > *, .form-grid > *, .form-inline > *, .filters > *, .quick-actions > *, .customer-hero > *, .check-item > * { min-width: 0; max-width: 100%; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: grid; gap: 16px; }
.section-space { margin-top: 20px; }
.muted, .help { color: var(--text-muted); font-size: .82rem; }
.help { margin: 5px 0 0; }

/* ---------- KPI cards ---------- */
.kpi { position: relative; min-height: 126px; overflow: hidden; }
.kpi::after { position: absolute; right: -28px; bottom: -42px; width: 104px; height: 104px; border-radius: 50%; background: var(--navy-50); content: ""; transition: transform .25s ease; }
.kpi .number { position: relative; z-index: 1; color: var(--navy-950); font-size: 2.2rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi .label { position: relative; z-index: 1; margin-top: 12px; color: var(--slate-800); font-size: .85rem; font-weight: 750; }
.kpi .sub { position: relative; z-index: 1; margin-top: 4px; color: var(--slate-600); font-size: .76rem; }
.kpi-critical { border-color: #f0c0c5; background: linear-gradient(150deg, var(--white), #fff6f6); }
.kpi-critical::after { background: var(--red-100); }
.kpi-critical .number { color: #97202a; }
.kpi-warning { border-color: #f0d59a; background: linear-gradient(150deg, var(--white), #fffdf6); }
.kpi-warning::after { background: var(--yellow-100); }
.kpi-positive { border-color: #b3ddc6; background: linear-gradient(150deg, var(--white), #f6fffb); }
.kpi-positive::after { background: var(--green-100); }
.kpi-hero { color: var(--white); border-color: var(--navy-800); background: linear-gradient(145deg, var(--navy-900), var(--navy-700) 130%); }
.kpi-hero .number, .kpi-hero .label { color: var(--white); }
.kpi-hero .sub { color: #bcd6ea; }
.kpi-hero::after { background: rgba(255, 255, 255, .07); }
.kpi-link { display: block; color: inherit; }
.kpi-link:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi-link:hover::after { transform: scale(1.12); }
.metric-inline { display: flex; align-items: baseline; gap: 8px; }
.metric-inline strong { color: var(--navy-950); font-size: 1.55rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn, .main button:where(:not(.icon-button)), .login-card button:where(:not(.icon-button)) { display: inline-flex; max-width: 100%; min-height: var(--control-height); align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--primary); border-radius: var(--radius-sm); padding: 8px 14px; overflow-wrap: normal; color: var(--white); background: var(--primary); font-size: .82rem; font-weight: 700; letter-spacing: .002em; line-height: 1.1; text-align: center; white-space: nowrap; box-shadow: none; transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.btn:hover, .main button:where(:not(.icon-button)):hover, .login-card button:where(:not(.icon-button)):hover { color: var(--white); border-color: var(--primary-hover); background: var(--primary-hover); box-shadow: var(--shadow-sm); }
.btn:active, .main button:where(:not(.icon-button)):active, .login-card button:where(:not(.icon-button)):active { box-shadow: none; }
.btn.secondary, button.secondary { color: var(--navy-900); border-color: #aac4d7; background: var(--navy-50); }
.btn.secondary:hover, button.secondary:hover { color: var(--navy-950); border-color: #8fb0c8; background: var(--navy-100); }
.btn.light, button.light, .btn.quiet, button.quiet { color: var(--slate-800); border-color: var(--border); background: var(--surface); box-shadow: none; }
.btn.light:hover, button.light:hover, .btn.quiet:hover, button.quiet:hover { color: var(--navy-900); border-color: var(--border-strong); background: var(--surface-muted); box-shadow: none; }
.btn.link, button.link { min-height: auto; border-color: transparent; padding: 4px 5px; color: var(--accent-strong); background: transparent; box-shadow: none; }
.btn.link:hover, button.link:hover { border-color: transparent; color: var(--navy-900); background: var(--navy-50); box-shadow: none; }
.btn.danger, button.danger { color: var(--white); border-color: #9f202b; background: var(--danger); }
.btn.danger:hover, button.danger:hover { border-color: #8d1d27; background: #97202a; }
.btn.small, button.small { min-height: var(--control-height-sm); padding: 6px 10px; border-radius: var(--radius-sm); font-size: .75rem; }
button:disabled, button:disabled:hover, .btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { cursor: not-allowed; opacity: .55; box-shadow: none; transform: none; }
button:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Forms ---------- */
form { margin: 0; }
label { display: block; margin-bottom: 5px; color: var(--slate-800); font-size: .77rem; font-weight: 750; }
.field-label-spacer { display: block; min-height: 1.2em; margin-bottom: 5px; }
label abbr[title], .required-marker { color: var(--danger); text-decoration: none; }
input, select, textarea { width: 100%; min-width: 0; max-width: 100%; min-height: var(--control-height); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 11px; color: var(--text); background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
input::placeholder, textarea::placeholder { color: var(--slate-400); }
input:hover, select:hover, textarea:hover { border-color: var(--slate-400); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 0; box-shadow: var(--ring); background: var(--surface); }
input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; color: var(--slate-600); background: var(--slate-100); opacity: .8; }
input[readonly], textarea[readonly] { color: var(--slate-700); background: var(--surface-muted); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .is-invalid { border-color: var(--danger); }
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus, .is-invalid:focus { box-shadow: 0 0 0 3px rgba(176, 36, 48, .18); }
textarea { min-height: 100px; resize: vertical; line-height: 1.55; text-align: start; }
input[type="checkbox"], input[type="radio"] { width: 18px; min-height: 18px; padding: 0; accent-color: var(--accent); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23647688' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.form-grid .full { grid-column: 1 / -1; }
.form-inline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-field, .field { min-width: 0; }
.form-section { grid-column: 1 / -1; min-width: 0; margin: 0; border: 0; padding: 0; }
.form-section + .form-section { margin-top: var(--space-sm); border-top: 1px solid var(--border); padding-top: var(--space-lg); }
.form-section legend { width: 100%; margin-bottom: var(--space-md); padding: 0; color: var(--navy-950); font-size: 1rem; font-weight: 800; }
.form-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.form-section-grid > *, .form-layout > * { min-width: 0; max-width: 100%; }
.form-section-grid .full { grid-column: 1 / -1; }
.form-choice-group { min-width: 0; margin: 0; border: 0; padding: 0; }
.form-choice-group > legend { margin-bottom: 5px; padding: 0; color: var(--slate-800); font-size: .77rem; font-weight: 750; }
.form-layout { gap: var(--space-lg); }
.form-layout > h2 { margin: 0; border-bottom: 1px solid var(--border); padding-bottom: var(--space-sm); }
.form-action-bar { grid-column: 1 / -1; justify-content: flex-end; margin-top: var(--space-xs); border-top: 1px solid var(--border); padding-top: var(--space-md); }
.detail-action-zone { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--space-md); }
.field-help { margin: 5px 0 0; color: var(--text-muted); font-size: .78rem; }
.field-error, .validation-error { margin: 5px 0 0; color: var(--danger); font-size: .78rem; font-weight: 650; }
.filters { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(140px, auto)) auto auto; gap: 10px; align-items: center; margin-bottom: 18px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.filters-compact { grid-template-columns: minmax(220px, 1fr) auto auto; }
.filters-deadline { grid-template-columns: minmax(220px, 1fr) minmax(155px, 220px) minmax(145px, 190px) minmax(145px, 190px) auto auto; }
.lookup-row { display: flex; align-items: center; gap: 8px; }
.lookup-row input { flex: 1; }
.lookup-message { margin-top: 7px; color: var(--green-700); font-size: .78rem; }
.lookup-message.error { color: var(--red-700); }
.address-autocomplete-wrap { position: relative; }
.address-suggestions { position: absolute; inset: calc(100% + 5px) 0 auto; z-index: 30; overflow: hidden; border: 1px solid var(--border); border-radius: 11px; background: var(--white); box-shadow: var(--shadow-md); }
.address-suggestions button { display: block; width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid var(--slate-100); border-radius: 0; padding: 10px 12px; color: var(--slate-950); background: var(--white); font-size: .8rem; font-weight: 550; text-align: left; box-shadow: none; }
.address-suggestions button:hover { color: var(--navy-900); background: var(--navy-50); transform: none; }

/* ---------- Alerts / badges ---------- */
.alert { position: relative; width: 100%; max-width: 100%; margin-bottom: 16px; border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); padding: 11px 13px; background: var(--surface); font-size: .83rem; box-shadow: none; opacity: 1; transition: opacity .25s ease; }
.alert[hidden] { display: none; }
.alert.is-dismissing { pointer-events: none; opacity: 0; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert-success { color: #0f5a39; border-color: #9ed4b7; background: #f3faf6; }
.alert-info { color: #135082; border-color: #a9cee7; background: #f2f8fc; }
.alert-warning { color: #6f4e00; border-color: #e4c77f; background: #fffaf0; }
.alert-error { color: #8d1d27; border-color: #e8a4ab; background: #fdf5f5; }
.badge, .status-pill { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 3px 8px; font-size: .69rem; font-weight: 800; line-height: 1.25; letter-spacing: .005em; overflow-wrap: anywhere; text-align: center; white-space: normal; }
.badge-neutral, .status-pill { color: var(--slate-800); border-color: var(--slate-200); background: var(--slate-100); }
.badge-blue, .badge-info { color: #135082; border-color: #bdd9ec; background: var(--blue-100); }
.badge-green, .badge-success { color: var(--green-700); border-color: #b9dfca; background: var(--green-100); }
.badge-yellow, .badge-warning { color: var(--yellow-800); border-color: #ead49e; background: var(--yellow-100); }
.badge-red, .badge-danger { color: var(--red-700); border-color: #edbec2; background: var(--red-100); }

/* ---------- Tables ---------- */
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
table { width: 100%; max-width: 100%; border-collapse: collapse; background: var(--white); font-size: .82rem; }
th, td { min-width: 0; padding: 10px 12px; overflow-wrap: anywhere; word-break: break-word; border-bottom: 0; vertical-align: top; text-align: left; }
th { position: sticky; top: 0; color: var(--slate-700); background: var(--surface-muted); font-size: .67rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
thead tr { border-bottom: 1px solid var(--border); }
tbody tr { border-bottom: 1px solid var(--slate-100); transition: background .12s ease; }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover > td { background: var(--navy-50); }
td.actions { min-width: 135px; }
td.actions form { display: inline-flex; }
.table-compact th, .table-compact td { padding: 9px 11px; }
.table-title { color: var(--navy-950); font-weight: 800; }
.table-sub { display: block; margin-top: 3px; color: var(--slate-600); font-size: .76rem; }
.data-table th, .data-table td { vertical-align: middle; }
.data-table th { white-space: nowrap; }
.data-table .row-primary { display: block; color: var(--navy-950); font-weight: 800; line-height: 1.3; }
.data-table .row-secondary { display: block; margin-top: 3px; color: var(--slate-600); font-size: .75rem; line-height: 1.35; }
.data-table .cell-date, .data-table .cell-numeric { white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table .cell-numeric { text-align: right; }
.data-table .cell-status { white-space: nowrap; }
.data-table .row-actions { display: flex; min-width: 135px; align-items: center; gap: 6px; flex-wrap: wrap; }
.data-table .row-actions form { display: inline-flex; }
.data-table .row-actions .inline-form { margin-top: 0; }
.data-table .row-actions .hard-delete-form { align-items: center; gap: 8px; }
.overview-table-shell { margin-bottom: var(--space-lg); }
.list-filter-bar { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); align-items: end; margin-bottom: var(--space-md); padding: var(--space-md); }
.list-filter-bar > label:first-child { grid-column: 1 / -1; margin-bottom: -3px; }
.list-filter-bar .filter-search { grid-column: span 2; min-width: 220px; }
.compact-metrics { gap: var(--space-sm); }
.compact-metrics .kpi { min-height: 96px; padding: 13px 14px; }
.compact-metrics .kpi .number { font-size: 1.65rem; }
.compact-metrics .kpi .label { margin-top: 8px; font-size: .79rem; }
.compact-metrics .kpi .sub { margin-top: 3px; font-size: .71rem; }
.overview-link-grid { gap: var(--space-sm); }
.overview-link-grid .card, .overview-link-grid .section-link { min-height: 104px; padding: 14px; box-shadow: none; }
.overview-link-grid h2 { font-size: .95rem; }
.empty-state { display: grid; gap: 3px; min-height: 0; padding: 13px 15px; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-muted); text-align: left; }
.empty-state strong { color: var(--slate-800); font-size: .84rem; }
.empty-state span { max-width: 70ch; font-size: .79rem; }

/* ---------- Quick actions / misc ---------- */
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.quick-action { display: grid; min-height: 86px; align-content: center; gap: 5px; border: 1px solid var(--border); border-radius: 13px; padding: 14px; color: var(--navy-900); background: linear-gradient(180deg, var(--white), #fbfdfe); transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.quick-action:hover { border-color: #a3c4dc; background: var(--navy-50); transform: translateY(-2px); box-shadow: var(--shadow); }
.quick-action strong { font-size: .86rem; font-weight: 750; }
.quick-action span { color: var(--slate-600); font-size: .75rem; }
.progress-track { overflow: hidden; height: 8px; border-radius: var(--radius-pill); background: var(--slate-100); }
.progress-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--navy-700)); }
.definition-list { display: grid; gap: 10px; }
.definition-item { border: 1px solid var(--border); border-radius: 13px; padding: 14px; background: var(--white); box-shadow: var(--shadow-sm); }
.definition-item summary { display: flex; min-height: 44px; align-items: center; cursor: pointer; color: var(--navy-900); font-size: .83rem; font-weight: 800; }
.definition-item dl { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 6px 12px; margin: 12px 0 0; font-size: .78rem; }
.definition-item dt { color: var(--slate-700); font-weight: 800; }
.definition-item dd { margin: 0; color: var(--slate-800); }
.data-note { border-left: 3px solid var(--accent); border-radius: 0 9px 9px 0; padding: 10px 13px; color: var(--slate-700); background: var(--navy-50); font-size: .78rem; }

/* ---------- Pipeline ---------- */
.pipeline { display: grid; width: 100%; max-width: 100%; min-width: 0; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.pipeline-column { min-height: 220px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--surface-muted); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.pipeline-column h2 { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-sm); margin: 0 1px 9px; font-size: .8rem; }
.pipeline-column-label { min-width: 0; line-height: 1.25; overflow-wrap: normal; word-break: normal; }
.pipeline-column.drop-target { border-color: var(--accent); background: #e9f4fb; box-shadow: inset 0 0 0 1px var(--accent); }
.pipeline-card { margin-bottom: 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; background: var(--white); box-shadow: none; cursor: grab; transition: box-shadow .16s ease, border-color .16s ease; }
.pipeline-card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.pipeline-card, .pipeline-column { min-width: 0; max-width: 100%; }
.pipeline-card .company { overflow-wrap: anywhere; color: var(--navy-950); font-size: .86rem; font-weight: 800; }
.pipeline-card .meta { display: grid; gap: 3px; margin-top: 5px; color: var(--slate-600); font-size: .72rem; line-height: 1.35; }
.pipeline-card .meta span { overflow-wrap: anywhere; }
.pipeline-card .meta .pipeline-follow-up { color: var(--navy-800); font-weight: 750; }
.pipeline-column:not(:has(.pipeline-card))::after { display:block; margin:14px 2px; color:var(--slate-500); content:"Ingen leads."; font-size:.75rem; text-align:center; }
.pipeline-status-control { display: grid; gap: 3px; margin-top: 8px; }
.pipeline-status-control span { color: var(--slate-600); font-size: .67rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pipeline-status-control select { min-height: 34px; padding: 6px 9px; font-size: .73rem; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 14px; align-items: start; }
.checklist { display: grid; gap: 10px; }
.check-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--white); box-shadow: var(--shadow-sm); }
.timeline { display: grid; gap: 12px; }
.timeline-item { position: relative; border-left: 2px solid var(--slate-200); padding: 2px 0 2px 16px; }
.timeline-item::before { content: ""; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--navy-50); }
.timeline-item small { display: block; margin-top: 2px; color: var(--slate-600); }
.price-overview { display: grid; gap: 13px; }
.price-section { overflow: hidden; border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-sm); }
.price-section-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid var(--border); background: #f3f7fb; }
.price-section-header h3 { margin: 0; font-size: .84rem; }
.price-line-content, .price-line-value { min-width:0; overflow-wrap:anywhere; }
.price-line-content .help { display:block; margin-top:3px; }
.price-subtotal th { background: var(--navy-50); }
.service-add-form { margin-top: 12px; border: 1px solid var(--border); border-radius: 13px; padding: 13px; background: #fbfdff; }
.deadline-completed-form { width: 100%; min-width: 0; max-width: 100%; }
.deadline-completed-controls { display: grid; width: 100%; min-width: 0; max-width: 100%; grid-template-columns: minmax(130px, 1fr) auto; gap: 6px; }
.deadline-completed-controls input[type="date"] { width: 100%; min-width: 0; max-width: 100%; }
.deadline-settings-form { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 13px; align-items: end; }
.deadline-settings-form .form-actions { align-self: end; }
.deadline-settings-date-form { display: grid; gap: 8px; justify-items: start; }
.inline-settings-form { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 11px; margin-top: 13px; border: 1px solid var(--border); border-radius: 13px; padding: 13px; background: #f3f7fb; }
.inline-form { margin-top: 10px; }

/* ---------- Charts ---------- */
.chart { width: 100%; max-width: 100%; min-width: 0; min-height: 240px; overflow: hidden; }
.chart-svg { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; }
.chart-grid { stroke: #e1e9f1; stroke-width: 1; }
.chart-axis-label { fill: var(--slate-600); font-size: 11px; }
.chart-value { fill: var(--slate-800); font-size: 12px; font-weight: 800; }
.chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { stroke: var(--white); stroke-width: 2; }
.chart-bar-bg { fill: #eef3f8; }
.chart-bar { opacity: .95; }
.chart-funnel-label { fill: var(--white); font-size: 12px; font-weight: 800; }
.chart-line.chart-series-0 { stroke: #1f7aa8; }
.chart-line.chart-series-1 { stroke: #2d8b67; }
.chart-line.chart-series-2 { stroke: #bd7a22; }
.chart-line.chart-series-3 { stroke: #6f6aa8; }
.chart-point.chart-series-0, .chart-bar.chart-series-0, .chart-funnel.chart-series-0, .chart-legend-marker.chart-series-0 { fill: #1f7aa8; background: #1f7aa8; }
.chart-point.chart-series-1, .chart-bar.chart-series-1, .chart-funnel.chart-series-1, .chart-legend-marker.chart-series-1 { fill: #2d8b67; background: #2d8b67; }
.chart-point.chart-series-2, .chart-bar.chart-series-2, .chart-funnel.chart-series-2, .chart-legend-marker.chart-series-2 { fill: #bd7a22; background: #bd7a22; }
.chart-point.chart-series-3, .chart-bar.chart-series-3, .chart-funnel.chart-series-3, .chart-legend-marker.chart-series-3 { fill: #6f6aa8; background: #6f6aa8; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; color: var(--slate-700); font-size: .75rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.chart-empty { display: grid; min-height: 245px; place-content: center; gap: 4px; color: var(--slate-600); text-align: center; }
.chart-empty strong { color: var(--slate-800); }

/* ---------- Login / public auth pages ---------- */
.login-page { display: grid; min-height: 100vh; place-items: center; padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  background:
    radial-gradient(900px 500px at 85% -5%, #d9e9f6, rgba(217,233,246,0) 55%),
    radial-gradient(700px 500px at 0% 105%, #e6eef6, rgba(230,238,246,0) 55%),
    linear-gradient(180deg, #eef4f9, var(--paper)); }
.login-card { width: min(440px, 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 30px; background: var(--white); box-shadow: var(--shadow-lg); }
.login-logo { display: block; width: 88px; height: 88px; object-fit: contain; margin: 0 auto 22px; }
.login-card h1 { margin-bottom: 7px; text-align: center; }
.login-card .help { margin-bottom: 18px; text-align: center; }
.login-card button { width: 100%; margin-top: 12px; }
.login-card form { display: grid; gap: 2px; }
.login-card label { margin-top: 8px; }

/* ---------- KPI text overflow + customer hero ---------- */
.kpi .number.kpi-number-text { max-width: 92%; font-size: 1.4rem; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.filters-kpi { grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(145px, 190px)) auto; align-items: end; }
.customer-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #c2d8e8; border-radius: var(--radius); padding: 20px; color: var(--slate-800); background: linear-gradient(135deg, var(--white), #eef5fb); box-shadow: var(--shadow-sm); }
.customer-hero h2 { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -.02em; }
.customer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--slate-700); font-size: .8rem; }
.customer-hero-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.customer-hero-facts div { display: grid; min-width: 92px; gap: 2px; border-left: 1px solid var(--border); padding: 4px 14px; }
.customer-hero-facts strong { color: var(--navy-950); font-size: 1.35rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.customer-hero-facts span { color: var(--slate-600); font-size: .72rem; }
.customer-nav { position: sticky; top: 8px; z-index: 9; display: flex; gap: 4px; overflow-x: auto; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 13px; padding: 6px; background: rgba(255,255,255,.95); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); scrollbar-width: thin; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.customer-nav a { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; border-radius: 9px; padding: 8px 11px; color: var(--slate-700); font-size: .77rem; font-weight: 750; scroll-snap-align: start; transition: background .14s ease, color .14s ease; }
.customer-nav a:hover { color: var(--navy-950); background: var(--navy-50); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deadline-settings-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-deadline { grid-template-columns: minmax(210px, 1fr) repeat(2, minmax(145px, 180px)) auto auto; }
  .filters-deadline select:nth-of-type(2) { grid-column: auto; }
}
@media (max-width: 920px) {
  .sidebar { width: min(86vw, 320px); transform: translateX(-105%); transition: transform .24s cubic-bezier(.4,0,.2,1); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-menu-button, .sidebar-close-button { display: inline-grid; }
  .nav-link { min-height: 48px; }
  .main { width: 100%; margin-left: 0; padding: 0 max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
  .topbar { position: sticky; top: 0; z-index: 20; min-height: 76px; margin: 0 -18px 20px; padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left)); }
  .topbar-left { gap: 8px; }
  .topbar-actions { display: none; }
  .user-pill strong { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .customer-nav { top: calc(72px + env(safe-area-inset-top)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters, .filters-deadline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-filter-bar .filter-search { grid-column: 1 / -1; }
  .filters input:first-child { grid-column: 1 / -1; }
  th { position: static; }
}
@media (max-width: 680px) {
  .customer-hero { align-items: stretch; flex-direction: column; padding: 16px; }
  .customer-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .customer-hero-facts div { min-width: 0; border-left: 0; border-top: 1px solid var(--border); padding: 8px 2px 0; }
  .client-table, .client-table tbody, .client-table tr, .client-table th, .client-table td { display: block; width: 100%; }
  .client-table tr { border-bottom: 1px solid var(--slate-100); padding: 7px 0; }
  .client-table th, .client-table td { border-bottom: 0; padding: 3px 0; }
  .client-table th { color: var(--slate-600); font-size: .67rem; }
  .main { padding: 0 max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .topbar { margin: 0 -12px 16px; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
  .topbar h1 { font-size: 1.25rem; }
  .icon-button { width: 44px; height: 44px; }
  .btn, .main button:where(:not(.icon-button)), .login-card button:where(:not(.icon-button)), .btn.small, button.small { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  .inline-check { min-height: 44px; align-items: center; }
  .customer-nav { top: calc(68px + env(safe-area-inset-top)); flex-wrap: wrap; overflow-x: visible; margin-bottom: 14px; }
  .customer-nav a { display: inline-flex; min-height: 44px; min-width: 0; align-items: center; padding: 9px 11px; overflow-wrap: anywhere; }
  .user-pill { padding: 5px; }
  .user-pill span:last-child { display: none; }
  .grid-2, .grid-3, .grid-4, .form-grid, .form-section-grid, .form-inline, .quick-actions, .filters, .filters-compact, .filters-deadline, .list-filter-bar, .deadline-settings-form, .inline-settings-form { grid-template-columns: 1fr; }
  .filters input:first-child { grid-column: auto; }
  .list-filter-bar .filter-search { grid-column: auto; min-width: 0; }
  .list-filter-bar > label:first-child { grid-column: auto; }
  .toolbar, .panel-header { align-items: stretch; flex-direction: column; }
  .form-action-bar, .detail-action-zone { align-items: stretch; flex-direction: column; }
  .form-action-bar .btn, .form-action-bar button, .detail-action-zone .btn, .detail-action-zone button, .detail-action-zone form { width: 100%; }
  .action-stack-mobile, .action-stack-mobile form { align-items: stretch; flex-direction: column; width: 100%; }
  .action-stack-mobile .btn, .action-stack-mobile button { width: 100%; }
  .toolbar { padding: 14px; }
  .panel { padding: 15px; }
  .card { padding: 14px; }
  .kpi { min-height: 112px; }
  .kpi .number { font-size: 1.9rem; }
  .table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap tbody { display: grid; gap: 12px; }
  .table-wrap tbody tr { overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: var(--white); box-shadow: var(--shadow-sm); }
  .table-wrap tbody td { display: grid; grid-template-columns: minmax(96px, 35%) minmax(0, 1fr); gap: 8px; border-bottom: 1px solid var(--slate-100); padding: 10px 12px; overflow-wrap: anywhere; }
  .table-wrap tbody td:last-child { border-bottom: 0; }
  .table-wrap tbody td.actions, .table-wrap tbody td.row-actions, .table-wrap tbody td[data-label="Handling"], .table-wrap tbody td[data-label="Handlinger"], .table-wrap tbody td[data-label="Link"] { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .table-wrap tbody td.row-actions > .actions { align-items: stretch; flex-direction: column; width: 100%; }
  .data-table .row-actions .hard-delete-form { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .data-table .row-actions .hard-delete-form .confirm-delete-input { width: 100%; max-width: none; }
  .table-wrap tbody td.actions .btn, .table-wrap tbody td.actions button, .table-wrap tbody td.actions form, .table-wrap tbody td[data-label="Handling"] .btn, .table-wrap tbody td[data-label="Handling"] button, .table-wrap tbody td[data-label="Handlinger"] .btn, .table-wrap tbody td[data-label="Handlinger"] button, .table-wrap tbody td[data-label="Link"] .btn { width: 100%; }
  .table-wrap tbody td::before { color: var(--slate-600); content: attr(data-label); font-size: .66rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
  .table-wrap tbody td[colspan] { display: block; }
  .table-wrap tbody td[colspan]::before { content: none; }
  .table-wrap .deadline-completed-table, .table-wrap .deadline-completed-table > tbody, .table-wrap .deadline-completed-table > tbody > tr { width: 100%; min-width: 0; max-width: 100%; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; }
  .table-wrap .deadline-completed-table > tbody > tr { justify-self: stretch; }
  .table-wrap .deadline-completed-table > tbody > tr > td.cell-numeric { text-align: left; }
  .table-wrap tbody td.deadline-completed-cell { display: block; width: 100%; min-width: 0; max-width: 100%; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; }
  .table-wrap tbody td.deadline-completed-cell::before { display: block; margin-bottom: 8px; }
  .deadline-completed-cell .deadline-completed-form { display: block; width: 100%; min-width: 0; max-width: 100%; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; }
  .deadline-completed-cell .deadline-completed-controls { display: grid; width: 100%; min-width: 0; max-width: 100%; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; grid-template-columns: minmax(0, 1fr); gap: 8px; box-sizing: border-box; }
  .deadline-completed-cell .deadline-completed-controls > input[type="date"], .deadline-completed-cell .deadline-completed-controls > button[type="submit"] { display: block; width: 100%; min-width: 0; max-width: 100%; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; justify-self: stretch; box-sizing: border-box; }
  .deadline-completed-cell .deadline-completed-controls > button[type="submit"] { overflow-wrap: anywhere; white-space: normal; }
  @supports (width: -webkit-fill-available) {
    .deadline-completed-cell .deadline-completed-controls > input[type="date"] { width: -webkit-fill-available; }
  }
  .definition-item dl { grid-template-columns: 1fr; gap: 2px; }
  .definition-item dd { margin-bottom: 7px; }
  .chart { min-height: 0; overflow: hidden; }
  .pipeline { grid-template-columns: 1fr; overflow-x: visible; }
  .check-item { align-items: stretch; flex-direction: column; }
  .lookup-row { flex-wrap: wrap; }
  .price-section table, .price-section thead, .price-section tbody, .price-section tr, .price-section th, .price-section td { display: block; width: 100%; }
  .price-section thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .price-section tbody { display: grid; gap: 8px; padding: 8px; }
  .price-section tbody tr { overflow: hidden; border: 1px solid var(--slate-100); border-radius: 11px; }
  .price-section tbody td { display: grid; grid-template-columns: minmax(82px, 32%) minmax(0, 1fr); gap: 7px; border-bottom: 1px solid var(--slate-100); padding: 8px; overflow-wrap: anywhere; }
  .price-section tbody td:last-child { border-bottom: 0; }
  .price-section tbody td::before { color: var(--slate-600); content: attr(data-label); font-size: .66rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
  .price-section .price-subtotal th { display: block; border-bottom: 1px solid var(--slate-100); padding: 8px; overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  .btn, .main button:where(:not(.icon-button)), .login-card button:where(:not(.icon-button)) { overflow-wrap: anywhere; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .alert { transition: none; }
}

/* Native dialogs and future modal containers share a safe mobile shell. */
dialog, .modal { max-width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; background: var(--white); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(8, 24, 41, .55); backdrop-filter: blur(3px); }

@media (display-mode: standalone) {
  body { overscroll-behavior-y: none; }
}

/* v4.1.0: lønadministration og regnskabsårsstatus */
.fiscal-year-status { display:grid; gap:4px; border:1px solid var(--border); border-radius:11px; padding:11px 13px; background:var(--slate-50); }
.fiscal-year-status span { overflow-wrap:anywhere; }
.fiscal-year-status.verified { border-color:#aedcc8; background:#f1fbf6; }
.fiscal-year-status.manual { border-color:#c8bce8; background:#f8f6ff; }
.fiscal-year-status.warning { border-color:#ecd293; background:#fffaf0; }
.payroll-box { border:1px solid var(--border); border-radius:13px; padding:13px; background:var(--slate-50); }
.payroll-live { border-radius:10px; padding:11px; color:var(--slate-800); background:var(--white); font-weight:700; overflow-wrap:anywhere; box-shadow: var(--shadow-sm); }
@media (max-width:680px) { .payroll-box { padding:10px; } .fiscal-year-status { padding:10px; } }

/* v4.4.0: prepared disclosure controls for long navigation groups. */
.sidebar .nav-group-toggle { display:flex; width:100%; min-height:44px; align-items:center; justify-content:space-between; gap:8px; margin:2px 0; border:0; border-radius:11px; padding:9px 12px; color:#c8dcec; background:transparent; font-size:.875rem; font-weight:700; line-height:1.2; text-align:left; box-shadow:none; }
.sidebar .nav-group-toggle:hover { color:var(--white); border-color:transparent; background:rgba(255,255,255,.07); box-shadow:none; transform:none; }
.sidebar .nav-group-toggle::after { content:"+"; flex:0 0 auto; color:#8fb6d4; font-size:1rem; line-height:1; }
.sidebar .nav-group-toggle[aria-expanded="true"]::after { content:"−"; }
.nav-group-panel[hidden] { display:none; }

/* v4.4.0: small shared utilities replacing repeated inline presentation. */
.login-card-wide { width:min(860px,100%); }
.public-panel { margin-bottom:16px; box-shadow:none; }
.btn-block { width:100%; margin-top:12px; }
.auth-link { margin-top:14px; }
.space-top-xs { margin-top:8px; }
.space-top-sm { margin-top:10px; }
.space-top-md { margin-top:12px; }
.space-top-lg { margin-top:14px; }
.space-top-xl { margin-top:18px; }
.shadow-none { box-shadow:none; }
.inline-form-action { display:inline; }
.confirm-delete-input { max-width:90px; }
.is-hidden { display:none; }


/* v4.4.1: customer-facing offer readability and section rhythm. */
.public-offer-card { width:min(920px,100%); }
.public-offer-intro { max-width:68ch; margin:0 auto 20px; color:var(--slate-700); text-align:center; }
.offer-summary-panel > h2 { margin-bottom:4px; }
.offer-customer-section { margin-top:var(--space-lg); }
.offer-customer-section + .offer-customer-section { margin-top:var(--space-xl); border-top:1px solid var(--border); padding-top:var(--space-lg); }
.offer-customer-section h3 { margin:0 0 12px; }
.offer-section-help { margin:-4px 0 14px; text-align:left !important; }
.price-line-content { text-align:left; }
.price-line-content .help { display:block; text-align:left; white-space:pre-line; }
.price-line-cell { overflow-wrap:normal !important; word-break:normal !important; }
.price-line-value { display:grid; justify-items:end; gap:6px; text-align:right; overflow-wrap:normal; word-break:normal; }
.price-line-value .help { display:block; margin-top:0; }
.offer-line-gross { display:block; color:var(--slate-700); line-height:1.35; white-space:nowrap; }
.offer-line-suffix { font-weight:400; }
.offer-line-discount { display:block; width:max-content; max-width:none; color:var(--slate-600); font-size:.8rem; line-height:1.35; white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.offer-line-net { display:block; color:var(--navy-950); font-size:1rem; line-height:1.25; }
.offer-total-box { display:grid; gap:8px; margin-top:16px; border:1px solid var(--border); border-radius:10px; padding:14px; background:var(--slate-50); }
.offer-total-box > div { display:flex; justify-content:space-between; gap:16px; color:var(--slate-700); }
.offer-total-box span { font-size:.84rem; font-weight:700; }
.offer-total-box strong { color:var(--navy-900); white-space:nowrap; }
.offer-total-box-final { border-top:1px solid var(--border); padding-top:10px; }
.public-panel-action { margin:14px 0 0; }
.public-panel-action .btn { min-height:44px; }
.public-acceptance-panel { margin-bottom:0; }
.public-acceptance-panel form { display:grid; gap:2px; }
@media (max-width:680px) {
  .public-offer-card { padding:22px 16px; }
  .public-offer-intro { margin-bottom:16px; text-align:left; }
  .offer-customer-section { margin-top:18px; }
  .offer-customer-section + .offer-customer-section { margin-top:26px; padding-top:18px; }
  .price-section tbody td.price-line-cell { grid-template-columns:minmax(0,1fr); }
  .price-line-value { width:100%; justify-items:start; text-align:left; }
  .offer-line-gross { max-width:100%; white-space:normal; }
  .offer-line-gross strong, .offer-line-net { white-space:nowrap; }
  .offer-line-suffix { white-space:normal; }
  .offer-line-discount { width:auto; max-width:100%; white-space:normal; }
  .public-panel-action .btn { width:100%; }
}
@media (max-width:430px) {
  .offer-total-box > div { align-items:flex-start; flex-direction:column; gap:2px; }
}

/* =====================================================================
   RevisorPro CRM — Topmenu foundation v5.0.0
   The authenticated shell now uses a horizontal desktop menu and a
   compact mobile menu from the top. Legacy sidebar rules above are kept
   harmless for backward-compatible fixtures but are no longer rendered.
   ===================================================================== */
:root { --header-height: 68px; }
.app-shell { display: block; min-height: calc(100vh - var(--header-height)); }
.main { width: min(100%, var(--page-max-width)); margin: 0 auto; padding: 24px max(var(--page-padding), env(safe-area-inset-right)) 32px max(var(--page-padding), env(safe-area-inset-left)); }
.app-header { position: sticky; top: 0; z-index: 80; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.96); box-shadow: var(--shadow-sm); backdrop-filter: saturate(140%) blur(14px); }
.app-header-row { display: flex; width: min(100%, var(--page-max-width)); min-height: var(--header-height); align-items: center; gap: 18px; margin: 0 auto; padding: max(8px, env(safe-area-inset-top)) max(var(--page-padding), env(safe-area-inset-right)) 8px max(var(--page-padding), env(safe-area-inset-left)); }
.app-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap:7px; color: var(--navy-950); font-size: 1.03rem; font-weight: 850; letter-spacing: -.02em; white-space: nowrap; }
.app-brand-logo { width:30px; height:30px; flex:0 0 30px; border-radius:8px; object-fit:contain; }
.app-brand:hover { color: var(--navy-700); }
.desktop-navigation { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 1px; overflow-x: auto; scrollbar-width: none; }
.desktop-navigation::-webkit-scrollbar { display: none; }
.topnav-link { display: inline-flex; min-height: 42px; align-items: center; border-radius: 9px; padding: 8px 9px; color: var(--slate-700); font-size: .78rem; font-weight: 760; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.topnav-link:hover { color: var(--navy-900); background: var(--navy-50); }
.topnav-link.active { color: var(--navy-900); background: var(--navy-100); }
.header-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.header-tool { display: inline-flex; min-height: 42px; align-items: center; gap: 6px; border: 0; border-radius: 9px; padding: 7px 8px; color: var(--slate-700); background: transparent; font-size: .76rem; font-weight: 760; line-height: 1; text-decoration: none; box-shadow: none; }
.header-tool:hover { color: var(--navy-900); background: var(--navy-50); box-shadow: none; transform: none; }
.header-tool .icon { width: 17px; height: 17px; }
.profile-tool { min-height: 32px; gap: 5px; padding: 2px 7px 2px 2px; }
.profile-tool .user-avatar { width: 26px; height: 26px; font-size: .72rem; }
.popover-wrap { position: relative; }
.header-popover { position: absolute; top: calc(100% + 9px); right: 0; z-index: 95; width: min(340px, calc(100vw - 24px)); border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--white); box-shadow: var(--shadow-md); }
.header-popover[hidden] { display: none; }
.profile-popover small { color: var(--slate-600); }
.profile-popover { display: grid; gap: 3px; width: 260px; max-height: calc(100vh - var(--header-height) - 24px); max-height: calc(100dvh - var(--header-height) - 24px); overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.profile-push-settings { display: grid; gap: 5px; margin-top: 9px; border-top: 1px solid var(--border); padding-top: 9px; }
.profile-push-heading { color: var(--navy-900); font-size: .78rem; }
.profile-push-label { color: var(--slate-800); font-size: .78rem; font-weight: 650; }
.profile-push-state { color: var(--slate-600); font-size: .75rem; font-weight: 700; }
.profile-push-state[data-state="active"] { color: var(--success); }
.profile-push-state[data-state="blocked"] { color: var(--warning); }
.profile-push-help { color: var(--slate-600); line-height: 1.4; }
.profile-push-action { width: 100%; margin-top: 3px; }
.profile-popover-logout { display: none; }
.mobile-menu-button, .mobile-navigation { display: none; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-heading-copy { min-width: 0; }
.page-back-link { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; color: var(--text-muted); font-size: .78rem; font-weight: 700; }
.page-back-link:hover { color: var(--navy-900); }
.page-subtitle { max-width: 72ch; margin: 6px 0 0; color: var(--text-muted); font-size: .84rem; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.topbar-actions .header-action-form { display: inline-flex; margin: 0; }
.section-landing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.section-link { display: grid; min-height: 126px; align-content: start; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius); padding: 17px; color: var(--slate-800); background: var(--white); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.section-link:hover { border-color: var(--border-strong); color: var(--navy-900); box-shadow: var(--shadow); transform: translateY(-1px); }
.section-link .icon { display: block; width: 24px; height: 24px; color: var(--accent-strong); }
.section-link h2 { margin: 2px 0 0; }
.section-link p { margin: 0; color: var(--slate-600); }
.agreement-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.agreement-fields:disabled { opacity: .65; }

@media (max-width: 1100px) {
  .app-header-row { gap: 9px; }
  .desktop-navigation { display: none; }
  .mobile-menu-button { display: inline-flex; }
  .logout-tool { display: none; }
  .mobile-navigation { position: fixed; inset: 0; z-index: 400; display: block; overflow: hidden; }
  .mobile-navigation[hidden] { display: none; }
  .mobile-navigation-backdrop { position: absolute; inset: 0; background: rgba(8, 24, 41, .42); }
  .mobile-navigation-panel { position: absolute; inset: 0 0 0 auto; display: flex; width: min(360px, calc(100vw - 12px)); min-width: 0; flex-direction: column; overflow: hidden; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: var(--white); box-shadow: -10px 0 28px rgba(8, 24, 41, .14); }
  .mobile-navigation-head { display: flex; min-height: 50px; flex: 0 0 auto; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding: 0 0 8px 4px; color: var(--navy-900); }
  .mobile-navigation-head strong { font-size: .95rem; }
  .mobile-navigation-head .icon-button { flex: 0 0 44px; }
  .mobile-navigation-links { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 7px 2px 10px; scrollbar-gutter: stable; }
  .mobile-navigation-user { display: grid; min-width: 0; flex: 0 0 auto; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-top: 1px solid var(--border); padding: 10px 2px 0; }
  .mobile-navigation-user .user-avatar { width: 32px; height: 32px; font-size: .74rem; }
  .mobile-navigation-identity { display: grid; min-width: 0; gap: 2px; }
  .mobile-navigation-identity strong, .mobile-navigation-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-navigation-identity strong { color: var(--navy-950); font-size: .78rem; }
  .mobile-navigation-identity small { color: var(--slate-600); font-size: .68rem; }
  .mobile-navigation-logout { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; border-radius: var(--radius-sm); padding: 8px; color: var(--slate-700); font-size: .76rem; font-weight: 800; white-space: nowrap; }
  .mobile-navigation-logout:hover { color: var(--navy-900); background: var(--navy-50); }
  .mobile-navigation-logout .icon { width: 17px; height: 17px; }
}

@media (max-width: 680px) {
  :root { --header-height: 60px; --page-padding: 12px; }
  .app-header-row { padding: max(7px, env(safe-area-inset-top)) max(var(--page-padding), env(safe-area-inset-right)) 7px max(var(--page-padding), env(safe-area-inset-left)); }
  .app-brand { gap:6px; font-size:.95rem; }
  .app-brand-logo { width:28px; height:28px; flex-basis:28px; }
  .header-tools { margin-left: auto; gap: 0; }
  .header-tool { min-width: 42px; min-height: 44px; justify-content: center; padding: 6px; }
  .header-tool > span:not(.user-avatar) { display: none; }
  .profile-tool { padding: 4px; }
  .header-popover { position: fixed; top: calc(var(--header-height) + env(safe-area-inset-top) + 6px); right: 10px; left: 10px; width: auto; }
  .profile-popover { max-height: calc(100vh - var(--header-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); max-height: calc(100dvh - var(--header-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); }
  .profile-popover-logout { display:inline-flex; min-height:44px; align-items:center; gap:7px; margin-top:8px; border-top:1px solid var(--border); padding-top:8px; font-weight:750; }
  .main { width: 100%; padding: 18px max(var(--page-padding), env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(var(--page-padding), env(safe-area-inset-left)); }
  .page-heading { align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .page-back-link { min-height: 44px; max-width: 100%; align-items: center; margin-bottom: 2px; overflow-wrap: anywhere; white-space: normal; }
  .topbar-actions { justify-content: stretch; }
  .topbar-actions .btn { flex: 1 1 auto; }
  .topbar-actions .header-action-form, .topbar-actions .header-action-form .btn { width: 100%; }
  .section-landing { grid-template-columns: 1fr; gap: 10px; }
  .section-link { min-height: auto; padding: 14px; }
}

.users-layout { grid-template-columns:minmax(280px,360px) minmax(0,1fr); align-items:start; }
.users-form-panel { width:100%; max-width:360px; }
.users-form-panel .form-grid { grid-template-columns:1fr; }
.users-list-panel { min-width:0; }
@media (max-width:1180px) {
  .users-layout { grid-template-columns:1fr; }
  .users-form-panel { max-width:620px; }
}


/* v5.1.0 part 2 workflows */
.topnav-item{position:relative;display:inline-flex;align-items:center}.topnav-item>.topnav-link{height:100%}.topnav-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;background:#fff;border:1px solid rgba(15,23,42,.12);box-shadow:0 18px 45px rgba(15,23,42,.16);border-radius:16px;padding:8px;display:none;z-index:80}.topnav-item:hover .topnav-dropdown,.topnav-item:focus-within .topnav-dropdown{display:grid;gap:4px}.topnav-dropdown a{color:#0f172a;text-decoration:none;padding:10px 12px;border-radius:12px;font-weight:650}.topnav-dropdown a:hover{background:#f1f5f9}.mobile-navigation .topnav-item{display:block;border-bottom:1px solid var(--slate-100)}.mobile-navigation .topnav-item:last-child{border-bottom:0}.mobile-navigation .topnav-item>.topnav-link{width:100%;height:auto;min-height:44px;justify-content:flex-start;border:0;border-radius:8px;padding:10px 11px;text-align:left;white-space:normal}.mobile-navigation .topnav-item>.topnav-link.active{box-shadow:inset 3px 0 0 var(--accent)}.section-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.section-tabs a{padding:8px 12px;border-radius:999px;background:#eef2f7;text-decoration:none;color:#0f172a;font-weight:700}.quick-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.workflow-card{display:block;text-decoration:none;color:inherit}.stacked-form{display:grid;gap:14px}.stacked-form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.line-table input,.line-table select{min-width:110px}.status-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 9px;background:#eef2ff;font-weight:700;font-size:.82rem}.mobile-card-list{display:none}@media(max-width:760px){.mobile-card-list{display:grid;gap:12px}.desktop-table-only{display:none}.card-row{border:1px solid rgba(15,23,42,.1);border-radius:16px;padding:12px;background:#fff}.card-row strong{display:block}.card-row .actions{margin-top:10px}.topbar-actions{width:100%;justify-content:flex-start}.line-table{font-size:.9rem}.line-table th:nth-child(2),.line-table td:nth-child(2){display:none}}@media(max-width:430px){.stacked-form .row{grid-template-columns:1fr}.filters input,.filters select,.filters button,.filters .btn{width:100%}}
.topnav-dropdown { border-color: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.topnav-dropdown a { border-radius: var(--radius-sm); }
.section-tabs a { border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--slate-800); background: var(--surface-muted); }
.status-pill { border: 1px solid var(--slate-200); border-radius: var(--radius-sm); padding: 3px 8px; color: var(--slate-800); background: var(--slate-100); font-size: .69rem; font-weight: 800; }
.card-row { border-color: var(--border); border-radius: var(--radius); }

/* =====================================================================
   RevisorPro CRM — v5.2.0 part 3 reporting, administration and roles
   ===================================================================== */
.grid-5 { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.section-space-sm { margin-top:12px; }
.report-filter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.report-filter-grid label { display:block; margin-bottom:5px; color:var(--slate-700); font-size:.76rem; font-weight:800; }
.report-filter-grid input,.report-filter-grid select { width:100%; min-width:0; }
.section-tabs a.is-active { color:var(--white); background:var(--navy-900); }
.kpi-unavailable { border-style:dashed; background:var(--slate-50); }
.kpi-unavailable .number,.kpi-number-text { overflow-wrap:anywhere; word-break:break-word; }
.kpi-unavailable .number { color:var(--slate-700); font-size:.95rem; line-height:1.25; }
.check-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px 14px; }
.admin-note { border-left:4px solid var(--accent); padding:12px 14px; background:var(--navy-50); }
.chart { min-width:0; overflow:hidden; }
.chart-svg { width:100%; height:auto; display:block; }
.line-table { width:max-content; min-width:100%; }
@media (max-width:1200px) { .grid-5 { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .grid-5 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:430px) { .grid-5 { grid-template-columns:1fr; } .report-filter-grid { grid-template-columns:1fr; } .check-grid { grid-template-columns:1fr; } }

/* v5.2.0 desktop/mobile header cascade guard */
.header-tools .mobile-menu-button { display:none; }
@media (max-width:1100px) { .header-tools .mobile-menu-button { display:inline-flex; } }

/* Shared customer picker */
.rp-client-picker{position:relative;overflow:visible;z-index:10}
.rp-client-picker.is-open{z-index:250}
.rp-client-picker-wrap{position:relative}
.rp-client-picker-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;align-items:center}
.rp-client-picker-suggestions{position:absolute;inset:calc(100% + 6px) 0 auto;z-index:260;max-height:min(390px,62vh);overflow-y:auto;overscroll-behavior:contain;border:1px solid #d8e0ea;border-radius:10px;background:#fff;box-shadow:0 18px 42px rgba(15,23,42,.16);padding:4px}
.rp-client-picker-suggestions[hidden],.rp-client-picker [hidden]{display:none!important}
.rp-client-picker-option{appearance:none;-webkit-appearance:none;display:block!important;width:100%;min-height:48px;margin:0;border:0!important;border-bottom:1px solid #eef2f7!important;border-radius:8px!important;padding:10px 12px!important;color:#1f2937!important;background:#fff!important;font:inherit!important;font-size:.9rem!important;line-height:1.35!important;text-align:left!important;text-decoration:none!important;box-shadow:none!important;letter-spacing:0!important;transform:none!important}
button.rp-client-picker-option{justify-content:flex-start!important;align-items:flex-start!important;white-space:normal!important}
button.rp-client-picker-option:not(.icon-button),a.rp-client-picker-option{display:block!important;text-align:left!important;justify-content:flex-start!important;align-items:flex-start!important}
.rp-client-picker-option:last-child{border-bottom:0!important}
.rp-client-picker-option:hover,.rp-client-picker-option:focus,.rp-client-picker-option.is-active{color:#0f172a!important;background:#f5f8fc!important;outline:2px solid rgba(37,99,235,.16)!important;outline-offset:-2px;transform:none!important}
.rp-client-picker-suggestions .rp-client-picker-option{display:block!important;text-align:left!important;justify-content:flex-start!important;align-items:flex-start!important}
.rp-client-picker-option-line{display:block!important;width:100%!important;text-align:left!important;overflow-wrap:anywhere}
.rp-client-picker-option strong,.rp-client-picker-option span{display:inline!important}
.rp-client-picker-option .rp-client-picker-option-line{display:block!important;text-align:left!important}
.rp-client-picker-option strong,.rp-client-picker-match{font-weight:850;color:#111827}
.rp-client-picker-option span{margin-top:0!important;color:#4b5563!important;font-size:.9rem!important;font-weight:500!important}
.rp-client-picker-option-create{display:block!important;margin-top:4px!important;border-top:1px solid #d8e0ea!important;border-bottom:0!important;color:#0f3d63!important;font-weight:800!important;background:#f8fafc!important}
.rp-client-picker-option-create strong{display:block!important;color:#0f3d63}
.rp-client-picker-option-create span{display:block!important;margin-top:3px!important;color:#64748b!important;font-size:.82rem!important}
.rp-client-picker-option-empty{cursor:default!important;color:#64748b!important;background:#f8fafc!important}
.rp-client-picker-option-empty:hover{color:#64748b!important;background:#f8fafc!important;outline:0!important}
.rp-client-picker-status{margin-top:9px}
@media(max-width:520px){.rp-client-picker-row{grid-template-columns:1fr}.rp-client-picker-suggestions{max-height:min(350px,58vh)}}

/* =====================================================================
   RevisorPro CRM — UI/UX step 4 operational overviews
   ===================================================================== */
.client-overview-note { margin:0 0 var(--space-md); color:var(--slate-600); font-size:.78rem; }
.client-overview-table { min-width:860px; }
.client-overview-table th:nth-child(1) { width:14%; }
.client-overview-table th:nth-child(2) { width:34%; }
.client-overview-table th:nth-child(3) { width:28%; }
.client-overview-table th:nth-child(4) { width:24%; }
.client-number-link,.subscriber-number-link,.single-number-link,.offer-number-link,.kyc-number-link { color:var(--navy-900); font-weight:800; white-space:nowrap; }
.client-customer-name,.subscriber-customer-name,.single-customer-name,.offer-customer-name,.kyc-customer-name { display:block; color:var(--navy-900); font-weight:800; }
.client-customer-meta,.subscriber-customer-meta,.single-customer-meta,.offer-customer-meta,.kyc-customer-meta { display:block; margin-top:3px; color:var(--slate-600); font-size:.75rem; line-height:1.35; }
.client-monthly-payment { display:block; color:var(--slate-900); font-weight:800; white-space:nowrap; }
.client-agreement-types { display:flex; flex-wrap:wrap; gap:5px; }
.client-agreement-type { display:inline-flex; align-items:center; padding:3px 7px; border-radius:var(--radius-sm); font-size:.72rem; font-weight:800; }
.client-agreement-type-subscription { color:#175d86; background:#e8f3ff; }
.client-agreement-type-single { color:#267247; background:#eef8ee; }
.client-agreement-type-none { color:var(--slate-600); background:var(--slate-100); }
.client-mobile-list,.subscriber-mobile-list,.single-mobile-list,.offer-mobile-list,.kyc-mobile-list { display:none; }
.client-mobile-card,.subscriber-mobile-card,.single-mobile-card,.offer-mobile-card,.kyc-mobile-card { margin-bottom:10px; border:1px solid var(--border); border-radius:var(--radius); padding:12px; background:var(--white); }
.client-mobile-payment { margin:9px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:8px 0; }
.client-mobile-label { display:block; margin-bottom:4px; color:var(--slate-600); font-size:.68rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }

.subscriber-overview-table { min-width:900px; }
.subscriber-overview-table th:nth-child(1) { width:11%; }
.subscriber-overview-table th:nth-child(2) { width:23%; }
.subscriber-overview-table th:nth-child(3) { width:42%; }
.subscriber-overview-table th:nth-child(4),.subscriber-overview-table th:nth-child(5) { width:12%; }
.subscriber-task-list,.single-overview-table .agreement-task-list,.single-mobile-list .agreement-task-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.subscriber-task-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; border-bottom:1px solid var(--slate-100); padding:6px 0; }
.subscriber-task-item:first-child,.single-overview-table .agreement-task-list li:first-child,.single-mobile-list .agreement-task-list li:first-child { padding-top:0; }
.subscriber-task-item:last-child,.single-overview-table .agreement-task-list li:last-child,.single-mobile-list .agreement-task-list li:last-child { border-bottom:0; padding-bottom:0; }
.subscriber-task-main { display:flex; min-width:0; align-items:center; gap:5px 8px; flex-wrap:wrap; }
.subscriber-task-main strong,.single-overview-table .agreement-task-list li strong,.single-mobile-list .agreement-task-list li strong { overflow-wrap:anywhere; }
.subscriber-task-frequency { color:var(--slate-600); font-size:.7rem; font-weight:750; white-space:nowrap; }
.subscriber-task-price { align-self:center; color:var(--slate-900); font-size:.8rem; white-space:nowrap; }
.subscriber-task-price span { color:var(--slate-600); font-size:.7rem; }
.subscriber-task-detail { grid-column:1/-1; color:var(--slate-600); font-size:.73rem; line-height:1.35; }
.subscriber-overview-value,.offer-overview-value,.kyc-overview-value { font-weight:800; white-space:nowrap; }
.subscriber-mobile-values,.offer-mobile-values,.kyc-mobile-values { display:flex; gap:7px; flex-wrap:wrap; margin:9px 0 0; }
.subscriber-mobile-values { margin-bottom:9px; }
.subscriber-mobile-value,.offer-mobile-value,.kyc-mobile-value { display:inline-flex; flex-direction:column; gap:1px; border:1px solid var(--border); border-radius:8px; padding:6px 8px; background:var(--white); }
.subscriber-mobile-value span,.offer-mobile-value span,.kyc-mobile-value span { color:var(--slate-600); font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.subscriber-mobile-value strong,.offer-mobile-value strong,.kyc-mobile-value strong { font-size:.86rem; }
.subscriber-mobile-tasks,.single-mobile-tasks { margin-top:9px; }

.single-overview-table { min-width:800px; }
.single-overview-table th:nth-child(1) { width:16%; }
.single-overview-table th:nth-child(2) { width:27%; }
.single-overview-table th:nth-child(3) { width:57%; }
.single-overview-table .agreement-task-list li,.single-mobile-list .agreement-task-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; border-bottom:1px solid var(--slate-100); padding:6px 0; }
.single-overview-table .agreement-task-list li span,.single-mobile-list .agreement-task-list li span { color:var(--slate-900); font-size:.8rem; font-weight:800; white-space:nowrap; }

.offer-overview-table { min-width:760px; }
.offer-overview-table th:nth-child(1) { width:18%; }
.offer-overview-table th:nth-child(2) { width:42%; }
.offer-overview-table th:nth-child(3),.offer-overview-table th:nth-child(4) { width:20%; }

.kyc-overview-table { min-width:720px; }
.kyc-overview-table th:nth-child(1) { width:20%; }
.kyc-overview-table th:nth-child(2) { width:54%; }
.kyc-overview-table th:nth-child(3) { width:26%; }

.agenda-intro { margin-bottom:var(--space-md); }
.agenda-intro h2 { margin-bottom:3px; }
.agenda-date { margin:0; color:var(--slate-600); font-weight:750; }
.agenda-grid { display:grid; gap:var(--space-md); }
.agenda-list { display:grid; gap:0; }
.agenda-item { display:flex; justify-content:space-between; gap:14px; border-bottom:1px solid var(--slate-100); padding:9px 0; }
.agenda-item:first-child { padding-top:4px; }
.agenda-item:last-child { border-bottom:0; padding-bottom:0; }
.agenda-item-main { min-width:0; }
.agenda-item-main a,.agenda-item-main strong,.agenda-item-main span { display:block; }
.agenda-item-main a { text-decoration:none; }
.agenda-item-main span { margin-top:2px; color:var(--slate-700); }
.agenda-item-main small { display:block; margin-top:4px; color:var(--slate-600); }
.agenda-item-date { flex:0 0 auto; text-align:right; }
.agenda-item-date span,.agenda-item-date b { display:block; white-space:nowrap; }
.agenda-item-date span { color:var(--slate-600); font-size:.78rem; }
.agenda-item-date b { margin-top:3px; color:var(--navy-900); font-size:.78rem; }
.agenda-empty { margin:0; color:var(--slate-600); }
.agenda-sales-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-md); }
.agenda-sales-group { display:grid; align-content:start; gap:5px; }
.agenda-sales-group h3 { margin:0 0 2px; font-size:.85rem; }

@media (max-width:900px) {
  .agenda-sales-groups { grid-template-columns:1fr; }
  .agenda-item { align-items:flex-start; flex-direction:column; }
  .agenda-item-date { text-align:left; }
}
@media (max-width:760px) {
  .client-overview-note { margin-bottom:12px; }
  .data-table .cell-date,.data-table .cell-status { white-space:normal; }
  .client-mobile-list,.subscriber-mobile-list,.single-mobile-list,.offer-mobile-list,.kyc-mobile-list { display:block; }
  .subscriber-task-item,.single-mobile-list .agreement-task-list li { grid-template-columns:1fr; }
  .subscriber-task-price,.single-mobile-list .agreement-task-list li span { white-space:normal; }
  .subscriber-task-detail { grid-column:auto; }
}

/* =====================================================================
   RevisorPro CRM — UI/UX step 5 mobile/PWA refinements
   ===================================================================== */
body.mobile-menu-open { overflow:hidden; }

@media (max-width:680px) {
  .login-card { padding:24px 20px; }
  .login-logo { width:78px; height:78px; margin-bottom:18px; }

  .agenda-grid { gap:var(--space-sm); }
  .agenda-grid .panel { padding:14px; }
  .agenda-grid .panel > h2 { margin-bottom:8px; }
  .agenda-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:8px; padding:8px 0; }
  .agenda-item-main > a { display:flex; min-height:44px; flex-direction:column; justify-content:center; }
  .agenda-item-date { padding-top:4px; text-align:right; }

  .sales-leads-table tbody tr { display:flex; width:100%; flex-direction:column; }
  .sales-leads-table tbody td { width:100%; }
  .sales-leads-table tbody td[data-label="Virksomhed"] { order:1; }
  .sales-leads-table tbody td[data-label="Pipeline-status"] { order:2; }
  .sales-leads-table tbody td[data-label="Næste opfølgning"] { order:3; }
  .sales-leads-table tbody td[data-label="Kontakt"] { order:4; }
  .sales-leads-table tbody td[data-label="Handling"] { order:5; }
  .sales-leads-table tbody td[data-label="Kilde og interesse"] { order:6; }
  .sales-leads-table tbody td[data-label="Oprettet"] { order:7; }
}

@media (max-width:360px) {
  .mobile-navigation-panel { width:100%; }
  .agenda-item { grid-template-columns:1fr; }
  .agenda-item-date { padding-top:0; text-align:left; }
}