/* Reusable Dokumint UI components */

* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--primary) 76%, var(--bg-card)) color-mix(in oklch, var(--bg-background, var(--bg)) 88%, var(--primary));
}

*::-webkit-scrollbar {
    width: 0.7rem;
    height: 0.7rem;
}

*::-webkit-scrollbar-track {
    background: color-mix(in oklch, var(--bg-background, var(--bg)) 88%, var(--primary));
}

*::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, var(--primary) 76%, var(--bg-card));
    border: 2px solid color-mix(in oklch, var(--bg-background, var(--bg)) 88%, var(--primary));
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

*::-webkit-scrollbar-corner {
    background: color-mix(in oklch, var(--bg-background, var(--bg)) 88%, var(--primary));
}

.animate * {
    transition: 0.4s ease all;
}

.dk-panel {
    background: var(--bg-card);
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.dk-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-field);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-foreground);
    margin-bottom: 16px;
}

.dk-button {
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    border: none;
    background: var(--primary);
    color: var(--primaryFg);
    font-weight: 600;
    cursor: pointer;
}

.dk-button:hover {
    background: var(--accent-hover);
}

.icon-picker-tile img, .icon-picker-tile svg {
    width: 28px;
    height: 28px;
    opacity: 0.9;
    transition: opacity 0.15s ease;
}

.icon-mask {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: var(--icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.doku-mint {
	color: var(--text-brand);
}

.field-config-hidden {
    display: none;
}
.field-config-active {
    display: block;
}

.dm-picker-input {
    color-scheme: light;
    cursor: pointer;
}

.dark .dm-picker-input {
    color-scheme: dark;
}

.dm-picker-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

.sidebar-item:last-of-type {
    margin-bottom: 1.5rem;
}

.rack-diagram-scroll {
    border-radius: 6px;
    padding-bottom: 0.35rem;
    background:
        linear-gradient(180deg, color-mix(in oklch, var(--bg-background, var(--bg)) 96%, white) 0%, var(--bg-card) 100%);
}

.rack-diagram-scroll svg {
    display: block;
}

/* Toggle switch (used in Asset create/edit checkbox fields) */
.dm-toggle {
    position: relative;
    display: inline-block;
    width: 2.25rem;  /* matches w-9 */
    height: 1.25rem; /* matches h-5 */
    border-radius: 9999px;
    background: var(--bg-bgmuted);
    border: 1px solid var(--border);
    box-sizing: border-box;
}

.dm-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: var(--bg-bgmuted);
    border: 1px solid var(--border);
    box-sizing: border-box;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.dm-toggle-input:checked + .dm-toggle::after {
    transform: translateX(1rem);
    background: var(--primary);
    border-color: var(--primary);
}

/* Document folder management actions */
.doc-folder-row {
    border-radius: 6px;
}

.doc-folder-row:hover {
    background: var(--bg-hover);
}

.doc-folder-actions {
    gap: 0.5rem;
}

.doc-folder-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    transition: 0.2s ease all;
}

.doc-folder-action:hover {
    color: var(--text-foreground);
    background: var(--bg-hover);
}

.doc-folder-action--danger {
    color: var(--text-destructive);
}

.doc-folder-action--danger:hover {
    background: var(--bg-destructive);
    color: var(--text-on-destructive);
    border-color: var(--bg-destructive);
}

/* TipTap / ProseMirror list reset override */
.ProseMirror ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.ProseMirror ol {
    list-style: decimal;
    padding-left: 1.25rem;
}

.ProseMirror li {
    margin: 0.25rem 0;
}

.prose .ProseMirror ul {
    list-style-type: disc !important;
    padding-left: 1.25rem;
}

.prose .ProseMirror ol {
    list-style-type: decimal !important;
    padding-left: 1.25rem;
}

.prose .ProseMirror li {
    margin: 0.25rem 0;
}

/* TipTap editor list fixes */
.tiptap ul {
    list-style-type: disc !important;
    margin-left: 1.25rem;
    padding-left: 0.5rem;
}

.tiptap ol {
    list-style-type: decimal !important;
    margin-left: 1.25rem;
    padding-left: 0.5rem;
}

.tiptap li {
    margin: 0.25rem 0;
}

.ProseMirror pre {
  background: #0f172a;        /* dark slate */
  color: #e5e7eb;
	margin: 0.75rem;
	padding: 0.75rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  font-size: 0.875rem;
}

.ProseMirror pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* Tooltip */
.dm-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.dm-tooltip__trigger {
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.dm-tooltip__trigger:hover,
.dm-tooltip__trigger:focus-visible {
    background: var(--bg-hover);
    color: var(--text-foreground);
    outline: none;
}

.dm-tooltip__content {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(360px, 80vw);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    color: var(--text-foreground);
    z-index: 60;
    display: none;
}

.dm-tooltip__content::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 10px;
    width: 12px;
    height: 12px;
    background: var(--bg-card);
    /* border-left: 1px solid var(--border); */
    border-top: 1px solid var(--border);
    transform: rotate(45deg);
}

/* Global back-to-top button */
.dok-back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-foreground);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.dok-back-to-top:hover {
    background: var(--bg-hover);
}

.dok-back-to-top:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.dok-back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dm-tooltip:hover .dm-tooltip__content,
.dm-tooltip:focus-within .dm-tooltip__content,
.dm-tooltip.dm-tooltip--open .dm-tooltip__content {
    display: block;
}

.dm-tooltip__heading {
    font-weight: 700;
    font-size: 0.8rem;
}

.dm-tooltip__text {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.related-workspace {
    position: fixed;
    inset: 0;
    z-index: 76;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in oklab, black 64%, transparent);
}

.related-workspace.is-open {
    display: flex;
}

.related-workspace__dialog {
    width: min(98vw, 1480px);
    height: min(92vh, 860px);
    max-width: 98vw;
    max-height: 92vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    background: var(--bg-card);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.32);
}

.related-workspace__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(135deg, color-mix(in oklab, var(--bg-card) 82%, var(--primary) 18%), var(--bg-card)),
        var(--bg-card);
}

.related-workspace__headline {
    min-width: 0;
}

.related-workspace__title {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text-foreground);
}

.related-workspace__subtitle {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.related-workspace__header-actions,
.related-workspace__toolbar,
.related-workspace__view-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.related-workspace__view-switch {
    padding: 0.2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in oklab, var(--bg-card) 82%, var(--bg-context) 18%);
    box-shadow: inset 0 1px 0 color-mix(in oklab, white 55%, transparent);
}

.related-workspace__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.related-workspace__control:hover {
    color: var(--text-foreground);
    background: color-mix(in oklab, var(--bg-card) 58%, var(--note-info) 42%);
}

.related-workspace__control.is-active {
    color: var(--text-on-primary);
    background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 86%, white 14%), var(--primary));
    box-shadow: 0 8px 18px color-mix(in oklab, var(--primary) 22%, transparent);
}

.related-workspace__control:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.related-workspace__control--close {
    border-color: var(--border);
    background: color-mix(in oklab, var(--bg-card) 88%, var(--bg-context) 12%);
    color: var(--text-foreground);
}

.related-workspace__control--close:hover {
    border-color: color-mix(in oklab, var(--border) 40%, var(--primary) 60%);
    background: color-mix(in oklab, var(--bg-card) 70%, var(--note-info) 30%);
}

.related-workspace__toolbar {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--bg-card) 76%, var(--bg-context) 24%);
}

.related-workspace__toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.related-workspace__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    min-height: 0;
}

.related-workspace__graph-shell {
    position: relative;
    min-width: 0;
    min-height: 0;
    background:
        radial-gradient(circle at top left, color-mix(in oklab, var(--bg-context) 72%, transparent), transparent 38%),
        linear-gradient(180deg, color-mix(in oklab, var(--bg-card) 78%, var(--bg-context) 22%), var(--bg-card));
}

.related-workspace__graph {
    width: 100%;
    height: 100%;
}

.related-workspace__switch-layout {
    max-width: 78rem;
}

.related-workspace__empty {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.related-workspace__empty.is-visible {
    display: flex;
}

.related-workspace__aside {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    background: color-mix(in oklab, var(--bg-card) 84%, var(--bg-context) 16%);
}

.related-workspace__aside-scroll {
    min-height: 0;
    overflow: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.related-workspace__section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.related-workspace__section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.related-workspace__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.related-workspace__metric {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 6px);
    background: color-mix(in oklab, var(--bg-card) 74%, var(--bg-context) 26%);
}

.related-workspace__metric-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-foreground);
}

.related-workspace__metric-label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.related-workspace__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.related-workspace__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-card);
}

.related-workspace__rows {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.related-workspace__row {
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 6px);
    background: var(--bg-card);
    color: var(--text-foreground);
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.related-workspace__row:hover,
.related-workspace__row.is-active {
    border-color: var(--primary);
    background: color-mix(in oklab, var(--bg-card) 74%, var(--note-info) 26%);
}

.related-workspace__row:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.related-workspace__row-title {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-foreground);
}

.related-workspace__row-meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.related-workspace__port-map {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.55rem;
}

.related-workspace__port-map-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.related-workspace__port-map-local,
.related-workspace__port-map-remote {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-workspace__port-map-local {
    color: var(--text-foreground);
    font-weight: 600;
}

.related-workspace__port-map-arrow,
.related-workspace__port-map-more {
    color: var(--text-muted);
}

.related-workspace__port-map-more {
    display: block;
    font-size: 0.72rem;
}

.related-workspace__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.75rem;
}

.related-workspace__toggle input {
    accent-color: var(--primary);
}

.related-workspace__details {
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 6px);
    background: color-mix(in oklab, var(--bg-card) 76%, var(--bg-context) 24%);
}

.related-workspace__details h4 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-foreground);
}

.related-workspace__details p {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

@media (max-width: 1100px) {
    .related-workspace__body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(340px, 1fr) minmax(240px, 40%);
    }

    .configuration-switch-editor__port-layout {
        flex-direction: column;
    }

    .configuration-switch-editor__sfp-block {
        align-self: end;
    }

    .related-workspace__aside {
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 700px) {
    .related-workspace {
        padding: 0.35rem;
    }

    .related-workspace__dialog {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .related-workspace__header,
    .related-workspace__toolbar {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}

/* Asset view rich text (prose) list + code styling */
.prose h1 {
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
    color: var(--text-foreground);
}

.prose h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    margin: 0.875rem 0 0.5rem;
    color: var(--text-foreground);
}

.prose h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 0.75rem 0 0.4rem;
    color: var(--text-foreground);
}

.prose p {
    margin: 0.35rem 0;
}

.prose ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.prose ol {
    list-style: decimal;
    padding-left: 1.25rem;
}

.prose li {
    margin: 0.25rem 0;
}

.prose pre {
    background: #0f172a;
    color: #e5e7eb;
    margin: 0.75rem 0;
    padding: 0.75rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    font-size: 0.875rem;
}

.prose pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Tag field dropdown */
/* Tag field dropdown (JS controls visibility via inline style) */

/* Dokumint WYSIWYG (dm-editor.js) formatting */
.dm-wysiwyg-area ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.dm-wysiwyg-area h1 {
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 1rem 0 0.5rem;
}

.dm-wysiwyg-area h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    margin: 0.875rem 0 0.5rem;
}

.dm-wysiwyg-area h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    margin: 0.75rem 0 0.4rem;
}

.dm-wysiwyg-area p {
    margin: 0.35rem 0;
}

.dm-wysiwyg-area ol {
    list-style: decimal;
    padding-left: 1.25rem;
}

.dm-wysiwyg-area li {
    margin: 0.25rem 0;
}

.dm-wysiwyg-area pre {
    background: #0f172a;
    color: #e5e7eb;
    margin: 0.75rem 0;
    padding: 0.75rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    font-size: 0.875rem;
}

.dm-wysiwyg-area pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.dm-wysiwyg-toolbar {
    gap: 0.25rem;
}

.help-editor-form .dm-wysiwyg {
    position: relative;
}

.help-editor-form .dm-wysiwyg-toolbar {
    position: sticky;
    top: 1rem;
    z-index: 20;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: color-mix(in oklab, var(--bg-card) 94%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px color-mix(in oklab, black 10%, transparent);
}

.help-editor-form .dm-wysiwyg-content {
    padding-top: 0.25rem;
}

.doc-block .block-actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.doc-block:hover .block-actions,
.doc-block:focus-within .block-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ProseMirror a, .doc-content.prose > a {
  @apply text-secondary no-underline cursor-pointer;
}

.sidebar-panel {
    position: relative;
    overflow: visible;
}

.sidebar-root {
    width: 14rem;
    transition: width 0.22s ease;
    min-width: 0;
}

.sidebar-root[data-state="collapsed"] {
    width: 3.5rem;
}

.sidebar-panel {
    height: 100%;
    width: 100%;
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, var(--bg-sidebar) 92%, white 8%) 0%,
            var(--bg-sidebar) 100%
        );
    border-right: 1px solid color-mix(in oklab, var(--border) 46%, transparent);
    position: relative;
    color: var(--textOnSidebar);
    box-shadow:
        inset -1px 0 0 color-mix(in oklab, var(--border) 24%, transparent),
        0 18px 36px color-mix(in oklab, black 8%, transparent);
    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        width 0.22s ease,
        transform 0.22s ease;
    min-width: 0;
}

.sidebar-panel nav {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar-panel nav::-webkit-scrollbar {
    width: 0;
    height: 0;
}

html[data-sidebar-state="collapsed"] .sidebar-root {
    width: 3.5rem;
}

html[data-sidebar-state="collapsed"] .sidebar-label,
html[data-sidebar-state="collapsed"] .sidebar-count {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

html.sidebar-preload .sidebar-root,
html.sidebar-preload .sidebar-panel,
html.sidebar-preload .sidebar-label,
html.sidebar-preload .sidebar-count {
    transition: none !important;
}

.sidebar-root[data-state="collapsed"][data-hover="1"] .sidebar-panel {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 14rem;
    z-index: 40;
    border-right-color: color-mix(in oklab, var(--border) 72%, transparent);
    box-shadow:
        0 22px 48px color-mix(in oklab, black 20%, transparent),
        0 0 0 1px color-mix(in oklab, var(--border) 38%, transparent);
    transition: 0.22s ease all;
}

/* collapsed */
.sidebar-root[data-state="collapsed"] .sidebar-label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: 0.4s ease all;
}

.sidebar-root[data-state="collapsed"][data-hover="1"] .sidebar-label {
    opacity: 1;
    width: 100%;
}

/* counts only visible when fully expanded */
.sidebar-root[data-state="collapsed"] .sidebar-count {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: 0.4s ease all;
    pointer-events: none;
}


/* keep icons and counts */
.sidebar-icon,
.sidebar-meta {
    flex-shrink: 0;
}

.sidebar-panel a,
.sidebar-panel button,
.sidebar-panel [role="button"] {
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.sidebar-panel .sidebar-item {
    position: relative;
    margin: 0.05rem 0.4rem;
    padding: 0.7rem 1rem;
    border-radius: 0.75rem;
    color: color-mix(in oklab, var(--textOnSidebar) 80%, transparent);
    background: transparent;
    border: 1px solid transparent;
    outline: none;
}

.sidebar-panel .sidebar-item:hover {
    background: color-mix(in oklab, var(--textOnSidebar) 8%, transparent);
    color: var(--textOnSidebar);
}

.sidebar-panel .sidebar-item:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 72%, transparent);
}

.sidebar-panel .sidebar-item.bg-bgprimary,
.sidebar-panel .sidebar-item.bg-bgsecondary,
.sidebar-panel .sidebar-item.text-on-primary,
.sidebar-panel .sidebar-item.text-on-secondary {
    background: color-mix(in oklab, var(--primary) 16%, transparent);
    border-color: color-mix(in oklab, var(--primary) 14%, transparent);
    color: var(--textOnSidebar);
    box-shadow: inset 2px 0 0 color-mix(in oklab, var(--primary) 58%, white 8%);
}

.sidebar-panel .sidebar-item.bg-bgprimary:hover,
.sidebar-panel .sidebar-item.bg-bgsecondary:hover,
.sidebar-panel .sidebar-item.text-on-primary:hover,
.sidebar-panel .sidebar-item.text-on-secondary:hover {
    background: color-mix(in oklab, var(--primary) 20%, transparent);
}

.sidebar-panel .sidebar-item .sidebar-icon {
    color: color-mix(in oklab, var(--textOnSidebar) 72%, transparent);
}

