/*  ============================================================
   app.css: alla stilar för CRM:et i en fil (UX-paketet steg 2, 2026-09-26)
   Del 1 är den gamla style.css (grund), del 2 den gamla ui.css (appens
   design ovanpå). Ordningen är densamma som när de låg i två filer.
   Talangmodulens regler ligger i talent.css, som laddas efter den här.
   ============================================================  *//*  ===================== DEL 1: GRUND (fd style.css) =====================  *//* ============================================================
   Älvfalk CRM - Design System
   Refined, editorial, precise
   ============================================================ */

/* Typsnitten ligger på egen server (fas M1, 2026-09-27): snabbare än Google Fonts och inga
   besökaruppgifter skickas till Google. Samma typsnitt som förut: Manrope 200 till 800 och
   Fraunces 600 med optisk storlek (samma urval som Google levererade). */
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("fonts/fraunces-latin-ext-opsz-normal.woff2") format("woff2"); unicode-range: U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
    --bg: #fafaf7;
    --bg-elevated: #ffffff;
    --bg-sunken: #f3f2ed;
    --ink: #1a1a1a;
    --ink-muted: #5a5a55;
    --ink-subtle: #8a8a82;
    --line: #e5e3dc;
    --line-strong: #c9c7bd;
    --accent: #2d4a2b;
    --accent-soft: #e8ede3;
    --rust: #a84a1e;
    --gold: #b8923a;
    --danger: #a23030;
    --success: #2d6a4f;
    --shadow: 0 1px 2px rgba(20, 20, 15, 0.04), 0 4px 12px rgba(20, 20, 15, 0.04);
    --shadow-lg: 0 2px 4px rgba(20, 20, 15, 0.06), 0 12px 32px rgba(20, 20, 15, 0.08);
    --radius: 6px;
    --radius-lg: 10px;
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Manrope", -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    /* Sidebar är alltid mörk oavsett tema */
    --sidebar-bg: #1a1a1a;
    --sidebar-ink: #e8e7e2;
    /* Primary button — alltid mörk bakgrund, ljus text */
    --btn-bg: #1a1a1a;
    --btn-ink: #ffffff;
}

/* ============================================================
   DARK MODE — klassisk dämpad palett
   Aktiveras via <body data-theme="dark"> (toggle i sidebar)
   ============================================================ */
body[data-theme="dark"] {
    --bg: #1a1a1a;
    --bg-elevated: #242424;
    --bg-sunken: #131313;
    --ink: #e8e7e2;
    --ink-muted: #b0afa8;
    --ink-subtle: #7a7975;
    --line: #333330;
    --line-strong: #4a4a45;
    --accent: #7ab57a;
    --accent-soft: #1f2e1d;
    --rust: #d97755;
    --gold: #d4a85a;
    --danger: #d96868;
    --success: #5cb085;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.4);
    /* I dark mode: sidebaren får en aning mörkare bakgrund så den sticker ut */
    --sidebar-bg: #0d0d0d;
    --sidebar-ink: #e8e7e2;
    /* Primary button i dark mode — ljus bakgrund, mörk text (omvänt) */
    --btn-bg: #e8e7e2;
    --btn-ink: #1a1a1a;
}

/* Färgschema-meta för formulär, scrollbars, etc */

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

html, body {
    height: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.15s;
}

a:hover {
    opacity: 0.7;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
h4 { font-size: 15px; font-family: var(--font-body); }

/* ============================================================
   Layout
   ============================================================ */

.app {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-ink);
    padding: 24px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 0 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
}

.sidebar-brand h1 {
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 2px;
}

.sidebar-brand span {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sidebar-nav {
    flex: 1;
    padding: 0 12px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius);
    margin-bottom: 2px;
    font-size: 14px;
    transition: all 0.15s;
}

.sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    opacity: 1;
}

.sidebar-nav a.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sidebar-nav .nav-icon {
    width: 18px;
    height: 18px;
}

/* Bricka för sådant som väntar, till exempel formulärsvar */
.sidebar-nav .nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--gold, #c9a227);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.sidebar-section {
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.sidebar-user {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
}

.sidebar-user .user-name {
    color: #fff;
}

.sidebar-user .user-email {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.sidebar-user a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-top: 8px;
    display: inline-block;
}

/* Theme-toggle-knapp i sidebar */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}
.theme-toggle-btn .theme-toggle-icon-light,
.theme-toggle-btn .theme-toggle-icon-dark {
    font-size: 14px;
    line-height: 1;
}
/* I light mode (default): visa månen (klicka för att gå till dark) */
.theme-toggle-btn .theme-toggle-icon-light { display: none; }
.theme-toggle-btn .theme-toggle-icon-dark { display: inline; }
/* I dark mode: visa solen (klicka för att gå tillbaka till light) */
body[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon-light { display: inline; }
body[data-theme="dark"] .theme-toggle-btn .theme-toggle-icon-dark { display: none; }
.theme-toggle-btn .theme-toggle-label { flex: 1; text-align: left; }

.main {
    padding: 32px 40px;
    max-width: 1400px;
    min-width: 0;
}

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.page-header h1 {
    font-size: 38px;
    line-height: 1;
}

.page-header .subtitle {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    margin-top: 6px;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--btn-bg);
    color: var(--btn-ink);
    border: 1px solid var(--btn-bg);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn:hover {
    opacity: 0.85;
}

.btn-secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-secondary:hover {
    background: var(--bg-sunken);
    opacity: 1;
}

.btn-ghost {
    background: transparent;
    color: var(--ink-muted);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--bg-sunken);
    color: var(--ink);
    opacity: 1;
}

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

.btn-sm {
    font-size: 12px;
}

/* ============================================================
   Cards & Tables
   ============================================================ */

.card {
    background: var(--bg-elevated);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h2, .card-header h3 {
    margin: 0;
}

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

table th {
    text-align: left;
    font-family: var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    font-weight: 500;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
}

table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    vertical-align: middle;
}

table tr:last-child td {
    border-bottom: none;
}

table tr:hover td {
    background: var(--bg-sunken);
}

table tr.clickable {
    cursor: pointer;
}

/* ============================================================
   Forms
   ============================================================ */

.form-group {
    margin-bottom: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

label {
    display: block;
    font-size: 12px;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    transition: border-color 0.15s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea {
    resize: vertical;
    min-height: 90px;
    font-family: var(--font-body);
}

select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    appearance: none;
}

/* ============================================================
   Badges & Pills
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 99px;
    background: var(--bg-sunken);
    color: var(--ink);
    letter-spacing: 0.02em;
}

.stage-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 99px;
    background: var(--bg-sunken);
    color: var(--ink);
    border: 1px solid var(--line);
}

.stage-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stage-color, var(--ink-subtle));
}

/* ============================================================
   Dashboard stats
   ============================================================ */

/* På smalare skärm: bryt till 2-rader-layout */

/* ============================================================
   Funnel / Kanban
   ============================================================ */

.funnel {
    display: grid;
    grid-template-columns: repeat(var(--col-count, 5), minmax(240px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 20px;
    min-height: 500px;
}

.funnel-col {
    background: var(--bg-sunken);
    border-radius: var(--radius-lg);
    padding: 12px;
    min-width: 240px;
}

.funnel-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 12px;
    margin-bottom: 8px;
}

.funnel-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.funnel-col-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.funnel-col-count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-subtle);
    background: var(--bg-elevated);
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid var(--line);
}

.funnel-card {
    background: var(--bg-elevated);
    margin-bottom: 8px;
    cursor: grab;
    transition: all 0.15s;
}

.funnel-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.funnel-card.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.funnel-col.drag-over {
    background: var(--accent-soft);
}

.funnel-card-title {
    margin-bottom: 2px;
}

.funnel-card-sub {
    font-size: 12px;
    color: var(--ink-muted);
}

.funnel-card-meta {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    color: var(--ink-subtle);
    font-family: var(--font-mono);
}

/* ============================================================
   Activity timeline
   ============================================================ */

/* ============================================================
   Tabs
   ============================================================ */

.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
    position: relative; /* för att Mer-dropdown ska positioneras relativt här */
}

.tab {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
}

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

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

/* ============================================================
   Detail pages
   ============================================================ */

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
}

/* ============================================================
   Alerts & messages
   ============================================================ */

.alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid;
}

.alert-success {
    background: #eef7f0;
    color: var(--success);
    border-color: #c5e0cc;
}

.alert-error {
    background: #fbeeee;
    color: var(--danger);
    border-color: #e8c5c5;
}

.alert-info {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: #c9d4c4;
}

/* ============================================================
   Empty states
   ============================================================ */

.empty {
    text-align: center;
    color: var(--ink-muted);
}

.empty h3 {
    font-family: var(--font-display);
    color: var(--ink);
    margin-bottom: 8px;
}

.empty p {
    margin-bottom: 20px;
}

/* ============================================================
   Login page
   ============================================================ */

.login-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--bg);
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(45, 74, 43, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(168, 74, 30, 0.03) 0%, transparent 50%);
}

.login-card {
    background: var(--bg-elevated);
    padding: 44px;
    width: 100%;
    max-width: 420px;
}

.login-card h1 {
    font-family: var(--font-display);
    font-size: 36px;
    margin-bottom: 4px;
}

.login-card .login-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    margin-bottom: 32px;
}

/* ============================================================
   Utilities
   ============================================================ */

.flex { display: flex; }
.gap-sm { gap: 8px; }
.mt-sm { margin-top: 8px; }
.mb-lg { margin-bottom: 24px; }
.text-muted { color: var(--ink-muted); }
.text-subtle { color: var(--ink-subtle); }
.text-sm { font-size: 12px; }
.mono { font-family: var(--font-mono); }

/* Tvåkolumns-layout som kollapsar på mobil */

/* ===== Tasks: Visa fler-knapp och kollapsat formulär ===== */

.add-task-details {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    overflow: hidden;
}

.add-task-details > summary {
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: background 0.15s;
}

.add-task-details > summary::-webkit-details-marker {
    display: none;
}

.add-task-details > summary:hover {
    background: var(--bg-sunken);
}

.add-task-details[open] > summary {
    border-bottom: 1px solid var(--line);
}

.add-task-details > .card-body {
    padding: 20px;
}

/* ===== Pipeline: Fasgrupperad vy på dashboard ===== */

/* Lös start (Prospect) och slut (Vunnen) — kompakta vertikala badges */

/* Mellansektionen: faser bredvid varandra */

/* Mobil: stackat vertikalt (en fas per rad) */

/* ===== Kalender: Månadsnavigering ===== */

/* ===== iCal-sync: diskret utfällbar ===== */

.cal-sync-url {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 12px;
    background: #fff !important;
    padding: 10px 12px;
}

.cal-sync-note {
    margin-top: 12px !important;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    color: var(--ink-subtle);
    font-style: italic;
}

/* ===== Pipeline: "Utan stadium" som diskret utfällbar ===== */
.unassigned-details {
    margin-bottom: 24px;
}

.unassigned-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: transparent;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--ink-muted);
    font-size: 13px;
    list-style: none;
    user-select: none;
    transition: all 0.15s;
}

.unassigned-summary::-webkit-details-marker {
    display: none;
}

.unassigned-summary:hover {
    border-color: var(--ink-subtle);
    color: var(--ink);
    background: var(--bg-elevated);
}

.unassigned-summary-arrow {
    font-family: var(--font-mono);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 12px;
}

.unassigned-details[open] .unassigned-summary {
    border-style: solid;
    border-color: var(--ink-subtle);
    color: var(--ink);
    background: var(--bg-elevated);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.unassigned-details[open] .unassigned-summary-arrow {
    transform: rotate(90deg);
}

.unassigned-content {
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--ink-subtle);
    border-top: none;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.unassigned-item {
    display: inline-block;
    padding: 7px 12px;
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}

.unassigned-item:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ===== Dashboard tabs (Min dag / Översikt) ===== */
.dashboard-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--bg-sunken);
    border-radius: var(--radius);
    width: fit-content;
}

.dashboard-tab {
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.dashboard-tab:hover {
    color: var(--ink);
}

.dashboard-tab.active {
    background: var(--bg-elevated);
    color: var(--ink);
}

/* ===== Min dag-vy ===== */

.mydag-checkbox-form {
    margin: 0;
    flex-shrink: 0;
}

.mydag-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid var(--ink-subtle);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.mydag-checkbox:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.mydag-checkbox::after {
    content: "✓";
    font-size: 14px;
    color: transparent;
    font-weight: bold;
    line-height: 1;
}

.mydag-checkbox:hover::after {
    color: var(--accent);
}

/* ===== Snabb-anteckning på person ===== */
.quick-note-form {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s;
}

.quick-note-form:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.quick-note-types {
    display: flex;
    flex-wrap: wrap;
}

.quick-note-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: var(--bg-sunken);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ink-muted);
    transition: all 0.15s;
    user-select: none;
}

.quick-note-type input {
    display: none;
}

.quick-note-type .quick-note-label,
.quick-note-type span:not(.type-direction-arrow) {
    /* Stödjer både gammal markup (bara span) och ny (.quick-note-label) */
    padding: 0;
    background: transparent;
    border: none;
}

.quick-note-type:hover {
    color: var(--ink);
}

.quick-note-type:has(input:checked) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* Fallback för browsers utan :has() */
.quick-note-type input:checked + .quick-note-label,
.quick-note-type input:checked + span {
    color: inherit;
}

/* Direction-pil i typ-knapp — visuell indikator (hela knappen är klickbar) */
.type-direction-arrow {
    display: none;  /* Default dold */
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    margin-left: 2px;
    transition: transform 0.2s ease, color 0.2s;
    color: var(--accent);
    pointer-events: none;  /* Klicket går till hela labeln */
}

/* Visa pilen bara när typen är vald */
.quick-note-type.has-active-direction .type-direction-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* IN-läge: blå färg + roterad pil */
.type-direction-arrow[data-direction="in"] {
    color: #2c5d8c;
}

.quick-note-type.has-active-direction:has(.type-direction-arrow[data-direction="in"]) {
    background: rgba(70, 130, 180, 0.12);
    border-color: rgba(70, 130, 180, 0.4);
    color: #2c5d8c;
}

/* När knappen är vald + direction-typ → visa "klickbar" cursor */
.quick-note-type.has-active-direction {
    cursor: pointer;
    position: relative;
}

.quick-note-text {
    width: 100%;
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    resize: vertical;
    min-height: 48px;
    outline: none;
    line-height: 1.5;
}

.quick-note-text::placeholder {
    color: var(--ink-subtle);
}

.quick-note-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.quick-note-hint {
    font-size: 11px;
    color: var(--ink-subtle);
    font-family: var(--font-mono);
}

@media (max-width: 900px) {
    .quick-note-hint {
        display: none;
    }
    .quick-note-actions {
        justify-content: flex-end;
    }
}

/* ===== Ring- och SMS-knappar (klassen finns på knapparna i kortets topp) ===== */
.comm-btn {
    flex: 1;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
    user-select: none;
}

.comm-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    transform: translateY(-1px);
}

.comm-btn:active {
    transform: translateY(0);
}

/* ===== Återvändar-prompt efter samtal ===== */
.call-return-prompt {
    background: var(--accent-soft);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-bottom: 24px;
    animation: callReturnPulse 0.5s ease-out;
}

@keyframes callReturnPulse {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.call-return-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
}

.call-return-header strong {
    font-size: 15px;
    color: var(--accent);
}

.call-return-subtitle {
    font-size: 13px;
    color: var(--ink-muted);
}

.call-return-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.call-return-option {
    cursor: pointer;
    flex: 1;
    min-width: 100px;
}

.call-return-option input {
    display: none;
}

.call-return-option span {
    display: block;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
    font-size: 13px;
    color: var(--ink-muted);
    transition: all 0.15s;
}

.call-return-option:hover span {
    border-color: var(--accent);
    color: var(--ink);
}

.call-return-option input:checked + span {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    font-weight: 600;
}

.call-return-notes {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 10px;
    resize: vertical;
}

.call-return-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.cancel-action-btn {
    color: var(--ink-subtle) !important;
    font-size: 13px !important;
}

.cancel-action-btn:hover {
    color: var(--danger) !important;
}

/* ===== Follow-up datum-rad ===== */
.followup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    flex-wrap: wrap;
}

.followup-toggle {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.followup-toggle input {
    display: none;
}

.followup-toggle span {
    display: inline-block;
    padding: 5px 11px;
    background: var(--bg-sunken);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink-muted);
    transition: all 0.15s;
}

.followup-toggle:hover span {
    color: var(--ink);
}

.followup-toggle input:checked + span {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.followup-datetime {
    font-family: var(--font-body);
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    color: var(--ink);
    transition: opacity 0.15s;
}

.followup-datetime:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Min dag: uppföljnings-aktivitet (skiljer från vanlig task) ===== */

/* tasks.php: visuell markering för uppföljningar */

/* ===== Läsläge: göm allt som skulle skapa/ändra data ===== */
/* Stora form-kort som leder till skapande */
body[data-readonly="1"] .quick-note-form,
body[data-readonly="1"] .add-task-details,
body[data-readonly="1"] .call-return-prompt {
    display: none !important;
}

/* Funnel: korten kan visas men inte dras */
body[data-readonly="1"] .funnel-card {
    cursor: default !important;
}

/* Submit-knappar inom POST-formulär — alla utgrå, kan inte klickas */
body[data-readonly="1"] form[method="post"] button[type="submit"],
body[data-readonly="1"] form[method="post"] input[type="submit"] {
    opacity: 0.4;
    pointer-events: none;
}

/* Checkboxar/toggle som postar — också utgrå */
body[data-readonly="1"] .mydag-checkbox,
body[data-readonly="1"] .followup-toggle input {
    opacity: 0.4;
    pointer-events: none;
}

/* ===== Läsläge-banner ===== */
.readonly-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: linear-gradient(90deg, #fef3c7, #fde68a);
    border: 1px solid #b8923a;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(184, 146, 58, 0.15);
}

.readonly-banner-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.readonly-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.readonly-banner-text strong {
    font-size: 14px;
    color: #78350f;
    letter-spacing: 0.02em;
}

.readonly-banner-text span {
    font-size: 13px;
    color: #92400e;
}

/* ===== Users page ===== */

.user-name {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-email {
    font-size: 13px;
    color: var(--ink-subtle);
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* ===== Säkerhetsöversikt på users.php ===== */

.security-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--ink);
    font-size: 14px;
    list-style: none;
    user-select: none;
    transition: all 0.15s;
}

.security-summary::-webkit-details-marker {
    display: none;
}

.security-summary:hover {
    border-color: var(--ink-subtle);
}

.security-summary-arrow {
    font-family: var(--font-mono);
    color: var(--ink-subtle);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.security-details[open] .security-summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.security-failed-count {
    display: inline-block;
    margin-left: 12px;
    padding: 3px 9px;
    background: #fee;
    color: var(--danger);
    font-size: 11px;
    border-radius: 999px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.security-content {
    padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-top: none;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.security-empty {
    color: var(--ink-subtle);
    font-style: italic;
    margin: 0;
}

.security-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.security-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--ink-subtle);
    font-weight: 600;
    text-transform: uppercase;
}

.security-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.security-table tr:last-child td {
    border-bottom: none;
}

.security-row-fail {
    background: rgba(220, 38, 38, 0.04);
}

.security-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-subtle);
    white-space: nowrap;
}

.security-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.security-ok {
    background: var(--accent-soft);
    color: var(--accent);
}

.security-fail {
    background: #fee;
    color: var(--danger);
}

.security-note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    color: var(--ink-subtle);
    font-style: italic;
}

/* ============================================================
   REPORT.PHP — Månadsrapport
   ============================================================ */

/* SUMMARY GRID */

/* COMMENT BLOCKS */

/* PIPELINE TABLE */

/* EVENTS GRID */

/* SHORTLIST */

/* STALLED */

/* PRINT */
@media print {
    .sidebar, .sidebar-backdrop, .bottom-nav, .mobile-topbar, .page-header, .readonly-banner, .alert, nav, aside, header {
        display: none !important;
    }
    
    .app { display: block !important; grid-template-columns: 1fr !important; }
    .main { padding: 0 !important; max-width: none !important; margin: 0 !important; }
    
    body { margin: 0; padding: 0; }
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    @page { size: A4 landscape; margin: 1.2cm; }
}

/* Mobil-anpassningar */
@media (max-width: 900px) {
    .dashboard-tabs {
        width: 100%;
    }
    .dashboard-tab {
        text-align: center;
        padding: 10px 8px;
    }
}

/* ============================================================
   MOBILE - skärmar under 900px
   ============================================================ */

/* ============================================================
   MOBIL (≤900px) — Komplett omarbetad UX för iPhone Safari
   ============================================================ */

