/* =======================================================================
   Unify Web App — Theme & Layout
   ======================================================================= */

/* -----------------------------------------------------------------------
   Theme Variables
   ----------------------------------------------------------------------- */
:root {
    /* ── Palette defaults (overridden per-tenant by ThemeProvider) ── */
    --color-red: #E4002B;
    --color-red-70: #DB4C4C;
    --color-red-40: #F5CCCC;
    --color-red-20: #FAE5E5;
    --color-red-10: #FDF2F2;
    --color-darkred: #A6192E;
    --color-darkred-70: #C15E6C;
    --color-orange: #FF671F;
    --color-orange-70: #FF9863;
    --color-orange-10: #FFF3ED;
    --color-lime: #B5BD00;
    --color-lime-80: #737A00;
    --color-lime-70: #C9CE71;
    --color-lime-40: #DEE1AA;
    --color-lime-20: #EEF0D3;
    --color-lime-10: #F7F8E5;
    --color-blue: #0093B2;
    --color-blue-70: #56AAC6;
    --color-blue-40: #9EC8DB;
    --color-blue-20: #CCE9F0;
    --color-blue-10: #E5F4F7;
    --color-lightblue: #9BD3DD;
    --color-darkblue: #003865;
    --color-darkblue-70: #4C7393;
    --color-darkblue-40: #99AFC1;
    --color-darkblue-20: #CCD7E0;
    --color-darkblue-10: #E5EBEF;
    --color-indigo: #1D1740;
    --color-black: #000000;
    --color-darkestgray: #2A2D2D;
    --color-darkgray: #696B6B;
    --color-darkgray-70: #7E7B7D;
    --color-darkgray-40: #ABA9AA;
    --color-darkgray-20: #D0CECF;
    --color-darkgray-10: #F0F0F0;
    --color-gray: #A7A8AA;
    --color-lightestgray: #EEEEEE;
    --color-white: #FFFFFF;

    /* ── Semantic roles (what components reference) ── */
    --sidebar-bg: var(--color-darkblue);
    --sidebar-text: var(--color-white);
    --sidebar-active-accent: var(--color-blue);
    --topbar-bg: var(--color-white);
    --topbar-border: var(--color-darkgray-20);
    --page-bg: var(--color-darkgray-10);
    --content-bg: var(--color-white);
    --text-primary: var(--color-darkestgray);
    --text-secondary: var(--color-darkgray);
    --accent-primary: var(--color-blue);
    --accent-primary-hover: #007A96;
    --color-danger: var(--color-red);
    --color-danger-hover: var(--color-darkred);
    --color-warning: var(--color-orange);
    --color-success: var(--color-lime);
    /* Page-level title colour (large form headings). Semantic role — the
       palette swap happens in one place so a theme retint can move the
       page-title red to another palette entry without touching every
       component. */
    --color-page-title: var(--color-red);
    --border: var(--color-darkgray-20);
    --border-light: var(--color-darkgray-10);

    /* ── Extended semantic roles ── */
    --text-tertiary: #888888;
    --text-muted: #999999;
    --text-heading: #1a1a2e;
    --surface: #f9fafb;
    --surface-hover: #f3f4f6;
    --input-border: #d1d5db;
    --input-border-hover: #9ca3af;
    --divider: #e5e7eb;
    --divider-light: #f0f0f0;
    --backdrop: rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --row-hover: #f5f5ff;
    --row-selected: #eef2ff;
    --row-selected-hover: #e0e7ff;
    --row-highlighted: #dbeafe;
    --row-highlighted-hover: #c7d8f7;
    --row-highlighted-selected: #c7d2fe;
    --color-success-action: #059669;
    --color-success-action-hover: #047857;
    --chip-accent: #6366f1;
    --chip-grouped-bg: #e8ecff;
    --chip-grouped-border: #a5b4fc;
    --chip-nested-bg: #dde3ff;
    --chip-nested-border: #818cf8;

    /* ── Layout ── */
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 56px;
    --topbar-height: 44px;
    --tab-height: 36px;
    --split-handle-size: 6px;

    /* ── Typography ── */
    --font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-base: 0.875rem;

    /* ── Effects ── */
    --radius-sm: 4px;
    --radius-md: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.12);
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
}

