/* ============================================================
   Hque app-component layer
   --------------------------------------------------------------
   Loaded AFTER hque-overrides.css. Holds the shared app-level
   primitives that back the Razor components in Components/
   (Page, Card, IconButton) plus the tier-1 layout utilities.

   Keep this separate from hque-overrides.css: that file flattens
   MudBlazor surfaces; this one is our own component vocabulary.

   Adoption across pages is incremental (component-catalog step 6+);
   this file just defines the canonical shapes so the per-page
   .razor.css duplicates can be deleted as each is migrated.
   ============================================================ */

/* --- Tier-1 layout utilities -------------------------------- */
/* Raw flex glue — utilities, NOT components (avoid component soup).
   Override the gap inline with `style="--gap:8px"` where needed. */
.stack            { display: flex; flex-direction: column; gap: var(--gap, 12px); }
.cluster          { display: flex; align-items: center; gap: var(--gap, 12px); }
.cluster--between { justify-content: space-between; }
.cluster--end     { justify-content: flex-end; }

/* --- Page shell (backs <Page>) ------------------------------ */
/* Universal page wrapper. Override padding per page with
   `style="--page-pad:0"` (list/detail pages that pad their own
   content) until those are migrated in step 6. */
.page {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--page-pad, 28px 32px 48px);
    animation: fadeUp 0.4s ease both;
}
.page--narrow { max-width: 720px; }
/* Form sub-pages (invite user, new API key, create team…) share one tighter mobile
   inset. Set once here via <Page Form> instead of repeating the literal per page. */
.page--form { --page-pad-m: 20px 16px 40px; }
/* Mobile padding: defaults to the desktop --page-pad (so --page-pad:0 pages stay
   flush on mobile); form pages override with --page-pad-m for tighter insets. */
@media (max-width: 768px) {
    .page { padding: var(--page-pad-m, var(--page-pad, 28px 32px 48px)); }
}

/* --- Card surface (backs <Card>) ---------------------------- */
/* Generic bordered surface. Shares the tokens of .entity-card
   (the richer list-item composite in hque-overrides.css), so the
   two stay visually consistent; .entity-card is NOT folded into
   .card — it is a distinct composite (header/icon/meta/actions). */
.card {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 20px;
}
.card--interactive {
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}
.card--interactive:hover {
    background: var(--canvas-subtle);
    border-color: var(--border-muted);
}
.card--selected { border-color: var(--accent-fg); }

/* --- Panel header (column / sidebar / toolbar chrome) ------- */
/* One header shape for bordered panels, sidebars, and toolbars:
   an icon + title on the left, optional actions/count on the right.
   The fixed min-height keeps a header that carries a button the same
   height as one that doesn't (was the sd-/au-/lis-/ag-/feed-/overlay-
   header duplicates before the component-catalog converge). */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 53px;
    padding: 0 16px;
    box-sizing: border-box;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-default);
}
.panel-header__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-default);
}
.panel-header__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Count pill shown beside a panel title (e.g. "3" linked items). */
.count-chip {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--fg-subtle);
    background: var(--canvas-subtle);
    padding: 2px 8px;
    border-radius: 10px;
}

/* --- Compact list/section empty ----------------------------- */
/* Small centred muted text for empty lists/sections (distinct from the
   larger centred <PageEmptyState>). */
.list-empty {
    padding: 24px;
    text-align: center;
    color: var(--fg-subtle);
    font-size: var(--text-sm);
}

/* --- Info list (backs <InfoList> / <InfoRow>) --------------- */
/* Titled sidebar panel with label/value definition rows. Was the page-local
   .tif-side-info / .tif-info-* block on TableItemFormPage; now shared. Override the
   label column width with `style="--info-label-w:110px"` on the row's container. */
.info-card {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    overflow: hidden;
}
/* Padded body under a .panel-header inside an .info-card (Status / Information). */
.info-card-body {
    padding: 12px 16px;
}
.info-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.info-row {
    display: grid;
    grid-template-columns: var(--info-label-w, 80px) 1fr;
    gap: 8px;
    align-items: baseline;
}
.info-row dt {
    font-size: var(--text-xs);
    color: var(--fg-subtle);
    margin: 0;
}
.info-row dd {
    font-size: var(--text-sm);
    color: var(--fg-default);
    margin: 0;
    min-width: 0;
}