@media (max-width: 900px) {
    /* iOS safe areas */
    :root {
        --safe-top: env(safe-area-inset-top, 0);
        --safe-bottom: env(safe-area-inset-bottom, 0);
    }

    html, body {
        -webkit-tap-highlight-color: transparent;
        -webkit-text-size-adjust: 100%;
        overscroll-behavior-y: contain;
    }

    body {
        font-size: 15px;
    }

    /* Layout */
    .app {
        display: block;
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* ===== Topbar (hamburger + titel) ===== */
    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        padding: calc(env(safe-area-inset-top, 0) + 8px) 16px 8px;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 52px;
    }

    .mobile-topbar-title {
        font-family: var(--font-display);
        flex: 1;
    }

    .hamburger {
        background: none;
        border: none;
        width: 40px;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
        padding: 0;
    }

    .hamburger span {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
        transition: all 0.2s;
    }

    /* ===== Sidomeny som drawer ===== */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        padding-top: calc(env(safe-area-inset-top, 0) + 20px);
        padding-bottom: calc(env(safe-area-inset-bottom, 0) + 20px);
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
    }

    .sidebar-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* ===== Main content ===== */
    .main {
        padding: 14px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0) + 80px);
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 18px;
        padding-bottom: 14px;
    }

    .page-header h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    .page-header .subtitle {
        font-size: 10px;
    }

    /* Header-knappar tar full bredd */
    .page-header .flex,
    .page-header > form {
        width: 100%;
    }

    .page-header .btn {
        width: 100%;
        min-height: 46px;
    }

    .page-header .flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-header .flex .btn {
        flex: 1;
    }

    /* ===== Bottom Nav Bar ===== */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-elevated);
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        padding-bottom: env(safe-area-inset-bottom, 0);
        z-index: 50;
    }

    .bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 10px 2px;
        color: var(--ink-subtle);
        font-size: 11px;
        letter-spacing: 0.01em;
        text-decoration: none;
        min-height: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bottom-nav a svg {
        width: 22px;
        height: 22px;
    }

    .bottom-nav a.active {
        color: var(--ink);
    }

    .bottom-nav a.active svg {
        stroke: var(--accent);
    }

    /* ===== Stats grid (mobil) ===== */

    /* ===== Dashboard split layout ===== */
    .main div[style*="grid-template-columns: 1fr 380px"],
    .main div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    

    /* Inline-grids i kort (TB-portfölj etc.) */
    .card-body div[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    /* ===== Cards ===== */
    .card {
        border-radius: 10px;
        margin-bottom: 14px;
    }

    .card-body {
        padding: 14px;
    }

    .card-body.tight {
        padding: 0;
    }

    .card-header {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-header h3 {
        font-size: 15px;
    }

    /* ===== LISTOR: Kompakta kort på mobil ===== */
    .card > table {
        display: block;
    }

    .card > table thead {
        display: none;
    }

    .card > table tbody {
        display: block;
    }

    /* En rad = en kompakt kortlist-rad */
    .card > table tr {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
        background: var(--bg-elevated);
        position: relative;
        min-height: 64px;
    }

    .card > table tr:active {
        background: var(--bg-sunken);
    }

    .card > table tr.clickable {
        cursor: pointer;
    }

    /* Avatar */
    .card > table tr::before {
        content: attr(data-initials);
        width: 38px;
        height: 38px;
        background: var(--accent-soft);
        color: var(--accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        flex-shrink: 0;
    }

    /* DÖLJ ALLA TD som default — bara namn + senast visas */
    .card > table td {
        display: none;
    }

    /* Första td (namn) — synlig som primär text */
    .card > table td:nth-child(1) {
        display: block;
        flex: 1;
        min-width: 0;
        font-size: 15px;
        color: var(--ink);
        font-weight: 600;
        line-height: 1.3;
        padding: 0;
        border: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Sista td (senast aktivt) — som litet meta i högra sidan */
    .card > table tr td:last-child:not(:first-child) {
        display: block;
        flex: 0 0 auto;
        font-size: 11px;
        color: var(--ink-subtle);
        font-family: var(--font-mono);
        white-space: nowrap;
        padding: 0;
        border: none;
    }

    /* "X RESULTAT"-rubriken */
    .card > div[style*="font-family: var(--font-mono)"] {
        padding: 10px 14px !important;
        font-size: 11px !important;
    }

    /* Sortering på mobil — dropdown istället för klickbara rubriker */

    /* ===== Sökformulär på listsidor — vertikal stack ===== */
    .card form[method="get"] {
        flex-wrap: wrap !important;
        padding: 12px !important;
        gap: 8px !important;
    }

    .card form[method="get"] input[type="text"],
    .card form[method="get"] input[type="search"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        order: 1;
    }

    .card form[method="get"] select,
    .card form[method="get"] input[type="date"] {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        order: 2;
    }

    .card form[method="get"] button {
        flex: 0 0 auto !important;
        min-width: 90px !important;
        width: auto !important;
        order: 3;
    }

    .card form[method="get"] a.btn {
        flex: 0 0 auto !important;
        width: auto !important;
        order: 4;
    }

    /* Aktiv/Passiv-flikar */
    .tabs[style*="margin-bottom: 20px"] {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tabs[style*="margin-bottom: 20px"] .tab {
        flex-shrink: 0;
        font-size: 13px;
        padding: 10px 14px;
    }

    /* ===== DETAIL: Ordning på mobil ===== */
    .detail-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    /* Status-rutan flyttas överst för fokus/aktiva personer */
    .detail-grid.status-first-mobile {
        display: flex;
        flex-direction: column;
    }

    .detail-grid.status-first-mobile > div:nth-child(2) {
        order: -1;
    }

    /* ===== Tabs på mobil — segmented control + Mer-meny ===== */
    .tabs {
        display: flex !important;
        gap: 4px;
        background: var(--bg-sunken);
        padding: 4px;
        border-radius: 10px;
        border: 1px solid var(--line);
        margin: 0 0 18px 0;
        position: relative;
    }

    /* Alla tabs blir lika breda i segmented control */
    .tab {
        flex: 1 1 0;
        text-align: center;
        padding: 10px 8px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        border-radius: 7px;
        background: transparent;
        color: var(--ink-muted);
        border-bottom: none !important;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    .tab.active {
        background: var(--bg-elevated);
        color: var(--ink);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        border-bottom: none !important;
    }

    /* Sekundära tabs gömda i segmented control — endast i Mer-dropdown */
    .tab-secondary {
        display: none !important;
    }

    /* Mer-knappen */
    .tab-more {
        flex: 0 0 auto;
        min-width: 64px;
        font-weight: 600;
        color: var(--ink-muted);
    }

    .tab-more.active {
        background: var(--accent);
        color: #fff;
    }

    /* Dropdown för Mer-knappen */
    .tab-more-dropdown {
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        background: var(--bg-elevated);
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        z-index: 50;
        min-width: 200px;
        overflow: hidden;
    }

    .tab-more-dropdown .tab {
        display: block !important;
        flex: none;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        text-align: left;
        font-size: 14px;
        color: var(--ink);
    }

    .tab-more-dropdown .tab:last-child {
        border-bottom: none;
    }

    .tab-more-dropdown .tab.active {
        background: var(--accent-soft) !important;
        color: var(--accent) !important;
    }

    .tab-more-dropdown .tab:active {
        background: var(--bg-sunken) !important;
    }

    /* ===== Snabblogg-knappar ===== */
    .card div[style*="display: flex"][style*="gap: 8px"][style*="align-items: center"][style*="flex-wrap: wrap"] {
        padding: 14px !important;
        gap: 8px !important;
    }

    .card div[style*="display: flex"][style*="flex-wrap: wrap"] form button {
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        font-weight: 500;
    }

    /* ===== Formulär ===== */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
        padding: 13px 14px;
        font-size: 16px; /* 16px+ förhindrar iOS auto-zoom */
        border-radius: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .btn {
        padding: 13px 20px;
        font-size: 15px;
        border-radius: 10px;
        min-height: 46px;
    }

    .btn-sm {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Status-knappar i timeline (markera genomförd / avboka / radera) */
    

    

    /* ===== Funnel/Kanban på mobil ===== */
    .funnel {
        display: block;
        padding-bottom: 0;
    }

    .funnel-col {
        margin-bottom: 10px;
        min-width: 0;
        background: var(--bg-elevated);
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
    }

    /* Accordion-läge på mobil */

    .funnel-card {
        cursor: pointer;
        margin-bottom: 8px;
    }

    .funnel-card-title {
        font-size: 15px;
    }

    .funnel-card-move {
        display: flex;
        gap: 6px;
    }

    .funnel-card-move button {
        background: var(--bg-sunken);
        border: 1px solid var(--line);
        color: var(--ink-muted);
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 11px;
        font-family: var(--font-mono);
        cursor: pointer;
        min-height: 34px;
    }

    /* ===== Timeline ===== */
    

    

    

    

    /* ===== FAB ===== */

    /* ===== Login ===== */
    .login-card {
        padding: 30px 24px;
        margin: 16px;
        max-width: 100%;
    }

    .login-wrap {
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* ===== Alerts ===== */
    .alert {
        padding: 12px 14px;
        font-size: 13px;
    }

    /* ===== Stage-pills ===== */
    .stage-pill {
        display: inline-flex;
        white-space: nowrap;
    }

    /* ===== Dölj desktop-only element ===== */
    .desktop-only {
        display: none !important;
    }

    /* ===== Kalender: Månadsnavigering på mobil ===== */

    /* ===== Kalender: Agenda-vy på mobil ===== */

    /* ===== Kalender på mobil ===== */
    .cal-month-grid {
        font-size: 11px;
    }

    .cal-day {
        min-height: 70px !important;
        padding: 4px !important;
    }

    .cal-day-number {
        font-size: 11px !important;
    }

    .cal-event {
        font-size: 9px !important;
        padding: 1px 3px !important;
    }

    .cal-weekday {
        padding: 6px 2px !important;
        font-size: 9px !important;
    }

    /* ===== Importsidans tabeller — håll dem läsbara ===== */
    .main form .card table th[style*="min-width"] {
        min-width: auto !important;
    }
}

/* ===== Desktop-only elements ===== */
@media (min-width: 901px) {
    .mobile-topbar,
    .bottom-nav,
    .sidebar-backdrop,
    .hamburger,
    .mobile-topbar-title,
    .funnel-card-move,
    .mobile-only {
        display: none !important;
    }
}

/* Touch-feedback */
@media (hover: none) {
    .funnel-card:active,
    .btn:active,
    .card.clickable:active,
    table tr.clickable:active {
        opacity: 0.7;
    }
}

/* ============================================================
   STAGE-TRIGGER MODAL — för konstellation/partnerbolag-val
   ============================================================ */
.stage-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.stage-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 25, 45, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

.stage-modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px 32px 24px;
}

.stage-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--ink-subtle);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--radius);
    transition: all 0.15s;
}

.stage-modal-close:hover {
    background: var(--bg-sunken);
    color: var(--ink);
}

.stage-modal-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 10px;
    padding-right: 30px;
}

.stage-modal-intro {
    font-size: 13px;
    color: var(--ink-subtle);
    margin: 0 0 20px;
}

.stage-modal-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-subtle);
    font-weight: 600;
    margin: 12px 0 8px;
}

.stage-modal-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.stage-modal-option {
    text-align: left;
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}

.stage-modal-option:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateX(2px);
}

.stage-modal-option-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}

.stage-modal-option-meta {
    font-size: 11px;
    color: var(--ink-subtle);
    margin-top: 3px;
}

.stage-modal-divider {
    text-align: center;
    color: var(--ink-subtle);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 16px 0;
    position: relative;
}

.stage-modal-divider::before,
.stage-modal-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 30px);
    height: 1px;
    background: var(--line);
}

.stage-modal-divider::before { left: 0; }
.stage-modal-divider::after { right: 0; }

.stage-modal-create {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stage-modal-create input[type="text"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
}

.stage-modal-create button {
    padding: 10px 16px;
    font-size: 14px;
}

.stage-modal-search {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 10px;
}

.stage-modal-loading,
.stage-modal-success,
.stage-modal-error {
    padding: 24px;
    text-align: center;
    border-radius: var(--radius);
    font-size: 14px;
    line-height: 1.5;
}

.stage-modal-loading {
    color: var(--ink-subtle);
    font-style: italic;
}

.stage-modal-success {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}

.stage-modal-error {
    background: #fee;
    color: var(--danger);
}

/* Toast */
.stage-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--btn-bg);
    color: var(--btn-ink);
    padding: 12px 22px;
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    z-index: 1100;
    font-size: 14px;
    opacity: 0;
    transition: all 0.3s;
    max-width: calc(100vw - 40px);
}

.stage-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    .stage-modal-content {
        padding: 22px 18px 18px;
        max-height: 90vh;
    }
    .stage-modal-title {
        font-size: 17px;
    }
}

/* ============================================================
   ALLIANSBOLAG-BADGE — markerar Hub & Spoke partnerbolag
   ============================================================ */

.form-help {
    font-size: 12px;
    color: var(--ink-subtle);
    margin-top: 4px;
    line-height: 1.4;
    font-style: italic;
}

/* ============================================================
   ALLIANSBOLAG (alliances.php / alliance.php)
   ============================================================ */
.alliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.alliance-card {
    background: linear-gradient(135deg, #fafdf9 0%, #f0f6ed 100%);
    border-left: 3px solid var(--accent);
    text-decoration: none;
    color: inherit;
    display: block;
}

.alliance-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

.alliance-card-name {
    color: var(--ink);
}

.alliance-status {
    border-radius: 999px;
    flex-shrink: 0;
}

.alliance-status.status-active {
    background: var(--accent);
    color: white;
}

.alliance-status.status-renegotiation {
    background: #b8923a;
    color: white;
}

.alliance-status.status-paused {
    background: var(--ink-subtle);
    color: white;
}

.alliance-status.status-expired {
    background: var(--danger);
    color: white;
}

.alliance-card-meta {
    color: var(--ink-subtle);
    margin-bottom: 10px;
}

.alliance-card-stats {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-subtle);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(45, 74, 43, 0.15);
}

.alliance-stat {
    white-space: nowrap;
}

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

/* ============================================================
   PERSON.PHP — Alliansmedlemskap-pills
   ============================================================ */

/* ============================================================
   REPORT.PHP — Tillägg för alliansbolag och nya summary-grupper
   ============================================================ */

/* ============================================================
   PEOPLE.PHP — Alliansbolag i listan
   ============================================================ */

