/* ── Workspace shell ───────────────────────────────────────────
   Studio mode - the chrome and density for any management
   workspace built on this design system: Website Studio today,
   Build2Teach Studio and the Central Operating Portal later. Forms,
   tables, dashboards. Optimised for density, not reading: same
   font family as reading mode (see article.css), tighter spacing.

   `.workspace-shell` is the density scope: it shadows a few spacing
   tokens with tighter values for everything nested inside it, so
   components (cards, sections, forms) don't need workspace-specific
   variants - they just render denser because the token resolves
   smaller in this scope. A workspace's base template wraps its root
   content in it once (see design_system/workspace_base.html); every
   shared component inside tightens automatically.

   Structurally, a workspace shell is:
     Workspace Shell
     ├── Subheader      (.workspace-subheader - one bounded band, the
     │                    "you are in Website Studio" section marker)
     │     └── Topbar    (.workspace-topbar / .workspace-topbar-brand,
     │                     .workspace-account on the trailing edge)
     ├── Body           (.workspace-body - everything below the
     │                    Subheader, split into two columns)
     │     ├── Sidebar   (.workspace-sidebar - persistent vertical
     │     │               module nav on desktop; .workspace-sidebar-bar's
     │     │               toggle collapses it to a drawer on narrow
     │     │               viewports, see the Responsive section below)
     │     └── Main      (.workspace-main - the page's own content,
     │                     takes the remaining width, never narrowed
     │                     into a centered column by the sidebar)
     ├── Header         (.workspace-header - per-page title + actions)
     ├── Entity List    (components/tables.css .table, .workspace-grid)
     ├── Entity Editor  (components/forms.css, incl. the Markdown editor)
     ├── Detail View    (components/cards.css, .card-meta)
     └── Action Bar     (.action-bar)
   Activity/Settings sections a future workspace adds are new pages
   inside the same shell - not a new shell.
*/
.workspace-shell {
    --space-6: 1.5rem;
    --space-8: 2rem;
}

/* Full desktop canvas (Issue 33): the shell itself now sits in the
   wider --container-canvas page shell, but a content-edit form's
   inputs are width:100% (forms.css) - stretching them to that full
   width would make single-line fields unusably wide. Every Studio
   edit form declares `<form method="post">`; scoping to that keeps
   this off the small inline `.action-bar` delete forms (already
   `display: inline`, unaffected either way) without touching every
   form template individually. */
.workspace-shell form[method="post"] {
    max-width: var(--container-max);
}

/* ── Chrome ────────────────────────────────────────────────────── */
/* The single bounded band that reads as "you are in Website Studio" -
   a faint tinted, bordered card wrapping the Topbar, set apart from
   both the public .site-header above it and the Body (sidebar +
   content) below it. Deliberately quiet (a tint one step off white, a
   hairline border) rather than a strong fill - the section boundary
   should be legible without competing with the red accent reserved
   for actual actions/active-state elsewhere. Holds only the Topbar
   now - the module nav moved into .workspace-sidebar below, so this
   is symmetric padding on every side rather than leaving room for a
   second row inside it. */
.workspace-subheader {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.workspace-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* A small Brand-red dot ahead of the label, the same "single
   selective mark" role as the dev-notice dot (page.css) - reads as a
   section identity marker ("you are here: Website Studio"), not a
   status/alert indicator. */
.workspace-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--type-heading-l-weight);
    color: var(--color-text-muted);
    font-size: var(--type-small-size);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.workspace-topbar-brand::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Account/session control, not a Studio nav item - deliberately kept
   out of .workspace-sidebar's module list so "which modules exist" and
   "who's signed in" stay visually distinct (Website Studio -> module
   nav -> account control). Sits in .workspace-topbar's actions slot, pushed
   to the right by that flex row's justify-content: space-between.
   Bounded in its own pill (white against the subheader's tinted
   surface) so icon + name + logout read as one compact control
   instead of three loose inline elements. Deliberately neutral -
   charcoal icon and name, muted logout link - this corner stays
   secondary to the page title and Studio nav; red is reserved for
   the logout link's hover state only, never its resting state. */
.workspace-account {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-background);
}

.workspace-account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}

.workspace-account-icon .icon {
    width: 16px;
    height: 16px;
}