.sidebar-panel .sidebar-item:hover .sidebar-icon,
.sidebar-panel .sidebar-item.bg-bgprimary .sidebar-icon,
.sidebar-panel .sidebar-item.bg-bgsecondary .sidebar-icon,
.sidebar-panel .sidebar-item.text-on-primary .sidebar-icon,
.sidebar-panel .sidebar-item.text-on-secondary .sidebar-icon {
    color: var(--textOnSidebar);
}

.sidebar-panel .sidebar-label {
    min-width: 0;
}

.sidebar-panel .sidebar-count {
    color: color-mix(in oklab, var(--textOnSidebar) 48%, transparent);
    font-size: 0.72rem;
    letter-spacing: 0.01em;
}

.sidebar-panel .sidebar-count.opacity-60 {
    opacity: 0.32 !important;
}

.sidebar-panel .sidebar-item:hover .sidebar-count,
.sidebar-panel .sidebar-item.bg-bgprimary .sidebar-count,
.sidebar-panel .sidebar-item.bg-bgsecondary .sidebar-count,
.sidebar-panel .sidebar-item.text-on-primary .sidebar-count,
.sidebar-panel .sidebar-item.text-on-secondary .sidebar-count {
    color: color-mix(in oklab, var(--textOnSidebar) 72%, transparent);
}

.sidebar-heading {
    cursor: default;
    margin: 1rem 0 0.15rem;
    padding: 1rem 1rem 0.3rem;
    border-top: 1px solid color-mix(in oklab, var(--textOnSidebar) 10%, transparent);
    color: color-mix(in oklab, var(--textOnSidebar) 42%, transparent);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
}

.sidebar-heading:first-child {
    border-top-width: 0;
    margin-top: 0;
    padding-top: 0.5rem;
}

.sidebar-toggle {
    position: absolute;
    left: 0.9rem;
    bottom: 0.8rem;
    z-index: 50;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in oklab, var(--textOnSidebar) 10%, transparent);
    background: color-mix(in oklab, var(--bg-sidebar) 88%, var(--card) 12%);
    color: color-mix(in oklab, var(--textOnSidebar) 70%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, white 8%, transparent),
        0 10px 22px color-mix(in oklab, black 14%, transparent);
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.sidebar-root[data-state="collapsed"] .sidebar-toggle {
    left: 50%;
    transform: translateX(-50%);
}

.sidebar-root[data-state="expanded"] .sidebar-toggle {
    transform: none;
}

/* prevent focus styles from "sticking" on the collapse caret */
.sidebar-toggle:focus,
.sidebar-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 72%, transparent);
    background: color-mix(in oklab, var(--bg-sidebar) 88%, var(--card) 12%);
}

.sidebar-toggle:hover {
    background: color-mix(in oklab, var(--textOnSidebar) 10%, var(--bg-sidebar) 90%);
    color: var(--textOnSidebar);
}

.sidebar-toggle:active {
    background: color-mix(in oklab, var(--primary) 18%, var(--bg-sidebar) 82%);
}

.sidebar-toggle-icon {
    transition: transform 0.18s ease;
}

.sidebar-root[data-state="collapsed"] .sidebar-heading {
    border-top-color: color-mix(in oklab, var(--textOnSidebar) 8%, transparent);
}

.sidebar-root[data-state="collapsed"] .sidebar-item {
    margin-inline: 0;
}

.sidebar-root[data-state="collapsed"][data-hover="1"] .sidebar-item,
.sidebar-root[data-state="collapsed"][data-hover="1"] .sidebar-heading {
    margin-inline: 0;
}

.dark .sidebar-panel {
    box-shadow:
        inset -1px 0 0 color-mix(in oklab, white 6%, transparent),
        0 18px 36px color-mix(in oklab, black 32%, transparent);
}

.dark .sidebar-root[data-state="collapsed"][data-hover="1"] .sidebar-panel {
    box-shadow:
        0 24px 56px color-mix(in oklab, black 42%, transparent),
        0 0 0 1px color-mix(in oklab, white 6%, transparent);
}

/* Dashboard surfaces */
#dashboard-view {
    --dash-surface-1: var(--card);
    --dash-surface-2: color-mix(in oklab, var(--card) 88%, var(--card2) 12%);
    --dash-surface-3: color-mix(in oklab, var(--card2) 82%, var(--card3) 18%);
    --dash-border-soft: color-mix(in oklab, var(--border) 68%, transparent);
    --dash-border-strong: color-mix(in oklab, var(--border) 90%, transparent);
    --dash-shadow-ambient: color-mix(in oklab, var(--foreground) 16%, transparent);
    --dash-shadow-key: color-mix(in oklab, var(--foreground) 10%, transparent);
    --dash-highlight: color-mix(in oklab, white 34%, transparent);
}

.dark #dashboard-view {
    --dash-surface-1: var(--card);
    --dash-surface-2: color-mix(in oklab, var(--card) 74%, var(--card2) 26%);
    --dash-surface-3: color-mix(in oklab, var(--card2) 70%, var(--card3) 30%);
    --dash-border-soft: color-mix(in oklab, var(--border) 84%, transparent);
    --dash-border-strong: color-mix(in oklab, var(--border) 100%, transparent);
    --dash-shadow-ambient: rgb(0 0 0 / 0.42);
    --dash-shadow-key: rgb(0 0 0 / 0.30);
    --dash-highlight: rgb(255 255 255 / 0.05);
}

.dashboard-hero {
    background:
        radial-gradient(circle at 10% 16%, color-mix(in oklab, var(--primary) 8%, transparent), transparent 26%),
        radial-gradient(circle at 88% 8%, color-mix(in oklab, var(--secondary) 7%, transparent), transparent 24%),
        linear-gradient(180deg,
            color-mix(in oklab, var(--dash-surface-1) 88%, var(--primary) 12%),
            color-mix(in oklab, var(--dash-surface-1) 94%, var(--dash-surface-2) 6%));
    box-shadow:
        0 28px 42px -34px var(--dash-shadow-ambient),
        0 10px 18px -16px var(--dash-shadow-key),
        inset 0 1px 0 var(--dash-highlight);
}

.dashboard-hero__eyebrow {
    display: inline-flex;
    margin-bottom: 0.8rem;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--dash-border-soft);
    background: color-mix(in oklab, var(--dash-surface-1) 86%, var(--dash-surface-2) 14%);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.dashboard-panel {
    border-color: var(--dash-border-soft) !important;
    background: var(--dash-surface-1) !important;
    box-shadow:
        0 28px 40px -34px var(--dash-shadow-ambient),
        0 14px 22px -20px var(--dash-shadow-key),
        inset 0 1px 0 var(--dash-highlight);
}

.dashboard-panel--priority {
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--dash-surface-1) 90%, var(--warn) 10%),
            color-mix(in oklab, var(--dash-surface-1) 96%, var(--dash-surface-2) 4%)) !important;
    border-color: color-mix(in oklab, var(--warn) 16%, var(--dash-border-strong) 84%) !important;
}

.dashboard-panel__title {
    color: color-mix(in oklab, var(--foreground) 78%, var(--primary) 22%);
    letter-spacing: 0.16em;
}

.dashboard-panel__action {
    font-weight: 500;
}

.dashboard-panel__grip {
    color: var(--text-muted);
    opacity: 0.7;
}

.dashboard-panel__resize {
    opacity: 0.18;
}

.dashboard-panel__content {
    padding: 0;
}

.dashboard-list-skeleton {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--dash-border-soft);
    border-radius: 1rem;
    background: var(--dash-surface-2);
    overflow: hidden;
}

.dashboard-list-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in oklab, var(--dash-surface-1) 86%, white 14%) 48%,
        transparent 100%
    );
    animation: dashboard-skeleton-shimmer 1.35s infinite;
}

.dashboard-list-skeleton__body {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.45rem;
}

.dashboard-list-skeleton__icon,
.dashboard-list-skeleton__line,
.dashboard-list-skeleton__time {
    position: relative;
    z-index: 1;
    display: block;
    background: color-mix(in oklab, var(--dash-surface-1) 38%, var(--dash-surface-3) 62%);
}

.dashboard-list-skeleton__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    flex: 0 0 auto;
}

.dashboard-list-skeleton__line {
    border-radius: 999px;
}

.dashboard-list-skeleton__line--title {
    width: min(62%, 15rem);
    height: 0.8rem;
}

.dashboard-list-skeleton__line--meta {
    width: min(38%, 10rem);
    height: 0.6rem;
}

.dashboard-list-skeleton__time {
    width: 2.75rem;
    height: 0.6rem;
    border-radius: 999px;
    flex: 0 0 auto;
    align-self: center;
}

@keyframes dashboard-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-list-skeleton::after {
        animation: none;
    }
}

.dashboard-quick-link {
    border-radius: 1rem;
    border-color: var(--dash-border-soft);
    background: var(--dash-surface-2);
    box-shadow:
        0 12px 18px -18px var(--dash-shadow-ambient),
        0 4px 8px -6px var(--dash-shadow-key),
        inset 0 1px 0 var(--dash-highlight);
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.dashboard-quick-link:hover {
    transform: translateY(-1px);
    background: color-mix(in oklab, var(--dash-surface-2) 82%, var(--dash-surface-1) 18%) !important;
    border-color: color-mix(in oklab, var(--primary) 22%, var(--dash-border-strong) 78%) !important;
}

.dashboard-quick-link__path {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.78rem;
}

.dashboard-quick-link:hover .dashboard-quick-link__path {
    color: var(--text);
}

#dashboard-view #recent-customers > a,
#dashboard-view #recent-records > a,
#dashboard-view #recent-assets > a,
#dashboard-view #upcoming-expiries > a,
#dashboard-view #favourites > a {
    border-radius: 1rem;
    border-color: var(--dash-border-soft);
    background: var(--dash-surface-2);
    box-shadow:
        0 12px 18px -18px var(--dash-shadow-ambient),
        0 4px 8px -6px var(--dash-shadow-key),
        inset 0 1px 0 var(--dash-highlight);
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

#dashboard-view #recent-customers > a:hover,
#dashboard-view #recent-records > a:hover,
#dashboard-view #recent-assets > a:hover,
#dashboard-view #upcoming-expiries > a:hover,
#dashboard-view #favourites > a:hover {
    transform: translateY(-1px);
    background: color-mix(in oklab, var(--dash-surface-2) 82%, var(--dash-surface-1) 18%);
    border-color: color-mix(in oklab, var(--primary) 22%, var(--dash-border-strong) 78%);
}

#dashboard-view #recent-customers > a:hover .text-muted-foreground,
#dashboard-view #recent-records > a:hover .text-muted-foreground,
#dashboard-view #recent-assets > a:hover .text-muted-foreground,
#dashboard-view #upcoming-expiries > a:hover .text-muted-foreground,
#dashboard-view #favourites > a:hover .text-muted-foreground {
    color: var(--text);
}

.dashboard-record-row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) max-content;
    max-width: 100%;
    min-width: 0;
}

.dashboard-record-row__icon,
.dashboard-record-row__body,
.dashboard-record-row__updated {
    min-width: 0;
}

.dashboard-record-row__title,
.dashboard-record-row__meta {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-record-row__updated {
    justify-self: end;
}

@media (min-width: 1024px) {
    .record-panel-shell {
        background:
            linear-gradient(180deg,
                color-mix(in oklab, var(--card2) 88%, var(--card) 12%),
                color-mix(in oklab, var(--card2) 94%, var(--card3) 6%));
        box-shadow:
            inset 1px 0 0 color-mix(in oklab, var(--border) 72%, transparent),
            -18px 0 36px -30px color-mix(in oklab, var(--foreground) 16%, transparent);
    }

    .record-workspace > [data-record-panel] {
        width: 23.75rem;
        min-width: 3.5rem;
        transition: width 0.4s ease;
        overflow: hidden;
    }

    .record-panel-header {
        min-height: 3.5rem;
        padding-right: 0.75rem;
        border-bottom: 1px solid color-mix(in oklab, var(--border) 74%, transparent);
        background: color-mix(in oklab, var(--card) 76%, var(--card2) 24%);
    }

    .record-panel-collapse {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 9999px;
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--foreground);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background-color 0.2s ease;
    }

    .record-panel-collapse:hover {
        background: var(--bgsecondary);
    }

    .record-panel-close {
        width: 1.9rem;
        height: 1.9rem;
        border-radius: 9999px;
        border: 1px solid var(--border);
        background: color-mix(in oklab, var(--card) 88%, var(--card2) 12%);
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .record-panel-close:hover {
        color: var(--text-foreground);
        background: color-mix(in oklab, var(--card) 72%, var(--note-info) 28%);
        border-color: color-mix(in oklab, var(--primary) 24%, var(--border) 76%);
    }

    .record-panel-tabs {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.25rem;
        border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
        border-radius: 999px;
        background: color-mix(in oklab, var(--card) 84%, var(--card2) 16%);
        box-shadow: inset 0 1px 0 color-mix(in oklab, white 42%, transparent);
    }

    .record-panel-tab {
        border: 1px solid transparent;
        font-weight: 600;
        color: var(--text-muted);
        background: transparent !important;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    .record-panel-tab:hover {
        color: var(--text-foreground);
        background: color-mix(in oklab, var(--card) 64%, var(--note-info) 36%) !important;
        border-color: color-mix(in oklab, var(--primary) 18%, transparent);
    }

    .record-panel-tab.is-active,
    .record-panel-tab[aria-selected="true"],
    .record-panel-tab[aria-pressed="true"] {
        color: var(--text-on-primary);
        background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 84%, white 16%), var(--primary)) !important;
        border-color: color-mix(in oklab, var(--primary) 78%, transparent);
        box-shadow: 0 8px 16px -10px color-mix(in oklab, var(--primary) 36%, transparent);
    }

    .record-panel-collapse-icon {
        display: inline-flex;
        transition: transform 0.3s ease;
    }

    .record-panel-body {
        background:
            linear-gradient(180deg,
                color-mix(in oklab, var(--card2) 92%, var(--card) 8%),
                color-mix(in oklab, var(--card2) 96%, var(--background) 4%));
    }

    .record-panel-section {
        position: relative;
        gap: 0.9rem;
    }

    .record-panel-note {
        border-color: color-mix(in oklab, var(--border) 78%, transparent) !important;
        background: color-mix(in oklab, var(--card) 86%, var(--card2) 14%) !important;
        box-shadow: inset 0 1px 0 color-mix(in oklab, white 40%, transparent);
    }

    .record-panel-control-group {
        position: relative;
        padding: 0.75rem;
        border: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
        border-radius: 0.5rem;
        background:
            linear-gradient(180deg,
                color-mix(in oklab, var(--card) 88%, var(--card2) 12%),
                color-mix(in oklab, var(--card) 80%, var(--field) 20%));
        box-shadow:
            0 14px 28px -26px color-mix(in oklab, var(--foreground) 18%, transparent),
            inset 0 1px 0 color-mix(in oklab, white 34%, transparent);
    }

    .record-panel-control-group__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 2rem;
    }

    .record-panel-control-group__title {
        color: var(--text-muted);
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .record-panel-control-group:has(.record-panel-transfer-popover:not(.hidden))::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 10;
        border-radius: 0.5rem;
        background: color-mix(in oklab, var(--text) 60%, transparent);
        pointer-events: none;
        animation: recordPanelDimIn 0.4s ease both;
    }

    .record-panel-section:has(.record-panel-transfer-popover:not(.hidden))::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 20;
        border-radius: 0.5rem;
        background: color-mix(in oklab, var(--text) 60%, transparent);
        pointer-events: none;
        animation: recordPanelDimIn 0.4s ease both;
    }

    .record-panel-transfer-popover {
        position: absolute;
        top: 3.5rem;
        right: 0.75rem;
        left: 0.75rem;
        z-index: 40;
        max-height: min(30rem, calc(100vh - 11rem));
        overflow-y: auto;
        border-color: color-mix(in oklab, var(--primary) 20%, var(--border) 80%) !important;
        background: color-mix(in oklab, var(--card) 96%, var(--field) 4%) !important;
        box-shadow:
            0 28px 56px -22px color-mix(in oklab, var(--foreground) 44%, transparent),
            0 0 0 999px color-mix(in oklab, var(--card2) 34%, transparent),
            0 0 0 1px color-mix(in oklab, white 24%, transparent) inset;
        animation: recordPanelPopoverIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    @keyframes recordPanelPopoverIn {
        from {
            opacity: 0;
            transform: translateY(-0.35rem) scale(0.985);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes recordPanelDimIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .record-panel-icon-btn {
        border: 1px solid color-mix(in oklab, var(--primary) 18%, transparent);
        background: color-mix(in oklab, var(--primary) 82%, var(--card) 18%) !important;
        color: var(--text-on-primary);
        box-shadow: 0 8px 16px -12px color-mix(in oklab, var(--primary) 36%, transparent);
    }

    .record-panel-results {
        border-color: color-mix(in oklab, var(--border) 78%, transparent) !important;
        background: color-mix(in oklab, var(--card) 92%, var(--card2) 8%) !important;
        box-shadow:
            0 20px 34px -28px color-mix(in oklab, var(--foreground) 18%, transparent),
            inset 0 1px 0 color-mix(in oklab, white 34%, transparent);
    }

    .record-panel-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .record-panel-action {
        min-height: 2rem;
        padding: 0.45rem 0.8rem;
        border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
        border-radius: 999px;
        font-weight: 600;
        background: color-mix(in oklab, var(--card) 88%, var(--card2) 12%) !important;
        color: var(--text-foreground) !important;
        box-shadow: inset 0 1px 0 color-mix(in oklab, white 30%, transparent);
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    .record-panel-action:hover {
        background: color-mix(in oklab, var(--card) 72%, var(--note-info) 28%) !important;
        border-color: color-mix(in oklab, var(--primary) 22%, var(--border) 78%);
    }

    .record-panel-action--primary {
        border-color: color-mix(in oklab, var(--primary) 26%, transparent);
        background: color-mix(in oklab, var(--primary) 84%, var(--card) 16%) !important;
        color: var(--text-on-primary) !important;
        box-shadow: 0 10px 18px -14px color-mix(in oklab, var(--primary) 42%, transparent);
    }

    .record-panel-action--primary:hover {
        border-color: color-mix(in oklab, var(--primary) 74%, var(--border) 26%) !important;
        background: color-mix(in oklab, var(--primary) 92%, var(--card) 8%) !important;
        color: var(--text-on-primary) !important;
    }

    .record-panel-dropzone {
        border-color: color-mix(in oklab, var(--border) 74%, transparent) !important;
        background: color-mix(in oklab, var(--field) 78%, var(--card) 22%) !important;
    }

    #related-items-list > .italic,
    #embedded-passwords > .italic,
    #attachments-list > .italic,
    #revisions-list > .italic {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 5rem;
        border: 1px dashed color-mix(in oklab, var(--border) 56%, transparent);
        border-radius: 1rem;
        background: color-mix(in oklab, var(--card) 90%, var(--background) 10%);
        color: var(--text-muted) !important;
    }

    .record-panel-collapsed-nav {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        padding: 0.25rem 0.25rem 0.75rem;
    }

    .record-panel-collapsed-pill {
        width: 100%;
        border: 1px solid transparent;
        border-radius: 0.5rem;
        padding: 0.35rem 0.15rem 0.3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        color: var(--text-muted);
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .record-panel-collapsed-pill:hover {
        background: var(--bgsecondary);
        border-color: var(--border);
        color: var(--foreground);
    }

    .record-panel-collapsed-pill.is-active {
        background: var(--bgactive);
        border-color: var(--bgactive);
        color: var(--light);
    }

    .record-panel-collapsed-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
    }

    .record-panel-collapsed-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.35rem;
        height: 1.35rem;
        border-radius: 9999px;
        background: var(--bgsecondary);
        color: var(--foreground);
        font-size: 0.72rem;
        line-height: 1;
        font-weight: 600;
        padding: 0 0.3rem;
    }

    .record-panel-collapsed-pill.is-active .record-panel-collapsed-count {
        background: rgba(255, 255, 255, 0.2);
        color: var(--light);
    }

    .record-workspace > [data-record-panel][data-state="collapsed"] {
        width: 3.5rem;
    }

    .record-workspace > [data-record-panel][data-state="collapsed"] .record-panel-tabs,
    .record-workspace > [data-record-panel][data-state="collapsed"] .record-panel-body {
        opacity: 0;
        width: 0;
        pointer-events: none;
        overflow: hidden;
    }

    .record-workspace > [data-record-panel][data-state="collapsed"] .record-panel-collapsed-nav {
        display: flex;
    }

    .record-workspace > [data-record-panel][data-state="collapsed"] .record-panel-header {
        justify-content: center;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .record-workspace > [data-record-panel][data-state="expanded"] .record-panel-collapse-icon {
        transform: rotate(180deg);
    }

    html[data-record-panel-state="collapsed"] .record-workspace > [data-record-panel] {
        width: 3.5rem;
    }

    html[data-record-panel-state="collapsed"] .record-workspace > [data-record-panel] .record-panel-tabs,
    html[data-record-panel-state="collapsed"] .record-workspace > [data-record-panel] .record-panel-body {
        opacity: 0;
        width: 0;
        pointer-events: none;
        overflow: hidden;
    }

    html[data-record-panel-state="collapsed"] .record-workspace > [data-record-panel] .record-panel-collapsed-nav {
        display: flex;
    }

    html[data-record-panel-state="collapsed"] .record-workspace > [data-record-panel] .record-panel-header {
        justify-content: center;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    html[data-record-panel-state="expanded"] .record-workspace > [data-record-panel] .record-panel-collapse-icon {
        transform: rotate(180deg);
    }

    html[data-record-panel-state="collapsed"] .record-workspace > [data-record-panel] .record-panel-collapse-icon {
        transform: rotate(0deg);
    }

    html.record-panel-preload .record-workspace > [data-record-panel],
    html.record-panel-preload .record-panel-tabs,
    html.record-panel-preload .record-panel-body,
    html.record-panel-preload .record-panel-collapse-icon {
        transition: none !important;
    }
}

/* ============================================================
   Read-only document content (override Tailwind preflight)
============================================================ */

#doc-content.dk-record-card {
    padding: 1rem 1.15rem;
}

#doc-content .doc-content > :first-child {
    margin-top: 0;
}

#doc-content .doc-content > :last-child {
    margin-bottom: 0;
}

