/* ============================================================
   Hque global overrides
   --------------------------------------------------------------
   PR 2 of theme refresh. Replaces the previous app.css.
   Three jobs:
   1. Set the system font stack globally (the portal moves off
      Space Grotesk; the marketing site keeps its own fonts).
   2. Flatten all MudBlazor surfaces (no shadows, 1px borders,
      6px radius, sentence-case buttons, GitHub-style focus ring).
   3. Provide the heading scale and the link/button language so
      *.razor.css files in PR 3 can drop their per-component
      overrides without losing visual coherence.
   ============================================================ */

/* --- Font stack --------------------------------------------- */
html, body, .mud-typography, .mud-input, .mud-button-root,
.mud-table, .mud-list-item, .mud-menu-item, .mud-tooltip,
.mud-dialog, .mud-tab {
    font-family: var(--font-sans);
}

.mono, code, kbd, pre, samp,
.mud-input--mono input {
    font-family: var(--font-mono);
}

/* --- Heading scale ------------------------------------------ */
h1, .h1 { font-size: 26px; font-weight: 500; line-height: 1.3; color: var(--fg-default); margin: 0 0 12px; }
h2, .h2 { font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--fg-default); margin: 0 0 10px; }
h3, .h3 { font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--fg-default); margin: 0 0 8px; }
h4, .h4 { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--fg-default); margin: 0 0 6px; }
h5, .h5 { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--fg-default); margin: 0 0 4px; }

/* Override the legacy serif heading classes so any *.razor.css
   still referencing them gets the new sans treatment. PR 3
   removes the class usages. */
.org-title, .tl-title, .te-title, .brand-headline, .dialog-title, .tif-title {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
}

/* --- Links -------------------------------------------------- */
a, .mud-link {
    color: var(--accent-fg);
    text-decoration: none;
}
a:hover, .mud-link:hover {
    text-decoration: underline;
}

/* --- Focus ring (the GitHub signature) ---------------------- */
*:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-md);
}

/* ============================================================
   Flatten MudBlazor surfaces
   ============================================================ */

.mud-paper, .mud-card, .mud-dialog, .mud-popover, .mud-menu-popover,
.mud-table, .mud-tabs, .mud-appbar, .mud-drawer, .mud-tooltip,
.mud-snackbar, .mud-expansion-panels {
    box-shadow: none !important;
}

.mud-paper, .mud-card {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.mud-popover, .mud-menu-popover {
    background: var(--canvas-overlay);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.mud-dialog {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

/* --- Buttons ------------------------------------------------ */
.mud-button-root {
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transition: background-color 80ms ease, border-color 80ms ease;
}

.mud-button-outlined {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--fg-default);
}
.mud-button-outlined:hover {
    background: var(--canvas-subtle);
    border-color: var(--border-default);
}

.mud-button-filled.mud-button-filled-primary {
    background: var(--accent-fg);
    color: var(--fg-on-emphasis);
    border: 1px solid var(--accent-fg);
}
.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--accent-emphasis);
    border-color: var(--accent-emphasis);
}

.mud-button-filled, .mud-fab {
    box-shadow: none !important;
}
.mud-button-filled:hover, .mud-fab:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* --- Inputs ------------------------------------------------- */
.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-default);
}
.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--accent-fg);
    box-shadow: var(--focus-ring);
}
.mud-input input, .mud-input textarea, .mud-input-slot {
    color: var(--fg-default);
}
.mud-input-label {
    color: var(--fg-muted);
    font-size: 13px;
}

/* --- Tabs --------------------------------------------------- */
.mud-tab {
    text-transform: none !important;
    font-weight: 400 !important;
    color: var(--fg-muted) !important;
    min-width: 0 !important;
    padding: 10px 0 !important;
    margin-right: 24px !important;
}
.mud-tab.mud-tab-active {
    color: var(--fg-default) !important;
    font-weight: 500 !important;
}
.mud-tabs-toolbar-content .mud-tab-slider {
    background: var(--fg-default) !important;
    height: 2px !important;
}

