/*
 * Gestor de Demandas — CSS definitivo (Fase 7.2, RNF-01/RNF-06/RNF-07).
 * Fonte dos valores: .specs/DesignSystem.md v2.0 (onde diverge de
 * samples/layout/project/industry.css, o DesignSystem.md vence).
 * Organização: fontes > tokens > base > layout > componentes > utilitários.
 * Mobile-first literal: nenhuma media query nas seções acima; só uma
 * @media (min-width: 768px) no fim, para as poucas diferenças de desktop.
 */

/* ── Fontes — auto-hospedadas (RNF-06: sem rede, sem @import bloqueante) ── */

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-400.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/barlow-500.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/barlow-700.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-condensed-400.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-condensed-600.woff2") format("woff2");
}

/* ── Tokens ── */

:root {
    --color-bg: #f2f2f3;
    --color-surface: #e9e9ea;
    --color-text: #141210;
    --color-divider: color-mix(in srgb, #141210 16%, transparent);

    --color-accent: #f2c327;
    --color-accent-100: #fdf4d6;
    --color-accent-200: #fbe9ab;
    --color-accent-300: #f8dd7f;
    --color-accent-400: #f5d053;
    --color-accent-500: #f2c327;
    --color-accent-600: #cfa41c;
    --color-accent-700: #7a610f;
    --color-accent-800: #5c490d;
    --color-accent-900: #141210;

    --color-neutral-100: #f5f5f8;
    --color-neutral-200: #e7e7ea;
    --color-neutral-300: #d4d4d7;
    --color-neutral-400: #b7b7ba;
    --color-neutral-500: #98989b;
    --color-neutral-600: #7a7a7d;
    --color-neutral-700: #5d5d60;
    --color-neutral-800: #424244;
    --color-neutral-900: #2b2b2d;

    --st-backlog-bg: #e7e7ea;   --st-backlog-fg: #424244;
    --st-analise-bg: #dfeaf6;   --st-analise-fg: #2c455d;
    --st-aprovada-bg: #e8e4f5;  --st-aprovada-fg: #40356b;
    --st-execucao-bg: #fae4d8;  --st-execucao-fg: #7a3a12;
    --st-teste-bg: #d9efec;     --st-teste-fg: #12534b;
    --st-concluida-bg: #ddf0dc; --st-concluida-fg: #1f5320;
    --st-cancelada-bg: #f8dedd; --st-cancelada-fg: #7a2320;

    --pr-baixa: transparent;
    --pr-media: #b7b7ba;
    --pr-alta: #d97a2b;
    --pr-urgente: #c0392b;

    --color-danger: #c0392b;
    --color-warning: #d97a2b;
    --color-success: #1f5320;
    --color-info: #2c455d;

    --font-heading: "Barlow Condensed", system-ui, sans-serif;
    --font-heading-weight: 600;
    --font-body: "Barlow", system-ui, sans-serif;

    --space-1: 3.4px;
    --space-2: 6.8px;
    --space-3: 10.2px;
    --space-4: 13.6px;
    --space-6: 20.4px;
    --space-8: 27.2px;

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 7px;

    --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

    --bottom-nav-height: 56px;
}

/* ── Base ── */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-4));
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    margin: 0 0 var(--space-2);
}