/* --- Sticky form-footer variant ----------------------------- */
/* Add to a .te-actions bar on long form pages so it sticks to the
   viewport bottom with a fade. Base .te-actions lives in hque-overrides. */
.te-actions--sticky {
    position: sticky;
    bottom: 0;
    background: linear-gradient(transparent, var(--canvas-inset) 30%);
    padding-top: 24px;
    padding-bottom: 16px;
}

/* --- Panel (titled card surface) ---------------------------- */
/* Bordered card with a header bar + body. Was duplicated identically as
   scoped .panel in DashboardPanel / WorkspaceSelector / WorkspaceHome and
   as .gd-section in GroupDetail — now one shared definition backing <Panel>.
   No margin here: callers own the spacing between stacked panels. */
.panel {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    overflow: hidden;
}
.panel-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.panel-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--fg-default);
    letter-spacing: 0.5px;
}
.panel-title-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.panel-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-2xs);
    color: var(--accent-fg);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.panel-action:hover { opacity: 1; }
.panel-body { padding: 14px 16px; }
.panel-foot {
    padding: 8px 16px;
    border-top: 1px solid var(--border-default);
}

/* --- Icon button (backs <IconButton>) ----------------------- */
/* The 34px square. Kept byte-identical to PageHeader's
   .page-header-back so back-buttons and toolbar icon-buttons
   share one shape. */
.icon-button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--canvas-subtle);
    color: var(--fg-muted);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.icon-button:hover {
    background: var(--canvas-inset);
    border-color: var(--border-muted);
    color: var(--fg-default);
}
.icon-button--danger:hover {
    border-color: var(--danger-fg);
    color: var(--danger-fg);
}
.icon-button--primary {
    background: var(--accent-fg);
    border-color: var(--accent-fg);
    color: var(--fg-on-emphasis);
}
.icon-button--primary:hover {
    background: var(--accent-emphasis);
    border-color: var(--accent-emphasis);
    color: var(--fg-on-emphasis);
}
/* Toggle states for a toolbar icon-button (e.g. "editing" active / "starred"). */
.icon-button--active {
    background: color-mix(in srgb, var(--accent-fg) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-fg) 35%, transparent);
    color: var(--accent-fg);
}
.icon-button--active:hover { color: var(--accent-fg); }
.icon-button--starred {
    background: color-mix(in srgb, var(--attention-fg) 12%, transparent);
    border-color: color-mix(in srgb, var(--attention-fg) 30%, transparent);
    color: var(--attention-fg);
}
.icon-button--starred:hover { color: var(--attention-fg); }

/* --- Reason dialog (backs <ReasonDialog>) -------------------- */
/* Centred confirm-with-reason modal. Consolidates the til-dialog / kb-dialog
   twins. The backdrop flex-centres the panel; click-outside cancels. */