/* ============================================================ */
/* WORD CONFIRM MODAL                                            */
/* ============================================================ */
.word-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; animation: wcFadeIn 0.15s ease; }
@keyframes wcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.word-confirm-modal { background: var(--bg-card,#fff); border-radius: 12px; padding: 24px 28px; max-width: 460px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.25); animation: wcSlideUp 0.2s ease; }
@keyframes wcSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.word-confirm-title { margin: 0 0 12px 0; font-size: 18px; color: var(--ink,#1a1a1a); }
.word-confirm-message { margin: 0 0 12px 0; color: var(--ink,#1a1a1a); line-height: 1.45; }
.word-confirm-item { background: var(--bg-sunken,#f4f4f0); border-left: 3px solid var(--rust,#b8923a); padding: 10px 14px; border-radius: 4px; font-weight: 500; margin: 0 0 14px 0; word-break: break-word; }
.word-confirm-warning { color: #c0392b; font-size: 13px; margin: 0 0 16px 0; font-weight: 500; }
.word-confirm-instruction { margin: 0 0 8px 0; color: var(--ink-subtle,#6b6b6b); font-size: 14px; }
.word-confirm-instruction strong { color: var(--ink,#1a1a1a); font-family: ui-monospace,"SF Mono",Menlo,monospace; background: var(--bg-sunken,#f4f4f0); padding: 2px 8px; border-radius: 3px; letter-spacing: 0.05em; }
.word-confirm-input { width: 100%; padding: 10px 14px; font-size: 16px; border: 2px solid var(--line,#e0e0d8); border-radius: 6px; font-family: ui-monospace,"SF Mono",Menlo,monospace; letter-spacing: 0.05em; box-sizing: border-box; background: #fff; color: var(--ink,#1a1a1a); }
.word-confirm-input:focus { outline: none; border-color: var(--rust,#b8923a); }
.word-confirm-buttons { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.word-confirm-buttons button { padding: 9px 20px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; font-family: inherit; font-weight: 500; transition: all 0.15s; }
.word-confirm-cancel { background: var(--bg-sunken,#f4f4f0); color: var(--ink,#1a1a1a); }
.word-confirm-cancel:hover { background: var(--line,#e0e0d8); }
.word-confirm-go { background: #d0d0d0; color: #888; cursor: not-allowed; }
.word-confirm-go-active { background: #c0392b !important; color: #fff !important; cursor: pointer !important; }
.word-confirm-go-active:hover { background: #a93324 !important; }

/* ============================================================ */
/* FUNNEL SCROLL-KNAPPAR                                         */
/* Inga ändringar i .funnel — knapparna ligger ovanpå           */
/* ============================================================ */

.funnel-wrapper {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.funnel-scroll-btn {
    position: absolute;
    top: 40px;  /* nära funnel-headerns höjd */
    width: 40px;
    height: 60px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--line, #e0e0d8);
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    font-size: 18px;
    color: var(--ink, #1a1a1a);
    transition: opacity 0.2s, background 0.15s, top 0.15s;
}

.funnel-scroll-btn:hover:not(:disabled) {
    background: var(--bg-elevated, #f4f4f0);
}

.funnel-scroll-btn:disabled {
    opacity: 0;
    pointer-events: none;
}

.funnel-scroll-btn.left { left: 8px; }
.funnel-scroll-btn.right { right: 8px; }

/* Sticky-läge: när man har scrollat ner i funneln,
   låt knapparna stanna kvar i viewporten via JS */
.funnel-scroll-btn.is-sticky {
    position: fixed;
    top: 50vh;
    transform: translateY(-50%);
    /* left/right sätts av JS för att matcha funnelns position */
}

@media (max-width: 700px) {
    .funnel-scroll-btn { display: none !important; }
}

/* ============================================================
   MOBILE-FIRST AUDIT v1 — 2026-04-28
   ============================================================
   Globala mobilförbättringar baserade på audit:
   - Mindre page-headers
   - Kompaktare tabbar
   - Mindre formulärfält
   - Vänster-justering i loggbok
   - Mindre info-banners
   ============================================================ */

@media (max-width: 700px) {
    
    /* ---- Page headers (mindre dödutrymme) ---- */
    .page-header {
        padding-bottom: 12px !important;
        margin-bottom: 16px !important;
    }
    
    .page-header h1 {
        font-size: 26px !important;
        line-height: 1.15 !important;
        margin: 0 0 4px 0 !important;
    }
    
    /* Kategori-text ovanför h1 (DASHBOARD, FÖRETAG · DETALJER etc.) */
    .page-header .subtitle,
    .page-header > .text-muted {
        font-size: 10px !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 2px !important;
    }
    
    /* ---- Tab-rader (Min dag / Översikt etc.) ---- */
    .dashboard-tabs,
    [class*="tab-bar"] {
        padding: 4px !important;
        gap: 4px !important;
    }
    
    .dashboard-tab {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 36px !important;
    }
    
    /* ---- Stat-kort (på Översikt-fliken) ---- */
    
    /* ---- Formulär (Lägg till aktivitet etc.) ---- */
    .form-group,
    .field {
        margin-bottom: 14px !important;
    }
    
    .form-group label,
    .field label,
    label.form-label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
        font-weight: 500 !important;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="search"],
    select,
    textarea {
        padding: 10px 12px !important;
        font-size: 16px !important;  /* iOS no-zoom */
        min-height: 42px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    textarea {
        min-height: 80px !important;
    }
    
    /* ---- Kort/cards (mindre padding) ---- */
    .card {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }
    
    .card.tight {
        padding: 12px !important;
    }
    
    .card h2 {
        font-size: 17px !important;
        margin-bottom: 12px !important;
    }
    
    /* ---- Loggbok-aktiviteter (vänster-justering) ---- */
    
    
    
    
    /* ---- Pipeline info-banner (mindre) ---- */
    
    /* ---- Stora "+ Person/+ Bolag" knappar i page-header (dölj på mobil) ---- */
    /* FAB tar över rollen */
}

/* ---- iPhone SE och mindre ---- */
@media (max-width: 380px) {
    .page-header h1 {
        font-size: 22px !important;
    }
    
    .card {
        padding: 12px !important;
    }
}

/* ============================================================
   FLOATING ACTION BUTTON (FAB)
   ============================================================
   + Person / + Bolag som flytande knapp på mobil
   ============================================================ */

.fab-container {
    display: none;  /* Default: dolt på desktop */
}

@media (max-width: 700px) {
    .fab-container {
        display: block;
        position: fixed;
        /* Bottennav är 56px hög + safe-area-inset-bottom.
           Vi vill ha FAB ovanför bottennav med tydlig luft. */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
        right: 16px;
        z-index: 100;
    }
    
    .fab-main {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #1a1a1a;
        color: #fff;
        border: none;
        font-size: 32px;
        font-weight: 300;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(0,0,0,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s, background 0.2s;
        line-height: 1;
        padding-bottom: 4px;
        font-family: -apple-system, sans-serif;
    }
    
    .fab-main:active {
        transform: scale(0.95);
    }
    
    .fab-main.open {
        transform: rotate(45deg);
        background: #c0392b;
    }
}

/* ============================================================
   DIRECTION (ingående/utgående) — UI
   ============================================================ */

/* Liten pil bredvid aktivitetstypen */
.direction-arrow {
    display: inline-block;
    margin-left: 2px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    vertical-align: baseline;
}

.direction-arrow.direction-out {
    color: var(--accent, #2d4a2b);  /* Grönt — utgående */
}

.direction-arrow.direction-in {
    color: var(--rust, #c0392b);  /* Rött — inkommande */
}

/* Direction-rad i snabblogga (i quick-note-form) */
.direction-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.direction-label {
    font-size: 12px;
    color: var(--ink-subtle, #666);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Direction-flip: en flippbar knapp, ↗ Ut → ↙ In */
.direction-flip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border: 1px solid;
    border-radius: 999px;
    background: var(--accent-soft, #e8f5e8);
    border-color: rgba(45, 74, 43, 0.2);
    color: var(--accent, #2d4a2b);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    min-height: 30px;
}

.direction-flip:hover {
    filter: brightness(0.97);
}

.direction-flip:active {
    transform: scale(0.97);
}

.direction-flip-icon {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.25s ease;
    transform: rotate(0deg);
}

.direction-flip-label {
    line-height: 1;
}

/* IN-läge: blå färgschema, ikonen flippad 180° */
.direction-flip[data-direction="in"] {
    background: rgba(70, 130, 180, 0.12);
    border-color: rgba(70, 130, 180, 0.3);
    color: #2c5d8c;
}

.direction-flip[data-direction="in"] .direction-flip-icon {
    transform: rotate(180deg);
}

/* Direction-row i Logga utförligt (full bredd, samma stil som andra form-rows) */
.direction-row-detailed {
    display: flex;
    gap: 12px;
}

@media (max-width: 700px) {
    .direction-row {
        flex-wrap: wrap;
    }
    .direction-flip {
        padding: 8px 14px 8px 12px;
        font-size: 14px;
        min-height: 36px;
    }
    .direction-flip-icon {
        font-size: 16px;
    }
}

/* ============================================================
   GLOBAL SÖK
   ============================================================ */

/* === Trigger i mobile-topbar (mobil) === */
.search-trigger-topbar {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--ink-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    transition: background 0.15s;
    margin-left: auto;
}

.search-trigger-topbar:active {
    background: var(--bg-sunken);
}

.search-trigger-topbar svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
}

/* === Flytande sökknapp på desktop === */
.search-trigger-floating {
    display: none;
}

@media (min-width: 901px) {
    .search-trigger-floating {
        position: fixed;
        top: 18px;
        right: 22px;
        z-index: 100;
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 50%;
        background: var(--bg-elevated);
        border: 1px solid var(--line);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
        cursor: pointer;
        color: var(--ink-subtle);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s ease;
    }
    
    .search-trigger-floating:hover {
        background: var(--bg);
        border-color: var(--ink-subtle);
        color: var(--ink);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }
    
    .search-trigger-floating:active {
        transform: translateY(0);
    }
    
    .search-trigger-floating svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        fill: none;
    }
}

/* === Backdrop === */
.gs-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 998;
}

.gs-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* === Modal === */
.gs-modal {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 92%;
    max-width: 600px;
    max-height: calc(100vh - 140px);
    background: var(--bg-elevated);
    border-radius: 14px;
    box-shadow: 
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 20px 60px rgba(0, 0, 0, 0.18);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.gs-modal.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* === Modal header (sökfält) === */
.gs-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elevated);
}

.gs-modal-icon {
    color: var(--ink-subtle);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.gs-modal-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
}

.gs-modal-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: var(--ink);
    font-family: inherit;
    padding: 4px 0;
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
}

.gs-modal-input::-webkit-search-cancel-button,
.gs-modal-input::-webkit-search-decoration {
    -webkit-appearance: none;
}

.gs-modal-input::placeholder {
    color: var(--ink-muted);
}

.gs-modal-esc {
    font-size: 11px;
    color: var(--ink-muted);
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    padding: 2px 7px;
    border-radius: 5px;
    font-family: ui-monospace, Menlo, monospace;
    flex-shrink: 0;
}

/* === Resultat === */
.gs-modal-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 8px;
    -webkit-overflow-scrolling: touch;
}

.gs-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.5;
}

.gs-loading {
    padding: 24px 20px;
    text-align: center;
    color: var(--ink-muted);
    font-size: 13px;
}

.gs-section {
    padding: 4px 0 8px;
}

.gs-section-header {
    padding: 10px 18px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

.gs-section-count {
    color: var(--ink-muted);
    font-weight: 400;
}

.gs-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    text-decoration: none;
    color: var(--ink);
    transition: background 0.1s;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.gs-result:hover,
.gs-result.selected {
    background: var(--bg-sunken);
}

.gs-result.selected {
    border-left-color: var(--accent);
    background: var(--accent-soft);
}

.gs-result-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--ink-subtle);
    letter-spacing: -0.02em;
}

.gs-result-body {
    flex: 1;
    min-width: 0;
}

.gs-result-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.gs-result-context {
    font-size: 12px;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
    line-height: 1.3;
}

.gs-result-meta {
    font-size: 11px;
    color: var(--ink-muted);
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

.gs-result mark {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    padding: 0 2px;
    border-radius: 2px;
}

/* === Mobil-anpassning === */
@media (max-width: 700px) {
    .gs-modal {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        transform: translateY(-10px);
    }
    
    .gs-modal.open {
        transform: translateY(0);
    }
    
    .gs-modal-header {
        padding: calc(env(safe-area-inset-top, 0) + 12px) 16px 12px;
    }
    
    .gs-modal-input {
        font-size: 16px;  /* iOS no-zoom */
    }
    
    .gs-modal-esc {
        display: none;
    }
}

/* ============================================================
   MOBIL: förhindra horizontell sid-scroll vid lång inklistrad text
   ============================================================ */
@media (max-width: 900px) {
    /* Förhindra horizontell scroll på hela sidan */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    /* Säkerställ att main-content håller sig inom skärmbredd */
    .main {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Card-body skall kunna krympa men inte spräcka */
    .card-body, .card {
        min-width: 0;
        max-width: 100%;
    }
    
    /* Timeline aktivitets-text — bryt långa rader */
    
    
    /* Detail-grid och nested cards */
    .detail-grid {
        min-width: 0;
        max-width: 100%;
    }
    
    /* Pre-formaterad text (om någon klistrar kod-liknande) */
    pre, code {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        max-width: 100%;
    }
    
    /* Tab-row får inte spräcka layouten */
    .tabs {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   PARTICIPANT CHIPS — kompakta deltagar-piller
   ============================================================ */

/* ============================================================
   DEMO-LÄGE (testkonto / readonly)
   ============================================================ */

/* Banner i toppen */
.demo-banner {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.demo-banner strong {
    font-weight: 700;
}

@media (max-width: 700px) {
    .demo-banner {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* Justera sidebar och topbar så de inte täcks av banner */
body[data-demo="1"] .sidebar {
    top: 36px;  /* Banner-höjden */
    height: calc(100vh - 36px);
}

body[data-demo="1"] .search-trigger-floating {
    top: 54px;  /* 18 + 36 (banner) */
}

body[data-demo="1"] .mobile-topbar {
    top: 30px;  /* mobil banner-höjd */
}

body[data-demo="1"] .gs-modal {
    top: 116px;  /* 80 + 36 */
}

@media (max-width: 700px) {
    body[data-demo="1"] .sidebar {
        top: 30px;
        height: calc(100vh - 30px);
    }
    body[data-demo="1"] .gs-modal {
        top: 30px;
    }
}

/* ===== DEMOLÄGE =====
   Persondata maskeras på servern (includes/demo_mask.php) innan sidan skickas.
   Därför behövs ingen suddighet här längre: det som syns är redan påhittat. */

/* Print: dölj allt för readonly */
@media print {
    body[data-demo="1"] {
        display: none;
    }
}

/* ============================================================
   Inline-uppgifter på person/company-kort — kompakt enrads-form
   ============================================================ */

/* Datum: kalenderikon som triggar native datepicker */
/* Dölj native datepicker-ikonen som vissa browsers visar */

/* Plus-knapp: liten cirkulär */

/* Task-rader på person/company-kort */

/* ============================================================
   Historik-collapse: visa 3 senaste, expand för resten
   ============================================================ */

/* ============================================================
   Försenade-badge på Uppgifter-rubriken
   ============================================================ */

/* ============================================================
   Mobile-only: dölj "Logga utförligt" på mobil
   ============================================================ */

/* ============================================================
   Mobil: Aktivitet-kortet överst på Översikt-pane
   ============================================================ */
/* ============================================================
   Defensiv: säkerställ att hidden-attribut döljer dashboard-paner
   ============================================================ */
.dashboard-pane[hidden] {
    display: none !important;
}

@media (max-width: 768px) {
    .dashboard-pane[data-pane="overview"]:not([hidden]) {
        display: flex;
        flex-direction: column;
    }
    /* Default: alla element renderas i HTML-ordning, fast bakom prioriterade */
    .dashboard-pane[data-pane="overview"]:not([hidden]) > * {
        order: 10;
    }
    /* Element med data-mobile-priority hamnar först (1 = högst upp) */
    .dashboard-pane[data-pane="overview"]:not([hidden]) > [data-mobile-priority="1"] {
        order: 1;
    }
}

/* ============================================================
   Pipeline utan prospect-ruta: ändra grid till 1fr auto
   ============================================================ */

/* TB-rutor: undvik radbrytning av MSEK-värden */

/* ============================================================
   Konfetti-state: när "Försenade enligt cadens" är tomt
   ============================================================ */

/* ============================================================
   Hall of Shame
   ============================================================ */

/* ============================================================
   Bokningsnyckel
   ============================================================ */

/* ============================================================
   Mobil: krymp Cadens-konfetti-state
   ============================================================ */

/* ============================================================
   Tomma rader i timeline: hantera via kompakta paragrafer
   ============================================================ */

/* ============================================================
   Mobil: Bokningsnyckeln — kompaktare layout
   ============================================================ */

/* ============================================================
   FAS 0.5 (2026-09-24): läsbara flikar och större klickytor
   Ligger sist i filen så att reglerna vinner över äldre mobilregler.
   ============================================================ */

/* Ikonknappar (papperskorg m.m.): minst 44 x 44 px klickyta */

/* Kryssrutorna i Min dag och Uppgifter: osynlig klickyta runt rutan */
.mydag-checkbox {
    position: relative;
}
.mydag-checkbox::before {
    content: "";
    position: absolute;
    inset: -11px;
}

/* Sidomenyns fot (Säkerhet, Logga ut) */
.sidebar-user a[href="account_security.php"],
.sidebar-user a[href="logout.php"] {
    display: flex !important;
    align-items: center;
    min-height: 40px;
}

/* Tangentbordsfokus på flikar */
.tabs .tab:focus-visible,
.dashboard-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    /* Flikrader: hela ord, en rad, scrolla i sidled */
    .tabs,
    .tabs[style*="margin-bottom: 20px"] {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-padding-inline: 12px;
    }
    .tabs::-webkit-scrollbar {
        display: none;
    }
    .tabs .tab,
    .tabs[style*="margin-bottom: 20px"] .tab {
        flex: 0 0 auto !important;
        min-width: auto !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 14px !important;
        font-size: 14px !important;
        letter-spacing: normal !important;
    }
    /* Alla flikar syns direkt, så Mer-menyn behövs inte längre */
    .tabs .tab.tab-secondary {
        display: inline-flex !important;
    }
    .tabs .tab.tab-more {
        display: none !important;
    }
    .tabs .tab-linkout {
        flex: 0 0 auto;
        margin-left: 0 !important;
        min-height: 44px;
    }

    /* Min dag / Översikt / Hall of Shame: ingen radbrytning */
    .dashboard-tabs {
        position: relative;
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .dashboard-tabs::-webkit-scrollbar {
        display: none;
    }
    .dashboard-tab {
        flex: 1 0 auto !important;
        white-space: nowrap;
        min-height: 44px !important;
    }
}

/*  ===================== DEL 2: APPENS DESIGN (fd ui.css) =====================  *//* ============================================================
   HSPS UI, Fas 1 (2026-09-24)
   Ny grund i familjeappens stil: ett typsnitt (Manrope), mjukare
   former, ljus sidomeny, prickfärger och gemensamma komponenter.

   Laddas SIST (efter style.css och talent.css) och vinner därför
   över äldre regler. Ta bort <link> till ui.css i header.php för att
   gå tillbaka till det gamla utseendet.
   ============================================================ */

/* ---------- 1. Designvariabler, ljust läge ---------- */
:root {
    --bg: #F4F3EF;
    --bg-elevated: #FFFFFF;
    --bg-sunken: #ECEAE4;
    --ink: #16181C;
    --ink-muted: #4A4A45;
    --ink-subtle: #6B6B66;
    --line: #E4E2DB;
    --line-strong: #CFCCC2;
    --accent: #2D4A2B;
    --accent-soft: #E3EADF;
    --rust: #A84A1E;
    --gold: #B8923A;
    --danger: #A23030;
    --success: #2D6A4F;

    --shadow: 0 1px 2px rgba(22, 24, 28, 0.04), 0 6px 18px rgba(22, 24, 28, 0.05);
    --shadow-lg: 0 2px 6px rgba(22, 24, 28, 0.06), 0 18px 44px rgba(22, 24, 28, 0.12);

    --radius: 12px;
    --radius-lg: 20px;
    --radius-sheet: 28px;
    --radius-pill: 999px;
    --tap: 44px;

    /* Ett typsnitt. Fraunces används bara i logotypen (--font-brand). */
    --font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;
    --font-display: "Manrope", -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Manrope", -apple-system, "Segoe UI", sans-serif;
    --font-brand: "Fraunces", Georgia, serif;

    /* Prickfärger: samma betydelse på alla sidor */
    --dot-crm: #2D4A2B;      /* möte bokat i CRM */
    --dot-outlook: #3B63C4;  /* från Outlook */
    --dot-task: #B8923A;     /* uppgift */
    --dot-late: #A84A1E;     /* försenat */
    --dot-muted: #8A8A82;    /* samtal, mejl, övrigt */

    --late-soft: #F7E6DD;
    --late-ink: #8E3A14;

    /* Sidomeny: ljus i ljust läge */
    --sidebar-bg: #FBFAF7;
    --sidebar-ink: #16181C;
    --sidebar-muted: #6B6B66;
    --sidebar-line: #E4E2DB;
    --sidebar-hover: #F1F0EB;
    --sidebar-active-bg: #16181C;
    --sidebar-active-ink: #FFFFFF;

    --btn-bg: #16181C;
    --btn-ink: #FFFFFF;
}

/* ---------- 2. Designvariabler, mörkt läge ---------- */
body[data-theme="dark"] {
    --bg: #161615;
    --bg-elevated: #20201E;
    --bg-sunken: #1A1A18;
    --ink: #ECEBE6;
    --ink-muted: #C4C3BC;
    --ink-subtle: #9A9992;
    --line: #33332F;
    --line-strong: #4A4A45;
    --accent: #8CC28A;
    --accent-soft: #1F2C1E;
    --rust: #E08A66;
    --gold: #D6AD5F;
    --danger: #E07A7A;
    --success: #6CC096;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(0, 0, 0, 0.5);

    --dot-crm: #8CC28A;
    --dot-outlook: #86A6EE;
    --dot-task: #D6AD5F;
    --dot-late: #E08A66;
    --dot-muted: #85847D;
    --late-soft: #2F211A;
    --late-ink: #F0A583;

    --sidebar-bg: #1B1B19;
    --sidebar-ink: #ECEBE6;
    --sidebar-muted: #9A9992;
    --sidebar-line: #2C2C29;
    --sidebar-hover: #262624;
    --sidebar-active-bg: #ECEBE6;
    --sidebar-active-ink: #161615;

    --btn-bg: #ECEBE6;
    --btn-ink: #161615;
    color-scheme: dark;
}

/* ---------- 3. Grundtypografi ---------- */
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
h1 { font-size: 30px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-weight: 700; }

/* Stora siffror som tidigare satt i serif (inline-stil på sidorna) */
[style*="font-family: var(--font-display)"] {
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

/* Rubriker och siffror som tidigare hade tunn serif-vikt */
.page-header h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Etiketter i versaler (tidigare monotypsnitt) */
.eyebrow,
table th,
.sidebar-section {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* ---------- 4. Sidomeny, ljus ---------- */
.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-ink);
    border-right: 1px solid var(--sidebar-line);
}
.sidebar-brand {
    border-bottom-color: var(--sidebar-line);
}
.sidebar-brand h1 {
    font-family: var(--font-brand);
    font-weight: 600;
    font-style: normal;
    letter-spacing: -0.01em;
    color: var(--sidebar-ink);
}
.sidebar-brand span {
    color: var(--sidebar-muted);
    font-weight: 700;
}
.sidebar-nav a {
    color: var(--sidebar-ink);
    border-radius: var(--radius);
    font-weight: 600;
    min-height: 40px;
}
.sidebar-nav a:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-ink);
}
.sidebar-nav a.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-ink);
}
.sidebar-nav .nav-icon {
    opacity: 1;
}
.sidebar-section {
    color: var(--sidebar-muted);
    font-size: 11px;
}
.sidebar-nav .nav-badge {
    font-family: var(--font-body);
    color: #16181C;
}
.sidebar-user {
    border-top-color: var(--sidebar-line);
}
.sidebar-user .user-name { color: var(--sidebar-ink); font-weight: 700; }
.sidebar-user .user-email { color: var(--sidebar-muted); }
.sidebar-user a { color: var(--sidebar-muted); }
.theme-toggle-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--sidebar-line);
    border-radius: var(--radius-pill);
    color: var(--sidebar-ink);
    min-height: 40px;
    padding: 0 14px;
}
.theme-toggle-btn:hover {
    background: var(--sidebar-hover);
    border-color: var(--sidebar-line);
}

/* ---------- 5. Knappar: piller ---------- */
.btn {
    border-radius: var(--radius-pill);
    font-weight: 700;
    min-height: 40px;
    padding: 0 18px;
    justify-content: center;
    letter-spacing: 0;
}
.btn-sm {
    min-height: 32px;
    padding: 0 12px;
}
.btn-secondary {
    background: var(--bg-elevated);
    border-color: var(--line);
}
.btn-secondary:hover {
    background: var(--bg-sunken);
}

/* ---------- 6. Kort och tabeller ---------- */
.card {
    border-color: var(--line);
}
.card-header {
    border-bottom-color: var(--line);
}
table th {
    font-size: 11px;
    color: var(--ink-subtle);
    background: transparent;
}

/* ---------- 7. Formulärfält ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="search"],
select,
textarea {
    border-radius: var(--radius);
    border-color: var(--line-strong);
    min-height: 42px;
}
label {
    color: var(--ink-muted);
    font-weight: 700;
}

/* ---------- 8. Mobil ---------- */
@media (max-width: 900px) {
    /* Sidan scrollar i fönstret, inte inuti body. Då fungerar
       "tryck på statusraden för att hoppa upp" på iPhone. */
    html {
        overflow-x: visible !important;
    }
    body {
        overflow-x: clip !important;
    }

    .mobile-topbar-title {
        font-family: var(--font-display);
        font-style: normal;
        font-weight: 800;
        font-size: 18px;
        letter-spacing: -0.01em;
    }

    h1 { font-size: 26px; }

    .btn {
        min-height: var(--tap);
    }
    .btn-sm {
        min-height: 36px;
    }

    /* 16 px i fält hindrar iPhone från att zooma in */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
        min-height: var(--tap);
    }

    .bottom-nav {
        box-shadow: none;
    }
    .bottom-nav a {
        font-weight: 600;
    }
}

/* ============================================================
   9. Komponenter (används i Fas 2 och 3)
   ============================================================ */

/* Ikon från icon()-hjälparen */
.ui-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Prickar */
.ui-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dot-muted);
    flex-shrink: 0;
}
.ui-dot--crm { background: var(--dot-crm); }
.ui-dot--outlook { background: var(--dot-outlook); }
.ui-dot--task { background: var(--dot-task); }
.ui-dot--late { background: var(--dot-late); }

/* Lista med rader (Min dag, historik, listor) */
.ui-list {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ui-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    min-height: 56px;
}
.ui-row:last-child { border-bottom: 0; }
a.ui-row:hover { background: var(--bg-sunken); opacity: 1; }
.ui-row__time { font-weight: 700; min-width: 48px; }
.ui-row__title { display: block; font-weight: 700; font-size: 15px; }
.ui-row__meta { display: block; font-size: 13px; color: var(--ink-subtle); }
.ui-row__aside { font-size: 13px; color: var(--ink-subtle); }

/* Dagrubrik med Idag-märke */
.ui-dayhead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 4px 10px;
}
.ui-dayhead h2 { margin: 0; font-size: 19px; }
.ui-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--bg-elevated);
    font-size: 12px;
    font-weight: 700;
}
.ui-badge--soft { background: var(--bg-sunken); color: var(--ink-muted); }
.ui-badge--late { background: var(--late-soft); color: var(--late-ink); }

/* Chips (filter, typval) */
.ui-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ui-chips::-webkit-scrollbar { display: none; }
.ui-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    color: var(--ink);
    font: 700 14px var(--font-body);
    cursor: pointer;
    text-decoration: none;
}
.ui-chip:hover { background: var(--bg-sunken); opacity: 1; }
.ui-chip.is-active,
.ui-chip[aria-pressed="true"],
.ui-chip[aria-checked="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg-elevated);
}

/* Segmentväljare (Kall / Neutral / Varm) */
.ui-seg {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 16px;
    background: var(--bg-sunken);
}
.ui-seg button {
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink-subtle);
    font: 700 14px var(--font-body);
    cursor: pointer;
}
.ui-seg button[aria-checked="true"],
.ui-seg button.is-active {
    background: var(--bg-elevated);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Fält med etikett i en mjuk ruta */
.ui-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--bg-sunken);
    margin: 0;
}
.ui-field > span {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-subtle);
}
.ui-field input,
.ui-field select,
.ui-field textarea {
    border: 0 !important;
    background: transparent !important;
    padding: 2px 1px !important;
    min-height: 28px !important;
    box-shadow: none !important;
    font-weight: 600;
}

/* Rund ikonknapp */
.ui-iconbtn {
    width: var(--tap);
    height: var(--tap);
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ui-iconbtn:hover { background: var(--bg-sunken); }

/* Avatar med initialer */
.ui-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

/* Påminnelse högst upp (t.ex. försenade) */
.ui-nudge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--late-soft);
    color: var(--late-ink);
    font-weight: 700;
    text-decoration: none;
}
.ui-nudge:hover { opacity: 0.9; }

/* ---------- Bottenblad (dialog på datorn) ---------- */
.ui-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}
.ui-sheet.is-open { display: block; }
.ui-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(22, 24, 28, 0.42);
    animation: ui-fade 0.18s ease-out;
}
.ui-sheet__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: var(--bg-elevated);
    color: var(--ink);
    border-radius: var(--radius-sheet);
    box-shadow: var(--shadow-lg);
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ui-sheet__grab { display: none; }
.ui-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ui-sheet__head h2 { margin: 0; font-size: 20px; }
.ui-sheet__sub { margin: 0; font-size: 14px; color: var(--ink-subtle); }

@media (max-width: 900px) {
    .ui-sheet__panel {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: none;
        width: auto;
        max-height: 92vh;
        border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
        padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        animation: ui-slide 0.22s ease-out;
    }
    .ui-sheet__grab {
        display: block;
        width: 40px;
        height: 5px;
        border-radius: 3px;
        background: var(--line-strong);
        margin: 0 auto 4px;
    }
}

@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-slide { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .ui-sheet__scrim,
    .ui-sheet__panel { animation: none; }
}

/* Synlig fokusmarkering för tangentbord */
.ui-chip:focus-visible,
.ui-seg button:focus-visible,
.ui-iconbtn:focus-visible,
.btn:focus-visible,
.sidebar-nav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================================
   10. Fas 2: navigation
   ============================================================ */

/* Logga-knapp högst upp i sidomenyn */
.sidebar-log-btn {
    margin: 0 16px 12px;
    width: calc(100% - 32px);
    gap: 8px;
}

.sidebar-nav a > span:not(.nav-badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-nav .nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 4px;
    flex-shrink: 0;
}
.sidebar-nav a.active .nav-dot {
    box-shadow: 0 0 0 2px var(--sidebar-active-bg), 0 0 0 3px var(--sidebar-active-ink);
}
.sidebar-section {
    padding: 18px 14px 6px;
}

/* Verktyg: hopfällbar grupp längst ner */
.sidebar-tools {
    margin-top: 14px;
    border-top: 1px solid var(--sidebar-line);
    padding-top: 8px;
}
.sidebar-tools > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--radius);
    color: var(--sidebar-muted);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.sidebar-tools > summary::-webkit-details-marker { display: none; }
.sidebar-tools > summary:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }
.sidebar-tools > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar-tools .sidebar-tools-chevron { margin-left: auto; transition: transform 0.15s; }
.sidebar-tools[open] .sidebar-tools-chevron { transform: rotate(180deg); }
.sidebar-tools a { padding-left: 22px; }

/* Plusknappen */
.fab-main {
    background: var(--btn-bg) !important;
    color: var(--btn-ink) !important;
    padding: 0 !important;
    box-shadow: 0 6px 20px rgba(22, 24, 28, 0.28) !important;
}
.fab-main .ui-icon { width: 26px; height: 26px; }

/* Bottenmenyns ikoner */
.bottom-nav a .ui-icon { width: 22px; height: 22px; }

/* ---------- Logga-bladet ---------- */
.hsps-log,
.hsps-log-pick,
.hsps-log-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hsps-log [hidden] { display: none !important; }
.hsps-log-results {
    border: 1px solid var(--line);
    max-height: 46vh;
    overflow-y: auto;
}
.hsps-log-hit {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg-elevated);
    text-align: left;
    font: inherit;
    cursor: pointer;
    grid-template-columns: auto minmax(0, 1fr) auto;
}
.hsps-log-hit:hover,
.hsps-log-hit:focus-visible { background: var(--bg-sunken); outline: none; }
.hsps-log-who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--bg-sunken);
}
.hsps-log-who-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hsps-log-who-text span { font-size: 13px; color: var(--ink-subtle); }
.hsps-log-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 420px) {
    .hsps-log-grid { grid-template-columns: 1fr; }
}
.hsps-log-save {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
}

/* Genvägar under loggningen */
.hsps-new-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.hsps-new-shortcut {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 16px;
    background: var(--bg-sunken);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}
.hsps-new-shortcut:hover { opacity: 1; background: var(--line); }

/* ============================================================
   11. Fas 3.1: Min dag
   ============================================================ */
.mydag-header { align-items: flex-end; }
.mydag-header h1 { margin: 0; }
.mydag-sub { margin: 4px 0 0; font-size: 15px; color: var(--ink-subtle); }

.mydag-layout {
    display: grid;
    gap: 8px 28px;
    align-items: start;
}
@media (min-width: 1100px) {
    .mydag-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    .mydag-side { position: sticky; top: 24px; }
}
.mydag-block { margin-bottom: 8px; }
.mydag-block:first-child .ui-dayhead { margin-top: 4px; }

.mydag-row {
    grid-template-columns: 52px 12px minmax(0, 1fr) auto;
    min-height: 60px;
}
a.mydag-row { color: var(--ink); }
.mydag-row--person { grid-template-columns: 40px minmax(0, 1fr) auto; }
.mydag-row--empty { grid-template-columns: 1fr; min-height: 52px; }
.mydag-row--empty .ui-row__meta { font-style: normal; }
.mydag-row-link {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.mydag-row-link:hover { opacity: 1; }
.mydag-row-link .ui-row__title,
.mydag-row-link .ui-row__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mydag-time {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.mydag-time strong { font-size: 15px; font-weight: 800; }
.mydag-time span { font-size: 12px; color: var(--ink-subtle); }
.mydag-chevron { color: var(--ink-subtle); }
.mydag-row .mydag-checkbox-form { margin: 0; display: flex; justify-content: center; }
.mydag-row .mydag-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border-color: var(--line-strong);
}

.mydag-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 12px 4px;
    font-size: 13px;
    color: var(--ink-subtle);
}
.mydag-legend span { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 900px) {
    .mydag-header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; }
    .mydag-header h1 { font-size: 26px; }
    .mydag-row { grid-template-columns: 48px 12px minmax(0, 1fr) auto; padding: 12px 14px; gap: 10px; }
    .mydag-row--person { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .mydag-row--empty { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    /* Plusknappen finns redan, så Logga i sidhuvudet behövs inte i mobilen */
    .mydag-header .flex { display: none; }
    .mydag-header h1 { font-size: 28px; }
}

/* Flikarna på startsidan: vald flik som mörkt piller (syns i båda lägena) */
.dashboard-tabs { border-radius: var(--radius-pill); }
.dashboard-tab { border-radius: var(--radius-pill); font-weight: 700; }
.dashboard-tab.active {
    background: var(--ink);
    color: var(--bg-elevated);
    box-shadow: none;
}

/* ============================================================
   12. Fas 3.2: personkortet (och senare företagskortet)
   ============================================================ */

/* Den nya toppen ersätter gamla sidhuvudet (fas 7: identitetsremsan och detaljhuvudet är borttagna) */
body:has(.entity-hero) .page-header {
    display: none !important;
}

.entity-hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 20px;
}
.entity-hero__id {
    display: flex;
    align-items: center;
    gap: 14px;
}
.entity-hero__avatar {
    width: 60px;
    height: 60px;
    font-size: 20px;
}
.entity-hero__name { flex: 1; min-width: 0; }
.entity-hero__name h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
}
.entity-hero__name p {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--ink-subtle);
}
.entity-hero__name p a { color: var(--ink-muted); font-weight: 600; }
.entity-hero__focus { margin: 0; }
.entity-hero__focus .ui-iconbtn.is-on {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}
.entity-hero__focus .ui-iconbtn.is-on svg { fill: currentColor; }

.entity-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
a.entity-chip:hover { opacity: 1; background: var(--bg-sunken); }
.entity-chip--stage { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.entity-chip .ui-dot { width: 8px; height: 8px; }

.entity-hero__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    max-width: 680px;
}
.entity-action {
    min-height: 64px;
    border-radius: 18px;
    border: 0;
    background: var(--bg-elevated);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font: 700 12px var(--font-body);
    text-decoration: none;
    cursor: pointer;
}
.entity-action:hover { opacity: 1; background: var(--bg-sunken); }
.entity-action--primary { background: var(--btn-bg); color: var(--btn-ink); }
.entity-action--primary:hover { background: var(--btn-bg); opacity: 0.9; }
.entity-action.is-disabled { opacity: 0.4; cursor: default; }
.entity-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.entity-summary {
    margin: 0;
    padding: 4px 16px;
    max-width: 720px;
}
.entity-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.entity-summary__row:last-child { border-bottom: 0; }
.entity-summary dt { font-size: 14px; color: var(--ink-subtle); font-weight: 600; flex-shrink: 0; }
.entity-summary dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.entity-late { color: var(--late-ink); }

/* Loggning i blad på korten: se Fas 4 (includes/card_log_sheet.php) */
.entity-hero__avatar--company { border-radius: 18px; }

@media (min-width: 901px) {
    .entity-hero__name h1 { font-size: 34px; }
}
@media (max-width: 900px) {
    .entity-hero { margin-top: 4px; }
    .entity-hero__name h1 { font-size: 26px; }
    .entity-hero__actions { max-width: none; }
}

/* ============================================================
   13. Fas 3.4: listorna Personer och Företag
   ============================================================ */

.list-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}
.list-head__title { display: flex; align-items: baseline; gap: 10px; }
.list-head__title h1 { margin: 0; }
.list-head__count { font-size: 16px; font-weight: 700; color: var(--ink-subtle); }
.list-head__new { gap: 8px; }

.list-toolbar {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
    max-width: 640px;
}
.list-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--tap);
    padding: 0 16px;
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    color: var(--ink-subtle);
}
.list-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.list-search input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 40px !important;
    color: var(--ink);
    font-weight: 500;
}
.list-filter-btn { position: relative; flex-shrink: 0; }
.list-filter-btn.has-filters { background: var(--ink); border-color: var(--ink); color: var(--bg-elevated); }
.list-filter-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--gold);
    color: #16181C;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.list-views,
.list-active { margin: 0 0 12px; }
.list-chip-count { font-weight: 600; opacity: 0.7; }
.list-active .ui-chip { min-height: 34px; padding: 0 12px; font-size: 13px; }
.list-active .ui-icon { width: 14px; height: 14px; }
.list-apply { width: 100%; min-height: 52px; font-size: 16px; }

/* Datorn: tabellen. Mobilen: listan. */
.list-mobile { display: none; }
.list-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
.list-row__text { display: flex; flex-direction: column; min-width: 0; }
.list-row__text .ui-row__title,
.list-row__text .ui-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.list-row__stage { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.list-row__stage .ui-dot { width: 8px; height: 8px; }
.list-row__when { font-size: 12px; color: var(--ink-subtle); white-space: nowrap; }
.list-row__avatar--company { border-radius: 12px; }
.list-row__star { width: 14px; height: 14px; color: var(--gold); fill: currentColor; vertical-align: -1px; }

@media (max-width: 700px) {
    .list-table { display: none; }
    .list-mobile { display: block; }
    .list-head__new span { display: none; }
    .list-head__new { width: var(--tap); padding: 0; border-radius: 50%; }
    .list-head__title h1 { font-size: 28px; }
    .list-toolbar { max-width: none; }
}

/* ============================================================
   14. Fas 4.1: Uppgifter, snabbanteckning, snabblogga
   ============================================================ */
.task-chip-late { color: var(--late-ink); border-color: var(--late-soft); background: var(--late-soft); }
.task-row2 { grid-template-columns: 32px 12px minmax(0, 1fr) auto; align-items: start; }
.task-row2 .mydag-checkbox-form,
.task-row2 .ui-dot { margin-top: 3px; }
.task-row2 .ui-dot { margin-top: 9px; }
.task-row2__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-row2__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.task-row2__meta a { color: var(--accent); font-weight: 600; }
.task-row2__desc { font-size: 13px; color: var(--ink-muted); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-row2.is-done .ui-row__title { text-decoration: line-through; color: var(--ink-subtle); }
.task-row2__del { width: 36px; height: 36px; border: 0; background: transparent; color: var(--ink-subtle); }
.task-row2__del:hover { color: var(--danger); background: var(--bg-sunken); }
.mydag-checkbox.is-checked { background: var(--success); border-color: var(--success); color: #fff; }
.mydag-checkbox.is-checked::after { content: none; }
.task-row2 .mydag-checkbox { width: 24px; height: 24px; border-radius: 50%; border-color: var(--line-strong); display: flex; align-items: center; justify-content: center; }

/* Snabbanteckningen på personkortet */
.quick-note-form {
    border: 0;
    border-radius: var(--radius-lg);
    padding: 16px;
    gap: 12px;
}
.quick-note-types { gap: 8px; }
.quick-note-type {
    min-height: 36px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    background: var(--bg-elevated);
    border: 1px solid var(--line);
}
.quick-note-type:has(input:checked) {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bg-elevated);
}
.quick-note-type:has(input:checked) .type-direction-arrow { color: var(--bg-elevated); }
.quick-note-text {
    border-radius: 16px !important;
    background: var(--bg-sunken) !important;
    border: 0 !important;
    padding: 12px 14px !important;
}
.quick-note-actions .btn { min-height: 40px; padding: 0 20px; }
.followup-toggle { font-weight: 700; color: var(--ink-muted); }

/* Snabblogga på företagskortet */

/* ============================================================
   15. Fas 4.2: pipeline-sidan
   ============================================================ */
.pipe-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pipe-head__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle); }
.pipe-head__switch {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; background: transparent; padding: 0; margin: 2px 0 0;
    color: var(--ink); cursor: pointer; font: inherit; min-height: 44px;
}
.pipe-head__switch h1 { margin: 0; }
.pipe-head__switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.pipe-head__desc { margin: 4px 0 0; max-width: 640px; font-size: 14px; color: var(--ink-subtle); }

.pipe-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 160px)); gap: 8px; margin-bottom: 12px; }
.pipe-kpi { background: var(--bg-elevated); border-radius: 18px; padding: 12px 16px; display: flex; flex-direction: column; }
.pipe-kpi strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.pipe-kpi span { font-size: 12px; font-weight: 600; color: var(--ink-subtle); }
.pipe-kpi--won { color: var(--success); }
.pipe-hint { margin: 0 0 16px; font-size: 13px; color: var(--ink-subtle); }

