/* =====================================================================
   RevisorPro CRM — Design system v4.4.2
   Refined, calm, trustworthy UI for a Danish accounting / audit 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;

  /* --- 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;

  /* --- Elevation: softer, layered, deliberate --- */
  --shadow-sm: 0 1px 2px rgba(13, 38, 63, .05), 0 1px 3px rgba(13, 38, 63, .04);
  --shadow:    0 4px 12px rgba(13, 38, 63, .07), 0 2px 4px rgba(13, 38, 63, .05);
  --shadow-md: 0 12px 30px rgba(13, 38, 63, .10), 0 4px 10px rgba(13, 38, 63, .06);
  --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: 9px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

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

  --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(--paper); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; max-width: 100%; margin: 0;
  overflow-x: clip;
  color: var(--slate-950);
  background:
    radial-gradient(1200px 600px at 100% -10%, #eaf2f9 0%, rgba(234,242,249,0) 60%),
    var(--paper);
  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.4rem, 2.1vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.12; }
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: 44px; max-width: 100%; align-items: center; gap: 6px; color: var(--slate-700); font-size: .76rem; 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: 18px; margin-bottom: 22px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--white), #fbfdfe); 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: 20px; }
.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: 17px; }
.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: 18px; }
.section-space { margin-top: 22px; }
.muted, .help { color: var(--slate-600); 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, button:not(.icon-button) { display: inline-flex; max-width: 100%; overflow-wrap: normal; white-space: nowrap; text-align: center; min-height: 44px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--navy-800); border-radius: 10px; padding: 9px 16px; color: var(--white); background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); font-size: .83rem; font-weight: 700; letter-spacing: .005em; line-height: 1.1; box-shadow: var(--shadow-sm); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .12s ease; }
.btn:hover, button:not(.icon-button):hover { color: var(--white); border-color: var(--navy-950); background: linear-gradient(180deg, var(--navy-800), var(--navy-950)); box-shadow: var(--shadow); transform: translateY(-1px); }
.btn:active, button:not(.icon-button):active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn.secondary, button.secondary { color: var(--navy-900); border-color: #b3cfe2; background: linear-gradient(180deg, var(--white), var(--navy-50)); box-shadow: var(--shadow-sm); }
.btn.secondary:hover, button.secondary:hover { color: var(--navy-950); border-color: #8fb6d4; background: var(--navy-100); }
.btn.light, button.light { color: var(--slate-800); border-color: var(--border); background: var(--white); box-shadow: none; }
.btn.light:hover, button.light:hover { color: var(--navy-900); border-color: var(--border-strong); background: var(--slate-50); }
.btn.danger, button.danger { color: var(--white); border-color: #97202a; background: linear-gradient(180deg, #c12d39, var(--red-700)); }
.btn.danger:hover, button.danger:hover { background: linear-gradient(180deg, var(--red-700), #97202a); }
.btn.small, button.small { min-height: 44px; padding: 7px 11px; border-radius: 9px; font-size: .76rem; }
button:disabled, .btn[aria-disabled="true"] { 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: 6px; color: var(--slate-800); font-size: .77rem; font-weight: 750; }
input, select, textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 12px; color: var(--slate-950); background: var(--white); transition: border-color .15s ease, box-shadow .15s ease, background .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: #fff; }
textarea { min-height: 100px; resize: vertical; line-height: 1.55; }
input[type="checkbox"], input[type="radio"] { width: 20px; min-height: 20px; 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(3, minmax(0, 1fr)); gap: 16px; }
.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: 9px; align-items: center; }
.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; margin-bottom: 18px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 12px; padding: 13px 15px; background: var(--white); font-size: .85rem; box-shadow: var(--shadow-sm); }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert-success { color: #0f5a39; border-color: #a9ddc1; background: #f3fcf7; }
.alert-error { color: #8d1d27; border-color: #eeaeb5; background: #fef6f6; }
.alert-warning { color: #6f4e00; border-color: #ecd293; background: #fffbf0; }
.badge { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; border-radius: var(--radius-pill); padding: 4px 10px; font-size: .69rem; font-weight: 800; line-height: 1.2; letter-spacing: .01em; overflow-wrap: anywhere; text-align: center; white-space: normal; }
.badge-neutral { color: var(--slate-800); background: var(--slate-100); }
.badge-blue { color: #135082; background: var(--blue-100); }
.badge-green { color: var(--green-700); background: var(--green-100); }
.badge-yellow { color: var(--yellow-800); background: var(--yellow-100); }
.badge-red { color: var(--red-700); background: var(--red-100); }

/* ---------- Tables ---------- */
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
table { width: 100%; max-width: 100%; border-collapse: collapse; background: var(--white); font-size: .82rem; }
th, td { min-width: 0; padding: 12px 14px; 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: #f3f7fb; font-size: .67rem; font-weight: 850; letter-spacing: .06em; 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: #f8fbfe; }
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; }
.empty-state { display: grid; gap: 5px; place-items: center; min-height: 120px; padding: 24px; color: var(--slate-600); border-radius: var(--radius); background:
    radial-gradient(circle at 50% 0%, #fbfdff, #f5f9fc);
  border: 1px dashed var(--border-strong); text-align: center; }
.empty-state strong { color: var(--slate-800); font-size: .92rem; }
.empty-state span { max-width: 540px; font-size: .8rem; }

/* ---------- 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(230px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.pipeline-column { min-height: 250px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: linear-gradient(180deg, #f3f7fb, #eef4f9); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.pipeline-column h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 1px 12px; font-size: .85rem; }
.pipeline-column.drop-target { border-color: var(--accent); background: #e9f4fb; box-shadow: inset 0 0 0 1px var(--accent); }
.pipeline-card { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--white); box-shadow: var(--shadow-sm); cursor: grab; transition: box-shadow .16s ease, transform .12s ease, border-color .16s ease; }
.pipeline-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); transform: translateY(-1px); }
.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 { margin-top: 5px; color: var(--slate-600); font-size: .75rem; line-height: 1.55; }
.pipeline-status-control { display: grid; gap: 3px; margin-top: 11px; }
.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: 36px; padding: 7px 9px; font-size: .75rem; }
.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 { display: grid; grid-template-columns: minmax(130px, 1fr) auto; gap: 6px; }
.deadline-completed-form input { min-width: 0; }
.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; }
.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: 280px; overflow: hidden; }
.chart-svg { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; }
.chart-data { margin-top: 10px; border-top: 1px solid var(--slate-100); padding-top: 9px; }
.chart-data summary { cursor: pointer; color: var(--navy-800); font-size: .76rem; font-weight: 800; }
.chart-data-list { display: grid; gap: 5px; margin-top: 8px; }
.chart-data-row { display: grid; grid-template-columns: minmax(86px, 34%) minmax(0, 1fr); gap: 8px; color: var(--slate-700); font-size: .74rem; }
.chart-data-row strong, .chart-data-row span { min-width: 0; overflow-wrap: anywhere; }
.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 { 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-series-0 { fill: #1f7aa8; stroke: #1f7aa8; background: #1f7aa8; }
.chart-series-1 { fill: #2d8b67; stroke: #2d8b67; background: #2d8b67; }
.chart-series-2 { fill: #bd7a22; stroke: #bd7a22; background: #bd7a22; }
.chart-series-3 { fill: #6f6aa8; stroke: #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: 150px; 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); }

/* ---------- Page-load entrance (subtle, accessible) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .panel, .card, .toolbar, .table-wrap { animation: rp-rise .4s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes rp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- 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)); }
  .filters input:first-child { grid-column: 1 / -1; }
  th { position: static; }
}
@media (max-width: 680px) {
  body { font-size: 13px; }
  .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, button: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-inline, .quick-actions, .filters, .filters-compact, .filters-deadline, .deadline-settings-form, .inline-settings-form { grid-template-columns: 1fr; }
  .filters input:first-child { grid-column: auto; }
  .toolbar, .panel-header { align-items: stretch; flex-direction: column; }
  .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[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.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; }
  .deadline-completed-form { grid-template-columns: 1fr; }
  .definition-item dl { grid-template-columns: 1fr; gap: 2px; }
  .definition-item dd { margin-bottom: 7px; }
  .chart { min-height: 0; overflow: hidden; }
  .chart-data-row { grid-template-columns: 1fr; gap: 1px; }
  .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, button:not(.icon-button) { overflow-wrap: anywhere; white-space: normal; }
}

/* 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; }
  .app-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* 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; }
.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; }
  .public-panel-action .btn { width:100%; }
}

/* =====================================================================
   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%, 1600px); margin: 0 auto; padding: 24px 32px 32px; }
.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; min-height: var(--header-height); align-items: center; gap: 18px; padding: max(8px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left)); }
.app-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; color: var(--navy-950); font-size: .95rem; font-weight: 850; letter-spacing: -.02em; white-space: nowrap; }
.app-brand:hover { color: var(--navy-700); }
.app-brand-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; background: var(--white); padding: 4px; box-shadow: var(--shadow-sm); }
.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; }
.header-create { color: var(--white); background: var(--navy-900); padding-right: 10px; }
.header-create:hover { color: var(--white); background: var(--navy-800); }
.profile-tool { padding: 4px 7px 4px 4px; }
.profile-tool .user-avatar { width: 32px; height: 32px; }
.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; }
.search-popover label { display: block; margin-bottom: 6px; color: var(--navy-900); font-size: .76rem; font-weight: 800; }
.search-row { display: flex; gap: 7px; }
.search-row input { min-width: 0; }
.action-popover { display: grid; gap: 4px; width: 270px; }
.action-popover a { display: flex; min-height: 52px; align-items: center; gap: 10px; border-radius: 9px; padding: 8px; color: var(--slate-800); }
.action-popover a:hover { background: var(--navy-50); }
.action-popover .icon { flex: 0 0 auto; color: var(--accent-strong); }
.action-popover span { display: grid; gap: 2px; }
.action-popover small, .profile-popover small { color: var(--slate-600); }
.profile-popover { display: grid; gap: 3px; width: 240px; overflow-wrap: anywhere; }
.mobile-menu-button, .mobile-navigation { display: none; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.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 { color: var(--accent-strong); }
.section-link h2 { margin: 2px 0 0; }
.section-link p { margin: 0; color: var(--slate-600); }

@media (max-width: 1100px) {
  .app-header-row { gap: 9px; }
  .desktop-navigation { display: none; }
  .mobile-menu-button { display: inline-flex; }
  .mobile-navigation { display: block; border-top: 1px solid var(--border); padding: 10px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: var(--white); box-shadow: var(--shadow); }
  .mobile-navigation[hidden] { display: none; }
  .mobile-navigation-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: var(--navy-900); }
  .mobile-navigation-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .mobile-navigation-links .topnav-link { min-height: 46px; justify-content: center; border: 1px solid var(--border); padding: 8px 5px; text-align: center; white-space: normal; }
}

@media (max-width: 680px) {
  :root { --header-height: 60px; }
  .app-header-row { padding: max(7px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 7px max(8px, env(safe-area-inset-left)); }
  .app-brand { gap: 7px; font-size: .86rem; }
  .app-brand-logo { width: 31px; height: 31px; }
  .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; }
  .header-create { padding: 6px; }
  .profile-tool { padding: 4px; }
  .logout-tool { display: none; }
  .header-popover { position: fixed; top: calc(var(--header-height) + env(safe-area-inset-top) + 6px); right: 10px; left: 10px; width: auto; }
  .main { width: 100%; padding: 18px max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .page-heading { align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .topbar-actions { justify-content: stretch; }
  .topbar-actions .btn { flex: 1 1 auto; }
  .mobile-navigation-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-landing { grid-template-columns: 1fr; gap: 10px; }
  .section-link { min-height: auto; padding: 14px; }
}


/* 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}.mobile-navigation .topnav-dropdown{position:static;display:grid;box-shadow:none;border:0;background:transparent;padding:0 0 8px 16px}.mobile-navigation .topnav-dropdown a{padding:8px 10px;font-size:.95rem}.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}.topnav-dropdown a{font-size:.9rem}.filters input,.filters select,.filters button,.filters .btn{width:100%}}

/* =====================================================================
   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; }
.dashboard-kpi-section .grid-5 .number { font-size:clamp(1.05rem,1.7vw,1.52rem); }
.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)); } .dashboard-kpi-section .grid-5 .number { font-size:1rem; } }
@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; } }