/* ============================================================
 * Boardly Page Layouts — klassen-basiert, keine Inline-Styles.
 *
 * Story 0057 / ADR-0026 (Sprint 6) — Tokens-only-Pass:
 *   Hardcoded Spacing-Werte wurden auf --space-N umgestellt.
 *   Heading-/Banner-Tokens leben in shell.css.
 *
 * Story 0064a / ADR-0030 (Sprint 7) — Component-Styles ausgelagert:
 *   Workspace-/Board-/Card-Component-Styles wandern nach chrome.css/
 *   board.css/card.css. pages.css behaelt nur Page-Container-Layouts
 *   (.workspace-list, .board-list, .board-view, .card-detail) und die
 *   Page-uebergreifenden Helper (.page, .banner, .empty-state, .modal).
 * ============================================================ */

.page {
    max-width: 42rem;
    margin: var(--space-5) auto;
    padding: 0 var(--space-4);
    line-height: 1.6;
}

.page h1 {
    letter-spacing: -0.02em;
    margin-top: 0;
}

/* UI-Restyle — Home-Landing. */
.home-lead {
    max-width: 52ch;
    color: var(--ink-2);
    font-size: 1.0625rem;
}

.home-cta {
    margin-top: var(--space-4);
}

.home-cta .td-btn {
    display: inline-block;
    text-decoration: none;
}

.banner {
    padding: var(--space-2) var(--space-3);
    background: var(--accent-soft);
    color: var(--ink);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-2);
    margin-bottom: var(--space-4);
}

.hint {
    color: var(--ink-3);
    font-size: var(--font-size-sm);
}

.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }

.error {
    color: var(--danger);
    font-weight: 500;
}

.loading {
    color: var(--ink-3);
    font-style: italic;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Workspace + Board Page-Containers (Component-Styles in chrome.css/card.css) ---------- */
.workspace-list,
.board-list {
    /* Page-Container — extends .page mit erweiterter Max-Width fuer Grids. */
    max-width: 72rem;
}

.workspace-grid, .board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* Workspace-/Board-Card-Component-Styles wurden nach card.css verschoben.
   Hier nur noch das Default-Aussehen fuer die Page-uebergreifenden Card-
   Container, das dem Sprint-7-Design (Surface + Hover-Akzent) entspricht. */
.workspace-card,
.board-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .15s var(--ease), background .15s var(--ease);
}

.workspace-card:hover,
.board-card:hover {
    border-color: var(--line-strong);
    background: var(--surface-2);
    cursor: pointer;
}

.workspace-card h3,
.board-card h3 {
    margin: 0;
    /* UI-Restyle: Karten-Titel im Grid etwas groesser fuer klarere Hierarchie. */
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.workspace-card-add,
.board-card-add {
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--bg-sunken);
    border-style: dashed;
    color: var(--ink-3);
}

.workspace-card-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.workspace-invite-btn {
    align-self: flex-start;
}

/* ---------- Empty States ---------- */
.empty-state {
    padding: var(--space-5);
    text-align: center;
    color: var(--ink-3);
}

.empty-state-icon {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
}

.empty-state-title {
    margin: 0 0 var(--space-2);
    color: var(--ink);
    font-weight: 600;
}

.empty-state-description {
    margin: 0 0 var(--space-3);
}

.empty-state-action {
    margin-top: var(--space-3);
}

/* ---------- Modals (Sprint-7-MVP — CardDetail-Modal kommt Sprint 8) ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: grid;
    place-items: center;
    z-index: 100;
}

.modal {
    background: var(--surface);
    padding: var(--space-4);
    border-radius: var(--r-3);
    min-width: 360px;
    max-width: 90vw;
}

.modal h2 {
    margin-top: 0;
}

.modal label {
    display: block;
    margin-bottom: var(--space-2);
}

.modal input {
    display: block;
    width: 100%;
    padding: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    margin-top: var(--space-1);
}

.modal-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-3);
}

/* ---------- Board View Page-Container ---------- */
.board-view {
    max-width: none;
    padding: 0 var(--space-4) var(--space-4);
}

/* Board-Columns/-Column/-Card-Item Component-Styles leben jetzt in board.css
   und card.css. js/board-dnd.js nutzt diese Klassen weiter — die Selektoren
   greifen ueber board.css/card.css. */

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--r-2);
    margin-top: var(--space-3);
}

.inline-form input {
    flex: 1 1 200px;
    padding: var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}

.breadcrumb {
    font-size: var(--font-size-sm);
    color: var(--ink-3);
    margin-bottom: var(--space-2);
}

.breadcrumb a {
    color: var(--ink-2);
    text-decoration: none;
}

.breadcrumb a:hover { text-decoration: underline; }

.page-header {
    margin-bottom: var(--space-3);
}