/* --- Tables ------------------------------------------------- */
.mud-table {
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.mud-table-cell {
    border-color: var(--border-muted);
    color: var(--fg-default);
    padding: 8px 12px;
}
.mud-table-head .mud-table-cell {
    background: var(--canvas-subtle);
    color: var(--fg-muted);
    font-weight: 500;
    font-size: 12px;
}
.mud-table-row:hover {
    background: var(--canvas-subtle);
}

/* --- Switches / chips --------------------------------------- */
.mud-switch-track { background: var(--border-default); }
.mud-switch-input.mud-checked + .mud-switch-track { background: var(--accent-fg); }

.mud-chip {
    background: var(--neutral-subtle);
    color: var(--fg-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    height: auto;
    padding: 2px 10px;
}

/* --- Dialogs ------------------------------------------------ */
.mud-dialog-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--fg-default);
    border-bottom: 1px solid var(--border-default);
    padding: 16px 20px;
}
.mud-dialog-content {
    padding: 16px 20px;
    color: var(--fg-default);
}
.mud-dialog-actions {
    border-top: 1px solid var(--border-default);
    padding: 12px 20px;
}

/* --- Tooltip ------------------------------------------------ */
.mud-tooltip {
    background: var(--fg-default);
    color: var(--canvas-default);
    border-radius: var(--radius-md);
    font-size: 12px;
    padding: 4px 8px;
}

/* --- Selection / focus list items --------------------------- */
.mud-list-item.mud-selected-item {
    background: var(--accent-subtle);
    color: var(--accent-fg);
}
.mud-list-item:hover {
    background: var(--canvas-subtle);
}

/* --- Logo / avatar gradient kill ----------------------------
   Overrides the legacy .logo-mark and .av-* helpers so they
   read as flat. PR 3 removes the class usage entirely. */
.logo-mark, .logo-mark::after {
    background: var(--accent-fg) !important;
    box-shadow: none !important;
    filter: none !important;
}
.av, .av-blue, .av-violet, .av-emerald, .av-amber, .av-rose, .av-cyan {
    background: var(--canvas-subtle) !important;
    color: var(--fg-default) !important;
    border: 1px solid var(--border-default);
    font-family: var(--font-mono);
}

/* ============================================================
   Behaviour preserved from app.css
   --------------------------------------------------------------
   These rules carry layout/structural responsibilities that
   the new flat MudBlazor overrides above don't replace. Listed
   with consumer breadcrumbs for PR 3 follow-up.
   ============================================================ */

/* MudBlazor scroll containment / popover z-index / input padding —
   used by: MudBlazor internals. Without these, .mud-main-content
   doesn't scroll and popovers escape modal stacking. */
.mud-main-content {
    overflow-y: auto !important;
    height: calc(100vh - var(--mud-appbar-height)) !important;
}
.mud-popover-provider {
    z-index: 9999 !important;
}
.mud-popover.mud-popover-open {
    z-index: 9999 !important;
}
.mud-input.mud-input-outlined input,
.mud-input.mud-input-outlined textarea {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.mud-input-control .mud-input.mud-input-outlined {
    margin-top: 2px !important;
}
.mud-input-label.mud-input-label-outlined {
    left: -4px !important;
}
.mud-tabs-panels.mud-tabs-vertical {
    display: block;
    width: 100%;
}
.mud-picker .mud-picker-input-text {
    color: var(--fg-default) !important;
}

/* Que chat layout — used by: QuePage.razor (out of scope this PR).
   Colour references on .chat-bubble-* now resolve through HqueTheme
   PaletteLight/Dark; they previously fell through unstyled. */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--mud-appbar-height) - 124px);
    max-width: 900px;
    margin: 0 auto;
    padding: 14px;
    top: 100px;
    position: relative;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 4px;
}
.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.chat-message-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 80%;
}
.chat-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.chat-message-assistant {
    align-self: flex-start;
}
.chat-avatar {
    flex-shrink: 0;
    margin-top: 4px;
}
.chat-bubble {
    padding: 12px 16px;
    border-radius: var(--radius-lg) !important;
    min-width: 80px;
}
.chat-bubble-user {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}
.chat-bubble-assistant {
    background-color: var(--canvas-subtle) !important;
    border-bottom-left-radius: var(--radius-sm) !important;
}
.chat-input-bar {
    padding: 12px 16px;
    border-radius: var(--radius-lg) !important;
    margin-top: 8px;
}
.chat-input-wrapper {
    position: relative;
}
.chat-textarea {
    width: 100%;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 12px 48px 12px 12px;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    min-height: 4.5em;
    max-height: 240px;
    background: transparent;
    color: var(--fg-default);
    outline: none;
    box-sizing: border-box;
}
.chat-textarea:focus {
    border-color: var(--accent-fg);
    box-shadow: var(--focus-ring);
}
.chat-textarea::placeholder {
    color: var(--fg-subtle);
}
.chat-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.chat-send-btn {
    position: absolute !important;
    bottom: 4px;
    right: 4px;
}
.chat-markdown {
    font-size: 0.875rem;
    line-height: 1.6;
    word-break: break-word;
}
.chat-markdown p { margin: 0 0 0.5em; }
.chat-markdown p:last-child { margin-bottom: 0; }
.chat-markdown code {
    background: var(--neutral-subtle);
    border-radius: var(--radius-sm);
    padding: 0.15em 0.4em;
    font-size: 0.85em;
    font-family: var(--font-mono);
}
.chat-markdown pre {
    background: var(--neutral-subtle);
    border-radius: var(--radius-md);
    padding: 12px;
    overflow-x: auto;
    margin: 0.5em 0;
}
.chat-markdown pre code {
    background: none;
    padding: 0;
    font-size: 0.82em;
    line-height: 1.5;
}
.chat-markdown ul, .chat-markdown ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}
.chat-markdown li { margin: 0.2em 0; }
.chat-markdown h1, .chat-markdown h2, .chat-markdown h3,
.chat-markdown h4, .chat-markdown h5, .chat-markdown h6 {
    margin: 0.6em 0 0.3em;
    line-height: 1.3;
}
.chat-markdown h1 { font-size: 1.3em; }
.chat-markdown h2 { font-size: 1.15em; }
.chat-markdown h3 { font-size: 1.05em; }
.chat-markdown blockquote {
    border-left: 3px solid var(--accent-fg);
    margin: 0.5em 0;
    padding: 0.3em 0.8em;
    opacity: 0.85;
}
.chat-markdown table {
    border-collapse: collapse;
    margin: 0.5em 0;
    font-size: 0.85em;
}
.chat-markdown th, .chat-markdown td {
    border: 1px solid var(--border-muted);
    padding: 4px 8px;
}
.chat-markdown th {
    background: var(--canvas-subtle);
}
.chat-markdown hr {
    border: none;
    border-top: 1px solid var(--border-default);
    margin: 0.8em 0;
}
.chat-tool-json {
    background: var(--neutral-subtle);
    border-radius: var(--radius-sm);
    padding: 8px;
    font-size: 0.8rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 4px 0;
}