.reason-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.15s ease;
}
.reason-dialog {
    width: 100%;
    max-width: 440px;
    margin: 0 16px;
    background: var(--canvas-default);
    border: 1px solid var(--border-muted);
    border-radius: 12px;
    padding: 24px;
    animation: fadeUp 0.2s ease both;
}
.reason-dialog-title {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--fg-default);
    margin-bottom: 12px;
}
.reason-dialog-body {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    line-height: 1.5;
    margin-bottom: 14px;
}
.reason-dialog-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--fg-muted);
    margin-bottom: 6px;
}
.reason-dialog-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: var(--canvas-subtle);
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    color: var(--fg-default);
    font-size: var(--text-sm);
    font-family: inherit;
    line-height: 1.4;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
}
.reason-dialog-textarea::placeholder { color: var(--fg-subtle); }
.reason-dialog-textarea:focus { border-color: var(--accent-fg); }
.reason-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.reason-dialog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 7px;
    border: 1px solid var(--border-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.reason-dialog-btn.cancel {
    background: var(--canvas-subtle);
    color: var(--fg-muted);
}
.reason-dialog-btn.cancel:hover {
    background: var(--canvas-inset);
    color: var(--fg-default);
}
.reason-dialog-btn.confirm {
    background: var(--accent-fg);
    border-color: transparent;
    color: var(--fg-on-emphasis);
}
.reason-dialog-btn.confirm.danger { background: var(--danger-fg); }
.reason-dialog-btn.confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- Page header (backs <PageHeader> + <PageScaffold> header) -- */
/* The title/back/actions bar. Global so both PageHeader and a raw
   PageScaffold HeaderLeft/HeaderRight slot share one surface. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}
.page-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.page-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.page-header-back {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md, 8px);
    background: var(--canvas-subtle);
    border: 1px solid var(--border-default);
    color: var(--fg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background-color 80ms ease, color 80ms ease, border-color 80ms ease;
}
.page-header-back:hover {
    background: var(--canvas-inset);
    border-color: var(--border-muted);
    color: var(--fg-default);
}
.page-header-text { min-width: 0; }
/* Title + inline adornments (tags/pills) share one row. */
.page-header-titlerow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* Optical nudge: the title font's metrics leave the pills a hair above the visual
   text centre even with align-items:center — drop them ~2px to sit level. */
.page-header-titlerow .behaviour-tag {
    transform: translateY(3px);
}
.page-header-title {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--text-3xl);
    color: var(--fg-default);
    /* line-height:1 so the title's box hugs the glyphs — otherwise the extra
       leading pushes inline pills (TitleAdornment) above the visual text centre. */
    line-height: 1;
}
.page-header-subtitle {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    margin-top: 4px;
}
.page-header-subtitle--mono {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
}

/* --- Breadcrumb (backs <Breadcrumb>) ------------------------ */
/* Linked path segments + optional trailing content. Was the page-local
   .tif-crumb-link / .tif-sep on TableItemFormPage; now shared. */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.crumb-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.crumb-link:hover {
    color: var(--fg-default);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.crumb-sep {
    margin: 0 6px;
    opacity: 0.4;
}
.page-header-count {
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--canvas-subtle);
    border: 1px solid var(--border-default);
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--fg-muted);
    white-space: nowrap;
}
@media (max-width: 600px) {
    .page-header { flex-direction: column; gap: 16px; }
    .page-header-title { font-size: var(--text-2xl); }
}

/* Optional footer region under the body (backs PageScaffold Footer). */
.page-footer { margin-top: 24px; }

/* --- Tabs (skins MudTabs) ------------------------------------ */
/* White card wrapping a MudTabs strip + its panels, with a compact
   colored-dot tab bar. Apply via <MudTabs Class="tab-card">; drop a
   .tab-dot in each panel's TabContent for the category colour.
   Reusable across pages — do NOT re-scope this per page. */
.tab-card {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    overflow: hidden;
}
.tab-card .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--border-default);
}
.tab-card .mud-tab {
    display: flex;
    align-items: center;
    min-width: unset;
    padding: 12px 18px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--fg-muted);
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.15s;
}
.tab-card .mud-tab:hover { color: var(--fg-default); }
.tab-card .mud-tab.mud-tab-active { color: var(--fg-default); }
.tab-card .mud-tabs-panels { padding: 20px; }
/* Single-panel tab-card: hide the bar so a lone tab reads as a plain titled card. */
.tab-card--single .mud-tabs-tabbar { display: none; }

/* --- Dot (backs <Dot>) --------------------------------------- */
/* The dot itself is the global .status-dot / .cat-dot surface. These add the
   optional label wrapper and a flat (glow-less) modifier. */
.dot-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dot--flat { box-shadow: none; }

/* --- Version history list (.tih-*) --------------------------- */
/* Hash-chained change list with per-version field diffs + a ledger verify action.
   Shared by TableItemHistoryPanel and TableEditPage's History tab — promoted from the
   two per-page ::deep copies. Do NOT re-scope this per page. */