.workspace-account-name {
    font-size: var(--type-small-size);
    font-weight: var(--type-label-weight);
    color: var(--color-text);
    line-height: 1;
    padding-right: var(--space-3);
    border-right: 1px solid var(--color-border);
}

/* A quiet secondary action, not a button - underlined muted text that
   only picks up the Interactive color on hover, the same weight class
   as an ordinary text link elsewhere in the system. */
.workspace-account-logout {
    display: inline;
}

.workspace-account-logout button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--type-small-size);
    line-height: 1;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Groups the site switcher and the account control into one flex item on
   .workspace-topbar's trailing edge (that row is itself a two-item
   space-between flex: brand on the left, this group on the right) -
   Issue #54, one Website Studio managing several sites. */
.workspace-topbar-actions-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Same pill weight as .workspace-account, so "which site am I editing"
   reads as a peer control to "who am I", not a stray form floating in
   the topbar. */
.workspace-site-switcher {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
}

.workspace-site-switcher-label {
    font-size: var(--type-small-size);
    font-weight: var(--type-label-weight);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.workspace-site-switcher select {
    font: inherit;
    font-size: var(--type-small-size);
    color: var(--color-text);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.workspace-account-logout button:hover {
    color: var(--color-interactive);
}

/* ── Body: Sidebar + Main ──────────────────────────────────────── */
.workspace-body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
}

/* Mobile nav toggle row - hidden on desktop (see Responsive below),
   sits above the sidebar/content stack rather than inside the
   Subheader, so the preserved "WEBSITE STUDIO" + account band above
   never has to make room for it. Reuses .nav-toggle-bar's three-bar
   glyph verbatim (page.css) rather than a second hand-drawn icon;
   only the surrounding button/visibility rules are workspace-specific
   because this toggle's breakpoint differs from the public nav's. */
.workspace-sidebar-bar {
    display: none;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    margin-bottom: var(--space-4);
}

.workspace-sidebar-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 2rem;
    height: 2rem;
    padding: 0;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.workspace-sidebar-bar-label {
    font-size: var(--type-small-size);
    font-weight: var(--type-label-weight);
    color: var(--color-text-muted);
}

/* The module list itself - a quiet white card (not a dashboard-card
   accent color in sight; see workspace-card--* below for where that
   saturation belongs instead), persistent at a fixed width on desktop
   so Main never has to guess how much room it has. Icon + label per
   item, reusing the same hand-authored icon set and .icon sizing
   convention as the dashboard cards (apps/core/templatetags/icons.py) -
   color comes for free via currentColor once the link's own color is
   set, no separate icon-color rule needed. */
.workspace-sidebar {
    flex-shrink: 0;
    width: 232px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.workspace-sidebar a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: var(--type-small-size);
    font-weight: var(--type-label-weight);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.workspace-sidebar a .icon {
    width: 18px;
    height: 18px;
}

.workspace-sidebar a:hover {
    background: var(--color-surface-muted);
    color: var(--color-heading);
    text-decoration: none;
}

/* Same "current section: red indicator" rule the horizontal nav used
   (Issue 45 v2) - just a filled row instead of an underline, the
   natural active-state shape for a vertical list. Domain identity
   still lives only in the dashboard card's icon/border/link (below),
   never here - one consistent, restrained "you are here" signal, not
   a repeat of every content-family's own color. */
.workspace-sidebar a.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Takes whatever width Sidebar leaves behind - never re-narrowed into
   a centered column of its own. min-width: 0 is required alongside
   flex: 1 so a wide child (a table, a long code block) triggers its
   own overflow-x instead of stretching Main past the available
   track, the same reason .detail-layout > * needs it (article.css). */
.workspace-main {
    flex: 1;
    min-width: 0;
}

/* ── Page header ───────────────────────────────────────────────── */
.workspace-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.workspace-header h1 {
    margin-bottom: var(--space-2);
}

.workspace-header p {
    color: var(--color-text-muted);
}

/* ── Workspace cards (dashboard) ───────────────────────────────── */
/* auto-fit, not auto-fill - see cards.css .card-grid for why. */
.workspace-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.workspace-card {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.workspace-card:hover {
    box-shadow: var(--shadow-hover);
}

/* Medium-scale domain identity (Issue 45 revision, fourth pass): a
   prior pass kept the resting surface neutral white and demoted the
   pale `-bg` tint to a :hover-only whisper, worried a full pale tint
   on all seven cards at once would read as a "pastel admin
   dashboard" rather than a confident product. That tradeoff is
   reversed here: a card's color identity must not depend on the
   mouse being over it, so the `-bg` tint is now the *resting*
   background, paired with the same bold `-strong` edge as before.
   Hover keeps the identical fill and edge color - no second hover
   hue - and signals interactivity only through the shared elevation
   shadow (`.workspace-card:hover` above) plus a slightly heavier
   edge below, so a card never appears to "become" its color on
   hover, only to already be it. `apps/portal/views/dashboard.py`'s
   `workspace.accent` field picks the same modifier suffix as
   `.workspace-card-icon--<accent>` below, applied to the `<article>`
   itself. */
.workspace-card--personality { background: var(--accent-personality-bg); border-left: 4px solid var(--accent-personality-strong); }
.workspace-card--technical { background: var(--accent-technical-bg); border-left: 4px solid var(--accent-technical-strong); }
.workspace-card--editorial { background: var(--accent-editorial-bg); border-left: 4px solid var(--accent-editorial-strong); }
.workspace-card--commercial { background: var(--accent-commercial-bg); border-left: 4px solid var(--accent-commercial-strong); }
.workspace-card--document { background: var(--accent-document-bg); border-left: 4px solid var(--accent-document-strong); }
.workspace-card--infrastructure { background: var(--accent-infrastructure-bg); border-left: 4px solid var(--accent-infrastructure-strong); }
.workspace-card--inbox { background: var(--accent-inbox-bg); border-left: 4px solid var(--accent-inbox-strong); }

/* Same color, no new hue - hover only thickens the edge (4px -> 6px)
   as a tonal/intensity cue, on top of the shared elevation shadow. */
.workspace-card--personality:hover { border-left-width: 6px; }
.workspace-card--technical:hover { border-left-width: 6px; }
.workspace-card--editorial:hover { border-left-width: 6px; }
.workspace-card--commercial:hover { border-left-width: 6px; }
.workspace-card--document:hover { border-left-width: 6px; }
.workspace-card--infrastructure:hover { border-left-width: 6px; }
.workspace-card--inbox:hover { border-left-width: 6px; }

/* Icon + entity name on one line (Issue: Website Studio card visual
   design) - the icon is a small semantic/navigational cue, not
   decoration, so it sits directly beside the title rather than above
   it as a bigger illustration would. */
.workspace-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* A solid, bold content-family-colored chip around the icon - the
   `-strong` tier (raw or near-raw palette hue, 3:1-safe, not the more
   muted 4.5:1 `-fg` reserved for actual text) so the corporate
   palette's real saturation shows up here undiluted. This is the
   "small area, confident color" half of the revision's core
   principle: higher saturation + lower surface coverage, not lower
   saturation + larger coverage - see the decision doc's Section 11.
   The base rule below is a neutral fallback (any future dashboard
   card that doesn't yet have a modifier); apps/portal/views/
   dashboard.py's `workspace.accent` field picks a
   `--workspace-card-icon--<accent>` modifier per card (see the
   modifiers immediately below), which is what actually renders for
   all seven current dashboard entities. See the decision doc for the
   full domain -> accent mapping and why each was chosen. */
.workspace-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-text-muted);
    color: #fff;
}

.workspace-card-icon--personality { background: var(--accent-personality-strong); color: #fff; }
.workspace-card-icon--technical { background: var(--accent-technical-strong); color: #fff; }
.workspace-card-icon--editorial { background: var(--accent-editorial-strong); color: #fff; }
.workspace-card-icon--commercial { background: var(--accent-commercial-strong); color: #fff; }
.workspace-card-icon--document { background: var(--accent-document-strong); color: #fff; }
.workspace-card-icon--infrastructure { background: var(--accent-infrastructure-strong); color: #fff; }
.workspace-card-icon--inbox { background: var(--accent-inbox-strong); color: #fff; }

.workspace-card h2 {
    font-size: var(--type-heading-m-size);
}

.workspace-card p {
    color: var(--color-text-muted);
    font-size: var(--type-small-size);
    flex-grow: 1;
}

.workspace-card-count {
    font-size: var(--type-heading-xl-size);
    font-weight: var(--type-heading-xl-weight);
    color: var(--color-heading);
}

/* Issue 45 v2 (approved mockup): "Manage Entity ->" now picks up its
   own card's content-family color, matching the icon chip above it -
   reverting Issue 45's prior "uniform Interactive blue for all seven"
   decision (that pass worried seven differently-colored links would
   compete for attention; the approved mockup shows exactly that,
   deliberately, so each card reads as one coherent colored unit
   rather than a neutral link bolted onto a colored icon). */
.workspace-card--personality .link-more { color: var(--accent-personality-fg); }
.workspace-card--technical .link-more { color: var(--accent-technical-fg); }
.workspace-card--editorial .link-more { color: var(--accent-editorial-fg); }
.workspace-card--commercial .link-more { color: var(--accent-commercial-fg); }
.workspace-card--document .link-more { color: var(--accent-document-fg); }
.workspace-card--infrastructure .link-more { color: var(--accent-infrastructure-fg); }
.workspace-card--inbox .link-more { color: var(--accent-inbox-fg); }

/* ── Dashboard information hierarchy (Issue 45 v2, approved mockup) ──
   Recent Activity / At a Glance / Quick Actions, below the entity
   cards - read-time aggregation over each domain's existing
   created_at/updated_at/status fields (apps/portal/views/dashboard.py),
   no new event model or persisted counters. Same white-surface,
   bordered-panel language as .workspace-card, not a new visual
   vocabulary. */
.dashboard-panels {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.dashboard-panel {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    margin-top: var(--space-6);
}

.dashboard-panels .dashboard-panel {
    margin-top: 0;
}

.dashboard-panel-title {
    font-size: var(--type-heading-m-size);
    margin-bottom: var(--space-4);
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

/* Reuses .workspace-card-icon's own accent modifiers verbatim (see
   dashboard.html) - one activity entry, one domain, one already-
   established color, never a new icon-chip treatment. */
.activity-icon {
    width: 32px;
    height: 32px;
}

.activity-icon .icon {
    width: 16px;
    height: 16px;
}

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

.activity-title {
    color: var(--color-heading);
    font-size: var(--type-small-size);
    font-weight: var(--type-label-weight);
}

.activity-subtitle {
    color: var(--color-text-muted);
    font-size: var(--type-caption-size);
}

.activity-time {
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-size: var(--type-caption-size);
    white-space: nowrap;
}

.glance-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.glance-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.glance-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.glance-icon {
    display: flex;
    color: var(--color-text-muted);
}

.glance-icon .icon {
    width: 16px;
    height: 16px;
}

.glance-label {
    flex: 1;
    color: var(--color-text);
    font-size: var(--type-small-size);
}

.glance-value {
    color: var(--color-heading);
    font-weight: var(--type-heading-l-weight);
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.quick-action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-heading);
    font-size: var(--type-small-size);
    font-weight: var(--type-label-weight);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.quick-action:hover {
    background: var(--color-surface-muted);
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}

.quick-action-icon {
    display: flex;
    color: var(--color-primary);
}

.quick-action-icon .icon {
    width: 18px;
    height: 18px;
}

/* ── Action bar ────────────────────────────────────────────────── */
.action-bar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.action-bar form {
    display: inline;
}

/* ── Misc ──────────────────────────────────────────────────────── */
.workspace-count {
    color: var(--color-text-muted);
    font-size: var(--type-small-size);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dashboard-panels {
        grid-template-columns: 1fr;
    }

    /* Below this width the permanent 232px sidebar would eat too much
       of the viewport next to Main - it collapses into a toggled
       drawer instead, using the same generic mobile-nav toggle the
       public header's [data-nav-toggle] already runs (site-header.js):
       .is-open on the panel, aria-expanded on the button, Escape/
       outside-click to close. Main still gets the full width once the
       sidebar is out of the flow. */
    .workspace-sidebar-bar {
        display: flex;
    }

    .workspace-body {
        flex-direction: column;
    }

    .workspace-sidebar {
        display: none;
        width: 100%;
    }

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