/* my.deedhold.com — portal styles.
   Design tokens come from the Deedhold design system (styles/ds/ — brand
   contract, kept verbatim). Everything below is the portal's own semantic
   layer, informed by the design references in ../../design/ but written as
   app CSS. Shape language is sharp: no radius, 2px insets, corner notches. */

@import "ds/styles-IXFvesB.css";

/* Portal-owned partials (plan design-d-shell, task 004) — one file per owning task, so
   fifteen later tasks never edit this file at once. No task edits another task's partial;
   see _plan.md's "Shared-file ownership" note. */
@import "portal/components-3N2GFdl.css";
@import "portal/shell-kNDKM0i.css";
@import "portal/footer-Jr7_X4Z.css";
@import "portal/responsive-mQeifpY.css";
@import "portal/section-nav-SveojRw.css";
@import "portal/environments-byVQo2i.css";
@import "portal/deploy-2q9IQlg.css";
@import "portal/deployment-history-lu4v2WL.css";
@import "portal/deployment-detail-Ax7n8gN.css";
@import "portal/operation-C67mA0m.css";
@import "portal/confirm-p0LWEmA.css";
@import "portal/auth-1G6lNzD.css";
@import "portal/auth-login-u5qitqv.css";
@import "portal/auth-2fa-mKwut64.css";
@import "portal/auth-reset-OSRs6Vu.css";
@import "portal/auth-invite-8xsov0Y.css";

/* plan engagement-proposals-signing, task 015 — every partial the four engagement pages need,
   created and imported up front so 016–025 never edit app.css or open a sibling task's own
   partial (_plan.md "Shared-file ownership"). */
@import "portal/lifecycle-sc_uxK2.css";
@import "portal/page-frame-aKS-o77.css";
@import "portal/projects-2W0j5vO.css";
@import "portal/wait-list-lYHuqmJ.css";
@import "portal/project-nb4J3fv.css";
@import "portal/project-shared-VwKAaNI.css";
@import "portal/quote-IvpVq3Q.css";
@import "portal/close-disclosure-Zp3mSVR.css";
@import "portal/project-request-uto2YkZ.css";

/* plan client-uploads-task-detail, task 001 — uploads.css (task 009) and task.css (task 023)
   created and imported up front, same "one task owns app.css" rule as above. */
@import "portal/uploads-KF-f_OJ.css";
@import "portal/task-um5XULP.css";

/* plan env-basic-auth, task 008 — the client Access page's own partial; tasks 009/014 add rules
   here, never edit app.css again (the "one task owns app.css" rule). */
@import "portal/access-9khupDY.css";

/* plan obchod-home, task 008 — the Obchod home page (`/`) skeleton: `home.css` (page frame,
   section rhythm, shared `.sq--*` blocks, this task's own) plus one empty stub per
   section, filled by tasks 009–015, each in its own file (`_plan.md`'s "one file per section, by
   ownership" — nobody after this task edits app.css again). */
@import "portal/home-W0jLk-z.css";
@import "portal/home-hero-2wegEht.css";
@import "portal/home-waiting-diz749f.css";
@import "portal/home-work-ZNWRXw5.css";
@import "portal/home-outlook-sFX_3DS.css";
@import "portal/builder-Jw5VUQI.css";
@import "portal/builder-hub-LIbqA5-.css";
@import "portal/admin-engagement-0XNPrkP.css";
@import "portal/status-chip-RuK9-m5.css";
@import "portal/empty-state-e46VZO_.css";
@import "portal/help-Tm6E9In.css";

/* plan onboarding-readiness, task 024 — page partials created empty up front so tasks 026-033
   never open app.css (after this only task 036 edits it). */
@import "portal/tickets-pqCZxJD.css";
@import "portal/account-uHjJ8GM.css";
@import "portal/billing-V_2xHjw.css";
@import "portal/audit-w53471i.css";

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--surface-page);
}

a { color: var(--text-link); }
a:hover { color: var(--dh-purple-700); }

/* ── Icons (components/Icon.html.twig, inline SVG replacing Material Icons) ─ */
.icon { flex-shrink: 0; vertical-align: middle; }

/* ── Shared bits ──────────────────────────────────────────────────── */
/* .btn/.btn--*, .field/.input, .overline moved to portal/components.css (plan design-d-shell,
   task 004) — they back the design-system Button/Input/Select/Textarea/Overline components. */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: var(--space-1) 10px;
    font-weight: var(--fw-semibold);
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.status-pill::before { content: ""; width: 6px; height: 6px; background: currentColor; }