/* -----------------------------------------------------------------------
   Reset & Base
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* workspace manages its own scrolling */
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background: var(--page-bg);
}

h1:focus { outline: none; }

/* -----------------------------------------------------------------------
   App Shell
   ----------------------------------------------------------------------- */
.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* -----------------------------------------------------------------------
   Sidebar
   ----------------------------------------------------------------------- */
.app-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--transition-normal);
    container-type: inline-size;
    container-name: sidebar;
}

.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    transition: background var(--transition-fast);
    z-index: 301;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle-dragging {
    background: rgba(255, 255, 255, 0.15);
}

/* Unpinned: sidebar collapses to icon strip */
.sidebar-unpinned .app-sidebar {
    width: var(--sidebar-collapsed-width);
}

/* Unpinned + open: sidebar expands as overlay (doesn't push content) */
.sidebar-unpinned.sidebar-open .app-sidebar {
    width: var(--sidebar-width);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25);
}

.nav-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav-brand {
    padding: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: var(--topbar-height);
}

.nav-brand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-brand-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
}

/* The Tooltip component wraps the pin button in a div.tooltip-anchor,
   so margin-left:auto must go on the button inside (the actual layout child).
   `.tooltip-anchor` uses `display: contents` — it has no box, so a margin on
   it has no effect. The button nested inside IS the real flex child of
   .nav-brand (contents pass-through), so the auto-margin on the button is
   what pushes the pin right.
   Scoped to pinned/open state so it doesn't interfere with collapsed centering. */
:not(.sidebar-unpinned) > .app-sidebar .nav-brand > :last-child,
.sidebar-open > .app-sidebar .nav-brand > :last-child,
:not(.sidebar-unpinned) > .app-sidebar .nav-brand > :last-child > .nav-brand-btn,
.sidebar-open > .app-sidebar .nav-brand > :last-child > .nav-brand-btn {
    margin-left: auto;
}

.nav-pin-btn {
    opacity: 0.5;
    transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.nav-pin-btn:hover {
    opacity: 1;
}

.nav-pin-angled .nav-svg {
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}

.nav-pin-active {
    opacity: 1;
    color: var(--sidebar-active-accent);
}

.nav-pin-active .nav-svg {
    transform: rotate(0deg);
    transition: transform var(--transition-fast);
}

.nav-pin-active:hover {
    color: var(--sidebar-active-accent);
}

.nav-logo {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-white);
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}


.nav-links {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    flex: 1;
}