h1 { font-size: 32px; line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: 20px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.04em; }
h3 { font-size: 17px; line-height: 1.2; }
h4 { font-size: 15px; line-height: 1.2; }
h5, h6 { font-size: 13px; line-height: 1.3; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
    font-size: 11px;
    margin-top: var(--space-1);
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr {
    height: 1px;
    border: 0;
    margin: var(--space-4) 0;
    background: var(--color-divider);
}

/* ── Tipografia utilitária ── */

.text-muted { color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.text-support { display: block; font-size: 13px; color: color-mix(in srgb, var(--color-text) 58%, transparent); }
.text-meta { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.text-disabled { color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* Rótulo estrutural — nome de seção, eyebrow, unidade de estatística,
   anotação de endpoint: sempre Condensed caixa alta, nunca texto humano. */
.label-system {
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

/* Link de ação disfarçado de rótulo pequeno ("ver todas", "+ novo") — o
   texto é pequeno de propósito (hierarquia visual), mas a área de toque
   não pode ser: min-height 44px na origem (RNF-01), não tela a tela. */
.action-link {
    font-family: var(--font-heading);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent-700);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.stat-value {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 32px;
    line-height: 1;
}

.tabular-nums { font-variant-numeric: tabular-nums; }

.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;
}

/* ── Layout ── */

.app-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-divider);
}

.app-header__title {
    margin: 0;
    font-size: 20px;
}

.app-content {
    padding: var(--space-4);
}

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-divider);
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.detail-header__back, .detail-header__action, .detail-header__save {
    color: var(--color-accent-700);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.detail-header__cancel {
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.detail-header__title { color: var(--color-text); }

.flash-messages {
    padding: var(--space-3) var(--space-4) 0;
}

.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
}

.auth-content {
    width: 100%;
    max-width: 360px;
    padding: var(--space-6);
}

.auth-logo {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-4);
    background: #141210;
    border-color: #141210;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-title {
    margin: 0 0 var(--space-4);
    text-align: center;
}

.auth-links {
    margin-top: var(--space-4);
    text-align: center;
    font-size: 13px;
}

.auth-hint {
    margin: 0 0 var(--space-3);
    font-size: 13px;
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

/* ── Componentes — reaproveitados do Industry (§7 DesignSystem.md) ── */

.blueprint {
    position: relative;
    border: 1px solid var(--color-divider);
    border-radius: 0;
}
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
    position: absolute; width: 11px; height: 11px;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
    content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; text-decoration: none;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 14px; line-height: 1.2; color: var(--color-text);
    background: transparent; border: 1px solid var(--color-divider);
    min-height: 48px; padding: 0 20px;
    border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #141210; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); color: var(--color-accent-100); }
.btn-secondary { background: transparent; border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); border-color: transparent; padding-inline: var(--space-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-danger { background: var(--color-danger); color: #ffffff; border-color: var(--color-danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 85%, black); }
.btn-icon { width: 44px; height: 44px; padding: 0; }
.btn-block { width: 100%; }

.field > label {
    display: block; font-size: 12px; margin-bottom: 5px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
    width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3);
    font: inherit; font-size: 16px; color: var(--color-text);
    caret-color: var(--color-accent-700);
    background: var(--color-surface);
    border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent-700); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

.field-error .input { border-color: var(--color-danger); }
.field-error__msg {
    display: block; margin-top: var(--space-1); font-size: 13px; color: var(--color-danger);
}

.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; min-height: 44px; }
.radio input, .seg-opt input {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
    width: 18px; height: 18px; flex: none; border-radius: 50%;
    border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent-700); }
.radio input:checked + .dot {
    border-color: var(--color-accent-700); background: var(--color-accent);
    box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }

.seg {
    display: inline-flex; overflow: hidden; width: 100%;
    border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    flex: 1; min-height: 44px; padding: 0 var(--space-3); font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: #141210; }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent-700); outline-offset: -2px; }

.card {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3); border-radius: var(--radius-md);
    background: transparent; border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
.card-title {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
    display: flex; align-items: center; gap: 6px; font-size: 11px;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag {
    display: inline-flex; align-items: center; font-size: 11px;
    letter-spacing: 0.02em; padding: 3px 10px;
    border-radius: calc(var(--radius-md) * 0.75);
}
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent-700); color: var(--color-accent-700); }
.tag-atraso { background: var(--color-accent-200); color: var(--color-accent-800); }

/* Chip de status — um par tinta/texto por status da RF-15 (§1.4). */
.tag-st-backlog   { background: var(--st-backlog-bg);   color: var(--st-backlog-fg); }
.tag-st-analise   { background: var(--st-analise-bg);   color: var(--st-analise-fg); }
.tag-st-aprovada  { background: var(--st-aprovada-bg);  color: var(--st-aprovada-fg); }
.tag-st-execucao  { background: var(--st-execucao-bg);  color: var(--st-execucao-fg); }
.tag-st-teste     { background: var(--st-teste-bg);     color: var(--st-teste-fg); }
.tag-st-concluida { background: var(--st-concluida-bg); color: var(--st-concluida-fg); }
.tag-st-cancelada { background: var(--st-cancelada-bg); color: var(--st-cancelada-fg); }

dialog.dialog-native {
    border: none; padding: 0; background: transparent; max-width: none; max-height: none;
}
dialog.dialog-native::backdrop {
    background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}

.dialog-backdrop {
    position: fixed; inset: 0; display: grid; place-items: center;
    padding: var(--space-4); z-index: 100;
    background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
    width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-4); border-radius: var(--radius-lg);
    background: var(--color-bg); box-shadow: var(--shadow-lg);
}
.dialog-title {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-body strong { color: var(--color-danger); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
    text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
    padding: var(--space-2);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.avatar {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--color-divider);
    font-family: var(--font-heading); font-size: 15px; color: var(--color-accent-700);
}
.avatar--lg { width: 56px; height: 56px; font-size: 20px; }

.stat-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--color-divider);
    border-bottom: 1px solid var(--color-divider);
}
.stat-row__item {
    padding: var(--space-3);
    display: flex; flex-direction: column; gap: 2px;
    border-right: 1px solid var(--color-divider);
}
.stat-row__item:last-child { border-right: none; }
.stat-row__item--accent { background: var(--color-accent-100); }
.stat-row__item--accent .stat-value, .stat-row__item--accent .label-system { color: var(--color-accent-800); }