.avatar {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--fs-overline);
    font-weight: var(--fw-bold);
}
.avatar--project { background: var(--dh-purple-100); color: var(--accent); }
.avatar--user { width: 30px; height: 30px; background: var(--surface-ink); color: var(--text-on-brand); }

/* Notched surface — the signature cut corners (top-left + bottom-right). */
.notched { position: relative; }
.notched::before,
.notched::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    background: var(--notch-color, var(--surface-wash));
}
.notched::before { top: 0; left: 0; }
.notched::after { bottom: 0; right: 0; }

/* ── Auth flash messages ──────────────────────────────────────────────
   What is left of the pre-design-D `.login*` family. The card shell it used to sit in
   (`.login`, `.login-card`, `.login-intro`, `.login-alt`) went unreferenced when the auth
   screens moved to `components/AuthLayout.html.twig` and `/register` was removed (eaa6da4);
   removed in plan `auth-shell-revision`. The two below are still rendered by
   `security/login.html.twig`'s flash loops, and `.login-footer` further down by
   `shared/_public_footer.html.twig` — `portal/auth.css` pins that footer on the auth screens
   but does not restyle it. */
.login-error {
    padding: var(--space-3) var(--space-4);
    background: var(--dh-error-100);
    color: var(--dh-error-600);
    font-size: 14px;
    line-height: var(--lh-body);
}
.login-success {
    padding: var(--space-3) var(--space-4);
    background: var(--dh-success-100);
    color: var(--text-primary);
    font-size: 14px;
    line-height: var(--lh-body);
}
.field-note { font-size: var(--fs-overline); color: var(--text-secondary); }
.login-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-overline);
    color: var(--text-secondary);
}
.login-footer a { text-decoration: none; color: var(--text-secondary); }
.login-footer .dot { width: 4px; height: 4px; background: var(--dh-slate-8); }

/* ── App shell ────────────────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; background: var(--surface-page); }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.sidebar {
    width: 224px;
    flex-shrink: 0;
    background: var(--surface-wash);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
}
.sidebar-logo { padding: 26px var(--space-6) 30px; display: flex; align-items: center; }
/* The brand mark links to the staff home; flex so its two spans stay blockified flex items
   (they were direct children of .sidebar-logo before the link wrapped them). */
.sidebar-logo-link { display: flex; align-items: center; }
.sidebar-logo .logo-mark { display: none; }
.sidebar-logo--admin { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.admin-badge {
    display: inline-flex; padding: 3px var(--space-2);
    background: var(--accent); color: var(--text-on-brand);
    font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 11px;
    letter-spacing: var(--ls-overline); text-transform: uppercase;
}
.sidebar-note { font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--text-secondary); }
.topbar-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-body); letter-spacing: -0.01em; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 11px var(--space-6);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-sm);
    color: var(--text-primary);
    text-decoration: none;
}
.sidebar-nav .icon { width: 20px; height: 20px; color: var(--text-secondary); }
.sidebar-nav a:hover { background: rgba(124, 58, 237, 0.06); color: var(--dh-purple-700); }
.sidebar-nav a[aria-current="page"] {
    color: var(--accent);
    background: var(--surface-page);
    box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar-nav a[aria-current="page"] .icon { color: var(--accent); }
.nav-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--dh-error-100);
    color: var(--dh-error-600);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: 11px;
}
.sidebar-spacer { flex: 1; }
.sidebar-foot { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: 10px; }
.sidebar-foot a { font-size: var(--fs-caption); text-decoration: none; color: var(--text-secondary); }
.sidebar-foot a:hover { color: var(--accent); }
.locale-switcher { display: flex; align-items: center; gap: var(--space-2); }
.locale-switcher-btn {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: var(--fs-overline);
    color: var(--text-secondary);
    cursor: pointer;
}
.locale-switcher-btn:hover { color: var(--accent); }
.locale-switcher-btn--current { color: var(--text-primary); font-weight: var(--fw-bold); cursor: default; }
.locale-switcher-btn + .locale-switcher-btn { border-left: var(--border-width) solid var(--border-subtle); padding-left: var(--space-2); }