#doc-content .doc-content ul {
    list-style-type: disc !important;
    list-style-position: outside;
    margin: 0.75rem 0 0.75rem 1.5rem;
    padding-left: 1.5rem;
}

#doc-content .doc-content ol {
    list-style-type: decimal !important;
    list-style-position: outside;
    margin: 0.75rem 0 0.75rem 1.5rem;
    padding-left: 1.5rem;
}

#doc-content .doc-content li {
    display: list-item;
    margin: 0.25rem 0;
}

#doc-content .doc-content p {
    margin: 0.5rem 0;
}

#doc-content .doc-content h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0.75rem 0 0.5rem;
    font-weight: 600;
}

#doc-content .doc-content h2 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0.7rem 0 0.45rem;
    font-weight: 600;
}

#doc-content .doc-content h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0.6rem 0 0.4rem;
    font-weight: 600;
}

#doc-content .doc-content h4 {
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 0.5rem 0 0.35rem;
    font-weight: 600;
}

#doc-content .doc-content img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0.5rem 0;
}

#doc-content .doc-content table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0.75rem 0;
    background: color-mix(in oklab, var(--field) 82%, var(--card) 18%);
    border: 1px solid var(--border);
}

#doc-content .doc-content th,
#doc-content .doc-content td {
    min-width: 4rem;
    height: 2.4rem;
    border: 0;
    border-right: 1px solid color-mix(in oklab, var(--border) 62%, var(--textMuted) 38%);
    border-bottom: 1px solid color-mix(in oklab, var(--border) 62%, var(--textMuted) 38%);
    padding: 0.55rem 0.65rem;
    vertical-align: top;
    background: var(--field);
}

#doc-content .doc-content tr:first-child > th,
#doc-content .doc-content tr:first-child > td {
    border-top: 1px solid color-mix(in oklab, var(--border) 62%, var(--textMuted) 38%);
}

#doc-content .doc-content tr > th:first-child,
#doc-content .doc-content tr > td:first-child {
    border-left: 1px solid color-mix(in oklab, var(--border) 62%, var(--textMuted) 38%);
}

.dark #doc-content .doc-content th,
.dark #doc-content .doc-content td {
    border-right-color: var(--textMuted);
    border-bottom-color: var(--textMuted);
}

.dark #doc-content .doc-content tr:first-child > th,
.dark #doc-content .doc-content tr:first-child > td {
    border-top-color: var(--textMuted);
}

.dark #doc-content .doc-content tr > th:first-child,
.dark #doc-content .doc-content tr > td:first-child {
    border-left-color: var(--textMuted);
}

#doc-content .doc-content th {
    background: color-mix(in oklab, var(--card2) 82%, var(--secondary) 18%);
    font-weight: 600;
}

#doc-content .doc-content .dm-step {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0.6rem 0;
}

#doc-content .doc-content .dm-step-meta-view {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 6px;
}

#doc-content .doc-content .dm-step-title {
    font-weight: 600;
    color: #111827;
}

#doc-content .doc-content .dm-step-total-view {
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
}

#doc-content > .dm-step-total-view {
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
}

#icon-preview svg{
    width: 32px;
    height: 32px;
}

/* ============================================================
   Shared Dashboard + Record View Surfaces
============================================================ */

#customer-view {
    --cv-surface-1: var(--card);
    --cv-surface-2: color-mix(in oklab, var(--card) 86%, var(--card2) 14%);
    --cv-surface-3: color-mix(in oklab, var(--card2) 82%, var(--card3) 18%);
    --cv-border-soft: color-mix(in oklab, var(--border) 68%, transparent);
    --cv-border-strong: color-mix(in oklab, var(--border) 92%, transparent);
    --cv-shadow-ambient: color-mix(in oklab, var(--foreground) 22%, transparent);
    --cv-shadow-key: color-mix(in oklab, var(--foreground) 15%, transparent);
    --cv-highlight: color-mix(in oklab, var(--foreground) 6%, transparent);
    position: relative;
    background: transparent;
}

.dark #customer-view {
    --cv-surface-1: var(--card);
    --cv-surface-2: color-mix(in oklab, var(--card) 74%, var(--card2) 26%);
    --cv-surface-3: color-mix(in oklab, var(--card2) 70%, var(--card3) 30%);
    --cv-border-soft: color-mix(in oklab, var(--border) 82%, transparent);
    --cv-border-strong: color-mix(in oklab, var(--border) 100%, transparent);
    --cv-shadow-ambient: rgb(0 0 0 / 0.44);
    --cv-shadow-key: rgb(0 0 0 / 0.34);
    --cv-highlight: rgb(255 255 255 / 0.045);
}

#customer-view::before {
    content: none;
}

#customer-view > * {
    position: relative;
    z-index: 1;
}

.customer-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--cv-border-soft);
    background: var(--cv-surface-1);
    color: color-mix(in oklab, var(--foreground) 84%, var(--primary) 16%);
    box-shadow:
        0 12px 24px -24px var(--cv-shadow-ambient),
        inset 0 1px 0 var(--cv-highlight);
    backdrop-filter: blur(10px);
}

.customer-hero {
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--cv-surface-1) 88%, var(--primary) 12%),
            var(--cv-surface-1) 42%,
            color-mix(in oklab, var(--cv-surface-1) 84%, var(--cv-surface-2) 16%));
    border-color: var(--cv-border-soft);
    box-shadow:
        0 30px 54px -38px var(--cv-shadow-ambient),
        0 12px 22px -18px var(--cv-shadow-key),
        inset 0 1px 0 var(--cv-highlight);
}

.customer-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--primary) 7%, transparent), transparent 24%),
        radial-gradient(circle at 88% 8%, color-mix(in oklab, var(--secondary) 6%, transparent), transparent 20%),
        linear-gradient(180deg, color-mix(in oklab, white 24%, transparent), transparent 42%);
    pointer-events: none;
}

.dark #customer-view .customer-hero::before {
    background:
        radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--primary) 6%, transparent), transparent 24%),
        radial-gradient(circle at 88% 8%, color-mix(in oklab, var(--secondary) 5%, transparent), transparent 20%),
        linear-gradient(180deg, rgb(255 255 255 / 0.14), transparent 38%);
}

.customer-hero-stat {
    border: 1px solid var(--cv-border-soft);
    background: color-mix(in oklab, var(--cv-surface-1) 84%, var(--cv-surface-2) 16%);
    box-shadow:
        0 16px 24px -24px var(--cv-shadow-ambient),
        inset 0 1px 0 var(--cv-highlight);
}

.customer-hero-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.6rem;
    padding: 0.72rem 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--cv-border-soft);
    background: color-mix(in oklab, var(--cv-surface-1) 84%, var(--cv-surface-2) 16%);
    color: var(--foreground);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    box-shadow:
        0 16px 24px -24px var(--cv-shadow-ambient),
        inset 0 1px 0 var(--cv-highlight);
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, color 160ms ease;
}

.customer-hero-action:hover {
    transform: translateY(-1px);
    background: color-mix(in oklab, var(--cv-surface-2) 86%, var(--cv-surface-1) 14%);
}

.customer-hero-action--wide {
    min-width: 8.9rem;
}

.customer-hero-action--danger {
    min-height: 3.6rem;
    min-width: 7.25rem;
    padding-inline: 1.1rem;
    color: var(--bad);
    border-color: color-mix(in oklab, var(--bad) 20%, var(--cv-border-soft) 80%);
    background: color-mix(in oklab, var(--bad) 8%, var(--cv-surface-1) 92%);
}

.customer-hero-action--danger:hover {
    background: color-mix(in oklab, var(--bad) 14%, var(--cv-surface-1) 86%);
    border-color: color-mix(in oklab, var(--bad) 28%, var(--cv-border-soft) 72%);
}

.customer-panel {
    border: 1px solid var(--cv-border-soft);
    background: var(--cv-surface-1);
    box-shadow:
        0 30px 44px -32px var(--cv-shadow-ambient),
        0 16px 24px -18px var(--cv-shadow-key),
        0 6px 10px -7px var(--cv-shadow-key),
        inset 0 1px 0 var(--cv-highlight);
}

.customer-panel--soft {
    background: color-mix(in oklab, var(--cv-surface-1) 96%, var(--cv-surface-2) 4%);
}

.customer-panel-heading {
    letter-spacing: 0.18em;
}

.customer-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--cv-border-soft);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    background: color-mix(in oklab, var(--cv-surface-1) 92%, var(--cv-surface-2) 8%);
    color: var(--foreground);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.customer-section-toggle:hover {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--primary) 24%, var(--cv-border-soft) 76%);
    background: color-mix(in oklab, var(--cv-surface-1) 82%, var(--cv-surface-2) 18%);
}

.customer-section-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 180ms ease;
}

.customer-section-toggle[aria-expanded="false"] .customer-section-toggle__icon {
    transform: rotate(-90deg);
}

.customer-metric-card {
    display: block;
    padding: 1rem 1rem 1.05rem;
    border-radius: 1.25rem;
    border: 1px solid var(--cv-border-soft);
    background: var(--cv-surface-1);
    box-shadow:
        0 22px 34px -28px var(--cv-shadow-ambient),
        0 10px 16px -12px var(--cv-shadow-key),
        0 3px 6px -4px var(--cv-shadow-key),
        inset 0 1px 0 var(--cv-highlight);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.customer-metric-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 26px 38px -24px var(--cv-shadow-ambient),
        0 14px 20px -12px var(--cv-shadow-key),
        0 5px 10px -6px var(--cv-shadow-key),
        inset 0 1px 0 var(--cv-highlight);
}

.customer-metric-card__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.customer-metric-card__value {
    margin-top: 0.75rem;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    color: var(--foreground);
}

.customer-metric-card--primary {
    background: color-mix(in oklab, var(--primary) 7%, var(--cv-surface-1) 93%);
    border-color: color-mix(in oklab, var(--primary) 18%, var(--cv-border-strong) 82%);
}

.customer-metric-card--warning {
    background: color-mix(in oklab, var(--warn) 8%, var(--cv-surface-1) 92%);
    border-color: color-mix(in oklab, var(--warn) 18%, var(--cv-border-strong) 82%);
}

.customer-metric-card--danger {
    background: color-mix(in oklab, var(--bad) 4%, var(--cv-surface-1) 96%);
    border-color: color-mix(in oklab, var(--bad) 8%, var(--cv-border-soft) 92%);
}

.customer-metric-card--info {
    background: color-mix(in oklab, var(--secondary) 7%, var(--cv-surface-1) 93%);
    border-color: color-mix(in oklab, var(--secondary) 16%, var(--cv-border-strong) 84%);
}

.customer-metric-card--neutral {
    background: color-mix(in oklab, var(--card) 92%, var(--cv-surface-2) 8%);
    border-color: color-mix(in oklab, var(--border) 72%, var(--cv-border-soft) 28%);
}