/* Kolumner och kort */
.funnel-col { background: var(--bg-sunken); border: 0; border-radius: var(--radius-lg); }
.funnel-col-header { background: transparent; border-bottom: 0; }
.funnel-col-title { font-weight: 800; }
.funnel-col-count { background: var(--bg-elevated); border-radius: var(--radius-pill); font-weight: 700; }
.funnel-card {
    background: var(--bg-elevated);
    border: 0;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(22, 24, 28, 0.05);
    padding: 14px;
}
.funnel-card-title { font-weight: 800; font-size: 15px; }
.funnel-card-sub { color: var(--ink-subtle); }
.funnel-card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-subtle); }
.funnel-card-rel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-muted); }
.funnel-card-rel .ui-dot { width: 8px; height: 8px; }
.funnel-card-move { display: flex; gap: 8px; margin-top: 10px; }
.funnel-card-move button {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 36px; padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font: 700 13px var(--font-body);
    cursor: pointer;
}
.funnel-card-move button:hover { background: var(--bg-sunken); }
.funnel-card-move .ui-icon { width: 16px; height: 16px; }
.funnel-empty { padding: 28px 10px; text-align: center; font-size: 13px; color: var(--ink-subtle); }
.funnel-scroll-btn { border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.unassigned-summary { font-weight: 700; }

@media (max-width: 900px) {
    .pipe-hint { display: none; }
    .pipe-head__switch h1 { font-size: 28px; }
    .pipe-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pipe-kpis .pipe-kpi:nth-child(4) { grid-column: 1 / -1; }
    .funnel.has-stage-chips { display: block !important; overflow: visible !important; }
    .funnel.has-stage-chips .funnel-col { display: none !important; background: transparent; padding: 0; }
    .funnel.has-stage-chips .funnel-col.is-current { display: block !important; }
    .funnel.has-stage-chips .funnel-col-header { display: none !important; }
    .funnel.has-stage-chips .funnel-cards { display: flex !important; flex-direction: column; gap: 10px; max-height: none !important; padding: 0 !important; }
    .funnel-wrapper .funnel-scroll-btn { display: none !important; }
    .funnel-card { padding: 16px; }
    .funnel-card-move { border-top: 0 !important; padding-top: 0 !important; margin-top: 12px; }
}

/* ============================================================
   16. Fas 4.3: Översikt och Hall of Shame
   ============================================================ */
.ov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ov-card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 20px; min-width: 0; }
.ov-card--wide { grid-column: 1 / -1; }
.ov-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ov-card__head h2 { margin: 0; font-size: 18px; display: inline-flex; align-items: center; gap: 8px; }
.ov-card__sub { font-size: 13px; color: var(--ink-subtle); }
.ov-star { color: var(--gold); fill: currentColor; }

/* Bokningsnyckel */
.ov-booking.is-hit { box-shadow: inset 0 0 0 2px var(--success); }
.ov-booking__main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ov-booking__label { font-weight: 700; }
.ov-booking__hint { font-size: 13px; color: var(--ink-subtle); margin-top: 2px; }
.ov-booking__hit { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--success); }
.ov-booking__value { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.ov-booking__value span { margin-left: 3px; font-size: 20px; color: var(--ink-subtle); font-weight: 700; }
.ov-booking__value.tier-green { color: var(--success); }
.ov-booking__value.tier-yellow { color: var(--gold-ink); }
.ov-booking__value.tier-red { color: var(--rust); }
.ov-meter { height: 8px; border-radius: var(--radius-pill); background: var(--bg-sunken); overflow: hidden; margin: 14px 0 6px; }
.ov-meter span { display: block; height: 100%; border-radius: inherit; background: var(--rust); }
.ov-meter span.tier-green { background: var(--success); }
.ov-meter span.tier-yellow { background: var(--gold); }
.ov-booking__rows { display: grid; }
.ov-booking__row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ov-booking__row:last-child { border-bottom: 0; }
.ov-booking__row span { color: var(--ink-muted); }
.ov-booking__row.is-ok strong { color: var(--success); }
.ov-booking__row--sum span { font-weight: 700; color: var(--ink); }

/* Siffror */
.ov-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ov-stats--tb { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ov-stat { background: var(--bg); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-stat strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ov-stats--tb .ov-stat strong { font-size: 20px; }
.ov-stat span { font-size: 12px; font-weight: 600; color: var(--ink-subtle); }
.ov-stat--ok strong { color: var(--success); }
.ov-stat--mid strong { color: var(--gold-ink); }
.ov-stat--low strong { color: var(--rust); }
.ov-nudge { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--late-soft); color: var(--late-ink); font-size: 13px; font-weight: 600; }

/* Pipelines */
.ov-pipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ov-pipe { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--bg); color: var(--ink); text-decoration: none; min-height: var(--tap); }
.ov-pipe:hover { background: var(--bg-sunken); opacity: 1; }
.ov-pipe__name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.ov-pipe strong { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.ov-pipe__label { font-size: 12px; color: var(--ink-subtle); }
.ov-funnel { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ov-funnel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ov-funnel__head h3 { margin: 0; font-size: 15px; }
.ov-funnel__head a { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--accent); min-height: var(--tap); }
.ov-bar { display: grid; grid-template-columns: minmax(90px, 180px) minmax(0, 1fr) 32px; align-items: center; gap: 12px; padding: 5px 0; font-size: 13px; }
.ov-bar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); font-weight: 600; }
.ov-bar__track { height: 10px; border-radius: var(--radius-pill); background: var(--bg-sunken); overflow: hidden; }
.ov-bar__track span { display: block; height: 100%; border-radius: inherit; }
.ov-bar__n { text-align: right; font-weight: 800; }
.ov-funnel__ends { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ov-won { background: var(--accent-soft); color: var(--accent); gap: 4px; }

/* Temperatur */
.ov-temp { display: flex; gap: 3px; height: 14px; border-radius: var(--radius-pill); overflow: hidden; }
.ov-temp span { min-width: 6px; }
.ov-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 13px; color: var(--ink-muted); }
.ov-legend li { display: flex; align-items: center; gap: 8px; }
.ov-legend strong { margin-left: auto; color: var(--ink); }

/* Fokuslistan */
.ov-list { background: var(--bg); }
.ov-more { width: 100%; margin-top: 10px; justify-content: center; }

/* Tomt läge */
.ov-empty { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 40px 20px; text-align: center; color: var(--ink-subtle); }
.ov-empty .ui-icon { color: var(--success); }
.ov-empty p { margin: 6px 0 0; }
.ov-empty strong { color: var(--ink); font-size: 16px; }

/* Hall of Shame */
.shame-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 4px 4px; }
.shame-head h2 { margin: 0; font-size: 22px; }
.shame-head p { margin: 4px 0 0; font-size: 14px; color: var(--ink-subtle); }
.shame-group .ui-dayhead h3 { margin: 0; font-size: 17px; }
.shame-row2 .ui-row__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.shame-dot--red { background: var(--danger); }
.shame-dot--orange { background: var(--rust); }
.shame-dot--yellow { background: var(--gold); }
.shame-never { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-sunken); color: var(--ink-muted); }
.shame-days2 { font-weight: 800; font-size: 14px; white-space: nowrap; }
.shame-days2--red { color: var(--danger); }
.shame-days2--orange { color: var(--rust); }
.shame-days2--yellow { color: var(--gold-ink); }
body[data-theme="dark"] .ov-won { color: var(--accent); }

@media (max-width: 900px) {
    .ov-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ov-card { padding: 16px; }
    .ov-booking__value { font-size: 38px; }
    .ov-bar { grid-template-columns: minmax(80px, 38%) minmax(0, 1fr) 28px; gap: 10px; }
    .ov-pipes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ov-stats--tb { grid-template-columns: minmax(0, 1fr); }
    .ov-stats--tb .ov-stat { flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; }
    .ov-stats--tb .ov-stat strong { font-size: 17px; text-align: right; }
    .ov-stats--tb .ov-stat span { font-size: 14px; color: var(--ink-muted); }
    .shame-row2 .ui-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   17. Fas 4.4: talangmodulen
   ============================================================ */

/* ---- Talanglistan ---- */
.tl-notes { display: grid; gap: 10px; margin: 0 0 14px; }
.tl-note { background: var(--bg-elevated); border-radius: 18px; padding: 14px 16px; }
.tl-note h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tl-note h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot-muted); flex-shrink: 0; }
.tl-note--late h2::before { background: var(--dot-late); }
.tl-note--task h2::before { background: var(--dot-task); }
.tl-note--late { background: var(--late-soft); color: var(--late-ink); }
.tl-note--late a { color: inherit; text-decoration: underline; }
.tl-note p { margin: 4px 0 0 18px; font-size: 13px; }
.tl-note__chips { margin: 10px 0 0 18px; flex-wrap: wrap; }
.tl-note__chips .ui-chip { min-height: 34px; padding: 0 12px; font-size: 13px; text-decoration: none; }
.tl-note--late .tl-note__chips .ui-chip { background: var(--bg-elevated); color: var(--ink); border-color: transparent; }
.tl-note__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0 18px; font-size: 13px; }
.tl-note__row form { margin: 0 0 0 auto; }
.tl-note__what { font-weight: 800; }
.tl-note__extra { display: block; opacity: 0.8; }
.tl-reg { border-radius: var(--radius-lg); }

.tl-table table { width: 100%; }
.tl-table td { vertical-align: middle; }
.tl-name { font-weight: 800; color: var(--ink); text-decoration: none; }
.tl-name:hover { text-decoration: underline; }
.tl-sub { font-size: 12px; color: var(--ink-subtle); font-weight: 500; }
.tl-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.tl-status .ui-dot, .tl-mstatus .ui-dot { width: 8px; height: 8px; }
.tl-mstatus { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.tl-due { color: var(--late-ink); }

.tl-filter-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tl-check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font-weight: 600; font-size: 15px; }
.tl-check input { width: 20px; height: 20px; }
.tl-newform { margin-bottom: 8px; }
.tl-openlinks { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.tl-openlinks h3 { margin: 0 0 4px; font-size: 16px; }
.tl-openlinks .topenlinks-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tl-openlinks .topenlinks-new { display: grid; gap: 10px; margin-top: 12px; }
.tl-openlinks .topenlinks-new .btn { justify-self: start; }
@media (max-width: 700px) {
    .tl-openlinks .topenlinks-new .btn { justify-self: stretch; }
    .tl-note__row form { margin-left: 0; }
}
.tl-table th { white-space: nowrap; }
.tl-table td:first-child { min-width: 150px; }
.tl-name { white-space: nowrap; }
.tl-newform .ui-sheet__sub { margin: 8px 0 14px; }

/* ---- Talangprofilen ---- */
.th-back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); margin: -6px 0 2px; font-size: 14px; font-weight: 700; color: var(--ink-muted); text-decoration: none; }
.th-back:hover { color: var(--ink); }
.th-hero { margin-bottom: 14px; }
.th-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle); }
.th-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.th-actions .btn { gap: 8px; }
.th-note { margin-bottom: 12px; font-size: 14px; }

/* Nyckeltal som kort */

/* Sektionschips, synliga även på datorn */
@media (max-width: 700px) {
    .th-actions .btn { flex: 1 1 0; justify-content: center; }
}

/* Sektioner */
[data-trow-add] { gap: 6px; }

/* Toppraden i mobilen ska stå kvar även långt ner på långa sidor.
   style.css låser body till skärmhöjden, och då släpper den klistrade
   toppraden efter en skärmhöjds scroll. */
html { height: 100%; }
body { height: auto; min-height: 100%; }

/* ---- Intervjuguiden ---- */

/* ============================================================
   18. Fas 4.5: Loggbok, rapporter, tomma lägen, övrigt
   ============================================================ */

/* ---- Loggbok ---- */
.lb-hint { margin: -6px 4px 10px; font-size: 12px; color: var(--ink-subtle); }
.lb-hint--end { margin: 14px 4px 0; }
.lb-day .ui-list { overflow: visible; }
.lb-item { border-bottom: 1px solid var(--line); }
.lb-item:last-child { border-bottom: 0; }
.lb-item__row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px 12px; }
.lb-item__main { min-width: 0; }
.lb-item__main .ui-row__meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.lb-item__main .ui-row__meta a:hover { color: var(--ink); }
.lb-signal { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; background: var(--bg-sunken); color: var(--ink-muted); }
.lb-signal--very_positive, .lb-signal--positive { background: var(--accent-soft); color: var(--accent); }
.lb-signal--negative, .lb-signal--very_negative { background: var(--late-soft); color: var(--late-ink); }
.lb-more { padding: 0 16px 12px 96px; }
.lb-more summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-muted); min-height: 32px; display: inline-flex; align-items: center; list-style: none; }
.lb-more summary::-webkit-details-marker { display: none; }
.lb-more summary::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lb-more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.lb-more__body { font-size: 14px; line-height: 1.6; color: var(--ink); max-width: 70ch; }
.lb-more__body p { margin: 6px 0; }
.lb-where { color: var(--ink-muted); }
@media (max-width: 700px) {
    .lb-item__row { grid-template-columns: auto auto minmax(0, 1fr); padding: 12px 14px 10px; gap: 10px; }
    .lb-signal { grid-column: 3; justify-self: start; }
    .lb-more { padding: 0 14px 10px 14px; }
}
.lb-cancelled { text-decoration: line-through; color: var(--ink-subtle); }

/* ---- Rapporter ---- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Rapporten är ett papper: vit bakgrund även i mörkt läge, så att det
   du ser är det som skrivs ut. */

/* Pipelinerapporten */
/* Sidan har egen \3c style> längre ner i dokumentet, därav .pr-doc framför */

/* ---- Kontrast (Fas 4.5) ----
   Guld som text klarar inte 4,5:1 mot ljus bakgrund, därför en mörkare
   textvariant. Den dämpade grå texten mörkas en aning så att den håller
   4,5:1 även på nedsänkt bakgrund. */
:root { --gold-ink: #7A5C1C; --ink-subtle: #64645E; }
body[data-theme="dark"] { --gold-ink: #D6AD5F; }

/* ---- Tomma lägen, samma form överallt ---- */
.empty { padding: 40px 20px; color: var(--ink-subtle); }
.empty::before {
    content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 14px;
    border-radius: 50%; background: var(--bg-sunken);
    box-shadow: inset 0 0 0 10px var(--bg-sunken), inset 0 0 0 12px var(--line-strong);
}
.empty h3 { font-family: var(--font-body); font-style: normal; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; margin: 0 0 6px; }
.empty p { font-size: 14px; max-width: 46ch; margin: 0 auto 16px; line-height: 1.55; }
.empty .btn { margin-top: 4px; }
.card > .empty, .card-body > .empty { border-radius: var(--radius-lg); }

/* ---- Svep övriga sidor (Fas 4.5b) ---- */
.ui-star { color: var(--gold); fill: currentColor; vertical-align: -2px; }

.readonly-banner-icon .ui-icon { vertical-align: -3px; }
.gs-result-avatar .ui-icon { width: 18px; height: 18px; }
.ui-flash { display: block; margin: 0 0 16px; padding: 12px 16px; border: 0; border-radius: 16px; font-weight: 600; font-size: 14px; }
.ui-flash--ok { background: var(--accent-soft); color: var(--accent); }
.ui-flash--err { background: var(--late-soft); color: var(--late-ink); }

form[style*="display: flex"] select { width: auto; flex: 0 1 220px; }
form[style*="display: flex"] input[type="text"], form[style*="display: flex"] input[type="search"] { border-radius: var(--radius-pill); }
.login-card h1 { font-family: var(--font-brand); font-style: normal; font-weight: 600; letter-spacing: -0.01em; }
.login-card { border: 0; box-shadow: none; border-radius: 24px; }

/* ---- Listor som krymper snyggt (Personer, Företag, Talanger) ----
   Tabellen anpassar sig till sin egen bredd: mindre viktiga kolumner
   tas bort i tur och ordning i stället för att klippas i kanten. */
.list-table { container-type: inline-size; overflow: hidden; }
.list-table table { width: 100%; table-layout: auto; }
.list-table td, .list-table th { vertical-align: middle; }
.list-table .col-name { min-width: 170px; }
.list-table .col-name strong { overflow-wrap: normal; }

@container (max-width: 1000px) { .list-table .col-p4 { display: none; } }
@container (max-width: 820px)  { .list-table .col-p3 { display: none; } }
@container (max-width: 600px)  { .list-table .col-p2 { display: none; } }
/* Från surfplattebredd och nedåt: korten från mobilen i stället för tabellen */
@media (max-width: 900px) {
    .list-table { display: none; }
    .list-mobile { display: block; }
}
@container (max-width: 1240px) { .tl-table th:nth-child(5), .tl-table td:nth-child(5), .tl-table th:nth-child(6), .tl-table td:nth-child(6) { display: none; } }
@container (max-width: 920px)  { .tl-table th:nth-child(3), .tl-table td:nth-child(3), .tl-table th:nth-child(8), .tl-table td:nth-child(8) { display: none; } }
@container (max-width: 680px)  { .tl-table th:nth-child(2), .tl-table td:nth-child(2) { display: none; } }
/* Den flytande sökknappen uppe till höger ska inte ligga över sidans knappar */
@media (min-width: 901px) {
    .list-head, .page-header, .entity-hero, .pipe-head, .mydag-header { padding-right: 112px; } /* sök + klocka */
}

/* ============================================================
   19. Fas 5: historiken på person- och företagskortet
   ============================================================ */
.hist { margin-top: 8px; }
.hist-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 4px 12px; }
.hist-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; }
.hist-head__count { font-size: 15px; color: var(--ink-subtle); }
.hist-search { margin-left: auto; flex: 0 1 300px; min-height: 42px; }
.hist-chips { margin: 0 0 14px; }
.hist-chips .ui-chip { min-height: 36px; padding: 0 14px; font-size: 13px; }

.hist-ask-list { display: grid; gap: 8px; margin: 0 0 16px; }
.hist-ask { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 18px; background: var(--late-soft); }
.hist-ask__text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 240px; min-width: 0; }
.hist-ask__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--late-ink); }
.hist-ask__text strong { font-size: 16px; font-weight: 800; }
.hist-ask__text > span:last-child { font-size: 13px; color: var(--ink-muted); }
.hist-ask__btns { display: flex; gap: 8px; }
.hist-ask__btns form { margin: 0; }
.hist-ask__btns .btn { gap: 6px; min-height: 44px; white-space: nowrap; padding: 0 16px; }

.hist-group { margin-bottom: 18px; }
.hist-group__h { margin: 0 6px 8px; font-size: 14px; font-weight: 800; color: var(--ink-muted); }
.hist-list { background: var(--bg-elevated); border-radius: var(--radius-lg); }
.hist-item {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 14px; align-items: start;
    padding: 16px 8px 16px 18px; border-bottom: 1px solid var(--line);
    scroll-margin-top: 80px; transition: background 0.4s;
}
.hist-item:last-child { border-bottom: 0; }
.hist-item.is-flash { background: var(--accent-soft); }
.hist-item__icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-sunken); color: var(--ink); }
.hist-item__icon--upcoming, .hist-item__icon--planned { background: var(--accent-soft); color: var(--accent); }
.hist-item__icon--cancelled { color: var(--ink-subtle); }
.hist-item__main { min-width: 0; }
.hist-item__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hist-item__title h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.hist-item.is-cancelled .hist-item__title h3 { text-decoration: line-through; color: var(--ink-subtle); }
.hist-item__meta { margin: 2px 0 0; font-size: 13px; color: var(--ink-subtle); }
.hist-item__people { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--ink-muted); }
.hist-item__people a { color: inherit; font-weight: 700; text-decoration: none; }
.hist-item__people a:hover { text-decoration: underline; }
.hist-avatars { display: inline-flex; }
.hist-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-elevated); flex-shrink: 0; }
.hist-avatars .hist-avatar + .hist-avatar { margin-left: -8px; background: var(--bg-sunken); color: var(--ink-muted); }
.hist-item__menu { border: 0; background: transparent; }
.hist-item__menu:hover { background: var(--bg-sunken); }

.hist-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; background: var(--bg-sunken); color: var(--ink-muted); }
.hist-badge--pos { background: var(--accent-soft); color: var(--accent); }
.hist-badge--neg { background: var(--late-soft); color: var(--late-ink); }
.hist-badge--block { margin-top: 8px; }

.hist-note { position: relative; margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink); max-width: 72ch; }
.hist-note p { margin: 0 0 8px; }
.hist-note p:last-child { margin-bottom: 0; }
.hist-note__h { margin: 12px 0 2px; font-size: 13px; font-weight: 800; color: var(--ink-muted); letter-spacing: 0; }
.hist-note__h:first-child { margin-top: 0; }
.hist-note.is-long:not(.is-open) { max-height: 7.2em; overflow: hidden; }
.hist-note.is-long:not(.is-open)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-elevated));
}
body[data-theme="dark"] .hist-note.is-long:not(.is-open)::after { background: linear-gradient(to bottom, rgba(32, 32, 30, 0), var(--bg-elevated)); }
.hist-more { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-top: 2px; padding: 0; border: 0; background: transparent; font: 800 13px var(--font-body); color: var(--accent); cursor: pointer; }
.hist-more--add { color: var(--ink-subtle); font-weight: 700; }
.hist-more--add:hover { color: var(--accent); }
.hist-nomatch { margin: 8px 6px; color: var(--ink-subtle); font-size: 14px; }
.hist-empty { margin-top: 0; }