.topbar {
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-8);
    background: var(--surface-page);
    box-shadow: inset 0 calc(-1 * var(--border-width)) 0 var(--border-subtle);
    position: relative;
    z-index: 20;
}
.topbar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2) 10px var(--space-2) var(--space-2);
    color: var(--text-primary);
}
.topbar-btn:hover { background: var(--surface-wash); }
.topbar-btn .icon { width: 20px; height: 20px; color: var(--text-secondary); }
.topbar-btn--user { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 14px; }

/* Shared by the dropdown panel and the mobile nav panel (portal/responsive.css). */
:root { --shadow-popover: inset 0 0 0 var(--border-width) var(--border-subtle), 0 16px 40px rgba(15, 23, 42, 0.12); }

/* ── Dropdowns ────────────────────────────────────────────────────── */
.dropdown { position: relative; }
.dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    width: 280px;
    background: var(--surface-card);
    padding: var(--space-2) 0;
    z-index: 30;
    box-shadow: var(--shadow-popover);
}
.dropdown--left .dropdown-panel { left: 0; }
.dropdown--right .dropdown-panel { right: 0; }
.dropdown-heading { padding: 10px var(--space-4) var(--space-2); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-secondary); }
.dropdown-item { display: block; padding: 10px var(--space-4); text-decoration: none; font-size: 14px; color: var(--text-primary); }
.dropdown-item:hover { background: var(--surface-wash); color: var(--text-primary); }
.dropdown-item--btn {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    font-family: var(--font-body);
}
.dropdown-logout { margin: 0; }
.dropdown-item--logout {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    font-family: var(--font-body);
}
.dropdown-item--current { color: var(--accent); font-weight: var(--fw-semibold); cursor: default; }
.dropdown-item--current:hover { background: none; color: var(--accent); }
.dropdown-locale {
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-4) 0;
    box-shadow: inset 0 var(--border-width) 0 var(--border-subtle);
}
.dropdown-user {
    padding: 10px var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-1);
    box-shadow: inset 0 calc(-1 * var(--border-width)) 0 var(--border-subtle);
}
.dropdown-user .name { font-weight: var(--fw-semibold); font-size: 14px; }
.dropdown-user .email { font-size: var(--fs-overline); color: var(--text-secondary); }
.role-chip {
    margin-top: 6px;
    align-self: flex-start;
    display: inline-flex;
    padding: 2px var(--space-2);
    background: var(--dh-info-100);
    color: var(--accent);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.role-chip--closed { background: var(--surface-wash); color: var(--text-secondary); }

/* ── Page scaffold ────────────────────────────────────────────────── */
.page { flex: 1; padding: 36px var(--space-10) 72px; }
.page-inner { max-width: 1040px; display: flex; flex-direction: column; gap: 36px; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.page-head h1 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 32px; letter-spacing: var(--ls-display); }


/* ── Empty state ──────────────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-5);
    padding: var(--space-24) var(--space-6);
}
.empty-state h2 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-lead); letter-spacing: var(--ls-display); }
.empty-state p { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); max-width: 420px; }

/* ── Responsive collapse ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .sidebar { width: 68px; }
    .sidebar-nav .label { display: none; }
    .sidebar-logo .logo-full { display: none; }
    .sidebar-logo .logo-mark { display: inline-flex; }
    .sidebar-foot { display: none; }
    .page { padding: var(--space-6); }
    .topbar { padding: 0 var(--space-5); }
    .topbar-btn--user .label { display: none; }

}

/* ── Page furniture (detail pages, subtitles) ─────────────────────── */
.back-link {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--fs-caption); text-decoration: none; color: var(--text-secondary);
}
.back-link:hover { color: var(--accent); }
.page-head--stack { flex-direction: column; align-items: flex-start; gap: 6px; }
.page-sub { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); }
.title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.meta-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-secondary); flex-wrap: wrap; }
.meta-row strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.meta-row .dot { width: 4px; height: 4px; background: var(--dh-slate-8); }
.detail-head { display: flex; flex-direction: column; gap: 14px; }

/* ── Status pill variants ─────────────────────────────────────────── */
.status-pill--done, .status-pill--muted { background: var(--dh-muted-200); color: var(--text-secondary); }
.status-pill--open { background: var(--dh-info-100); color: var(--accent); }
.status-pill--waiting, .status-pill--pending { background: var(--dh-warning-100); color: var(--text-primary); }
.status-pill--paid { background: var(--dh-success-100); color: var(--text-primary); }
.status-pill--overdue { background: var(--dh-white); color: var(--dh-error-600); }
.status-pill--sm { padding: 3px var(--space-2); font-size: 10px; }
.status-pill--icon::before { content: none; }
.status-pill--icon .icon { width: 12px; height: 12px; }