.customer-status-note {
    border: 1px dashed color-mix(in oklab, var(--border) 48%, transparent);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: color-mix(in oklab, var(--card) 92%, var(--background) 8%);
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.customer-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--cv-border-soft);
    border-radius: 1rem;
    background: var(--cv-surface-2);
    box-shadow:
        0 12px 18px -18px var(--cv-shadow-ambient),
        0 4px 8px -6px var(--cv-shadow-key),
        inset 0 1px 0 var(--cv-highlight);
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.customer-list-item:hover {
    transform: translateY(-1px);
    background: color-mix(in oklab, var(--cv-surface-2) 84%, var(--cv-surface-1) 16%);
    border-color: color-mix(in oklab, var(--primary) 24%, var(--border) 76%);
}

.customer-snapshot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--cv-border-soft);
    border-radius: 1rem;
    background: var(--cv-surface-2);
    box-shadow:
        0 12px 18px -18px var(--cv-shadow-ambient),
        0 4px 8px -6px var(--cv-shadow-key),
        inset 0 1px 0 var(--cv-highlight);
}

.customer-snapshot-row__main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.customer-snapshot-row__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 999px;
}

.customer-snapshot-row--interactive {
    color: inherit;
    text-decoration: none;
    transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.customer-snapshot-row--interactive:hover,
.customer-snapshot-row--interactive:focus-visible {
    transform: translateY(-1px);
    background: color-mix(in oklab, var(--cv-surface-2) 80%, var(--cv-surface-1) 20%);
    border-color: color-mix(in oklab, var(--primary) 24%, var(--cv-border-soft) 76%);
    box-shadow:
        0 18px 26px -24px var(--cv-shadow-ambient),
        0 8px 14px -10px var(--cv-shadow-key),
        inset 0 1px 0 var(--cv-highlight);
}

.customer-snapshot-row__value {
    min-width: 2.5rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--foreground) 8%, transparent);
    color: var(--foreground);
    font-weight: 700;
    text-align: center;
}

.dk-record-page {
    --drv-surface-1: var(--card);
    --drv-surface-2: color-mix(in oklab, var(--card) 90%, var(--card2) 10%);
    --drv-surface-3: color-mix(in oklab, var(--card2) 86%, var(--card3) 14%);
    --drv-border-soft: color-mix(in oklab, var(--border) 68%, transparent);
    --drv-border-strong: color-mix(in oklab, var(--border) 90%, transparent);
    --drv-shadow-ambient: color-mix(in oklab, var(--foreground) 18%, transparent);
    --drv-shadow-key: color-mix(in oklab, var(--foreground) 12%, transparent);
    --drv-highlight: color-mix(in oklab, var(--foreground) 6%, transparent);
}

.dark .dk-record-page {
    --drv-surface-1: var(--card);
    --drv-surface-2: color-mix(in oklab, var(--card) 76%, var(--card2) 24%);
    --drv-surface-3: color-mix(in oklab, var(--card2) 72%, var(--card3) 28%);
    --drv-border-soft: color-mix(in oklab, var(--border) 84%, transparent);
    --drv-border-strong: color-mix(in oklab, var(--border) 100%, transparent);
    --drv-shadow-ambient: rgb(0 0 0 / 0.42);
    --drv-shadow-key: rgb(0 0 0 / 0.30);
    --drv-highlight: rgb(255 255 255 / 0.045);
}

.dk-record-main-header {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

.dk-record-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--drv-border-soft);
    border-radius: 1.5rem;
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--drv-surface-1) 92%, var(--primary) 8%),
            color-mix(in oklab, var(--drv-surface-1) 86%, var(--drv-surface-2) 14%));
    box-shadow:
        0 26px 40px -32px var(--drv-shadow-ambient),
        0 10px 18px -14px var(--drv-shadow-key),
        inset 0 1px 0 var(--drv-highlight);
}

.dk-record-heading__title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.dk-record-heading__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    border: 1px solid var(--drv-border-soft);
    background: color-mix(in oklab, var(--drv-surface-1) 86%, var(--drv-surface-2) 14%);
    box-shadow: inset 0 1px 0 var(--drv-highlight);
    flex-shrink: 0;
}

.dk-record-heading__meta {
    min-width: 0;
}

.dk-record-heading__meta h1 {
    line-height: 1.1;
}

.dk-record-heading__meta p {
    margin-top: 0.35rem;
}

.dk-record-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.dk-record-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 0.92rem;
    border-radius: 999px;
    border: 1px solid var(--drv-border-soft, var(--border));
    background: color-mix(
        in oklab,
        var(--drv-surface-1, var(--card)) 86%,
        var(--drv-surface-2, var(--card2)) 14%
    );
    color: var(--foreground, var(--text-foreground));
    box-shadow: inset 0 1px 0 var(--drv-highlight, color-mix(in oklab, var(--text-foreground) 6%, transparent));
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.dk-record-btn:hover {
    transform: translateY(-1px);
    background: color-mix(
        in oklab,
        var(--drv-surface-2, var(--card2)) 88%,
        var(--drv-surface-1, var(--card)) 12%
    );
}

.dk-record-btn--primary {
    background: color-mix(in oklab, var(--secondary) 14%, var(--drv-surface-1, var(--card)) 86%);
    border-color: color-mix(in oklab, var(--secondary) 20%, var(--drv-border-strong, var(--border)) 80%);
}

.dk-record-btn--danger {
    background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--bg-destructive) 68%, var(--card) 32%),
        color-mix(in oklab, var(--bg-destructive) 82%, var(--card) 18%)
    );
    border-color: color-mix(in oklab, var(--bg-destructive) 52%, var(--border) 48%);
    color: var(--text-on-destructive);
    box-shadow:
        inset 0 1px 0 color-mix(in oklab, white 18%, transparent),
        0 8px 16px -14px color-mix(in oklab, var(--bg-destructive) 26%, transparent);
}

.dk-record-btn--danger:hover {
    transform: translateY(-1px);
    background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--bg-destructive) 74%, var(--card) 26%),
        color-mix(in oklab, var(--bg-destructive) 88%, var(--card) 12%)
    );
    border-color: color-mix(in oklab, var(--bg-destructive) 60%, var(--border) 40%);
}

.dk-record-btn--compact {
    min-height: 2rem;
    padding: 0.4rem 0.72rem;
    font-size: 0.78rem;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 var(--drv-highlight, color-mix(in oklab, var(--text-foreground) 6%, transparent));
}

.dk-record-view {
    display: grid;
    gap: 1rem;
}

.dk-record-stack {
    display: grid;
    gap: 1rem;
}

.dk-record-columns {
    display: grid;
    gap: 1rem;
}

.dk-record-control {
    width: 100%;
    min-height: 2.6rem;
    padding: 0.62rem 0.9rem;
    border: 1px solid var(--drv-border-soft);
    border-radius: 0.95rem;
    background: color-mix(in oklab, var(--drv-surface-2) 88%, var(--drv-surface-1) 12%);
    color: var(--foreground);
    box-shadow: inset 0 1px 0 var(--drv-highlight);
}

.dk-record-control[readonly] {
    opacity: 1;
}

.dk-record-control::placeholder {
    color: var(--muted);
}

.dk-record-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    flex: 0 0 2.5rem;
    border-radius: 0.95rem;
    border: 1px solid var(--drv-border-soft, var(--border));
    background: color-mix(
        in oklab,
        var(--drv-surface-2, var(--card2)) 88%,
        var(--drv-surface-1, var(--card)) 12%
    );
    color: var(--foreground, var(--text-foreground));
    box-shadow: inset 0 1px 0 var(--drv-highlight, color-mix(in oklab, var(--text-foreground) 6%, transparent));
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.dk-record-icon-btn:hover {
    transform: translateY(-1px);
    background: color-mix(
        in oklab,
        var(--drv-surface-2, var(--card2)) 76%,
        var(--secondary) 24%
    );
}

.dk-record-icon-btn--danger {
    border-color: color-mix(in oklab, var(--bg-destructive) 22%, var(--border) 78%);
    background: color-mix(in oklab, var(--bg-destructive) 10%, var(--card) 90%);
    color: var(--bg-destructive);
}

.dk-record-icon-btn--danger:hover {
    transform: translateY(-1px);
    background: color-mix(in oklab, var(--bg-destructive) 18%, var(--card) 82%);
    border-color: color-mix(in oklab, var(--bg-destructive) 34%, var(--border) 66%);
}

.dk-record-mini-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.dk-record-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--drv-border-soft, var(--border));
    background: color-mix(
        in oklab,
        var(--drv-surface-2, var(--card2)) 90%,
        var(--drv-surface-1, var(--card)) 10%
    );
    color: var(--foreground, var(--text-foreground));
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.1;
}

.dk-record-chip.hidden,
.dk-record-chip[hidden] {
    display: none;
}

.dk-record-chip--danger {
    background: color-mix(in oklab, var(--bad) 12%, var(--drv-surface-1, var(--card)) 88%);
    border-color: color-mix(in oklab, var(--bad) 24%, var(--drv-border-strong, var(--border)) 76%);
}

.dk-record-chip--warning {
    background: color-mix(in oklab, var(--warn) 14%, var(--drv-surface-1, var(--card)) 86%);
    border-color: color-mix(in oklab, var(--warn) 24%, var(--drv-border-strong, var(--border)) 76%);
}

.dk-record-chip--info {
    background: color-mix(in oklab, var(--secondary) 18%, var(--drv-surface-1, var(--card)) 82%);
    border-color: color-mix(in oklab, var(--secondary) 26%, var(--drv-border-strong, var(--border)) 74%);
}

.dk-record-chip--success {
    background: color-mix(in oklab, var(--good) 14%, var(--drv-surface-1, var(--card)) 86%);
    border-color: color-mix(in oklab, var(--good) 24%, var(--drv-border-strong, var(--border)) 76%);
}

.dk-record-item {
    padding: 0.82rem 0.92rem;
    border: 1px solid var(--drv-border-soft);
    border-radius: 1rem;
    background: color-mix(in oklab, var(--drv-surface-2) 90%, var(--drv-surface-1) 10%);
    box-shadow:
        0 12px 18px -18px var(--drv-shadow-ambient),
        0 4px 8px -6px var(--drv-shadow-key),
        inset 0 1px 0 var(--drv-highlight);
}

.dk-record-item + .dk-record-item {
    margin-top: 0.8rem;
}

.dk-record-item__title {
    font-weight: 600;
    color: var(--foreground);
}

.dk-record-item__meta {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.dk-record-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 1.15rem;
    border: 1px solid var(--drv-border-soft);
    box-shadow:
        0 18px 26px -24px var(--drv-shadow-ambient),
        inset 0 1px 0 var(--drv-highlight);
}

.dk-record-alert.hidden {
    display: none;
}

.dk-record-alert--danger {
    background: color-mix(in oklab, var(--bad) 10%, var(--drv-surface-1, var(--card)) 90%);
    border-color: color-mix(in oklab, var(--bad) 22%, var(--drv-border-strong, var(--border)) 78%);
    color: var(--foreground, var(--text-foreground));
}

.dk-record-alert--warning {
    background: color-mix(in oklab, var(--warn) 12%, var(--drv-surface-1, var(--card)) 88%);
    border-color: color-mix(in oklab, var(--warn) 20%, var(--drv-border-strong, var(--border)) 80%);
    color: var(--foreground, var(--text-foreground));
}

.dk-record-alert--info {
    background: color-mix(in oklab, var(--secondary) 18%, var(--drv-surface-1, var(--card)) 82%);
    color: var(--foreground, var(--text-foreground));
}

.dk-record-card {
    border: 1px solid var(--drv-border-soft);
    border-radius: 1.5rem;
    background: var(--drv-surface-1);
    box-shadow:
        0 24px 36px -30px var(--drv-shadow-ambient),
        0 8px 16px -12px var(--drv-shadow-key),
        inset 0 1px 0 var(--drv-highlight);
    overflow: hidden;
}

.dk-record-card__header {
    padding: 1rem 1.15rem 0.45rem;
}

.dk-record-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--foreground);
}

.dk-record-card__subtitle {
    margin-top: 0.2rem;
    color: var(--muted);
}

.dk-record-card__body {
    padding: 0 1.15rem 0.95rem;
}

.dk-record-card__body--compact {
    padding-top: 0.1rem;
}

.dk-record-form-section {
    border: 1px solid var(--drv-border-soft);
    border-radius: 1.5rem;
    background: var(--drv-surface-1);
    box-shadow:
        0 24px 36px -30px var(--drv-shadow-ambient),
        0 8px 16px -12px var(--drv-shadow-key),
        inset 0 1px 0 var(--drv-highlight);
    padding: 1.1rem 1.15rem;
}

.dk-record-form-section > h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.9rem;
}

.dk-record-form-section .text-muted-foreground,
.dk-record-form-section .text-muted {
    color: var(--muted);
}

.dk-record-form-shell {
    display: grid;
    gap: 1rem;
}

.dk-record-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.dk-record-form-actions > [id$="-msg"],
.dk-record-form-actions > [id$="msg"],
.dk-record-form-actions > [id$="-status"],
.dk-record-form-actions > [id$="status"],
.dk-action-message {
    order: -1;
    flex: 0 0 100%;
}

.customer-form-layout {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.customer-form-layout__details,
.customer-form-layout__branding {
    min-width: 0;
}

.customer-form-layout__actions {
    width: 100%;
}

@media (min-width: 1100px) {
    .customer-form-layout {
        grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
    }

    .customer-form-layout__details {
        grid-column: 1;
    }

    .customer-form-layout__branding {
        grid-column: 2;
        grid-row: 1;
    }

    .customer-form-layout__actions {
        grid-column: 1 / -1;
    }
}

.dk-record-pre {
    white-space: pre-wrap;
    font-size: 0.78rem;
    color: var(--muted);
    background: color-mix(in oklab, var(--drv-surface-2) 90%, var(--drv-surface-1) 10%);
    border: 1px solid var(--drv-border-soft);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    max-height: 24rem;
    overflow: auto;
}

.dk-list-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    min-height: 2.5rem;
}

.dk-list-controls details {
    position: relative;
    z-index: 30;
}

.dk-list-controls summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.95rem;
    border: 1px solid var(--drv-border-soft);
    background: color-mix(in oklab, var(--drv-surface-2) 88%, var(--drv-surface-1) 12%);
    color: var(--muted);
    box-shadow: inset 0 1px 0 var(--drv-highlight);
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.dk-list-controls summary:hover {
    color: var(--foreground);
    background: color-mix(in oklab, var(--drv-surface-2) 76%, var(--secondary) 24%);
    transform: translateY(-1px);
}

.dk-list-controls summary::-webkit-details-marker {
    display: none;
}

.dk-list-controls-panel {
    position: absolute;
    right: 0;
    margin-top: 0.55rem;
    min-width: 14rem;
    border: 1px solid var(--drv-border-soft);
    border-radius: 1rem;
    background: var(--drv-surface-1);
    box-shadow:
        0 18px 28px -22px var(--drv-shadow-ambient),
        0 8px 16px -12px var(--drv-shadow-key),
        inset 0 1px 0 var(--drv-highlight);
    padding: 0.55rem;
    z-index: 40;
}

.dk-list-controls-panel label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.75rem;
    color: var(--foreground);
}

.dk-list-controls-panel label:hover {
    background: color-mix(in oklab, var(--drv-surface-2) 84%, var(--drv-surface-1) 16%);
}

.dk-list-controls-panel button {
    margin-top: 0.4rem;
    width: 100%;
}

.dk-list-page {
    display: grid;
    gap: 1.15rem;
}

.dk-list-hero {
    border: 1px solid color-mix(in oklab, var(--drv-border-soft) 88%, var(--secondary) 12%);
    border-radius: 1.75rem;
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--drv-surface-1) 90%, var(--secondary) 10%),
            color-mix(in oklab, var(--drv-surface-1) 84%, var(--drv-surface-2) 16%));
    box-shadow:
        0 26px 38px -30px var(--drv-shadow-ambient),
        0 10px 18px -14px var(--drv-shadow-key),
        inset 0 1px 0 var(--drv-highlight);
}

.dk-list-hero .dk-record-heading {
    margin: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
}

.dk-list-shell {
    border: 1px solid color-mix(in oklab, var(--drv-border-soft) 86%, var(--foreground) 14%);
    border-radius: 1.5rem;
    background: color-mix(in oklab, var(--drv-surface-1) 92%, var(--drv-surface-2) 8%);
    box-shadow:
        0 28px 40px -34px var(--drv-shadow-ambient),
        0 10px 20px -16px var(--drv-shadow-key),
        inset 0 1px 0 var(--drv-highlight);
    overflow: hidden;
}

.dk-list-shell__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem 0.9rem;
    border-bottom: 1px solid color-mix(in oklab, var(--drv-border-soft) 88%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--drv-surface-2) 86%, var(--drv-surface-1) 14%),
            color-mix(in oklab, var(--drv-surface-1) 96%, transparent 4%));
}