.nav-separator {
    margin: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-section-title {
    list-style: none;
    padding: 0.75rem 0.75rem 0.25rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
}

.nav-section-title:first-child {
    padding-top: 0.25rem;
}

.nav-workspace-switcher {
    list-style: none;
    padding: 0 0.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    width: 100%;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: rgba(255, 255, 255, 0.65);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
}

.nav-link.active {
    background: rgba(0, 147, 178, 0.15);
    color: var(--sidebar-text);
    border-left-color: var(--sidebar-active-accent);
}

.nav-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Unpinned collapsed: hide text and pin (including its Tooltip wrapper) */
.sidebar-unpinned:not(.sidebar-open) .nav-logo {
    display: none;
}

.sidebar-unpinned:not(.sidebar-open) .nav-brand > :last-child {
    display: none;
}

.sidebar-unpinned:not(.sidebar-open) .nav-brand {
    justify-content: center;
    padding: 0.5rem 0;
}

.sidebar-unpinned:not(.sidebar-open) .nav-link {
    justify-content: center;
    padding: 0.625rem 0;
    border-left: none;
    gap: 0;
    font-size: 0;        /* hides the text node */
    overflow: hidden;
}

.sidebar-unpinned:not(.sidebar-open) .nav-link .nav-svg {
    font-size: initial;  /* SVG unaffected by font-size: 0 */
}

.sidebar-unpinned:not(.sidebar-open) .nav-separator {
    margin: 0.5rem 0.5rem;
}

/* Collapsed-only separators: hidden when expanded (section titles provide the break) */
.nav-separator-collapsed {
    display: none;
}

/* Expanded-only separators: hidden when collapsed */
.sidebar-unpinned:not(.sidebar-open) .nav-separator-expanded {
    display: none;
}

.sidebar-unpinned:not(.sidebar-open) .nav-separator-collapsed {
    display: list-item;
    margin: 0.5rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-unpinned:not(.sidebar-open) .nav-section-title,
.sidebar-unpinned:not(.sidebar-open) .nav-workspace-switcher {
    display: none;
}

/* -----------------------------------------------------------------------
   Content Area
   ----------------------------------------------------------------------- */
.app-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    transition: margin-left var(--transition-normal);
}

/* Content always uses collapsed margin when unpinned — hover opens as overlay */
.sidebar-unpinned .app-content {
    margin-left: var(--sidebar-collapsed-width);
}


/* -----------------------------------------------------------------------
   Topbar
   ----------------------------------------------------------------------- */
.app-topbar {
    height: var(--topbar-height);
    background: linear-gradient(to right, var(--accent-primary) 0%, var(--topbar-bg) 100%);
    border-bottom: 1px solid var(--topbar-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    flex-shrink: 0;
    z-index: 200;
    position: relative;
}

.topbar-left {
    display: flex;
    align-items: center;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.topbar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    color: var(--color-darkgray);
    font-size: 1.1rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.topbar-btn:hover {
    background: var(--page-bg);
}

.user-name {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
}

.btn-logout {
    font-size: var(--font-size-xs);
    color: var(--accent-primary);
    text-decoration: none;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-logout:hover {
    background: var(--accent-primary);
    color: var(--color-white);
}

/* ── + New button ── */

.new-record-dropdown {
    position: relative;
}

.btn-new {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.btn-new:hover {
    background: var(--page-bg);
    border-color: var(--accent-primary);
}

.btn-new-icon {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--accent-primary);
}

.btn-new-caret {
    font-size: 0.55rem;
    color: var(--color-gray);
    line-height: 1;
}

.new-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 170px;
    background: var(--color-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.3rem 0;
    z-index: 200;
    outline: none;
}

.new-menu-item {
    display: block;
    width: 100%;
    padding: 0.45rem 0.85rem;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.new-menu-item:hover {
    background: var(--page-bg);
}

/* ── Search / command box ── */

.topbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    width: 100%;
    max-width: 560px;
    padding: 0 1.5rem;
}

.search-box {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--page-bg);
    cursor: text;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.search-box:focus-within {
    border-color: var(--accent-primary);
    background: var(--color-white);
    box-shadow: 0 0 0 2px rgba(0, 147, 178, 0.1);
}

.search-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-gray);
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--text-primary);
    padding: 0.1rem 0.5rem;
    min-width: 0;
}

.search-input::placeholder {
    color: var(--color-gray);
}

.search-shortcut {
    flex-shrink: 0;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-gray);
    font-size: 0.65rem;
    font-family: inherit;
    line-height: 1.4;
}

/* -----------------------------------------------------------------------
   Main Content (workspace fills this)
   ----------------------------------------------------------------------- */
.app-main {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.app-shortcut-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.2rem 0.75rem;
    background: var(--content-bg);
    border-top: 1px solid var(--border);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    flex-shrink: 0;
    gap: 0.5rem;
}

.app-shortcut-bar kbd {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--text-secondary);
}

.shortcut-sep {
    color: var(--border);
}

.shortcut-item {
    white-space: nowrap;
}

/* =======================================================================
   Workspace Picker (landing page)
   ======================================================================= */
.workspace-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
}

.workspace-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1.5rem;
}