/* ── Grid tables ──────────────────────────────────────────────────── */
.table { display: flex; flex-direction: column; }
.table-head, .table-row {
    display: grid; gap: var(--space-4); align-items: center;
    grid-template-columns: var(--table-cols);
}
.table-head { padding: 0 0 10px; }
.table-head span {
    font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--ls-overline);
    text-transform: uppercase; color: var(--text-secondary);
}
.table-row {
    padding: 16px 0;
    box-shadow: inset 0 var(--border-width) 0 var(--border-subtle);
    text-decoration: none; color: var(--text-primary); font-size: 14px;
}
a.table-row:hover { background: var(--surface-wash); color: var(--text-primary); }
.table-row--muted { color: var(--text-secondary); opacity: 0.85; }
.table-row--alert { background: var(--dh-error-100); padding-left: var(--space-3); padding-right: var(--space-3); margin: 0 calc(-1 * var(--space-3)); }
.table-foot {
    padding: 14px 0; font-size: var(--fs-caption); color: var(--text-secondary);
    box-shadow: inset 0 var(--border-width) 0 var(--border-subtle);
}
.table .cell-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.table .cell-title .primary { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 17px; letter-spacing: -0.01em; color: var(--text-primary); }
.table .cell-title .secondary { font-size: var(--fs-caption); color: var(--text-secondary); }
.table .cell-right { text-align: right; }
.table .cell-note { color: var(--text-secondary); }
.num { font-variant-numeric: tabular-nums; }

.table--admin-projects { --table-cols: minmax(160px, 1.1fr) minmax(240px, 1.8fr) 140px 150px; }
.magento-cell, .billing-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: var(--fs-caption); }
.magento-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table--admin-members { --table-cols: minmax(160px, 1fr) minmax(200px, 1.4fr) 140px 140px minmax(280px, 1.6fr); }
.member-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.member-actions form { display: flex; gap: 8px; align-items: center; }
.table--admin-invitations { --table-cols: minmax(200px, 1.4fr) 140px 140px 120px; }
.table--audit { --table-cols: 90px minmax(160px, 1fr) minmax(280px, 1.8fr) 130px; }

.prio { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-caption); color: var(--text-secondary); }
.prio--error { color: var(--dh-error-600); }
.prio--warning { color: var(--dh-warning-600); }
.sla { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); }
.sla .icon { width: 16px; height: 16px; color: var(--text-secondary); }
.sla--error { color: var(--dh-error-600); font-weight: var(--fw-semibold); }
.sla--error .icon { color: var(--dh-error-600); }
.sla--muted { color: var(--text-secondary); }

/* ── Tabs ─────────────────────────────────────────────────────────── */
.tabs { display: flex; box-shadow: inset 0 calc(-1 * var(--border-width)) 0 var(--border-subtle); }
.tab {
    background: none; border: none; cursor: pointer; padding: 10px 18px;
    font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 14px;
    color: var(--text-secondary); text-decoration: none;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--accent); box-shadow: inset 0 calc(-1 * var(--border-width)) 0 var(--accent); }
.tab .count { color: var(--text-secondary); }