.dk-list-shell__body {
    padding: 0.35rem 0 0;
}

.dk-list-shell__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--foreground);
}

.dk-list-shell__subtitle {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.dk-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.dk-list-type-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in oklab, var(--drv-border-soft) 88%, transparent);
    border-radius: 1.25rem;
    background: color-mix(in oklab, var(--drv-surface-1) 90%, var(--drv-surface-2) 10%);
    box-shadow:
        0 18px 28px -26px var(--drv-shadow-ambient),
        0 8px 14px -12px var(--drv-shadow-key),
        inset 0 1px 0 var(--drv-highlight);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.dk-list-type-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--secondary) 22%, var(--drv-border-soft) 78%);
    box-shadow:
        0 22px 32px -24px var(--drv-shadow-ambient),
        0 10px 18px -12px var(--drv-shadow-key),
        inset 0 1px 0 var(--drv-highlight);
}

.dk-list-shell .dk-list-table {
    width: 100%;
}

.dk-list-shell .dk-list-table thead th {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    background: color-mix(in oklab, var(--drv-surface-1) 96%, transparent 4%);
}

.dk-list-shell .dk-list-table tbody td {
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.dk-record-grid {
    display: grid;
    gap: 0.85rem;
}

.dk-record-row {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--drv-border-soft);
}

.dk-record-row:last-child {
    border-bottom: 0;
}

.dk-record-row__label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 0.15rem;
}

.dk-record-row__value {
    color: var(--foreground);
    min-width: 0;
    word-break: break-word;
}

.dk-record-row__value a {
    color: var(--secondary);
}

.dk-record-inline-note {
    color: var(--muted);
    font-style: italic;
}

.dk-record-panel {
    border: 1px solid var(--drv-border-soft);
    border-radius: 1.5rem;
    background: color-mix(in oklab, var(--drv-surface-1) 72%, var(--drv-surface-2) 28%);
    box-shadow:
        0 22px 32px -28px var(--drv-shadow-ambient),
        inset 0 1px 0 var(--drv-highlight);
}

.dk-asset-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.dk-asset-detail-field {
    min-width: 0;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--drv-border-soft, var(--border));
    border-radius: 1rem;
    background: color-mix(in oklab, var(--drv-surface-1, var(--card)) 82%, var(--drv-surface-2, var(--card2)) 18%);
    box-shadow: inset 0 1px 0 var(--drv-highlight, rgba(255, 255, 255, 0.5));
}

.dk-asset-detail-field__label {
    margin-bottom: 0.45rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--drv-border-soft, var(--border));
    color: var(--muted, var(--text-muted));
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.25;
}

.dk-asset-detail-field__value {
    min-width: 0;
    color: var(--foreground, var(--text-foreground));
    font-size: 0.92rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.dk-asset-detail-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--drv-border-soft, var(--border));
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.dk-asset-detail-badge--yes {
    background: color-mix(in oklab, var(--good) 14%, var(--drv-surface-1, var(--card)) 86%);
    border-color: color-mix(in oklab, var(--good) 28%, var(--drv-border-soft, var(--border)) 72%);
}

.dk-asset-detail-badge--no {
    background: color-mix(in oklab, var(--bad) 9%, var(--drv-surface-1, var(--card)) 91%);
    border-color: color-mix(in oklab, var(--bad) 18%, var(--drv-border-soft, var(--border)) 82%);
}

@media (min-width: 1280px) {
    .dk-asset-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dk-asset-detail-field:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.dk-record-table {
    width: 100%;
    border-collapse: collapse;
}

.dk-record-table thead {
    color: var(--muted);
    border-bottom: 1px solid var(--drv-border-soft);
}

.dk-record-table th,
.dk-record-table td {
    padding: 0.9rem 0.2rem;
    text-align: left;
    vertical-align: top;
}

.dk-record-table tbody tr + tr {
    border-top: 1px solid var(--drv-border-soft);
}

.dk-record-bar {
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--drv-surface-3);
}

.dk-record-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.dk-skeleton-card {
    position: relative;
    overflow: hidden;
}

.dk-skeleton-card::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in oklab, var(--drv-surface-1) 82%, white 18%),
        transparent
    );
    animation: dk-skeleton-shimmer 1.4s infinite;
}

.dk-skeleton-line,
.dk-skeleton-pill,
.dk-skeleton-block {
    display: block;
    border-radius: 999px;
    background: color-mix(in oklab, var(--drv-surface-2) 80%, var(--drv-surface-3) 20%);
}

.dk-skeleton-line {
    height: 0.9rem;
}

.dk-skeleton-pill {
    height: 2.25rem;
    border-radius: 1rem;
}

.dk-skeleton-block {
    height: 5rem;
    border-radius: 1rem;
}

.dk-skeleton-stack {
    display: grid;
    gap: 0.75rem;
}

@keyframes dk-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.dk-record-page [data-record-panel] {
    border-left: 0;
    border-radius: 0 0 0 1.5rem;
    background: color-mix(in oklab, var(--drv-surface-1) 80%, var(--drv-surface-2) 20%);
    box-shadow:
        -20px 0 32px -28px var(--drv-shadow-ambient),
        inset 1px 0 0 var(--drv-highlight);
}

.dk-record-page .record-panel-header {
    padding-top: 1rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--drv-border-soft);
}

.dk-record-page .record-panel-body {
    padding-top: 1rem;
    padding-bottom: 1.25rem;
}

.dk-record-page .record-panel-tabs > button {
    border: 1px solid var(--drv-border-soft);
    background: color-mix(in oklab, var(--drv-surface-2) 92%, var(--drv-surface-1) 8%);
    color: var(--muted);
}

.dk-record-page .record-panel-tabs > button:hover,
.dk-record-page .record-panel-tabs > button[aria-selected="true"] {
    background: color-mix(in oklab, var(--secondary) 14%, var(--drv-surface-1) 86%);
    color: var(--foreground);
}

.dk-record-page .record-panel-collapse,
.dk-record-page .record-panel-close {
    border: 1px solid var(--drv-border-soft);
    background: color-mix(in oklab, var(--drv-surface-1) 90%, var(--drv-surface-2) 10%);
    color: var(--foreground);
    border-radius: 999px;
}

.dk-record-page [data-panel-content="related"] select,
.dk-record-page [data-panel-content="related"] input,
.dk-record-page #related-search-results,
.dk-record-page #related-edge-guidance,
.dk-record-page #related-impact-flow-wrap,
.dk-record-page #related-ticket-candidates {
    border-color: var(--drv-border-soft) !important;
    background: color-mix(in oklab, var(--drv-surface-1) 92%, var(--drv-surface-2) 8%) !important;
    box-shadow: inset 0 1px 0 var(--drv-highlight);
}

.dk-record-page [data-panel-content="related"] .record-panel-control-group {
    border-color: var(--drv-border-soft);
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--drv-surface-1) 88%, var(--drv-surface-2) 12%),
            color-mix(in oklab, var(--drv-surface-1) 78%, var(--field) 22%));
    box-shadow:
        0 16px 30px -28px color-mix(in oklab, var(--foreground) 20%, transparent),
        inset 0 1px 0 var(--drv-highlight);
}

.dk-record-page [data-panel-content="related"] .record-panel-transfer-popover {
    border-color: color-mix(in oklab, var(--primary) 24%, var(--drv-border-soft) 76%) !important;
    background: color-mix(in oklab, var(--drv-surface-1) 96%, var(--field) 4%) !important;
    box-shadow:
        0 28px 56px -22px color-mix(in oklab, var(--foreground) 44%, transparent),
        0 0 0 999px color-mix(in oklab, var(--drv-surface-2) 34%, transparent),
        inset 0 1px 0 var(--drv-highlight);
}

.dk-record-page #related-open-impact-workspace-btn,
.dk-record-page #related-open-map-workspace-btn,
.dk-record-page #related-open-switch-workspace-btn,
.dk-record-page #related-ticket-open-impact {
    border: 1px solid var(--drv-border-soft);
    box-shadow: inset 0 1px 0 var(--drv-highlight);
}

@media (min-width: 1024px) {
    .dk-record-page > .record-workspace {
        top: 0;
    }
}

@media (max-width: 1023px) {
    .dk-record-heading {
        padding: 1.1rem 1rem;
    }

    .dk-record-heading,
    .dk-record-heading__title {
        flex-direction: column;
        align-items: flex-start;
    }

    .dk-record-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .dk-record-row {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }
}

@media (min-width: 1280px) {
    .dk-record-columns {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
        align-items: start;
    }
}

@media (max-width: 640px) {
    .customer-metric-card__value {
        font-size: 1.65rem;
    }
}

.dok-global-loading {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(1.5px);
}

.dok-global-loading.is-visible {
    display: flex;
}

body.is-page-loading .dok-global-loading {
    display: flex;
}

.dok-global-loading__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
}

.dok-global-loading__logo {
    display: block;
    width: min(220px, 56vw);
    height: auto;
}

.dok-global-loading__logo--dark {
    display: none;
}

.dark .dok-global-loading__logo--light {
    display: none;
}

.dark .dok-global-loading__logo--dark {
    display: block;
}

.dok-global-loading__spinner {
    inline-size: 38px;
    block-size: 38px;
    border-radius: 999px;
    border: 3px solid rgba(15, 23, 42, 0.2);
    border-top-color: #0f172a;
    animation: dok-global-spinner-rotate 0.8s linear infinite;
}

.dark .dok-global-loading {
    background: rgba(0, 0, 0, 0.78);
}

.dark .dok-global-loading__spinner {
    border-color: rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
}

@keyframes dok-global-spinner-rotate {
    to { transform: rotate(360deg); }
}

@media (prefers-color-scheme: dark) {
		.dk-panel {
			background: oklch(0.185 0.015 230);
		}
		
		.dk-input {
			background: oklch(0.20 0.015 230);
			color: oklch(0.93 0.015 255);
		}
}

/* Dokumint semantic status and signal components */

.tenant-onboarding-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
}
.tenant-onboarding-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.tenant-onboarding-panel__header h2 {
    margin: 0;
    color: var(--text-foreground);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
}
.tenant-onboarding-panel__header p {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.35;
}
.tenant-onboarding-panel__header strong {
    color: var(--text-foreground);
    font-size: 1.5rem;
    line-height: 1;
}
.tenant-onboarding-progress {
    width: 100%;
    height: 0.7rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in oklab, var(--bg-muted) 70%, var(--bg-card) 30%);
}
.tenant-onboarding-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--bg-success);
    transition: width 180ms ease;
}
.tenant-onboarding-tasks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tenant-onboarding-task {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in oklab, var(--field) 55%, var(--bg-card) 45%);
}
.tenant-onboarding-task__indicator {
    width: 0.72rem;
    height: 0.72rem;
    flex: 0 0 0.72rem;
    margin-top: 0.18rem;
    border-radius: 999px;
    background: var(--bg-destructive);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--bg-destructive) 18%, transparent);
}
.tenant-onboarding-task--complete .tenant-onboarding-task__indicator {
    background: var(--bg-success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--bg-success) 18%, transparent);
}
.tenant-onboarding-task__copy {
    min-width: 0;
}
.tenant-onboarding-task__copy strong,
.tenant-onboarding-task__copy small {
    display: block;
    overflow-wrap: anywhere;
}
.tenant-onboarding-task__copy strong {
    color: var(--text-foreground);
    font-size: 0.875rem;
    line-height: 1.25;
}
.tenant-onboarding-task__copy small {
    margin-top: 0.16rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.dk-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.28rem 0.62rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-foreground);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.15;
}
.dk-status-pill__dot {
    width: 0.48rem;
    height: 0.48rem;
    flex: 0 0 0.48rem;
    border-radius: 999px;
    background: currentColor;
}
.dk-status-pill--success {
    border-color: color-mix(in oklab, var(--good) 48%, var(--border) 52%);
    background: color-mix(in oklab, var(--good) 22%, var(--card) 78%);
    color: var(--good);
}
.dk-status-pill--warning {
    border-color: color-mix(in oklab, var(--warn) 52%, var(--border) 48%);
    background: color-mix(in oklab, var(--warn) 24%, var(--card) 76%);
    color: var(--warn);
}
.dk-status-pill--danger {
    border-color: color-mix(in oklab, var(--bad) 50%, var(--border) 50%);
    background: color-mix(in oklab, var(--bad) 20%, var(--card) 80%);
    color: var(--bad);
}
.dk-status-pill--neutral {
    border-color: var(--border);
    background: color-mix(in oklab, var(--field) 72%, var(--card) 28%);
    color: var(--text-muted);
}
.dk-signal-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
}
.dk-signal-card--success { border-left: 4px solid var(--good); }
.dk-signal-card--warning { border-left: 4px solid var(--warn); }
.dk-signal-card--danger { border-left: 4px solid var(--bad); }
.dk-signal-card--info { border-left: 4px solid var(--secondary); }
.dk-signal-card--neutral { border-left: 4px solid var(--border); }
.dk-muted-help {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in oklab, var(--field) 78%, var(--card) 22%);
}
.dk-muted-help summary {
    cursor: pointer;
    color: var(--text-foreground);
    font-weight: 700;
}
.dk-muted-help__body {
    margin-top: 0.45rem;
    color: var(--text-muted);
}

.related-workspace__switch-port {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.related-workspace__switch-port:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 4px;
    border-radius: 6px;
}

.related-workspace__switch-jack {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 2rem;
    height: 2rem;
    align-items: end;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 0.25rem 0.25rem;
    background: color-mix(in oklab, var(--card3, var(--card2)) 82%, black 18%);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}

.related-workspace__switch-jack--speed-10g {
    border-color: color-mix(in oklab, var(--text-info) 74%, white 26%);
    background: color-mix(in oklab, var(--text-info) 34%, black 66%);
    color: var(--text-info);
}

.related-workspace__switch-jack--speed-1g {
    border-color: color-mix(in oklab, var(--good) 72%, white 28%);
    background: color-mix(in oklab, var(--good) 28%, black 72%);
    color: var(--good);
}

.related-workspace__switch-jack--speed-slow {
    border-color: color-mix(in oklab, var(--warn) 76%, white 24%);
    background: color-mix(in oklab, var(--warn) 30%, black 70%);
    color: var(--warn);
}

.related-workspace__switch-jack--disabled {
    border-color: color-mix(in oklab, var(--bad) 76%, white 24%);
    background: color-mix(in oklab, var(--bad) 30%, black 70%);
    color: var(--bad);
}

.related-workspace__switch-jack--empty {
    border-color: color-mix(in oklab, var(--border) 28%, transparent 72%);
    background: color-mix(in oklab, var(--card3, var(--card2)) 20%, black 80%);
    color: color-mix(in oklab, var(--text-muted) 24%, transparent 76%);
}

.related-workspace__switch-jack.is-selected {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 2px color-mix(in oklab, currentColor 62%, white 38%),
        0 0 18px color-mix(in oklab, currentColor 70%, transparent);
}

.related-workspace__switch-pin {
    position: absolute;
    top: -0.25rem;
    left: 50%;
    width: 0.38rem;
    height: 0.38rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.related-workspace__switch-bar {
    display: block;
    height: 0.38rem;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.92;
}

.related-workspace__switch-speed {
    border-radius: 3px;
    padding: 0 0.25rem;
    background: color-mix(in oklab, currentColor 18%, transparent);
    color: currentColor;
    line-height: 0.75rem;
}

html:not(.dark) .related-workspace__switch-speed.related-workspace__switch-jack--speed-10g {
    background: color-mix(in oklab, var(--text-info) 88%, black 12%);
    color: white;
}

html:not(.dark) .related-workspace__switch-speed.related-workspace__switch-jack--speed-1g,
html:not(.dark) .related-workspace__switch-speed.related-workspace__switch-jack--speed-slow {
    background: color-mix(in oklab, var(--good) 72%, black 28%);
    color: white;
}

html:not(.dark) .related-workspace__switch-speed.related-workspace__switch-jack--disabled {
    background: color-mix(in oklab, var(--bad) 78%, black 22%);
    color: white;
}

.related-workspace__switch-poe {
    position: absolute;
    top: 0.25rem;
    left: 50%;
    display: inline-flex;
    width: 0.625rem;
    height: 0.625rem;
    transform: translateX(-50%);
    align-items: center;
    justify-content: center;
    color: var(--warn);
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 4px color-mix(in oklab, var(--warn) 70%, transparent);
}

.configuration-switch-editor {
    border: 1px solid color-mix(in oklab, var(--bg-sidebar) 66%, white 34%);
    border-radius: 1rem;
    background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--bg-sidebar) 92%, white 8%),
        color-mix(in oklab, var(--bg-sidebar) 82%, black 18%),
        color-mix(in oklab, var(--bg-sidebar) 58%, black 42%)
    );
    box-shadow: var(--shadow-sm);
    overflow: visible;
    padding: 1rem;
}

