/* ===== Zákaznický portál stavu zakázek ===== */

.portal { padding: 40px 0 80px; }
.portal__h1 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; margin: 0 0 24px; color: var(--ink, #1a1a1a); }

/* --- přihlášení --- */
.portal-login { max-width: 520px; }
.portal-login__lead { color: var(--muted, #666); font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.portal-login__form { display: flex; flex-direction: column; gap: 12px; background: var(--bg-soft, #fff1e6); border: 1px solid var(--line, #e6e6e6); border-radius: 12px; padding: 24px; }
.portal-login__form label { font-weight: 600; font-size: 14px; color: var(--ink, #1a1a1a); }
.portal-login__form input[type="text"] { font: inherit; font-size: 16px; font-family: monospace; padding: 12px 14px; border: 1px solid var(--line, #ccc); border-radius: 8px; width: 100%; box-sizing: border-box; }
.portal-login__remember { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 14px; color: var(--muted, #666); }
.portal-login__form .btn { align-self: flex-start; }
.portal-login__help { font-size: 13px; color: var(--muted, #666); margin: 16px 0 0; line-height: 1.55; }

/* --- alerty --- */
.portal-alert { border-radius: 8px; padding: 14px 18px; margin: 0 0 18px; font-size: 14px; line-height: 1.55; }
.portal-alert--err  { background: #fdecea; border: 1px solid #f5c6c0; color: #7d1a14; }
.portal-alert--warn { background: #fff6e6; border: 1px solid #f3d9a6; color: #7a5300; }

/* --- toolbar --- */
.portal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.portal-toolbar__title { font-size: 18px; font-weight: 700; color: var(--ink, #1a1a1a); }
.portal-count { display: inline-block; background: var(--accent, #ed7d31); color: #fff; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 1px 9px; margin-left: 6px; vertical-align: middle; }
.portal-toolbar__actions { display: flex; gap: 8px; }
.btn--sm { padding: 7px 14px !important; font-size: 13px !important; }

/* --- ovládání tabulky --- */
.orders-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 14px; }
.orders-search { flex: 1 1 260px; font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--line, #ccc); border-radius: 8px; }
.orders-filter { display: inline-flex; border: 1px solid var(--line, #ccc); border-radius: 8px; overflow: hidden; }
.orders-filter__btn { background: #fff; border: none; padding: 9px 16px; font: inherit; font-size: 14px; cursor: pointer; color: var(--muted, #666); }
.orders-filter__btn + .orders-filter__btn { border-left: 1px solid var(--line, #ccc); }
.orders-filter__btn.is-active { background: var(--accent, #ed7d31); color: #fff; font-weight: 600; }

/* --- tabulka --- */
.orders-table-wrap { overflow-x: auto; }
.orders-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.orders-table th, .orders-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line, #eee); vertical-align: top; }
.orders-table th { background: var(--bg-soft, #f7f7f7); font-weight: 600; color: var(--ink, #1a1a1a); white-space: nowrap; position: sticky; top: 0; }
.orders-table th.is-sortable { cursor: pointer; user-select: none; }
.orders-table th.is-sortable:hover { color: var(--accent, #ed7d31); }
.orders-table th.num, .orders-table td.num { text-align: right; }
.orders-table .td-build { font-weight: 700; font-variant-numeric: tabular-nums; }
.orders-table .td-project { max-width: 320px; word-break: break-word; }
.orders-row:hover { background: #fffaf4; }
.col-detail { width: 1%; text-align: center; }

.orders-detail-toggle { width: 28px; height: 28px; border: 1px solid var(--line, #ccc); background: #fff; border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--accent, #ed7d31); }
.orders-detail-toggle[aria-expanded="true"] { background: var(--accent, #ed7d31); color: #fff; }
.orders-detail-row > td { background: #fafafa; padding: 0 12px 12px; }

.orders-nomatch { text-align: center; color: var(--muted, #666); padding: 24px; font-size: 14px; }

/* --- detail grid (řádek i order karta) --- */
.order-detail-grid, .order-card__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 24px; margin: 12px 0 0; }
.order-detail-grid__row, .order-card__row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid #eee; }
.order-detail-grid dt, .order-card__row dt { color: var(--muted, #666); font-size: 13px; }
.order-detail-grid dd, .order-card__row dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }

/* nadpis sekce v detailu (Stav výroby / Termíny) */
.order-sec { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #666); margin: 20px 0 6px; }

/* --- order karta (order scope) --- */
.order-card { border: 1px solid var(--line, #e6e6e6); border-radius: 12px; padding: 24px; max-width: 760px; }
.order-card__head { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; }
.order-card__build { font-size: 24px; font-weight: 800; color: var(--ink, #1a1a1a); }

/* --- stav (lifecycle): barevná tečka + text, žádná pilulka --- */
.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.status-dot.dot-green   { background: #2f9e56; }
.status-dot.dot-amber   { background: #e08a2b; }
.status-dot.dot-blue    { background: #2f74c0; }
.status-dot.dot-neutral { background: #9aa4af; }

/* --- sloupce vstupů (komponenty / šablona / DPS): čistý obarvený text --- */
.orders-table th.col-in, .orders-table td.col-in { white-space: nowrap; }
.cs-pos { color: #1f7a42; font-weight: 600; }
.cs-neg { color: #b3261e; font-weight: 600; }
.cs-wip { color: #b4611c; font-weight: 600; }
.cs-neutral { color: #444; }
.cs-na { color: #c4c4c4; }

/* barvení hodnot v detailu: pozitivní zelená, negativní červená, rozpracované oranžová */
.order-detail-grid dd.tone-pos, .order-card__row dd.tone-pos { color: #1f7a42; }
.order-detail-grid dd.tone-neg, .order-card__row dd.tone-neg { color: #b3261e; }
.order-detail-grid dd.tone-wip, .order-card__row dd.tone-wip { color: #b4611c; }

@media (max-width: 600px) {
  .order-detail-grid, .order-card__grid { grid-template-columns: 1fr; }
  .portal-toolbar { flex-direction: column; align-items: flex-start; }
}