/* ============================================================
   Ported app classes (Path A: flatten + tokenise)
   --------------------------------------------------------------
   Layout/structure preserved; gradients, hover-lift and
   hover-shadow stripped; hex literals replaced with tokens;
   radii normalised to var(--radius-md/lg/pill).

   PR 3 will migrate consumers off these globals onto Mud
   components or scoped CSS, at which point each block can be
   removed from this file.
   ============================================================ */

/* --- Admin tab toolbar / search / actions ---
   used by: AdminWorkspacesTab.razor, AdminUsersTab.razor,
            AdminTeamsTab.razor, AdminLocationsTab.razor,
            AdminBusinessTab.razor */
.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}
.admin-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    flex: 1;
    max-width: 360px;
}
.admin-search input {
    border: none;
    background: none;
    outline: none;
    color: var(--fg-default);
    font-size: 13px;
    width: 100%;
}
.admin-search input::placeholder { color: var(--fg-subtle); }

.admin-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    background: var(--accent-fg);
    border: 1px solid var(--accent-fg);
    color: var(--fg-on-emphasis);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
    white-space: nowrap;
}
.admin-action-btn:hover {
    background: var(--accent-emphasis);
    border-color: var(--accent-emphasis);
}

.show-inactive-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--fg-muted);
    cursor: pointer;
    white-space: nowrap;
}
.show-inactive-toggle input[type="checkbox"] { accent-color: var(--accent-fg); }

/* --- Admin grid + table ---
   used by: AdminWorkspacesTab.razor, AdminUsersTab.razor,
            AdminTeamsTab.razor, AdminLocationsTab.razor,
            AdminBusinessTab.razor */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px)  { .admin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .admin-grid { grid-template-columns: 1fr; } }

.admin-table-wrap {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-muted);
    border-bottom: 1px solid var(--border-default);
    background: var(--canvas-subtle);
}
.admin-table tbody tr.clickable { cursor: pointer; }
.admin-table tbody tr:hover { background: var(--canvas-subtle); }
.admin-table tbody td {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--fg-default);
    border-bottom: 1px solid var(--border-muted);
    vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-empty {
    padding: 32px;
    text-align: left;
    color: var(--fg-subtle);
    font-size: 13px;
}

/* Admin tabs responsive: left tabs -> top tabs.
   used by: same admin tabs as above (only AdminWorkspacesTab uses
   .admin-tabs class in markup; the rest inherit via mud-tabs). */