.workspace-picker-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-workspace-new {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-workspace-new:hover {
    background: var(--page-bg);
    border-color: var(--accent-primary);
}

.btn-workspace-new-link {
    border: none;
    background: none;
    color: var(--accent-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    padding: 0.3rem 0;
    transition: color var(--transition-fast);
}

.btn-workspace-new-link:hover {
    color: var(--accent-primary-hover);
}

.workspace-picker-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-workspace-clear-link {
    border: none;
    background: none;
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    padding: 0.3rem 0;
    transition: color var(--transition-fast);
}

.btn-workspace-clear-link:hover {
    color: var(--danger);
}

.workspace-picker-loading {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.workspace-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem 10vh;
    text-align: center;
    flex: 1;
}

.workspace-picker-empty .empty-icon {
    color: var(--text-tertiary);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.workspace-picker-empty .empty-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.workspace-picker-empty .empty-description {
    margin: 0 0 1.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.btn-workspace-create {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent-primary);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.btn-workspace-create:hover {
    background: var(--accent-primary-hover);
}

.workspace-picker-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.workspace-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--content-bg);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.workspace-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-sm);
}

.workspace-card.pinned {
    border-left: 3px solid var(--accent-primary);
}

.workspace-card.loading {
    opacity: 0.6;
    pointer-events: none;
}

.workspace-card.loading .workspace-card-meta::after {
    content: " \2014  Loading...";
    color: var(--text-tertiary);
}

.workspace-card-pin {
    flex-shrink: 0;
}

.workspace-card-pin .btn-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.workspace-card-pin .btn-pin:hover {
    color: var(--accent-primary);
    background: var(--color-blue-10);
}

.workspace-card.pinned .btn-pin {
    color: var(--accent-primary);
}

.workspace-card-body {
    flex: 1;
    min-width: 0;
}

.workspace-card-name {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-card-meta {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

.workspace-card-meta .meta-dot::before {
    content: "\00b7";
    font-weight: bold;
}

.workspace-card-rename-input {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
}

.workspace-card-actions {
    display: flex;
    gap: 0.125rem;
    flex-shrink: 0;
    align-items: center;
}

/* Hover buttons — hidden by default, shown on hover (desktop) */
.workspace-hover-actions {
    display: none;
    gap: 0.125rem;
}

.workspace-card:hover .workspace-hover-actions {
    display: flex;
}

/* Kebab menu — always visible */
.workspace-kebab {
    position: relative;
}

/* On desktop hover, hide kebab since hover buttons are shown */
.workspace-card:hover .workspace-kebab {
    display: none;
}

/* Touch devices: no hover, so kebab stays, hover buttons never show */
@media (hover: none) {
    .workspace-hover-actions {
        display: none !important;
    }
    .workspace-card:hover .workspace-kebab {
        display: block;
    }
}

.btn-kebab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.btn-kebab:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}

.kebab-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 120px;
    z-index: 100;
    padding: 0.25rem 0;
}

.kebab-menu-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: none;
    text-align: left;
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.kebab-menu-item:hover {
    background: var(--page-bg);
}

.kebab-menu-danger {
    color: var(--color-danger);
}

.kebab-menu-danger:hover {
    background: var(--color-red-10);
}

.btn-workspace-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.btn-workspace-action:hover {
    color: var(--accent-primary);
    background: var(--color-blue-10);
}

.btn-workspace-action-confirm:hover {
    color: var(--color-success-action);
    background: rgba(5, 150, 105, 0.1);
}

.btn-workspace-action-danger:hover {
    color: var(--color-danger);
    background: var(--color-red-10);
}

/* Delete confirmation overlay */
.workspace-picker-overlay {
    position: fixed;
    inset: 0;
    background: var(--backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.workspace-picker-confirm {
    background: var(--content-bg);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}

.workspace-picker-confirm p {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}

.workspace-picker-confirm .confirm-detail {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.confirm-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.btn-confirm-cancel,
.btn-confirm-delete {
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.btn-confirm-cancel {
    background: var(--content-bg);
    color: var(--text-primary);
}

.btn-confirm-cancel:hover {
    background: var(--surface-hover);
}

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

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

/* =======================================================================
   Workspace Switcher (sidebar)
   ======================================================================= */
.workspace-switcher {
    position: relative;
    padding: 0.375rem 0;
}

.workspace-switcher-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.workspace-switcher-rename {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
    opacity: 0;
}

.workspace-switcher:hover .workspace-switcher-rename,
.workspace-switcher-input + .workspace-switcher-rename {
    opacity: 1;
}

.workspace-switcher-rename:hover {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

.workspace-switcher-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), border-color var(--transition-fast);
    text-align: left;
}

.workspace-switcher-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.workspace-switcher-icon {
    flex-shrink: 0;
    opacity: 0.6;
}

.workspace-switcher-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.workspace-switcher-caret {
    flex-shrink: 0;
    opacity: 0.85;
}

.workspace-switcher-input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--sidebar-active-accent);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: 500;
    outline: none;
}

.workspace-dd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 399;
}

.workspace-switcher-dropdown {
    position: absolute;
    top: 100%;
    left: 0.5rem;
    right: 0.5rem;
    background: var(--sidebar-bg);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 400;
    display: flex;
    flex-direction: column;
    max-height: 320px;
}

.workspace-dd-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.workspace-dd-list::-webkit-scrollbar {
    width: 6px;
}

.workspace-dd-list::-webkit-scrollbar-track {
    background: transparent;
}

.workspace-dd-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.workspace-dd-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.workspace-dd-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.25rem 0;
    flex-shrink: 0;
}

