/* /Components/AreaFilterBadge.razor.rz.scp.css */
.area-filter-badge[b-mljpxf6x1j] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: rgba(255, 168, 0, .14);
    border: 1px solid rgba(255, 168, 0, .35);
    color: var(--text-primary, #1f2937);
    font-size: 12px;
    line-height: 1;
}

.area-filter-badge-dot[b-mljpxf6x1j] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-orange, #FFA800);
    flex-shrink: 0;
}

.area-filter-badge-label[b-mljpxf6x1j] {
    color: var(--text-muted, #6b7280);
}

.area-filter-badge-name[b-mljpxf6x1j] {
    color: var(--text-primary, #1f2937);
    font-weight: 600;
}

.area-filter-badge-clear[b-mljpxf6x1j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 2px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .12s, color .12s;
}

.area-filter-badge-clear:hover[b-mljpxf6x1j] {
    background: rgba(255, 168, 0, .25);
    color: var(--accent-orange, #FFA800);
}
/* /Components/AreasNavSection.razor.rz.scp.css */
/* Match .sidebar nav a from app.css so the group blends with sibling NavLinks
 * (Tickets, Planning, Internal tasks). Same padding, font, hover, active
 * orange accent — only difference is the chevron + indented submenu. */

.areas-nav[b-1uk8tkg53j] {
    display: flex;
    flex-direction: column;
}

/* The row is a flex container holding two sibling buttons: the toggle (full
 * width minus the +) and the plus button on the right. They look like one
 * NavLink visually but click-events stay strictly separated. */
.areas-nav-row[b-1uk8tkg53j] {
    display: flex;
    align-items: stretch;
    gap: 2px;
}

.areas-nav-toggle[b-1uk8tkg53j] {
    flex: 1 1 auto;
    min-width: 0;
    color: rgba(229, 231, 235, .85);
    padding: .55rem .75rem;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .55rem;
    transition: background .12s, color .12s;
    cursor: pointer;
    border: none;
    background: transparent;
    text-align: left;
    text-decoration: none;
    font-family: inherit;
}

.areas-nav-toggle:hover[b-1uk8tkg53j] {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.areas-nav-toggle:focus-visible[b-1uk8tkg53j] {
    outline: 2px solid var(--accent-orange);
    outline-offset: -2px;
}

.areas-nav-title[b-1uk8tkg53j] {
    flex: 0 0 auto;
}

.areas-nav-current[b-1uk8tkg53j] {
    margin-left: auto;
    font-size: .75rem;
    color: rgba(229, 231, 235, .55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
}

/* Subtle pill showing the active area when the group is collapsed. */
.areas-nav-badge[b-1uk8tkg53j] {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 168, 0, .18);
    color: var(--accent-orange);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

.areas-nav-plus[b-1uk8tkg53j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
    color: rgba(229, 231, 235, .85);
    cursor: pointer;
    transition: background .12s, color .12s;
    flex-shrink: 0;
    align-self: stretch;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    /* position+z-index lifts the button above any potential sibling overlap
     * and guarantees it owns the click region. */
    position: relative;
    z-index: 2;
}

.areas-nav-plus:hover[b-1uk8tkg53j] {
    background: rgba(255, 168, 0, .25);
    color: var(--accent-orange, #FFA800);
}

.areas-nav-plus:focus-visible[b-1uk8tkg53j] {
    outline: 2px solid var(--accent-orange);
    outline-offset: 1px;
}

.areas-nav-plus svg[b-1uk8tkg53j] {
    width: 14px;
    height: 14px;
}

.areas-nav-plus:hover[b-1uk8tkg53j] {
    background: rgba(255, 168, 0, .2);
    color: var(--accent-orange);
}

.areas-nav-chevron[b-1uk8tkg53j] {
    width: 14px;
    height: 14px;
    color: rgba(229, 231, 235, .55);
    transition: transform .2s ease;
    flex-shrink: 0;
}

.areas-nav-chevron.open[b-1uk8tkg53j] {
    transform: rotate(180deg);
}

/* Smooth height transition on toggle. The inner wrapper carries the actual
 * padding so the outer can collapse cleanly to 0. */
.areas-nav-submenu[b-1uk8tkg53j] {
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
}

.areas-nav-submenu.open[b-1uk8tkg53j] {
    max-height: 600px;
}

.areas-nav-submenu-inner[b-1uk8tkg53j] {
    display: flex;
    flex-direction: column;
    padding: 2px 0 4px 0;
}

/* Submenu items — same look as .sidebar nav a but indented. Active row uses
 * the brand-orange inset accent for visual continuity with the rest of the
 * sidebar's selected state. */
.areas-nav-item[b-1uk8tkg53j] {
    color: rgba(229, 231, 235, .82);
    text-decoration: none;
    padding: .45rem .75rem .45rem 2.05rem;
    border-radius: 6px;
    font-size: .82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: background .12s, color .12s;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.areas-nav-item:hover[b-1uk8tkg53j] {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.areas-nav-item.active[b-1uk8tkg53j] {
    background: rgba(255, 168, 0, .22);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--accent-orange);
    font-weight: 700;
}

.areas-nav-item-name[b-1uk8tkg53j] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.areas-nav-divider[b-1uk8tkg53j] {
    height: 1px;
    background: rgba(255, 255, 255, .08);
    margin: 6px .75rem;
}

.areas-nav-manage[b-1uk8tkg53j] {
    color: rgba(229, 231, 235, .65);
    font-size: .78rem;
}

.areas-nav-manage:hover[b-1uk8tkg53j] {
    color: #fff;
}

.areas-nav-manage-icon[b-1uk8tkg53j] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.areas-nav-empty[b-1uk8tkg53j] {
    padding: .45rem .75rem .45rem 2.05rem;
    font-size: .78rem;
    color: rgba(229, 231, 235, .45);
    font-style: italic;
}

.areas-nav-locked[b-1uk8tkg53j] {
    cursor: default;
}

/* Custom-namespaced modal portal so the global .modal-backdrop styling
 * doesn't get confused by scoped-CSS attribute filtering. position:fixed +
 * inset:0 escapes any ancestor that has transform/filter/perspective. */
.area-create-portal[b-1uk8tkg53j] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

.area-create-backdrop[b-1uk8tkg53j] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    pointer-events: auto;
    animation: area-create-fade-in-b-1uk8tkg53j .15s ease;
}

@keyframes area-create-fade-in-b-1uk8tkg53j {
    from { opacity: 0; }
    to { opacity: 1; }
}

.area-create-dialog[b-1uk8tkg53j] {
    background: var(--surface);
    color: var(--text-primary, #1f2937);
    border-radius: 12px;
    padding: 1.75rem 1.75rem 1.5rem;
    width: 460px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.area-create-dialog h2[b-1uk8tkg53j] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.area-create-dialog label[b-1uk8tkg53j] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .8125rem;
    color: var(--text-muted, #6b7280);
}

.area-create-dialog input[b-1uk8tkg53j],
.area-create-dialog textarea[b-1uk8tkg53j] {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font: inherit;
    color: var(--text-primary, #1f2937);
    background: var(--surface);
    box-sizing: border-box;
}

.area-create-dialog input:focus[b-1uk8tkg53j],
.area-create-dialog textarea:focus[b-1uk8tkg53j] {
    outline: 2px solid var(--accent-orange, #FFA800);
    outline-offset: -1px;
    border-color: transparent;
}

.area-create-dialog textarea[b-1uk8tkg53j] {
    resize: vertical;
    min-height: 60px;
}

.area-create-dialog .modal-actions[b-1uk8tkg53j] {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .5rem;
}
/* /Components/CommandPalette.razor.rz.scp.css */
/* ── Backdrop ── */
.cp-backdrop[b-5lciag133c] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--overlay-bg);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 15vh;
    backdrop-filter: blur(2px);
}

/* ── Dialog ── */
.cp-dialog[b-5lciag133c] {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-dialog);
    overflow: hidden;
    animation: cp-slide-in-b-5lciag133c 0.15s ease-out;
}

@keyframes cp-slide-in-b-5lciag133c {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Input wrapper ── */
.cp-input-wrapper[b-5lciag133c] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.75rem;
}

.cp-icon[b-5lciag133c] {
    color: var(--text-muted);
    flex-shrink: 0;
    display: flex;
}

.cp-input[b-5lciag133c] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    background: transparent;
    color: var(--text-primary);
}

.cp-input[b-5lciag133c]::placeholder {
    color: var(--text-muted);
}

.cp-kbd[b-5lciag133c] {
    font-size: 0.7rem;
    padding: 2px 6px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    color: var(--text-muted);
    background: var(--kbd-bg);
    flex-shrink: 0;
}

.cp-back-btn[b-5lciag133c] {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.cp-back-btn:hover[b-5lciag133c] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

/* ── Results ── */
.cp-results[b-5lciag133c] {
    max-height: 340px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.cp-empty[b-5lciag133c] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ── Item ── */
.cp-item[b-5lciag133c] {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    cursor: pointer;
    gap: 0.75rem;
    transition: background 0.05s;
}

.cp-item:hover[b-5lciag133c],
.cp-item-active[b-5lciag133c] {
    background: var(--row-hover);
}

.cp-item-icon[b-5lciag133c] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--surface-hover);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.cp-item-active .cp-item-icon[b-5lciag133c] {
    background: var(--primary-blue);
    color: #fff;
}

:global([data-theme="dark"]) .cp-item-active .cp-item-icon[b-5lciag133c] {
    background: var(--secondary-blue);
}

.cp-item-text[b-5lciag133c] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cp-item-label[b-5lciag133c] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.cp-item-hint[b-5lciag133c] {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-item-category[b-5lciag133c] {
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--surface-hover);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .cp-backdrop[b-5lciag133c] {
        padding-top: 5vh;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .cp-dialog[b-5lciag133c] {
        max-width: 100%;
    }
}

/* Section header — separates "Handlinger" from "Opgaver" in the result list. */
.cp-section-header[b-5lciag133c] {
    padding: .5rem .9rem .25rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted, #6b7280);
}

.cp-section-header:not(:first-child)[b-5lciag133c] {
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin-top: 4px;
}

/* Mono ticket number prefix in result rows. */
.cp-ticket-number[b-5lciag133c] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    color: var(--accent-orange, #FFA800);
    font-weight: 600;
    margin-right: .35rem;
}

/* Hint shown when the active-only filter hid all matches but unfiltered
 * results exist — tells the user how to find finished tickets via #-prefix. */
.cp-hint-finished[b-5lciag133c] {
    padding: .65rem .9rem;
    margin: .25rem;
    background: rgba(255, 168, 0, .08);
    border-left: 3px solid var(--accent-orange, #FFA800);
    border-radius: 6px;
    color: var(--text-muted, #6b7280);
    font-size: 12px;
    line-height: 1.4;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Settings (Indstillinger) collapsible group — sits at the very bottom of the
 * sidebar's admin section. Header looks like a sibling NavLink; submenu items
 * are indented and animate in via max-height. */

.settings-group[b-t2g8p7lqnx] {
    margin-top: auto;
}

.settings-toggle[b-t2g8p7lqnx] {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .55rem .75rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(229, 231, 235, .85);
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background .12s, color .12s;
}

.settings-toggle:hover[b-t2g8p7lqnx] {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.settings-toggle-label[b-t2g8p7lqnx] {
    flex: 1;
}

.settings-chevron[b-t2g8p7lqnx] {
    width: 14px;
    height: 14px;
    color: rgba(229, 231, 235, .55);
    transition: transform .2s ease;
    flex-shrink: 0;
}

.settings-chevron.open[b-t2g8p7lqnx] {
    transform: rotate(180deg);
}

.settings-submenu[b-t2g8p7lqnx] {
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
    display: flex;
    flex-direction: column;
}

.settings-submenu.open[b-t2g8p7lqnx] {
    max-height: 500px;
}

[b-t2g8p7lqnx] .settings-item {
    padding-left: 2.05rem !important;
    font-size: .82rem !important;
}

/* "Logget ind som"-badge in the top bar — small pill that makes the user's
 * role visible at all times so they don't have to dig through profile. */
.topbar-role[b-t2g8p7lqnx] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-alt, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    color: var(--text-muted, #6b7280);
    font-size: 12px;
    margin-right: .5rem;
}

.topbar-role strong[b-t2g8p7lqnx] {
    color: var(--primary-blue, #1E3884);
    margin-left: 4px;
}
/* /Components/Pages/Admin/AreasAdmin.razor.rz.scp.css */
.areas-admin-list[b-0asfdu31wx] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
    max-width: 720px;
}

.areas-admin-row[b-0asfdu31wx] {
    display: grid;
    grid-template-columns: 200px 1fr auto auto;
    gap: .75rem;
    align-items: center;
    padding: .6rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.areas-admin-name[b-0asfdu31wx] {
    font-weight: 600;
    color: var(--text-primary);
}

.areas-admin-desc[b-0asfdu31wx] {
    font-size: 13px;
}
/* /Components/Pages/Admin/KanbanColumnsAdmin.razor.rz.scp.css */
.kanban-admin-list[b-9wz5xmptp1] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
    max-width: 720px;
}

.kanban-admin-row[b-9wz5xmptp1] {
    display: grid;
    grid-template-columns: 24px 1fr auto auto auto;
    gap: .75rem;
    align-items: center;
    padding: .6rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.kanban-admin-swatch[b-9wz5xmptp1] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(15,23,42,.12);
    display: inline-block;
}

.kanban-admin-title[b-9wz5xmptp1] {
    font-weight: 600;
    color: var(--text-primary);
}

.kanban-admin-order[b-9wz5xmptp1] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
}

.kanban-admin-color-picker[b-9wz5xmptp1] {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.kanban-admin-color-picker input[type="color"][b-9wz5xmptp1] {
    width: 42px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 4px;
    background: transparent;
}
/* /Components/Pages/Admin/RolesAdmin.razor.rz.scp.css */
.roles-list[b-1ff6zx23q2] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
    max-width: 900px;
}

.roles-row[b-1ff6zx23q2] {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto;
    gap: 1rem;
    align-items: center;
    padding: .7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
}

.roles-row-name[b-1ff6zx23q2] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.roles-name-text[b-1ff6zx23q2] {
    font-weight: 600;
    color: var(--text-primary, #1f2937);
}

.roles-badge-system[b-1ff6zx23q2] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 168, 0, .14);
    border: 1px solid rgba(255, 168, 0, .35);
    color: var(--accent-orange, #FFA800);
    font-weight: 600;
    text-transform: uppercase;
}

.roles-stat[b-1ff6zx23q2] {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
}

.perms-group[b-1ff6zx23q2] {
    margin-bottom: 1rem;
}

.perms-group-header[b-1ff6zx23q2] {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted, #6b7280);
    padding: .5rem 0 .35rem 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    margin-bottom: .35rem;
}

.perms-group-body[b-1ff6zx23q2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.perms-row[b-1ff6zx23q2] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .65rem;
    padding: .35rem .55rem;
    border-radius: 4px;
    cursor: pointer;
}

.perms-row:hover[b-1ff6zx23q2] {
    background: var(--surface-hover, #f1f5f9);
}

.perms-row.mandatory[b-1ff6zx23q2] {
    cursor: default;
    background: rgba(255, 168, 0, .06);
}

.perms-row input[type="checkbox"][b-1ff6zx23q2] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.perms-row-label[b-1ff6zx23q2] {
    font-size: 13px;
    color: var(--text-primary, #1f2937);
}

.perms-row-code[b-1ff6zx23q2] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    color: var(--text-muted, #6b7280);
}
/* /Components/Pages/CustomerContactPersons.razor.rz.scp.css */
/* "Synkroniseret med Uniconta"-badge shown above the form fields when editing
 * an existing contact that already has a Uniconta RowId. Confirms to the user
 * that changes will round-trip back to Uniconta on the next sync. */
/* "← Tilbage"-knap i page-header. Holder samme linje som h1, så agenten har
 * en klar exit fra kontaktperson-grid'en til /customers uden at lede efter
 * breadcrumb'en. Bruger den almindelige .btn-ghost-stil men trimmet ned. */
.back-btn[b-3biolyptfk] {
    height: 32px;
    padding: 0 .75rem;
    font-size: .82rem;
    flex-shrink: 0;
}
.back-btn svg[b-3biolyptfk] {
    flex-shrink: 0;
}

.contact-uniconta-badge[b-3biolyptfk] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    background: var(--status-resolved-bg);
    color: var(--status-resolved);
    border: 1px solid var(--status-resolved);
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 500;
    align-self: flex-start;
    margin-bottom: .25rem;
}
/* /Components/Pages/Kanban.razor.rz.scp.css */
.kanban-header[b-lj7fugpjq1] {
    align-items: center;
    gap: .75rem;
}

.kanban-filter[b-lj7fugpjq1] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 14px;
}

.kanban-filter select[b-lj7fugpjq1] {
    height: 32px;
    padding: 0 .5rem;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    min-width: 220px;
}

.kanban-board[b-lj7fugpjq1] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    overflow-x: auto;
    align-items: flex-start;
}

.kanban-column[b-lj7fugpjq1] {
    background: var(--kanban-column-bg);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.kanban-column-dropzone[b-lj7fugpjq1] {
    background: var(--status-inprogress-bg);
    box-shadow: 0 0 0 2px var(--secondary-blue) inset;
}

.kanban-column-header[b-lj7fugpjq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem .5rem 1rem;
    border-radius: 8px 8px 0 0;
    background: var(--surface);
}

.kanban-column-title[b-lj7fugpjq1] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.kanban-column-count[b-lj7fugpjq1] {
    font-size: 12px;
    background: var(--surface-alt);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.kanban-column-body[b-lj7fugpjq1] {
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
    /* Keeps drag-target hit-area generous even when the column is empty. */
    min-height: 60px;
}

.kanban-card[b-lj7fugpjq1] {
    background: var(--kanban-card-bg);
    color: var(--text-primary);
    border-radius: 6px;
    padding: .6rem .75rem;
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition: box-shadow .15s ease, transform .05s ease;
}

.kanban-card:hover[b-lj7fugpjq1] {
    box-shadow: var(--shadow-md);
}

.kanban-card:active[b-lj7fugpjq1] {
    cursor: grabbing;
    transform: scale(.99);
}

.kanban-card-header[b-lj7fugpjq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.kanban-card-number[b-lj7fugpjq1] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.kanban-card-due[b-lj7fugpjq1] {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.kanban-card-due-future[b-lj7fugpjq1] {
    background: var(--status-assigned-bg);
    color: var(--status-assigned);
}

.kanban-card-due-today[b-lj7fugpjq1] {
    background: var(--status-pending-bg);
    color: var(--status-pending);
}

.kanban-card-due-overdue[b-lj7fugpjq1] {
    background: var(--status-new-bg);
    color: var(--status-new);
}

.kanban-card-subject[b-lj7fugpjq1] {
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: .35rem;
    /* Keep the visual rhythm tight on tall boards by clamping to 3 lines. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kanban-card-meta[b-lj7fugpjq1] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    font-size: 12px;
    color: var(--text-muted);
}

.kanban-card-customer[b-lj7fugpjq1] {
    font-weight: 500;
    color: var(--text-primary);
}

.kanban-card-assignee.muted[b-lj7fugpjq1] {
    font-style: italic;
}
/* /Components/Pages/Notes.razor.rz.scp.css */
.notes-filter[b-ainsfmsodn] {
    height: 32px;
    padding: 0 .5rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    background: var(--surface);
    font-size: 13px;
    margin-right: .75rem;
}

.notes-grid[b-ainsfmsodn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.notes-section-divider[b-ainsfmsodn] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
    color: var(--text-muted, #6b7280);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.notes-section-divider[b-ainsfmsodn]::before,
.notes-section-divider[b-ainsfmsodn]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color, #e5e7eb);
}

.note-card[b-ainsfmsodn] {
    background: var(--surface);
    color: var(--text-primary, #1f2937);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: box-shadow .15s, transform .05s;
}

.note-card:hover[b-ainsfmsodn] {
    box-shadow: 0 2px 12px rgba(15, 23, 42, .08);
}

.note-completed[b-ainsfmsodn] {
    opacity: .72;
    background: var(--surface-alt, #f8fafc);
}

.note-completed .note-title[b-ainsfmsodn],
.note-completed .note-text[b-ainsfmsodn] {
    color: var(--text-muted, #6b7280);
}

.note-check[b-ainsfmsodn] {
    color: #16a34a;
    margin-right: .25rem;
}

.note-card-header[b-ainsfmsodn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
}

.note-title[b-ainsfmsodn] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.note-date[b-ainsfmsodn] {
    font-size: .75rem;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
}

.note-text[b-ainsfmsodn] {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    word-break: break-word;
}

.note-checklist[b-ainsfmsodn] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .25rem 0;
}

.note-checklist-item[b-ainsfmsodn] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    cursor: pointer;
    padding: .15rem 0;
}

.note-checklist-item.done span[b-ainsfmsodn] {
    text-decoration: line-through;
    color: var(--text-muted, #6b7280);
}

.note-checklist-item input[type="checkbox"][b-ainsfmsodn] {
    width: 16px;
    height: 16px;
    accent-color: #16a34a;
    cursor: pointer;
}

.note-checklist-progress[b-ainsfmsodn] {
    font-size: .72rem;
    color: var(--text-muted, #6b7280);
    margin-top: .25rem;
}

.note-card-meta[b-ainsfmsodn] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.note-tag[b-ainsfmsodn] {
    font-size: .72rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.note-tag-customer[b-ainsfmsodn] {
    background: rgba(30, 56, 132, .12);
    color: var(--primary-blue, #1E3884);
    font-weight: 500;
}

.note-tag-ticket[b-ainsfmsodn] {
    background: rgba(255, 168, 0, .14);
    color: var(--accent-orange, #FFA800);
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    cursor: pointer;
}

.note-tag-ticket:hover[b-ainsfmsodn] {
    background: rgba(255, 168, 0, .25);
}

.note-completed-date[b-ainsfmsodn] {
    font-size: .7rem;
    color: #16a34a;
    white-space: nowrap;
}

.note-card-actions[b-ainsfmsodn] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .25rem;
    padding-top: .55rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* Checklist editor in the modal */
.checklist-editor-row[b-ainsfmsodn] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.checklist-editor-input[b-ainsfmsodn] {
    flex: 1;
    padding: .35rem .5rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 4px;
    font: inherit;
}

.checklist-remove[b-ainsfmsodn] {
    flex-shrink: 0;
    padding: 0 .55rem !important;
    line-height: 1;
}

@media (max-width: 768px) {
    .notes-grid[b-ainsfmsodn] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Planning.razor.rz.scp.css */
/* Sticky banner shown while a ticket is "pending placement" — i.e. the user
 * arrived at /planning?pendingTicketId=… from the ticket-detail page and the
 * next empty-cell click drops the ticket into the gantt. */
.pending-ticket-banner[b-61tkw7u3hs] {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem;
    margin: 0 0 1rem 0;
    background: rgba(255, 168, 0, .14);
    border: 1px solid rgba(255, 168, 0, .45);
    border-left: 4px solid var(--accent-orange, #FFA800);
    border-radius: 6px;
    color: var(--text-primary, #1f2937);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}

.pending-ticket-icon[b-61tkw7u3hs] {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.pending-ticket-text[b-61tkw7u3hs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.pending-ticket-text strong[b-61tkw7u3hs] {
    font-size: .9rem;
    color: var(--accent-orange, #FFA800);
    font-weight: 600;
}

.pending-ticket-subject[b-61tkw7u3hs] {
    font-size: .82rem;
    color: var(--text-primary, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-ticket-hint[b-61tkw7u3hs] {
    font-size: .75rem;
}

.pending-ticket-cancel[b-61tkw7u3hs] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}

.pending-ticket-cancel:hover[b-61tkw7u3hs] {
    background: rgba(255, 168, 0, .25);
    color: var(--accent-orange, #FFA800);
}

/* Small hint inside the create-slot modal so the user knows the prefill came
 * from the pending ticket (vs. a normal blank-cell click). */
.pending-ticket-modal-hint[b-61tkw7u3hs] {
    margin: -.5rem 0 1rem 0;
    padding: .5rem .85rem;
    background: rgba(255, 168, 0, .08);
    border-left: 3px solid var(--accent-orange, #FFA800);
    border-radius: 4px;
    font-size: .8rem;
    color: var(--text-muted, #6b7280);
}
/* /Components/Pages/Portal/MyTickets.razor.rz.scp.css */
/* Active / Afsluttede tabs ovenfor ticket-listen i kunde-portalen.
 * Pill-formede knapper med count-badge — samme visuelle "feel" som
 * SmartGrid'ens layout-picker så portalen passer ind i Mobilordre-DNA'en. */
.portal-tabs[b-tu5d8g4amj] {
    display: inline-flex;
    gap: .35rem;
    margin: 0 0 1rem 0;
    padding: 4px;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.portal-tabs button[b-tu5d8g4amj] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}

.portal-tabs button:hover[b-tu5d8g4amj] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.portal-tabs button.active[b-tu5d8g4amj] {
    background: var(--primary-blue);
    color: #fff;
}

.portal-tab-count[b-tu5d8g4amj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
}

.portal-tabs button:not(.active) .portal-tab-count[b-tu5d8g4amj] {
    background: var(--surface);
    color: var(--text-muted);
}

/* "Lukket"-badge ved siden af ticket-emnet i listen.
 * Lille gråt pill der signalerer "denne sag er afsluttet" uden at
 * dominere rækken — agenten skal stadig kunne læse selve emnet. */
.closed-badge[b-tu5d8g4amj] {
    display: inline-flex;
    align-items: center;
    margin-left: .5rem;
    padding: .1rem .55rem;
    background: var(--status-closed-bg);
    color: var(--status-closed);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Faded styling på arkiverede ticket-rækker. opacity + muted-text giver
 * en visuel "dead pile"-effekt så aktive sager popper i forhold til
 * gamle. Hover-effekten gendanner opacitet så rækken stadig føles
 * interaktiv. */
[b-tu5d8g4amj] .ticket-row-archived {
    opacity: .65;
    color: var(--text-muted);
}

[b-tu5d8g4amj] .ticket-row-archived:hover {
    opacity: 1;
}

[b-tu5d8g4amj] .ticket-row-archived .subject-cell {
    font-weight: 400;
}

/* ── Drag-and-drop upload zone i opret-ticket modal'en ────────────── */
.upload-zone-wrap[b-tu5d8g4amj] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.upload-label[b-tu5d8g4amj] {
    font-size: .82rem;
    font-weight: 500;
    color: var(--text-muted);
}
.upload-zone[b-tu5d8g4amj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--border-strong);
    border-radius: 8px;
    background: var(--surface-alt);
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
    position: relative;
}
.upload-zone:hover[b-tu5d8g4amj] {
    background: var(--surface-hover);
    border-color: var(--secondary-blue);
}
.upload-zone-busy[b-tu5d8g4amj] {
    opacity: .6;
    pointer-events: none;
}
.upload-zone[b-tu5d8g4amj]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.upload-zone-text[b-tu5d8g4amj] {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .9rem;
    color: var(--text-primary);
}
.upload-zone-hint[b-tu5d8g4amj] {
    font-size: .75rem;
}

/* Liste med valgte filer + status (pending/uploading/done/failed) */
.upload-list[b-tu5d8g4amj] {
    list-style: none;
    margin: .35rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.upload-item[b-tu5d8g4amj] {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .55rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: .82rem;
}
.upload-item-icon[b-tu5d8g4amj] { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.upload-item-name[b-tu5d8g4amj] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-item-size[b-tu5d8g4amj] { font-size: .72rem; flex-shrink: 0; }
.upload-item-status[b-tu5d8g4amj] { flex-shrink: 0; }
.upload-item-status.ok[b-tu5d8g4amj] { color: var(--status-resolved); }
.upload-item-status.err[b-tu5d8g4amj] { color: var(--status-new); }
.upload-item-remove[b-tu5d8g4amj] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0;
    transition: background-color .12s, color .12s;
}
.upload-item-remove:hover[b-tu5d8g4amj] {
    background: var(--status-new-bg);
    color: var(--status-new);
}
.upload-state-failed[b-tu5d8g4amj] {
    background: var(--status-new-bg);
    border-color: var(--status-new);
}
.upload-state-done[b-tu5d8g4amj] {
    background: var(--status-resolved-bg);
    border-color: var(--status-resolved);
}

.spinner-inline[b-tu5d8g4amj] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spinner-rotate-b-tu5d8g4amj 0.8s linear infinite;
    flex-shrink: 0;
    vertical-align: middle;
}
@keyframes spinner-rotate-b-tu5d8g4amj {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Portal/PortalTicketDetail.razor.rz.scp.css */
/* Portal-specifik styling — slank version af TicketDetail uden alt det
 * tekniske. Holder kunden i en simpel "din sag" - oplevelse uden timer,
 * budget, kanban-flag eller agent-detaljer. */

.portal-header[b-fm1dg6yxty] {
    align-items: center;
    flex-wrap: wrap;
}

.portal-header h1[b-fm1dg6yxty] {
    display: inline-flex;
    align-items: baseline;
    gap: .65rem;
    flex-wrap: wrap;
}

.portal-header .mono[b-fm1dg6yxty] {
    font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.ticket-subject[b-fm1dg6yxty] {
    font-weight: 500;
}

/* Tre-bucket-status pill — Modtaget / I gang / Afsluttet — i hver sin farve
 * så kunden hurtigt kan se hvor sagen ligger uden at skulle læse en label. */
.portal-status[b-fm1dg6yxty] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.portal-status[b-fm1dg6yxty]::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.portal-status-Received[b-fm1dg6yxty] {
    background: var(--status-inprogress-bg);
    color: var(--status-inprogress);
    border-color: var(--status-inprogress);
}
.portal-status-InProgress[b-fm1dg6yxty] {
    background: var(--status-pending-bg);
    color: var(--status-pending);
    border-color: var(--status-pending);
}
.portal-status-Closed[b-fm1dg6yxty] {
    background: var(--status-resolved-bg);
    color: var(--status-resolved);
    border-color: var(--status-resolved);
}

.portal-meta[b-fm1dg6yxty] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: .85rem 1.25rem;
}

.portal-description-body[b-fm1dg6yxty] {
    font-size: .92rem;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--text-primary);
}

.portal-comment-box .reply-input[b-fm1dg6yxty] {
    width: 100%;
    padding: .65rem .85rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    resize: vertical;
}
.portal-comment-box .reply-input:focus[b-fm1dg6yxty] {
    border-color: var(--secondary-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(32, 150, 203, .15);
}

/* Vedhæftede filer-liste på portal-ticket-detail siden */
.portal-attachments .attachment-list[b-fm1dg6yxty] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.attachment-row[b-fm1dg6yxty] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: .9rem;
    transition: background-color .12s, border-color .12s;
}
.attachment-row:hover[b-fm1dg6yxty] {
    background: var(--surface-hover);
    border-color: var(--secondary-blue);
    text-decoration: none;
}
.attachment-icon[b-fm1dg6yxty] { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.attachment-name[b-fm1dg6yxty] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-size[b-fm1dg6yxty] { font-size: .75rem; flex-shrink: 0; }
/* /Components/Pages/TicketDetail.razor.rz.scp.css */
/* Planning-summary card header — h2 on the left, "Planlæg opgave"-CTA on
 * the right. The header layout is scoped here so the existing
 * .planning-summary-grid in app.css is untouched. */
.planning-summary-header[b-56xpe1zv9g] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
}

.planning-summary-header h2[b-56xpe1zv9g] {
    margin: 0;
    flex: 0 0 auto;
}

.plan-ticket-btn[b-56xpe1zv9g] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .85rem;
    font-size: .82rem;
}

.plan-ticket-btn svg[b-56xpe1zv9g] {
    flex-shrink: 0;
}

/* Datetime row inside the schedule modal — start time + duration side-by-side. */
.datetime-row[b-56xpe1zv9g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

@media (max-width: 540px) {
    .datetime-row[b-56xpe1zv9g] {
        grid-template-columns: 1fr;
    }
}

/* Customer line on the ticket-meta card: name + small "swap" / "edit" icons
 * inline so the agent can change customer or edit details without leaving
 * the page. The icons stay subtle by default and lift to brand-orange on
 * hover so they're discoverable but don't dominate the line. */
.customer-row[b-56xpe1zv9g] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.customer-name[b-56xpe1zv9g] { font-weight: 500; }
.customer-action-btn[b-56xpe1zv9g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .12s, color .12s;
    padding: 0;
}
.customer-action-btn:hover[b-56xpe1zv9g] {
    background: var(--surface-hover);
    color: var(--accent-orange);
}

/* "+"-knappen får en lidt kraftigere outline så agenten ser at den er en
 * action-knap (vs. det neutrale forstørrelsesglas). Hopper til brand-blå
 * på hover, så det matcher andre create-/primær-actions. */
.customer-action-create[b-56xpe1zv9g] {
    color: var(--secondary-blue);
}
.customer-action-create:hover[b-56xpe1zv9g] {
    background: var(--surface-hover);
    color: var(--primary-blue);
}

/* Tastaturhjælpe-tekst nederst i picker-listen — ↑↓ navigér · ↵ vælg · Esc */
.picker-hint[b-56xpe1zv9g] {
    margin-top: .35rem;
    padding: .25rem .55rem;
    font-size: .72rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}
.customer-address[b-56xpe1zv9g] {
    font-size: .82rem;
    margin-left: 0;
}

/* Toast banner shown after the customer-edit save returns. Pinned to the
 * top-right of the viewport so it's visible regardless of where the user
 * scrolled to. Click-to-dismiss. */
.customer-toast[b-56xpe1zv9g] {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 1500;
    padding: .85rem 1.1rem;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    max-width: 380px;
    animation: customer-toast-in-b-56xpe1zv9g .2s ease;
}
.customer-toast.ok[b-56xpe1zv9g] {
    background: var(--status-resolved-bg);
    color: var(--status-resolved);
    border: 1px solid var(--status-resolved);
}
.customer-toast.warn[b-56xpe1zv9g] {
    background: var(--status-pending-bg);
    color: var(--status-pending);
    border: 1px solid var(--status-pending);
}
@keyframes customer-toast-in-b-56xpe1zv9g {
    from { transform: translateY(-12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* "Ny kontakt"-badge ved siden af originating-email på ticket-meta card.
 * Vises når inbound-mailens afsender ikke matcher en kendt ContactPerson.
 * Klik åbner create-contact-flowet med navn + email pre-udfyldt. */
.new-contact-badge[b-56xpe1zv9g] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .5rem;
    padding: .15rem .55rem;
    background: var(--status-pending-bg);
    color: var(--status-pending);
    border: 1px solid var(--status-pending);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .12s, transform .05s;
}
.new-contact-badge:hover[b-56xpe1zv9g] { filter: brightness(1.05); }
.new-contact-badge:active[b-56xpe1zv9g] { transform: scale(.97); }

/* Auto-matched contact summary i top af ticket-meta card. Når email-importen
 * stamper en kontakt på ticketet, gør vi det synligt for teknikeren med stor
 * navn-strong + en klikbar telefon-knap så de kan ringe op direkte. */
.auto-matched-contact[b-56xpe1zv9g] {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: .35rem 0 .15rem;
    padding: .55rem .75rem;
    background: var(--status-resolved-bg);
    border-left: 3px solid var(--status-resolved);
    border-radius: 6px;
}
.auto-matched-icon[b-56xpe1zv9g] { font-size: 1.1rem; line-height: 1; }
.auto-matched-text[b-56xpe1zv9g] {
    flex: 1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem;
}
.auto-matched-text strong[b-56xpe1zv9g] { color: var(--text-primary); font-size: .95rem; }
.auto-matched-phone[b-56xpe1zv9g] {
    margin-left: auto;
    padding: .25rem .65rem;
    background: var(--surface);
    border: 1px solid var(--status-resolved);
    border-radius: 4px;
    color: var(--status-resolved);
    text-decoration: none;
    font-weight: 600;
    font-size: .82rem;
    transition: background-color .12s;
}
.auto-matched-phone:hover[b-56xpe1zv9g] {
    background: var(--status-resolved);
    color: var(--surface);
    text-decoration: none;
}

/* Contact-person picker row inside the ticket-meta card. The dropdown grows
 * with the available width while the small "+" link to the customer's contact
 * page stays fixed to the right edge — gives the agent a one-click path to
 * add a new contact when the dropdown is empty. */
.contact-picker-row[b-56xpe1zv9g] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.contact-picker-select[b-56xpe1zv9g] {
    flex: 1 1 220px;
    min-width: 0;
    padding: .35rem .55rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: .85rem;
}
.contact-picker-add[b-56xpe1zv9g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    color: var(--accent-orange);
    text-decoration: none;
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color .12s, border-color .12s;
}
.contact-picker-add:hover[b-56xpe1zv9g] {
    background: var(--surface-hover);
    border-color: var(--accent-orange);
    text-decoration: none;
}

/* "Direkte tlf." + email quick-action buttons. Render as full-width rows
 * under the dropdown so the technician can tap the phone number on a small
 * screen without a precise hit. */
.contact-picker-quickactions[b-56xpe1zv9g] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .5rem;
}
.contact-quick-btn[b-56xpe1zv9g] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .75rem;
    background: var(--status-inprogress-bg);
    color: var(--status-inprogress);
    border: 1px solid var(--status-inprogress);
    border-radius: 6px;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    transition: filter .12s, transform .05s;
}
.contact-quick-btn:hover[b-56xpe1zv9g] {
    filter: brightness(1.05);
    text-decoration: none;
}
.contact-quick-btn:active[b-56xpe1zv9g] { transform: scale(.99); }
.contact-quick-btn svg[b-56xpe1zv9g] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* /Components/Pages/Tickets.razor.rz.scp.css */
/* Tab-strip for area filtering — replaces the sidebar selector with an
 * inline horizontal scroller. Visually matches the dashboard's white/blue
 * palette: white background, blue active accent, subtle hover lift. */
.area-tabs[b-o35djr7jxc] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    margin: 0 0 1rem 0;
    background: var(--surface-alt, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    overflow-x: auto;
}

.area-tab[b-o35djr7jxc] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
    white-space: nowrap;
    font-family: inherit;
}

.area-tab:hover[b-o35djr7jxc] {
    background: var(--surface);
    color: var(--text-primary, #1f2937);
}

.area-tab.active[b-o35djr7jxc] {
    background: var(--surface);
    color: var(--primary-blue, #1E3884);
    border-color: var(--primary-blue, #1E3884);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.area-tab-count[b-o35djr7jxc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--surface-hover, #f1f5f9);
    color: var(--text-muted, #6b7280);
    font-size: 11px;
    font-weight: 600;
}

.area-tab.active .area-tab-count[b-o35djr7jxc] {
    background: var(--primary-blue, #1E3884);
    color: #ffffff;
}

/* "Alle opgaver" gets a small visual divider so it reads as the catch-all
 * separate from the per-area tabs. */
.area-tab.area-tab-all[b-o35djr7jxc] {
    margin-left: auto;
}
/* /Components/PlanningCalendar.razor.rz.scp.css */
/*
   Multi-day calendar styles. Ported from DLN Handyman PlanningCalendar.razor.css
   (multi-day section), then trimmed: no day-view hour-slots, no vertical
   layout, no activity blocks, no holiday banners. Selectors match the markup
   in PlanningCalendar.razor.
*/

/* ── Container ── */
.planning-calendar[b-qnj2t5ic92] {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-primary);
    -webkit-overflow-scrolling: touch;
}

.planning-calendar-empty[b-qnj2t5ic92] {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

.calendar-grid-multi[b-qnj2t5ic92] {
    display: grid;
    min-width: max-content;
}

/* ── Sticky corner cells (top-left of each header row) ── */
.cal-corner[b-qnj2t5ic92] {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 14;
    background: #16306f;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Row 1 — month label */
.cal-corner-month[b-qnj2t5ic92] {
    top: 0;
    background: #0e2250;
}
.cal-month-header[b-qnj2t5ic92] {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #0e2250;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 0;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Row 2 — week label with prev/next */
.cal-corner-week[b-qnj2t5ic92] {
    top: 24px;
    background: #122a5e;
}
.cal-week-header[b-qnj2t5ic92] {
    position: sticky;
    top: 24px;
    z-index: 7;
    background: #122a5e;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 4px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.week-label-text[b-qnj2t5ic92] { flex: 1; text-align: center; }

.cal-nav-btn[b-qnj2t5ic92] {
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
}
.cal-nav-btn:hover[b-qnj2t5ic92] { color: #fff; }
.cal-nav-prev[b-qnj2t5ic92] { margin-right: auto; }
.cal-nav-next[b-qnj2t5ic92] { margin-left: auto; }

/* Row 3 — day label */
.cal-corner-day[b-qnj2t5ic92] {
    top: 48px;
    background: #16306f;
}
.cal-day-header[b-qnj2t5ic92] {
    position: sticky;
    top: 48px;
    z-index: 5;
    background: #1E3884;
    color: #fff;
    padding: 4px 6px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.cal-day-today[b-qnj2t5ic92] {
    background: #2d5fd3 !important;
    box-shadow: inset 0 -3px 0 #FFA800;
}
.cal-day-weekend[b-qnj2t5ic92] { background: #15295e; }
.cal-day-monday[b-qnj2t5ic92] { border-left: 2px solid rgba(255, 255, 255, 0.3); }

.day-name[b-qnj2t5ic92] {
    font-size: 0.6rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}
.day-number[b-qnj2t5ic92] { font-size: 0.95rem; font-weight: 700; line-height: 1; }
.day-month[b-qnj2t5ic92] {
    font-size: 0.5rem;
    opacity: 0.7;
    text-transform: uppercase;
}

/* ── Employee column ── */
.cal-emp-label[b-qnj2t5ic92] {
    position: sticky;
    left: 0;
    z-index: 6;
    background: var(--surface);
    color: var(--text-primary);
    border-right: 2px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    font-size: 0.78rem;
    font-weight: 500;
}
.emp-name[b-qnj2t5ic92] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    line-height: 1.2;
}

/* ── Day cells (the body of the grid) ── */
.cal-day-cell[b-qnj2t5ic92] {
    background: var(--surface);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 60px;
    position: relative;
    transition: background-color 0.1s;
}
.cal-day-cell:hover[b-qnj2t5ic92] { background: var(--row-hover); cursor: pointer; }

/* Drag-target highlight — toggled by planningDragDrop JS via :global() so the
   class can be added without forcing a Blazor re-render. */
:global(.cal-day-cell.cal-cell-dragover)[b-qnj2t5ic92] {
    background: rgba(59, 130, 246, 0.20) !important;
    box-shadow: inset 0 0 0 2px #3b82f6;
}

.cal-cell-today[b-qnj2t5ic92] { background: var(--row-hover); }
.cal-cell-weekend[b-qnj2t5ic92] { background: var(--surface-alt); }

.day-cell-badge[b-qnj2t5ic92] {
    font-size: 0.55rem;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 600;
    text-transform: uppercase;
    align-self: flex-start;
}
.overload-badge[b-qnj2t5ic92] { font-size: 0.7rem; cursor: help; }

/* ── Slot chips ── */
.day-task-chip[b-qnj2t5ic92] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    padding: 3px 6px;
    border-radius: 4px;
    color: #fff;
    font-size: 0.7rem;
    cursor: grab;
    overflow: hidden;
    transition: opacity 0.15s, transform 0.1s;
    line-height: 1.15;
}
.day-task-chip:hover[b-qnj2t5ic92] { opacity: 0.92; }
.day-task-chip:active[b-qnj2t5ic92] { opacity: 0.7; transform: scale(0.98); cursor: grabbing; }
.day-task-chip.clickable[b-qnj2t5ic92] {
    cursor: pointer;
    position: relative;
}
.day-task-chip.clickable:hover[b-qnj2t5ic92] {
    opacity: 1;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}
.chip-loose[b-qnj2t5ic92] { border: 1px dashed rgba(255, 255, 255, 0.5); }

/* Standalone "Quick Appointment" chips — solid amber border so they're easy to
   distinguish from ticket chips (blue, no border) at a glance. */
.chip-standalone[b-qnj2t5ic92] {
    border: 2px solid #fbbf24 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.chip-standalone-tag[b-qnj2t5ic92] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    padding: 0 4px;
    margin-right: 4px;
    vertical-align: 1px;
}

/* Flexible-time chips — dashed border + clock-glyph in front of "Total: Xh" so
   the technician sees instantly that the time is indicative, not a hard slot. */
.chip-flexible[b-qnj2t5ic92] {
    border-style: dashed !important;
    border-width: 2px !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}
.flexible-icon[b-qnj2t5ic92] {
    display: inline-block;
    margin-right: 4px;
    font-size: 0.95em;
    opacity: 0.95;
}

/* External (Outlook) events — read-only "Busy" markers. Visually distinct from
   our own slots: muted gray, diagonal stripes, no edit button, no draggable
   cursor. They sit alongside slots so dispatchers see conflicts. */
.cal-external-chip[b-qnj2t5ic92] {
    background: repeating-linear-gradient(
        135deg,
        rgba(107, 114, 128, 0.85) 0,
        rgba(107, 114, 128, 0.85) 6px,
        rgba(107, 114, 128, 0.65) 6px,
        rgba(107, 114, 128, 0.65) 12px) !important;
    color: #fff !important;
    cursor: not-allowed;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: auto;
    opacity: 0.85;
}
.cal-external-chip:hover[b-qnj2t5ic92] { opacity: 0.95; }
.cal-external-chip .chip-title em[b-qnj2t5ic92] { font-style: italic; opacity: 0.9; margin-right: 2px; }

.cal-external-block[b-qnj2t5ic92] {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: repeating-linear-gradient(
        135deg,
        rgba(107, 114, 128, 0.80) 0,
        rgba(107, 114, 128, 0.80) 6px,
        rgba(107, 114, 128, 0.55) 6px,
        rgba(107, 114, 128, 0.55) 12px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 0.72rem;
    line-height: 1.15;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1px;
    overflow: hidden;
    cursor: not-allowed;
    z-index: 1;
}
.cal-external-block .ext-block-time[b-qnj2t5ic92] {
    font-weight: 400;
    font-size: 0.62rem;
    opacity: 0.85;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-external-block .ext-block-title[b-qnj2t5ic92] {
    font-weight: 600;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-external-container[b-qnj2t5ic92] { pointer-events: none; }
.cal-external-container .cal-external-block[b-qnj2t5ic92] { pointer-events: auto; }

/* Small pencil button overlay on chips/task-blocks. Hidden by default,
   reveals on hover so it doesn't add visual noise to the calendar. */
.day-task-chip .chip-edit-btn[b-qnj2t5ic92],
.cal-task-block .chip-edit-btn[b-qnj2t5ic92] {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.25);
    border: none;
    color: inherit;
    width: 18px;
    height: 18px;
    padding: 2px;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}
.day-task-chip:hover .chip-edit-btn[b-qnj2t5ic92],
.cal-task-block:hover .chip-edit-btn[b-qnj2t5ic92],
.chip-edit-btn:focus-visible[b-qnj2t5ic92] {
    opacity: 1;
}
.chip-edit-btn:hover[b-qnj2t5ic92] { background: rgba(0, 0, 0, 0.45); }
.chip-edit-btn svg[b-qnj2t5ic92] { width: 14px; height: 14px; display: block; }

.chip-time[b-qnj2t5ic92] {
    font-weight: 400;
    font-size: 0.62rem;
    opacity: 0.85;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.chip-title[b-qnj2t5ic92] {
    font-weight: 600;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Bottom totals row ── */
.cal-weekly-total-label[b-qnj2t5ic92] {
    font-weight: 600;
    font-size: 0.75rem;
    border-top: 2px solid var(--border-color);
    background: var(--surface-alt);
}
.cal-weekly-total-cell[b-qnj2t5ic92] {
    border-top: 2px solid var(--border-color);
    background: var(--surface-alt);
    padding: 6px 4px;
    font-size: 0.78rem;
    text-align: center;
}

/* ══════════════════════════════════════════
   DAY VIEW: hour-level cells
   ══════════════════════════════════════════ */
.calendar-grid[b-qnj2t5ic92] {
    display: grid;
    min-width: max-content;
    position: relative;
}

.cal-time-header[b-qnj2t5ic92] {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #1E3884;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 6px 2px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}
.cal-time-half[b-qnj2t5ic92] { background: #1a3477; font-weight: 400; }
.cal-half-mark[b-qnj2t5ic92] {
    font-size: 0.7rem;
    opacity: 0.95;
    color: #d8e1ff;
    letter-spacing: 0.02em;
}
@media (max-width: 1100px) {
    .cal-half-mark[b-qnj2t5ic92] { display: none; }
}

/* Hour cells (the body of the day-view grid) */
.cal-cell[b-qnj2t5ic92] {
    background: var(--surface);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    transition: background-color 0.1s;
}
.cal-cell-half[b-qnj2t5ic92] { border-right: 1px dashed var(--border-color); }
.cal-cell:hover[b-qnj2t5ic92] { background: var(--row-hover); cursor: pointer; }
:global(.cal-cell.cal-cell-dragover)[b-qnj2t5ic92] {
    background: rgba(59, 130, 246, 0.15) !important;
    box-shadow: inset 0 0 0 2px #3b82f6;
}

/* Container that overlays a single employee row so block bars can be
   absolute-positioned via left/width without affecting grid layout. */
.cal-block-container[b-qnj2t5ic92] {
    position: relative;
    pointer-events: none;
}

.cal-task-block[b-qnj2t5ic92] {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: grab;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1px;
    font-size: 0.72rem;
    line-height: 1.15;
    pointer-events: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: opacity 0.12s, transform 0.08s;
}
.cal-task-block-short[b-qnj2t5ic92] {
    padding: 2px 4px;
    font-size: 0.6rem;
}
.cal-task-block-short .task-block-time[b-qnj2t5ic92] {
    font-size: 0.58rem;
    font-weight: 600;
    opacity: 1;
}
.cal-task-block-short .task-block-title[b-qnj2t5ic92] {
    display: none;
}
.cal-task-block:hover[b-qnj2t5ic92] { opacity: 0.92; }
.cal-task-block:active[b-qnj2t5ic92] { cursor: grabbing; transform: scale(0.99); }
.cal-task-block.clickable[b-qnj2t5ic92] { cursor: pointer; }
.cal-task-block.clickable:hover[b-qnj2t5ic92] {
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}
.task-block-time[b-qnj2t5ic92] {
    font-weight: 400;
    font-size: 0.62rem;
    opacity: 0.85;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.task-block-title[b-qnj2t5ic92] {
    font-weight: 600;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Body class flag while a chip is being dragged (set by planningDragDrop JS).
   Lowers chip opacity so the source is visually distinguishable. */
:global(body.task-dragging) .day-task-chip[b-qnj2t5ic92],
:global(body.task-dragging) .cal-task-block[b-qnj2t5ic92] {
    cursor: grabbing;
}

/* Ctrl-drag = copy: emphasise the drop-target with a green tint instead of
   the default blue, so the user can see they're about to copy not move. */
:global(body.ctrl-drag) .cal-cell-dragover[b-qnj2t5ic92] {
    background: rgba(16, 185, 129, 0.18) !important;
    box-shadow: inset 0 0 0 2px #10b981 !important;
}
:global(body.ctrl-drag) .cal-day-cell.cal-cell-dragover[b-qnj2t5ic92] {
    background: rgba(16, 185, 129, 0.18) !important;
    box-shadow: inset 0 0 0 2px #10b981 !important;
}

/* ── Resize handle on the right edge of day-view chips ──────────────
   Affordance: thin grippable bar that brightens on hover. JS owns the
   drag (window.planningResize). */
.cal-task-resize-handle[b-qnj2t5ic92] {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, .2) 100%
    );
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    transition: background 0.12s;
}
.cal-task-resize-handle:hover[b-qnj2t5ic92] {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, .15) 0%,
        rgba(255, 255, 255, .55) 100%
    );
}
.cal-task-block.cal-task-resizing[b-qnj2t5ic92] {
    /* During resize: no-transition on width so the drag feels 1:1 with
       the mouse, plus a subtle outline so the user sees what's being
       changed. */
    transition: none !important;
    outline: 2px solid #3b82f6;
}
:global(body.cal-resizing)[b-qnj2t5ic92] {
    cursor: ew-resize !important;
    user-select: none;
}

/* ── Resource-Weekly view: area-group header rows ────────────────────
   Spans the full grid width; small caps + accent-bar so dispatchers
   can scan one area at a time. */
.cal-area-header[b-qnj2t5ic92] {
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: .35rem .85rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-blue);
    display: flex;
    align-items: center;
}

/* ── Capacity bar + numeric load per cell (heatmap) ──────────────────
   Pinned to the bottom of .cal-day-cell so chips stay visible above.
   --load-pct is set inline as a CSS variable from the C#-computed
   percentage; width animates smoothly when the user drag-resizes. */
.day-cell-load[b-qnj2t5ic92] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    font-size: .66rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    pointer-events: none;
}
.day-cell-load.load-green[b-qnj2t5ic92] {
    background: rgba(16, 185, 129, .18);
    color: #047857;
}
.day-cell-load.load-yellow[b-qnj2t5ic92] {
    background: rgba(245, 158, 11, .22);
    color: #92400e;
}
.day-cell-load.load-red[b-qnj2t5ic92] {
    background: rgba(239, 68, 68, .22);
    color: #b91c1c;
}
:global(:root[data-theme="dark"]) .day-cell-load.load-green[b-qnj2t5ic92] { color: #6ee7b7; }
:global(:root[data-theme="dark"]) .day-cell-load.load-yellow[b-qnj2t5ic92] { color: #fde68a; }
:global(:root[data-theme="dark"]) .day-cell-load.load-red[b-qnj2t5ic92] { color: #fca5a5; }

.day-cell-load-bar[b-qnj2t5ic92] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(to right,
        currentColor 0%, currentColor var(--load-pct, 0%),
        transparent var(--load-pct, 0%), transparent 100%);
    pointer-events: none;
}
.day-cell-load-bar.load-green[b-qnj2t5ic92] { color: #10b981; }
.day-cell-load-bar.load-yellow[b-qnj2t5ic92] { color: #f59e0b; }
.day-cell-load-bar.load-red[b-qnj2t5ic92] { color: #ef4444; }

/* ── Responsive trim ── */
@media (max-width: 1100px) {
    .cal-emp-label[b-qnj2t5ic92] { width: 130px; min-width: 130px; max-width: 130px; }
}
/* /Components/SmartGrid.razor.rz.scp.css */
/* ── Smart Grid Container ── */
.smart-grid[b-rpca29kvq6] {
    width: 100%;
    position: relative;
}

/* ── Toolbar ── */
.smart-grid-toolbar[b-rpca29kvq6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.smart-grid-left[b-rpca29kvq6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
}

.smart-grid-right[b-rpca29kvq6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reset-all-btn[b-rpca29kvq6] {
    color: #6c757d;
    border-color: #adb5bd;
    font-size: 0.82rem;
}

.reset-all-btn:hover[b-rpca29kvq6] {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.toolbar-btn[b-rpca29kvq6] {
    border-radius: 2rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* ── Search ── */
.smart-grid-search[b-rpca29kvq6] {
    position: relative;
    min-width: 220px;
    width: 300px;
}

.smart-grid-search .search-icon[b-rpca29kvq6] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    opacity: 0.5;
    pointer-events: none;
}

.smart-grid-search input[b-rpca29kvq6] {
    padding-left: 2.2rem;
    padding-right: 2rem;
    border-radius: 2rem;
    border: 1px solid #d0d5dd;
    font-size: 0.9rem;
    height: 38px;
    width: 100%;
}

.smart-grid-search input:focus[b-rpca29kvq6] {
    border-color: var(--secondary-blue, #2096CB);
    box-shadow: 0 0 0 2px rgba(32, 150, 203, 0.15);
}

.smart-grid-search .search-clear[b-rpca29kvq6] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    font-size: 1.2rem;
    color: #888;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
}

.smart-grid-search .search-clear:hover[b-rpca29kvq6] {
    color: #333;
}

/* ── Column picker ── */
.column-picker-wrapper[b-rpca29kvq6] {
    position: relative;
}

.column-picker-dropdown[b-rpca29kvq6] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1060;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 260px;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}

.column-picker-header[b-rpca29kvq6] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--primary-blue, #1E3884);
    padding: 0.25rem 1rem 0.5rem;
    border-bottom: 1px solid #eee;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.column-picker-row[b-rpca29kvq6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.5rem;
}

.column-picker-row:hover[b-rpca29kvq6] {
    background: var(--row-hover);
}

.column-picker-item[b-rpca29kvq6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    margin: 0;
    flex: 1;
}

.column-picker-item input[type="checkbox"][b-rpca29kvq6] {
    accent-color: var(--accent-orange, #FFA800);
}

.column-picker-arrows[b-rpca29kvq6] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.arrow-btn[b-rpca29kvq6] {
    border: none;
    background: none;
    color: #999;
    cursor: pointer;
    font-size: 0.55rem;
    padding: 0 0.2rem;
    line-height: 1;
}

.arrow-btn:hover[b-rpca29kvq6] {
    color: var(--primary-blue, #1E3884);
}

.column-picker-footer[b-rpca29kvq6] {
    padding: 0.4rem 1rem 0.25rem;
    border-top: 1px solid #eee;
}

/* ── Layout picker ── */
.layout-picker-wrapper[b-rpca29kvq6] {
    position: relative;
}

.layout-picker-dropdown[b-rpca29kvq6] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1060;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 250px;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
}

.layout-item[b-rpca29kvq6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1rem 0.5rem 0.1rem 0;
}

.layout-item:hover[b-rpca29kvq6] {
    background: var(--row-hover);
}

.layout-item.layout-active[b-rpca29kvq6] {
    background: rgba(30, 56, 132, 0.08);
    border-left: 3px solid var(--primary-blue, #1E3884);
}

.layout-divider[b-rpca29kvq6] {
    height: 1px;
    background: #e0e0e0;
    margin: 0.2rem 0.75rem;
}

.layout-name-btn[b-rpca29kvq6] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #333;
    padding: 0.4rem 1rem;
    text-align: left;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.layout-name-btn:hover[b-rpca29kvq6] {
    color: var(--primary-blue, #1E3884);
}

.layout-default-star[b-rpca29kvq6] {
    color: var(--accent-orange, #FFA800);
    font-size: 0.85rem;
}

.layout-active-indicator[b-rpca29kvq6] {
    color: var(--primary-blue, #1E3884);
    font-size: 0.8rem;
    font-weight: 700;
    margin-left: auto;
}

.layout-actions[b-rpca29kvq6] {
    display: flex;
    gap: 0.15rem;
    align-items: center;
}

.layout-action-btn[b-rpca29kvq6] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: #999;
    padding: 0.2rem 0.3rem;
    border-radius: 3px;
    line-height: 1;
}

.layout-action-btn:hover[b-rpca29kvq6] {
    color: var(--accent-orange, #FFA800);
    background: rgba(0, 0, 0, 0.05);
}

.layout-delete-btn:hover[b-rpca29kvq6] {
    color: #dc3545;
}

.layout-footer-actions[b-rpca29kvq6] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.layout-save-form[b-rpca29kvq6] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.25rem;
}

.layout-save-form input[b-rpca29kvq6] {
    flex: 1;
    font-size: 0.85rem;
}

.btn-action[b-rpca29kvq6] {
    background-color: var(--accent-orange, #FFA800);
    border-color: var(--accent-orange, #FFA800);
    color: #fff;
    font-weight: 600;
}

.btn-action:hover[b-rpca29kvq6] {
    background-color: #e69500;
    border-color: #e69500;
    color: #fff;
}

/* ── Info bar ── */
.smart-grid-info[b-rpca29kvq6] {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.5rem;
}

/* ── Table ── */
[b-rpca29kvq6] .smart-grid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

[b-rpca29kvq6] .smart-grid-table thead th {
    background: var(--primary-blue, #1E3884);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border: none;
    white-space: nowrap;
    position: relative;
    overflow: visible;
    cursor: grab;
}

[b-rpca29kvq6] .smart-grid-table thead th.dragging {
    opacity: 0.5;
}

[b-rpca29kvq6] .smart-grid-table thead th:first-child {
    border-radius: 0.5rem 0 0 0;
}

[b-rpca29kvq6] .smart-grid-table thead th:last-child {
    border-radius: 0 0.5rem 0 0;
}

[b-rpca29kvq6] .smart-grid-table thead th .th-content {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

[b-rpca29kvq6] .th-drag-handle {
    font-size: 0.7rem;
    opacity: 0.4;
    cursor: grab;
    user-select: none;
}

[b-rpca29kvq6] .smart-grid-table thead th:hover .th-drag-handle {
    opacity: 0.8;
}

[b-rpca29kvq6] .smart-grid-table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: var(--surface);
    color: var(--text-primary);
}

[b-rpca29kvq6] .smart-grid-table tbody tr:last-child td {
    border-bottom: none;
}

[b-rpca29kvq6] .smart-grid-table tbody tr:nth-child(even) td {
    background-color: var(--row-alt);
}

[b-rpca29kvq6] .smart-grid-table tbody tr:hover td {
    background-color: var(--row-hover);
}

/* ── Sort label ── */
[b-rpca29kvq6] .th-sort-label.sortable {
    cursor: pointer;
    user-select: none;
}

[b-rpca29kvq6] .th-sort-label.sortable:hover {
    text-decoration: underline;
}

[b-rpca29kvq6] .sort-indicator {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.9;
    color: var(--accent-orange, #FFA800);
}

[b-rpca29kvq6] .sort-priority {
    font-size: 0.55rem;
    vertical-align: super;
    margin-left: 1px;
    opacity: 0.85;
}

/* ── Column resize handle ── */
[b-rpca29kvq6] .th-resize-handle {
    position: absolute;
    top: 0;
    right: -2px;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
}

[b-rpca29kvq6] .th-resize-handle:hover,
[b-rpca29kvq6] .th-resize-handle:active {
    background: rgba(255, 168, 0, 0.5);
}

/* ── Filter button in header ── */
[b-rpca29kvq6] .filter-btn {
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 0.6rem;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    line-height: 1;
}

[b-rpca29kvq6] .filter-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

[b-rpca29kvq6] .filter-btn.filter-active {
    color: var(--accent-orange, #FFA800);
}

/* ── Filter dropdown (absolute inside th) ── */
[b-rpca29kvq6] .filter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1060;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.5rem;
}

[b-rpca29kvq6] .filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
}

[b-rpca29kvq6] .filter-item:hover {
    background: var(--surface-hover);
    border-radius: 4px;
}

[b-rpca29kvq6] .filter-item input[type="checkbox"] {
    accent-color: var(--accent-orange, #FFA800);
}

[b-rpca29kvq6] .filter-select-all {
    font-size: 0.85rem;
}

[b-rpca29kvq6] .filter-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0.25rem 0.5rem;
}

/* ── Sticky actions column ── */
[b-rpca29kvq6] .actions-th {
    position: sticky;
    right: 0;
    z-index: 3;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.06);
}

[b-rpca29kvq6] .actions-cell {
    white-space: nowrap;
    position: sticky;
    right: 0;
    background: var(--surface);
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.06);
    overflow: visible;
}

[b-rpca29kvq6] .smart-grid-table tbody tr:nth-child(even) .actions-cell {
    background: var(--row-alt);
}

[b-rpca29kvq6] .smart-grid-table tbody tr:hover .actions-cell {
    background: var(--row-hover);
}

/* ── Tablet / split-screen ── */
@media (max-width: 992px) {
    .smart-grid-toolbar[b-rpca29kvq6] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .smart-grid-left[b-rpca29kvq6] {
        flex: 1 1 auto;
    }

    .smart-grid-right[b-rpca29kvq6] {
        flex: 1 1 100%;
    }

    .smart-grid-search[b-rpca29kvq6] {
        width: 100%;
        min-width: 0;
    }
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .smart-grid-toolbar[b-rpca29kvq6] {
        flex-direction: column;
        align-items: stretch;
    }

    .smart-grid-left[b-rpca29kvq6] {
        justify-content: flex-start;
    }

    .smart-grid-right[b-rpca29kvq6] {
        width: 100%;
    }

    .smart-grid-search[b-rpca29kvq6] {
        width: 100%;
    }

    [b-rpca29kvq6] .smart-grid-table {
        min-width: auto;
    }

    [b-rpca29kvq6] .smart-grid-table .mobile-hidden {
        display: none;
    }

    [b-rpca29kvq6] .actions-cell {
        min-width: 48px;
    }

    .smart-grid-pager[b-rpca29kvq6] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
        text-align: center;
    }

    [b-rpca29kvq6] .th-resize-handle {
        display: none;
    }
}

/* ── Pager ── */
.smart-grid-table-wrapper[b-rpca29kvq6] {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.smart-grid-pager[b-rpca29kvq6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid #dee2e6;
    font-size: 0.85rem;
    gap: 1rem;
}

.pager-controls[b-rpca29kvq6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pager-controls button[b-rpca29kvq6] {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.pager-controls button:hover:not(:disabled)[b-rpca29kvq6] {
    background: var(--surface-hover);
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

.pager-controls button:disabled[b-rpca29kvq6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pager-size[b-rpca29kvq6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pager-size select[b-rpca29kvq6] {
    padding: 0.2rem 0.4rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 0.85rem;
}

.smart-grid-loading-overlay[b-rpca29kvq6] {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.loading-spinner[b-rpca29kvq6] {
    width: 2rem;
    height: 2rem;
    border: 3px solid #dee2e6;
    border-top-color: var(--primary-blue, #1E3884);
    border-radius: 50%;
    animation: spin-b-rpca29kvq6 0.8s linear infinite;
}

@keyframes spin-b-rpca29kvq6 {
    to { transform: rotate(360deg); }
}

/* ── Company layout badge ── */
.layout-company-badge[b-rpca29kvq6] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: var(--primary-blue, #1E3884);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — overrider alle hardcodede lyse baggrunde og grå
   tekstfarver i SmartGrid. Gælder for alle SmartGrids på tværs
   af appen (Sager, Kunder, Varer, Leverandører, Faktura osv.).
   ══════════════════════════════════════════════════════════════ */

/* Søgefelt + reset-knap + info-tekst */
:global([data-theme="dark"]) .smart-grid-search input[b-rpca29kvq6] {
    background: var(--input-bg, var(--surface));
    color: var(--text-primary);
    border-color: var(--border-color);
}
:global([data-theme="dark"]) .smart-grid-search .search-clear[b-rpca29kvq6] { color: var(--text-muted); }
:global([data-theme="dark"]) .smart-grid-search .search-clear:hover[b-rpca29kvq6] { color: var(--text-primary); }
:global([data-theme="dark"]) .smart-grid-info[b-rpca29kvq6] { color: var(--text-muted); }
:global([data-theme="dark"]) .reset-all-btn[b-rpca29kvq6] {
    color: var(--text-muted);
    border-color: var(--border-color);
}
:global([data-theme="dark"]) .reset-all-btn:hover[b-rpca29kvq6] {
    color: var(--text-primary);
    background: var(--surface-hover);
    border-color: var(--border-color);
}

/* Kolonne-picker dropdown */
:global([data-theme="dark"]) .column-picker-header[b-rpca29kvq6] {
    color: var(--secondary-blue);
    border-bottom-color: var(--border-color);
}
:global([data-theme="dark"]) .column-picker-footer[b-rpca29kvq6] { border-top-color: var(--border-color); }
:global([data-theme="dark"]) .arrow-btn[b-rpca29kvq6] { color: var(--text-muted); }
:global([data-theme="dark"]) .arrow-btn:hover[b-rpca29kvq6] { color: var(--secondary-blue); }

/* Layout-picker dropdown */
:global([data-theme="dark"]) .layout-divider[b-rpca29kvq6] { background: var(--border-color); }
:global([data-theme="dark"]) .layout-name-btn[b-rpca29kvq6] { color: var(--text-primary); }
:global([data-theme="dark"]) .layout-name-btn:hover[b-rpca29kvq6] { color: var(--secondary-blue); }
:global([data-theme="dark"]) .layout-active-indicator[b-rpca29kvq6] { color: var(--secondary-blue); }
:global([data-theme="dark"]) .layout-item.layout-active[b-rpca29kvq6] {
    background: rgba(32, 150, 203, 0.15);
    border-left-color: var(--secondary-blue);
}
:global([data-theme="dark"]) .layout-action-btn[b-rpca29kvq6] { color: var(--text-muted); }
:global([data-theme="dark"]) .layout-action-btn:hover[b-rpca29kvq6] {
    color: var(--accent-orange, #FFA800);
    background: rgba(255, 255, 255, 0.06);
}

/* Tabel-header (primary-blue beholder — mørk nok til dark mode) */
:global([data-theme="dark"])[b-rpca29kvq6]  .smart-grid-table thead th {
    background: #16306f;
}

/* Filter-dropdown — den vigtigste: lys baggrund på dark surface */
:global([data-theme="dark"])[b-rpca29kvq6]  .filter-dropdown {
    background: var(--surface) !important;
    color: var(--text-primary);
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
:global([data-theme="dark"])[b-rpca29kvq6]  .filter-item { color: var(--text-primary); }
:global([data-theme="dark"])[b-rpca29kvq6]  .filter-item:hover { background: var(--surface-hover); }
:global([data-theme="dark"])[b-rpca29kvq6]  .filter-divider { background: var(--border-color); }

/* Pager — Forrige/Næste knapperne var usynlige på dark bg fordi bg=hvid
   kolliderede med siden. Bruger surface-alt + tydelig border-color + lyst
   text-primary så disabled-tilstand stadig kan ses. */
:global([data-theme="dark"]) .smart-grid-pager[b-rpca29kvq6] {
    border-top-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
:global([data-theme="dark"]) .pager-controls button[b-rpca29kvq6] {
    background: var(--surface-alt) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-strong, var(--border-color)) !important;
}
:global([data-theme="dark"]) .pager-controls button:hover:not(:disabled)[b-rpca29kvq6] {
    background: var(--surface-hover) !important;
    border-color: var(--secondary-blue) !important;
    color: var(--secondary-blue) !important;
}
:global([data-theme="dark"]) .pager-controls button:disabled[b-rpca29kvq6] {
    opacity: 0.45 !important;
    color: var(--text-muted) !important;
    background: var(--surface-alt) !important;
}
:global([data-theme="dark"]) .pager-size select[b-rpca29kvq6] {
    background: var(--input-bg, var(--surface)) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Loading-overlay: hvid transparens ville blinde dark mode — brug dark transparens */
:global([data-theme="dark"]) .smart-grid-loading-overlay[b-rpca29kvq6] {
    background: rgba(10, 13, 24, 0.55);
}
:global([data-theme="dark"]) .loading-spinner[b-rpca29kvq6] {
    border-color: var(--border-color);
    border-top-color: var(--secondary-blue);
}
/* /Components/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-rlbxx14wdq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}

.theme-toggle:hover[b-rlbxx14wdq] {
    background: var(--surface-hover);
    color: var(--accent-orange);
    border-color: var(--border-strong);
    transform: rotate(15deg);
}

.theme-toggle:active[b-rlbxx14wdq] {
    transform: scale(.94);
}

.theme-toggle:focus-visible[b-rlbxx14wdq] {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

.theme-toggle svg[b-rlbxx14wdq] {
    pointer-events: none;
}