@media (max-width: 900px) {
    .admin-tabs.mud-tabs.mud-tabs-vertical {
        flex-direction: column !important;
    }
    .admin-tabs .mud-tabs-tabbar.mud-tabs-vertical {
        flex-direction: row !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-default) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .admin-tabs .mud-tabs-tabbar-wrapper.mud-tabs-vertical {
        flex-direction: row !important;
        transform: none !important;
    }
    .admin-tabs .mud-tab {
        min-width: unset !important;
        border-radius: 0 !important;
        padding: 10px 14px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .admin-tabs .mud-tabs-panels {
        padding: 16px 0 0 !important;
    }
    .admin-tabs .mud-tab-slider {
        display: none !important;
    }
}
@media (max-width: 600px) {
    .admin-tabs .mud-tab {
        padding: 8px 10px !important;
        font-size: 11px !important;
        gap: 0 !important;
    }
    .admin-tabs .mud-tab .mud-tab-label {
        display: none !important;
    }
}
@media (max-width: 900px) {
    .admin-table thead th,
    .admin-table tbody td { padding: 10px 12px; font-size: 12px; }
    .admin-search { max-width: none; }
}
@media (max-width: 600px) {
    .admin-table thead th,
    .admin-table tbody td { padding: 8px 10px; font-size: 11px; }
    .admin-table thead th:nth-child(4),
    .admin-table tbody td:nth-child(4),
    .admin-table thead th:nth-child(5),
    .admin-table tbody td:nth-child(5) { display: none; }
}

/* --- Entity cards (workspaces, locations, teams) ---
   used by: AdminWorkspacesTab.razor, AdminTeamsTab.razor,
            AdminLocationsTab.razor */
.entity-card {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.entity-card:hover {
    background: var(--canvas-subtle);
}
.entity-card.inactive { opacity: 0.55; border-style: dashed; }
.entity-card.inactive:hover { opacity: 0.8; }
.entity-card-header { display: flex; gap: 12px; align-items: flex-start; }
.entity-card-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.entity-card-info { flex: 1; min-width: 0; }
.entity-card-name { font-size: 14px; font-weight: 500; color: var(--fg-default); display: flex; align-items: center; gap: 8px; }
.entity-card-desc { font-size: 12px; color: var(--fg-muted); line-height: 1.5; margin-top: 2px; }
.entity-card-meta { display: flex; flex-wrap: wrap; gap: 12px; }
.entity-meta-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); }
.entity-card-actions { display: flex; gap: 6px; border-top: 1px solid var(--border-muted); padding-top: 12px; }

.entity-btn {
    padding: 6px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--canvas-default);
    color: var(--fg-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease, color 80ms ease;
}
.entity-btn:hover { background: var(--canvas-subtle); color: var(--fg-default); }
.entity-btn.deactivate { color: var(--fg-subtle); }
.entity-btn.deactivate:hover { background: var(--danger-subtle); border-color: var(--danger-muted); color: var(--danger-fg); }
.entity-btn.reactivate { color: var(--fg-subtle); }
.entity-btn.reactivate:hover { background: var(--success-subtle); border-color: var(--success-muted); color: var(--success-fg); }

.inactive-badge {
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--danger-subtle);
    border: 1px solid var(--danger-muted);
    font-size: 10px;
    font-weight: 500;
    color: var(--danger-fg);
    font-family: var(--font-mono);
}

/* --- Dialog (legacy custom) ---
   used by: LinkedItems.razor, Dashboard.razor,
            TableItemListPage.razor, ScheduleRow.razor,
            AssignGroup.razor, AdminWorkspacesTab.razor,
            AdminTeamsTab.razor, AdminLocationsTab.razor */
.admin-dialog {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 420px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-btn {
    padding: 8px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--canvas-default);
    color: var(--fg-default);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
}
.dialog-btn.cancel { background: var(--canvas-default); color: var(--fg-muted); }
.dialog-btn.cancel:hover { background: var(--canvas-subtle); }
.dialog-btn.danger { background: var(--danger-subtle); color: var(--danger-fg); border-color: var(--danger-muted); }
.dialog-btn.danger:hover { background: var(--danger-subtle); border-color: var(--danger-fg); }

/* --- Inline edit form (.te-* shared classes) ---
   used by: TableEditPage.razor, NewApiKeyPage.razor,
            WorkspaceEditPage.razor, UserEditPage.razor,
            StarredItemsPage.razor, ApiKeysPage.razor,
            RequestInstancePage.razor, ManageTeamMembersPage.razor,
            InviteUserPage.razor, LocationEditPage.razor,
            GroupFormPage.razor, CreateTeamPage.razor,
            and the 5 admin tabs */