.workspace-dd-loading {
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-size-sm);
}

.workspace-dd-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.workspace-dd-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
}

.workspace-dd-item.active {
    color: var(--sidebar-active-accent);
    background: rgba(0, 147, 178, 0.15);
}

.dd-pin-icon {
    color: var(--sidebar-active-accent);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.dd-pin-btn {
    font-size: 0.75rem;
    flex-shrink: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.2);
    transition: color var(--transition-fast);
}

.dd-pin-btn:hover {
    color: rgba(255, 255, 255, 0.6);
}

.dd-pin-btn.dd-pin-active {
    color: var(--sidebar-active-accent);
}

.dd-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dd-item-meta {
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.dd-new-icon {
    font-weight: 700;
    font-size: 1rem;
}

/* Hide workspace switcher when sidebar is collapsed */
.sidebar-unpinned:not(.sidebar-open) .workspace-switcher {
    display: none;
}

/* =======================================================================
   Workspace
   ======================================================================= */
.workspace-root {
    width: 100%;
    height: 100%;
    outline: none;
    display: flex;
    flex-direction: column;
}

.unsaved-warning {
    padding: 0.35rem 1rem;
    background: var(--color-orange-10);
    border-bottom: 1px solid var(--color-orange-70);
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    text-align: center;
    flex-shrink: 0;
    animation: unsaved-warning-fade-in 0.2s ease-out;
}

@keyframes unsaved-warning-fade-in {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------------------
   Panel (leaf node with tabs + content)
   ----------------------------------------------------------------------- */
.panel-leaf {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--content-bg);
    border: 1px solid transparent;
    transition: border-color var(--transition-fast);
}

.panel-focused {
    border-color: var(--accent-primary);
}

.panel-content {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Tab content items live inside panel-content. All tabs are rendered
   with @key for Blazor preservation; inactive tabs use display:none.
   For cross-panel moves, TabStateStore preserves component state. */
.tab-content-item {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

/* Full-bleed page host for pages with toolbars */
.page-host {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* -----------------------------------------------------------------------
   Tab Strip
   ----------------------------------------------------------------------- */
.tab-strip {
    display: flex;
    align-items: stretch;
    background: var(--page-bg);
    border-bottom: 1px solid var(--border);
    min-height: var(--tab-height);
    flex-shrink: 0;
    position: relative;
    z-index: 51; /* Above dock overlay (z-index: 50) so tab drops work during drag */
    touch-action: none;
}

.tab-strip-scroll {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: none; /* Firefox */
}

.tab-strip-scroll::-webkit-scrollbar {
    display: none;
}

/* Hide tab strip until scroll position is restored to prevent jump */
.tab-strip-loading {
    visibility: hidden;
}

.tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.75rem;
    height: var(--tab-height);
    font-size: var(--font-size-xs);
    color: var(--color-darkgray);
    background: transparent;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer !important;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 200px;
    touch-action: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    user-select: none;
    position: relative;
    -webkit-user-drag: element;
}

.tab:active {
    cursor: grabbing !important;
}

.tab:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

.tab-active {
    background: var(--color-white);
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--color-blue);
}

.tab-pinned {
    opacity: 0.85;
}

.tab-pinned + .tab:not(.tab-pinned) {
    margin-left: 2px;
    border-left: 1px solid var(--border);
}

.tab-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-title-input {
    background: var(--color-white);
    border: 1px solid var(--accent-primary);
    border-radius: 3px;
    font-size: inherit;
    font-family: inherit;
    color: var(--text-primary);
    padding: 0 10px 0 0.25rem;
    field-sizing: content;
    min-width: 2ch;
    max-width: 200px;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 147, 178, 0.15);
}

.tab-dirty-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
}