.configuration-switch-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid color-mix(in oklab, var(--text-light) 20%, transparent 80%);
    border-radius: 0.8rem;
    background: color-mix(in oklab, var(--bg-sidebar) 74%, white 10%);
    padding: 0.75rem 1rem;
}

.configuration-switch-editor__port-layout,
.configuration-switch-editor__copper-stack,
.configuration-switch-editor__copper-banks {
    display: flex;
    min-width: 0;
}

.configuration-switch-editor__port-layout {
    align-items: stretch;
    gap: 1rem;
}

.configuration-switch-editor__copper-stack {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1.5rem;
}

.configuration-switch-editor__copper-section {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 0.5rem;
}

.configuration-switch-editor__copper-banks {
    flex: 1 1 auto;
    gap: 1rem;
}

.configuration-switch-editor__bank {
    display: grid;
    flex: 1 1 0;
    min-width: 0;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.5rem;
    border: 1px solid color-mix(in oklab, var(--text-light) 18%, transparent 82%);
    border-radius: 0.8rem;
    background: color-mix(in oklab, var(--bg-sidebar) 62%, black 38%);
    overflow: visible;
    padding: 0.75rem 0.5rem;
}

.configuration-switch-editor__sfp-block {
    display: flex;
    flex: 0 0 auto;
    min-width: 5.5rem;
    flex-direction: column;
    gap: 0.5rem;
}

.configuration-switch-editor__sfp-block .configuration-switch-editor__row-heading {
    min-height: 0.75rem;
}

.configuration-switch-editor__sfp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1.75rem, 1fr));
    gap: 0.75rem;
}

.configuration-switch-editor__sfp-grid--paired {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: max-content;
    grid-template-columns: repeat(2, 2rem);
    align-content: space-between;
    gap: 0.5rem 0.65rem;
    padding: 0.75rem 0;
}

.configuration-switch-editor__drop-target .related-workspace__switch-jack {
    box-shadow:
        0 0 0 2px color-mix(in oklab, var(--secondary) 68%, white 32%),
        0 0 18px color-mix(in oklab, var(--secondary) 62%, transparent);
}

.configuration-switch-editor__dragging {
    opacity: 0.6;
}

.configuration-switch-editor__draggable {
    cursor: grab;
}

.configuration-switch-editor__draggable:active {
    cursor: grabbing;
}

.related-workspace__switch-bars {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 1px;
}


.configuration-switch-editor__title {
    color: var(--text-light);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.configuration-switch-editor__subtitle,
.configuration-switch-editor__range {
    color: color-mix(in oklab, var(--text-light) 72%, transparent);
    font-size: 0.68rem;
}

.configuration-switch-editor__legend {
    display: none;
    align-items: center;
    gap: 0.55rem;
    color: color-mix(in oklab, var(--text-light) 64%, transparent);
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.configuration-switch-editor__legend-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: currentColor;
}

.configuration-switch-editor__legend-dot--10g { color: var(--text-info); }
.configuration-switch-editor__legend-dot--1g { color: var(--good); }
.configuration-switch-editor__legend-dot--slow { color: var(--warn); }
.configuration-switch-editor__legend-dot--disabled { color: var(--bad); }

.configuration-switch-editor__row-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: color-mix(in oklab, var(--text-light) 64%, transparent);
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.configuration-switch-editor__row-heading--sfp {
    justify-content: flex-start;
}

.configuration-switch-editor__port-meta {
    display: flex;
    min-height: 1.75rem;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    color: color-mix(in oklab, var(--text-light) 48%, transparent);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1rem;
}

.configuration-switch-editor__port-meta--active {
    color: var(--text-light);
}

.configuration-switch-editor__tooltip {
    pointer-events: none;
    position: absolute;
    top: 100%;
    z-index: 120;
    width: 11rem;
    margin-top: 0.5rem;
    border: 1px solid color-mix(in oklab, var(--border) 58%, transparent 42%);
    border-radius: 0.45rem;
    background: color-mix(in oklab, var(--card3, var(--card2)) 16%, black 84%);
    box-shadow: var(--shadow-lg);
    color: var(--text-light);
    opacity: 0;
    padding: 0.7rem 0.8rem;
    text-align: left;
    transition: opacity 150ms ease;
}

.configuration-switch-editor__tooltip--left { left: 0; }
.configuration-switch-editor__tooltip--center { left: 50%; transform: translateX(-50%); }
.configuration-switch-editor__tooltip--right { right: 0; }

.configuration-switch-editor__sfp-block .configuration-switch-editor__tooltip {
    left: auto;
    right: 0;
    transform: none;
}

.configuration-switch-editor__tooltip-title,
.configuration-switch-editor__tooltip-subtitle {
    overflow-wrap: anywhere;
}

.related-workspace__switch-port:hover .configuration-switch-editor__tooltip,
.related-workspace__switch-port:focus-visible .configuration-switch-editor__tooltip {
    opacity: 1;
}

.configuration-switch-editor__tooltip-title {
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 700;
}

.configuration-switch-editor__tooltip-subtitle {
    margin-top: 0.25rem;
    color: color-mix(in oklab, var(--text-light) 68%, transparent);
    font-size: 0.68rem;
}

@media (min-width: 640px) {
    .configuration-switch-editor__legend {
        display: flex;
    }
}

.related-workspace__meta-list {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
}

.related-workspace__meta-label {
    color: var(--text-muted);
    white-space: nowrap;
}

.related-workspace__meta-value {
    min-width: 0;
    color: var(--text-foreground);
    overflow-wrap: anywhere;
}

.related-workspace__state-dot {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    vertical-align: -0.16rem;
}

.related-workspace__state-dot--yes {
    background: color-mix(in oklab, var(--good) 24%, var(--card) 76%);
    color: var(--good);
}

.related-workspace__state-dot--no {
    background: color-mix(in oklab, var(--bad) 18%, var(--card) 82%);
    color: var(--bad);
}

.related-workspace__state-dot svg {
    width: 0.72rem;
    height: 0.72rem;
    stroke-width: 3;
}


/* Infrastructure mode: IPAM */
.infrastructure-mode {
    --infra-bg: color-mix(in oklab, var(--bg-background-inverse, #1e293b) 84%, black 16%);
    --infra-panel: color-mix(in oklab, var(--bg-sidebar, #26384c) 62%, black 38%);
    --infra-panel-2: color-mix(in oklab, var(--bg-sidebar, #26384c) 48%, black 52%);
    --infra-line: color-mix(in oklab, var(--primary) 30%, transparent);
    --infra-border: color-mix(in oklab, var(--primary) 24%, var(--border) 76%);
    --infra-text: color-mix(in oklab, var(--text-light, white) 94%, var(--primary) 6%);
    --infra-muted: color-mix(in oklab, var(--text-light, white) 58%, transparent);
    --infra-accent: var(--primary);
    --infra-warning: var(--warn);
    --infra-danger: var(--bad);
    --infra-success: var(--good);
}

.ipam-workspace {
    display: grid;
    gap: 1rem;
    margin: -0.25rem -0.25rem 0;
    border-radius: 1.05rem;
    padding: 0.25rem;
}

.ipam-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
    overflow: hidden;
    margin-bottom: 0.15rem;
    border: 1px solid var(--infra-border);
    border-radius: 1.1rem;
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--infra-line) 54%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in oklab, var(--infra-line) 40%, transparent) 1px, transparent 1px),
        linear-gradient(135deg, color-mix(in oklab, var(--infra-panel) 86%, var(--primary) 14%), var(--infra-bg));
    background-size: 42px 42px, 42px 42px, auto;
    color: var(--infra-text);
    padding: 1.15rem;
    box-shadow:
        0 24px 44px -34px rgb(0 0 0 / 0.55),
        inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.ipam-hero__main {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    min-width: 0;
}

.ipam-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.35rem;
    height: 3.35rem;
    flex: 0 0 3.35rem;
    border: 1px solid color-mix(in oklab, var(--primary) 38%, transparent);
    border-radius: 0.8rem;
    background: color-mix(in oklab, var(--infra-panel-2) 82%, var(--primary) 18%);
    color: color-mix(in oklab, var(--primary) 82%, white 18%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.ipam-hero__eyebrow {
    color: color-mix(in oklab, var(--primary) 78%, white 22%);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ipam-hero__title {
    margin-top: 0.2rem;
    color: var(--infra-text);
    font-size: 1.7rem;
    font-weight: 720;
    line-height: 1.12;
}

.ipam-hero__subtitle {
    max-width: 52rem;
    margin-top: 0.35rem;
    color: var(--infra-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.ipam-hero__actions {
    display: flex;
    align-content: start;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ipam-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.ipam-context-note {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid color-mix(in oklab, var(--infra-border) 84%, transparent);
    border-radius: 999px;
    background: color-mix(in oklab, var(--infra-panel-2) 68%, transparent);
    color: var(--infra-muted);
    padding: 0.35rem 0.75rem;
}

.ipam-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.ipam-stat-card {
    min-width: 0;
    border: 1px solid color-mix(in oklab, var(--infra-border) 86%, transparent);
    border-radius: 0.75rem;
    background: color-mix(in oklab, var(--infra-panel-2) 72%, transparent);
    padding: 0.75rem 0.85rem;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.ipam-stat-card__label {
    color: var(--infra-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ipam-stat-card__value {
    margin-top: 0.35rem;
    color: var(--infra-text);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 1.55rem;
    font-weight: 760;
    line-height: 1;
}

.ipam-stat-card--warn .ipam-stat-card__value {
    color: color-mix(in oklab, var(--infra-warning) 86%, white 14%);
}

.ipam-stat-card--plan .ipam-stat-card__value {
    color: color-mix(in oklab, var(--primary) 72%, white 28%);
}

.ipam-panel {
    border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
    border-radius: 0.95rem;
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--card) 88%, var(--bg-context) 12%),
            color-mix(in oklab, var(--card) 96%, var(--bg-context) 4%));
    padding: 1rem;
    box-shadow:
        0 24px 38px -34px color-mix(in oklab, var(--text-foreground) 18%, transparent),
        inset 0 1px 0 color-mix(in oklab, white 30%, transparent);
}

.ipam-panel h2,
.ipam-panel summary {
    letter-spacing: -0.01em;
}

.ipam-panel > details > summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-foreground);
    line-height: 1.2;
}

.ipam-panel > details > summary::marker {
    color: var(--primary);
}

.ipam-panel .dk-record-btn,
.infrastructure-mode select,
.infrastructure-mode input[type="text"],
.infrastructure-mode input[type="number"],
.infrastructure-mode input[type="datetime-local"],
.infrastructure-mode textarea {
    border-color: color-mix(in oklab, var(--border) 76%, var(--primary) 24%);
}

.ipam-chart-panel {
    border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
    border-radius: 0.75rem;
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--border) 36%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in oklab, var(--border) 28%, transparent) 1px, transparent 1px),
        color-mix(in oklab, var(--card) 82%, var(--bg-context) 18%);
    background-size: 38px 38px, 38px 38px, auto;
    padding: 0.8rem;
}

.ipam-table-shell {
    overflow-x: auto;
    border: 1px solid color-mix(in oklab, var(--border) 82%, transparent);
    border-radius: 0.8rem;
    background: color-mix(in oklab, var(--card) 96%, var(--bg-context) 4%);
}

.ipam-table {
    border-collapse: separate;
    border-spacing: 0;
}

.ipam-table thead {
    background: color-mix(in oklab, var(--bg-sidebar) 76%, black 24%);
    color: color-mix(in oklab, var(--text-light) 78%, transparent);
}

.ipam-table th {
    white-space: nowrap;
    border-bottom: 1px solid color-mix(in oklab, var(--primary) 20%, var(--border) 80%);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ipam-table tbody tr {
    transition: background-color 140ms ease;
}

.ipam-table tbody tr:nth-child(even) {
    background: color-mix(in oklab, var(--bg-context) 12%, transparent);
}

.ipam-table tbody tr:nth-child(even):hover,
.ipam-table tbody tr:hover {
    background: color-mix(in oklab, var(--primary) 9%, var(--card) 91%);
}

.ipam-table td {
    vertical-align: top;
}

.ipam-ip-row td:first-child {
    box-shadow: inset 3px 0 0 transparent;
}

.ipam-ip-row--leased td:first-child {
    box-shadow: inset 3px 0 0 color-mix(in oklab, var(--good) 78%, white 22%);
}

.ipam-ip-row--stale td:first-child {
    box-shadow: inset 3px 0 0 color-mix(in oklab, var(--warn) 82%, white 18%);
}

.ipam-ip-row--available td:first-child {
    box-shadow: inset 3px 0 0 color-mix(in oklab, var(--secondary) 48%, transparent);
}

.ipam-ip-row--planned_reserved td:first-child,
.ipam-ip-row--reserved td:first-child {
    box-shadow: inset 3px 0 0 color-mix(in oklab, var(--primary) 78%, white 22%);
}

.ipam-ip-range-cell--dhcp {
    background: color-mix(in oklab, var(--good) 9%, transparent) !important;
}

.ipam-insight {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--border) 74%, transparent);
    border-radius: 0.85rem;
    background: color-mix(in oklab, var(--card) 94%, var(--bg-context) 6%);
    color: var(--text-foreground);
    padding: 0.95rem 1rem;
    box-shadow: inset 0 1px 0 color-mix(in oklab, white 30%, transparent);
}

.ipam-insight::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: var(--primary);
}

.ipam-insight--high {
    border-color: color-mix(in oklab, var(--bad) 34%, var(--border) 66%);
    background: color-mix(in oklab, var(--bad) 7%, var(--card) 93%);
}

.ipam-insight--high::before {
    background: var(--bad);
}

.ipam-insight--medium {
    border-color: color-mix(in oklab, var(--warn) 42%, var(--border) 58%);
    background: color-mix(in oklab, var(--warn) 9%, var(--card) 91%);
}

.ipam-insight--medium::before {
    background: var(--warn);
}

.ipam-insight--low {
    border-color: color-mix(in oklab, var(--primary) 26%, var(--border) 74%);
    background: color-mix(in oklab, var(--primary) 7%, var(--card) 93%);
}

.ipam-insight__text {
    color: color-mix(in oklab, var(--text-foreground) 88%, var(--text-muted) 12%);
}

.ipam-insight__muted {
    color: color-mix(in oklab, var(--text-muted) 78%, var(--text-foreground) 22%);
}

#ipam-scope-cards > div:not([class*="text-"]) {
    border-color: color-mix(in oklab, var(--border) 78%, transparent) !important;
    border-radius: 0.85rem !important;
    background: color-mix(in oklab, var(--card) 92%, var(--bg-context) 8%);
    box-shadow: inset 0 1px 0 color-mix(in oklab, white 26%, transparent);
}

.infrastructure-mode .dk-record-btn {
    border-radius: 0.65rem;
}

.infrastructure-mode .dk-record-chip {
    border-radius: 0.55rem;
}

.dark .ipam-panel {
    border-color: color-mix(in oklab, var(--border) 82%, var(--primary) 18%);
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--card) 70%, var(--bg-context) 30%),
            color-mix(in oklab, var(--card) 82%, black 18%));
}

.dark .ipam-table-shell {
    background: color-mix(in oklab, var(--card) 84%, black 16%);
}

.dark .ipam-table tbody tr:nth-child(even) {
    background: color-mix(in oklab, var(--bg-context) 18%, transparent);
}

.dark .ipam-table tbody tr:nth-child(even):hover,
.dark .ipam-table tbody tr:hover {
    background: color-mix(in oklab, var(--primary) 12%, var(--card) 88%);
}

.dark .ipam-insight {
    background: color-mix(in oklab, var(--card) 76%, var(--bg-context) 24%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.045);
}

.dark .ipam-insight--high {
    background: color-mix(in oklab, var(--bad) 12%, var(--card) 88%);
}

.dark .ipam-insight--medium {
    background: color-mix(in oklab, var(--warn) 11%, var(--card) 89%);
}

.dark .ipam-insight__text {
    color: color-mix(in oklab, var(--text-foreground) 92%, white 8%);
}

.dark .ipam-insight__muted {
    color: color-mix(in oklab, var(--text-muted) 84%, white 16%);
}

.dark #ipam-scope-cards > div:not([class*="text-"]) {
    background: color-mix(in oklab, var(--card) 74%, var(--bg-context) 26%);
}