.te-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
}
.te-header-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.te-back {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 80ms ease, color 80ms ease;
    color: var(--fg-muted);
    flex-shrink: 0;
    margin-top: 2px;
}
.te-back:hover {
    background: var(--canvas-subtle);
    color: var(--fg-default);
}
.te-subtitle {
    font-size: 12px;
    color: var(--fg-muted);
    font-family: var(--font-mono);
}
.te-section { margin-bottom: 24px; }
.te-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.te-section-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--fg-default);
}
.te-section-hint {
    font-size: 12px;
    color: var(--fg-muted);
    font-family: var(--font-mono);
}
.te-card {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.te-card-body {
    padding: 20px 24px;
}
.te-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}
.te-actions .te-save-btn {
    padding: 8px 28px;
    font-weight: 500;
    border-radius: var(--radius-md);
    background: var(--accent-fg) !important;
    border: 1px solid var(--accent-fg) !important;
    color: var(--fg-on-emphasis) !important;
    transition: background-color 80ms ease, border-color 80ms ease;
}
.te-actions .te-save-btn:hover {
    background: var(--accent-emphasis) !important;
    border-color: var(--accent-emphasis) !important;
}
.te-cancel-btn {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 8px 20px;
    color: var(--fg-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, color 80ms ease;
}
.te-cancel-btn:hover {
    background: var(--canvas-subtle);
    color: var(--fg-default);
}

/* --- User-edit team rows (.ue-*) ---
   used by: UserEditPage.razor, AdminUsersTab.razor */
.ue-team-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ue-team-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
}
.ue-team-row:hover {
    background: var(--canvas-subtle);
}
.ue-team-row.active {
    border-color: var(--accent-fg);
    background: var(--accent-subtle);
}
.ue-team-check { flex-shrink: 0; padding-top: 2px; }
.ue-team-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ue-team-info { flex: 1; min-width: 0; }
.ue-team-name { font-weight: 500; font-size: 13px; color: var(--fg-default); margin-bottom: 2px; }
.ue-team-desc { font-size: 12px; color: var(--fg-muted); line-height: 1.5; }
.ue-team-count { font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); white-space: nowrap; padding-top: 3px; }
.ue-empty { padding: 24px; text-align: center; color: var(--fg-subtle); font-size: 13px; }

/* --- Manage members (.mm-*) ---
   used by: ManageTeamMembersPage.razor, AdminTeamsTab.razor */
.mm-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    transition: border-color 80ms ease;
}
.mm-search-wrap:focus-within { border-color: var(--accent-fg); }
.mm-search {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--fg-default);
    font-size: 13px;
}
.mm-search::placeholder { color: var(--fg-subtle); }
.mm-user-list { display: flex; flex-direction: column; gap: 8px; }
.mm-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: background-color 80ms ease, border-color 80ms ease;
}
.mm-user-row:hover { background: var(--canvas-subtle); }
.mm-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--canvas-subtle);
    border: 1px solid var(--border-default);
    color: var(--fg-default);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mm-user-avatar span { font-size: 12px; font-weight: 500; color: var(--fg-default); font-family: var(--font-mono); }
.mm-user-info { flex: 1; min-width: 0; }
.mm-user-name { font-weight: 500; font-size: 13px; color: var(--fg-default); margin-bottom: 1px; }
.mm-user-email { font-size: 11px; color: var(--fg-subtle); font-family: var(--font-mono); }
.mm-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
    flex-shrink: 0;
}
.mm-toggle-btn.add { background: var(--accent-subtle); border: 1px solid var(--accent-muted); color: var(--accent-fg); }
.mm-toggle-btn.add:hover { background: var(--accent-subtle); border-color: var(--accent-fg); }
.mm-toggle-btn.remove { background: var(--danger-subtle); border: 1px solid var(--danger-muted); color: var(--danger-fg); }
.mm-toggle-btn.remove:hover { background: var(--danger-subtle); border-color: var(--danger-fg); }
.mm-empty { padding: 24px; text-align: center; color: var(--fg-subtle); font-size: 13px; }

/* --- Utilities ---
   used by: AdminUsersTab.razor, AdminBillingTab.razor (.mono / .dim) */
.mono { font-family: var(--font-mono); font-size: 12px; }
.dim { color: var(--fg-subtle); }