.tab-pin-indicator::after {
    content: "\1F4CC";
    font-size: 0.6rem;
}

.tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-gray);
    padding: 0;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.tab:hover .tab-close,
.tab-active .tab-close {
    opacity: 1;
}

.tab-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-danger);
}

.tab-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.5rem;
    font-weight: 700;
    color: var(--color-gray);
    padding: 0;
    flex-shrink: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.tab-confirm:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-success);
}

.tab-strip-actions {
    display: none;
    align-items: center;
    padding: 0 0.25rem;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

.tab-strip-overflowing .tab-strip-actions {
    display: flex;
}

.tab-strip-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.45rem;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tab-strip-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

.tab-scroll-group {
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-sm);
    margin-right: 0.25rem;
}

.tab-scroll-group .tab-strip-btn {
    border-radius: 0;
    padding: 0.3rem 0.45rem;
}

.tab-scroll-group .tab-strip-btn:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.tab-scroll-group .tab-strip-btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}



/* -----------------------------------------------------------------------
   Tab Context Menu
   ----------------------------------------------------------------------- */
.tab-context-menu {
    position: fixed;
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.25rem 0;
    min-width: 160px;
    z-index: 1000;
    outline: none;
}

.ctx-item {
    display: block;
    width: 100%;
    padding: 0.375rem 0.875rem;
    background: none;
    border: none;
    text-align: left;
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.ctx-item:hover {
    background: var(--page-bg);
}

.ctx-item:disabled {
    color: var(--color-gray);
    cursor: not-allowed;
}

.ctx-divider {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--border-light);
}

/* -----------------------------------------------------------------------
   Tab Picker Dropdown
   ----------------------------------------------------------------------- */
.tab-picker {
    position: absolute;
    top: 100%;
    right: 0;
    width: 280px;
    max-height: 360px;
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tab-picker-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-light);
}

.tab-picker-search input {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: var(--font-family);
    background: var(--page-bg);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-fast);
}

.tab-picker-search input:focus {
    border-color: var(--accent-primary);
}

.tab-picker-search input::placeholder {
    color: var(--color-gray);
}

.tab-picker-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.25rem 0;
}

.tab-picker-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: background var(--transition-fast);
}

.tab-picker-item-highlight {
    background: var(--page-bg);
}

.tab-picker-item-active {
    font-weight: 600;
}

.tab-picker-item-active::before {
    content: '';
    width: 3px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.tab-picker-icon {
    font-size: 0.85rem;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

.tab-picker-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tab-picker-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-gray);
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.tab-picker-item:hover .tab-picker-close,
.tab-picker-item-highlight .tab-picker-close {
    opacity: 1;
}

.tab-picker-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--color-danger);
}

.tab-picker-close:disabled {
    display: none;
}


/* -----------------------------------------------------------------------
   Split Panes
   ----------------------------------------------------------------------- */