@media (min-width: 760px) {
    .ipam-hero {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, auto);
        align-items: start;
    }

    .ipam-hero__actions {
        justify-content: flex-end;
        text-align: right;
    }

    .ipam-stat-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ipam-hero {
        grid-template-columns: minmax(38rem, 1fr) minmax(20rem, auto);
        gap: 1.4rem;
    }

    .ipam-hero__title {
        font-size: 1.85rem;
    }
}

@media (min-width: 1380px) {
    .ipam-hero {
        grid-template-columns: minmax(48rem, 1fr) minmax(28rem, auto);
    }
}

@media (max-width: 760px) {
    .ipam-hero__main {
        align-items: flex-start;
    }

    .ipam-hero__title {
        font-size: 1.35rem;
    }

    .ipam-panel {
        padding: 0.85rem;
    }
}


/* Reusable infrastructure context primitives */
.infra-context-band {
    display: grid;
    gap: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--infra-border, color-mix(in oklab, var(--border) 74%, var(--primary) 26%));
    border-radius: 1rem;
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--infra-line, var(--primary)) 28%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in oklab, var(--infra-line, var(--primary)) 22%, transparent) 1px, transparent 1px),
        linear-gradient(135deg, color-mix(in oklab, var(--infra-panel, var(--bg-sidebar)) 86%, var(--primary) 14%), var(--infra-bg, var(--bg-background-inverse)));
    background-size: 40px 40px, 40px 40px, auto;
    color: var(--infra-text, var(--text-light));
    padding: 1rem;
    box-shadow:
        0 22px 42px -34px rgb(0 0 0 / 0.55),
        inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.infra-context-band__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.infra-context-band__eyebrow {
    color: color-mix(in oklab, var(--primary) 78%, white 22%);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.infra-context-band__title {
    margin-top: 0.2rem;
    color: var(--infra-text, var(--text-light));
    font-size: 1.15rem;
    font-weight: 720;
    line-height: 1.15;
}

.infra-context-band__type {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid color-mix(in oklab, var(--infra-border, var(--border)) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in oklab, var(--infra-panel-2, var(--bg-sidebar)) 66%, transparent);
    color: var(--infra-muted, var(--text-muted));
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
}

.infra-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.infra-metric {
    min-width: 0;
    border: 1px solid color-mix(in oklab, var(--infra-border, var(--border)) 84%, transparent);
    border-radius: 0.72rem;
    background: color-mix(in oklab, var(--infra-panel-2, var(--bg-sidebar)) 70%, transparent);
    padding: 0.72rem 0.8rem;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.infra-metric__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--infra-muted, var(--text-muted));
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.infra-metric__value {
    display: block;
    max-width: 100%;
    margin-top: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--infra-text, var(--text-light));
    font-size: 1rem;
    font-weight: 720;
    line-height: 1.15;
}

.infra-metric__meta {
    display: block;
    max-width: 100%;
    margin-top: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--infra-muted, var(--text-muted));
    font-size: 0.76rem;
}

.infra-metric--success .infra-metric__value {
    color: color-mix(in oklab, var(--good) 82%, white 18%);
}

.infra-metric--warning .infra-metric__value {
    color: color-mix(in oklab, var(--warn) 86%, white 14%);
}

.infra-metric--danger .infra-metric__value {
    color: color-mix(in oklab, var(--bad) 82%, white 18%);
}

.infra-metric--info .infra-metric__value {
    color: color-mix(in oklab, var(--primary) 76%, white 24%);
}

.infra-metric--button {
    display: block;
    width: 100%;
    min-width: 0;
    appearance: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.infra-metric--button:hover,
.infra-metric--button:focus-visible {
    border-color: color-mix(in oklab, var(--primary) 78%, var(--border) 22%);
    background: color-mix(in oklab, var(--infra-panel-2, var(--bg-sidebar)) 58%, var(--primary) 14%);
    outline: none;
    transform: translateY(-1px);
}

body.device-rack-modal-open {
    overflow: hidden;
}

.device-rack-modal {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--bg-background-inverse) 74%, transparent);
    padding: 1rem;
}

.device-rack-modal.hidden {
    display: none;
}

.device-rack-modal__dialog {
    display: grid;
    width: min(44rem, 100%);
    max-height: min(46rem, calc(100vh - 2rem));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--bg-card);
    color: var(--text-foreground);
    box-shadow: 0 24px 60px color-mix(in oklab, var(--bg-background-inverse) 36%, transparent);
}

.device-rack-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.1rem;
}

.device-rack-modal__eyebrow {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.device-rack-modal__title {
    margin-top: 0.2rem;
    color: var(--text-heading);
    font-size: 1.15rem;
    font-weight: 720;
    line-height: 1.2;
}

.device-rack-modal__close {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--field);
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
}

.device-rack-modal__close:hover,
.device-rack-modal__close:focus-visible {
    background: var(--bg-hover);
    color: var(--text-foreground);
    outline: none;
}

.device-rack-modal__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 1.1rem;
}

.device-rack-modal__summary div {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: var(--field);
    padding: 0.65rem 0.7rem;
}

.device-rack-modal__summary-location {
    grid-column: 1 / -1;
}

.device-rack-modal__summary span {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.device-rack-modal__summary strong {
    display: block;
    margin-top: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-foreground);
    font-size: 0.95rem;
    font-weight: 680;
}

.device-rack-modal__layout {
    overflow: auto;
    padding: 1rem;
    background: var(--bg-background);
}

.device-rack-svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 24rem;
}

.device-rack-svg__frame {
    fill: var(--bg-card);
    stroke: color-mix(in oklab, var(--border) 70%, var(--primary) 30%);
    stroke-width: 1.5;
}

.device-rack-svg__bay {
    fill: var(--field);
}

.device-rack-svg__rail {
    fill: var(--bg-muted);
    stroke: var(--border);
    stroke-width: 1;
}

.device-rack-svg__u-line {
    stroke: color-mix(in oklab, var(--border) 80%, var(--primary) 20%);
    stroke-width: 1;
}

.device-rack-svg__u-label,
.device-rack-svg__caption,
.device-rack-svg__empty {
    fill: var(--text-muted);
    font-size: 0.72rem;
}

.device-rack-svg__item rect:first-child {
    fill: var(--bg-muted);
    stroke: color-mix(in oklab, var(--border) 72%, var(--text-muted) 28%);
    stroke-width: 1;
}

.device-rack-svg__item--configuration rect:first-child {
    fill: color-mix(in oklab, var(--button-secondary) 38%, var(--field) 62%);
}

.device-rack-svg__item--network rect:first-child {
    fill: color-mix(in oklab, var(--primary) 42%, var(--field) 58%);
}

.device-rack-svg__item--patch rect:first-child {
    fill: color-mix(in oklab, var(--accent) 34%, var(--field) 66%);
}

.device-rack-svg__item--power rect:first-child {
    fill: color-mix(in oklab, var(--warn) 34%, var(--field) 66%);
}

.device-rack-svg__item--manual rect:first-child {
    fill: color-mix(in oklab, var(--bg-muted) 70%, var(--field) 30%);
}

.device-rack-svg__item--target rect:first-child {
    fill: color-mix(in oklab, var(--primary) 62%, var(--field) 38%);
    stroke: var(--primary);
    stroke-width: 1.5;
}

.device-rack-svg__target-ring {
    fill: transparent;
    stroke: var(--warn);
    stroke-width: 3;
}

.device-rack-svg__item-label {
    fill: var(--text-foreground);
    font-size: 0.72rem;
    font-weight: 680;
    pointer-events: none;
}

@media (max-width: 640px) {
    .device-rack-modal {
        align-items: stretch;
        padding: 0.75rem;
    }

    .device-rack-modal__dialog {
        max-height: calc(100vh - 1.5rem);
    }

    .device-rack-modal__summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

.infra-evidence-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
}

.infra-evidence-row__item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid color-mix(in oklab, var(--infra-border, var(--border)) 70%, transparent);
    border-radius: 0.7rem;
    background: color-mix(in oklab, var(--infra-panel-2, var(--bg-sidebar)) 58%, transparent);
    color: var(--infra-text, var(--text-light));
    padding: 0.58rem 0.72rem;
    font-size: 0.84rem;
}

.infra-evidence-row__label {
    flex: 0 0 auto;
    color: var(--infra-muted, var(--text-muted));
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.infra-evidence-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: color-mix(in oklab, var(--primary) 78%, white 22%);
    text-decoration: none;
}

.infra-evidence-link:hover {
    text-decoration: underline;
}

.infra-muted {
    color: var(--infra-muted, var(--text-muted));
}

.device-infra-context {
    margin-bottom: 0.1rem;
}

@media (min-width: 860px) {
    .infra-metric-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .infra-evidence-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .infra-context-band__header {
        flex-direction: column;
    }

    .infra-context-band__type {
        max-width: 100%;
    }

    .infra-metric-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* Infrastructure mode: rack workspace */
.rack-workspace {
    display: grid;
    gap: 1rem;
}

.rack-workspace .dk-record-main-header {
    margin-bottom: 0;
}

.rack-infra-context {
    margin-bottom: 0.15rem;
}

@media (min-width: 1024px) {
    .rack-infra-context .infra-metric-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.rack-layout-grid {
    align-items: start;
}

.rack-diagram-area,
.rack-face-panel,
.rack-side-panel {
    min-width: 0;
}

.rack-face-panel,
.rack-side-panel {
    border: 1px solid color-mix(in oklab, var(--border) 78%, var(--primary) 22%);
    border-radius: 0.95rem;
    padding: 1rem;
    box-shadow:
        0 24px 38px -34px color-mix(in oklab, var(--text-foreground) 20%, transparent),
        inset 0 1px 0 color-mix(in oklab, white 28%, transparent);
}

.rack-face-panel {
    border-color: color-mix(in oklab, var(--primary) 24%, var(--border) 76%);
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--card) 92%, var(--primary) 5%),
            color-mix(in oklab, var(--card) 94%, var(--bg-context) 6%));
}

.rack-face-panel > .flex:first-child {
    border-bottom: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
    margin-bottom: 0.8rem;
    padding-bottom: 0.7rem;
}

.rack-face-panel h2 {
    font-size: 0.98rem;
    line-height: 1.2;
}

.rack-workspace .rack-diagram-scroll {
    border: 1px solid color-mix(in oklab, var(--border) 74%, var(--primary) 26%);
    border-radius: 0.8rem;
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--border) 30%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in oklab, var(--border) 24%, transparent) 1px, transparent 1px),
        color-mix(in oklab, var(--card) 82%, var(--bg-context) 18%);
    background-size: 36px 36px, 36px 36px, auto;
    box-shadow: inset 0 1px 0 color-mix(in oklab, white 44%, transparent);
}

.rack-workspace .rack-diagram-scroll svg {
    min-width: 18rem;
}

.rack-control-rail {
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.rack-side-panel {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in oklab, var(--primary) 28%, var(--border) 72%);
    border-radius: 0.8rem;
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--card) 94%, var(--primary) 6%),
            color-mix(in oklab, var(--card) 88%, var(--bg-context) 12%));
    padding: 0.85rem 0.9rem;
    box-shadow:
        0 16px 32px -30px color-mix(in oklab, var(--text-foreground) 30%, transparent),
        inset 0 1px 0 color-mix(in oklab, white 32%, transparent);
}

.rack-side-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.16rem;
    background: color-mix(in oklab, var(--primary) 52%, transparent);
}

.rack-side-panel > h2,
.rack-side-panel > div:first-child > h2 {
    margin-bottom: 0.4rem;
    color: var(--text-foreground);
    font-size: 0.95rem;
    line-height: 1.2;
}

.rack-side-panel > h2 + p {
    border-bottom: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
    margin-bottom: 0.7rem;
    padding-bottom: 0.65rem;
}

.rack-side-panel .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.65rem;
}

.rack-side-panel label {
    margin-bottom: 0.25rem;
    color: color-mix(in oklab, var(--text-muted) 82%, var(--text-foreground) 18%);
    font-size: 0.72rem;
    font-weight: 600;
}

.rack-side-panel input[type="text"],
.rack-side-panel input[type="number"],
.rack-side-panel select {
    min-height: 2.35rem;
    border-color: color-mix(in oklab, var(--border) 72%, var(--primary) 28%);
    border-radius: 0.55rem;
    background: color-mix(in oklab, var(--card) 86%, white 14%);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.rack-side-panel input[type="checkbox"] {
    width: 0.82rem;
    height: 0.82rem;
}

.rack-side-panel input[type="color"] {
    border-color: color-mix(in oklab, var(--border) 72%, var(--primary) 28%);
    border-radius: 0.5rem;
}

.rack-side-panel button[id^="add-"] {
    min-height: 2.35rem;
    border-radius: 0.55rem;
    padding: 0.55rem 0.85rem;
    box-shadow: 0 10px 18px -16px color-mix(in oklab, var(--primary) 70%, transparent);
}

.rack-side-panel #placed-list > div {
    gap: 0.55rem;
}

.rack-side-panel #placed-list > div > div {
    border-color: color-mix(in oklab, var(--border) 72%, var(--primary) 28%);
    background: color-mix(in oklab, var(--card) 90%, var(--bg-context) 10%);
    padding: 0.65rem 0.72rem;
}

.dark .rack-face-panel,
.dark .rack-side-panel {
    border-color: color-mix(in oklab, var(--border) 82%, var(--primary) 18%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.045);
}

.dark .rack-face-panel {
    border-color: color-mix(in oklab, var(--primary) 24%, var(--border) 76%);
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--card) 76%, var(--primary) 7%),
            color-mix(in oklab, var(--card) 80%, black 20%));
}

.dark .rack-side-panel {
    border-color: color-mix(in oklab, var(--primary) 30%, var(--border) 70%);
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--card) 78%, var(--primary) 8%),
            color-mix(in oklab, var(--card) 78%, black 22%));
}

.dark .rack-workspace .rack-diagram-scroll {
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--primary) 18%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in oklab, var(--primary) 13%, transparent) 1px, transparent 1px),
        color-mix(in oklab, var(--card) 78%, black 22%);
}

.dark .rack-side-panel input[type="text"],
.dark .rack-side-panel input[type="number"],
.dark .rack-side-panel select {
    background: color-mix(in oklab, var(--card) 82%, black 18%);
}

.dark .rack-side-panel #placed-list > div > div {
    background: color-mix(in oklab, var(--card) 80%, black 20%);
}

@media (min-width: 1280px) {
    .rack-layout-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .rack-control-rail {
        min-width: 0;
    }

    .rack-control-rail .grid.grid-cols-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1540px) {
    .rack-layout-grid {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .rack-control-rail .grid.grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Infrastructure mode: relationship workspace */
.related-workspace--infra .related-workspace__dialog {
    border-color: color-mix(in oklab, var(--primary) 18%, var(--border) 82%);
    border-radius: 0.85rem;
    background: color-mix(in oklab, var(--card) 96%, var(--bg-context) 4%);
    box-shadow: 0 30px 80px rgb(15 23 42 / 0.34);
}

.related-workspace--infra .related-workspace__header {
    border-bottom-color: color-mix(in oklab, var(--primary) 18%, var(--border) 82%);
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--infra-line, var(--primary)) 20%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in oklab, var(--infra-line, var(--primary)) 16%, transparent) 1px, transparent 1px),
        linear-gradient(135deg, color-mix(in oklab, var(--card) 82%, var(--bg-context) 18%), var(--card));
    background-size: 36px 36px, 36px 36px, auto;
}

.related-workspace--infra .related-workspace__title {
    font-size: 0.95rem;
    font-weight: 760;
    letter-spacing: 0;
}

.related-workspace--infra .related-workspace__subtitle {
    color: color-mix(in oklab, var(--text-muted) 82%, var(--text-foreground) 18%);
}

.related-workspace--infra .related-workspace__toolbar {
    border-bottom-color: color-mix(in oklab, var(--primary) 15%, var(--border) 85%);
    background: color-mix(in oklab, var(--card) 86%, var(--bg-context) 14%);
}

.related-workspace--infra .related-workspace__view-switch,
.related-workspace--infra .related-workspace__toggle,
.related-workspace--infra .related-workspace__control--close {
    border-color: color-mix(in oklab, var(--border) 78%, var(--primary) 22%);
    border-radius: 0.65rem;
    box-shadow: none;
}

.related-workspace--infra .related-workspace__control {
    border-radius: 0.55rem;
}

.related-workspace--infra .related-workspace__control.is-active {
    background: color-mix(in oklab, var(--primary) 72%, var(--bg-sidebar) 28%);
    box-shadow: none;
}