.tih-list {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tih-date-label {
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--fg-subtle);
    padding: 16px 0 6px 26px;
}
.tih-date-label:first-child { padding-top: 0; }
.tih-entry {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    margin-bottom: 4px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: hidden;
}
.tih-entry:hover { border-color: var(--border-muted); }
.tih-entry-expanded { border-color: var(--border-muted); }
.tih-entry-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    min-height: 44px;
}
.tih-entry-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tih-entry-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.tih-entry-type {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-default);
    white-space: nowrap;
}
.tih-hash-chip {
    font-family: var(--font-mono);
    font-size: var(--text-10);
    height: 22px;
}
.tih-entry-meta {
    font-size: var(--text-xs);
    color: var(--fg-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tih-sep { margin: 0 6px; opacity: 0.4; }
.tih-chevron {
    color: var(--fg-subtle);
    flex-shrink: 0;
    font-size: var(--text-2xl);
    transition: transform 0.2s;
}
.tih-detail {
    border-top: 1px solid var(--border-default);
    padding: 12px 16px 10px;
    cursor: default;
}
.tih-diff-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}
.tih-diff-table td {
    padding: 5px 10px;
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-default);
    vertical-align: top;
}
.tih-diff-table tr:last-child td { border-bottom: none; }
.tih-cell-label {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--fg-muted);
}
.tih-cell-value {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    word-break: break-word;
    line-height: 1.6;
}
.tih-hl-del {
    background: rgba(225, 29, 72, 0.18);
    color: var(--danger-fg);
    border-radius: 2px;
    padding: 1px 2px;
    text-decoration: line-through;
}
.tih-hl-add {
    background: rgba(5, 150, 105, 0.18);
    color: var(--success-fg);
    border-radius: 2px;
    padding: 1px 2px;
}
.tih-diff-empty {
    font-size: var(--text-sm);
    color: var(--fg-subtle);
    padding: 4px 0;
}
.tih-detail-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-default);
    display: flex;
    align-items: center;
}
/* Module-version history extras (TableEditPage History tab) */
.te-history-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px 0;
    justify-content: center;
    color: var(--fg-muted);
    font-size: var(--text-sm);
}
.te-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.te-history-badge {
    font-size: var(--text-3xs);
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--attention-fg);
}

/* --- Behaviour tag (backs <BehaviourTag>) -------------------- */
/* Tinted pill identifying a module behaviour. Colour comes from --bhv-color
   (the def's --cat-* token); the fill is a low-alpha tint of it. Consolidates
   til-bhv-tag / tif-behaviour-tag / mc-tag / panel-behaviour-tag. Default is the
   compact mono chip; --pill and --outlined are the geometry variants. */
.behaviour-tag {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--text-10);
    font-weight: 500;
    font-family: var(--font-mono);
    white-space: nowrap;
    background: color-mix(in srgb, var(--bhv-color, var(--cat-blue)) var(--bhv-tint, 12%), transparent);
    color: var(--bhv-color, var(--cat-blue));
}
/* Header/title strip: rounded, roomier, non-mono, slight tracking. */
.behaviour-tag--pill {
    height: 20px;
    padding: 0 8px;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--text-2xs);
    letter-spacing: 0.3px;
}
/* Suggestion cards: 25% border, fully rounded. */
.behaviour-tag--outlined {
    border: 1px solid color-mix(in srgb, var(--bhv-color, var(--cat-blue)) 25%, transparent);
    border-radius: 20px;
}

/* --- Toolbar (backs <Toolbar>) ------------------------------- */
/* A bordered strip with a left pane and a right pane pushed apart —
   search/filters on the left, actions on the right. Reusable across
   list/grid pages; do NOT re-scope this per page. */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-default);
    gap: 12px;
}
.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-right { justify-content: space-between; }
}

/* --- Count pill ---------------------------------------------- */
/* The small mono count badge (members, items, activity). Replaces the
   per-page .X-count-pill / page-header-count twins. */
.count-pill {
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--canvas-subtle);
    color: var(--fg-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    white-space: nowrap;
}

/* --- Workspace chip ------------------------------------------ */
/* Names the workspace a row belongs to. Only rendered on the org-wide
   dashboard, where rows from every workspace sit in one list and the
   module name alone is ambiguous. Global rather than per-widget: the
   four dashboard lists that show it are separate components. */
.workspace-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--canvas-subtle);
    border: 1px solid var(--border-default);
    color: var(--fg-subtle);
    font-size: var(--text-2xs);
    white-space: nowrap;
}
.workspace-chip::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cat-violet, var(--cat-blue));
}