.split-container {
    display: flex;
    height: 100%;
    width: 100%;
}

.split-horizontal {
    flex-direction: row;
}

.split-vertical {
    flex-direction: column;
}

.split-pane {
    overflow: hidden;
    min-width: 100px;
    min-height: 80px;
}

.split-handle {
    flex-shrink: 0;
    background: var(--border);
    transition: background var(--transition-fast);
    z-index: 10;
}

.split-handle:hover,
.split-handle-dragging {
    background: var(--accent-primary);
}

.split-handle-horizontal {
    width: var(--split-handle-size);
    cursor: col-resize;
}

.split-handle-vertical {
    height: var(--split-handle-size);
    cursor: row-resize;
}

/* -----------------------------------------------------------------------
   Dock Zone Overlay (drag-to-split)
   ----------------------------------------------------------------------- */
.dock-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    display: none;
}

.dock-overlay-visible {
    display: block;
    pointer-events: auto;
}

.panel-leaf {
    position: relative;
}

.dock-zone {
    position: absolute;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    background: rgba(0, 147, 178, 0.04);
    border: 1px solid rgba(0, 147, 178, 0.15);
    border-radius: var(--radius-sm);
}

/* Non-overlapping zone layout:
   +--------+---------+--------+
   |        |   top   |        |
   |  left  +---------+  right |
   |        | center  |        |
   |        +---------+        |
   |        |  bottom |        |
   +--------+---------+--------+  */

.dock-zone-left {
    left: 0;
    top: 0;
    width: 20%;
    height: 100%;
}

.dock-zone-right {
    right: 0;
    top: 0;
    width: 20%;
    height: 100%;
}

.dock-zone-top {
    left: 20%;
    top: 0;
    width: 60%;
    height: 20%;
}

.dock-zone-bottom {
    left: 20%;
    bottom: 0;
    width: 60%;
    height: 20%;
}

.dock-zone-center {
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
}

.dock-zone-active {
    background: rgba(0, 147, 178, 0.15);
    border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-md);
}

/* -----------------------------------------------------------------------
   Tab Drag Feedback
   ----------------------------------------------------------------------- */
.tab[draggable="true"] {
    cursor: grab;
}

.tab[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.6;
}

/* Drop insertion indicators — vertical line positioned in the gap between tabs */
.tab-drop-before::before,
.tab-drop-after::after {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 3px;
    background: var(--accent-primary);
    border-radius: 2px;
    z-index: 10;
    pointer-events: none;
}

.tab-drop-before::before {
    left: -2px;
}

.tab-drop-after::after {
    right: -2px;
}

/* Touch drag ghost */
.tab-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    opacity: 0.85;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.75rem;
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    -webkit-touch-callout: none;
}

.tab-dragging {
    opacity: 0.4;
    -webkit-touch-callout: none;
}

/* -----------------------------------------------------------------------
   Blazor Defaults
   ----------------------------------------------------------------------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

#blazor-error-ui {
    background: var(--color-danger);
    color: var(--color-white);
    padding: 0.5rem 1.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    text-align: center;
    font-size: var(--font-size-xs);
    display: none;
}

#blazor-error-ui .reload {
    color: var(--color-white);
    font-weight: 600;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-left: 1rem;
}

/* -----------------------------------------------------------------------
   Status Text — Standardized centered feedback messages
   ----------------------------------------------------------------------- */
.status-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.status-loading p {
    margin: 0;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-light);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: status-spin 0.8s linear infinite;
}

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

.status-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding: 2rem;
}

.status-empty p {
    margin: 0.25rem 0;
}

.status-watermark {
    color: var(--border-light);
    margin-bottom: 0.75rem;
}

/* ── Workspace empty state (no tabs open) ── */

.workspace-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 2rem 10vh;
}

.workspace-empty .empty-icon {
    color: var(--text-tertiary);
    margin-bottom: 1rem;
    opacity: 0.4;
}