/* ── Componentes — novos, sem referência no Industry (§7 DesignSystem.md) ── */

.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    display: flex; height: var(--bottom-nav-height);
    border-top: 1px solid var(--color-divider);
    background: var(--color-bg);
}
.bottom-nav__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 44px; color: var(--color-text); text-decoration: none;
}
.bottom-nav__item svg { width: 24px; height: 24px; }
.bottom-nav__item span {
    font-family: var(--font-heading); font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.bottom-nav__item.is-active { color: var(--color-accent-800); }
.bottom-nav__item.is-active span { font-weight: var(--font-heading-weight); }

.demand-card {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-3); min-height: 44px;
    border: 1px solid var(--color-divider); border-left: 3px solid var(--pr-baixa);
    text-decoration: none; color: inherit;
}
.demand-card[data-priority="media"] { border-left-color: var(--pr-media); }
.demand-card[data-priority="alta"] { border-left-color: var(--pr-alta); }
.demand-card[data-priority="urgente"] { border-left-color: var(--pr-urgente); }
.demand-card__row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }

.project-card {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3); min-height: 44px;
    border: 1px solid var(--color-divider);
    text-decoration: none; color: inherit;
}
.progress-bar { height: 4px; background: var(--color-neutral-300); }
.progress-bar > div { height: 100%; background: var(--color-accent); }
.progress-meta {
    display: flex; justify-content: space-between; font-size: 12px;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.demand-card__title { font-size: 15px; font-weight: 500; line-height: 1.3; }
.demand-card__meta {
    font-family: var(--font-heading); font-size: 12px; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.demand-card__due { font-size: 13px; }

.filter-panel {
    border: 1px solid var(--color-divider); border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.filter-panel > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; padding: 0 var(--space-3); cursor: pointer;
    font-family: var(--font-heading); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
}
.filter-panel__body {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: 0 var(--space-3) var(--space-3);
}

.pagination {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3);
    margin-top: var(--space-4);
    font-family: var(--font-heading); font-variant-numeric: tabular-nums;
}
.pagination a, .pagination span { min-height: 44px; display: inline-flex; align-items: center; }

.empty-state {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-8) var(--space-4); text-align: center;
    color: color-mix(in srgb, var(--color-text) 68%, transparent);
}
.empty-state svg { width: 40px; height: 40px; opacity: 0.5; }

