/* ATTILA – Servisní evidence :: styly */
:root{
  --bg:#f4f6f9; --card:#fff; --ink:#1c2733; --muted:#6b7785;
  --line:#e3e8ee; --primary:#c0392b; --primary-d:#a5301f;
  --secondary:#2c3e50; --green:#1e8e5a; --blue:#2d6cdf; --gray:#8a95a1;
  --danger:#c0392b; --radius:10px; --shadow:0 1px 3px rgba(20,30,45,.08);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1080px; margin:0 auto; padding:0 18px}

/* Topbar */
.topbar{background:var(--secondary); color:#fff; box-shadow:var(--shadow)}
.topbar-inner{display:flex; align-items:center; gap:22px; height:56px}
.brand{color:#fff; font-weight:800; font-size:19px; letter-spacing:.5px}
.brand span{color:var(--primary); margin-left:2px; font-weight:800}
.brand:hover{text-decoration:none}
.mainnav{display:flex; gap:6px; flex:1}
.mainnav a{color:#cfd8e2; padding:6px 12px; border-radius:6px; font-weight:500}
.mainnav a:hover{background:rgba(255,255,255,.1); color:#fff; text-decoration:none}
.userbox{display:flex; align-items:center; gap:12px}
.uname{color:#cfd8e2; font-size:13px}

main.container{padding-top:22px; padding-bottom:60px}
.footer{border-top:1px solid var(--line); color:var(--muted); font-size:13px; padding:18px 0; margin-top:40px}

/* Nadpisy / hlavička stránky */
h1{font-size:24px; margin:0 0 4px}
h2{font-size:17px; margin:0 0 12px}
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px}
.muted{color:var(--muted); margin:4px 0}
.hint{color:var(--muted); font-size:13px; margin:10px 0 0}

.breadcrumb{font-size:13px; color:var(--muted); margin-bottom:14px}
.breadcrumb a{color:var(--muted)}
.breadcrumb .sep{margin:0 7px; color:var(--line)}

/* Karty */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 20px; margin-bottom:18px}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.card-head h2{margin:0}
.card-narrow{max-width:440px; margin-left:auto; margin-right:auto}
.hidden{display:none}

/* Statistiky */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px}
.stat-val{font-size:22px; font-weight:700}
.stat-lbl{color:var(--muted); font-size:12px; margin-top:4px}
.stat-money .stat-val{font-size:19px}
.stat-total{border-color:var(--primary); background:#fff7f5}
.stat-total .stat-val{color:var(--primary)}

/* Tabulky */
.table{width:100%; border-collapse:collapse}
.table th,.table td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.table thead th{font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600}
.table tbody tr:hover{background:#fafbfc}
.table tfoot th{border-top:2px solid var(--line); border-bottom:none; font-size:14px}
.ta-right{text-align:right}
.pre{white-space:pre-wrap}
.sheet td{font-size:14px}
.row-muted{opacity:.55}

/* Badge */
.badge{display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px; color:#fff}
.badge-gray{background:var(--gray)} .badge-green{background:var(--green)}
.badge-blue{background:var(--blue)}

/* Tlačítka */
.btn{display:inline-block; border:1px solid transparent; border-radius:8px; padding:9px 16px;
  font-size:14px; font-weight:600; cursor:pointer; background:#eef1f5; color:var(--ink); line-height:1}
.btn:hover{text-decoration:none; filter:brightness(.97)}
.btn-sm{padding:6px 11px; font-size:13px}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-secondary{background:var(--secondary); color:#fff}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-danger{background:var(--danger); color:#fff}
.btn-group{display:flex; gap:8px}

/* Formuláře */
.form label{display:block; margin-bottom:14px; font-size:13px; font-weight:600; color:#3a4653}
.form input[type=text],.form input[type=email],.form input[type=password],
.form input[type=date],.form input[type=time],.form select,.form textarea{
  width:100%; margin-top:5px; padding:9px 11px; border:1px solid var(--line);
  border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--ink); font-weight:400}
.form textarea{resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
.form-grid .col-2{grid-column:1 / -1}
.checkbox-label{display:flex; align-items:center; gap:8px; font-weight:600}
.checkbox-label input{width:auto; margin:0}
.form-actions{display:flex; gap:10px; justify-content:flex-end; align-items:center}
.filter-form{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap}
.filter-form label{margin:0}

/* Řádky techniků */
.tech-row{display:grid; grid-template-columns:1fr 120px 120px 40px; gap:10px; margin-bottom:10px; align-items:center}
.tech-row input,.tech-row select{margin-top:0}

/* Řádky úkonů (servisní list) */
.items-head{display:grid; grid-template-columns:1fr 1fr 140px 40px; gap:10px; font-size:12px;
  text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600; padding:0 2px 8px}
.item-row{display:grid; grid-template-columns:1fr 1fr 140px 40px; gap:10px; margin-bottom:10px; align-items:start}
.item-row textarea{margin-top:0}
.item-row .item-price{margin-top:0}

/* Detail zásahu */
.detail-meta{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.detail-meta .lbl{display:block; font-size:11px; text-transform:uppercase; color:var(--muted); letter-spacing:.03em; margin-bottom:2px}
.note-line{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line)}
.note-line .lbl{color:var(--muted); font-weight:600}

/* Souhrn */
.summary-card{max-width:360px; margin-left:auto}
.sum-row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line)}
.sum-total{border-bottom:none; border-top:2px solid var(--primary); margin-top:4px; padding-top:12px;
  font-size:18px; font-weight:700; color:var(--primary)}

/* Sticky akce ve formuláři */
.sticky-actions{position:sticky; bottom:0; background:var(--bg); padding:14px 0; border-top:1px solid var(--line)}

/* Alerty */
.alert{padding:11px 14px; border-radius:8px; margin-bottom:14px; font-size:14px}
.alert-success{background:#e7f6ee; color:#12683f; border:1px solid #bfe6d0}
.alert-error{background:#fdecea; color:#992114; border:1px solid #f5c6c0}

.login-card{margin-top:8vh}

/* Lišta období */
.period-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px 16px; margin-bottom:18px}
.period-presets{display:flex; gap:6px; flex-wrap:wrap}
.chip{display:inline-block; padding:6px 13px; border-radius:20px; font-size:13px; font-weight:600;
  background:#eef1f5; color:var(--ink); border:1px solid transparent}
.chip:hover{text-decoration:none; filter:brightness(.97)}
.chip.active{background:var(--primary); color:#fff}
.period-custom{display:flex; align-items:center; gap:6px}
.period-custom input[type=date]{padding:6px 8px; border:1px solid var(--line); border-radius:8px; font-size:13px; font-family:inherit}
.period-custom .dash{color:var(--muted)}
.btn.active{outline:2px solid var(--primary); outline-offset:1px}
.period-label{margin-left:auto; font-size:13px; font-weight:600; color:#3a4653}

/* Filtr firma / pobočka */
.entity-filter{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; margin-bottom:18px}
.entity-filter label{display:flex; flex-direction:column; font-size:12px; font-weight:600; color:#3a4653; gap:4px}
.entity-filter select{padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:14px;
  font-family:inherit; background:#fff; min-width:190px}

/* Přehledová tabulka firem/poboček */
.table-overview .row-company td{background:#f7f9fb; border-top:2px solid var(--line)}
.table-overview .row-company:first-child td{border-top:none}
.table-overview .row-branch td:first-child{padding-left:22px}
.table-overview .row-branch .tree{color:var(--muted); margin-right:2px}
.row-toggle{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
  margin-right:8px; padding:0; border:1px solid var(--line); border-radius:6px; background:#fff;
  color:var(--primary); font-size:16px; font-weight:700; line-height:1; cursor:pointer; vertical-align:middle}
.row-toggle:hover{background:var(--primary); color:#fff; border-color:var(--primary)}

/* Responzivita */
@media(max-width:820px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .detail-meta{grid-template-columns:repeat(2,1fr)}
  .item-row,.items-head{grid-template-columns:1fr 1fr 100px 34px}
  .summary-card{max-width:none}
}
@media(max-width:560px){
  .mainnav{gap:0}
  .mainnav a{padding:6px 8px; font-size:14px}
  .uname{display:none}
  .stats{grid-template-columns:1fr}
  .tech-row{grid-template-columns:1fr 1fr; }
  .tech-row .row-del{grid-column:2; justify-self:end}
  .item-row,.items-head{grid-template-columns:1fr}
  .items-head{display:none}
  .table{font-size:13px}
  .table th,.table td{padding:8px 7px}
  .entity-filter select{min-width:150px}
}

/* ===== Podklad pro fakturaci ===== */
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px 16px;
  flex-wrap:wrap; margin-bottom:16px}
.inv-period{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.inv-period label{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#3a4653}
.inv-period select{padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  font-size:14px; font-family:inherit; background:#fff}
.inv-actions{display:flex; align-items:center; gap:8px}
.invoice{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:32px 34px; max-width:920px; margin:0 auto}
.inv-head{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-bottom:2px solid var(--secondary); padding-bottom:16px; margin-bottom:18px; font-size:13px; line-height:1.6}
.inv-logo{font-weight:800; font-size:20px; color:var(--secondary); margin-bottom:6px}
.inv-logo span{color:var(--primary)}
.inv-customer{text-align:right}
.inv-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:4px}
.inv-title{font-size:22px; margin:6px 0 6px}
.inv-meta{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:13px; color:#3a4653; margin-bottom:20px}
.inv-table{width:100%; border-collapse:collapse; margin-bottom:6px}
.inv-table th,.inv-table td{padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:13px}
.inv-table thead th{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
.inv-summary{margin-bottom:24px}
.inv-summary tfoot th{border-top:2px solid var(--secondary); border-bottom:none; font-size:14px}
.inv-branch{font-size:16px; margin:22px 0 10px; padding-bottom:5px; border-bottom:1px solid var(--line)}
.inv-visit{margin-bottom:16px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; break-inside:avoid}
.inv-visit-head{margin-bottom:8px; font-size:14px}
.inv-tech{margin-bottom:8px}
.inv-tech td,.inv-tech th{padding:4px 9px}
.inv-visit-sum{text-align:right; font-size:13px; color:#3a4653; padding-top:6px; border-top:1px dashed var(--line)}
.inv-grand{max-width:360px; margin-left:auto; margin-top:22px}
.inv-grand>div{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line)}
.inv-grand-total{border-bottom:none; border-top:2px solid var(--primary); margin-top:2px; padding-top:11px;
  font-size:18px; font-weight:700; color:var(--primary)}
.inv-note{font-size:12px; margin-top:16px}

@media print{
  @page{margin:14mm}
  body{background:#fff; font-size:12px}
  .topbar,.footer,.no-print,.breadcrumb{display:none !important}
  main.container{padding:0; max-width:none}
  .invoice{border:none; box-shadow:none; border-radius:0; padding:0; max-width:none}
  .inv-visit{border-color:#bbb}
  a{color:#000; text-decoration:none}
}