/* ============ base ============ */
:root{
  --bg:#f4f6fa;
  --card:#ffffff;
  --ink:#1e2430;
  --muted:#6b7488;
  --line:#e2e6ef;
  --brand:#2563eb;
  --brand-dark:#1d4ed8;
  --danger:#dc2626;
  --ok:#16a34a;
  --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5rem; line-height:1.25}

/* ============ topbar ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.75rem 1.25rem; background:#fff;
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.brand{font-weight:700; font-size:1.05rem; color:var(--ink)}
.brand:hover{text-decoration:none}
.topbar nav{display:flex; gap:.5rem; flex-wrap:wrap}

/* ============ layout ============ */
.wrap{max-width:1100px; margin:0 auto; padding:1.5rem 1.25rem 4rem}
.page-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem;
}
.page-head h1{font-size:1.4rem}
.head-actions{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem .9rem; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font:inherit; font-size:.9rem;
  cursor:pointer; transition:.15s; white-space:nowrap;
}
.btn:hover{background:#f7f9fc; text-decoration:none}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark); border-color:var(--brand-dark)}
.btn-danger{color:var(--danger); border-color:#f3c7c7}
.btn-danger:hover{background:#fef2f2}
.btn-ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn-sm{padding:.3rem .6rem; font-size:.82rem}
.btn-icon{
  border:none; background:transparent; cursor:pointer; font-size:.9rem;
  color:var(--muted); padding:.35rem; border-radius:6px; line-height:1;
}
.btn-icon.danger:hover{background:#fef2f2; color:var(--danger)}

/* ============ cards & sections ============ */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.25rem 1.35rem; margin-bottom:1rem; box-shadow:var(--shadow);
}
.card h2{
  font-size:1rem; display:flex; align-items:center; gap:.6rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--line); margin-bottom:1rem;
}
.num{
  display:inline-grid; place-items:center; width:24px; height:24px;
  background:#eef3ff; color:var(--brand); border-radius:7px;
  font-size:.78rem; font-weight:700; flex:none;
}

/* ============ fields ============ */
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1.1rem}
.grid .span-2{grid-column:1 / -1}
.field{display:flex; flex-direction:column; gap:.3rem}
.field > span{font-size:.82rem; font-weight:600; color:#485067}
.field em{font-weight:400}
input[type=text],input[type=number],input[type=date],input[type=datetime-local],
input[type=search],select,textarea{
  width:100%; padding:.55rem .7rem; border:1px solid var(--line);
  border-radius:9px; font:inherit; font-size:.9rem; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
textarea{resize:vertical}
.inline-field{display:flex; align-items:center; gap:.45rem; font-size:.85rem; color:#485067}
.inline-field select{width:auto}
.hidden{display:none !important}

/* ============ chips (checkbox / radio) ============ */
.chips{display:flex; flex-wrap:wrap; gap:.45rem}
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .7rem; border:1px solid var(--line); border-radius:999px;
  background:#fff; cursor:pointer; font-size:.85rem; user-select:none; transition:.15s;
}
.chip:hover{background:#f7f9fc}
.chip input{accent-color:var(--brand); margin:0}
.chip:has(input:checked){background:#eef3ff; border-color:#bcd0fb; color:var(--brand-dark); font-weight:600}

/* ============ repair log table ============ */
.table-wrap{overflow-x:auto}
.log-table,.list,.print-table{width:100%; border-collapse:collapse}
.log-table th,.list th,.print-table th{
  text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); padding:.5rem .55rem; border-bottom:1px solid var(--line); font-weight:700;
}
.log-table td{padding:.35rem .3rem; vertical-align:middle}
.log-table input{border-color:transparent; background:#fbfcfe}
.log-table input:focus{background:#fff}
.log-actions{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.6rem; flex-wrap:wrap}
.log-total{font-size:.88rem; color:var(--muted)}
.log-total strong{color:var(--ink)}

/* ============ list table ============ */
.list{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.list td{padding:.75rem .6rem; border-bottom:1px solid var(--line); font-size:.9rem; vertical-align:middle}
.list tr:last-child td{border-bottom:none}
.list tr:hover td{background:#fafbfe}
.ticket{font-weight:700; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem}
.right{text-align:right}
.nowrap{white-space:nowrap}
.inline{display:inline}
.muted{color:var(--muted); font-size:.85rem}
.mt-1{margin-top:.75rem}

/* ============ pills & tags ============ */
.pill{
  display:inline-block; padding:.18rem .6rem; border-radius:999px;
  font-size:.74rem; font-weight:700; background:#eef1f6; color:#485067; white-space:nowrap;
}
.status-received{background:#eef1f6;color:#485067}
.status-in-workshop{background:#e0f2fe;color:#0369a1}
.status-awaiting-approval{background:#fef3c7;color:#b45309}
.status-in-repair{background:#ede9fe;color:#6d28d9}
.status-quality-check{background:#cffafe;color:#0e7490}
.status-ready-for-pickup{background:#dcfce7;color:#15803d}
.status-delivered{background:#d1fae5;color:#047857}
.status-cancelled{background:#fee2e2;color:#b91c1c}

.tag-row{display:flex; flex-wrap:wrap; gap:.4rem}
.tag{background:#eef3ff; color:var(--brand-dark); border-radius:7px; padding:.25rem .55rem; font-size:.8rem; font-weight:600}

/* ============ flash & empty ============ */
.flash{padding:.75rem 1rem; border-radius:10px; margin-bottom:1rem; font-size:.9rem}
.flash.success{background:#dcfce7; color:#166534; border:1px solid #bbf7d0}
.flash.error{background:#fee2e2; color:#991b1b; border:1px solid #fecaca}

.empty{
  background:#fff; border:1px dashed var(--line); border-radius:var(--radius);
  padding:3rem 1rem; text-align:center; color:var(--muted);
}

/* ============ form footer ============ */
.form-footer{
  display:flex; justify-content:flex-end; gap:.6rem;
  padding:1rem 0; position:sticky; bottom:0;
  background:linear-gradient(to top, var(--bg) 70%, transparent);
}

/* ============ printable sheet ============ */
.sheet{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem; box-shadow:var(--shadow); max-width:900px; margin:0 auto;
}
.sheet-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; padding-bottom:1rem; border-bottom:2px solid var(--ink); margin-bottom:1.25rem;
}
.sheet-head h1{font-size:1.4rem}
.sheet-meta{text-align:right}
.block{margin-bottom:1.25rem; page-break-inside:avoid}
.block h2{font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--brand); border:none; padding:0; margin-bottom:.6rem}
.dl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem 1.5rem; margin:0}
.dl .span-2{grid-column:1 / -1}
.dl dt{font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700}
.dl dd{margin:.1rem 0 0; font-size:.92rem}
.sig{border-bottom:1px solid var(--ink); min-height:1.4rem; font-style:italic}
.note{font-size:.78rem; color:var(--muted); font-style:italic; margin:.6rem 0 0}
.print-table th,.print-table td{border:1px solid var(--line); padding:.45rem .6rem; font-size:.85rem}
.print-table thead th{background:#f7f9fc}
.print-table tfoot th{background:#f7f9fc}
.page-break{page-break-after:always}

/* ============ responsive ============ */
@media (max-width:720px){
  .grid,.dl{grid-template-columns:1fr}
  .wrap{padding:1rem .8rem 3rem}
  .sheet{padding:1.1rem}
  .list th:nth-child(3),.list td:nth-child(3){display:none}
}

/* ============ print ============ */
@media print{
  @page{size:A4; margin:14mm}
  body{background:#fff; font-size:12px}
  .no-print{display:none !important}
  .wrap{padding:0; max-width:none}
  .sheet{border:none; box-shadow:none; border-radius:0; padding:0; max-width:none}
  .pill{border:1px solid #ccc}
  .block{break-inside:avoid}
}