.workspace-empty .empty-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.workspace-empty .empty-description {
    margin: 0 0 1.25rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.workspace-empty .empty-quick-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.workspace-empty .empty-quick-actions + .empty-quick-actions {
    margin-top: 0.5rem;
}

.workspace-empty .empty-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    padding: 0.4rem 0;
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    background: var(--content-bg);
    color: var(--accent-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.workspace-empty .empty-action:hover {
    background: var(--accent-primary);
    color: #fff;
}

/* Error state: same centered-column shape as loading/empty so layouts don't
   jump when switching between states. The colored background + padding is a
   card treatment applied to a middle child so errors are visually contained
   without collapsing the flex parent. */
.status-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    padding: 2rem;
    gap: 0.5rem;
}

.status-error p {
    margin: 0;
    padding: 0.5rem 1rem;
    background: var(--color-red-10);
    border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════════════
   ENTITY LIST — Column classes (global, used across entity list pages)

   Column widths pull from a shared token scale so sibling lists stay
   visually aligned without eyeballed per-page numbers. Use :
     --col-size-xxs  narrow numeric / status        (60px)
     --col-size-xs   short text / compact date      (80px)
     --col-size-sm   small identifier               (100px)
     --col-size-md   standard label (name, title)   (140px)
     --col-size-lg   long text (description)        (200px)
     --col-size-xl   extra-long free text           (260px)
   Prefer min-width on ellipsis-truncated columns, fixed width on
   numeric/date columns where the content is a known size.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --col-size-xxs: 60px;
    --col-size-xs: 80px;
    --col-size-sm: 100px;
    --col-size-md: 140px;
    --col-size-lg: 200px;
    --col-size-xl: 260px;
}

/* Reusable ellipsis-truncation mixin — applied to every text column so
   long values don't blow out the row height. Declared once here instead
   of repeated per-class. */
.col-ellipsis,
.col-group,
.col-description,
.col-created-by,
.col-share,
.col-first-name,
.col-last-name,
.col-job-title,
.col-office,
.col-team,
.col-phone {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Universal columns (all entity lists) ── */

/* ID column — two states in the same column slot:
   • Expanded: normal data column showing "ID" label + sort arrow + values.
   • Collapsed: narrow click-to-expand chevron, no data. */

.col-id {
    width: var(--col-size-xxs);
    text-align: right !important;
}

.col-id.col-id-collapsed {
    width: 24px;
    padding: 0 !important;
    text-align: center !important;
    cursor: pointer;
    user-select: none;
}

th.col-id.col-id-collapsed {
    border-right: 1px solid var(--input-border);
    color: var(--text-tertiary);
    transition: color var(--transition-fast);
}

th.col-id.col-id-collapsed:hover {
    color: var(--accent-primary);
}

/* Collapse button inside the expanded ID header (flips the column back to collapsed). */
.col-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-right: 4px;
    border: none;
    border-radius: 2px;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: color 0.1s, background 0.1s;
    vertical-align: middle;
}

.col-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}

.cell-muted { color: var(--text-tertiary); }

/* ── Group List columns ── */

.col-group       { min-width: var(--col-size-md); }
.col-description { min-width: var(--col-size-md); }
.col-contacts    { width: var(--col-size-xs); text-align: right !important; }
.col-created-by  { min-width: var(--col-size-sm); }
.col-share       { min-width: var(--col-size-sm); }
.col-updated     { width: var(--col-size-sm); text-align: right !important; }

/* ── User List columns ── */

.col-first-name { min-width: var(--col-size-sm); }
.col-last-name  { min-width: var(--col-size-sm); }
.col-job-title  { min-width: var(--col-size-md); }
.col-office     { min-width: var(--col-size-sm); }
.col-team       { min-width: var(--col-size-sm); }
.col-phone      { min-width: var(--col-size-sm); }

/* Primary-name cell on any entity list — bold weight signals "this is
   the record's identity", distinct from blue link cells that signal
   cross-entity navigation. Applied via <span class="entity-name"> in the
   column descriptor's CellTemplate. */
.entity-name { font-weight: 500; }