.toast {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3); border-radius: var(--radius-md);
    margin: 0 0 var(--space-2); font-size: 14px;
}
.toast--success { background: color-mix(in srgb, var(--color-success) 14%, var(--color-bg)); color: var(--color-success); }
.toast--error { background: color-mix(in srgb, var(--color-danger) 14%, var(--color-bg)); color: var(--color-danger); }
.toast--info { background: color-mix(in srgb, var(--color-info) 14%, var(--color-bg)); color: var(--color-info); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item {
    padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item__period {
    font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.timeline-item__body { margin: var(--space-1) 0 0; font-size: 14px; }

.offline-screen {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-3); min-height: 100vh; padding: var(--space-4); text-align: center;
}

/* ── Utilitários ── */

.demand-header {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding-bottom: var(--space-4); margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-divider);
}

.detail-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    border: 1px solid var(--color-divider);
    margin-bottom: var(--space-4);
}
.detail-grid__cell {
    padding: var(--space-3); border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider);
}
.detail-grid__cell:nth-child(2n) { border-right: none; }
.detail-grid__value { font-size: 15px; margin-top: 2px; }
.detail-grid__value--accent { color: var(--color-accent-800); }

.demand-description {
    font-size: 14px; line-height: 1.55;
    color: color-mix(in srgb, var(--color-text) 78%, transparent);
    margin-bottom: var(--space-4);
}

.status-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.status-form { display: inline-flex; gap: var(--space-2); }

.attachment-form { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.attachment-form .input { flex: 1; }

.comment-bar {
    display: flex; gap: var(--space-2); margin-top: var(--space-4);
    padding-top: var(--space-3); border-top: 1px solid var(--color-divider);
}
.comment-bar .input { flex: 1; }

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

.section-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-2); margin: var(--space-6) 0 var(--space-2);
}
.section-header h3 { margin: 0; }

.demand-card-list, .tag-row { display: flex; flex-direction: column; gap: var(--space-2); }
.tag-row { flex-direction: row; flex-wrap: wrap; }

.form-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.checkbox-field {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; font-size: 14px; cursor: pointer;
}
.checkbox-field input { width: 20px; height: 20px; }

.search-form { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.search-form .input:first-child { flex: 1; }

.list { list-style: none; margin: 0; padding: 0; }
.list-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    min-height: 44px; padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-divider); flex-wrap: wrap;
    text-decoration: none; color: inherit;
}
.list-item:last-child { border-bottom: none; }

.client-row { gap: var(--space-3); flex-wrap: nowrap; min-height: 72px; }
.client-row__main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.client-row__name { font-size: 16px; font-weight: 500; }
.client-row__chevron { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.client-header {
    display: flex; gap: var(--space-4); align-items: center;
    padding-bottom: var(--space-4); margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-divider);
    flex-wrap: wrap;
}
.client-header .tag { margin-top: var(--space-1); }

.contact-row { flex-wrap: wrap; align-items: flex-start; }
.contact-row__actions { display: flex; gap: var(--space-2); }
.contact-row__manage {
    display: flex; gap: var(--space-3); width: 100%;
    padding-top: var(--space-2); font-size: 13px;
}
.contact-row__manage .link-button { font-size: 13px; }

.danger-zone {
    padding-top: var(--space-4); margin-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
}

.detail-list { margin: 0 0 var(--space-4); }
.detail-list dt {
    padding-top: var(--space-2); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.detail-list dd { margin: 2px 0 0; font-size: 15px; }
.detail-list dd a { color: var(--color-text); }

.link-button {
    background: none; border: none; padding: 0; font: inherit;
    color: var(--color-accent-700); cursor: pointer; text-decoration: underline;
    min-height: 44px; display: inline-flex; align-items: center;
}

@media (min-width: 768px) {
    .app-content {
        max-width: 960px;
        margin: 0 auto;
    }
}
</content>