/* ── Info strip (nothing-needed state, degraded notices) ──────────── */
.info-strip { display: flex; align-items: center; gap: 14px; background: var(--surface-wash); padding: var(--space-5) var(--space-6); }
.info-strip .icon { width: 22px; height: 22px; color: var(--dh-success-600); }
.info-strip .body { display: flex; flex-direction: column; gap: 2px; }
.info-strip .title { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.info-strip .note { font-size: var(--fs-caption); color: var(--text-secondary); }
.notice {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 6px var(--space-3); font-size: var(--fs-caption); font-weight: var(--fw-medium);
}
.notice .icon { width: 16px; height: 16px; }
.notice--warning { background: var(--dh-warning-100); color: var(--text-primary); }

/* ── Discussion / ticket thread ───────────────────────────────────── */
/* `.detail-columns` (the old Projekt detail's two-column wrapper) was removed by task 021 — its
   rebuild has no second column since the „Co je nového" feed is out of scope (`_plan.md`'s Out
   of Scope). `.thread`/`.message*` below stay: shared with `templates/tickets/show.html.twig`
   and this page's own restyled Diskuze section (`.project-discussion`, task 023's CSS). */
.thread { display: flex; flex-direction: column; gap: var(--space-6); }
.message { display: flex; gap: var(--space-3); }
.message--sending { opacity: 0.55; }
.message .avatar { width: 34px; height: 34px; }
.message .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.message .head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.message .author { font-weight: var(--fw-semibold); font-size: 14px; }
.message .time { font-size: var(--fs-overline); color: var(--text-secondary); }
.message .pending { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-overline); color: var(--text-secondary); }
.message .pending .icon { width: 14px; height: 14px; }
.message--failed { opacity: 0.85; }
.message .failed { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-overline); color: var(--dh-error-600); }
.message .failed .icon { width: 14px; height: 14px; }
.message p { margin: 0; font-size: 14px; line-height: var(--lh-relaxed); }
.badge-staff {
    font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--accent);
}
.avatar--staff { background: var(--accent); color: var(--text-on-brand); }
.attachments { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.attachment {
    display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
    background: var(--surface-wash); text-decoration: none; color: var(--text-primary); font-size: var(--fs-caption);
}
.attachment:hover { background: var(--dh-purple-100); color: var(--text-primary); }
.attachment .icon { width: 18px; height: 18px; color: var(--accent); }
.attachment .size { color: var(--text-secondary); }

/* ── Compose box ──────────────────────────────────────────────────── */
.compose { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.compose .box { background: var(--surface-card); box-shadow: inset 0 0 0 var(--border-width) var(--border-subtle); }
.compose .box:focus-within { box-shadow: inset 0 0 0 var(--border-width) var(--border-brand); }
.compose textarea {
    display: block; width: 100%; border: none; outline: none; resize: none;
    padding: var(--space-3) var(--space-4); background: transparent;
    font-family: var(--font-body); font-size: 14px; line-height: var(--lh-body); color: var(--text-primary);
}
.compose .actions { display: flex; align-items: center; justify-content: space-between; }

/* ── Meta grid (ticket detail) ────────────────────────────────────── */
.meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); background: var(--surface-wash); padding: 18px var(--space-6); }
@media (max-width: 1100px) { .meta-grid { grid-template-columns: repeat(2, 1fr); } 
}
.meta-grid .item { display: flex; flex-direction: column; gap: 3px; }
.meta-grid .value { font-size: 14px; font-weight: var(--fw-semibold); }

/* ── Flash messages ───────────────────────────────────────────────── */
.flash {
    display: flex; align-items: center; gap: 10px;
    padding: var(--space-3) var(--space-4);
    font-size: 14px; line-height: var(--lh-body);
}
.flash .icon { width: 18px; height: 18px; }
.flash--success { background: var(--dh-success-100); color: var(--text-primary); }
.flash--error { background: var(--dh-error-100); color: var(--dh-error-600); }
/* Task 028: the "linked Epic isn't client-visible" notice - a warning, not a failure. */
.flash--warning { background: var(--dh-warning-100); color: var(--text-primary); }
/* GitHub half of "Otestovat spojení" (task 015): the App isn't configured — not a failure. */
.flash--muted { background: var(--dh-muted-200); color: var(--text-secondary); }

/* ── Account settings ─────────────────────────────────────────────── */
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 480px)); gap: var(--space-6); align-items: start; }
.form-card { --notch-color: var(--surface-page); background: var(--surface-wash); }
.form-card .inner { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6) 28px; }
.form-card h2 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); letter-spacing: -0.02em; }
.form-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.form-stack .input { background: var(--surface-card); }
.form-stack .input:disabled { color: var(--text-secondary); cursor: not-allowed; }
.form-actions { display: flex; justify-content: flex-start; padding-top: var(--space-1); }
.qr-code { width: 220px; height: 220px; background: var(--dh-white); box-shadow: inset 0 0 0 var(--border-width) var(--border-subtle); }
.secret-code {
    align-self: flex-start; padding: var(--space-2) var(--space-3);
    background: var(--surface-card); box-shadow: inset 0 0 0 var(--border-width) var(--border-subtle);
    font-size: var(--fs-body-sm); letter-spacing: 0.08em; word-break: break-all;
}
.backup-codes {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
}
.backup-codes code {
    display: block; padding: var(--space-2) var(--space-3);
    background: var(--surface-card); box-shadow: inset 0 0 0 var(--border-width) var(--border-subtle);
    font-size: var(--fs-body-sm); letter-spacing: 0.08em; text-align: center;
}