/* Bladet med åtgärder */
.act-sheet .ui-sheet__head { align-items: flex-start; }
.act-sheet .ui-sheet__head h2 { margin: 0; }
.act-sheet .ui-sheet__sub { margin: 2px 0 0; }
.act-sheet__status { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.act-sheet__status form { margin: 0; }
.act-sheet__status .btn { gap: 6px; min-height: 44px; }
.act-sheet__sec { margin: 0 0 8px; border-radius: 16px; background: var(--bg); }
.act-sheet__sec > summary,
.act-sheet__sec--edit details > summary {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px;
    font-weight: 700 !important; font-size: 15px !important; color: var(--ink) !important; cursor: pointer; list-style: none;
}
.act-sheet__sec > summary::-webkit-details-marker,
.act-sheet__sec--edit details > summary::-webkit-details-marker { display: none; }
.act-sheet__sec > summary::after,
.act-sheet__sec--edit details > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.5; }
.act-sheet__sec[open] > summary::after,
.act-sheet__sec--edit details[open] > summary::after { transform: rotate(-135deg); }
.act-sheet__sec--edit details { margin: 0 !important; }
.act-sheet__sec--edit details > summary::before {
    content: ""; width: 20px; height: 20px; flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.act-sheet__sec--edit details > form { margin: 0 !important; padding: 4px 16px 16px !important; background: transparent !important; }
.act-sheet__sec--edit .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.act-sheet__sec--edit label { font-size: 12px !important; font-weight: 700; color: var(--ink-muted); }
.act-sheet__sec--edit input, .act-sheet__sec--edit select, .act-sheet__sec--edit textarea { font-size: 16px !important; }
.act-sheet__form { padding: 4px 16px 16px; }
.act-sheet__form .btn { width: 100%; justify-content: center; }
.act-sheet__hint { margin: -4px 0 12px; font-size: 12px; color: var(--ink-subtle); }
.act-people { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.act-people li { display: flex; align-items: center; gap: 10px; }
.act-people li a { font-weight: 700; color: var(--ink); text-decoration: none; flex: 1; }
.act-people li form { margin: 0; }
.act-people__add { display: grid; gap: 8px; }
.act-sheet__delete { margin: 12px 0 0; }
.act-sheet__delete button {
    width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
    border: 0; border-radius: 16px; background: var(--late-soft); color: var(--late-ink);
    font: 700 15px var(--font-body); cursor: pointer;
}

@media (max-width: 700px) {
    .hist-item { grid-template-columns: 36px minmax(0, 1fr) 40px; gap: 12px; padding: 14px 4px 14px 14px; }
    .hist-item__icon { width: 36px; height: 36px; }
    .hist-search { flex: 1 1 100%; margin-left: 0; }
    .hist-ask__btns { width: 100%; }
    .hist-ask__btns form { flex: 1; }
    .hist-ask__btns .btn { width: 100%; justify-content: center; }
    .hist-list { border-radius: 20px; }
}

/* ============================================================
   20. Fas 6: Rapport (ersätter månads- och pipelinerapporten)
   ============================================================ */
.rp { display: flex; flex-direction: column; gap: 18px; max-width: 1180px; }
.rp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rp-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle); }
.rp-head h1 { margin: 2px 0 2px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.rp-head p { margin: 0; font-size: 15px; color: var(--ink-subtle); }
.rp-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-controls .btn { gap: 8px; }
.rp-seg { border-radius: 22px; }
.rp-seg a { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: 18px; font-weight: 700; font-size: 14px; color: var(--ink-muted); text-decoration: none; }
.rp-seg a.is-active { background: var(--bg-elevated); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.rp-step { display: flex; gap: 4px; }
.rp-step .ui-iconbtn { background: var(--bg-elevated); border: 1px solid var(--line); }
.rp-step .is-disabled { opacity: 0.35; }
.rp-pipes { margin: -4px 0 0; }
.rp-pipes .ui-chip { min-height: 36px; font-size: 13px; }

.rp-card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp-card__head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.rp-card__head p { margin: 2px 0 0; font-size: 14px; color: var(--ink-subtle); }
.rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }

.rp-lead { margin: 0; font-size: 18px; line-height: 1.55; max-width: 900px; }
.rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rp-kpi { background: var(--bg); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.rp-kpi__l { font-size: 13px; font-weight: 700; color: var(--ink-subtle); }
.rp-kpi strong { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.rp-kpi__d { font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.rp-kpi__d--up { color: var(--accent); }
.rp-kpi__d--down { color: var(--late-ink); }

.rp-comment__form { display: flex; flex-direction: column; gap: 6px; border-radius: 16px; background: var(--bg); padding: 14px 16px; }
.rp-comment__form label, .rp-comment__label { font-size: 13px; font-weight: 800; color: var(--ink-muted); }
.rp-comment__form textarea { font-size: 16px; min-height: 76px; }
.rp-comment__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-subtle); }
.rp-comment__print { display: none; }

.rp-chart { width: 100%; height: auto; overflow: visible; }
.rp-grid-line { stroke: var(--line); stroke-width: 1; }
.rp-axis { font-size: 11px; fill: var(--ink-subtle); font-family: var(--font-body); }
.rp-goal { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.rp-goal-label { font-size: 11px; font-weight: 700; fill: var(--ink); font-family: var(--font-body); }
.rp-hit { fill: transparent; }
.rp-bar__fill { fill: #A9C2A6; }
.rp-bar.is-period .rp-bar__fill { fill: var(--accent); }
.rp-bar:hover .rp-bar__fill { opacity: 0.8; }
body[data-theme="dark"] .rp-bar__fill { fill: #4C6B4A; }
body[data-theme="dark"] .rp-bar.is-period .rp-bar__fill { fill: var(--accent); }

.rp-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rp-mini div { display: flex; flex-direction: column; }
.rp-mini strong { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.rp-mini span { font-size: 13px; color: var(--ink-subtle); }
.rp-note { margin: 0; font-size: 12px; color: var(--ink-subtle); }
.rp-note a { color: inherit; font-weight: 700; }

.rp-bars { display: flex; flex-direction: column; gap: 12px; }
.rp-hbar { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) 96px; gap: 12px; align-items: center; }
.rp-hbar__name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-hbar__name em { font-style: normal; font-weight: 600; color: var(--ink-subtle); margin-left: 2px; }
.rp-hbar__track { height: 14px; border-radius: 7px; background: var(--bg-sunken); display: flex; }
.rp-hbar__tb { display: flex; height: 14px; border-radius: 7px; background: #C9D7C6; min-width: 0; }
.rp-hbar__w { display: block; height: 14px; border-radius: 7px; background: var(--accent); }
body[data-theme="dark"] .rp-hbar__tb { background: #3A5238; }
.rp-hbar__val { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.rp-hbar__val strong { color: var(--ink); }

.rp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rp-col-h { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--ink-muted); }
.rp-col-h--up { color: var(--accent); }
.rp-col-h--late { color: var(--late-ink); }
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rp-list li:last-child { border-bottom: 0; }
.rp-list a { font-weight: 800; color: var(--ink); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-list a:hover { text-decoration: underline; }
.rp-list span { color: var(--ink-subtle); text-align: right; }
.rp-late { color: var(--late-ink) !important; font-weight: 700; }
.rp-won { color: var(--accent); }
.rp-more, .rp-empty { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-subtle); }

.rp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rp-table th, .rp-table td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rp-table thead th { font-size: 12px; font-weight: 700; color: var(--ink-subtle); border-bottom-color: var(--line-strong); letter-spacing: 0; text-transform: none; background: transparent; }
.rp-table tbody th a { color: var(--ink); text-decoration: none; }
.rp-table tbody tr:last-child th, .rp-table tbody tr:last-child td { border-bottom: 0; }
.rp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-table tr.is-bottleneck th, .rp-table tr.is-bottleneck td { background: var(--late-soft); }
.rp-table tr.is-bottleneck th { border-radius: 10px 0 0 10px; }
.rp-table tr.is-bottleneck td:last-child { border-radius: 0 10px 10px 0; }
.rp-bn { display: block; font-size: 11px; font-weight: 800; color: var(--late-ink); }
.rp-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-subtle); padding: 0 4px; }

@media (max-width: 1100px) {
    .rp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .rp-head h1 { font-size: 28px; }
    .rp-controls { width: 100%; }
    .rp-seg { flex: 1; }
    .rp-controls > .btn { width: 100%; justify-content: center; }
    .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-cols { grid-template-columns: minmax(0, 1fr); }
    .rp-lead { font-size: 16px; }
    .rp-card { padding: 18px 16px; }
    .rp-hbar { grid-template-columns: minmax(0, 1fr) 90px; }
    .rp-hbar__track { grid-column: 1 / -1; grid-row: 2; }
    .rp-mini { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Utskrift: två A4-sidor, allt i ljust */
@media print {
    @page { size: A4; margin: 12mm; }
    body[data-page="report.php"] .sidebar, body[data-page="report.php"] .mobile-topbar,
    body[data-page="report.php"] .bottom-nav, body[data-page="report.php"] .fab-container,
    .rp-controls, .rp-pipes, .rp-comment__form, .search-trigger-floating { display: none !important; }
    .rp-comment__print { display: block; border-left: 3px solid #2D4A2B; padding: 4px 0 4px 12px; }
    .rp-comment__print p { margin: 2px 0 0; font-size: 12pt; }
    .app, .main { display: block !important; margin: 0 !important; padding: 0 !important; }
    body { background: #FFFFFF !important; color: #16181C !important; }
    .rp { gap: 10px; max-width: none; }
    .rp-card { border: 1px solid #E4E2DB; border-radius: 12px; padding: 12px 14px; gap: 8px; break-inside: avoid; background: #FFFFFF !important; }
    .rp-kpi, .rp-comment__form { background: #F4F3EF !important; }
    .rp-head h1 { font-size: 24pt; }
    .rp-lead { font-size: 12pt; }
    .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .rp-summary { break-after: avoid; }
    .rp-card[aria-labelledby="rp-mv-h"] { break-before: page; }
    a { color: inherit !important; text-decoration: none !important; }
}
@media print {
    body[data-theme="dark"] {
        --bg: #F4F3EF; --bg-elevated: #FFFFFF; --bg-sunken: #ECEAE4; --ink: #16181C; --ink-muted: #4A4A45;
        --ink-subtle: #64645E; --line: #E4E2DB; --line-strong: #CFCCC2; --accent: #2D4A2B; --accent-soft: #E3EADF;
        --late-soft: #F7E6DD; --late-ink: #8E3A14;
    }
}
.rp-table tbody th { font-size: 14px; font-weight: 800; text-transform: none; letter-spacing: 0; color: var(--ink); background: transparent; font-family: var(--font-body); }
@media print {
    .rp-list li { flex-direction: column; gap: 0; padding: 5px 0; }
    .rp-list a { white-space: normal; }
    .rp-list span { text-align: left; }
    .rp-mini strong { font-size: 14pt; }
}
/* Orsak vid tappad affär */
.lost-reasons { flex-wrap: wrap; overflow: visible; margin: 4px 0 12px; }
.lost-reason { cursor: pointer; }
.lost-reason input { position: absolute; opacity: 0; pointer-events: none; }
.lost-reason:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg-elevated); }
.lost-reason:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lost-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ---- Pipeline: hopfällbara kolumner (dator) ---- */
.pipe-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.pipe-hint-row .pipe-hint { margin: 0; }
.pipe-colctl { display: flex; gap: 6px; }
.funnel-col-strip, .funnel-col-fold { display: none; }
@media (min-width: 901px) {
    .funnel { display: flex !important; align-items: stretch; gap: 12px; }
    .funnel-col { flex: 1 0 250px; min-width: 250px; transition: flex-basis 0.15s; }
    .funnel-col-header { gap: 8px; }
    .funnel-col-title { flex: 1; min-width: 0; }
    .funnel-col-fold {
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-subtle); cursor: pointer;
    }
    .funnel-col-fold:hover { background: var(--bg-elevated); color: var(--ink); }
    .funnel-col.is-collapsed {
        flex: 0 0 52px; min-width: 52px; padding: 0; overflow: hidden;
        background: linear-gradient(to bottom, color-mix(in srgb, var(--stage-color) 55%, var(--bg-sunken)), var(--bg-sunken) 85%);
    }
    .funnel-col.is-collapsed > :not(.funnel-col-strip) { display: none !important; }
    .funnel-col.is-collapsed .funnel-col-strip {
        display: flex; flex-direction: column; align-items: center; gap: 12px;
        width: 100%; height: 100%; min-height: 420px; padding: 12px 0; border: 0; background: transparent; cursor: pointer;
        color: var(--ink); font: 800 13px var(--font-body);
    }
    .funnel-col-strip__name { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; letter-spacing: 0.01em; }
    .funnel-col.is-collapsed:hover { filter: brightness(0.98); }
    .funnel-col.is-collapsed.drag-over { box-shadow: inset 0 0 0 2px var(--accent); }
    .funnel-col.is-bump .funnel-col-count { background: var(--accent); color: #FFFFFF; }
    .funnel-col-strip:focus-visible, .funnel-col-fold:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}
@media (max-width: 900px) {
    .pipe-colctl { display: none; }
}

/* ============================================================
   21. Pipeline i mobilen, omtag (2026-09-24)
   Fast stadiefält, täta rader, sortering, blad för att flytta.
   ============================================================ */
.pipe-kpiline, .pipe-stagebar, .pipe-sortrow, .pipe-mfoot, .funnel-card-dot, .funnel-card-subinline, .funnel-card-more { display: none; }

/* Gäller både dator och mobil: värde, nästa aktivitet och stillastående */
.funnel-card-top { display: flex; align-items: baseline; gap: 8px; }
.funnel-card-top .funnel-card-title { flex: 1 1 auto; min-width: 0; }
.funnel-card-value { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.funnel-card-meta { flex-wrap: wrap; row-gap: 4px; }
.funnel-card-meta > :last-child:not(.funnel-card-rel) { margin-left: auto; }
.pipe-chip {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    height: 20px; padding: 0 8px; border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 800; white-space: nowrap;
}
.pipe-chip .ui-icon { width: 12px; height: 12px; }
.pipe-chip--next { background: var(--accent-soft); color: var(--accent); }
.pipe-chip--stale { background: var(--late-soft); color: var(--late-ink); }
.funnel-card-ago { white-space: nowrap; }
.funnel-card.is-moving { opacity: 0.45; }

/* Bladen */
.pipe-funnel__total { font-size: 13px; font-weight: 600; color: var(--ink-subtle); }
.pipe-funnel { display: flex; flex-direction: column; gap: 4px; }
.pipe-frow {
    display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 32px; align-items: center; gap: 12px;
    min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px;
    background: var(--bg); color: var(--ink); font: 700 14px var(--font-body); text-align: left; cursor: pointer;
}
.pipe-frow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-frow__bar { height: 10px; border-radius: 5px; background: var(--bg-sunken); overflow: hidden; display: flex; }
.pipe-frow__bar span { display: block; height: 100%; border-radius: 5px; background: var(--accent); opacity: 0.55; transition: width 0.2s; }
.pipe-frow__count { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.pipe-frow.is-lost { margin-top: 6px; color: var(--late-ink); }
.pipe-frow.is-lost .pipe-frow__bar span { background: var(--late-ink); }
.pipe-frow.is-current { background: var(--ink); color: var(--bg-elevated); }
.pipe-frow.is-current .pipe-frow__bar { background: rgba(255, 255, 255, 0.18); }
.pipe-frow.is-current .pipe-frow__bar span { background: var(--bg-elevated); opacity: 0.85; }

.pipe-move__head { padding: 0 4px 12px; }
.pipe-move__head h2 { margin: 0; font-size: 19px; }
.pipe-move__head p { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-subtle); }
.pipe-move__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.pipe-move__action {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; border: 0; border-radius: 16px; background: var(--bg);
    color: var(--ink); font: 700 14px var(--font-body); text-decoration: none; cursor: pointer;
}
.pipe-move__action:hover { background: var(--bg-sunken); color: var(--ink); }
.pipe-move__label { margin: 0 4px 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); }
.pipe-move__list { display: flex; flex-direction: column; gap: 4px; }
.pipe-move__opt {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px;
    border: 0; border-radius: 14px; background: transparent; color: var(--ink);
    font: 700 15px var(--font-body); text-align: left; cursor: pointer;
}
.pipe-move__opt:hover { background: var(--bg); }
.pipe-move__radio { width: 18px; height: 18px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--line-strong); }
.pipe-move__name { flex: 1 1 auto; min-width: 0; }
.pipe-move__note { font-size: 12px; font-weight: 600; color: var(--ink-subtle); }
.pipe-move__opt[aria-checked="true"] { background: var(--bg); cursor: default; }
.pipe-move__opt[aria-checked="true"] .pipe-move__radio { border: 6px solid var(--ink); }
.pipe-move__opt.is-next { background: var(--accent-soft); }
.pipe-move__opt.is-next .pipe-move__note { color: var(--accent); font-weight: 800; }
.pipe-move__opt.is-lost { margin-top: 6px; background: var(--late-soft); color: var(--late-ink); }
.pipe-move__opt.is-lost .pipe-move__note { color: var(--late-ink); }
.pipe-move__opt.is-lost .pipe-move__radio { border-color: currentColor; opacity: 0.5; }

/* Ångra-rutan */
.pipe-toast {
    position: fixed; left: 16px; right: 16px; z-index: 70;
    bottom: calc(env(safe-area-inset-bottom, 0) + 160px);
    max-width: 480px; margin: 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 8px 10px 16px; border-radius: 16px;
    background: #16181C; color: #FFFFFF; font: 700 14px var(--font-body);
    box-shadow: var(--shadow-lg);
}
.pipe-toast[hidden] { display: none; }
.pipe-toast span { flex: 1 1 auto; min-width: 0; }
.pipe-toast button { min-height: 40px; padding: 0 12px; border: 0; background: transparent; color: #B8D4B2; font: 800 14px var(--font-body); cursor: pointer; }
@media (min-width: 901px) { .pipe-toast { bottom: 32px; } }

@media (max-width: 900px) {
    body[data-page="pipeline.php"] .main,
    body[data-page="pipeline.php"] .app { overflow-x: clip; overflow-y: visible; }
    .pipe-head, .pipe-kpis, .pipe-hint-row { display: none !important; }
    .pipe-topbar-switch {
        display: inline-flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0;
        min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--ink);
        text-align: left; cursor: pointer;
    }
    .pipe-topbar-switch svg { width: 18px; height: 18px; flex-shrink: 0; }

    .pipe-kpiline { display: block; margin: 0 4px 10px; font-size: 13px; font-weight: 600; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }

    .pipe-stagebar {
        display: block; position: sticky; top: var(--pipe-sticky-top, 52px); z-index: 40;
        margin: 0 -14px; padding: 6px 14px 10px;
        background: var(--bg); border-bottom: 1px solid var(--line);
    }
    .pipe-stagebar__box { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 20px; background: var(--bg-elevated); }
    .pipe-stagebar__nav {
        width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%;
        background: var(--bg); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .pipe-stagebar__nav:disabled { color: var(--line-strong); cursor: default; }
    .pipe-stagebar__cur {
        flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 2px 4px; cursor: pointer;
        display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--ink);
    }
    .pipe-stagebar__name { display: flex; align-items: center; gap: 6px; max-width: 100%; font-size: 16px; font-weight: 800; }
    .pipe-stagebar__name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pipe-stagebar__count {
        flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
        background: var(--ink); color: var(--bg-elevated); font-size: 11px; font-weight: 800;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .pipe-stagebar__pos { font-size: 12px; font-weight: 600; color: var(--ink-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .pipe-stagebar__segs { display: flex; gap: 3px; padding: 2px 6px 0; }
    .pipe-seg { flex: 1 1 0; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
    .pipe-seg::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 3px; background: var(--line); }
    .pipe-seg.is-past::before { background: var(--accent); opacity: 0.4; }
    .pipe-seg.is-current::before { background: var(--ink); }

    .pipe-sortrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px 8px; }
    .pipe-sort {
        display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0;
        border: 0; background: transparent; color: var(--ink); font: 700 13px var(--font-body); cursor: pointer;
    }
    .pipe-sortrow__sum { font-size: 13px; font-weight: 600; color: var(--ink-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* Listan: täta rader i en vit ruta */
    .funnel.has-stage-chips .funnel-col.is-current .funnel-cards {
        background: var(--bg-elevated); border-radius: 22px; overflow: hidden;
        gap: 0 !important; padding: 0 !important;
    }
    .funnel.has-stage-chips .funnel-card {
        display: grid; grid-template-columns: 10px minmax(0, 1fr) 44px; align-items: center; gap: 12px;
        margin: 0; padding: 10px 4px 10px 16px;
        border-radius: 0; box-shadow: none; background: transparent;
        border-top: 1px solid var(--line);
    }
    .funnel.has-stage-chips .funnel-card:first-child { border-top: 0; }
    .funnel.has-stage-chips .funnel-card:active { background: var(--bg); }
    .funnel.has-stage-chips .funnel-card-dot { display: block; width: 10px; height: 10px; border-radius: 50%; }
    .funnel.has-stage-chips .funnel-card-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .funnel.has-stage-chips .funnel-card-title { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
    .funnel.has-stage-chips .funnel-card-value { font-size: 13px; }
    .funnel.has-stage-chips .funnel-card-sub { display: none; }
    .funnel.has-stage-chips .funnel-card-meta { flex-wrap: nowrap; gap: 6px; margin: 0; padding: 0; border: 0; font-size: 12px; font-weight: 600; color: var(--ink-subtle); overflow: hidden; white-space: nowrap; }
    .funnel.has-stage-chips .funnel-card-meta > :last-child:not(.funnel-card-rel) { margin-left: 0; }
    .funnel.has-stage-chips .funnel-card-rel { flex-shrink: 0; color: var(--ink-subtle); }
    .funnel.has-stage-chips .funnel-card-rel .ui-dot { display: none; }
    .funnel.has-stage-chips .funnel-card-subinline { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .funnel.has-stage-chips .funnel-card-rel + .funnel-card-subinline::before { content: "· "; }
    .funnel.has-stage-chips .funnel-card-ago { flex-shrink: 0; }
    .funnel.has-stage-chips .funnel-card-ago::before { content: "· "; }
    .funnel.has-stage-chips .funnel-card-meta > .funnel-card-ago:first-child::before { content: none; }
    .funnel.has-stage-chips .funnel-card-more {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border: 0; border-radius: 50%;
        background: transparent; color: var(--ink-muted); cursor: pointer;
    }
    .funnel.has-stage-chips .funnel-card-more:active { background: var(--bg-sunken); }
    .funnel.has-stage-chips .funnel-card-move { display: none !important; }
    .funnel.has-stage-chips .funnel-empty { padding: 36px 24px; font-size: 14px; }
    .funnel.has-stage-chips .funnel-cards { padding-bottom: 0 !important; }
    .funnel-wrapper, .funnel.has-stage-chips { min-height: 0 !important; height: auto !important; }

    .pipe-mfoot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 4px 96px; }
    .pipe-mfoot p { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-subtle); }
    .pipe-mfoot__new {
        display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
        border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--bg-elevated);
        color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none;
    }
}

/* ============================================================
   22. Snabbanteckningen i mobilen (2026-09-24)
   ============================================================ */
@media (max-width: 900px) {
    .quick-note-form[data-qn-compact] { padding: 12px; gap: 10px; }
    .quick-note-form[data-qn-compact]:focus-within { box-shadow: none; }

    /* Stängd: bara en rad */
    .quick-note-form.is-compact { cursor: text; }
    .quick-note-form.is-compact .quick-note-types,
    .quick-note-form.is-compact .followup-row,
    .quick-note-form.is-compact .quick-note-actions { display: none !important; }
    .quick-note-form.is-compact .quick-note-text {
        min-height: 48px !important; height: 48px; resize: none; overflow: hidden;
        padding: 13px 14px 13px 44px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238A8A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important; background-position: 14px center !important;
        font-size: 15px; line-height: 22px; white-space: nowrap; text-overflow: ellipsis;
    }

    /* Öppen: typer på en rad att svepa, uppföljning och Logga på samma rad */
    .quick-note-form.is-open { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .quick-note-form.is-open > * { grid-column: 1 / -1; }
    .quick-note-form.is-open .quick-note-types {
        flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
        margin: 0 -12px; padding: 0 12px 2px; gap: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .quick-note-form.is-open .quick-note-types::-webkit-scrollbar { display: none; }
    .quick-note-form.is-open .quick-note-type { flex-shrink: 0; min-height: 36px; padding: 0 12px; font-size: 13px; }
    .quick-note-form.is-open .quick-note-text { min-height: 96px !important; font-size: 15px; resize: none; }
    .quick-note-form.is-open .followup-row { grid-column: 1; margin: 0; flex-wrap: wrap; gap: 8px; }
    .quick-note-form.is-open .followup-row:has(input:checked) { grid-column: 1 / -1; }
    .quick-note-form.is-open .followup-datetime:disabled { display: none; }
    .quick-note-form.is-open .followup-datetime { width: 100%; }
    .quick-note-form.is-open .quick-note-actions { grid-column: 2; justify-content: flex-end; }
    .quick-note-form.is-open .followup-row:has(input:checked) + .quick-note-actions { grid-column: 1 / -1; }
    .quick-note-form.is-open .quick-note-actions .btn { min-height: 44px; padding: 0 22px; }
    body.qn-open .fab-container { display: none; }
}

/* ============================================================
   23. Omgång 1, enhetlig design (2026-09-24)
   Gamla kort i ny stil, sidopaneler, pipelineprickar, bredare topp på datorn.
   ============================================================ */
:root { --bg-subtle: var(--bg); }

/* Pipeline och relation: prick + text */
.pl-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.pl-mark .ui-dot { width: 8px; height: 8px; flex-shrink: 0; }
h3 .pl-mark { font-weight: 800; }

/* Gamla .card i ny stil, på alla sidor */
.card { border: 0; border-radius: 22px; background: var(--bg-elevated); box-shadow: none; }
.card-header { border-bottom: 0; padding: 18px 20px 4px; gap: 12px; flex-wrap: wrap; }
.card-header h2, .card-header h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.card-body { padding: 12px 20px 20px; }
.card-body.tight { padding: 4px 0 8px; }
.card-body.tight > :last-child { border-bottom: 0 !important; }
.card [style*="dashed"] { border-style: solid !important; border-color: var(--line) !important; }
.card .badge { border-radius: var(--radius-pill); padding: 2px 8px; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* Sidopaneler på person- och företagskortet */
.side-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.side-panel { background: var(--bg-elevated); border-radius: 22px; padding: 18px 20px; min-width: 0; }
.side-panel__title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.side-panel__count { min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px; background: var(--bg); color: var(--ink-muted); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.side-panel__sub { margin: 16px 0 8px; font-size: 13px; font-weight: 800; color: var(--ink-subtle); }
.side-facts { margin: 0; }
.side-facts__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.side-facts__row:last-child { border-bottom: 0; }
.side-facts dt { font-size: 14px; font-weight: 600; color: var(--ink-subtle); flex-shrink: 0; }
.side-facts dd { margin: 0; font-size: 14px; font-weight: 700; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.side-facts dd small { font-size: 12px; font-weight: 600; color: var(--ink-subtle); }
.side-facts dd .side-facts__late { color: var(--late-ink); }
.side-facts .stage-pill { margin: 0; }
.side-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); white-space: pre-wrap; }
.side-empty { margin: 4px 0 0; font-size: 14px; color: var(--ink-subtle); }
.side-note { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); }
.side-note p { margin: 0 0 10px; font-size: 13px; color: var(--ink-muted); }
.side-note .btn { display: inline-flex; align-items: center; gap: 6px; }

.side-links { display: flex; flex-direction: column; gap: 6px; }
.side-link {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title chev" "meta chev";
    align-items: center; column-gap: 8px; row-gap: 4px;
    padding: 10px 12px; border-radius: 14px; background: var(--bg); color: var(--ink); text-decoration: none;
}
.side-link:hover { background: var(--bg-sunken); color: var(--ink); opacity: 1; }
.side-link__title { grid-area: title; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.side-link__meta { grid-area: meta; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--ink-subtle); }
.side-link__meta .stage-pill { margin: 0; font-size: 11px; }
.side-link__chev { grid-area: chev; color: var(--ink-subtle); }

.side-rows { display: flex; flex-direction: column; }
.side-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.side-row:last-child { border-bottom: 0; }
.side-row__icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--bg); color: var(--ink-muted); display: flex; align-items: center; justify-content: center; }
.side-row__icon svg { width: 16px; height: 16px; }
.side-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.side-row__body--inline { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.side-row__title { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.side-row__meta { font-size: 12px; font-weight: 600; color: var(--ink-subtle); }
.side-row__meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.side-row__meta.is-late { color: var(--late-ink); }
.side-row__arrow { color: var(--ink-subtle); }
.side-row__action { margin: 0; flex-shrink: 0; }
.side-row.is-done .side-row__title { text-decoration: line-through; color: var(--ink-subtle); }
.side-rows--compact .side-row { padding: 8px 0; }
.side-rows--compact .pl-mark { font-size: 13px; }

/* Datorn: toppen använder hela bredden, nyckelrutan till höger */
@media (min-width: 1100px) {
    .entity-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "id id" "chips summary" "actions summary";
        grid-template-rows: auto auto 1fr;
        column-gap: 20px; row-gap: 14px;
        align-items: start;
    }
    .entity-hero__id { grid-area: id; }
    .entity-hero__chips { grid-area: chips; }
    .entity-hero__actions { grid-area: actions; max-width: none; }
    .entity-hero .entity-summary { grid-area: summary; max-width: none; }
}
.entity-hero__name h1 { overflow-wrap: anywhere; }

/* Sidopanelen hamnar ovanför historiken när huvudytan blir smal */
@media (min-width: 901px) {
    .detail-grid:has(> .side-stack) { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
    .detail-grid:has(> .side-stack) { display: flex; flex-direction: column; }
    .detail-grid:has(> .side-stack) > .side-stack { order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
}

/* Snabbanteckningen: samma på person- och företagskortet */
.quick-note-form { margin-bottom: 20px; }

/* ============================================================
   24. Omgång 2: JV-konstellationer, allianser, stadier (2026-09-24)
   ============================================================ */
.list-intro { margin: -6px 0 14px; max-width: 70ch; font-size: 14px; color: var(--ink-subtle); }
.list-sub { margin-top: 2px; max-width: 360px; font-size: 13px; color: var(--ink-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-views .ui-chip .ui-dot { width: 8px; height: 8px; }

.entity-hero__avatar--formation { background: #ECE8F6; color: #4B3C86; }
body[data-theme="dark"] .entity-hero__avatar--formation { background: #2A2540; color: #C9BEF0; }

/* Alliansbolag */
.alliance-grid { padding: 0; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.alliance-card { background: var(--bg-elevated); border: 0; border-radius: 20px; padding: 16px 18px; transition: background 0.15s; }
.alliance-card:hover { transform: none; box-shadow: none; background: var(--bg-sunken); border-left-width: 0; opacity: 1; }
.alliance-card-name { font-weight: 800; font-size: 16px; }
.alliance-status { font-size: 11px; padding: 3px 9px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.alliance-status.status-active { background: var(--accent-soft); color: var(--accent); }
.alliance-status.status-pending, .alliance-status.status-renegotiation { background: #F6EEDC; color: #7A5B14; }
.alliance-status.status-inactive, .alliance-status.status-paused { background: var(--bg-sunken); color: var(--ink-subtle); }
.alliance-status.status-expired { background: var(--late-soft); color: var(--late-ink); }
.alliance-card-meta { font-size: 13px; font-weight: 600; }
.alliance-card-stats { border-top: 1px solid var(--line); gap: 6px; font-weight: 700; }
.alliance-stat { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg); color: var(--ink-muted); }
.pipe-kpis + .list-toolbar { margin-top: 4px; }

/* Filfält i alla formulär */
input[type="file"] { font: 600 14px var(--font-body); color: var(--ink-subtle); max-width: 100%; }
input[type="file"]::file-selector-button {
    margin-right: 12px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: var(--bg-elevated); color: var(--ink);
    font: 700 14px var(--font-body); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--bg-sunken); }

/* Infotexter i gammal stil blir lugnare rutor */
.alert-info { background: var(--bg-elevated); border: 0; border-radius: 16px; color: var(--ink-muted); font-size: 14px; line-height: 1.5; }
.alert-info strong { color: var(--ink); }

/* Stadier */

.card-header h3 .ui-badge { margin-left: 8px; font-weight: 700; }

/* Pipelinesidans mobilregler gäller bara pipelinesidan */
@media (max-width: 900px) {
    body:not([data-page="pipeline.php"]) .pipe-kpis { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body:not([data-page="pipeline.php"]) .pipe-kpis .pipe-kpi:nth-child(4) { grid-column: auto; }
}

/* ============================================================
   25. Omgång 3: admin och verktyg (2026-09-24)
   ============================================================ */
.security-details { border: 0; border-radius: 20px; background: var(--bg-elevated); overflow: hidden; margin-bottom: 16px; }
.security-summary { border: 0 !important; border-radius: 20px; padding: 14px 20px; font-weight: 700; background: transparent; }
.security-summary-arrow { font-family: var(--font-body); display: inline-flex; }
.security-details[open] .security-summary-arrow { transform: rotate(180deg); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
    /* Tabeller i verktygen behåller tabellform och scrollar i sidled */
    .table-scroll table, .table-scroll thead, .table-scroll tbody, .table-scroll tr { display: revert !important; }
    .table-scroll th, .table-scroll td { display: table-cell !important; }
    .table-scroll thead { display: table-header-group !important; }
    .table-scroll td::before { content: none !important; }
}

.list-views__sep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--line); flex-shrink: 0; }

/* Knappar med ikon */
.btn .ui-icon { flex-shrink: 0; }
.btn:has(.ui-icon) { display: inline-flex; align-items: center; gap: 6px; }
.alert-error { background: var(--late-soft); color: var(--late-ink); border: 0; border-radius: 16px; }
.alert-success { background: var(--accent-soft); color: var(--accent); border: 0; border-radius: 16px; }

/* Passerade bokningar på Översikt (2026-09-24) */
.ov-nudge--btn { width: 100%; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; text-align: left; }
.ov-nudge--btn > span { flex: 1 1 auto; }
.ov-nudge--btn:hover { filter: brightness(0.97); }
.od-list { display: flex; flex-direction: column; }
.od-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); transition: opacity 0.25s; }
.od-row:last-of-type { border-bottom: 0; }
.od-row.is-done { opacity: 0; }
.od-row__icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--bg); color: var(--ink-muted); display: flex; align-items: center; justify-content: center; }
.od-row__icon svg { width: 18px; height: 18px; }
.od-row__body { flex: 1 1 auto; min-width: 0; }
.od-row__title { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.od-row__meta { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ink-subtle); }
.od-row__meta a { color: var(--ink-muted); }
.od-row__btns { display: flex; gap: 6px; flex-shrink: 0; }
.od-done { margin: 12px 0 4px; padding: 14px 16px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
@media (max-width: 600px) {
    .od-row { flex-wrap: wrap; }
    .od-row__btns { width: 100%; padding-left: 48px; }
    .od-row__btns .btn { flex: 1 1 0; justify-content: center; }
}

/* ============================================================
   26. Tvätta bolag (2026-09-24)
   ============================================================ */
.wash-run__form { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
.wash-run__actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.wash-progress { margin-top: 14px; }
.wash-progress__bar { height: 8px; border-radius: 4px; background: var(--bg-sunken); overflow: hidden; }
.wash-progress__bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.3s; }
.wash-progress__text { margin: 8px 0 6px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wash-progress__log { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; font-size: 13px; color: var(--ink-subtle); }
.wash-progress__log li { padding: 3px 0; border-bottom: 1px solid var(--line); }
.wash-progress__log li.is-warn { color: #7A5B14; }
.wash-progress__log li.is-err { color: var(--late-ink); }
.side-panel__action { margin-top: 12px; display: inline-flex; }

.wash-h { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; font-size: 20px; }
.wash-safe { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 14px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); font-size: 14px; }
.wash-co { background: var(--bg-elevated); border-radius: 22px; padding: 16px 20px; margin-bottom: 12px; }
.wash-co__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.wash-co__name { font-size: 17px; font-weight: 800; color: var(--ink); text-decoration: none; }
.wash-co__n { font-size: 13px; font-weight: 600; color: var(--ink-subtle); }
.wash-rows { display: flex; flex-direction: column; }
.wash-row {
    display: grid; grid-template-columns: 22px 130px minmax(0, 1fr) 18px minmax(0, 1.2fr) 150px;
    align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px;
}
.wash-row:last-child { border-bottom: 0; }
.wash-row input { width: 18px; height: 18px; accent-color: var(--ink); }
.wash-row__field { font-weight: 700; color: var(--ink-subtle); }
.wash-row__old { color: var(--ink-subtle); overflow-wrap: anywhere; }
.wash-row__new { font-weight: 700; overflow-wrap: anywhere; }
.wash-row__arrow { color: var(--ink-subtle); display: flex; }
.wash-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; min-width: 0; }
.wash-src a { color: var(--ink-subtle); }
.wash-conf { padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 800; font-size: 11px; }
.wash-conf--high { background: var(--accent-soft); color: var(--accent); }
.wash-conf--medium { background: #F6EEDC; color: #7A5B14; }
.wash-conf--low { background: var(--late-soft); color: var(--late-ink); }
body[data-theme="dark"] .wash-conf--medium { background: #2E2616; color: #E3C27A; }
.wash-co__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wash-log { display: flex; flex-direction: column; padding: 6px 20px 10px; }
.wash-log__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.wash-log__row:last-child { border-bottom: 0; }
.wash-log__row form { margin: 0; flex-shrink: 0; }
.wash-log__row.is-undone .wash-log__text { color: var(--ink-subtle); text-decoration: line-through; }
@media (max-width: 900px) {
    .wash-row { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "cb field" "cb old" "cb new" "cb meta"; row-gap: 2px; }
    .wash-row input { grid-area: cb; align-self: start; margin-top: 2px; }
    .wash-row__field { grid-area: field; }
    .wash-row__old { grid-area: old; }
    .wash-row__old:not(.is-empty) { text-decoration: line-through; }
    .wash-row__arrow { display: none; }
    .wash-row__new { grid-area: new; }
    .wash-row__meta { grid-area: meta; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 4px; }
}

.btn[hidden] { display: none !important; }

/* ============================================================
   30. UX-paketet 2026-09-26: gemensamma komponenter
   ============================================================ */

/* ---- Toast (ersätter den gröna rutan efter sparat) ---- */
.ui-toast {
    position: fixed; left: 16px; right: 16px; z-index: 1200;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 148px);
    max-width: 520px; margin: 0 auto;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 6px 8px 16px; border-radius: 16px;
    background: #16181C; color: #FFFFFF; font: 700 14px/1.4 var(--font-body);
    box-shadow: var(--shadow-lg);
    animation: ui-toast-in .22s ease-out;
}
body[data-theme="dark"] .ui-toast { background: #ECEBE6; color: #16181C; }
.ui-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.ui-toast__text { flex: 1 1 auto; min-width: 0; padding: 6px 0; }
.ui-toast form { margin: 0; }
.ui-toast__undo button, .ui-toast__close {
    min-height: 40px; min-width: 40px; padding: 0 12px; border: 0; border-radius: 12px;
    background: transparent; color: #B8D4B2; font: 800 14px var(--font-body); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ui-toast__close { color: inherit; opacity: .7; padding: 0; }
body[data-theme="dark"] .ui-toast__undo button { color: #2D4A2B; }
.ui-toast__undo button:hover, .ui-toast__close:hover { background: rgba(255,255,255,.1); }
body[data-theme="dark"] .ui-toast__undo button:hover, body[data-theme="dark"] .ui-toast__close:hover { background: rgba(0,0,0,.08); }
@media (min-width: 901px) { .ui-toast { bottom: 28px; left: 256px; } }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-toast { animation: none; } .ui-toast.is-leaving { transition: none; } }

/* ---- Sidhuvud för verktyg ---- */
.ui-tool-head { align-items: center; }
.ui-tool-head__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ui-lead { margin: -6px 0 18px; max-width: 72ch; }
.ui-lead > p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-subtle); }
.ui-help { margin-top: 6px; font-size: 14px; }
.ui-help > summary {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer;
    font-weight: 800; font-size: 13px; color: var(--ink); list-style: none;
}
.ui-help > summary::-webkit-details-marker { display: none; }
.ui-help > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.ui-help[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.ui-help__body { padding: 10px 14px; margin-top: 4px; border-radius: 14px; background: var(--bg-sunken); color: var(--ink-muted); line-height: 1.55; }
.ui-help__body p { margin: 0 0 8px; } .ui-help__body p:last-child { margin: 0; }
.ui-help__body ol, .ui-help__body ul { margin: 0; padding-left: 20px; }

/* ---- Filknapp ---- */
.ui-file {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0;
    padding: 12px 14px; border-radius: 16px; cursor: pointer;
    border: 1.5px dashed var(--line-strong); background: var(--bg);
    transition: border-color .15s, background .15s;
}
.ui-file:hover, .ui-file.is-drag { border-color: var(--ink); }
.ui-file.is-drag { background: var(--accent-soft); }
.ui-file.has-file { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
body[data-theme="dark"] .ui-file.has-file, body[data-theme="dark"] .ui-file.is-drag { background: rgba(120,170,110,.12); }
.ui-file__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.ui-file:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.ui-file__icon { flex: 0 0 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--ink); }
.ui-file__text { display: flex; flex-direction: column; min-width: 0; }
.ui-file__text strong { font-size: 14px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-file__text span { font-size: 12px; color: var(--ink-subtle); }
.ui-upload { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ui-upload .btn { align-self: flex-start; }

/* ---- Sökbar bolagsväljare ---- */
.ui-picker { position: relative; flex: 1 1 220px; min-width: 0; }
.ui-picker input[type="text"] { width: 100%; }
.ui-picker.is-picked input[type="text"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ui-picker__list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 300;
    max-height: 300px; overflow-y: auto; padding: 6px;
    background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
}
.ui-picker__opt {
    display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 44px;
    padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink);
    text-align: left; cursor: pointer; font: inherit;
}
.ui-picker__opt strong { font-size: 14px; font-weight: 800; }
.ui-picker__opt span { font-size: 12px; color: var(--ink-subtle); }
.ui-picker__opt:hover, .ui-picker__opt.is-active { background: var(--bg-sunken); }
.ui-picker__new { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
.ui-picker__new strong { color: var(--accent); }
body[data-theme="dark"] .ui-picker__new strong { color: #B8D4B2; }
.ui-picker__none { padding: 10px 12px; font-size: 13px; color: var(--ink-subtle); }

/* ---- Förhandsvisning före massåtgärd ---- */
.ui-confirm__list { list-style: none; margin: 4px 0 16px; padding: 4px 0; max-height: 46vh; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ui-confirm__list li { padding: 8px 2px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.ui-confirm__list li:last-child { border-bottom: 0; }
.ui-confirm__more { color: var(--ink-subtle); font-weight: 700 !important; }
.ui-confirm__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Ångra senaste ---- */
.ui-undo-latest {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; padding: 8px 8px 8px 14px;
    border-radius: 14px; background: var(--bg-sunken); font-size: 13px; color: var(--ink-muted);
}
.ui-undo-latest span { flex: 1 1 200px; min-width: 0; }

/* ---- Tomt läge som komponent ---- */
.ui-empty { text-align: center; }
.ui-empty .btn { display: inline-flex; }

/* ---- Steg på verktygssidor: klara steg krymper ---- */
.ui-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 20px; align-items: start; }
.ui-step { display: flex; gap: 12px; background: var(--bg-elevated); border-radius: 20px; padding: 16px 18px; min-width: 0; }
.ui-step__n {
    flex: 0 0 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink); color: var(--bg-elevated); font-weight: 800; font-size: 13px;
}
.ui-step__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ui-step__body h3 { margin: 3px 0 0; font-size: 15px; font-weight: 800; }
.ui-step__body p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-subtle); }
.ui-step__body form { margin: 0; width: 100%; }
.ui-step__body .ui-upload .btn { align-self: flex-start; }
.ui-step.is-done { background: transparent; box-shadow: inset 0 0 0 1px var(--line); padding-top: 12px; padding-bottom: 12px; }
.ui-step.is-done .ui-step__n { background: var(--accent-soft); color: var(--accent); }
body[data-theme="dark"] .ui-step.is-done .ui-step__n { color: #B8D4B2; background: rgba(120,170,110,.16); }
.ui-step.is-done h3 { color: var(--ink-muted); }

/* ---- Filtrering av rader på sidan ---- */
.ui-row-filter-empty { padding: 16px; text-align: center; color: var(--ink-subtle); font-size: 14px; }
[data-filter-text][hidden], .ui-row-filter-empty[hidden], .ui-confirm__list[hidden], .ui-picker__list[hidden] { display: none !important; }

/* ---- Åtgärdsfält för markerade rader (sticky i botten) ---- */
.ui-bulkbar {
    position: sticky; bottom: 16px; z-index: 60; margin-top: 12px;
    display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
    padding: 10px 12px 10px 18px; border-radius: 20px;
    background: var(--bg-elevated); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.ui-bulkbar[hidden] { display: none; }
.ui-bulkbar__n { font-size: 14px; }
.ui-bulkbar__field { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-subtle); }
.ui-bulkbar__field select { min-width: 180px; }
.ui-bulkbar__check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ui-bulkbar .btn { margin-left: auto; }
@media (max-width: 900px) {
    /* .main har overflow-x: hidden i mobilen, då fungerar inte sticky: fast läge ovanför bottenmenyn */
    .ui-bulkbar { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 68px); margin: 0; z-index: 150; }
    .ui-bulkbar__field { flex: 1 1 100%; } .ui-bulkbar__field select { flex: 1 1 auto; min-width: 0; }
    .ui-bulkbar .btn { flex: 1 1 100%; margin-left: 0; }
}

@media (max-width: 900px) { .ui-tool-head { flex-wrap: wrap; } .ui-tool-head__actions { flex: 1 1 100%; } }

/* ============================================================
   31. UX-paketet: menyn (Verktyg med räknare, Inställningar i användarmenyn)
   ============================================================ */
.nav-count {
    margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sidebar-hover); color: var(--sidebar-ink); font: 800 11px/1 var(--font-body);
}
.sidebar-nav a.active .nav-count { background: rgba(255,255,255,.18); color: inherit; }
.nav-count--sum { margin-left: auto; background: var(--gold); color: #16181C; }
.nav-count--sum + .sidebar-tools-chevron { margin-left: 6px; }
.sidebar-settings { margin: 10px 0 6px; }
.sidebar-settings > summary {
    list-style: none; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; margin: 0 -8px;
    border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--sidebar-muted); cursor: pointer;
}
.sidebar-settings > summary::-webkit-details-marker { display: none; }
.sidebar-settings > summary:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }
.sidebar-settings > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar-settings[open] .sidebar-tools-chevron { transform: rotate(180deg); }
.sidebar-settings__list { display: flex; flex-direction: column; padding: 2px 0 6px 4px; }
.sidebar-settings__list a, .sidebar-user .sidebar-logout {
    display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px; margin: 0 -8px 0 0;
    border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none;
}
.sidebar-settings__list a:hover, .sidebar-user .sidebar-logout:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }
.sidebar-settings__list a.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-ink); }
.sidebar-user .sidebar-logout { margin-left: -8px; }
.sidebar-settings .sidebar-tools-chevron { margin-left: auto; transition: transform .15s; }

/* ---- Personkortet på smala telefoner: fem knappar och Mer ---- */
.entity-action--more { display: none !important; }
@media (max-width: 379px) {
    .entity-hero__actions .entity-action--extra { display: none !important; }
    .entity-hero__actions .entity-action--more { display: flex !important; }
    .hero-more__actions .entity-action--extra { display: flex !important; }
}
.hero-more__actions { grid-auto-flow: row !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; display: grid; gap: 8px; }

/* ---- Långa anteckningar fälls ihop ---- */
[data-clamp] { white-space: pre-line; overflow-wrap: anywhere; }
[data-clamp].is-clamped { max-height: 10.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.ui-clamp-toggle { margin-top: 6px; padding: 0; min-height: 32px; border: 0; background: none; font: 800 13px var(--font-body); color: var(--ink); cursor: pointer; }
.mydag-empty-log { margin-left: auto; }

/* ============================================================
   32. UX-paketet Fas 5: tillgänglighet och mobil
   ============================================================ */

/* Zoom är tillåten igen. Fält under 16 px får iOS att zooma in vid fokus, därför minst 16 px i mobilen */
@media (max-width: 900px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
}

/* Synlig fokus för tangentbord överallt, aldrig för mus eller finger */
:where(a, button, [role="button"], [role="tab"], summary, label.ui-chip, .ui-chip, input[type="checkbox"], input[type="radio"]):focus-visible {
    outline: 2px solid var(--ink) !important;
    outline-offset: 2px;
}
body[data-theme="dark"] :where(a, button, [role="button"], [role="tab"], summary, .ui-chip, input[type="checkbox"], input[type="radio"]):focus-visible { outline-color: #ECEBE6 !important; }
.btn:focus-visible, .ui-chip:focus-visible, .entity-action:focus-visible { box-shadow: 0 0 0 4px var(--accent-soft); }

/* Länkar inne i löptext och loggrader syns som länkar, inte bara som fet text */
.wash-log__text a, .pr-warn a, .bk-help a, .lp-why a, .mg-warn a, .list-intro a, .ui-lead a, .ui-help a, .side-text a, .ov-empty a {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* Tryckytor: små knappar och chips blir minst 40 px höga på pekskärm */
@media (pointer: coarse) {
    .btn-sm { min-height: 40px; }
    .ui-chip { min-height: 40px; }
    .sidebar-settings__list a, .sidebar-user .sidebar-logout { min-height: 44px; }
}

/* Plusknappen: dold på verktygs- och inställningssidor, där den bara skymmer.
   På övriga sidor får innehållet luft i botten så att sista raden inte hamnar under den. */
body:is([data-page="wash.php"], [data-page="prospects.php"], [data-page="link_people.php"], [data-page="merge.php"],
        [data-page="reclassify.php"], [data-page="import.php"], [data-page="import_hubspot.php"], [data-page="booking.php"],
        [data-page="stages.php"], [data-page="external_calendars.php"], [data-page="users.php"], [data-page="stilguide.php"],
        [data-page="account_security.php"], [data-page="talent_install.php"],
        [data-page="talents.php"], [data-page="talent.php"], [data-page="talent_guide.php"]) .fab-container { display: none !important; }
@media (max-width: 700px) {
    .main { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 150px) !important; }
}

/* ============================================================
   33. Steg 2 (2026-09-26): Redigera på person- och bolagskortet
   ============================================================ */

/* Specialiteter: chip med bolagets färg när det är valt */
.spec-picker { display: flex !important; flex-wrap: wrap; gap: 8px; padding: 10px !important; background: var(--bg-sunken) !important; border-radius: var(--radius) !important; border: 1px solid var(--line) !important; }
.spec-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
    font-size: 13px; font-weight: 600; background: var(--bg-elevated); color: var(--ink); border: 1px solid var(--line); }
.spec-chip input { margin: 0; accent-color: var(--spec); }
.spec-chip:has(input:checked) { background: var(--spec); border-color: var(--spec); color: #fff; }
.spec-chip:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Spara-fältet: visas när något i formuläret ändrats */
.ui-savebar {
    position: fixed; z-index: 1150; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
    max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 10px 10px 18px; border-radius: 18px; background: var(--bg-elevated); border: 1px solid var(--line);
    box-shadow: var(--shadow-lg); animation: ui-toast-in .2s ease-out;
}
.ui-savebar[hidden] { display: none; }
.ui-savebar__text { flex: 1 1 auto; font-weight: 800; font-size: 14px; }
.ui-savebar__text span { display: block; font-weight: 600; font-size: 12px; color: var(--ink-subtle); }
@media (min-width: 901px) { .ui-savebar { bottom: 24px; left: 256px; } }
body.has-savebar .fab-container { display: none !important; }
body.has-savebar .ui-toast { display: none; }

/* Fd inbyggda stilar på person- och bolagskortet. !important eftersom de ersätter style="" som alltid vann. */
.u-m0 { margin: 0 !important; }   
   
.u-rust { color: var(--rust) !important; } .u-danger { color: var(--danger) !important; } 
   
 

.k-badge-soft-inline { background: var(--bg-sunken) !important; color: var(--ink-subtle) !important; font-size: 12px !important; margin-left: 8px !important; vertical-align: middle !important; }
.k-callout-muted { background: var(--bg-sunken) !important; border-left: 4px solid var(--ink-subtle) !important; }

.ui-savebar { flex-wrap: nowrap; }
.ui-savebar__text { min-width: 0; }
.ui-savebar .btn { flex-shrink: 0; }
@media (max-width: 480px) { .ui-savebar__text span { display: none; } .ui-savebar { padding-left: 14px; gap: 4px; } .ui-savebar [data-savebar-reset] { padding-left: 8px; padding-right: 8px; } }

/* Steg 2: filterbladet */
.list-apply-row { display: flex; gap: 8px; }
.list-apply-row .btn-secondary { flex: 0 0 auto; }
.list-apply-row .list-apply { flex: 1 1 auto; }
.list-apply.is-loading { opacity: .7; }

/* Steg 2: länken Talangprofil ligger bredvid flikraden, inte i den (tillgänglighet) */
.tabs-row { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.tabs-row > .tabs { flex: 1 1 auto; min-width: 0; margin-bottom: 0 !important; }
.tabs-row > .tab-linkout {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
    border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-muted); text-decoration: none; white-space: nowrap;
}
.tabs-row > .tab-linkout:hover { background: var(--bg-sunken); color: var(--ink); }
@media (max-width: 900px) {
    .tabs-row { flex-wrap: wrap; }
    .tabs-row > .tabs { flex: 1 1 100%; }
    .tabs-row > .tab-linkout { margin-left: auto; }
}
@media (min-width: 901px) {
    .tabs-row { border-bottom: 1px solid var(--line); align-items: flex-end; }
    .tabs-row > .tabs { border-bottom: 0 !important; }
    .tabs-row > .tab-linkout { margin-bottom: 4px; }
}
@media (max-width: 900px) { .tabs-row { margin-bottom: 16px; row-gap: 4px; } .tabs-row > .tab-linkout { min-height: 36px; } }

/* ============================================================
   34. Listorna Personer och Företag (2026-09-26)
   En rad per post, alltid samma höjd, inget radbryts.
   ============================================================ */
.lr-quick { margin: 0 0 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lr-quick::-webkit-scrollbar { display: none; }
.lr-quick .ui-chip { flex: 0 0 auto; white-space: nowrap; }
.lr-quick .ui-chip .ui-dot { margin-right: 2px; }
.lr-quick__sep { flex: 0 0 1px; align-self: stretch; margin: 6px 4px; background: var(--line); }
.lr-chip-late { color: var(--late-ink); }
.lr-chip-late .list-chip-count { background: var(--late-soft); color: var(--late-ink); }
body[data-theme="dark"] .lr-chip-late { color: #E8A27F; }
.lr-lead { margin: -4px 0 12px; font-size: 13px; color: var(--ink-subtle); }

.lr-sort { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: var(--tap);
    padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elevated); color: var(--ink); cursor: pointer; }
.lr-sort select { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important;
    font: 700 14px var(--font-body); color: inherit; cursor: pointer; min-height: 0 !important; max-width: 190px; }
.lr-sort:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }

.lr-list { background: var(--bg-elevated); border-radius: 22px; overflow: hidden; }
.lr-head, .lr__link {
    display: grid; align-items: center; column-gap: 16px;
    grid-template-columns: 40px minmax(0, 2.4fr) minmax(0, 1.5fr) 104px 104px;
}
.lr-head { padding: 12px 20px 10px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.lr-head span:last-child, .lr__when { text-align: right; justify-self: end; }
.lr { position: relative; border-bottom: 1px solid var(--line); }
.lr:last-child { border-bottom: 0; }
.lr__link { min-height: 68px; padding: 12px 20px; color: var(--ink); text-decoration: none; }
.lr__link:hover, .lr:focus-within .lr__link { background: var(--bg-sunken); }
.lr__link:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.lr__av { width: 40px; height: 40px; font-size: 14px; }
.lr__av--co { border-radius: 12px; }
.lr__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lr__title, .lr__meta, .lr__status-text, .lr__rel, .lr__when { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr__title { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.lr__title > :first-child { overflow: hidden; text-overflow: ellipsis; }
.lr__star { flex: 0 0 auto; color: var(--gold); fill: var(--gold); }
.lr__badge { flex: 0 0 auto; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-subtle); }
.lr__meta { font-size: 13px; color: var(--ink-subtle); }
.lr__none { color: var(--ink-subtle); font-style: normal; }
.lr__status { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.lr__status .ui-dot, .lr__rel .ui-dot { flex: 0 0 auto; }
.lr__status-text { min-width: 0; }
.lr__stage { font-weight: 600; color: var(--ink-subtle); }
.lr__rel { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.lr__when { font-size: 13px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.lr.is-late .lr__when { color: var(--late-ink); }
body[data-theme="dark"] .lr.is-late .lr__when { color: #E8A27F; }
.lr.is-late .lr__av { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--late-soft); }
.lr__next { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); }
body[data-theme="dark"] .lr__next { color: #B8D4B2; }
.lr.is-dim .lr__title { color: var(--ink-muted); font-weight: 700; } .lr.is-dim .lr__av { background: var(--bg-sunken); color: var(--ink-muted); }

/* Snabbhandlingar: syns vid hovring eller tangentbordsfokus, ligger över högerkanten */
.lr__actions {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    display: flex; gap: 6px; padding-left: 28px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bg-sunken) 24px);
}
.lr:hover .lr__actions, .lr:focus-within .lr__actions { opacity: 1; pointer-events: auto; }
.lr__act { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: var(--bg-elevated); color: var(--ink); cursor: pointer; text-decoration: none; }
.lr__act:hover { background: var(--ink); color: var(--bg-elevated); border-color: var(--ink); }
.lr__act--log { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }

@media (max-width: 1180px) {
    .lr-head, .lr__link { grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1.4fr) 84px; }
    .lr__rel, .lr-head span:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
    .lr-sort { display: none; }
    .lr-head { display: none; }
    .lr-list { border-radius: 20px; }
    .lr__link { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 2px; padding: 12px 16px; min-height: 64px; }
    .lr__av { grid-row: 1 / span 2; }
    .lr__main { grid-column: 2; grid-row: 1 / span 2; }
    .lr__when { grid-column: 3; grid-row: 1; }
    .lr__status { grid-column: 3; grid-row: 2; justify-self: end; max-width: 42vw; font-size: 12px; }
    .lr__status .lr__stage { display: none; }
    .lr__actions { display: none; }
}
@media (hover: none) { .lr__actions { display: none; } }
.lr__tbcell { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Kadens direkt på kortet (2026-09-26) */
.cad-btn { display: inline-flex; align-items: center; gap: 6px; margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: 10px;
    background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; text-align: right; }
.cad-btn:hover { background: var(--bg-sunken); }
.cad-btn__icon { color: var(--ink-subtle); flex: 0 0 auto; }
.cad-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cad-opt { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; min-height: 52px;
    padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-elevated); cursor: pointer; }
.cad-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cad-opt__label { font-weight: 800; font-size: 15px; }
.cad-opt__sub { grid-column: 1; font-size: 12px; color: var(--ink-subtle); }
.cad-opt__sub.is-late { color: var(--late-ink); }
body[data-theme="dark"] .cad-opt__sub.is-late { color: #E8A27F; }
.cad-opt__now { grid-column: 2; grid-row: 1 / span 2; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-subtle); }
.cad-opt:hover { background: var(--bg-sunken); }
.cad-opt.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cad-opt:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.lr__link:hover, .lr__act:hover { opacity: 1; }
.act-notify { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--ink-muted); } .act-notify input { width: 18px; height: 18px; accent-color: var(--ink); }
.invite-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); cursor: pointer; font-weight: 700; font-size: 14px; margin: 0 0 12px; }
.invite-row[hidden] { display: none; }
.invite-row input { width: 18px; height: 18px; accent-color: var(--ink); margin-top: 2px; flex: 0 0 auto; }
.invite-row span { display: flex; flex-direction: column; }
.invite-row small { font-weight: 600; font-size: 12px; color: var(--ink-subtle); }
body[data-theme="dark"] .invite-row { background: rgba(120,170,110,.14); }

/* Svar på inbjudan och Teams-knappar på mötet (2026-09-26) */
.hist-rsvp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hist-rsvp .hist-badge { gap: 4px; }
.hist-badge--wait { background: var(--bg-sunken); color: var(--ink-muted); }
.hist-badge--maybe { background: var(--bg-sunken); color: var(--ink); }
.hist-teams { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hist-teams .btn { display: inline-flex; align-items: center; gap: 6px; }
.act-teams { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.act-teams .btn { display: inline-flex; align-items: center; gap: 6px; }

/* Klockan med notiser (flyttat från includes/notify_bell.php i fas M1, 2026-09-27) */
.nt-bell { position: relative; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--ink-subtle); cursor: pointer; padding: 0; }
.nt-bell .ui-icon { width: 22px; height: 22px; }
.nt-bell--top { width: 40px; height: 40px; border-radius: 8px; margin-left: auto; }
.nt-bell--top + .search-trigger-topbar { margin-left: 0; }
.nt-bell--float { display: none; }
@media (min-width: 901px) {
    .nt-bell--float { display: flex; position: fixed; top: 18px; right: 74px; z-index: 100; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--line); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
    .nt-bell--float .ui-icon { width: 18px; height: 18px; }
    body[data-demo="1"] .nt-bell--float { top: 54px; }
}
.nt-bell:hover { color: var(--ink); }
.nt-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--late-ink, #A23030); color: #fff; font: 800 11px/18px var(--font-body); text-align: center; }
.nt-badge[hidden] { display: none; }
.nt-panel { position: fixed; z-index: 1000; top: 68px; right: 22px; width: 380px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100vh - 90px)); display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.16); overflow: hidden; }
.nt-panel[hidden] { display: none; }
.nt-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.nt-panel__head strong { font-size: 16px; }
.nt-link { border: 0; background: none; color: var(--ink-subtle); font: 700 13px var(--font-body); cursor: pointer; padding: 4px 0; }
.nt-link:hover { color: var(--ink); }
.nt-panel__acts { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.nt-link[hidden] { display: none; }
.nt-list { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; }
.nt-item a { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 10px 8px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.nt-item a:hover { background: var(--bg-sunken); opacity: 1; }
.nt-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; }
.nt-title { font-size: 14px; font-weight: 600; }
.nt-item.is-unread .nt-title { font-weight: 800; }
.nt-body { font-size: 13px; color: var(--ink-subtle); }
.nt-meta { font-size: 12px; color: var(--ink-subtle); margin-top: 2px; }
.nt-empty { padding: 18px 10px; color: var(--ink-subtle); font-size: 14px; text-align: center; }
.nt-push { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 10px 16px; font-size: 13px; color: var(--ink-subtle); }
.nt-push[hidden] { display: none; }
.nt-push__text { flex: 1 1 180px; min-width: 0; }
.nt-push__acts { display: flex; gap: 14px; }
.nt-link--strong { color: var(--ink); }
.nt-panel__foot { border-top: 1px solid var(--line); padding: 10px 16px; font-size: 13px; }
.nt-panel__foot a { color: var(--ink-subtle); font-weight: 700; }
@media (max-width: 900px) { .nt-panel { top: 60px; right: 16px; left: 16px; width: auto; max-width: none; } }

/* ============================================================
   Fas 4 (2026-09-27): kortens flikar, blad och formulär i ny stil.
   Rubrik med knapp (.tab-head), radlistor (.rl), formulär i rutor (.fp),
   segment och chips med riktiga radioknappar och kryssrutor.
   ============================================================ */
.tab-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 4px 12px; }
.tab-head h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; }
.tab-head__count { font-size: 14px; font-weight: 800; color: var(--ink-subtle); }
.tab-head .btn { min-height: var(--tap); display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tab-lead { margin: -4px 4px 12px; font-size: 13px; line-height: 1.45; color: var(--ink-subtle); }

.rl { background: var(--bg-elevated); border-radius: 22px; padding: 6px 20px 8px; min-width: 0; }
.rl + .rl, .rl + .tab-head { margin-top: 18px; }
.rl__sub { margin: 12px 0 0; font-size: 13px; font-weight: 800; color: var(--ink-subtle); }
.rl__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.rl__row:last-child { border-bottom: 0; }
.rl__row .ui-avatar { font-size: 14px; font-weight: 800; }
.rl__row .ui-avatar--co { border-radius: 12px; }
.rl__row.is-past .ui-avatar { background: var(--bg-sunken); color: var(--ink-subtle); }
.rl__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rl__hit { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; min-height: var(--tap); color: var(--ink); text-decoration: none; border-radius: 14px; }
a.rl__hit:hover { opacity: 1; }
a.rl__hit:hover .rl__title { text-decoration: underline; text-underline-offset: 3px; }
.rl__hit--plain { grid-template-columns: minmax(0, 1fr); }
.rl__title { font-size: 16px; font-weight: 800; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
a.rl__title:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 1; }
.rl__text { font-size: 14px; font-weight: 600; color: var(--ink-muted); overflow-wrap: anywhere; }
.rl__meta { font-size: 13px; font-weight: 600; color: var(--ink-subtle); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rl__meta .stage-pill { margin: 0; font-size: 11px; }
.rl__quote { font-size: 13px; color: var(--ink-muted); font-style: italic; }
.rl__more { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rl__more:hover { background: var(--bg-sunken); color: var(--ink); }
.rl__empty { margin: 10px 0; font-size: 14px; color: var(--ink-subtle); }
.rl__badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-muted); }

/* Formulär i rutor */
.form-panels { display: flex; flex-direction: column; gap: 14px; }
.fp { background: var(--bg-elevated); border-radius: 22px; padding: 18px 20px; min-width: 0; scroll-margin-top: 80px; }
.fp__title { margin: 0 0 14px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.fp__sub { margin: 16px 0 8px; font-size: 13px; font-weight: 800; color: var(--ink-subtle); }
.fp__hint { margin: 8px 2px 0; font-size: 13px; line-height: 1.45; color: var(--ink-subtle); }
.fp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-grid .span-all { grid-column: 1 / -1; }
.fp-gap { margin-top: 10px; }
.fp-jump { margin: 0 0 14px; }
.fp-jump .ui-chip { min-height: var(--tap); }
.fp-actions { display: flex; gap: 10px; align-items: center; }
.fp-actions .btn { min-height: var(--tap); }
.fp-danger { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-radius: 22px; border: 1px dashed var(--line); margin: 0; }
.fp-danger strong { display: block; font-size: 14px; }
.fp-danger span { font-size: 13px; color: var(--ink-subtle); }
.fp-danger .btn { min-height: var(--tap); flex-shrink: 0; }

/* Fält: samma utseende som Logga-bladet i sidomenyn */
.ui-field .ui-picker { flex: 0 0 auto; }
.ui-field .ui-picker input[type="text"] { border: 0 !important; background: transparent !important; padding: 2px 1px !important; min-height: 28px !important; box-shadow: none !important; font-weight: 600; }
.ui-field input[type="date"], .ui-field input[type="month"], .ui-field input[type="datetime-local"] { font-family: inherit; }
.ui-field select { width: 100%; min-height: var(--tap) !important; margin: -8px 0 -8px; }
.ui-field:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.ui-field.is-off { opacity: 0.55; }

/* Segment och chips med riktiga radioknappar och kryssrutor */
.ui-seg label { position: relative; min-height: var(--tap); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8px; border-radius: 12px; color: var(--ink-subtle); font: 700 14px var(--font-body); cursor: pointer; }
.ui-seg label:has(input:checked) { background: var(--bg-elevated); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.ui-seg label input, label.ui-chip input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer; }
label.ui-chip { position: relative; }
label.ui-chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg-elevated); }
.ui-seg label:has(input:focus-visible), label.ui-chip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.sheet-form .ui-chip, .fp .ui-chip { min-height: var(--tap); }
.ui-chips--wrap { flex-wrap: wrap; overflow: visible; }

/* Formulär i blad */
.sheet-form { display: flex; flex-direction: column; gap: 12px; }
.sheet-form .btn-wide, .sheet-actions .btn { width: 100%; min-height: 48px; justify-content: center; }
.sheet-actions { display: flex; flex-direction: column; gap: 10px; }
.sheet-actions form { margin: 0; }
.sheet-more > summary { list-style: none; cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 800; font-size: 14px; color: var(--ink-muted); }
.sheet-more > summary::-webkit-details-marker { display: none; }
.sheet-more[open] > summary { margin-bottom: 8px; }
.sheet-people { display: flex; gap: 8px; align-items: stretch; }
.sheet-people .ui-field { flex: 1 1 auto; }
.sheet-people .btn { min-height: var(--tap); align-self: center; }
.sheet-chosen { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet-chosen:empty { display: none; }

/* Resa */
.journey { display: flex; flex-direction: column; }
.journey__row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.journey__row:last-child { border-bottom: 0; }
.journey__dot { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--stage, var(--ink-subtle)); }
.journey__title { font-size: 15px; font-weight: 800; }
.journey__meta { font-size: 13px; font-weight: 600; color: var(--ink-subtle); }
.journey__when { font-size: 13px; font-weight: 700; color: var(--ink-subtle); white-space: nowrap; }

@media (max-width: 900px) {
    .fp-grid, .fp-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .fp, .rl { padding-left: 16px; padding-right: 16px; }
    .fp-danger { padding: 14px 16px; }
    .fp-jump { overflow-x: auto; }
}
a.rl__row--link { grid-template-columns: 40px minmax(0, 1fr) auto; color: var(--ink); text-decoration: none; }
a.rl__row--link:hover { opacity: 1; }
a.rl__row--link:hover .rl__title { text-decoration: underline; text-underline-offset: 3px; }
.rl__chev { color: var(--ink-subtle); }
body.has-savebar form[data-edit-form] { padding-bottom: 96px; }

/* ============================================================
   Fas M2 (2026-09-27): tummen först.
   Alla tryckytor minst 44 px i mobilen, textlänkar får en osynlig
   klickyta på höjden, aktuell sida syns tydligt i bottenmenyn och
   inget hamnar under notch, hemindikator eller tangentbord.
   ============================================================ */
@media screen and (max-width: 900px) {
    /* Toppraden */
    .hamburger, .nt-bell--top, .search-trigger-topbar { width: var(--tap) !important; height: var(--tap) !important; min-width: var(--tap); }

    /* Knappar, chips, segment och fällbara rubriker */
    .btn-sm, .btn.btn-sm { min-height: var(--tap) !important; }
    .ui-chip, .hist-chips .ui-chip, .rp-pipes .ui-chip, .list-active .ui-chip { min-height: var(--tap) !important; }
    .ui-seg a, .ui-seg button, .ui-seg label { min-height: var(--tap) !important; display: flex; align-items: center; justify-content: center; }
    .lb-more summary, .ui-help > summary, .pr-more > summary { min-height: var(--tap) !important; display: flex; align-items: center; }
    .hist-more, .ui-clamp-toggle { min-height: var(--tap) !important; }
    .tabs-row > .tab-linkout { min-height: var(--tap) !important; }
    .cad-btn { min-height: var(--tap) !important; }
    .task-row2__del { width: var(--tap); height: var(--tap); }
    .pipe-sort, .pipe-stagebar__cur, .pipe-topbar-switch, .pipe-mfoot__new { min-height: var(--tap) !important; }
    .mydag-row-link { min-height: var(--tap) !important; }
    label.bk-chip { min-height: var(--tap) !important; padding-left: 14px; padding-right: 14px; }
    label.bk-check { min-height: var(--tap); padding-left: 14px; margin-left: -14px; }
    label.pr-person { padding-left: 14px; margin-left: -14px; }
    .hero-contact__item { min-height: var(--tap) !important; }
    .rp-card li > a { min-height: var(--tap) !important; display: flex; align-items: center; }

    /* Kryssrutan i Min dag och Uppgifter: hela 44 px är knappen, rutan ritas i mitten */
    .mydag-checkbox-form, .mydag-row .mydag-checkbox-form, .task-row2 .mydag-checkbox-form { margin: -10px; }
    .mydag-checkbox, .mydag-row .mydag-checkbox, .task-row2 .mydag-checkbox { width: var(--tap); height: var(--tap); border: 0 !important; background: transparent !important; margin: 0; }
    .mydag-checkbox::before { inset: 10px; border: 2px solid var(--ink-subtle); border-radius: 6px; }
    .mydag-row .mydag-checkbox::before, .task-row2 .mydag-checkbox::before { border-radius: 50%; border-color: var(--line-strong); }
    .mydag-checkbox:hover::before { border-color: var(--accent); background: var(--accent-soft); }
    .mydag-checkbox::after { position: relative; z-index: 1; }
    .mydag-checkbox.is-checked::before { background: var(--success); border-color: var(--success); }
    .mydag-checkbox.is-checked { color: #fff; }

    /* Länkar som står för sig själva i en rad (inte mitt i löptext): 44 px höga utan att raden växer */
    .task-row2__meta a, .entity-summary dd a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -12px; }

    /* Stadiestapeln på Pipeline: klickytan är 44 px, den synliga stapeln är densamma som förut */
    .pipe-seg { height: var(--tap); margin: -4px 0 -22px; }
    .pipe-seg::before { top: 10px; }

    /* Bottenmenyn: aktuell sida med en markering bakom ikonen */
    .bottom-nav a { position: relative; }
    .bottom-nav a.active { color: var(--ink); font-weight: 800; }
    .bottom-nav a.active::before {
        content: ""; position: absolute; top: 6px; left: 50%; width: 56px; height: 30px; margin-left: -28px;
        border-radius: 15px; background: var(--accent-soft); z-index: -1;
    }
    .bottom-nav a.active svg { stroke: var(--accent); }
    .bottom-nav { isolation: isolate; }

    /* Notch och hemindikator, även liggande */
    .mobile-topbar { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
    .main { padding-left: max(14px, env(safe-area-inset-left, 0px)) !important; padding-right: max(14px, env(safe-area-inset-right, 0px)) !important; }
    .bottom-nav { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
    .ui-sheet__panel { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
    .fab-container { margin-right: env(safe-area-inset-right, 0px); }

    /* Tangentbordet: bladen och spara-fältet lyfts upp ovanför det (--kb sätts av ui.js) */
    .ui-sheet__panel { bottom: var(--kb, 0px); max-height: calc(100dvh - var(--kb, 0px) - 12px - env(safe-area-inset-top, 0px)); transition: bottom .15s ease-out; }
    body.kb-open .ui-sheet__panel { padding-bottom: 16px; }
    body.kb-open .bottom-nav, body.kb-open .fab-container { display: none !important; }
    body.kb-open .ui-savebar { bottom: calc(var(--kb, 0px) + 8px); }
    .ui-sheet__panel .btn-wide, .ui-sheet__panel .hsps-log-save { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -12px 16px -4px var(--bg-elevated); }

    /* Rapporten: tabellerna blir kort i mobilen */
    .rp-table--cards thead { display: none; }
    .rp-table--cards, .rp-table--cards tbody { display: block; }
    .rp-table--cards tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .rp-table--cards tbody tr:last-child { border-bottom: 0; }
    .rp-table--cards th, .rp-table--cards td { display: block; padding: 0; border: 0 !important; text-align: left !important; background: none !important; }
    .rp-table--cards th[scope="row"] { flex: 1 0 100%; font-size: 15px; }
    .rp-table--cards td { font-size: 14px; white-space: normal; }
    .rp-table--cards td::before { content: attr(data-label) " "; font-size: 12px; font-weight: 700; color: var(--ink-subtle); }
    .rp-table--cards td[data-label="Nästa steg"] { flex: 1 0 100%; }
    .rp-table--cards tr.is-bottleneck { background: var(--late-soft); border-radius: 12px; padding: 12px; margin: 4px 0; }
}
@media screen and (max-width: 900px) and (orientation: landscape) {
    .bottom-nav a { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
    .bottom-nav a.active::before { top: 3px; }
}

/* Fas 5 (2026-09-27): JV-konstellationen */
.fm-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fm-stack > .tab-head { margin-bottom: -2px; }
.fm-act__icon { background: var(--bg-sunken); color: var(--ink-muted); }
.fm-act__icon--planned { background: var(--accent-soft); color: var(--accent); }
.fm-act__icon .ui-icon { width: 18px; height: 18px; }
.fm-act .rl__hit { align-items: start; }
.fm-act__content { font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; margin-top: 4px; }
.fm-act__preview { font-weight: 500; }
.fm-suggest { margin-bottom: 14px; }
.fm-import { margin: 0; }
.fm-import .btn { min-height: var(--tap); }
.fm-badge-ok { background: var(--accent-soft); color: var(--accent); }
.fm-file__icon { font-size: 11px; letter-spacing: 0.02em; }
.fm-act-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
    .fm-suggest .rl__row { grid-template-columns: minmax(0, 1fr); }
    .fm-import .btn { width: 100%; }
}

/* Fas 6 (2026-09-27): systemsidorna */
button.rl__hit { border: 0; background: none; padding: 0; margin: 0; text-align: left; font: inherit; cursor: pointer; width: 100%; }
button.rl__hit:hover .rl__title { text-decoration: underline; text-underline-offset: 3px; }
.st-num { background: var(--bg-sunken); color: var(--ink); font-weight: 800; box-shadow: inset 0 0 0 4px var(--st, var(--line)); }
.ui-field input[type="color"] { width: 100%; height: 32px !important; min-height: 32px !important; padding: 0 !important; cursor: pointer; }
.rl + .tab-head, .mb-lg + .tab-head { margin-top: 22px; }
.cal-url { font-size: 13px; word-break: break-all; color: var(--ink-muted); padding: 2px 0; }
.sec-page { max-width: 760px; }
.sec-status { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.sec-status.is-on { color: var(--accent); }
.sec-list { margin: 8px 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.7; }
.sec-qr { width: 240px; max-width: 100%; margin: 14px 0; padding: 12px; background: #fff; border-radius: 16px; border: 1px solid var(--line); }
.sec-qr svg { display: block; width: 100%; height: auto; }
.sec-key { font-size: 16px; letter-spacing: 0.08em; word-break: break-all; }
.sec-code input { font-family: ui-monospace, Menlo, monospace !important; font-size: 22px !important; letter-spacing: 0.3em; }
.sec-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--bg-sunken); font-family: ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: 0.05em; }
.sec-alert { margin: 8px 0 0; font-weight: 800; color: var(--danger); }
.sec-warn { box-shadow: inset 0 0 0 2px var(--gold); }
.sec-danger { box-shadow: inset 0 0 0 2px var(--late-soft); }
.sec-danger .fp__title { color: var(--late-ink); }
.tab-head .btn { white-space: nowrap; }
@media (max-width: 560px) {
    .tab-head:has(.fp-actions) { flex-wrap: wrap; }
    .tab-head:has(.fp-actions) h2 { flex: 1 0 100%; }
}

/* ============================================================
   Fas M3 (2026-09-27): gester i mobilen (assets/gestures.js)
   ============================================================ */
@media screen and (max-width: 900px) {
    /* Svep på rader: raden glider undan och visar Logga (höger) eller Ring och Mejla (vänster) */
    .sw { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
    .sw:last-child { border-bottom: 0; }
    .sw > .ui-row { border-bottom: 0; }
    .lr.sw-box { overflow: hidden; }
    .sw-move { position: relative; z-index: 1; background: var(--bg-elevated); touch-action: pan-y; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
    .sw-box.is-dragging .sw-move { transition: none; }
    .sw__bg { position: absolute; inset: 0; z-index: 0; display: none; align-items: stretch; }
    .sw-box.sw--right .sw__bg--log { display: flex; }
    .sw-box.sw--left .sw__bg--acts { display: flex; }
    .sw__bg--log { align-items: center; gap: 10px; padding-left: 22px; background: #2D4A2B; color: #fff; font-weight: 800; font-size: 15px; }
    .sw__ico { display: inline-flex; transition: transform .15s ease-out; }
    .sw-box.is-armed .sw__ico { transform: scale(1.3); }
    .sw__bg--acts { justify-content: flex-end; }
    .sw__btn { width: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; }
    .sw__btn:hover { opacity: 1; }
    .sw__btn--tel { background: #1E6B52; }
    .sw__btn--mail { background: #2B5A8A; }
    .sw__btn--sms { background: #2B5A8A; }
    .sw__btn:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

    /* Raden du kom tillbaka från blinkar till */
    .sw-flash, .sw-flash .sw-move { animation: sw-flash 1.5s ease-out; }
    @keyframes sw-flash { 0%, 30% { background: var(--bg-sunken); } 100% { background: var(--bg-elevated); } }

    /* Dra ner bladet */
    .ui-sheet__grab { padding: 0; box-sizing: content-box; border: 10px solid transparent; border-width: 8px 40px; background-clip: padding-box; margin: -8px auto -4px; }
    .ui-sheet__panel.is-dragging { animation: none; transition: none; }
    .ui-sheet__panel.is-settling { animation: none; transition: transform .2s ease-out, bottom .15s ease-out; }
    .ui-sheet__scrim { transition: opacity .2s ease-out; }

    /* Dra ner för att uppdatera (appen) */
    .ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
           display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--ink); box-shadow: var(--shadow-lg);
           z-index: 1200; opacity: 0; pointer-events: none; }
    .ptr.is-on { opacity: 1; }
    .ptr svg { transition: transform .18s ease-out; }
    .ptr.is-ready svg { transform: rotate(180deg); }
    .ptr.is-loading svg { animation: ptr-spin .8s linear infinite; }
    @keyframes ptr-spin { to { transform: rotate(360deg); } }

    /* Svep från kanten för tillbaka (appen på iPhone) */
    .edge-back { position: fixed; left: -46px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
                 display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); color: var(--ink-muted);
                 box-shadow: var(--shadow-lg); z-index: 1200; opacity: 0; pointer-events: none; }
    .edge-back.is-on { opacity: 1; }
    .edge-back.is-ready { background: var(--ink); color: var(--bg-elevated); }
}
@media (prefers-reduced-motion: reduce) {
    .sw-move, .ui-sheet__panel.is-settling { transition: none; }
    .sw-flash, .sw-flash .sw-move { animation: none; outline: 2px solid var(--line-strong); outline-offset: -2px; }
}

/* ============================================================
   Fas M4 (2026-09-27): ändra direkt på kortet, mikrofon, kamera
   ============================================================ */
.ie.side-facts__row { align-items: flex-start; }
.ie dt { padding-top: 11px; }
.ie.side-facts__row { padding: 0; }
.ie dd { flex: 1 1 auto; min-width: 0; }
.ie__val { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; max-width: 100%; min-height: 44px; padding: 8px 0 8px 8px;
           border: 0; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: right; cursor: pointer; border-radius: 10px; }
.ie__text { min-width: 0; overflow-wrap: anywhere; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.ie__pen { flex: 0 0 auto; color: var(--ink-subtle); opacity: .55; }
.ie__val:hover .ie__pen, .ie__val:focus-visible .ie__pen { opacity: 1; color: var(--ink); }
.ie__val:hover .ie__text { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.ie__val.is-empty .ie__text { color: var(--ink-subtle); font-weight: 600; }
.ie__val:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ie.is-editing { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0 12px; }
.ie.is-editing dt { padding-top: 0; }
.ie.is-editing dd { align-items: stretch; text-align: left; }
.ie__form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ie__form[hidden] { display: none; }
.ie__input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--bg-elevated);
             color: var(--ink); font: 600 16px var(--font-body); }
.ie__input:focus { outline: none; border-color: var(--ink); }
.ie__btns { display: flex; gap: 8px; }
.ie__btns .btn { min-height: 40px; }
.ie__hint { margin: 0; font-size: 12px; color: var(--ink-subtle); font-weight: 500; }
.ie__stages [hidden] { display: none !important; }
.ie .ui-seg { width: 100%; }
.ie.is-saving { opacity: .6; pointer-events: none; }
@media (pointer: coarse) { .ie__btns .btn { min-height: 44px; } }

/* Mikrofonen i Logga och snabbanteckningen */
.dict-wrap { position: relative; display: block; }
.dict-wrap > textarea { padding-right: 56px; }
.dict-btn { position: absolute; right: 6px; bottom: 6px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center;
            background: var(--bg-sunken); color: var(--ink); cursor: pointer; }
.dict-btn:hover { background: var(--line); }
.dict-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dict-btn[aria-pressed="true"] { background: #B3261E; color: #fff; animation: dict-pulse 1.4s ease-in-out infinite; }
/* Lyssnar tills du stoppar (2026-09-29): röd knapp med Stoppa och tidräknare, texten som ännu inte är klar under fältet */
.dict-btn.is-rec { width: auto; min-width: 44px; padding: 0 14px 0 12px; gap: 6px; border-radius: 999px; font: 800 14px var(--font-body); animation: none; box-shadow: 0 0 0 4px rgba(179, 38, 30, .18); }
.dict-btn.is-rec:hover { background: #9C2019; }
.dict-btn__time { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .9; }
.dict-wrap.is-rec > textarea { padding-bottom: 60px; }
.dict-live { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 13px; line-height: 1.4; }
.dict-live[hidden] { display: none; }
.dict-live__interim { color: var(--ink-subtle); font-style: italic; }
.dict-live__interim:empty, .dict-live__status:empty { display: none; }
.dict-live__status { color: var(--late-ink, #9a3412); font-weight: 700; }
@keyframes dict-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .45); } 50% { box-shadow: 0 0 0 8px rgba(179, 38, 30, 0); } }
.dict-tip { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-subtle); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .dict-btn[aria-pressed="true"] { animation: none; } }

/* Kameran: visitkort eller skärmbild direkt till AI-import */
.cam-pick { position: relative; cursor: pointer; }
.cam-pick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cam-pick:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: fine) { .cam-only-touch { display: none !important; } }
.quick-note-form .dict-wrap { width: 100%; }
@media (max-width: 900px) {
    .quick-note-form.is-compact .dict-btn { display: none; }
    .quick-note-form.is-compact .dict-wrap > textarea { padding-right: 14px; }
}
.cam-pick.is-busy { opacity: .6; pointer-events: none; }
.ai-cam { align-self: flex-start; margin-top: 10px; }
.hsps-new-shortcut.cam-pick { grid-column: 1 / -1; }
.ie__val[hidden] { display: none !important; }

/* Fas M5 (2026-09-27): loggningar som väntar på täckning */
.ob-bar { position: fixed; left: 50%; transform: translateX(-50%); top: 12px; z-index: 900; display: inline-flex; align-items: center; gap: 10px;
          min-height: 44px; max-width: calc(100vw - 32px); padding: 0 18px; border: 0; border-radius: 999px; background: #7A4A00; color: #fff;
          font: 800 14px var(--font-body); box-shadow: var(--shadow-lg); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-bar[hidden] { display: none; }
.ob-bar.is-warn { background: #8C1D18; }
.ob-bar__dot { width: 8px; height: 8px; border-radius: 50%; background: #FFD58A; flex: 0 0 auto; animation: ob-blink 1.6s ease-in-out infinite; }
.ob-bar__busy { font-weight: 600; }
.ob-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@keyframes ob-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ob-bar__dot { animation: none; } }
body.has-ob .main { padding-top: 60px; }
@media (max-width: 900px) { body.has-ob .main { padding-top: 58px; } }
.ob-row { grid-template-columns: minmax(0, 1fr) auto; }
.ob-row__main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ob-row__main .ui-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-row__warn { font-size: 12px; font-weight: 700; color: var(--late-ink, #8C1D18); }

/* Fas 7b (2026-09-27): stängda paneler i Översikt i mobilen */
.sp-toggle { all: unset; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; font: inherit; color: inherit; cursor: default; }
.sp-sum, .sp-chev { display: none; }
@media screen and (max-width: 900px) {
    .sp > .side-panel__title { margin: 0; }
    .sp-toggle { cursor: pointer; min-height: 44px; flex-wrap: wrap; row-gap: 2px; padding-right: 30px; position: relative; }
    .sp-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
    .sp-chev { display: block; position: absolute; right: 0; top: 50%; margin-top: -9px; color: var(--ink-subtle); transition: transform .18s ease-out; }
    .sp:not(.is-closed) .sp-chev { transform: rotate(180deg); }
    .sp.is-closed .sp-sum { display: block; flex: 1 0 100%; font-size: 14px; font-weight: 600; color: var(--ink-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sp.is-closed > .side-panel__body { display: none; }
    .sp:not(.is-closed) > .side-panel__title { margin-bottom: 8px; }
    .sp.is-closed { padding-top: 12px; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .sp-chev { transition: none; } }

/* Hub & Spokes logotyp (2026-09-27): blå i ljust läge, vit i mörkt */
.hs-logo { display: inline-block; line-height: 0; }
.hs-logo img { display: block; height: auto; max-width: 100%; }
.hs-logo--theme .hs-logo__dark { display: none; }
body[data-theme="dark"] .hs-logo--theme .hs-logo__light { display: none; }
body[data-theme="dark"] .hs-logo--theme .hs-logo__dark { display: block; }
.sidebar-brand__logo { display: inline-block; margin: 2px 0 8px; border-radius: 6px; }
.sidebar-brand__logo:focus-visible { outline: 2px solid var(--sidebar-ink); outline-offset: 4px; }
.sidebar-brand__logo:hover { opacity: 1; }
.login-logo { margin: 0 0 14px; line-height: 0; }
.login-card h1.login-logo { font-size: 0; }
.rp-print-logo { display: none; }
@media print { .rp-print-logo { display: block; margin: 0 0 14px; } .rp-print-logo img { width: 170px; height: auto; } }
.sidebar-brand > span { display: block; }

/* Aktiva dialoger (ny design 2026-09-27) */
.dialogues-wrap .rl + .rl { margin-top: 10px; }
.dlg-stage { margin-top: 26px; }
.dlg-stage h2 { display: flex; align-items: center; gap: 10px; }
.dlg-phase { font-size: 13px; font-weight: 700; color: var(--ink-subtle); }
.dlg-entity .rl__row:first-child .rl__title { font-size: 17px; }
.dlg-person .rl__hit { padding-left: 14px; }
.dlg-person .ui-avatar { width: 34px; height: 34px; font-size: 13px; }
.dlg-acts { display: inline-flex; gap: 2px; }
.dlg-lost { margin-top: 28px; }
.dlg-lost > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 16px; background: var(--bg-sunken);
                      font-weight: 800; color: var(--ink-muted); cursor: pointer; list-style: none; }
.dlg-lost > summary::-webkit-details-marker { display: none; }
.dlg-lost[open] > summary { margin-bottom: 10px; }
@media (max-width: 560px) {
    .dlg-person .rl__hit { padding-left: 0; }
    .dlg-person { grid-template-columns: minmax(0, 1fr) auto; }
}

/* "Snygga till" (2026-09-27) */
.tidy-bar { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tidy-bar[hidden] { display: none; }
.tidy-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tidy-row:not(:has(button:not([hidden]))) { display: none; }
.tidy-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong);
            border-radius: 999px; background: var(--bg-elevated); color: var(--ink); font: 700 13px var(--font-body); cursor: pointer; }
.tidy-btn:hover { background: var(--bg-sunken); }
.tidy-btn.is-busy { opacity: .7; cursor: progress; }
.tidy-btn[hidden], .tidy-out[hidden] { display: none; }
.tidy-out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tidy-done { font-size: 13px; font-weight: 800; color: var(--accent); }
body[data-theme="dark"] .tidy-done { color: #9CC49A; }
.tidy-chip { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--bg-sunken); color: var(--ink); font: 700 13px var(--font-body); cursor: pointer; text-align: left; }
.tidy-chip:hover { background: var(--line); }
.tidy-btn:focus-visible, .tidy-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (pointer: coarse) { .tidy-btn, .tidy-chip { min-height: 44px; } }
.quick-note-form .tidy-bar { grid-column: 1 / -1; }
@media (max-width: 900px) { .quick-note-form.is-compact .tidy-bar { display: none; } }

/* ============================================================
   Personer på bolaget (2026-09-28): en lista med märken på bolagskortet (fliken Personer)
   och personkortet (fliken Bolag). Reglagen i bladet sparas direkt, se assets/company_people.js.
   ============================================================ */
.cp-filter { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; }
.cp-filter::-webkit-scrollbar { display: none; }
.cp-filter button { flex: none; min-height: var(--tap, 44px); padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elevated); color: var(--ink); font: 700 13px var(--font-body); cursor: pointer; }
.cp-filter button[aria-pressed="true"] { background: var(--ink); color: var(--bg-elevated); border-color: var(--ink); }
.cp-filter button small { font-weight: 600; opacity: .7; margin-left: 5px; font-size: 12px; }
.cp-filter button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cp-row[hidden] { display: none; }
.cp-name { min-width: 0; }
.cp-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cp-badge { font-size: 11px; font-weight: 800; line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: var(--bg-sunken); color: var(--ink-muted); white-space: nowrap; }
.cp-badge--primary { background: var(--ink); color: var(--bg-elevated); }
.cp-badge--dm { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.cp-badge--emp { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.cp-other { color: var(--ink-subtle); }
.cp-empty-filter { margin: 8px 4px; font-size: 13px; color: var(--ink-subtle); }
.cp-past summary { cursor: pointer; list-style: none; margin: 10px 4px 0; font-size: 13px; font-weight: 800; color: var(--ink-subtle); min-height: var(--tap, 44px); display: flex; align-items: center; gap: 6px; }
.cp-past summary::-webkit-details-marker { display: none; }
.cp-past summary svg { transition: transform .15s; }
.cp-past[open] summary svg { transform: rotate(180deg); }
.cp-past summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }

.cp-sws { display: flex; flex-direction: column; border-radius: 16px; background: var(--bg-sunken); padding: 2px 14px; }
.cp-sw { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 58px; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.cp-sw:last-child { border-bottom: 0; }
.cp-sw__t b { display: block; font-size: 15px; color: var(--ink); }
.cp-sw__t small { display: block; font-size: 12px; color: var(--ink-subtle); margin-top: 2px; line-height: 1.35; }
.cp-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cp-sw__ui { width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; flex: none; }
.cp-sw__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .15s; }
.cp-sw input:checked + .cp-sw__ui { background: var(--ink); }
.cp-sw input:checked + .cp-sw__ui::after { left: 21px; }
.cp-sw input:focus-visible + .cp-sw__ui { outline: 2px solid var(--ink); outline-offset: 2px; }
.cp-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-subtle); margin: 4px 2px 0; }
.cp-note.is-saving { color: var(--ink-muted); }
.cp-note.is-error { color: var(--danger, #b42318); font-weight: 700; }
.cp-edit .sheet-actions { margin-top: 4px; }

/* Plusknappen skymmer Lägg till på fliken Personer */
body:has([data-cp-panel]:not([style*="none"])) .fab-container { display: none !important; }

@media (max-width: 700px) {
    .cp-badges { display: flex; width: 100%; margin: 4px 0 2px; }
}

/* Håll mig inloggad på inloggningssidan (2026-09-28) */
.login-stay { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0 12px; font-size: 14px; color: var(--ink); cursor: pointer; }
.login-stay input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: none; }

/* ============================================================
   Gör mötesrapport (2026-09-28): knappen bredvid Snygga till, bladet och rapporten i historiken
   ============================================================ */
.rp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--bg-elevated); font: 700 13px var(--font-body); cursor: pointer; }
.rp-btn:hover { opacity: .9; }
.rp-btn[hidden] { display: none; }
.rp-btn:focus-visible, .tidy-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rp-sheet .ui-sheet__panel { max-width: 720px; }
.rp-wait { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 12px; text-align: center; }
.rp-wait b { font-size: 16px; color: var(--ink); }
.rp-wait small { font-size: 13px; color: var(--ink-subtle); }
.rp-wait--err b { color: var(--danger, #b42318); }
.rp-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink); animation: rp-spin 0.9s linear infinite; margin-bottom: 6px; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rp-spin { animation-duration: 3s; } }
.rp-src { font-size: 12.5px; line-height: 1.45; color: var(--ink-subtle); background: var(--bg-sunken); border-radius: 14px; padding: 10px 12px; }
.rp-sec { display: flex; flex-direction: column; gap: 4px; }
.rp-sec__h { font-size: 13px; font-weight: 800; color: var(--ink); margin: 0 2px; }
.rp-sec textarea { width: 100%; box-sizing: border-box; min-height: 44px; border: 0; border-radius: 14px; background: var(--bg-sunken); padding: 10px 12px; font: 400 15px/1.5 var(--font-body); color: var(--ink); resize: vertical; overflow: hidden; }
.rp-sec textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.rp-sig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--bg-sunken); border-radius: 14px; padding: 4px; margin-bottom: 4px; }
.rp-sig button { min-height: 44px; border: 0; border-radius: 10px; background: transparent; font: 700 14px var(--font-body); color: var(--ink-subtle); cursor: pointer; }
.rp-sig button[aria-checked="true"] { background: var(--bg-elevated); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.rp-sig button[aria-checked="true"][data-rp-sig="positive"] { color: var(--accent); }
.rp-sig button[aria-checked="true"][data-rp-sig="negative"] { color: var(--late-ink, #9a3412); }
.rp-sig button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.rp-h2 { font-size: 15px; font-weight: 800; margin: 6px 2px 0; }
.rp-h2 small { font-size: 12px; font-weight: 600; color: var(--ink-subtle); margin-left: 4px; }
.rp-sugs { display: flex; flex-direction: column; border-radius: 16px; background: var(--bg-sunken); padding: 2px 14px; }
.rp-sug { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; min-height: 44px; border-bottom: 1px solid var(--line); cursor: pointer; }
.rp-sug:last-child { border-bottom: 0; }
.rp-sug input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rp-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-strong); margin-top: 1px; display: flex; align-items: center; justify-content: center; color: transparent; box-sizing: border-box; }
.rp-sug input:checked + .rp-box { background: var(--ink); border-color: var(--ink); color: var(--bg-elevated); }
.rp-sug input:focus-visible + .rp-box { outline: 2px solid var(--ink); outline-offset: 2px; }
.rp-kind { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-subtle); }
.rp-sug b { display: block; font-size: 14.5px; color: var(--ink); }
.rp-sug small { display: block; font-size: 12.5px; color: var(--ink-subtle); margin-top: 2px; line-height: 1.4; }
.rp-sug .rp-quote { font-style: italic; }
.rp-actions { display: flex; gap: 8px; }
.rp-actions .btn { flex: 1; justify-content: center; min-height: 48px; }
.rp-cost { margin: 0; font-size: 12px; color: var(--ink-subtle); text-align: center; }
.hist-badge--report { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.hist-report ul { margin: 0 0 8px; padding-left: 20px; }
.hist-report li { margin: 0 0 2px; }
.hist-report .hist-note__h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-subtle); margin: 10px 0 2px; }
.hist-ask__btns { flex-wrap: wrap; }

/* ============================================================
   System (2026-10-06): systems.php, alla bolag med känt system grupperade per system
   ============================================================ */
.sys-jump { margin: 4px 0 20px; }
.sys-jump .ui-chip { text-decoration: none; }
.sys-group { margin: 0 0 28px; scroll-margin-top: 84px; }
.sys-group__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 4px 10px; font-size: 18px; font-weight: 800; }
.sys-group__count { font-size: 14px; font-weight: 700; color: var(--ink-subtle); }
.sys-group__help { font-size: 13px; font-weight: 500; color: var(--ink-subtle); }
.sys-row.lr-head, .sys-row.lr__link { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) 150px 124px minmax(0, 1.3fr); }
.sys-row.lr__link { min-height: 60px; }
.sys-cell { min-width: 0; font-size: 13px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-cell--system { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.sys-ats { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-biz { font-size: 12px; color: var(--ink-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-cell--source.is-unsure { color: var(--late-ink); font-weight: 700; }
body[data-theme="dark"] .sys-cell--source.is-unsure { color: #E8A27F; }
.sys-cell--end { font-variant-numeric: tabular-nums; }
.sys-cell--end small { display: block; font-size: 12px; font-weight: 700; color: var(--late-ink); }
body[data-theme="dark"] .sys-cell--end small { color: #E8A27F; }
.sys-row .lr__status { justify-content: flex-start; }
.sys-foot { margin: 8px 4px 24px; font-size: 13px; color: var(--ink-subtle); }
.sys-foot a, .sys-link { color: var(--accent); font-weight: 700; }
body[data-theme="dark"] .sys-foot a, body[data-theme="dark"] .sys-link { color: #B8D4B2; }
.sys-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.sys-check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 15px; font-weight: 600; cursor: pointer; }
.sys-check input { width: 22px; height: 22px; accent-color: var(--accent); }
.sys-skipped { margin: 0 4px 24px; font-size: 13px; color: var(--ink-subtle); }
.sys-skipped summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
@media (max-width: 1180px) {
    .sys-row.lr-head, .sys-row.lr__link { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.5fr) 124px minmax(0, 1.2fr); }
    .sys-row .sys-cell--source, .sys-row.lr-head span:nth-child(3) { display: none; }
    .sys-row.lr-head span:nth-child(4) { display: block; }
}
@media (max-width: 900px) {
    .sys-group__title { font-size: 17px; }
    .sys-row.lr__link { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 4px; column-gap: 12px; padding: 12px 16px; }
    .sys-row .lr__main { grid-column: 1; grid-row: 1; }
    .sys-row .sys-cell--system { grid-column: 1; grid-row: 2; }
    .sys-row .lr__status { grid-column: 2; grid-row: 1; justify-self: end; max-width: 40vw; }
    .sys-row .sys-cell--end { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; }
    .sys-row .sys-cell--source { display: none; }
    .sys-row .sys-cell--source.is-unsure { display: block; grid-column: 1 / -1; grid-row: 3; }
}

/* ============================================================
   Koppla kalendermöte till person (2026-10-12): includes/ext_link.php
   ============================================================ */
.ext-link-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elevated); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ext-link-btn:hover { background: var(--ink); color: var(--bg-elevated); border-color: var(--ink); }
.ext-link-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cal-event .ext-link-btn.cal-link-btn { min-height: 32px; margin-top: 6px; padding: 0 10px; font-size: 12px; align-self: flex-start; }
.mydag-row .ext-link-btn span { display: none; }
@media (min-width: 901px) { .mydag-row .ext-link-btn span { display: inline; } }
.ext-link__event { display: flex; flex-direction: column; gap: 2px; margin: 0 0 16px; font-size: 14px; color: var(--ink-muted); }
.ext-link__event strong { font-size: 16px; color: var(--ink); }
.ext-link__h { margin: 16px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-subtle); }
.ext-link__list { display: flex; flex-direction: column; gap: 8px; }
.ext-link__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 52px; padding: 10px 14px; text-align: left;
    border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elevated); color: var(--ink); font: inherit; cursor: pointer; }
.ext-link__opt:hover, .ext-link__opt:focus-visible { border-color: var(--ink); outline: none; }
.ext-link__opt strong { font-size: 15px; }
.ext-link__opt span { font-size: 13px; color: var(--ink-subtle); }
.ext-link__search { display: flex; flex-direction: column; gap: 10px; }
.ext-link__hint { margin: 16px 0 0; font-size: 13px; color: var(--ink-subtle); }
.ext-link__err { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--late-ink); }
[data-ext-sheet].is-busy .ui-sheet__panel { opacity: .6; pointer-events: none; }
.act-sheet__unlink { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }