/*
 * Workspace-shell supplement, owned by @clemeleon/dashboard. Every rule is scoped
 * under .dc-shell so it can never affect a consumer app's lepa components elsewhere.
 * Covers shell chrome (rail, header, modals) + the hand-authored BEM patterns the
 * workspace screens use that don't map 1:1 to a lepa component. All values are lepa
 * tokens. As screens adopt real lepa components, the matching rule here is removed.
 */
.dc-shell {
    position: relative;
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--background-page);
    font-family: var(--font-sans);
    color: var(--text-primary)
}

/* status-card body */
.dc-shell .status-card__body {
    color: var(--text-secondary);
    font-size: var(--font-size-small)
}

/* Input icon, dividers, avatars */
.dc-shell .input-group--withIcon .input {
    padding-left: var(--space-8)
}

.dc-shell .divider--vertical {
    width: 1px;
    height: 28px;
    border: 0;
    background: var(--border-subtle)
}

.dc-shell .avatar--muted {
    opacity: .5
}

/* Dropdown surface (header menus) lives in header-menu.css, un-scoped so the kit's
   LanguageMenu / UserMenu work standalone. The demo's "New" menu reuses it too. */

/* Icon sizing (lucide renders <svg class="icon icon--md">) */
.dc-shell svg.icon {
    width: 20px;
    height: 20px;
    flex: none
}

.dc-shell svg.icon--sm {
    width: 16px;
    height: 16px
}

.dc-shell svg.icon--md {
    width: 20px;
    height: 20px
}

.dc-shell svg.icon--lg {
    width: 28px;
    height: 28px
}

.dc-shell svg.icon--muted {
    color: var(--text-muted)
}

/*
 * WorkspaceRail — collapsible app-shell rail, owned by @clemeleon/dashboard.
 * Scoped under .rail (the component root) so it works standalone in any consumer,
 * not just inside the demo .dc-shell. Per-item visuals (idle/hover/active) come
 * from lepa's .menu-item; these rules add only the collapse chrome. All lepa tokens.
 *
 * Layout contract: the rail is absolutely positioned and expands as an overlay, so
 * it must live in a `position: relative` flex row. The component renders its own
 * .rail__spacer (68px) so sibling content clears the collapsed rail.
 */
.rail__spacer {
    width: 68px;
    flex: none
}

.rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    width: 68px;
    overflow: hidden;
    background: var(--background-card);
    border-right: 1px solid var(--border-subtle);
    transition: width var(--duration-normal) var(--easing-out), box-shadow var(--duration-normal) var(--easing-out)
}

.rail--open {
    width: 252px;
    box-shadow: var(--shadow-lg)
}

.rail__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 14px
}

.rail__label {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity var(--duration-fast) var(--easing-out)
}

.rail--open .rail__label {
    opacity: 1;
    width: auto
}

.rail__menu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    overflow-x: hidden
}

.rail .menu-section__label {
    height: 0;
    opacity: 0;
    overflow: hidden;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap
}

.rail--open .menu-section__label {
    height: auto;
    opacity: 1;
    padding: 0 var(--space-2) var(--space-1)
}

.rail .menu-item__trailing {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--font-size-caption)
}

.rail__pin, .rail .menu-item {
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: center;
    width: 100%;
    border-radius: var(--radius-md)
}

.rail--open .rail__pin, .rail--open .menu-item {
    gap: 12px;
    justify-content: flex-start
}

.rail__pin {
    padding: 10px;
    border: 0;
    background: var(--brand-subtle);
    color: var(--brand-primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-align: left
}

/*
 * WorkspaceTrigger — header workspace button, owned by @clemeleon/dashboard.
 * Scoped under .workspace-trigger so it works standalone in any consumer. Reuses
 * lepa's .avatar for the square badge; everything else is kit chrome on lepa tokens.
 */
.workspace-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 7px 10px 7px 7px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
    text-align: left;
    flex: none;
    min-width: 236px;
    transition: background var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out)
}

.workspace-trigger:hover {
    background: var(--background-hover);
    border-color: var(--border-strong)
}

.workspace-trigger__avatar {
    flex: none
}

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

.workspace-trigger__name {
    display: block;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.workspace-trigger__kind {
    display: block;
    font-size: var(--font-size-caption);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.workspace-trigger__caret {
    flex: none;
    display: flex;
    color: var(--text-muted)
}

.workspace-trigger__caret svg {
    width: 16px;
    height: 16px
}

/*
 * DashboardSidebar — the dashboard's shell frame, owned by @clemeleon/dashboard. A fixed 252px
 * column; the nav rows themselves are lepa `.menu-*` (styled in lepa). Only the frame (brand/
 * top-slot/nav/footer regions) lives here. All lepa tokens. Scoped under .dashboard-sidebar.
 */
.dashboard-sidebar {
    width: 252px;
    flex: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    background: var(--background-card);
    border-right: 1px solid var(--border-subtle)
}

.dashboard-sidebar__brand {
    flex: none;
    height: 64px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 18px;
    border-bottom: 1px solid var(--border-subtle)
}

.dashboard-sidebar__brand-name {
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    font-size: var(--font-size-large);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* App-supplied slot above the nav — e.g. a workspace switcher. Dashboard has no opinion on it. */
.dashboard-sidebar__top-slot {
    flex: none;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle)
}

.dashboard-sidebar__nav {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--space-3);
    gap: var(--space-4)
}

.dashboard-sidebar__footer {
    flex: none;
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 2px
}

.dashboard-sidebar__controls {
    padding: var(--space-1) 0
}

/* App-supplied header-right controls (search / notifications / user menu). */
.dashboard-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex: none
}

/*
 * v2 (new-dash-4) look for the kit's generated views — opt-in via DashboardConfig.ui:'v2'. Scoped to
 * v2-only classes so the classic views are untouched. lepa tokens only.
 */

/* --- v2 home: overview --- */
.dash-home2__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-4)
}

.dash-home2__tile {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-fast) var(--easing-out)
}

.dash-home2__tile:hover {
    transform: translateY(-2px)
}

.dash-home2__tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3)
}

.dash-home2__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--background-hover);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold)
}

.dash-home2__avatar svg {
    width: 18px;
    height: 18px
}

.dash-home2__value {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: 1.1
}

.dash-home2__label {
    margin-top: 2px;
    font-size: var(--font-size-small);
    color: var(--text-tertiary)
}

.dash-home2__recents {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    align-items: start
}

.dash-home2__recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3)
}

.dash-home2__recent-all {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    color: var(--brand-primary);
    text-decoration: none
}

.dash-home2__recent-row {
    display: block;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-small)
}

.dash-home2__recent-row:first-child {
    border-top: 0
}

.dash-home2__recent-row:hover {
    color: var(--brand-primary)
}

/* --- v2 list: wrap the table in a card surface --- */
.dashboard-list--v2 .dashboard-table-wrap {
    background: var(--background-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-2);
    overflow: hidden
}

/* v2 list: pagination footer (Showing a-b of N + page controls). */
.dashboard-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap
}

.dashboard-pagination__info {
    font-size: var(--font-size-small);
    color: var(--text-tertiary)
}

.dashboard-pagination__pages {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1)
}

.dashboard-pagination__btn {
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--background-card);
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-out), border-color var(--duration-fast) var(--easing-out)
}

.dashboard-pagination__btn:hover:not(:disabled) {
    background: var(--background-hover);
    color: var(--text-primary)
}

.dashboard-pagination__btn--active {
    border-color: var(--brand-primary);
    background: var(--background-hover);
    color: var(--brand-primary);
    font-weight: var(--font-weight-semibold)
}

.dashboard-pagination__btn:disabled {
    opacity: 0.5;
    cursor: default
}

/* --- v2 detail: label -> value rows --- */
.dashboard-detail__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3)
}

.dashboard-detail__row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--space-4);
    align-items: start
}

.dashboard-detail__label {
    font-size: var(--font-size-small);
    color: var(--text-tertiary)
}

.dashboard-detail__value {
    font-size: var(--font-size-small);
    color: var(--text-primary)
}

@media (max-width: 560px) {
    .dashboard-detail__row {
        grid-template-columns: 1fr;
        gap: 2px
    }
}

/* --- v2 media: asset grid --- */
.dashboard-media__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3)
}

.dashboard-media__tile {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--background-card);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--duration-fast) var(--easing-out)
}

.dashboard-media__tile:hover {
    border-color: var(--brand-primary)
}

.dashboard-media__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--background-hover);
    color: var(--text-tertiary);
    font-size: var(--font-size-h2);
    overflow: hidden
}

.dashboard-media__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.dashboard-media__name {
    padding: var(--space-2);
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.dashboard-media__tile--add {
    border-style: dashed;
    align-items: center;
    justify-content: center;
    color: var(--text-muted)
}

.dashboard-media__tile--add .dashboard-media__thumb {
    background: none
}

.dashboard-media__add {
    font-size: var(--font-size-h1, var(--font-size-h2))
}

/* --- v2 report: KPI tiles (sections reuse .dashboard-detail__row) --- */
.dashboard-report__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4)
}

.dashboard-report__stat-value {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: 1.1
}

.dashboard-report__stat-label {
    margin-top: 2px;
    font-size: var(--font-size-small);
    color: var(--text-tertiary)
}

.dashboard-report__stat-hint {
    margin-top: 2px;
    font-size: var(--font-size-caption);
    color: var(--text-muted)
}

/* --- v2 form: a touch more breathing room between section cards --- */
.dashboard-form--v2 .card,
.dashboard-settings--v2 .card {
    border-radius: var(--radius-lg)
}

/*
 * Header menu surface + rows, owned by @clemeleon/dashboard. Backs LanguageMenu /
 * UserMenu (and any app-authored `.dropdown` like a "New" menu). Un-scoped so the
 * components work standalone in any consumer; per-item visuals come from lepa's
 * .menu-item. All lepa tokens.
 */
.dropdown {
    background: var(--background-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    display: flex;
    flex-direction: column;
    gap: 2px
}

.dropdown .menu-item {
    border-radius: var(--radius-md);
    width: 100%;
    text-align: left
}

.dropdown .menu-item:hover {
    background: var(--background-hover)
}

.dropdown .menu-item__trailing {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--font-size-caption)
}

/* Small uppercase group heading inside a menu (e.g. "Language"). */
.header-menu__label {
    padding: 6px 10px 2px;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--text-muted)
}

/* Leading 2-letter locale code column in LanguageMenu rows. */
.header-menu__code {
    flex: none;
    width: 22px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary)
}

/* Identity block at the top of UserMenu. */
.header-menu__user {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px
}

.header-menu__user-name {
    display: block;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap
}

.header-menu__user-email {
    display: block;
    font-size: var(--font-size-caption);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/*
 * WorkspaceSwitcher + WorkspaceCreateModal chrome, owned by @clemeleon/workspace. Scoped under
 * .workspace-create* / .workspace-menu* so it works standalone in any consumer. All lepa tokens.
 * The switcher's dropdown surface (.dropdown/.menu-item) comes from @clemeleon/dashboard's
 * header-menu.css, loaded transitively via the dashboard dependency.
 */

/* Two-line label + caption inside a switcher menu row. */
.workspace-menu__labels {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px
}

.workspace-menu__label-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 100%
}

.workspace-menu__label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.workspace-menu__caption {
    font-size: var(--font-size-caption);
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

/* One added part: [template label] [name input] [remove] */
.workspace-create__part {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0
}

.workspace-create__part-type {
    flex: none;
    min-width: 84px;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide)
}

.workspace-create__part .input {
    flex: 1
}

.workspace-create__part-remove {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: none;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer
}

.workspace-create__part-remove:hover {
    background: var(--background-hover);
    color: var(--text-primary)
}

.workspace-create__part-remove svg {
    width: 16px;
    height: 16px
}

/* The template palette, grouped by kind. */
.workspace-create__palette {
    display: flex;
    flex-direction: column;
    gap: var(--space-1)
}

.workspace-create__palette-label {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide)
}

/* "+ Add [template]" chip. */
.workspace-create__add {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--easing-out), background var(--duration-fast) var(--easing-out)
}

.workspace-create__add:hover:not(:disabled) {
    background: var(--background-hover);
    border-color: var(--brand-primary);
    color: var(--text-primary)
}

.workspace-create__add svg {
    width: 15px;
    height: 15px
}

/* --- Strict mode: workspace-template picker + locked-parts preview --- */

/* One selectable workspace template (a whole fixed structure to clone). */
.workspace-create__template {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--easing-out), background var(--duration-fast) var(--easing-out)
}

.workspace-create__template:hover:not(:disabled) {
    background: var(--background-hover)
}

.workspace-create__template--active {
    border-color: var(--brand-primary);
    background: var(--background-hover)
}

.workspace-create__template-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.workspace-create__template-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium)
}

.workspace-create__template-label svg {
    width: 16px;
    height: 16px
}

.workspace-create__template-desc {
    font-size: var(--font-size-caption);
    color: var(--text-tertiary)
}

.workspace-create__template-check {
    flex: none;
    display: flex;
    color: var(--brand-primary)
}

.workspace-create__template-check svg {
    width: 16px;
    height: 16px
}

/* A locked part in the strict-mode preview (structure is fixed; parts aren't editable). */
.workspace-create__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--background-hover);
    color: var(--text-secondary);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium)
}

/* WorkspacesManager — layout only; surfaces/borders/radius come from lepa card + tokens. */
.ws-mgr {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ws-mgr__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.ws-mgr__sub {
    margin-top: var(--space-1);
}

.ws-mgr__actions {
    display: flex;
    gap: var(--space-2);
    flex: none;
}

/* ── Workspace card ── */
.ws-card {
    display: flex;
    flex-direction: column;
}

.ws-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex: 1;
}

.ws-card__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.ws-card__name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ws-card__title {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.ws-card__stats {
    display: flex;
    gap: var(--space-6);
}

.ws-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ws-stat__value {
    font-size: var(--font-size-h4, 1.125rem);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.1;
}

.ws-stat__label {
    font-size: var(--font-size-small);
    color: var(--text-tertiary);
}

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

/* ── Section (Archived / Transfer) ── */
.ws-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ws-section__title {
    font-size: var(--font-size-h5, 1rem);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.ws-archived__list {
    display: flex;
    flex-direction: column;
}

.ws-archived__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.ws-archived__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ws-archived__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ws-archived__name {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

/* ── Transfer ownership ── */
.ws-transfer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.ws-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ws-field__static {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--background-card);
    color: var(--text-primary);
}

.ws-transfer__foot {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

@media (max-width: 860px) {
    .ws-transfer__grid {
        grid-template-columns: 1fr;
    }

    .ws-mgr__cards {
        grid-template-columns: 1fr !important;
    }
}