/* ── Responsive column hiding (per design collapse) ───────────────── */
@media (max-width: 1100px) {
    .hide-collapsed { display: none !important; }
    .table--audit { --table-cols: 90px minmax(140px, 1fr) minmax(200px, 1.8fr); }

}

/* ── Page titles & head variants ──────────────────────────────────── */
.page-title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 32px; letter-spacing: var(--ls-display); }
.page-title--md { font-size: var(--fs-h2); }
.page-head--split { align-items: flex-end; flex-wrap: wrap; }
.page-head-stack { display: flex; flex-direction: column; gap: 6px; }

/* ── Table cell tones ─────────────────────────────────────────────── */
.cell-strong { font-weight: var(--fw-bold); }
.cell-danger { font-weight: var(--fw-semibold); color: var(--dh-error-600); }

/* ── Status pill variants: deedhold-cloud environment status ─────────── */
.status-pill--running { background: var(--dh-success-100); color: var(--text-primary); }
.status-pill--created, .status-pill--stopped { background: var(--dh-muted-200); color: var(--text-secondary); }
.status-pill--failed { background: var(--dh-error-100); color: var(--dh-error-600); }
.status-pill--creating, .status-pill--deploying, .status-pill--importing, .status-pill--deleting {
    background: var(--dh-warning-100); color: var(--text-primary);
}

/* ── Environments (Správa "Prostředí") ─────────────────────────────── */
.env-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 420px)); gap: var(--space-6); }
.env-card { --notch-color: var(--surface-page); background: var(--surface-wash); }
.env-card .inner { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) 28px; }
.env-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.env-card-head h2 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); letter-spacing: -0.02em; }
.env-card-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.env-card-badges:empty { display: none; }
.badge-public, .badge-pinned, .badge-expiry {
    display: inline-flex; align-items: center; padding: 3px var(--space-2);
    font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase;
}
.badge-public { background: var(--dh-warning-100); color: var(--text-primary); }
.badge-pinned { background: var(--dh-info-100); color: var(--accent); }
.badge-expiry { background: var(--dh-muted-200); color: var(--text-secondary); text-transform: none; letter-spacing: normal; font-weight: var(--fw-medium); }
.env-card-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); margin: 0; }
.env-card-meta dt { margin: 0; font-size: var(--fs-overline); color: var(--text-secondary); }
.env-card-meta dd { margin: 0; font-size: var(--fs-body-sm); }
.env-card-links { display: flex; flex-direction: column; gap: 4px; }
.env-card-links a { font-size: var(--fs-body-sm); word-break: break-all; }
.env-card-stores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.env-card-stores a { font-size: var(--fs-caption); word-break: break-all; }
.env-card-job { margin: 0; font-size: var(--fs-caption); color: var(--text-primary); }
.env-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.env-card-actions-notice { flex-basis: 100%; margin: 0; font-size: var(--fs-caption); color: var(--text-primary); }
.env-card-action-form { display: inline-flex; }
.env-card-action-confirm { display: flex; flex-direction: column; gap: var(--space-2); }
/* .btn--danger moved to portal/components.css (plan design-d-shell, task 004) — it's one of
   Button's five named variants, not env-card-specific. */
.env-card-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.env-card-footer-links a { font-size: var(--fs-caption); }
.status-pill--queued { background: var(--dh-warning-100); color: var(--text-primary); }

/* ── Environment operation detail, history and container logs (Správa, task 023) ─────── */
.operation-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); margin: 0; }
.operation-meta dt { margin: 0; font-size: var(--fs-overline); color: var(--text-secondary); }
.operation-meta dd { margin: 0; font-size: var(--fs-body-sm); }
.operation-error { color: var(--dh-error-600); }
.operation-summary { color: var(--text-secondary); }
.operation-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.log-tail pre, .log-viewer {
    background: var(--surface-wash); box-shadow: inset 0 0 0 var(--border-width) var(--border-subtle);
    padding: var(--space-4); font-size: var(--fs-caption); white-space: pre-wrap; word-break: break-word;
    max-height: 420px; overflow-y: auto; margin: 0;
}
.table--environment-operations { --table-cols: minmax(140px, 1fr) 130px 140px 160px minmax(160px, 1.6fr); }