.related-workspace--infra .related-workspace__graph-shell {
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--border) 18%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in oklab, var(--border) 14%, transparent) 1px, transparent 1px),
        color-mix(in oklab, var(--card) 84%, var(--bg-context) 16%);
    background-size: 48px 48px, 48px 48px, auto;
}

.related-workspace--infra .related-workspace__aside {
    border-left-color: color-mix(in oklab, var(--primary) 18%, var(--border) 82%);
    background: color-mix(in oklab, var(--card) 88%, var(--bg-context) 12%);
}

.related-workspace--infra .related-workspace__metric,
.related-workspace--infra .related-workspace__details,
.related-workspace--infra .related-workspace__row,
.related-workspace--infra .related-workspace__chip {
    border-color: color-mix(in oklab, var(--border) 78%, var(--primary) 22%);
    border-radius: 0.55rem;
    background: color-mix(in oklab, var(--card) 92%, var(--bg-context) 8%);
}

.related-workspace--infra .related-workspace__row:hover,
.related-workspace--infra .related-workspace__row.is-active {
    border-color: color-mix(in oklab, var(--primary) 48%, var(--border) 52%);
    background: color-mix(in oklab, var(--card) 84%, var(--primary) 8%);
    transform: none;
}

.dark .related-workspace--infra .related-workspace__dialog,
.dark .related-workspace--infra .related-workspace__toolbar,
.dark .related-workspace--infra .related-workspace__aside,
.dark .related-workspace--infra .related-workspace__metric,
.dark .related-workspace--infra .related-workspace__details,
.dark .related-workspace--infra .related-workspace__row,
.dark .related-workspace--infra .related-workspace__chip {
    background: color-mix(in oklab, var(--card) 78%, black 22%);
}

.dark .related-workspace--infra .related-workspace__graph-shell {
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--primary) 9%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in oklab, var(--primary) 7%, transparent) 1px, transparent 1px),
        color-mix(in oklab, var(--card) 76%, black 24%);
}


/* Customer overview operating snapshot */
.customer-overview-workspace {
    --customer-op-border: color-mix(in oklab, var(--primary) 18%, var(--cv-border-soft) 82%);
}

.customer-doc-gap {
    overflow: hidden;
    border-color: color-mix(in oklab, var(--primary) 16%, var(--cv-border-soft) 84%);
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--cv-surface-1) 94%, var(--primary) 4%),
            color-mix(in oklab, var(--cv-surface-1) 98%, var(--bg-context) 2%));
    box-shadow:
        0 24px 40px -34px var(--cv-shadow-ambient),
        inset 0 1px 0 var(--cv-highlight);
}

.customer-doc-gap__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
    padding-bottom: 1rem;
}

.customer-doc-gap__eyebrow {
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in oklab, var(--primary) 18%, var(--border) 82%);
    border-radius: 999px;
    background: color-mix(in oklab, var(--primary) 6%, var(--cv-surface-1) 94%);
    color: color-mix(in oklab, var(--text-muted) 76%, var(--text-foreground) 24%);
    padding: 0.28rem 0.72rem;
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.customer-doc-gap__title {
    margin-top: 0.7rem;
    color: var(--text-foreground);
    font-size: 1.35rem;
    font-weight: 720;
    line-height: 1.2;
}

.customer-doc-gap__subtitle {
    margin-top: 0.25rem;
    color: color-mix(in oklab, var(--text-muted) 82%, var(--text-foreground) 18%);
    font-size: 0.9rem;
    line-height: 1.45;
}

.customer-doc-gap__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.customer-doc-gap-status,
.customer-doc-gap-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in oklab, var(--border) 76%, transparent);
    border-radius: 999px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.customer-doc-gap-status {
    min-height: 2.25rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
}

.customer-doc-gap-status--ready {
    border-color: color-mix(in oklab, var(--good) 24%, var(--border) 76%);
    background: color-mix(in oklab, var(--good) 8%, var(--cv-surface-1) 92%);
    color: color-mix(in oklab, var(--good) 72%, var(--text-foreground) 28%);
}

.customer-doc-gap-status--warning {
    border-color: color-mix(in oklab, var(--warn) 28%, var(--border) 72%);
    background: color-mix(in oklab, var(--warn) 8%, var(--cv-surface-1) 92%);
    color: color-mix(in oklab, var(--warn) 76%, var(--text-foreground) 24%);
}

.customer-doc-gap-status--danger {
    border-color: color-mix(in oklab, var(--bad) 28%, var(--border) 72%);
    background: color-mix(in oklab, var(--bad) 8%, var(--cv-surface-1) 92%);
    color: color-mix(in oklab, var(--bad) 76%, var(--text-foreground) 24%);
}

.customer-doc-gap__metrics .customer-metric-card {
    min-height: 5.5rem;
    border-radius: 0.72rem;
    box-shadow: inset 0 1px 0 var(--cv-highlight);
}

.customer-doc-gap-profile {
    border: 1px solid color-mix(in oklab, var(--primary) 18%, var(--border) 82%);
    border-radius: 0.85rem;
    background:
        linear-gradient(90deg, color-mix(in oklab, var(--primary) 8%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in oklab, var(--primary) 6%, transparent) 1px, transparent 1px),
        color-mix(in oklab, var(--cv-surface-1) 90%, var(--bg-context) 10%);
    background-size: 38px 38px, 38px 38px, auto;
    padding: 0.95rem 1rem;
}

.customer-doc-gap-profile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.customer-doc-gap-profile__label,
.customer-doc-gap-item__meta {
    color: color-mix(in oklab, var(--text-muted) 78%, var(--text-foreground) 22%);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.customer-doc-gap-profile__value {
    color: var(--text-foreground);
    font-size: 0.9rem;
    font-weight: 700;
}

.customer-doc-gap-profile__hint {
    margin-top: 0.45rem;
    color: color-mix(in oklab, var(--text-muted) 84%, var(--text-foreground) 16%);
    font-size: 0.88rem;
    line-height: 1.45;
}

.customer-doc-gap-item {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--border) 76%, transparent);
    border-radius: 0.82rem;
    background: color-mix(in oklab, var(--cv-surface-1) 92%, var(--bg-context) 8%);
    color: var(--text-foreground);
    padding: 0.9rem 1rem;
    text-decoration: none;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.customer-doc-gap-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    background: color-mix(in oklab, var(--primary) 42%, transparent);
}

.customer-doc-gap-item:hover {
    border-color: color-mix(in oklab, var(--primary) 28%, var(--border) 72%);
    background: color-mix(in oklab, var(--cv-surface-1) 86%, var(--primary) 5%);
    box-shadow: 0 14px 26px -26px var(--cv-shadow-ambient);
}

.customer-doc-gap-item--missing::before {
    background: var(--bad);
}

.customer-doc-gap-item--stale::before {
    background: var(--warn);
}

.customer-doc-gap-item--attention::before {
    background: var(--secondary);
}

.customer-doc-gap-item--covered::before {
    background: var(--good);
}

.customer-doc-gap-item__layout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.customer-doc-gap-item__content {
    min-width: 0;
}

.customer-doc-gap-item__title-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.customer-doc-gap-item__title {
    color: var(--text-foreground);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.customer-doc-gap-item__detail {
    margin-top: 0.35rem;
    color: color-mix(in oklab, var(--text-muted) 82%, var(--text-foreground) 18%);
    font-size: 0.88rem;
    line-height: 1.45;
}

.customer-doc-gap-item__meta {
    flex: 0 0 auto;
    padding-top: 0.15rem;
    text-align: right;
}

.customer-doc-gap-badge {
    padding: 0.25rem 0.48rem;
    font-size: 0.7rem;
}

.customer-doc-gap-badge--covered {
    border-color: color-mix(in oklab, var(--good) 22%, var(--border) 78%);
    background: color-mix(in oklab, var(--good) 7%, var(--cv-surface-1) 93%);
    color: color-mix(in oklab, var(--good) 72%, var(--text-foreground) 28%);
}

.customer-doc-gap-badge--stale {
    border-color: color-mix(in oklab, var(--warn) 28%, var(--border) 72%);
    background: color-mix(in oklab, var(--warn) 8%, var(--cv-surface-1) 92%);
    color: color-mix(in oklab, var(--warn) 76%, var(--text-foreground) 24%);
}

.customer-doc-gap-badge--missing {
    border-color: color-mix(in oklab, var(--bad) 28%, var(--border) 72%);
    background: color-mix(in oklab, var(--bad) 8%, var(--cv-surface-1) 92%);
    color: color-mix(in oklab, var(--bad) 76%, var(--text-foreground) 24%);
}

.customer-doc-gap-badge--attention {
    border-color: color-mix(in oklab, var(--secondary) 30%, var(--border) 70%);
    background: color-mix(in oklab, var(--secondary) 10%, var(--cv-surface-1) 90%);
    color: color-mix(in oklab, var(--secondary) 74%, var(--text-foreground) 26%);
}


@media (max-width: 760px) {
    .customer-doc-gap__header,
    .customer-doc-gap-profile__header,
    .customer-doc-gap-item__layout {
        align-items: flex-start;
        flex-direction: column;
    }

    .customer-doc-gap__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .customer-doc-gap-status,
    .customer-doc-gap__actions .customer-section-toggle {
        justify-content: center;
        width: 100%;
    }

    .customer-doc-gap-item__meta {
        text-align: left;
    }
}

.customer-operations {
    border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
    border-radius: 1.1rem;
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--cv-surface-1) 92%, var(--bg-context) 8%),
            color-mix(in oklab, var(--cv-surface-1) 98%, var(--bg-context) 2%));
    padding: 1rem;
    box-shadow:
        0 24px 40px -34px var(--cv-shadow-ambient),
        inset 0 1px 0 var(--cv-highlight);
}

.customer-operations__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid color-mix(in oklab, var(--border) 72%, transparent);
    padding-bottom: 1rem;
}

.customer-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-status-strip .customer-metric-card {
    min-height: 6rem;
    border-radius: 0.75rem;
    box-shadow: inset 0 1px 0 var(--cv-highlight);
}

.customer-status-strip .customer-metric-card:first-child {
    grid-column: span 2;
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--primary) 13%, var(--cv-surface-1) 87%),
            color-mix(in oklab, var(--cv-surface-1) 96%, var(--bg-context) 4%));
}

.customer-status-strip .customer-metric-card:first-child .customer-metric-card__value {
    font-size: 2.4rem;
}

.customer-dashboard-grid .customer-panel {
    border-radius: 0.9rem;
    box-shadow:
        0 20px 34px -32px var(--cv-shadow-ambient),
        inset 0 1px 0 var(--cv-highlight);
}

.customer-panel--activity {
    background: color-mix(in oklab, var(--cv-surface-1) 92%, var(--bg-context) 8%);
}

.customer-panel--risk {
    border-color: color-mix(in oklab, var(--warn) 18%, var(--cv-border-soft) 82%);
    background: color-mix(in oklab, var(--warn) 4%, var(--cv-surface-1) 96%);
}

.customer-panel--records {
    border-color: color-mix(in oklab, var(--primary) 20%, var(--cv-border-soft) 80%);
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--cv-surface-1) 92%, var(--primary) 5%),
            color-mix(in oklab, var(--cv-surface-1) 96%, var(--bg-context) 4%));
}

.customer-dashboard-grid .customer-panel-heading {
    border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    padding-bottom: 0.7rem;
}

.customer-panel--records #customer-snapshot > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-panel--records .customer-snapshot-row {
    border-radius: 0.65rem;
    padding: 0.7rem 0.8rem;
    box-shadow: none;
}

.customer-panel--records .customer-snapshot-row__icon {
    width: 1.7rem;
    height: 1.7rem;
    flex-basis: 1.7rem;
}

.customer-panel--records .customer-snapshot-row__value {
    border-radius: 0.55rem;
}


/* Customer overview operating snapshot panels */
.customer-operations__header .customer-section-label {
    border-color: color-mix(in oklab, var(--primary) 16%, var(--border) 84%);
    background: color-mix(in oklab, var(--primary) 5%, var(--cv-surface-1) 95%);
}

.customer-status-strip {
    align-items: stretch;
}

.customer-status-strip .customer-metric-card {
    position: relative;
    overflow: hidden;
    min-height: 5.4rem;
    border-radius: 0.72rem;
    padding: 0.95rem 1rem;
}

.customer-status-strip .customer-metric-card__value {
    margin-top: 0.45rem;
    font-size: 1.85rem;
    letter-spacing: 0;
}

.customer-dashboard-grid {
    align-items: stretch;
}
.customer-dashboard-grid .customer-panel {
    height: 100%;
}

.customer-dashboard-grid .customer-panel > div[id] {
    align-content: start;
}


.customer-dashboard-grid .customer-panel {
    border-radius: 0.86rem;
    padding: 1.05rem;
}

.customer-dashboard-grid .customer-panel-heading {
    display: flex;
    align-items: center;
    min-height: 2rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    color: color-mix(in oklab, var(--text-muted) 78%, var(--text-foreground) 22%);
    font-size: 0.74rem;
    font-weight: 760;
    letter-spacing: 0.16em;
    line-height: 1.2;
}

.customer-panel--activity {
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--cv-surface-1) 92%, var(--bg-context) 8%),
            color-mix(in oklab, var(--cv-surface-1) 98%, var(--bg-context) 2%));
}

.customer-panel--risk {
    border-color: color-mix(in oklab, var(--warn) 22%, var(--cv-border-soft) 78%);
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--warn) 5%, var(--cv-surface-1) 95%),
            color-mix(in oklab, var(--cv-surface-1) 96%, var(--bg-context) 4%));
}

.customer-panel--records {
    border-color: color-mix(in oklab, var(--primary) 22%, var(--cv-border-soft) 78%);
    background:
        linear-gradient(180deg,
            color-mix(in oklab, var(--cv-surface-1) 90%, var(--primary) 6%),
            color-mix(in oklab, var(--cv-surface-1) 97%, var(--bg-context) 3%));
}

.customer-dashboard-grid .customer-list-item {
    border-radius: 0.72rem;
    padding: 0.76rem 0.85rem;
    box-shadow: none;
}

.customer-dashboard-grid .customer-list-item:hover {
    transform: none;
    box-shadow: 0 12px 22px -24px var(--cv-shadow-ambient);
}

.customer-dashboard-grid .customer-list-item .h-9,
.customer-dashboard-grid .customer-list-item .w-9 {
    width: 1.85rem;
    height: 1.85rem;
}

.customer-hero-actions {
    width: fit-content !important;
    max-width: 100%;
    flex: 0 0 auto;
    border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
    border-radius: 0.85rem;
    background: color-mix(in oklab, var(--cv-surface-1) 84%, var(--cv-surface-2) 16%);
    padding: 0.35rem;
    box-shadow: inset 0 1px 0 var(--cv-highlight);
}

.customer-hero-actions .customer-hero-action {
    min-height: 2.35rem;
    min-width: 0;
    padding: 0.52rem 0.85rem;
    border-color: transparent;
    border-radius: 0.58rem;
    background: transparent;
    font-size: 0.82rem;
    white-space: nowrap;
    box-shadow: none;
}

.customer-hero-actions .customer-hero-action:hover {
    transform: none;
    background: color-mix(in oklab, var(--cv-surface-2) 80%, var(--cv-surface-1) 20%);
}

.customer-hero-actions .customer-hero-action--wide,
.customer-hero-actions .customer-hero-action--danger {
    min-width: 0;
    min-height: 2.35rem;
}

.customer-hero-actions .customer-hero-action--danger {
    border-color: color-mix(in oklab, var(--bad) 18%, transparent);
    background: color-mix(in oklab, var(--bad) 7%, transparent);
}

#customer-view .customer-hero-actions .hidden,
#customer-view .customer-hero-actions [hidden] {
    display: none !important;
}

@media (min-width: 1024px) {
    .customer-status-strip {
        grid-template-columns: minmax(13rem, 1.45fr) repeat(4, minmax(0, 1fr));
    }

    .customer-status-strip .customer-metric-card:first-child {
        grid-column: auto;
    }
}

@media (min-width: 1280px) {
    #customer-view .customer-hero-actions {
        max-width: max-content !important;
        padding-right: 0.35rem !important;
    }
}

@media (max-width: 760px) {
    .customer-operations {
        padding: 0.8rem;
    }

    .customer-operations__header {
        align-items: start;
        flex-direction: column;
    }

    .customer-panel--records #customer-snapshot > .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #customer-view .customer-hero-actions {
        align-items: stretch;
        width: 100% !important;
        flex: 1 1 100%;
    }

    .customer-hero-actions .customer-hero-action {
        flex: 1 1 9rem;
    }
}