﻿/* ==========================================================================
   Összeszerelés, szerviz, feladatok, saját feladatok, vezetői és adminisztrációs nézetek
   ========================================================================== */

.page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.page-head { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1.5rem; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; position: relative; z-index: 4; }
.page-head h1 { font-size: 1.65rem; }
.page-body { flex: 1; min-height: 0; overflow: auto; padding: 1.2rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.1rem; overscroll-behavior: contain; }
.page-tabs { padding: 0.7rem 1.5rem; background: #fff; border-bottom: 1px solid var(--line); display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.empty-inline { display: flex; align-items: center; gap: 0.8rem; color: var(--g-500); padding: 1rem 0.2rem; font-size: 1.02rem; }
.empty-inline svg { width: 1.5rem; height: 1.5rem; }
.who { color: var(--g-500); font-size: 0.82rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(27rem, 1fr)); gap: 1rem; }
.mcard { background: #fff; border: 2px solid var(--g-200); border-radius: 1.2rem; padding: 1.2rem 1.4rem; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 0.8rem; box-shadow: var(--shadow-1); width: 100%; color: inherit; }
.mcard:active { border-color: var(--g-900); background: var(--g-50); }
.mcard .mc-top { display: flex; align-items: flex-start; gap: 1rem; }
.mcard h2 { font-size: 1.55rem; letter-spacing: -0.01em; }
.mcard .mc-ready { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mcard .mc-pct { font-size: 2.2rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mcard .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.trow { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto 1.5rem; gap: 1rem; align-items: center; background: #fff; border: 2px solid var(--g-200); border-radius: 1rem; padding: 0.75rem 1rem; min-height: 5rem; text-align: left; width: 100%; cursor: pointer; color: inherit; box-shadow: var(--shadow-1); }
.trow:active { border-color: var(--g-900); background: var(--g-50); }
.trow.st-blocked { border-color: var(--red-line); background: #fffafa; }
.trow.st-returned { border-color: var(--red-line); }
.trow.st-in_progress { border-color: var(--g-700); }
.trow.st-accepted { background: #fafcfb; }
.seqno { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--g-150); display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.tr-title { font-size: 1.15rem; font-weight: 650; line-height: 1.25; }
.tr-meta { display: flex; flex-wrap: wrap; gap: 0.1rem 1rem; color: var(--g-500); font-size: 0.86rem; }
.tr-note { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.92rem; font-weight: 600; }
.tr-note.red { color: var(--red-strong); }
.tr-note svg { width: 1.1em; height: 1.1em; margin-top: 0.1em; flex: 0 0 auto; }
.tr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.list { display: flex; flex-direction: column; gap: 0.55rem; }

.two-col { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.col-stack { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.sec { background: #fff; border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: var(--shadow-1); overflow: hidden; }
.sec-h { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 1.2rem; border-bottom: 1px solid var(--line); min-height: 3.6rem; }
.sec-h > svg { width: 1.4rem; height: 1.4rem; color: var(--g-600); }
.sec-b { padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.sec-b.nopad { padding: 0; gap: 0; }

.act-bar { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: var(--shadow-1); }
.act-bar .grow-note { flex: 1 1 14rem; color: var(--g-600); font-size: 0.92rem; }

.pt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1rem; padding: 0.9rem 1.2rem; border-top: 1px solid var(--line); align-items: center; }
.pt:first-child { border-top: 0; }
.pt .pt-label { font-weight: 650; font-size: 1.08rem; }
.pt .pt-spec { color: var(--red-strong); font-weight: 650; font-size: 0.88rem; margin-top: 0.15rem; }
.pt .pt-meta { color: var(--g-500); font-size: 0.82rem; margin-top: 0.15rem; }
.pt .pt-save { font-size: 0.8rem; margin-top: 0.2rem; font-weight: 600; }
.pt .pt-save.ok { color: var(--ok); } .pt .pt-save.err { color: var(--red); } .pt .pt-save.busy { color: var(--g-500); }
.pt.ro { background: var(--g-50); }
.checkbtn { display: flex; align-items: center; gap: 0.8rem; min-height: var(--tap); padding: 0.4rem 1rem 0.4rem 0.7rem; border-radius: var(--radius); border: 2px solid var(--g-300); background: #fff; cursor: pointer; font-weight: 650; width: 100%; text-align: left; }
.checkbtn .box { width: 2rem; height: 2rem; border-radius: 0.45rem; border: 2px solid var(--g-400); display: grid; place-items: center; flex: 0 0 auto; }
.checkbtn .box svg { width: 1.4rem; height: 1.4rem; color: #fff; opacity: 0; }
.checkbtn.on { border-color: var(--ok); background: var(--ok-soft); }
.checkbtn.on .box { background: var(--ok); border-color: var(--ok); }
.checkbtn.on .box svg { opacity: 1; }
.checkbtn:disabled { cursor: not-allowed; opacity: 0.75; }

.rowline { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.75rem 1.2rem; border-top: 1px solid var(--line); }
.rowline:first-child { border-top: 0; }
.rowline .rl-main { flex: 1 1 auto; min-width: 0; }
.rowline .rl-title { font-weight: 650; overflow-wrap: anywhere; }
.rowline .rl-sub { color: var(--g-500); font-size: 0.85rem; }
.rowline .rl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; flex: 0 0 auto; }
.rowline.red { background: #fffafa; }

.timeline { list-style: none; margin: 0; padding: 0.3rem 1.2rem 0.8rem; display: flex; flex-direction: column; gap: 0; }
.timeline li { display: grid; grid-template-columns: 0.8rem 1fr; gap: 0.8rem; padding: 0.55rem 0; position: relative; }
.timeline li::before { content: ''; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--g-400); margin-top: 0.45rem; }
.timeline li::after { content: ''; position: absolute; left: 0.32rem; top: 1.4rem; bottom: -0.4rem; width: 2px; background: var(--g-150); }
.timeline li:last-child::after { display: none; }
.timeline .tl-t { font-weight: 650; font-size: 0.95rem; }
.timeline .tl-s { color: var(--g-500); font-size: 0.82rem; overflow-wrap: anywhere; }

.progress.thick { height: 1rem; }
.metric { display: flex; flex-direction: column; gap: 0.1rem; }
.metric b { font-size: 1.9rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.metric span { color: var(--g-500); font-size: 0.85rem; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.notice-box { background: var(--g-50); border: 1px dashed var(--g-300); border-radius: var(--radius); padding: 0.8rem 1rem; color: var(--g-700); font-weight: 600; }
.notice-box.red { background: var(--red-soft); border-color: var(--red-line); color: var(--red-strong); }

.dtable { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.dtable th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--g-500); font-weight: 650; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--line); background: var(--g-50); position: sticky; top: 0; }
.dtable td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--g-100); vertical-align: top; overflow-wrap: anywhere; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable.compact td, .dtable.compact th { padding: 0.4rem 0.7rem; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.7rem; }
.photo-grid figure { margin: 0; border-radius: 0.8rem; overflow: hidden; border: 1px solid var(--line); background: var(--g-100); cursor: pointer; }
.photo-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-grid figcaption { font-size: 0.78rem; padding: 0.3rem 0.5rem; color: var(--g-600); }
.cam-stage { background: #000; border-radius: 0.8rem; overflow: hidden; display: grid; place-items: center; min-height: 18rem; }
.cam-stage video, .cam-stage img { max-width: 100%; max-height: 22rem; }

.pick-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 26rem; overflow: auto; }
.pick { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1rem; border: 2px solid var(--g-200); border-radius: var(--radius); background: #fff; text-align: left; width: 100%; cursor: pointer; }
.pick[aria-pressed='true'] { border-color: var(--g-900); background: var(--g-50); }
.pick:disabled { opacity: 0.55; cursor: not-allowed; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 0.9rem 1.2rem; box-shadow: var(--shadow-1); }
.stat b { display: block; font-size: 2.3rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--g-600); font-size: 0.9rem; font-weight: 600; }
.stat.hot { border-color: var(--red-line); background: #fffafa; }
.stat.hot b { color: var(--red-strong); }
.term-card { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; border-radius: 0.8rem; border: 1px solid var(--line); background: #fff; }
.sdot { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--g-300); flex: 0 0 auto; }
.sdot.on { background: #2e9d63; } .sdot.off { background: var(--red); }
.mrow { display: grid; grid-template-columns: 12rem minmax(0, 1fr) 6rem; gap: 1rem; align-items: center; padding: 0.7rem 1.2rem; border-top: 1px solid var(--line); }
.mrow:first-child { border-top: 0; }

.admin-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: start; }
.tag-token { font-family: ui-monospace, Consolas, monospace; background: var(--g-900); color: #fff; padding: 0.7rem 1rem; border-radius: 0.6rem; user-select: text; overflow-wrap: anywhere; }

@media (max-width: 1250px) { .two-col { grid-template-columns: 1fr; } .pt { grid-template-columns: 1fr; } .mrow { grid-template-columns: 8rem minmax(0, 1fr) 5rem; } }