/* ── Správa audit log filters (task 024) ──────────────────────────── */
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-5); }
.form-inline .field { width: auto; min-width: 200px; }
.info-strip--error { background: var(--dh-error-100); }

/* ── Deploy form (Správa "Nasadit", task 016) ─────────────────────── */
.deploy-advanced { display: flex; flex-direction: column; gap: var(--space-4); }
.deploy-advanced summary { cursor: pointer; font-family: var(--font-form); font-weight: var(--fw-medium); font-size: var(--fs-caption); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); }
.deploy-advanced > *:not(summary) { margin-top: var(--space-4); }
.field--checkbox { flex-direction: row; align-items: center; gap: var(--space-2); }
.field--checkbox label { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); text-transform: none; letter-spacing: normal; color: var(--text-primary); }
.info-strip--error .icon { color: var(--dh-error-600); }

/* ── Deployment detail & timeline (Správa "Nasazení", task 017) ──── */
.deploy-timeline { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.deploy-timeline-step {
    flex: 1 1 140px; padding: var(--space-3) var(--space-4); text-align: center;
    background: var(--dh-muted-200); color: var(--text-secondary);
    font-family: var(--font-form); font-weight: var(--fw-medium); font-size: var(--fs-caption);
}
.deploy-timeline-step--done { background: var(--dh-success-100); color: var(--text-primary); }
.deploy-timeline-step--active { background: var(--dh-info-100); color: var(--accent); }
.deploy-timeline-step--failed { background: var(--dh-error-100); color: var(--dh-error-600); }
.deploy-failure { display: flex; flex-direction: column; gap: var(--space-2); }
.deploy-env-url a { font-size: var(--fs-body-sm); word-break: break-all; }
.deploy-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.deploy-action-form { display: inline-flex; }
.deploy-jobs { display: flex; flex-direction: column; gap: var(--space-4); }
.deploy-job-name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); }
.deploy-job-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-caption); color: var(--text-secondary); }
.deploy-job-hint { font-size: var(--fs-caption); color: var(--text-secondary); }

/* ── Deployment history & deployment-aware env cards (Správa, task 018) ── */
.notice--info { background: var(--dh-info-100); color: var(--accent); }
.env-card-deployment { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); }
.status-pill--building, .status-pill--shipping { background: var(--dh-info-100); color: var(--accent); }
.status-pill--succeeded { background: var(--dh-success-100); color: var(--text-primary); }
.status-pill--failed_build, .status-pill--failed_ship { background: var(--dh-error-100); color: var(--dh-error-600); }
.status-pill--cancelled, .status-pill--superseded { background: var(--dh-muted-200); color: var(--text-secondary); }
.badge-external { background: var(--dh-muted-200); color: var(--text-secondary); text-transform: none; letter-spacing: normal; font-weight: var(--fw-medium); }
.table--deployments { --table-cols: 140px minmax(120px, 1fr) minmax(200px, 1.6fr) 150px minmax(160px, 1fr); }

/* ── "Deploying" card highlight: spinner + live state (task 004) ─────── */
.env-card--deploying { box-shadow: inset 0 0 0 var(--border-width) var(--accent); }
.env-card--deploying .env-card-deployment { background: var(--dh-info-100); }

/* ── Running-operation card highlight, client + staff (plan operation-freeze-env-actions) ── */
.env-card-operation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); }
.env-card--busy { box-shadow: inset 0 0 0 var(--border-width) var(--accent); }
.env-card--busy .env-card-operation { background: var(--dh-info-100); }
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: var(--border-width) solid var(--dh-muted-200);
    border-top-color: var(--accent);
    border-radius: 0;
    animation: spin 0.9s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }

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

.table--admin-billing { --table-cols: 130px 140px minmax(190px, 1.2fr) 110px 110px 110px 130px 130px; }
.billing-email-history { list-style: none; margin: 0; padding: 6px 16px 10px; font-size: var(--fs-caption); display: flex; flex-direction: column; gap: 4px; }
.billing-document-error { padding: 6px 16px; font-size: var(--fs-caption); }
.billing-extra-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.billing-actions form + form { margin-top: 16px; }
.billing-document-reissue { display: flex; align-items: center; gap: 12px; padding: 6px 16px; }

.page-title--warning { color: var(--dh-warning-600); }
.table-row--muted { color: var(--text-secondary); }
.status-pill--cancelled { background: var(--dh-white); color: var(--text-secondary); }