/* Tokens and app shell follow the Claude Design prototype (desktop.html); Instrument Sans is the agreed deviation from its Helvetica stack. */
.crm {
    --ink:#1b1f1c;
    --ink-2:#3d443f;
    --ink-3:#6b716c;
    --ink-4:#8a908b;
    --muted:#6b716c;
    --line:#e1e5e0;
    --line-soft:#edefea;
    --line-input:#d5dad5;
    --green:#2f6b45;
    --green-700:#265838;
    --green-800:#1f4d30;
    --green-soft:#e6f1ea;
    --red:#b23a2a;
    --red-soft:#fbeeea;
    --hover:#eef1ee;
    --page:#f3f4f2;
    --panel:#fafbf9;
    margin:0;
    color:var(--ink);
    background:var(--page);
    font:13px/1.4 'Instrument Sans',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    display:flex;
    height:100vh;
    height:100dvh;
    overflow:hidden
}
.crm * {
    box-sizing:border-box
}
.crm [hidden] {
    display:none!important
}
.crm button,.crm input,.crm select,.crm textarea {
    font:inherit;
    color:inherit
}
.crm button,.crm a,.crm summary {
    cursor:pointer
}
.crm button:disabled {
    cursor:default;
    opacity:.6
}
.crm button:disabled[aria-busy="true"] {
    cursor:wait
}
.crm a {
    color:inherit;
    text-decoration:none
}
.crm button {
    border:0
}
.crm button:focus-visible,.crm a:focus-visible,.crm summary:focus-visible,.crm [tabindex]:focus-visible {
    outline:2px solid var(--green);
    outline-offset:3px
}
.crm input:focus-visible,.crm select:focus-visible,.crm textarea:focus-visible {
    outline:2px solid var(--green);
    outline-offset:0;
    border-color:var(--green)
}
.crm button,.crm a {
    transition:background .12s
}
.crm h1,.crm h2,.crm h3,.crm p {
    margin:0
}
.crm ::-webkit-scrollbar {
    height:10px;
    width:10px
}
.crm ::-webkit-scrollbar-thumb {
    background:#cfd4cf;
    border-radius:6px
}
.crm ::-webkit-scrollbar-track {
    background:transparent
}
@keyframes crm-pop {
    from {transform:translateY(8px);opacity:0}
    to {transform:none;opacity:1}
}
/* Sidebar: 216px, brand block 71px like the header, scrollable nav, user panel with popover menu. */
.crm-sidebar {
    width:216px;
    flex:0 0 216px;
    background:#fff;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    padding:16px 12px;
    gap:4px;
    min-height:0
}
.crm-brand {
    min-height:71px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    margin:-16px -12px 12px;
    border-bottom:1px solid var(--line);
    padding:8px 12px 8px 22px
}
.crm-brand a {
    display:block;
    width:100%;
    max-width:132px
}
.crm-brand img {
    width:100%;
    max-width:132px;
    height:auto;
    display:block
}
.crm-nav {
    flex:1;
    min-height:0;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:4px;
    margin:0 -4px;
    padding:0 4px
}
.crm-nav-group {
    display:flex;
    flex-direction:column;
    gap:4px
}
.crm-nav-caption {
    margin-top:22px;
    padding:0 10px 6px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-4)
}
.crm-nav-link {
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:8px;
    font-size:14px;
    font-weight:500;
    color:var(--ink-2);
    background:transparent
}
.crm-nav-link.is-row {
    gap:8px;
    padding:7px 10px;
    font-size:13px
}
.crm-nav-link:hover,.crm-nav-link.active:hover {
    background:var(--hover)
}
.crm-nav-link.active {
    background:var(--green-soft);
    color:var(--green-800);
    font-weight:700
}
.crm-nav-label {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-nav-dot {
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:currentColor;
    opacity:.7
}
.crm-nav-dot[data-icon="today"] {
    background:transparent;
    border:2px solid currentColor
}
.crm-nav-dot[data-icon="pipeline"] {
    border-radius:2px
}
.crm-nav-dot[data-icon="customers"] {
    border-radius:50% 50% 2px 2px
}
.crm-nav-dot[data-icon="archive"] {
    height:3px;
    border-radius:1px;
    box-shadow:0 4px 0 currentColor;
    margin-bottom:4px
}
.crm-nav-dot[data-icon="ideas"] {
    border-radius:2px;
    transform:rotate(45deg)
}
.crm-nav-badge {
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:9px;
    background:var(--red);
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:grid;
    place-items:center
}
.crm-nav-count {
    font-size:11px;
    color:var(--ink-4)
}
.crm-sidebar-foot {
    position:relative;
    flex:0 0 auto;
    margin-top:8px
}
.crm-sidebar-foot summary {
    list-style:none;
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px;
    border-radius:8px
}
.crm-sidebar-foot summary::-webkit-details-marker {
    display:none
}
.crm-sidebar-foot summary:hover {
    background:var(--hover)
}
.crm-avatar {
    display:inline-grid;
    place-items:center;
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:50%;
    background:var(--hover);
    color:var(--ink-2);
    font-size:10px;
    font-weight:700
}
.crm-avatar-user {
    width:30px;
    height:30px;
    flex-basis:30px;
    background:var(--ink);
    color:#fff;
    font-size:12px
}
.crm-user-text {
    min-width:0
}
.crm-user-text strong {
    display:block;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.crm-user-text small {
    display:block;
    font-size:11px;
    color:var(--ink-3)
}
.crm-user-menu {
    position:absolute;
    left:0;
    bottom:52px;
    width:200px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.1);
    padding:6px;
    display:flex;
    flex-direction:column;
    animation:crm-pop .15s ease-out;
    z-index:6
}
.crm-user-menu a,.crm-user-menu button {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    width:100%;
    text-align:left;
    padding:8px 10px;
    border-radius:6px;
    font-size:13px;
    background:transparent;
    color:var(--ink)
}
.crm-user-menu a:hover,.crm-user-menu button:hover {
    background:var(--hover)
}
.crm-user-menu a[aria-current="page"] {
    font-weight:600
}
.crm-user-menu hr {
    height:1px;
    border:0;
    background:var(--line-soft);
    margin:4px 6px
}
.crm-menu-caption {
    padding:6px 10px 4px;
    font-size:10px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-4)
}
.crm-user-menu form {
    margin:0
}
.crm-user-menu form button {
    color:var(--red)
}
.crm-user-menu form button:hover {
    background:var(--red-soft)
}
/* Main column: fixed header, scrolling content. */
.crm-main {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden
}
.crm-header {
    min-height:71px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 24px;
    border-bottom:1px solid var(--line);
    background:#fff
}
.crm-header h1 {
    font-size:18px;
    font-weight:700
}
.crm-pipeline-header {
    flex-wrap:wrap;
    gap:10px 16px;
    padding:8px 24px
}
.crm-title-block {
    min-width:180px;
    flex:1;
    overflow:hidden
}
.crm-subtitle {
    font-size:12px;
    color:var(--ink-3);
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.crm-subtitle strong {
    font-weight:400
}
.crm-breadcrumb {
    font-size:11px;
    color:var(--muted)
}
.crm-header-actions {
    display:flex;
    align-items:center;
    gap:16px;
    margin-left:auto
}
.crm-primary {
    background:var(--green);
    color:#fff!important;
    border-radius:8px;
    padding:9px 14px;
    font-size:13px;
    font-weight:600!important;
    white-space:nowrap
}
.crm-primary:hover {
    background:var(--green-700)
}
.crm-secondary {
    background:#fff;
    border:1px solid var(--line-input)!important;
    border-radius:8px;
    padding:9px 14px;
    font-size:13px;
    font-weight:600!important
}
.crm-secondary:hover {
    background:var(--hover)
}
.crm-text-link {
    background:transparent;
    color:var(--ink-2)!important;
    padding:6px 0;
    font-size:12px!important;
    text-decoration:underline!important;
    text-underline-offset:3px
}
.crm-icon {
    font-size:24px!important;
    line-height:1;
    background:#fff;
    border:1px solid var(--line-input)!important;
    width:40px;
    height:40px;
    padding:0;
    border-radius:10px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    color:var(--ink-2)!important
}
.crm-icon:hover {
    background:var(--hover)
}
/* Pipeline header controls: 260px search, owner select, primary action. */
.crm-pipeline-filters {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px 12px
}
.crm .crm-pipeline-filters input[type="search"] {
    width:260px;
    border:1px solid var(--line-input);
    border-radius:8px;
    padding:8px 12px;
    background:#f7f8f6;
    font-size:14px;
    line-height:1.3
}
.crm .crm-pipeline-filters select {
    width:auto;
    border:1px solid var(--line-input);
    border-radius:8px;
    padding:8px 10px;
    background-color:#fff;
    font-size:14px;
    line-height:1.3
}
.crm-pipeline-empty {
    margin:0 0 16px;
    padding:24px;
    background:#fff;
    border:1px dashed var(--line-input);
    border-radius:10px;
    line-height:1.5
}
.crm-pipeline-empty p {
    color:var(--muted);
    margin:4px 0 12px
}
/* Board: 272px columns on the #f3f4f2 ground, 14px apart. */
.crm-board-scroll {
    flex:1;
    min-height:0;
    overflow:auto;
    padding:20px 24px 24px
}
/* The Trello board (2026-09-26): every column runs the board's full height, so a card dropped below the last card, beside
   the cards or on the blank area still lands in that column. */
.crm-board {
    display:flex;
    gap:14px;
    align-items:stretch;
    min-height:100%
}
.crm-column {
    width:272px;
    flex:0 0 272px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:320px;
    border-radius:12px;
    padding:2px
}
.crm-column h2 {
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:6px 8px 2px;
    font-size:13px;
    font-weight:700
}
.crm-column-name {
    min-width:0;
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-column-count {
    font-size:12px;
    font-weight:400;
    color:var(--ink-4)
}
.crm-spacer {
    flex:1
}
.crm-column-total {
    font-size:12px;
    font-weight:600;
    color:var(--ink-2);
    font-variant-numeric:tabular-nums;
    white-space:nowrap
}
.crm-empty-column {
    border:1px dashed var(--line-input);
    border-radius:10px;
    padding:18px;
    text-align:center;
    font-size:12px;
    color:var(--ink-4)
}
/* A column without visible cards is narrow, so the columns in use fit a 13" screen. It is the same column: it keeps
   its place in the flow, its horizontal heading and its empty box (every column runs the board's full height since the
   Trello board). When nothing on the board is visible, no column is narrowed: the empty state explains itself in full width. */
.crm-column.is-empty {
    width:132px;
    flex:0 0 132px
}
.crm-column.is-empty .crm-spacer,.crm-column.is-empty .crm-column-total {
    display:none
}
.crm-column.is-empty .crm-empty-column {
    padding:14px 8px
}
/* Deal card: name row, need row, flags, date/value row, one status line, order steps. */
.crm-card {
    display:flex;
    flex-direction:column;
    gap:6px;
    -webkit-user-drag:element;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 12px 10px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:border-color .12s,box-shadow .12s
}
.crm-card:hover {
    border-color:#b9c2ba;
    box-shadow:0 3px 10px rgba(0,0,0,.07)
}
.crm-card-name {
    display:flex;
    align-items:flex-start;
    gap:8px
}
.crm-card-customer {
    flex:1;
    min-width:0;
    font-size:14px;
    font-weight:700;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-card-value-inline {
    display:none;
    flex:0 0 auto;
    font-size:12px;
    color:var(--ink-3);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    padding-top:2px
}
.crm-card.is-collapsed .crm-card-value-inline {
    display:block
}
.crm-card.is-collapsed .crm-card-details {
    display:none
}
.crm-card-details {
    display:flex;
    flex-direction:column;
    gap:6px
}
/* Master's board shows deals from every pipeline; a card from another pipeline says which (owner decision 2026-09-25). */
.crm-card-pipeline {
    align-self:flex-start;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    font-weight:600;
    color:var(--ink-2);
    background:var(--hover);
    border-radius:5px;
    padding:1px 6px
}
.crm-card-needrow {
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0
}
.crm-card-need {
    flex:1;
    min-width:0;
    font-size:13px;
    color:var(--ink-2);
    line-height:1.35;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-card-icon {
    flex:0 0 auto;
    width:17px;
    height:17px;
    border-radius:5px;
    background:var(--hover);
    color:var(--ink-2);
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:700;
    line-height:1;
    padding-bottom:3px
}
.crm-card-files {
    width:auto;
    padding:0 5px;
    font-size:11px;
    white-space:nowrap
}
.crm-card-flag {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    font-weight:700;
    color:var(--red)
}
.crm-flag-dot {
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
    background:var(--ink)
}
.crm-card-daterow {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:var(--ink-3)
}
.crm-card-returning {
    font-weight:700;
    color:var(--ink-2)
}
.crm-card-date {
    white-space:nowrap
}
.crm-card-value {
    font-weight:600;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    white-space:nowrap
}
.crm-card-line {
    margin-top:6px;
    padding-top:8px;
    border-top:1px solid var(--line-soft);
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11.5px;
    line-height:1
}
.crm-dot {
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
    border:1.5px solid var(--ink);
    background:transparent
}
.crm-dot.is-filled {
    background:var(--ink)
}
.crm-line-label {
    min-width:0;
    font-weight:650;
    color:var(--ink-2);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-line-status {
    font-weight:700;
    color:var(--ink-3);
    white-space:nowrap;
    font-variant-numeric:tabular-nums
}
.crm-line-status.is-urgent {
    color:var(--red)
}
.crm-check {
    width:14px;
    height:14px;
    flex:0 0 14px;
    border-radius:50%;
    background:var(--green);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:9px;
    font-weight:700
}
.crm-card-sent .crm-line-label {
    color:var(--green-800)
}
.crm-line-dates {
    color:var(--ink-3);
    font-variant-numeric:tabular-nums;
    white-space:nowrap
}
.crm-card-expand {
    flex:0 0 18px;
    width:18px;
    height:18px;
    margin:-2px -3px -2px 2px;
    border-radius:5px;
    display:grid;
    place-items:center;
    color:var(--ink-4);
    font-size:9px;
    line-height:1;
    transition:transform .15s ease,background .12s
}
.crm-card-expand:hover {
    background:var(--hover);
    color:var(--ink-2)
}
.crm-card:not(.is-collapsed) .crm-card-expand {
    transform:rotate(180deg)
}
.crm-dashed-ring {
    width:14px;
    height:14px;
    flex:0 0 14px;
    border-radius:50%;
    border:1px dashed #c99a92
}
.crm-card-unsent .crm-line-label {
    color:#a8483a
}
.crm-card-steps {
    margin-top:8px;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,auto);   /* B38: five steps fit a card when each column follows its word; the ellipsis stays the fallback */
    gap:4px
}
.crm-step {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0
}
.crm-step-bar {
    height:3px;
    border-radius:2px;
    background:#fff;
    border:1px solid #c9cfc9
}
.crm-step-text {
    font-size:10px;
    letter-spacing:.01em;
    line-height:1.1;
    color:var(--ink-3);
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.crm-step.is-done .crm-step-bar {
    background:var(--green);
    border-color:var(--green)
}
.crm-step.is-done .crm-step-text {
    color:var(--green-800);
    font-weight:700
}
.crm-notice {
    background:#fff9ee;
    color:#75461b;
    margin:18px 26px;
    padding:12px;
    border:1px solid #e7b96f;
    border-radius:8px
}
.crm fieldset {
    border:0;
    padding:0;
    margin:0 0 22px;
    min-width:0
}
.crm legend,.crm h3,.crm-eyebrow {
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    color:var(--muted);
    margin-bottom:10px
}
.crm label {
    display:block;
    font-size:12px;
    font-weight:600;
    color:#3d443f;
    margin-bottom:6px
}
.crm input:not([type=checkbox]),.crm select,.crm textarea {
    width:100%;
    min-width:0;
    border:1px solid #d5dad5;
    border-radius:8px;
    padding:9px 11px;
    background:#fff;
    line-height:1.4
}
.crm textarea {
    resize:vertical
}
.crm input[aria-invalid=true],.crm select[aria-invalid=true],.crm textarea[aria-invalid=true] {
    border-color:var(--red)
}
.crm-field-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
}
.crm-full {
    grid-column:1/-1
}
.crm-field-error {
    display:block;
    color:var(--red);
    font-size:12px;
    margin-top:4px
}
.crm-help,.crm small {
    font-size:12px;
    line-height:1.5;
    color:var(--muted)
}
.crm-error {
    background:#fbeeea;
    border:1px solid #f0cfc6;
    color:var(--red);
    padding:12px;
    border-radius:8px;
    font-size:13px;
    line-height:1.5;
    margin-bottom:14px
}
.crm [aria-disabled=true] {
    opacity:.6;
    cursor:default
}
.crm [readonly] {
    background:#fafbf9!important
}
@media(max-width:760px) {
    .crm-sidebar {
        width:170px;
        flex-basis:170px
    }
    .crm-header {
        padding:10px 16px
    }
    .crm-header-actions {
        gap:10px
    }
    .crm-board-scroll {
        padding:16px
    }
    .crm .crm-pipeline-filters input[type="search"] {
        width:100%
    }
    .crm-pipeline-filters {
        flex:1 1 100%
    }
    .crm-toast {
        left:20px;
        right:20px
    }
    .crm input,.crm select,.crm textarea {
        font-size:16px!important
    }
}
@media(max-width:500px) {
    .crm-sidebar {
        display:none
    }
    .crm-pipeline-header {
        padding:12px 16px
    }
    .crm-pipeline-filters {
        display:contents
    }
    .crm .crm-pipeline-filters input[type="search"] {
        flex:1 1 100%
    }
    .crm .crm-pipeline-filters select {
        flex:1 1 auto;
        min-width:0
    }
    .crm-pipeline-header .crm-primary {
        flex:0 0 auto
    }
    .crm-pipeline-header [data-pipeline-reset] {
        flex:1 1 100%;
        text-align:left
    }
    .crm-field-grid {
        grid-template-columns:1fr
    }
    .crm-modal {
        width:96vw
    }
    .crm .crm-modal#crm-modal {
        width:100vw;
        max-width:100vw;
        height:100dvh;
        max-height:100dvh;
        margin:0;
        border-radius:0
    }
    .crm .crm-modal#crm-modal form {
        display:flex;
        flex-direction:column;
        height:100%
    }
    .crm .crm-modal#crm-modal .crm-modal-body {
        flex:1;
        overflow:auto
    }
    .crm-modal-header {
        padding:18px
    }
    .crm-modal form {
        padding-left:18px;
        padding-right:18px
    }
    .crm .crm-drawer-head select {
        min-width:0;
        width:100%;
        text-overflow:ellipsis
    }
}
@media(prefers-reduced-motion:reduce) {
    .crm * {
        transition:none!important;
        scroll-behavior:auto!important
    }
}

.crm-work-content {flex:1;min-height:0;overflow:auto;padding:24px;background:var(--panel)}
.crm-work-toolbar {display:flex;gap:16px;flex-wrap:wrap;align-items:end;margin-bottom:18px}
.crm-work-toolbar label {display:grid;gap:6px;font-size:13px;font-weight:600}
.crm-work-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.crm-work-card {border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px 20px;min-width:0;overflow-wrap:anywhere}
.crm-work-card h2 {font-size:15px;font-weight:700;margin:0 0 8px}
.crm-work-card p {margin:6px 0;font-size:13px;line-height:1.45}
.crm-work-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.crm-work-instructions {white-space:pre-wrap}
.crm-overdue {color:#a33c25;font-weight:600}
@media(max-width:800px) {.crm-work-content {padding:20px 16px}}
@media(max-width:500px) {.crm-work-toolbar {display:grid;grid-template-columns:1fr 1fr}.crm-work-list:not(.crm-plan-view) {grid-template-columns:1fr}}
.crm-work-intro {margin-bottom:12px;max-width:760px}
.crm-user-pipelines {display:grid;gap:10px}
.crm-user-pipelines div {display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.crm-user-pipelines label {display:flex;gap:6px;align-items:center;font-weight:500}
.crm-profile {max-width:520px;grid-column:1/-1;display:grid;gap:12px}
.crm-profile label {display:grid;gap:6px;font-weight:600;font-size:13px}
.crm-profile .crm-modal-footer {padding:0;border:0;justify-content:flex-start}
.crm-tag {display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2ee;font-size:11px;font-weight:600;white-space:nowrap}
.crm-tag-warn {background:#f6e7e3;color:var(--red)}
.crm-tag-ok {background:#e5f0e8;color:var(--green)}
/* Kunder: the prototype's customer table with expandable rows (contact persons, locations, deals). */
.crm .crm-filter-toggle {border:1px solid var(--line-input);background:#fff;color:var(--ink-2);border-radius:8px;padding:8px 13px;font-size:13px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.crm .crm-filter-toggle span {font-size:11px;opacity:.7}
.crm .crm-filter-toggle:hover {filter:brightness(.97)}
.crm .crm-filter-toggle.is-on {background:var(--green);border-color:var(--green);color:#fff}
.crm .crm-filter-toggle.is-on::before {content:"✓"}
.crm-customers {max-width:1000px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;grid-column:1/-1}
.crm-customers-head,.crm .crm-customer-row {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) 70px minmax(0,1.2fr) 120px 28px;gap:12px;align-items:center;padding:12px 16px}
.crm-customers-head {padding:10px 16px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);border-bottom:1px solid var(--line)}
.crm-customers-empty {padding:24px;text-align:center;font-size:13px;color:var(--ink-3)}
.crm-customer {border-bottom:1px solid var(--line-soft)}
.crm-customer:last-child {border-bottom:0}
.crm .crm-customer-row {width:100%;border:0;border-radius:0;background:transparent;text-align:left;font-size:13px;font-weight:400;color:var(--ink);cursor:pointer}
.crm .crm-customer-row:hover {background:var(--panel)}
.crm-cust-cell {min-width:0}
.crm-cust-name {font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-cust-contact {display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-cust-sub {display:block;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-cust-num,.crm-cust-won {font-variant-numeric:tabular-nums}
.crm-cust-won {color:var(--ink-2)}
.crm-cust-status {padding:3px 8px;border-radius:5px;font-size:12px;font-weight:600;background:var(--hover);color:var(--ink-3);white-space:nowrap}
.crm-cust-status.is-open {background:var(--green-soft);color:var(--green-800)}
.crm-cust-chevron {color:var(--ink-4);font-size:10px;text-align:center;transition:transform .15s}
.crm-customer-row[aria-expanded="true"] .crm-cust-chevron {transform:rotate(180deg)}
.crm-customer-panel {padding:12px 16px 14px;display:flex;flex-direction:column;gap:6px;background:var(--panel);border-top:1px solid var(--line-soft)}
.crm-customer-cols {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:6px}
.crm-customer-col {display:flex;flex-direction:column;gap:5px;min-width:0}
.crm-customer-label {font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.crm-customer-contact {font-size:13px;min-width:0}
.crm-customer-location {font-size:13px;color:var(--ink-2)}
.crm .crm-customer-deal {display:grid;grid-template-columns:44px auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;color:var(--ink);text-decoration:none;font-weight:400}
.crm .crm-customer-deal:hover {border-color:#b9c2ba}
.crm-cust-year {font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.crm-cust-stage {padding:2px 8px;border-radius:5px;font-size:12px;font-weight:600;background:var(--hover);color:var(--ink-2);white-space:nowrap}
.crm-cust-stage.is-won {background:var(--green-soft);color:var(--green-800)}
.crm-cust-stage.is-lost {background:var(--red-soft);color:var(--red)}
.crm-cust-need {display:block;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-cust-value {font-weight:600;font-variant-numeric:tabular-nums}
@media(max-width:800px) {
  .crm-customers-head,.crm .crm-customer-row {grid-template-columns:minmax(0,1fr) 44px 104px 20px;gap:8px;padding:12px}
  .crm-customers-head span:nth-child(2),.crm-customers-head span:nth-child(4),.crm .crm-customer-row > :nth-child(2),.crm .crm-customer-row > :nth-child(4) {display:none}
  .crm-customer-cols {grid-template-columns:1fr}
  .crm .crm-customer-deal {grid-template-columns:44px minmax(0,1fr) auto;gap:6px 8px}
  .crm .crm-customer-deal .crm-cust-year,.crm .crm-customer-deal .crm-cust-stage {grid-row:1}
  .crm .crm-customer-deal .crm-cust-stage {grid-column:2;justify-self:start}
  .crm .crm-customer-deal .crm-cust-value {grid-column:3;grid-row:1;white-space:nowrap}
  .crm .crm-customer-deal .crm-cust-cell {grid-column:2/4;grid-row:2}
}
.crm-work-card .crm-work-meta {color:var(--muted);font-size:12px}
.crm-work-link {font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.crm-danger {color:var(--red)!important}
/* Idébank: welcome and composer on the left, the team's ideas on the right. */
.crm-ideas {max-width:1100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.crm-ideas-intro {display:flex;flex-direction:column;gap:22px;min-width:0}
.crm-ideas-welcome {display:flex;flex-direction:column;gap:10px}
.crm-ideas-welcome h2 {margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em}
.crm-ideas-welcome p {margin:0;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.crm-idea-composer {background:#fff;border:1px solid var(--line-input);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.crm-idea-composer:focus-within {border-color:var(--green)}
.crm .crm-idea-composer textarea {border:0;resize:vertical;padding:0;min-height:120px;width:100%;line-height:1.55;font-size:14px;background:transparent;border-radius:0}
.crm .crm-idea-composer textarea:focus-visible {outline:none;box-shadow:none}
.crm-idea-composer-foot {display:flex;align-items:center;gap:8px}
.crm-idea-hint {font-size:12px;color:var(--ink-4)}
.crm .crm-idea-composer .crm-primary.is-idle {opacity:.45}
.crm-ideas-list {display:flex;flex-direction:column;gap:10px;min-width:0}
.crm-ideas-label {font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.crm-ideas-items {display:flex;flex-direction:column;gap:10px}
.crm-idea {background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.crm-idea-head {display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);flex-wrap:wrap}
.crm-idea-avatar {width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700}
.crm-idea-author {font-weight:700;color:var(--ink)}
.crm .crm-idea-action {border:0;background:transparent;font-size:12px;color:var(--ink-3);padding:0;font-weight:500;border-radius:0}
.crm .crm-idea-action:hover {color:var(--ink)}
.crm .crm-idea-action.is-danger:hover {color:var(--red)}
.crm-idea-status {padding:2px 8px;border-radius:5px;font-size:11px;font-weight:600;background:var(--hover);color:var(--ink-2)}
.crm-idea-status.is-done {background:var(--green-soft);color:var(--green-800)}
.crm-idea-status.is-declined {background:var(--red-soft);color:var(--red)}
.crm .crm-idea-status-select {width:auto;padding:2px 24px 2px 6px;font-size:11px;font-weight:600;border-radius:5px;border:1px solid var(--line-input);background-color:#fff;background-position:right 7px center;line-height:1.3}
.crm-idea-text {font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
/* B39: the folded “Afsluttede ideer” under the list, its heading in the list label's voice. */
.crm .crm-ideas-closed-toggle {align-self:flex-start;display:flex;align-items:center;gap:8px;margin-top:8px;padding:4px 0;border:0;border-radius:0;background:transparent;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);cursor:pointer}
.crm .crm-ideas-closed-toggle::before {content:'';width:5px;height:5px;margin:0 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.crm .crm-ideas-closed-toggle[aria-expanded="true"]::before {transform:rotate(45deg)}
.crm .crm-ideas-closed-toggle:hover {color:var(--ink)}
.crm-ideas-closed {display:flex;flex-direction:column;gap:10px}
@media(max-width:900px) {.crm-ideas {grid-template-columns:1fr;gap:28px}}
.crm-work-files {display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.crm-work-files a {text-decoration:underline;text-underline-offset:3px;font-size:12px}
.crm-work-section-title {grid-column:1/-1;font-size:15px;margin:8px 0 0}
.crm-rights-all {margin:0}
.crm-rights-group {margin:0 0 16px}
.crm-rights-group:last-child {margin-bottom:0}
.crm-rights-group h4 {font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.crm-rights-group ul {list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px;background:#fff}
.crm-rights-group li {border-top:1px solid var(--line)}
.crm-rights-group li:first-child {border-top:0}
.crm-toggle {display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 14px;cursor:pointer;border:1px solid var(--line);border-radius:10px;background:#fff}
.crm-rights-group .crm-toggle {border:0;border-radius:0;background:transparent}
.crm-toggle span {display:grid;gap:2px}
.crm-toggle small {color:var(--muted)}
.crm-toggle input {appearance:none;width:38px;height:22px;border-radius:999px;background:#d8ddd8;position:relative;flex:0 0 38px;cursor:pointer;margin:0}
.crm-toggle input::after {content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .12s}
.crm-toggle input:checked {background:var(--green)}
.crm-toggle input:checked::after {left:19px}
.crm-toggle input:disabled {opacity:.5}
/* Produktionsplan: the prototype's timeline (sticky customer column, 26px day columns, event dots) plus our task cards. */
.crm-filters {display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:18px}
.crm .crm-filters input[type="search"] {width:260px;border:1px solid var(--line-input);border-radius:8px;padding:8px 12px;background:#f7f8f6;font-size:14px;line-height:1.3}
.crm .crm-filters select {width:auto;border:1px solid var(--line-input);border-radius:8px;padding:8px 10px;background-color:#fff;font-size:14px;line-height:1.3}
.crm-work-content .crm-notice {margin:0 0 16px}
.crm-work-list .crm-notice {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.crm-plan-view {display:block}
.crm-plan {--plan-col:300px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;position:relative;max-height:calc(100vh - 230px);min-height:180px}
.crm-plan-grid {display:grid;min-width:max-content}
.crm-plan-corner {position:sticky;left:0;top:0;z-index:4;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;align-items:flex-end;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);height:58px;box-sizing:border-box}
.crm-plan-head {position:sticky;top:0;z-index:3;background:#fff;border-bottom:1px solid var(--line);height:58px;box-sizing:border-box}
.crm-plan-months {position:relative;height:26px}
.crm-plan-month {position:absolute;top:6px;padding-left:8px;font-size:12px;font-weight:700;border-left:1px solid var(--line);white-space:nowrap;box-sizing:border-box}
.crm-plan-days {position:relative;height:32px}
.crm-plan-day {position:absolute;top:0;width:26px;height:32px;display:grid;place-items:center;font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.crm-plan-day.is-weekend {color:#b0b6b0}
.crm-plan-day.is-first {font-weight:700}
.crm-plan-day.is-today {background:var(--green);color:#fff;border-radius:6px;font-weight:700}
.crm .crm-plan-cust {position:sticky;left:0;z-index:2;background:#fff;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line-soft);border-radius:0;padding:10px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;height:56px;box-sizing:border-box;text-align:left;color:var(--ink);min-width:0;width:100%;font-weight:400}
.crm-plan-cust:hover,.crm-plan-track:hover {background-color:#f7f8f6}
.crm-plan-avatars {display:flex;flex:0 0 auto}
.crm-plan-avatars .crm-avatar {width:26px;height:26px;flex-basis:26px}
.crm-plan-avatars {gap:4px}
.crm-plan-avatars .crm-avatar + .crm-avatar {box-shadow:0 0 0 2px #fff}
.crm-plan-avatars .crm-avatar.is-warn {box-shadow:0 0 0 2px var(--red)}
.crm-plan-text {min-width:0;flex:1;display:block}
.crm-plan-name {display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-plan-line {display:flex;align-items:center;gap:5px;min-width:0}
.crm-plan-chip {font-size:10px;font-weight:600;padding:1px 5px;border-radius:4px;white-space:nowrap}
.crm-plan-chip.is-red {background:var(--red-soft);color:var(--red)}
.crm-plan-chip.is-green {background:var(--green-soft);color:var(--green-800)}
.crm-plan-chip.is-amber {background:#fbf0dc;color:#8a4b00}
.crm-plan-chip.is-muted {background:var(--page);color:var(--ink-3)}
.crm-production-note {margin:10px 0 0;font-size:12px;line-height:1.45;color:#a8483a}
/* B22: an archived order is a state, not a warning. */
.crm-production-note.is-archived,.crm-sheet-note {color:var(--ink-3)}
.crm-sheet-note {margin:14px 0 0;font-size:13px;line-height:1.45}
.crm-stage-hint {display:block;margin-top:4px;font-size:11px;color:var(--ink-3)}
.crm-plan-need {font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.crm-plan-track {position:relative;height:56px;border-bottom:1px solid var(--line-soft);cursor:pointer;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 52px,transparent 52px 182px)}
.crm-plan-span {position:absolute;top:27px;height:2px;background:#cfd9d1}
.crm-plan-event {position:absolute;top:0;height:56px;display:flex;align-items:center;gap:6px;transform:translateX(-7px)}
.crm-plan-dot {width:14px;height:14px;border-radius:50%;border:2px solid #fff;flex:0 0 14px;box-sizing:content-box}
.crm-plan-label {font-size:12px;white-space:nowrap;background:rgba(255,255,255,.9);padding:2px 6px;border-radius:4px;color:var(--ink)}
.crm-plan-label strong {font-weight:700}
.crm-plan-label span {color:var(--ink-3)}
.crm-plan-event.is-done {opacity:.55}
.crm-plan-event.is-cancelled {opacity:.4}
.crm-plan-event.is-cancelled .crm-plan-label {text-decoration:line-through}
.crm-plan-event.is-overdue .crm-plan-label span {color:var(--red);font-weight:600}
.crm-plan-empty {display:grid;justify-items:center;gap:10px;padding:40px 28px;max-width:520px;margin:0 auto}
.crm-plan-empty strong {font-size:16px;color:var(--ink)}
.crm-plan-empty p {margin:0}
.crm-job-head {display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.crm-job-kind {font-size:11px;font-weight:700;padding:2px 7px;border-radius:4px;background:var(--green-soft);color:var(--green-800)}
.crm-job-kind.is-pickup {background:#f6efe2;color:#7a4f12}
.crm-job-status {font-size:11px;font-weight:600;color:var(--ink-3)}
.crm-job-status.is-done {color:var(--green)}
.crm-job-status.is-cancelled {color:var(--red)}
.crm-job-when {font-weight:600}
.crm .crm-job-invoice {display:flex;gap:8px;align-items:center;font-size:12px;font-weight:400;color:var(--ink-2);margin:10px 0 0;cursor:pointer}
.crm-job-invoice input {margin:0}
/* B5: the quiet line under the invoice mark stands under its text, not under the box. */
.crm-work-card .crm-job-invoice-note {margin:4px 0 0 21px}
.crm-work-card .crm-job-invoice-note.is-said {margin:10px 0 0}   /* B13: the marker is said without a checkbox beside it (an archived deal) */
.crm-work-card .crm-job-archived {margin:10px 0 0}   /* B22: said to whoever does not see the invoice line */
@media(max-width:800px) {
  .crm-plan {--plan-col:200px;max-height:none}
  .crm .crm-plan-cust {padding:8px 12px}
  .crm-plan-need {display:none}
  .crm .crm-filters input[type="search"] {width:100%}
}
.crm-work-actions {align-items:center}
.crm-work-actions .crm-work-link {font-size:12px}
.crm-work-mobile button {white-space:nowrap}
.crm-field-error:empty {display:none}
/* Login: the prototype's centred card — logo, “CRM & produktionsplan”, two fields and a full-width button. */
.crm-auth {display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;background:var(--page)}
.crm-auth-box {width:100%;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px;display:grid;gap:18px}
.crm-auth-brand {display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.crm-auth-brand small {font-size:12px;color:var(--ink-3)}
.crm-auth-logo {width:150px;height:auto;display:block;margin:0}
.crm-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.crm-auth-box form {display:grid;gap:18px}
.crm-auth-box label {display:grid;gap:6px;font-size:13px;font-weight:600}
.crm-auth-box .crm-primary {justify-self:stretch;text-decoration:none;padding:12px;font-size:14px}
.crm-auth-link {justify-self:center;font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.crm-auth-link:hover {color:var(--ink)}
.crm-auth-note {margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}
/* Deal drawer: prototype anatomy — head with chips, summary row, action row, 2fr/3fr body, activity column. */
@keyframes crm-slide-in {
    from {transform:translateX(40px);opacity:0}
    to {transform:none;opacity:1}
}
@keyframes crm-fade-in {
    from {opacity:0}
    to {opacity:1}
}
.crm dialog {
    color:var(--ink);
    font:inherit;
    border:0;
    padding:0;
    background:#fff
}
.crm dialog::backdrop {
    background:rgba(20,24,21,.35);
    animation:crm-fade-in .15s
}
.crm dialog:focus,.crm dialog[tabindex]:focus-visible {
    outline:none
}
.crm-drawer {
    position:fixed;
    inset:0 0 0 216px;
    z-index:80;
    margin:0;
    width:auto;
    max-width:none;
    height:auto;
    max-height:none;
    display:none;
    flex-direction:column;
    box-shadow:-12px 0 40px rgba(0,0,0,.14);
    animation:crm-slide-in .2s ease-out;
    overflow:hidden
}
.crm-drawer[open] {
    display:flex
}
.crm-drawer-backdrop {
    position:fixed;
    inset:0 0 0 216px;
    z-index:79;
    background:rgba(20,24,21,.28)
}
.crm-drawer-head {
    flex:0 0 auto;
    padding:18px 24px 14px;
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:12px
}
.crm-drawer-titlerow {
    display:flex;
    align-items:flex-start;
    gap:12px
}
.crm-drawer-titles {
    min-width:0;
    flex:1
}
.crm-drawer-chips {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap
}
.crm-drawer-chips h2 {
    font-size:20px;
    font-weight:700;
    overflow-wrap:anywhere
}
.crm-chip {
    padding:3px 8px;
    border-radius:5px;
    font-size:12px;
    font-weight:600;
    background:var(--hover);
    color:var(--ink-2);
    white-space:nowrap
}
.crm-chip.is-green {
    background:var(--green-soft);
    color:var(--green-800)
}
.crm-chip.is-red {
    background:var(--red-soft);
    color:var(--red)
}
.crm-chip.is-muted {
    background:var(--page);
    color:var(--ink-3)
}
.crm-chip.is-amber {
    background:#fff9ee;
    color:#8a4b00
}
.crm-unplanned {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:700;
    color:var(--red)
}
.crm-drawer-meta {
    font-size:13px;
    color:var(--ink-3);
    margin-top:4px
}
.crm-summary {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px
}
.crm-summary-block {
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0
}
.crm-eyebrow {
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-4);
    margin:0
}
.crm-summary-value {
    font-size:15px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm .crm-summary-block select {
    width:100%;
    border:1px solid var(--line-input);
    border-radius:7px;
    padding:6px 8px;
    background-color:#fff;
    font-weight:600;
    font-size:13px;
    line-height:1.3
}
.crm .crm-summary-block label {
    margin:0;
    display:block
}
.crm-next {
    text-align:left;
    border:0;
    border-radius:7px;
    padding:6px 10px;
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
    background:var(--page);
    color:var(--ink-3)
}
.crm-next .crm-eyebrow {
    color:inherit;
    opacity:.8
}
.crm-next-text {
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%
}
.crm-next.is-plain {
    background:var(--hover);
    color:var(--ink-3)
}
.crm-next.is-overdue {
    background:var(--red-soft);
    color:var(--red)
}
.crm-next.is-today {
    background:#fff3e0;
    color:var(--red)
}
.crm-next:hover:not(:disabled) {
    filter:brightness(.97)
}
.crm-next:disabled {
    opacity:1;
    cursor:default
}
.crm-drawer-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center
}
.crm-drawer-actions .crm-secondary,.crm-drawer-actions .crm-primary,.crm-drawer-actions .crm-outline-green {
    display:inline-flex;
    align-items:center;
    line-height:1.3
}
.crm .crm-outline-green {
    background:#fff;
    color:var(--green-800);
    border:1px solid var(--green);
    border-radius:8px;
    padding:9px 14px;
    font-size:13px;
    font-weight:600
}
.crm-outline-green:hover {
    background:var(--green-soft)
}
.crm-secondary.is-positive:hover {
    background:var(--green-soft);
    border-color:var(--green)!important
}
.crm-secondary.is-lost,.crm-secondary.is-quiet {
    color:var(--ink-3)
}
.crm-secondary.is-lost:hover {
    background:var(--red-soft);
    color:var(--red)
}
.crm-secondary.is-quiet:hover {
    color:var(--ink)
}
.crm-secondary.is-danger {
    color:var(--red)
}
.crm-secondary.is-danger:hover {
    background:var(--red-soft);
    border-color:var(--red)!important
}
.crm-drawer-body {
    flex:1;
    min-height:0;
    overflow:auto;
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(0,3fr)
}
.crm-drawer-info {
    padding:20px 24px;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:22px;
    min-width:0
}
.crm-drawer-info section {
    margin:0
}
.crm-drawer-info h3,.crm-drawer-activity h3 {
    margin:0 0 10px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-4)
}
.crm-dl {
    margin:0;
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    row-gap:8px;
    column-gap:12px;
    font-size:13px
}
.crm-dl-wide {
    grid-template-columns:150px minmax(0,1fr)
}
.crm-dl dt {
    color:var(--ink-3)
}
.crm-dl dd {
    margin:0;
    font-weight:600;
    min-width:0;
    overflow-wrap:break-word;
    white-space:pre-wrap
}
.crm-dl dd a {
    color:var(--green);
    font-weight:600
}
.crm-dl dd a:hover {
    color:var(--green-800)
}
.crm-muted {
    font-size:13px;
    color:var(--ink-4)
}
.crm-customer-card {
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#fff;
    padding:10px 12px;
    text-align:left
}
.crm-customer-card:hover {
    border-color:#b9c2ba;
    background:var(--panel)
}
.crm-customer-text {
    flex:1;
    min-width:0
}
.crm-customer-name {
    display:block;
    font-size:13px;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-customer-line {
    display:block;
    font-size:12px;
    color:var(--ink-3);
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-customer-open {
    flex:0 0 auto;
    font-size:12px;
    font-weight:600;
    color:var(--green-800);
    white-space:nowrap
}
.crm-section-actions {
    margin-top:8px;
    display:flex;
    gap:12px
}
.crm-text-quiet {
    border:0;
    background:transparent;
    font-size:12px;
    color:var(--ink-3);
    padding:6px 2px;
    font-weight:600;
    text-decoration:underline
}
.crm-text-quiet:hover {
    color:var(--ink)
}
.crm-text-green {
    border:0;
    background:transparent;
    color:var(--green);
    font-size:12px;
    font-weight:600;
    padding:0
}
.crm-file-list {
    list-style:none;
    padding:0;
    margin:0 0 8px;
    display:flex;
    flex-direction:column;
    gap:6px
}
.crm-file-list:empty {
    margin:0
}
.crm-file-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 10px;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    padding:8px 10px
}
.crm-file-open {
    display:flex;
    align-items:center;
    gap:10px;
    flex:1 1 140px;
    min-width:120px;
    color:inherit
}
.crm-file-open:hover {
    opacity:.75
}
.crm-file-thumb {
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:6px;
    background:var(--hover);
    color:var(--ink-2);
    display:grid;
    place-items:center;
    font-size:9px;
    font-weight:700;
    overflow:hidden
}
.crm-file-text {
    flex:1;
    min-width:0
}
.crm-file-name {
    display:block;
    font-size:13px;
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-file-meta {
    display:block;
    font-size:11.5px;
    color:var(--ink-3);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-file-actions {
    display:flex;
    align-items:center;
    gap:4px;
    margin-left:auto
}
.crm-file-remove {
    border:0;
    background:transparent;
    color:var(--ink-4);
    font-size:12px;
    font-weight:600;
    padding:4px 6px;
    border-radius:6px;
    white-space:nowrap
}
.crm-file-remove:hover {
    background:var(--red-soft);
    color:var(--red)
}
.crm-dropzone {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px dashed var(--line-input);
    background:#fff;
    border-radius:8px;
    padding:12px;
    font-size:12.5px;
    font-weight:400;
    color:var(--ink-3);
    cursor:pointer;
    text-align:center;
    margin:0
}
.crm-dropzone:hover {
    border-color:var(--ink-4);
    color:var(--ink-2)
}
.crm-dropzone.is-drag {
    border-color:var(--green);
    background:var(--green-soft)
}
.crm-dropzone b {
    font-weight:700;
    color:var(--green-800)
}
.crm .crm-dropzone input {
    display:none
}
.crm-pickup-missing {
    margin-top:12px;
    border:1px dashed #d9bdb7;
    border-radius:10px;
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    gap:8px
}
.crm-pickup-title {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12.5px;
    font-weight:650;
    color:#a8483a
}
.crm-pickup-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    border:1px solid currentColor
}
.crm .crm-pickup-missing label {
    display:flex;
    flex-direction:column;
    gap:5px;
    font-size:12px;
    font-weight:600;
    color:var(--ink-2);
    margin:0
}
.crm .crm-pickup-missing input {
    padding:8px 10px;
    font-size:13px;
    font-weight:400
}
.crm-steps {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden
}
.crm-step-row {
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border-bottom:1px solid var(--hover);
    font-size:13px;
    background:#fff
}
.crm-step-row:last-child {
    border-bottom:0
}
.crm-step-check {
    width:16px;
    height:16px;
    border-radius:50%;
    flex:0 0 16px;
    display:grid;
    place-items:center;
    background:#fff;
    border:1.5px solid #c9cfc9;
    color:#fff;
    font-size:10px;
    font-weight:700
}
.crm-step-row.is-done .crm-step-check {
    background:var(--green);
    border-color:var(--green)
}
.crm-step-body {
    min-width:0;
    flex:1
}
.crm-step-label {
    display:block;
    font-weight:500;
    color:var(--ink-3)
}
.crm-step-row.is-done .crm-step-label {
    font-weight:700;
    color:var(--green-800)
}
.crm-step-sub {
    display:block;
    font-size:11px;
    color:var(--ink-4)
}
.crm-step-sub:empty {
    display:none
}
.crm .crm-step-button {
    border:1px solid var(--line-input);
    background:#fff;
    border-radius:7px;
    padding:5px 10px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap
}
.crm-step-button:hover:not(:disabled) {
    background:var(--green-soft);
    border-color:var(--green)
}
.crm-step-undo {
    border:0;
    background:transparent;
    font-size:11px;
    color:var(--ink-4);
    padding:4px 6px
}
.crm-step-undo:hover:not(:disabled) {
    color:var(--red)
}
.crm-production-box {
    border:1px solid #cfe0d4;
    background:#f2f8f4;
    border-radius:10px;
    padding:12px 14px;
    display:flex;
    flex-direction:column;
    gap:10px
}
.crm-production-jobs {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px
}
.crm-production-row {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    flex-wrap:wrap
}
.crm-production-dot {
    width:10px;
    height:10px;
    flex:0 0 10px;
    border-radius:50%;
    background:var(--green)
}
.crm-production-row.is-pickup .crm-production-dot {
    background:#b0741e
}
.crm-production-date {
    font-weight:700;
    width:90px
}
.crm-production-label {
    font-weight:600
}
.crm-production-meta {
    color:var(--ink-3)
}
.crm-production-foot {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    padding-top:8px;
    border-top:1px solid #cfe0d4
}
.crm-production-foot:has(a[hidden]) {
    display:none
}
.crm-amber-dashed {
    border:1px dashed #e7b96f;
    background:#fff9ee;
    border-radius:10px;
    padding:12px 14px;
    font-size:13px;
    color:#8a4b00;
    line-height:1.45
}
.crm-drawer-activity {
    padding:20px 24px;
    display:flex;
    flex-direction:column;
    gap:14px;
    background:var(--panel);
    min-width:0
}
.crm-drawer-activity h3 {
    margin:0
}
.crm-composer {
    background:#fff;
    border:1px solid var(--line-input);
    border-radius:10px;
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    gap:8px
}
.crm-composer:focus-within {
    border-color:var(--green)
}
.crm .crm-composer textarea {
    border:0;
    resize:vertical;
    padding:0;
    min-height:88px;
    width:100%;
    line-height:1.5;
    font-size:14px;
    border-radius:0
}
.crm .crm-composer textarea:focus-visible {
    outline:none
}
.crm-composer-foot {
    display:flex;
    align-items:center;
    gap:8px
}
.crm-composer-hint {
    font-size:12px;
    color:var(--ink-4)
}
.crm-composer .crm-text-quiet {
    text-decoration:none;
    font-weight:400;
    padding:6px 8px
}
.crm .crm-black {
    background:var(--ink);
    color:#fff;
    border:0;
    border-radius:7px;
    padding:7px 12px;
    font-size:12px;
    font-weight:600
}
.crm .crm-black.is-empty {
    opacity:.45
}
.crm-timeline {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column
}
.crm-timeline-item {
    display:grid;
    grid-template-columns:22px minmax(0,1fr);
    column-gap:10px;
    padding-bottom:16px;
    position:relative
}
.crm-timeline-rail {
    display:flex;
    flex-direction:column;
    align-items:center
}
.crm-timeline-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    margin-top:5px;
    flex:0 0 10px;
    background:#fff;
    border:2px solid #b0b6b0
}
.crm-timeline-item.is-note .crm-timeline-dot,.crm-timeline-item.is-message .crm-timeline-dot {
    background:var(--green);
    border-color:var(--green)
}
.crm-timeline-line {
    flex:1;
    width:1px;
    background:var(--line);
    margin-top:4px
}
.crm-timeline-note {
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0
}
.crm-timeline-meta {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:var(--ink-3);
    flex-wrap:wrap
}
.crm-timeline-author {
    font-weight:700;
    color:var(--ink)
}
.crm-timeline-action {
    border:0;
    background:transparent;
    font-size:12px;
    color:var(--ink-3);
    padding:0
}
.crm-timeline-action:hover:not(:disabled) {
    color:var(--ink)
}
.crm-timeline-action.is-danger:hover:not(:disabled) {
    color:var(--red)
}
.crm-timeline-text {
    font-size:13px;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere
}
.crm-timeline-system {
    padding:4px 0 0;
    font-size:12px;
    color:var(--ink-3);
    line-height:1.5;
    overflow-wrap:anywhere
}
.crm-timeline-system b {
    color:var(--ink);
    font-weight:600
}
.crm-timeline-empty {
    font-size:13px;
    color:var(--ink-4)
}
.crm-draft-bar {
    flex:0 0 auto;
    background:#fff;
    border-top:1px solid var(--line);
    padding:12px 24px;
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:space-between;
    z-index:2
}
.crm-draft-bar details {
    max-width:60%;
    overflow-wrap:anywhere;
    font-size:13px
}
.crm-draft-bar ul {
    max-height:140px;
    overflow:auto;
    padding-left:20px;
    margin:6px 0 0
}
.crm-draft-bar summary {
    cursor:pointer;
    font-weight:600
}
.crm-draft-bar>div {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap
}
.crm-draft-bar button[aria-busy="true"] {
    cursor:wait
}
.crm-drawer-error {
    margin:0 24px 12px
}
/* Small dialogs and the toast follow the prototype's modal shell. */
.crm-modal {
    width:min(620px,94vw);
    max-height:90vh;
    border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.2)
}
.crm-modal-sm {
    width:min(520px,94vw)
}
.crm-modal-header {
    padding:18px 22px 12px;
    display:flex;
    align-items:flex-start;
    gap:12px
}
.crm-modal-header>div {
    flex:1
}
.crm-modal h2 {
    font-size:17px;
    font-weight:700
}
.crm-modal-header p {
    font-size:13px;
    color:var(--ink-3);
    line-height:1.45;
    margin-top:4px
}
.crm-modal-body {
    padding:4px 22px 6px;
    display:flex;
    flex-direction:column;
    gap:18px
}
.crm .crm-modal-body label,.crm .crm-modal-body legend {
    display:flex;
    flex-direction:column;
    gap:5px;
    font-size:12px;
    font-weight:600;
    color:var(--ink-2);
    margin:0
}
.crm .crm-modal-body legend {
    display:block;
    margin-bottom:8px;
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-4)
}
.crm .crm-modal-body .crm-fieldset {
    margin:0;
    display:flex;
    flex-direction:column;
    gap:10px
}
.crm .crm-modal-body input,.crm .crm-modal-body textarea {
    font-size:14px;
    font-weight:400
}
.crm-modal-body .crm-help {
    margin:0
}
.crm-modal-footer {
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 22px 20px;
    margin-top:12px;
    border-top:1px solid var(--hover);
    position:static;
    background:#fff
}
.crm-modal-footer>.crm-primary,.crm-modal-footer>.crm-secondary {
    padding:9px 16px
}
/* The Vundet dialog offers up to four choices: they wrap as whole buttons, never inside a label. */
#crm-won-dialog .crm-modal-footer {flex-wrap:wrap}
#crm-won-dialog .crm-modal-footer>button {white-space:nowrap}
.crm-primary.is-destructive {
    background:var(--red)
}
.crm-primary.is-destructive:hover {
    background:#9d3020
}
.crm-chips {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding-top:2px
}
.crm .crm-chip-toggle {
    padding:7px 12px;
    border-radius:20px;
    font-size:13px;
    font-weight:500;
    border:1px solid var(--line-input);
    background:#fff;
    color:var(--ink-2)
}
.crm .crm-chip-toggle.is-on {
    border-color:var(--green);
    background:var(--green-soft);
    color:var(--green-800)
}
.crm .crm-chip-toggle.is-lost.is-on {
    border-color:var(--red);
    background:var(--red-soft);
    color:var(--red)
}
.crm-summary-box {
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
    padding:14px 16px
}
.crm-summary-box dl {
    margin:0;
    display:grid;
    grid-template-columns:170px minmax(0,1fr);
    row-gap:8px;
    column-gap:12px;
    font-size:13px
}
.crm-summary-box dt {
    color:var(--ink-3)
}
.crm-summary-box dd {
    margin:0;
    font-weight:600;
    overflow-wrap:break-word
}
.crm-footnote {
    font-size:12px;
    color:var(--ink-3);
    line-height:1.5
}
.crm-toast {
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    z-index:100;
    background:var(--ink);
    color:#fff;
    padding:10px 16px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    animation:crm-pop .2s ease-out;
    display:flex;
    gap:12px;
    align-items:center;
    max-width:min(92vw,560px)
}
.crm-toast button {
    border:0;
    background:transparent;
    color:#9fd3b1;
    font-weight:700;
    font-size:13px;
    padding:0;
    white-space:nowrap
}
@media(max-width:1100px) {
    .crm-drawer,.crm-drawer-backdrop {
        inset:0
    }
}
@media(min-width:901px) {
    .crm-summary.has-pipeline {
        grid-template-columns:repeat(5,minmax(0,1fr))
    }
}
@media(max-width:900px) {
    .crm-drawer-body {
        grid-template-columns:minmax(0,1fr)
    }
    .crm-drawer-info {
        border-right:0;
        border-bottom:1px solid var(--line)
    }
    .crm-summary {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:500px) {
    .crm-drawer-head {
        padding:14px 16px 12px
    }
    .crm-drawer-info,.crm-drawer-activity {
        padding:16px
    }
    .crm-draft-bar {
        padding:12px 16px;
        align-items:stretch;
        flex-direction:column
    }
    .crm-draft-bar details {
        max-width:100%
    }
    .crm-dl,.crm-dl-wide {
        grid-template-columns:110px minmax(0,1fr)
    }
    .crm-summary-box dl {
        grid-template-columns:120px minmax(0,1fr)
    }
    .crm-toast {
        left:16px;
        right:16px;
        transform:none;
        max-width:none
    }
}
/* Deal form: prototype field primitives, customer match box, linked box, section hints, chips. */
.crm .crm-field {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0
}
.crm .crm-field label,.crm-field-label {
    display:block;
    font-size:12px;
    font-weight:600;
    color:var(--ink-2);
    margin:0
}
.crm .crm-modal-body .crm-field-grid {
    gap:10px 12px
}
.crm .crm-modal-body .crm-field-grid+.crm-field-grid {
    margin-top:10px
}
.crm .crm-modal-body select {
    font-size:14px;
    font-weight:400
}
.crm-section-hint {
    font-size:12px;
    line-height:1.45;
    color:#a8483a;
    background:var(--red-soft);
    border-radius:8px;
    padding:8px 10px
}
.crm-dupes {
    border:1px solid var(--line-input);
    background:var(--panel);
    border-radius:10px;
    padding:10px 14px;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px
}
.crm-dupes-title {
    font-size:13px;
    font-weight:600;
    color:var(--ink-2)
}
.crm-dupes-hint {
    font-size:12px;
    line-height:1.45;
    color:var(--ink-3);
    margin-top:-4px
}
.crm-dupes-rows {
    display:flex;
    flex-direction:column;
    gap:8px
}
.crm-dupes-rows:empty {
    display:none
}
.crm-dupe-row {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px
}
.crm-dupe-text {
    flex:1;
    min-width:0
}
.crm-dupe-name {
    font-weight:700
}
.crm-dupe-meta {
    font-size:12px;
    color:var(--ink-3);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm .crm-dupe-use {
    border:1px solid var(--ink);
    background:#fff;
    color:var(--ink);
    border-radius:7px;
    padding:6px 10px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap
}
.crm .crm-dupe-use:hover {
    background:var(--hover)
}
.crm-dupes .crm-text-quiet {
    align-self:flex-start;
    padding:0
}
.crm-linked-box {
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #cfe1d5;
    background:var(--green-soft);
    border-radius:10px;
    padding:10px 14px;
    font-size:13px;
    color:var(--green-800);
    margin-top:10px
}
.crm-linked-box.is-new {
    border-color:var(--line-input);
    background:var(--panel);
    color:var(--ink-2)
}
.crm-linked-text {
    flex:1;
    min-width:0
}
.crm-linked-text strong {
    display:block;
    font-weight:700
}
.crm-linked-text small {
    display:block;
    font-size:12px;
    opacity:.85;
    color:inherit
}
.crm .crm-linked-action {
    border:0;
    background:transparent;
    color:inherit;
    font-size:12px;
    font-weight:600;
    text-decoration:underline;
    white-space:nowrap;
    padding:0
}
.crm .crm-modal-body label.crm-chip-toggle {
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    position:relative;
    font-size:13px;
    font-weight:500;
    color:var(--ink-2);
    cursor:pointer
}
.crm .crm-chip-check input {
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
    margin:0;
    pointer-events:none
}
.crm .crm-chip-check:has(input:checked) {
    border-color:var(--green);
    background:var(--green-soft);
    color:var(--green-800)
}
.crm .crm-chip-check:has(input:focus-visible) {
    outline:2px solid var(--green);
    outline-offset:2px
}
.crm #crm-previous {
    margin-top:10px;
    align-self:flex-start
}
/* I dag: grouped action rows (prototype), header segment Mine/Alle. */
.crm-segment {
    display:inline-flex;
    border:1px solid var(--line-input);
    border-radius:8px;
    overflow:hidden
}
.crm .crm-segment button {
    border:0;
    border-left:1px solid var(--line-input);
    padding:7px 14px;
    font-size:12px;
    font-weight:500;
    background:#fff;
    color:var(--ink-2)
}
.crm .crm-segment button:first-child {
    border-left:0
}
.crm .crm-segment button:hover {
    background:var(--hover)
}
.crm .crm-segment button.is-on {
    background:var(--ink);
    color:#fff;
    font-weight:700
}
.crm-today {
    max-width:900px;
    display:flex;
    flex-direction:column;
    gap:26px
}
.crm-today-group {
    display:flex;
    flex-direction:column;
    gap:8px
}
.crm-today-head {
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:0 2px
}
.crm-today-head h2 {
    margin:0;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-2)
}
.crm-today-count {
    font-size:11px;
    color:var(--ink-4)
}
.crm-today-group.is-overdue h2,.crm-today-group.is-overdue .crm-today-due {
    color:var(--red)
}
.crm-today-group.is-today h2,.crm-today-group.is-today .crm-today-due {
    color:var(--green-800)
}
.crm-today-group.is-amber h2,.crm-today-group.is-amber .crm-today-due {
    color:#8a4b00
}
.crm-today-row {
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 14px;
    display:grid;
    grid-template-columns:70px minmax(0,1fr) auto auto;
    gap:14px;
    align-items:center
}
.crm-today-due {
    font-size:12px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--ink-2)
}
.crm-today-body {
    min-width:0
}
.crm-today-action {
    font-size:14px;
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-today-meta {
    font-size:12px;
    color:var(--ink-3);
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.crm-today-meta b {
    font-weight:600;
    color:var(--ink-2)
}
.crm-today-actions {
    display:flex;
    gap:6px
}
.crm .crm-today-btn {
    display:inline-flex;
    align-items:center;
    background:#fff;
    border:1px solid var(--line-input);
    border-radius:8px;
    padding:7px 11px;
    font-size:12px;
    font-weight:600;
    color:var(--ink);
    white-space:nowrap;
    line-height:1.3
}
.crm .crm-today-btn:hover {
    background:var(--hover)
}
.crm .crm-today-btn.is-positive:hover {
    background:var(--green-soft);
    border-color:var(--green)
}
.crm-empty-box {
    border:1px dashed var(--line-input);
    border-radius:10px;
    padding:28px;
    text-align:center;
    font-size:13px;
    color:var(--ink-3);
    line-height:1.5;
    background:#fff
}
@media(max-width:700px) {
    .crm-today-row {
        grid-template-columns:70px minmax(0,1fr) auto
    }
    .crm-today-actions {
        grid-column:1/-1;
        justify-content:flex-end
    }
    /* Phones: the action and the deal line wrap instead of being cut (review round 2). */
    .crm-today-action,.crm-today-meta {
        white-space:normal
    }
}
/* Arkiv: the prototype's archive rows. */
.crm-archive-view {display:block}
.crm-archive {max-width:980px;display:flex;flex-direction:column;gap:12px}
.crm-archive-row {background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.crm-archive-main {min-width:180px;flex:1}
.crm-archive-name {font-size:15px;font-weight:700}
/* B21: the name opens the deal. */
.crm .crm-archive-name a {color:inherit;text-decoration:underline;text-decoration-color:var(--line-input);text-underline-offset:3px}
.crm .crm-archive-name a:hover {text-decoration-color:currentColor}
.crm-archive-meta,.crm-archive-by {font-size:12px;color:var(--ink-3)}
.crm-archive-meta {margin-top:3px}
.crm-archive-by {min-width:170px}
.crm-archive-actions {display:flex;gap:8px}
.crm .crm-archive-actions .crm-secondary {padding:8px 12px}
.crm .crm-archive-actions .crm-secondary:hover {background:var(--green-soft);border-color:var(--green)!important}
.crm .crm-archive-actions .crm-danger:hover {background:var(--red-soft);border-color:var(--red)!important}
.crm-archive-hint {font-size:12px;color:var(--ink-4);padding:2px 2px 0}
/* Administration: tabs Brugere · Pipelines · Logs (prototype), user table, pipeline cards and the activity log. */
.crm .crm-segment a {border:0;border-left:1px solid var(--line-input);padding:7px 14px;font-size:12px;font-weight:500;background:#fff;color:var(--ink-2);text-decoration:none;display:inline-block;line-height:normal}
.crm .crm-segment a:first-child {border-left:0}
.crm .crm-segment a:hover {background:var(--hover)}
.crm .crm-segment a.is-on {background:var(--ink);color:#fff;font-weight:700}
.crm-admin-view {display:block}
.crm-admin {max-width:960px;display:flex;flex-direction:column;gap:14px}
.crm-admin-head {display:flex;align-items:center;gap:12px}
/* B34: the institutions' head holds three buttons now (welcome mails, reminder, add): they wrap under the count on a phone instead of running off the page. */
.crm-portal-ihead {flex-wrap:wrap;row-gap:10px}
.crm-admin-count {font-size:14px;font-weight:700}
.crm-admin-hint {font-size:12px;color:var(--ink-3);line-height:1.5;max-width:640px}
.crm-admin-label {font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}
.crm-admin-chip {padding:3px 8px;border-radius:5px;font-size:12px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center}
.crm-admin-chip.is-soft {background:#f3f4f2;color:var(--ink-2)}
.crm-admin-chip.is-strong {border:1px solid var(--line)}
.crm-admin-chip.is-green {background:var(--green-soft);color:var(--green-800);border:1px solid #cfe0d4}
.crm-admin-chip.is-outline {background:#fff;border:1px solid var(--line);color:var(--ink-3);font-weight:500}
.crm-admin-chip.is-red {background:var(--red-soft);color:var(--red)}
.crm-users {background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.crm-users-head,.crm-user-row {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.4fr) 100px;gap:12px;align-items:center;padding:12px 16px}
.crm-users-head {padding:10px 16px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);border-bottom:1px solid var(--line)}
.crm-user-row {border-bottom:1px solid var(--line-soft);font-size:13px}
.crm-user-row:last-child {border-bottom:0}
.crm-user-row.is-inactive .crm-user-who {opacity:.6}
.crm-user-who {display:flex;align-items:center;gap:10px;min-width:0}
.crm-user-avatar {width:30px;height:30px;border-radius:50%;flex:0 0 30px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--hover);color:var(--ink-2)}
.crm-user-name {display:block;font-weight:600}
.crm-user-role,.crm-user-rights {display:flex;flex-wrap:wrap;gap:6px}
.crm .crm-small {padding:6px 10px;font-size:12px}
.crm-pipeline-card {background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.crm-pipeline-title {display:flex;align-items:center;gap:12px}
.crm-pipeline-title h2 {margin:0;font-size:15px;font-weight:700;flex:1;min-width:0}
.crm-pipeline-count {font-size:12px;color:var(--ink-3);white-space:nowrap}
.crm-stage-chips {display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crm-stage-chip {display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:7px;font-size:13px;border:1px solid var(--line-input);background:#fff}
.crm-stage-chip.is-locked {background:var(--hover)}
.crm .crm-stage-chip input {border:0;padding:2px 0;font-weight:600;font-size:13px;background:transparent;width:auto;min-width:3ch;border-radius:0}
.crm .crm-stage-chip input:disabled {color:var(--ink);opacity:1}
.crm .crm-stage-chip input:focus-visible {outline:none;box-shadow:none;border-bottom:1px solid var(--green)}
.crm-stage-tag {font-size:11px;color:var(--ink-3)}
.crm .crm-stage-save {border:0;background:var(--green);color:#fff;border-radius:5px;padding:3px 8px;font-size:11px;font-weight:700}
.crm-stage-note {font-size:12px;color:var(--ink-3);margin-top:8px}
.crm-members {display:flex;flex-wrap:wrap;gap:8px}
.crm .crm-member {display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:20px;font-size:13px;border:1px solid var(--green);background:var(--green-soft);color:var(--green-800);font-weight:500}
.crm .crm-member:hover {background:#d9e9de}
.crm-member-avatar {width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;background:#fff;color:var(--ink-2)}
.crm-admin-section-head {display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.crm-admin-section-head h2 {margin:0;font-size:14px;font-weight:700}
.crm-admin-section-head span {font-size:12px;color:var(--ink-3)}
.crm-log-table {background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.crm .crm-log-row {width:100%;display:grid;grid-template-columns:150px 130px minmax(0,1fr);gap:12px;align-items:center;padding:10px 16px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink);text-decoration:none;font-weight:400}
.crm .crm-log-row:first-child {border-top:0}
.crm .crm-log-row:hover {background:var(--panel)}
.crm-log-when {color:var(--ink-4);font-variant-numeric:tabular-nums}
.crm-log-subject {font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-log-text {color:var(--ink-2);min-width:0}
.crm-log-what {display:block;overflow-wrap:anywhere}  /* wraps: a rights change names every right (U11) */
.crm-log-who {font-size:11.5px;color:var(--ink-4)}
@media(max-width:800px) {
  .crm-users-head,.crm-user-row {grid-template-columns:minmax(0,1fr) 90px;gap:8px 12px}
  .crm-users-head span:nth-child(2),.crm-users-head span:nth-child(3) {display:none}
  .crm-user-row > :nth-child(1) {grid-column:1;grid-row:1}
  .crm-user-row > :nth-child(4) {grid-column:2;grid-row:1;justify-self:end}
  .crm-user-row > :nth-child(2),.crm-user-row > :nth-child(3) {grid-column:1/-1}
  .crm .crm-log-row {grid-template-columns:minmax(0,1fr);gap:2px}
}
@media(max-width:600px) {.crm-header {flex-wrap:wrap;row-gap:10px}.crm-header-actions {margin-left:0;max-width:100%;overflow-x:auto}}
/* Rights toggles and pipeline checklist inside the user dialog keep their row layout despite the modal's stacked labels. */
.crm .crm-modal-body .crm-toggle {display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:16px;font-size:13px;font-weight:400;color:var(--ink)}
.crm .crm-modal-body .crm-toggle span {display:grid;gap:2px;min-width:0}
.crm .crm-modal-body .crm-toggle strong {font-size:13px;font-weight:600}
.crm .crm-modal-body .crm-toggle small {font-size:12px;font-weight:400;color:var(--ink-3)}
.crm .crm-modal-body .crm-toggle input {width:38px;height:22px;flex:0 0 38px;align-self:center;padding:0}
.crm .crm-modal-body .crm-user-pipelines label {display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink)}
.crm .crm-modal-body .crm-user-pipelines input {width:16px;height:16px;margin:0;accent-color:var(--green)}
.crm-pipeline-blocked {font-size:12px;color:var(--ink-3);white-space:nowrap}
/* Review round 3, item 4: the postcode's message keeps its line, so the form does not jump. */
.crm-field[data-field="postal_code"] .crm-field-error {display:block;min-height:16px}
/* Review round 3, item 7: version and commit, discreetly at the bottom of the sidebar and the phone menu. */
.crm-version {font-size:11px;color:var(--ink-4);padding:6px 8px 2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Review round 4, R4-1: in the phone menu the line keeps its height when the menu is longer than the screen. */
.crm-mmenu-body .crm-version {padding:14px 16px 0;flex-shrink:0}
/* Rights templates above the switches in the user dialog (owner decision U9). */
.crm .crm-modal-body .crm-rights-templates {display:grid;gap:6px;margin:0}
.crm .crm-modal-body .crm-rights-templates[hidden] {display:none}
.crm .crm-modal-body .crm-rights-templates-label {font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.crm .crm-modal-body .crm-rights-templates-buttons {display:flex;flex-wrap:wrap;gap:8px}
.crm .crm-modal-body .crm-rights-templates small {font-size:12px;color:var(--ink-3)}
.crm .crm-modal-body .crm-rights-all-note[hidden] {display:none}
/* Correcting a customer card's name in the expanded card on Kunder. */
.crm-customer-rename {display:flex;justify-content:flex-end;margin:0 0 10px}
.crm-customer-rename-form {display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
.crm-customer-rename-form label {font-size:12px;font-weight:600;color:var(--ink-3);flex:0 0 100%}
.crm-customer-rename-form input {flex:1 1 220px;min-width:0;height:36px;padding:0 10px;border:1px solid var(--line-input);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.crm-customer-rename-form .crm-field-error {flex:0 0 100%}
/* The pipeline choice sits under the Pipeline right (owner decision U1): every pipeline, or only the ticked ones. */
.crm .crm-modal-body .crm-pipeline-choice {display:grid;gap:8px;margin:0 14px 12px;padding:10px 12px;border-radius:8px;background:var(--panel);border:1px solid var(--line)}
.crm .crm-modal-body .crm-pipeline-choice[hidden],.crm .crm-modal-body .crm-user-pipelines[hidden] {display:none}
.crm .crm-modal-body .crm-pipeline-option {display:flex;flex-direction:row;align-items:flex-start;gap:8px;font-size:13px;font-weight:400;color:var(--ink);cursor:pointer}
.crm .crm-modal-body .crm-pipeline-option input {width:16px;height:16px;margin:2px 0 0;padding:0;flex:0 0 16px;accent-color:var(--green)}
.crm .crm-modal-body .crm-pipeline-option span {display:grid;gap:1px;min-width:0}
.crm .crm-modal-body .crm-pipeline-option strong {font-size:13px;font-weight:600}
.crm .crm-modal-body .crm-pipeline-option small {font-size:12px;color:var(--ink-3)}
.crm .crm-modal-body .crm-pipeline-choice .crm-user-pipelines {padding-left:24px}
.crm .crm-modal-body .crm-pipeline-choice .crm-help {margin:0}
.crm .crm-modal-body .crm-choice-actions {display:flex;gap:8px}
/* Mobile production plan: the prototype's phone view — I dag · Kommende · Søg, compact rows and a detail sheet. */
.crm-mobile-plan {display:flex;flex-direction:column;gap:14px}
.crm-mtabs {align-self:flex-start}
.crm .crm-mtabs button {padding:9px 16px;font-size:13px}
.crm-mgroup {display:flex;flex-direction:column;gap:8px}
.crm-mgroup-head {display:flex;align-items:baseline;gap:8px;padding:4px 4px 0}
.crm-mgroup-head h2 {margin:0;font-size:13px;font-weight:700}
.crm-mgroup.is-overdue h2 {color:var(--red)}
.crm-mgroup-head span {font-size:12px;color:var(--ink-3)}
.crm .crm-mrow {display:flex;gap:12px;align-items:stretch;width:100%;text-align:left;border:1px solid var(--line);border-left:5px solid var(--green);border-radius:14px;background:#fff;padding:14px 14px 14px 12px;font-weight:400;color:var(--ink)}
.crm .crm-mrow.is-pickup {border-left-color:#b0741e}
.crm .crm-mrow.is-done {border-left-color:var(--ink-4)}
.crm .crm-mrow:active {background:#f3f5f2}
.crm-mrow-left {flex:0 0 56px;display:flex;flex-direction:column;gap:2px}
.crm-mrow-time {font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.crm-mrow-kind {font-size:11px;font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.04em}
.crm-mrow.is-pickup .crm-mrow-kind {color:#b0741e}
.crm-mrow.is-done .crm-mrow-kind,.crm-mrow.is-done .crm-mrow-time {color:var(--ink-4)}
.crm-mrow-body {flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.crm-mrow-name {font-size:16px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-mrow-sub {font-size:13px;color:var(--ink-3);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-mrow-spec {font-size:13px;color:var(--ink-2);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-mrow-done {align-self:flex-start;margin-top:3px;font-size:11.5px;font-weight:700;color:var(--green-800);background:var(--green-soft);border-radius:5px;padding:2px 7px}
.crm-mrow-done.is-cancelled {color:var(--ink-3);background:var(--hover)}
.crm-mempty {padding:30px 20px;font-size:14px;border-radius:14px}
.crm .crm-msearch {width:100%;border:1px solid var(--line-input);border-radius:12px;padding:13px 14px;font-size:16px;background:#fff}
.crm-mresults {display:flex;flex-direction:column;gap:8px}
.crm-mhint {margin-top:16px;font-size:14px;color:var(--ink-3);line-height:1.5;text-align:center;padding:0 20px}
.crm .crm-sheet {border:0;padding:0;width:100%;max-width:560px;margin:0 auto;position:fixed;inset:auto 0 0 0;max-height:88vh;border-radius:22px 22px 0 0;background:var(--panel);display:none;flex-direction:column;overflow:hidden;box-shadow:0 -12px 40px rgba(0,0,0,.18)}
.crm .crm-sheet[open] {display:flex;animation:crm-sheet-up .22s ease-out}
.crm .crm-sheet::backdrop {background:rgba(20,24,21,.45)}
@keyframes crm-sheet-up {from {transform:translateY(24px);opacity:.6} to {transform:none;opacity:1}}
.crm-sheet-head {padding:10px 16px 12px;background:#fff;border-bottom:1px solid var(--line)}
.crm-sheet-grip {width:38px;height:4px;border-radius:2px;background:var(--line-input);margin:0 auto 12px}
.crm-sheet-titles {display:flex;align-items:flex-start;gap:10px}
.crm-sheet-titles > div {flex:1;min-width:0}
.crm-sheet-titles h2 {margin:0;font-size:19px;font-weight:700;line-height:1.2}
.crm-sheet-titles p {margin:3px 0 0;font-size:13px;color:var(--ink-3)}
.crm .crm-sheet-close {flex:0 0 34px;width:34px;height:34px;border:0;border-radius:17px;background:var(--hover);color:var(--ink-2);font-size:19px;line-height:1;padding:0}
.crm-sheet-body {flex:1;min-height:0;overflow-y:auto;padding:14px 16px 24px;display:flex;flex-direction:column;gap:12px}
.crm .crm-sheet-link {display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px;min-height:60px;text-decoration:none;color:var(--ink);font-weight:400}
.crm-sheet-icon {flex:0 0 34px;height:34px;border-radius:17px;background:var(--green-soft);color:var(--green-800);display:grid;place-items:center;font-size:15px}
.crm-sheet-tile {flex:1;min-width:0}
.crm-sheet-tile strong {display:block;font-size:15px;font-weight:600;line-height:1.3}
.crm-sheet-tile small {display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.crm-sheet-card {border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:10px}
.crm .crm-sheet-card h3 {margin:0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.crm-sheet-chips {display:flex;flex-wrap:wrap;gap:6px}
.crm-sheet-chip {font-size:13px;font-weight:600;padding:5px 10px;border-radius:8px;background:var(--hover);color:var(--ink-2)}
.crm-sheet-text {font-size:14px;line-height:1.5;color:var(--ink-2);border-top:1px solid var(--line-soft);padding-top:10px;white-space:pre-wrap}
.crm-sheet-meta {font-size:12.5px;color:var(--ink-3)}
.crm-sheet-actions {display:flex;flex-direction:column;gap:8px}
.crm .crm-sheet-actions button {min-height:46px;font-size:15px;border-radius:12px}
@media(max-width:760px) {body[data-view="production"] .crm-filters {display:none}}
.crm-mrow.is-deal {border-left-color:var(--ink-4)}
.crm-mrow.is-deal .crm-mrow-kind {color:var(--ink-4)}
.crm-mrow.is-deal.is-due {border-left-color:var(--green)}
.crm-mrow.is-deal.is-due .crm-mrow-kind {color:var(--green)}
.crm-mrow.is-deal.is-overdue {border-left-color:var(--red)}
.crm-mrow.is-deal.is-overdue .crm-mrow-kind {color:var(--red)}
/* Mobile navigation (≤760px): the prototype's tree burger with the full menu and a bottom tab bar. */
.crm-tree {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:26px}
.crm-tree i {display:block;height:2px;border-radius:1px;background:var(--ink);transition:transform .24s cubic-bezier(.4,0,.2,1),width .24s,opacity .16s}
.crm-tree i:nth-child(1) {width:4px}
.crm-tree i:nth-child(2) {width:8px}
.crm-tree i:nth-child(3) {width:12px}
.crm-tree i:nth-child(4) {width:16px}
.crm-tree i:nth-child(5) {width:20px}
.crm-tree i:nth-child(6) {width:24px}
.crm-tree b {display:block;width:2px;height:4px;border-radius:1px;background:var(--ink);margin-top:1px;transition:opacity .15s}
.is-open .crm-tree i:nth-child(1),.crm-mmenu-close .crm-tree i:nth-child(1) {width:22px;transform:translateY(12.5px) rotate(45deg)}
.is-open .crm-tree i:nth-child(6),.crm-mmenu-close .crm-tree i:nth-child(6) {width:22px;transform:translateY(-12.5px) rotate(-45deg)}
.is-open .crm-tree i:nth-child(n+2):nth-child(-n+5),.crm-mmenu-close .crm-tree i:nth-child(n+2):nth-child(-n+5) {transform:scaleX(0);opacity:0}
.is-open .crm-tree b,.crm-mmenu-close .crm-tree b {opacity:0}
.crm .crm-burger {display:none;position:fixed;top:12px;right:8px;z-index:55;width:44px;height:44px;border:0;background:transparent;padding:0;align-items:center;justify-content:center;border-radius:12px}
.crm .crm-mmenu {position:fixed;inset:0;z-index:60;background:var(--panel);display:flex;flex-direction:column;overflow:hidden;animation:crm-pop .16s ease-out}
.crm .crm-mmenu[hidden] {display:none}
.crm-mmenu-head {display:flex;align-items:center;gap:12px;padding:14px 12px 14px 18px;background:#fff;border-bottom:1px solid var(--line)}
.crm-mmenu-avatar {flex:0 0 38px;height:38px;border-radius:19px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.crm-mmenu-user {flex:1;min-width:0}
.crm-mmenu-user strong {display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-mmenu-user small {display:block;font-size:12.5px;color:var(--ink-3)}
.crm .crm-mmenu-close {flex:0 0 44px;width:44px;height:44px;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;border-radius:12px}
.crm-mmenu-body {flex:1;min-height:0;overflow-y:auto;padding:14px 14px 28px;display:flex;flex-direction:column;gap:18px}
.crm-mmenu-section {display:flex;flex-direction:column;gap:6px}
.crm-mmenu-section h2 {margin:0 0 2px 6px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.crm .crm-mmenu-item {display:flex;align-items:center;gap:12px;width:100%;min-height:56px;text-align:left;border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px 14px;color:var(--ink);text-decoration:none;font-weight:400}
.crm .crm-mmenu-item:active {background:#f3f5f2}
.crm .crm-mmenu-item[aria-current="page"] {border-color:var(--green);background:var(--green-soft)}
.crm-mmenu-text {flex:1;min-width:0}
.crm-mmenu-label {display:block;font-size:15.5px;font-weight:600;line-height:1.25}
.crm-mmenu-sub {display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-mmenu-badge {flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.crm-mmenu-chevron {flex:0 0 auto;color:#b9c2ba;font-size:15px}
.crm-mmenu-logout {margin:0}
body.crm-menu-open {overflow:hidden}
.crm-tabbar {display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2px;padding:8px 10px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.crm .crm-tab {display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;min-height:52px;color:var(--ink-3);font-size:11.5px;font-weight:500;text-decoration:none}
.crm .crm-tab.is-on {color:var(--ink);font-weight:700}
.crm-tab-icon {position:relative;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;font-size:13px;color:var(--ink-3)}
.crm-tab.is-on .crm-tab-icon {background:var(--ink);color:#fff}
.crm-tab-badge {position:absolute;top:-3px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}
@media(max-width:760px) {
  .crm-sidebar {display:none}
  .crm .crm-burger {display:flex}
  .crm-tabbar {display:grid}
  .crm-header {padding-right:60px}
  .crm-work-content {padding-bottom:96px}
  .crm-board-scroll {padding-bottom:96px}
  .crm-toast {bottom:96px}
}
/* Deal form: two columns on desktop (Kunde, Kontakt, Leveringsadresse · Kundens behov, Deal), stacked on phones. */
.crm-deal-col {display:flex;flex-direction:column;gap:18px;min-width:0}
.crm-edit-fields {display:flex;flex-direction:column;gap:18px}
@media(min-width:900px) {
  .crm .crm-modal#crm-modal {width:min(1000px,94vw)}
  .crm-deal-body {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 28px;align-items:start}
  .crm-deal-body > #crm-form-error {grid-column:1/-1}
}
/* Production plan opened from a deal: the order's row, cards and phone rows are marked. */
.crm .crm-plan-cust.is-highlighted,.crm-plan-track.is-highlighted {background-color:var(--green-soft)}
.crm .crm-mrow.is-highlighted {outline:2px solid var(--green);outline-offset:2px}
/* Drag-and-drop on the board: the dragged card fades, the column lights up, and the slot shows where the card lands. */
.crm-card.is-dragging {opacity:.45}
.crm-column.is-drop-target {background:var(--green-soft);box-shadow:inset 0 0 0 2px var(--green)}
.crm-drop-slot {box-sizing:border-box;min-height:48px;border:2px dashed var(--green);border-radius:10px;background:rgba(255,255,255,.6)}
.crm-column.is-drop-target .crm-empty-column {display:none}   /* the slot is the one dashed box while a card hangs over an empty column */
/* Deal drawer in production mode (opened from the production plan). */
.crm-drawer-chipset {display:contents}
.crm-drawer-titlerow .crm-secondary {flex:0 0 auto;padding:8px 13px;font-size:13px;font-weight:600;text-decoration:none}
.crm-drawer-body.is-single {grid-template-columns:minmax(0,1fr)}
.crm-drawer-body.is-single .crm-drawer-info {border-right:0;max-width:760px}
.crm-production-row.is-cancelled {opacity:.55}
.crm-production-row.is-cancelled .crm-production-label {text-decoration:line-through}
#work-drawer .crm-production-row {flex-wrap:nowrap}
#work-drawer .crm-production-date {width:auto;min-width:62px}
#work-drawer .crm-production-meta {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-production-actions {margin-left:auto;display:flex;gap:12px;align-items:center;flex:0 0 auto}
.crm .crm-production-actions button,.crm .crm-production-foot button {padding:0}
.crm-instruction {margin:0 0 8px;font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.crm-instruction:last-child {margin-bottom:0}
/* Customer card without deals (Kunder): the prototype's amber notice with Slet kundekort. */
.crm-orphan-box {display:flex;align-items:center;gap:12px;border:1px solid #e7b96f;background:#fff9ee;border-radius:8px;padding:10px 12px;font-size:12.5px;color:#8a4b00;line-height:1.45;margin:4px 0}
.crm-orphan-box > span {flex:1;min-width:0}
.crm .crm-orphan-box .crm-secondary {white-space:nowrap;flex:0 0 auto}
/* Kolonner og pipelines (Administration): add, remove and rename. */
.crm .crm-stage-remove {border:0;background:transparent;color:var(--ink-4);padding:0 4px;font-size:15px;line-height:1;cursor:pointer}
.crm .crm-stage-remove:hover:not(:disabled) {color:var(--red)}
.crm .crm-stage-remove:disabled {opacity:.35;cursor:not-allowed}
.crm-stage-add input {border:1px dashed #c9cfc9;border-radius:7px;padding:6px 10px;width:150px;background:transparent;font-size:13px}
.crm .crm-pipeline-name {font-size:15px;font-weight:700;border:1px solid transparent;border-radius:6px;padding:4px 8px;margin-left:-8px;background:transparent;min-width:0;flex:1;font-family:inherit}
.crm .crm-pipeline-name:hover,.crm .crm-pipeline-name:focus {border-color:var(--line-input);background:#fff}
/* B28 (2026-10-07): on a phone the reason a pipeline cannot go (“Bruges af Hørsholm Kommune” is longer than a deal count) takes its own line, so the name keeps its room. */
@media(max-width:760px) {.crm-pipeline-title {flex-wrap:wrap}.crm input.crm-pipeline-name {min-width:120px}}
.crm-inline-form {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Review round 2: masked password with eye + copy; delete button for an empty pipeline; timeline avatars side by side. */
.crm-password-field {display:flex;gap:8px;align-items:center}
.crm-password-field input {flex:1;min-width:0}
.crm .crm-icon-sm {width:36px;height:36px;font-size:16px;flex:0 0 auto}
.crm .crm-icon-sm[aria-pressed="true"] {background:var(--green-soft);border-color:var(--green)}
.crm .crm-pipeline-delete {border:1px solid var(--line);background:#fff;color:var(--ink-3);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer}
.crm .crm-pipeline-delete:hover:not(:disabled) {color:var(--red);border-color:var(--red)}
.crm .crm-pipeline-delete:disabled {opacity:.4;cursor:not-allowed}
.crm .crm-inline-form input {flex:1;min-width:220px;border:1px solid var(--line-input);border-radius:8px;padding:9px 11px;font-size:14px}
/* Systemlog rows (prototype's Driftslog). */
.crm-sys-row {display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 16px;border-top:1px solid var(--line-soft);font-size:12.5px;background:#fff}
.crm-sys-row:first-child {border-top:0}
.crm-sys-row.is-handled {background:var(--panel);color:var(--ink-4)}
.crm-sys-level {padding:2px 8px;border-radius:5px;font-size:11.5px;font-weight:700;text-align:center}
.crm-sys-level.is-error {background:var(--red-soft);color:var(--red)}
.crm-sys-level.is-warning {background:#fff9ee;color:#8a4b00}
.crm-sys-level.is-ok {background:var(--green-soft);color:var(--green-800)}
.crm-sys-level.is-handled {background:var(--hover);color:var(--ink-4)}
.crm-sys-text {min-width:0}
.crm-sys-message {display:block;line-height:1.45;overflow-wrap:anywhere}
.crm-sys-meta {display:block;font-size:11.5px;color:var(--ink-4);margin-top:2px}
.crm-sys-actions {display:flex;gap:6px;align-items:center}
@media(max-width:800px) {.crm-sys-row {grid-template-columns:minmax(0,1fr);gap:6px}}
/* Review round 2: in-app confirmation dialog, form alerts and a visible close control. */
.crm .crm-icon:hover {background:var(--hover);border-color:var(--ink-4)!important;color:var(--ink)!important}
.crm-confirm-list {margin:0;padding-left:20px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.crm-confirm-list li {margin:4px 0}
.crm .crm-primary.is-danger {background:var(--red);border-color:var(--red)}
.crm .crm-primary.is-danger:hover {background:#9a2f22}
.crm-modal-alert {padding:0 24px}
.crm-modal-alert .crm-error:not([hidden]) {margin:0 0 12px}
@media(min-width:900px) {.crm .crm-deal-body {min-height:560px}}
.crm-toast {cursor:default}
.crm-dupes.is-strong {border-color:var(--red);background:var(--red-soft)}
.crm-dupes.is-strong .crm-dupes-title {color:var(--red)}
/* File preview (2026-09-27): the file on top of the page; Download and “Åbn i ny fane” in its head (assets/crm-preview.js). */
.crm .crm-preview {width:min(1120px,94vw);height:min(860px,92vh);max-width:none;max-height:none;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.28);flex-direction:column;overflow:hidden}
.crm .crm-preview[open] {display:flex}
.crm .crm-preview::backdrop {background:rgba(20,24,21,.6)}
.crm-preview-head {flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--line)}
.crm-preview-titles {flex:1;min-width:0}
.crm-preview-titles h2 {margin:0;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-preview-meta {margin:2px 0 0;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-preview-actions {flex:0 0 auto;display:flex;align-items:center;gap:8px}
.crm-preview-actions .crm-secondary {padding:8px 13px;white-space:nowrap}
.crm-preview-count {font-size:12px;color:var(--ink-3);white-space:nowrap;margin-right:4px}
.crm-preview-body {flex:1;min-height:0;position:relative;background:var(--page)}
.crm-preview-stage {position:absolute;inset:0;display:grid;place-items:center;overflow:auto}
.crm-preview-stage[data-loading]::before {content:'Henter filen…';font-size:13px;color:var(--ink-4)}
.crm-preview-image {position:absolute;inset:20px;width:calc(100% - 40px);height:calc(100% - 40px);object-fit:scale-down}   /* a small picture keeps its size */
.crm-preview-frame {position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.crm-preview.has-nav .crm-preview-image {inset:20px 64px;width:calc(100% - 128px)}
.crm-preview.has-nav .crm-preview-frame {inset:0 64px;width:calc(100% - 128px)}
.crm .crm-preview-nav {position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--line-input);color:var(--ink-2);font-size:24px;line-height:1;padding:0 0 3px;display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.crm .crm-preview-nav:hover {background:var(--hover)}
.crm-preview-nav.is-prev {left:12px}
.crm-preview-nav.is-next {right:12px}
.crm-preview-notice {display:flex;flex-direction:column;align-items:center;gap:8px;max-width:360px;margin:24px;padding:28px 28px 26px;background:#fff;border:1px solid var(--line);border-radius:12px;text-align:center}
.crm-preview-notice strong {font-size:14px;overflow-wrap:anywhere}
.crm-preview-notice p {margin:0 0 8px;font-size:13px;line-height:1.45;color:var(--ink-3)}
.crm-preview-type {width:52px;height:52px;border-radius:10px;background:var(--hover);color:var(--ink-2);display:grid;place-items:center;font-size:12px;font-weight:700;margin-bottom:4px}
@media(max-width:760px) {
    .crm .crm-preview {width:100vw;height:100vh;height:100dvh;border-radius:0}
    .crm-preview-head {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:12px 12px 12px 16px}
    .crm-preview-head .crm-icon {grid-column:2;grid-row:1}
    .crm-preview-actions {grid-column:1 / -1;grid-row:2}
    .crm-preview-actions .crm-secondary {flex:1;text-align:center}
    .crm-preview-image,.crm-preview.has-nav .crm-preview-image {inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
    .crm .crm-preview-nav {top:auto;bottom:14px;transform:none}
}
/* “Se som” (2026-09-28, B6): the bar that says whose view this is and that it is for looking only. The app starts below it,
   and so does everything that is laid over the app (the drawers, the phone menu and its button). */
.crm.is-viewing {--view-bar:40px;box-sizing:border-box;padding-top:var(--view-bar)}
.crm-view-bar {position:fixed;top:0;left:0;right:0;z-index:90;height:var(--view-bar);display:flex;align-items:center;gap:14px;padding:0 12px 0 20px;background:var(--ink);color:#fff;font-size:13px}
.crm .crm-view-bar-text {flex:1;min-width:0;display:flex;align-items:baseline;gap:12px}
.crm-view-bar-text span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-view-bar-text strong {font-weight:700}
.crm-view-bar-text .crm-view-bar-note {flex:0 0 auto;color:#c5ccc6}
.crm-view-bar form {flex:0 0 auto;margin:0}
.crm .crm-view-bar button {background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px;white-space:nowrap}
.crm .crm-view-bar button:hover {background:var(--hover)}
.crm .crm-view-bar button:focus-visible {outline-color:#fff}
.crm.is-viewing .crm-drawer,.crm.is-viewing .crm-drawer-backdrop,.crm.is-viewing .crm-mmenu {top:var(--view-bar)}
.crm.is-viewing .crm-burger {top:calc(12px + var(--view-bar))}
.crm.is-viewing .crm-plan {max-height:calc(100vh - 230px - var(--view-bar))}
.crm-user-actions {display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
@media(min-width:801px) {.crm-users-head,.crm-user-row {grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.4fr) 170px}}
@media(max-width:800px) {.crm-users-head,.crm-user-row {grid-template-columns:minmax(0,1fr) auto}}
@media(max-width:760px) {
    .crm.is-viewing {--view-bar:54px}
    .crm-view-bar {gap:10px;padding:0 10px 0 16px}
    .crm .crm-view-bar-text {flex-direction:column;align-items:stretch;gap:1px;line-height:1.3}
    .crm-view-bar-text .crm-view-bar-note {flex:0 1 auto;font-size:12px}
}
/* B25, portion 1 (2026-10-03): the municipal ordering portal's settings (Super Admin): the municipality card, its prices, the institutions and the dialogs. */
.crm-portal {max-width:1120px}
.crm-portal-municipality {display:flex;flex-direction:column;gap:14px}
.crm-portal-head {align-items:center}
.crm-portal-head h2 {font-size:18px}
.crm-portal-grid {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.crm-portal-card {display:flex;flex-direction:column;gap:14px}
.crm-portal-logo {display:flex;align-items:center;min-height:48px}
.crm-portal-logo img {max-height:64px;max-width:260px;object-fit:contain}
.crm-portal-nologo {font-size:12px;color:var(--ink-4);border:1px dashed var(--line-input);border-radius:8px;padding:10px 14px}
.crm-portal-facts {display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0;font-size:13px}
.crm-portal-facts dt {color:var(--ink-3);font-size:12px;font-weight:600;align-self:baseline}
.crm-portal-facts dd {margin:0;overflow-wrap:anywhere}
.crm-portal .is-missing {color:var(--ink-4);font-style:italic}
.crm-portal-contact {border-top:1px solid var(--line-soft);padding-top:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.crm-portal-contact h3,.crm-portal-prices h3 {margin:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.crm-portal-contact p {margin:0;font-size:13px}
.crm-portal-contact .crm-cust-sub {white-space:normal}
.crm-portal-prices {display:flex;flex-direction:column;gap:8px}
.crm-portal-prices .crm-admin-label {margin:6px 0 0}
.crm-price-table {display:flex;flex-direction:column}
.crm-price-line {display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.crm-price-line:last-child {border-bottom:0}
.crm-price-amount {font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.crm-portal-table .crm-inst-head,.crm-inst-row {display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr) auto;gap:12px;align-items:center;padding:12px 16px}   /* portion 5: three buttons in the last column */
.crm-portal-contact-actions {display:flex;flex-wrap:wrap;gap:8px}
.crm-portal-table .crm-inst-head {padding:10px 16px}
.crm-inst-row {border-bottom:1px solid var(--line-soft);font-size:13px}
.crm-inst-row:last-child {border-bottom:0}
.crm-inst-row.is-inactive .crm-inst-who {opacity:.6}
.crm-inst-who {min-width:0}
.crm-inst-who .crm-user-name {display:block}
.crm-inst-who .crm-cust-sub {white-space:normal}
.crm-inst-ean {display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-variant-numeric:tabular-nums}
.crm-inst-mail,.crm-inst-address {overflow-wrap:anywhere}
.crm-portal-emptyrow {padding:18px 16px;font-size:13px;color:var(--ink-3)}
.crm-admin-chip.is-amber {background:#fff9ee;color:#8a4b00;border:1px solid #f1deb8}
.crm-portal-empty p {max-width:560px}
.crm .crm-modal-body .crm-field-grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.crm-price-rows {display:flex;flex-direction:column;gap:8px}
.crm-price-row {display:grid;grid-template-columns:92px minmax(0,1fr) 110px auto 36px;gap:8px;align-items:center}
.crm-price-kind {justify-content:center}
.crm-price-unit {font-size:12px;color:var(--ink-3)}
.crm .crm-price-remove {font-size:18px!important;color:var(--ink-3)}
.crm-logo-row {display:flex;align-items:center;gap:12px;min-height:40px}
.crm-logo-row img {max-height:56px;max-width:220px;object-fit:contain}
.crm .crm-file-button {display:inline-flex;align-items:center;cursor:pointer}
.crm .crm-modal-body #portal-link-url {font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:800px) {
  .crm-portal-grid {grid-template-columns:1fr}
  .crm-portal-table .crm-inst-head {display:none}
  .crm-inst-row {grid-template-columns:minmax(0,1fr);gap:6px}
  .crm-inst-row .crm-user-actions {justify-content:flex-start;padding-top:4px}
  .crm .crm-modal-body .crm-field-grid-3 {grid-template-columns:1fr}
  .crm-price-row {grid-template-columns:minmax(0,1fr) 90px auto 36px}
  .crm-price-row .crm-price-kind {grid-column:1/-1;justify-self:start}
}
/* B25, the municipal ordering portal, portion 2 (2026-10-03): the pages behind portal.php, after the owner's mockup of 2026-10-03 for the words
   and the order of things, and the CRM's own hierarchy for the sizes (owner, 2026-10-03: the design system always; the mockup shows the
   information hierarchy), so the whole form fits a 13" window at first sight. The page scrolls as a document, not as the CRM's shell. */
.crm.crm-portal-page {display:block;height:auto;min-height:100vh;overflow:auto;font-size:14px;line-height:1.4}
.crm-portal-page * {box-sizing:border-box}
.crm-portal-shell {max-width:1280px;margin:0 auto;padding:18px 32px 32px}
.crm-portal-top {display:flex;align-items:center;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.crm-portal-brand {width:104px;height:auto;flex:0 0 auto}
.crm-portal-heading {flex:1 1 auto;min-width:0}
.crm-portal-heading h1 {font-size:15px;font-weight:700;line-height:1.3}
.crm-portal-heading p {margin-top:3px;font-size:13px;color:var(--ink-3)}
.crm-portal-who {display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3);white-space:nowrap}
.crm-portal-avatar {display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#e4eae4;color:var(--ink-2);font-size:11px;font-weight:700;letter-spacing:.02em}
.crm-portal-logout button {background:none;padding:0;font-size:12px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.crm-portal-logout button:hover {color:var(--ink)}
.crm-portal-flash,.crm-portal-alert {margin:0 0 16px;padding:11px 14px;border-radius:8px;font-size:13px;line-height:1.45}
.crm-portal-flash {background:var(--green-soft);color:var(--green-800);border:1px solid #cfe3d6}
.crm-portal-alert {background:var(--red-soft);color:var(--red);border:1px solid #f0cfc6}
.crm-portal-columns {display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:18px;align-items:start}
.crm-portal-col {display:flex;flex-direction:column;gap:18px;min-width:0}
.crm-portal-box {background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px 18px}
.crm-portal-single {max-width:720px}
.crm-portal-kicker {font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.crm-portal-text {margin-top:10px;font-size:14px;line-height:1.5}
.crm-portal-inst {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:12px 0 0}
.crm-portal-inst dt {font-size:12px;color:var(--ink-3)}
.crm-portal-inst dd {margin:4px 0 0;font-size:14px;overflow-wrap:anywhere}
.crm-portal-inst .crm-portal-strong {font-weight:700;font-size:15px}
.crm-portal-dots {letter-spacing:.14em}
.crm-portal-lead {margin-top:6px;font-size:13px;color:var(--ink-2)}
.crm-portal-rows {margin-top:12px}
.crm-portal-rowhead,.crm .crm-portal-row {display:grid;grid-template-columns:minmax(0,1fr) 72px 72px;gap:12px;align-items:center;margin:0;font-weight:400;color:var(--ink)}
.crm-portal-rowhead {padding:0 0 6px;font-size:12px;color:var(--ink-3);border-bottom:1px solid var(--line)}
.crm-portal-rowhead span:nth-child(2),.crm-portal-price {text-align:right}
.crm-portal-rowhead span:last-child {text-align:center}
.crm .crm-portal-row {padding:5px 0;border-bottom:1px solid var(--line-soft);cursor:text}
.crm .crm-portal-row:last-child {border-bottom:0;padding-bottom:0}
.crm-portal-size {font-size:14px}
.crm-portal-size small {display:block;font-size:12px;color:var(--ink-3)}
.crm-portal-price {font-size:13px;color:var(--ink-2)}
.crm input.crm-portal-qty {width:72px;height:34px;border:1px solid var(--line-input);border-radius:8px;text-align:center;font-size:14px;color:var(--ink);background:#fff;padding:0 6px;-moz-appearance:textfield;appearance:textfield}
.crm input.crm-portal-qty::-webkit-outer-spin-button,.crm input.crm-portal-qty::-webkit-inner-spin-button {-webkit-appearance:none;margin:0}
.crm input.crm-portal-qty::placeholder {color:var(--ink-4)}
.crm input.crm-portal-qty.is-set {border:2px solid var(--green);font-weight:700}
.crm input.crm-portal-qty:disabled {background:var(--page);color:var(--ink-2);opacity:1}
.crm-portal-greenery {display:flex;align-items:center;justify-content:space-between;gap:16px}
.crm-portal-greenery-text {flex:1 1 auto;min-width:0}
.crm .crm-portal-greenery-row {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0 0;font-size:14px;font-weight:400;color:var(--ink)}
.crm .crm-portal-greenery-row+.crm-portal-greenery-row {margin-top:10px}
.crm-portal-field {display:flex;flex-direction:column;gap:5px;margin-top:12px}
.crm-portal-field:first-of-type {margin-top:12px}
.crm .crm-portal-field label {font-size:12px;font-weight:600;color:var(--ink-2);margin:0}
.crm .crm-portal-field input,.crm .crm-portal-field textarea {width:100%;border:1px solid var(--line-input);border-radius:8px;padding:8px 12px;font-size:14px;background:#fff;color:var(--ink);line-height:1.4}
.crm .crm-portal-field textarea {resize:vertical;min-height:62px}
.crm .crm-portal-field input::placeholder,.crm .crm-portal-field textarea::placeholder {color:var(--ink-4)}
.crm .crm-portal-field input:disabled,.crm .crm-portal-field textarea:disabled {background:var(--page);color:var(--ink-2);opacity:1}
.crm-portal-field-error {font-size:12px;color:var(--red);margin:8px 0 0}
.crm-portal-field .crm-portal-field-error {margin:0}
.crm-portal-lines {margin-top:8px}
.crm-portal-sumrow {display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.crm-portal-sumrow span:last-child {white-space:nowrap}
.crm-portal-total {font-weight:700;border-bottom:1px solid var(--line-soft)}
.crm-portal-delivery {border-bottom:0}
.crm-portal-nolines {padding:8px 0;font-size:13px;color:var(--ink-3);border-bottom:1px solid var(--line-soft)}
.crm button.crm-portal-send {display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:11px 14px;border-radius:8px;background:var(--green);color:#fff;font-size:14px;font-weight:700}
.crm button.crm-portal-send:hover {background:var(--green-700)}
.crm button.crm-portal-send:disabled {opacity:.45;cursor:default}
.crm button.crm-portal-send:disabled[aria-busy="true"] {opacity:.85}
.crm-portal-note {margin-top:10px;text-align:center;font-size:12px;color:var(--ink-3);line-height:1.5}
.crm-portal-note.is-closed {text-align:left;padding:10px 12px;background:var(--page);border-radius:8px;color:var(--ink-2);font-size:13px}
.crm-portal-note.is-closed+.crm-portal-note.is-closed {margin-top:8px}
/* The municipality's login page: its logo, its title, one field. */
.crm-portal-login {width:100%;max-width:480px;margin:56px auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:36px 40px 34px;display:flex;flex-direction:column;align-items:stretch;font-size:14px}
.crm-portal-login-logo {display:flex;justify-content:center;min-height:48px;margin-bottom:20px}
.crm-portal-login-logo img {max-height:96px;max-width:300px;object-fit:contain}
.crm-portal-login-logo .crm-portal-login-brand {max-height:72px}
.crm-portal-login-name {font-size:20px;font-weight:700;align-self:center}
.crm-portal-login h1 {text-align:center;font-size:18px;font-weight:600;color:var(--ink);margin-bottom:22px}
.crm-portal-login form {display:flex;flex-direction:column;gap:8px}
.crm .crm-portal-login label {font-size:12px;font-weight:600;color:var(--ink-2);margin:0}
.crm .crm-portal-login input {width:100%;border:1px solid var(--line-input);border-radius:8px;padding:10px 12px;font-size:16px;background:#fff;color:var(--ink)}
.crm-portal-login-help {font-size:13px;color:var(--ink-3);line-height:1.5;margin:2px 0 12px}
.crm-portal-login .crm-portal-send {margin-top:0}
.crm-portal-login .crm-portal-text {font-size:14px;text-align:center;margin-top:0}
.crm-portal-login .crm-portal-text+.crm-portal-text {margin-top:12px}
.crm-portal-login .crm-portal-alert {margin-bottom:18px}
.crm-portal-back {align-self:center;margin-top:20px;font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px) {
  .crm-portal-shell {padding:20px 16px 40px}
  .crm-portal-top {flex-wrap:wrap;gap:14px;padding-bottom:18px;margin-bottom:20px}
  .crm-portal-brand {width:80px}
  .crm-portal-heading {flex:1 1 200px}
  .crm-portal-heading h1 {font-size:15px}
  .crm-portal-heading p {font-size:13px}
  .crm-portal-who {flex:1 1 100%;font-size:13px;gap:10px;white-space:normal}
  .crm-portal-avatar {width:28px;height:28px;font-size:11px}
  .crm-portal-columns {grid-template-columns:1fr;gap:16px}
  .crm-portal-col {gap:16px}
  .crm-portal-box {padding:16px 16px 18px;border-radius:12px}
  .crm-portal-inst {grid-template-columns:1fr;gap:10px}
  .crm-portal-inst dd {margin-top:3px;font-size:15px}
  .crm-portal-inst .crm-portal-strong {font-size:16px}
  .crm-portal-rowhead,.crm .crm-portal-row {grid-template-columns:minmax(0,1fr) 72px 72px;gap:10px}
  .crm-portal-size,.crm .crm-portal-greenery-row,.crm-portal-sumrow {font-size:15px}
  .crm input.crm-portal-qty {width:72px;height:38px;font-size:16px}
  .crm .crm-portal-field input,.crm .crm-portal-field textarea,.crm .crm-portal-login input {font-size:16px}
  .crm-portal-greenery {flex-direction:column;align-items:stretch}
  .crm-portal-login {width:auto;margin:16px;padding:26px 20px 24px;max-width:none}   /* B26: auto, or the card and its margins were 32 px wider than the phone */
  .crm-portal-login-logo img {max-height:72px;max-width:220px}
  .crm-portal-login h1 {font-size:17px}
}
/* Dropdowns (owner, 2026-10-03): one chevron for every select in the CRM and on the portal, drawn by the CSS with room to the edge, instead of the browser's own against the border. */
.crm select:not([multiple]) {appearance:none;-webkit-appearance:none;padding-right:34px;background-color:#fff;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 1.5l5 5 5-5' fill='none' stroke='%233d443f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
.crm select:not([multiple]):disabled {background-color:var(--page)}
/* A button that is working (owner, 2026-10-03): the spinner beside “Gemmer …” and “Sender …”, on the portal and in the CRM alike. */
@keyframes crm-spin {to {transform:rotate(360deg)}}
.crm button[aria-busy="true"] {position:relative}
.crm button[aria-busy="true"]::before {content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-2px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:crm-spin .8s linear infinite}
.crm button.crm-portal-send[aria-busy="true"]::before {margin-right:0}
@media(prefers-reduced-motion:reduce) {.crm button[aria-busy="true"]::before {animation:none;border-right-color:currentColor;opacity:.5}}
.crm select.crm-idea-status-select:not([multiple]) {padding-right:22px;background-position:right 6px center;background-size:10px 7px}
/* B25, portion 3 (2026-10-04): a portal order's lines in the CRM. The drawer's table (count, size, unit price, total excl. VAT) under
   “Bestilling fra portalen”, and the plain list of lines on the task card in the plan (count and size, never a price). */
.crm-lines {width:100%;border-collapse:collapse;font-size:13px;margin:0 0 12px}
.crm-lines th {font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);text-align:left;padding:0 0 6px}
.crm-lines td {padding:5px 0;border-top:1px solid var(--line-soft);font-weight:600;vertical-align:top}
.crm-lines th+th,.crm-lines td+td {padding-left:12px}
.crm-lines .is-num {text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.crm-lines tfoot td {border-top:1px solid var(--line);font-weight:700;padding-top:7px}
.crm-work-lines {list-style:none;margin:6px 0;padding:0;font-size:13px;line-height:1.45;font-weight:600}
.crm-work-lines li {padding:1px 0}
/* B25, portion 4 (2026-10-04): the contact person's overview on the portal, after the designer's typography and spacing of 2026-10-04 (the
   layout, the content and the information architecture are the owner's of portion 4): Instrument Sans 400/600/700; names 15/700, key figures
   15/700, body and order lines 14, meta 13, timestamps 12, column headings 11 upper-case; the CRM's ink and green tokens; a card of 24 px with a
   1 px line; rows of 22/24 px; four columns above 1000 px, two between 640 and 1000 px, one below, with the cell labels shown under 1000 px.
   Its own names: never the Super Admin page's. */
.crm-portal-ov {max-width:1280px;padding:24px;border:1px solid var(--line);border-radius:12px;line-height:1.6}
.crm-portal-ov-head {display:flex;gap:32px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.crm-portal-ov-head > div:first-child {flex:1 1 420px;max-width:560px;min-width:0}
.crm-portal-ov-head .crm-portal-text {margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.crm-portal-ov-sum {display:flex;flex-wrap:wrap;gap:28px;margin:6px 0 0;flex:0 1 auto}
.crm-portal-ov-sum dt {font-size:11px;font-weight:600;letter-spacing:.07em;line-height:1;text-transform:uppercase;color:var(--ink-3)}
.crm-portal-ov-sum dd {margin:8px 0 0;font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.crm-portal-ov-rows {margin-top:24px;border-top:1px solid var(--line)}
.crm-portal-ov-rowhead,.crm-portal-ov-row {display:grid;grid-template-columns:1.15fr 1fr .95fr 1.3fr;gap:32px;border-bottom:1px solid var(--line)}
.crm-portal-ov-rowhead {padding:14px 0 12px;font-size:11px;font-weight:600;letter-spacing:.07em;line-height:1;text-transform:uppercase;color:var(--ink-3)}
.crm-portal-ov-row {padding:22px 0 24px}
.crm-portal-ov-cell {min-width:0;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.6;color:var(--ink-2);font-variant-numeric:tabular-nums}
.crm-portal-ov-label {display:none}
.crm-portal-ov-name {font-size:15px;font-weight:700;line-height:1.3;color:var(--ink)}
.crm-portal-ov-sub {font-size:13px;line-height:1.5;color:var(--ink-3);overflow-wrap:anywhere}
.crm-portal-ov-time {font-size:12px;line-height:1.5;color:var(--ink-3)}
.crm-portal-ov-lines {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)}
.crm-portal-ov-total {font-size:14px;color:var(--ink-2);margin-top:6px}
.crm-portal-ov-none {color:var(--ink-3)}
.crm-portal-ov-status {align-self:flex-start;padding:5px 9px;border-radius:6px;font-size:12.5px;font-weight:600;line-height:1.2;background:var(--hover);color:var(--ink-2);white-space:nowrap}
.crm-portal-ov-status.is-green {background:var(--green-soft);color:var(--green-800)}
.crm-portal-ov-status.is-amber {background:#fff9ee;color:#8a4b00}
.crm-portal-ov-status.is-muted {background:var(--page);color:var(--ink-3)}
.crm-portal-ov-msg {margin:0;padding:10px 12px;background:var(--page);border-radius:8px;font-size:14px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:3px}
.crm-portal-ov-write summary {cursor:pointer;display:inline-block;font-size:14px;font-weight:600;color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;list-style:none;outline:none}
.crm-portal-ov-write summary::-webkit-details-marker {display:none}
.crm-portal-ov-write summary:hover {color:var(--green-800)}
.crm-portal-ov-write summary:focus-visible {outline:2px solid var(--green);outline-offset:3px;border-radius:3px}
.crm-portal-ov-form {display:flex;flex-direction:column;gap:8px;margin-top:12px}
.crm .crm-portal-ov-form label {font-size:13px;font-weight:600;color:var(--ink-2);margin:0}
.crm .crm-portal-ov-form textarea {width:100%;border:1px solid var(--line-input);border-radius:8px;padding:10px 12px;font-size:14px;background:#fff;color:var(--ink);line-height:1.5;resize:vertical;min-height:72px}
.crm .crm-portal-ov-form textarea::placeholder {color:var(--ink-4)}
.crm .crm-portal-ov-form textarea:focus {outline:none;border-color:var(--green)}
.crm button.crm-portal-ov-send {align-self:flex-start;padding:10px 16px;border-radius:8px;background:var(--green);color:#fff;font-size:14px;font-weight:700}
.crm button.crm-portal-ov-send:hover {background:var(--green-700)}
.crm button.crm-portal-ov-send:disabled {opacity:.85;cursor:default}
.crm-portal-ov-foot {margin-top:20px;font-size:13px;color:var(--ink-3)}
/* B26 (2026-10-06): the institution's login addresses and the contact person's “Kopiér login-link”; the link's dialog; the header's
   “Skift institution” and the page that asks which institution an address orders for. The portal's own names, never the Super Admin page's. */
.crm-portal-ov-login {font-size:13px;line-height:1.5;color:var(--ink-3);overflow-wrap:anywhere}
.crm-portal-ov-login.is-missing {color:#8a4b00;font-weight:600}
.crm-portal-ov-linkform {margin-top:4px}
.crm button.crm-portal-ov-linkbtn {padding:6px 11px;border:1px solid var(--line-input);border-radius:8px;background:#fff;color:var(--ink-2);font-size:13px;font-weight:600;line-height:1.3}
.crm button.crm-portal-ov-linkbtn:hover {background:var(--hover);color:var(--ink)}
.crm button.crm-portal-ov-linkbtn:focus-visible {outline:2px solid var(--green);outline-offset:2px}
.crm dialog.crm-portal-handover {width:min(520px,94vw);margin:12vh auto 0;padding:22px 22px 20px;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.5}
.crm dialog.crm-portal-handover:not([open]) {display:none}
.crm-portal-handover h2 {font-size:17px;font-weight:700;line-height:1.3;color:var(--ink)}
.crm-portal-handover-text {color:var(--ink-2)}
.crm .crm-portal-handover label {margin:6px 0 0;font-size:12px;font-weight:600;color:var(--ink-2)}
.crm input.crm-portal-handover-url {width:100%;border:1px solid var(--line-input);border-radius:8px;padding:10px 12px;font-size:13px;background:var(--page);color:var(--ink);font-variant-numeric:tabular-nums}
.crm input.crm-portal-handover-url:focus {outline:none;border-color:var(--green);background:#fff}
.crm-portal-handover-status {font-size:13px;font-weight:600;color:var(--green-800)}
.crm-portal-handover-expiry {margin-top:-6px;font-size:13px;color:var(--ink-3)}
.crm-portal-handover-warn {padding:10px 12px;border-radius:8px;background:#fff9ee;color:#8a4b00;font-size:13px}
.crm-portal-handover-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.crm button.crm-portal-handover-close,.crm button.crm-portal-handover-copy {padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600}
.crm button.crm-portal-handover-close {background:#fff;border:1px solid var(--line-input);color:var(--ink-2)}
.crm button.crm-portal-handover-close:hover {background:var(--hover)}
.crm button.crm-portal-handover-copy {background:var(--green);color:#fff}
.crm button.crm-portal-handover-copy:hover {background:var(--green-700)}
.crm a.crm-portal-switch {font-size:12px;font-weight:600;color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.crm a.crm-portal-switch:hover {color:var(--green-800)}
.crm-portal-choose .crm-portal-text {text-align:left;color:var(--ink-2)}
.crm-portal-choose-list {margin-top:18px}
.crm .crm-portal-choose-list {gap:10px}
.crm button.crm-portal-choose-item {display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:14px 16px;border:1px solid var(--line-input);border-radius:10px;background:#fff;text-align:left;color:var(--ink-2)}
.crm button.crm-portal-choose-item:hover {border-color:var(--green);background:var(--green-soft)}
.crm button.crm-portal-choose-item:focus-visible {outline:2px solid var(--green);outline-offset:2px}
.crm button.crm-portal-choose-item.is-current {border-color:var(--green)}
.crm-portal-choose-name {font-size:15px;font-weight:700;line-height:1.3;color:var(--ink)}
.crm-portal-choose-name small {font-size:12px;font-weight:600;color:var(--green-800)}
.crm-portal-choose-sub {font-size:13px;line-height:1.5;color:var(--ink-3)}
.crm-portal-choose-state {margin-top:5px;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600;line-height:1.2;background:var(--page);color:var(--ink-3)}
.crm-portal-choose-state.is-green {background:var(--green-soft);color:var(--green-800)}
.crm-portal-choose-out {align-self:center;margin-top:18px}
.crm .crm-portal-choose-out button {background:none;padding:0;font-size:13px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.crm .crm-portal-choose-out button:hover {color:var(--ink)}
@media (max-width:1000px) {
  .crm-portal-ov-rowhead {display:none}
  .crm-portal-ov-row {grid-template-columns:1fr 1fr;gap:20px 32px}
  .crm-portal-ov-label {display:block;font-size:11px;font-weight:600;letter-spacing:.07em;line-height:1;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
}
@media (max-width:640px) {
  .crm-portal-ov {padding:18px 16px 20px}
  .crm-portal-ov-head {gap:16px}
  .crm-portal-ov-sum {gap:16px 28px}
  .crm-portal-ov-row {grid-template-columns:1fr;gap:16px;padding:18px 0 20px}
  .crm .crm-portal-ov-form textarea {font-size:16px}
  .crm input.crm-portal-handover-url {font-size:16px}   /* B26: no zoom on a phone when the script focuses the link */
}