/* TUR H&K DEMO v0.4 — Design System H&K (vezi docs/DESIGN_SYSTEM_HK_V04.md) */
:root{
  --brand-primary:#004f9e;
  --brand-secondary:#105aa4;
  --brand-accent:#e4013a;
  --surface:#ffffff;
  --surface-raised:#f6f6f6;
  --text-primary:#414042;
  --text-secondary:#747474;
  --border:#e0dede;
  --success:#65bc7b;
  --warning:#8a6d1d;
  --warning-bg:#fcf8e3;
  --danger:#a94442;
  --danger-bg:#f2dede;
  --radius:8px;
  --header-h:56px;
  --nav-h:60px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow:0 1px 2px rgba(65,64,66,.06);
  --touch:48px;
  --max:720px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--surface-raised);color:var(--text-primary);font-family:var(--font);line-height:1.45;-webkit-text-size-adjust:100%;overflow-x:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand-secondary)}
img{max-width:100%;height:auto}
#app{min-height:100vh;display:flex;flex-direction:column}

/* Header */
.app-header{
  position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:calc(8px + var(--safe-t)) 12px 8px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--header-h);
}
.app-header__brand{display:flex;align-items:center;gap:10px;min-width:0}
.app-header__logo{height:36px;width:auto;display:block}
.app-header__meta{min-width:0}
.app-header__title{margin:0;font-size:.92rem;font-weight:700;color:var(--brand-primary);line-height:1.2}
.app-header__sub{margin:1px 0 0;font-size:.68rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-badge{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  background:#fff5f7;color:var(--brand-accent);border:1px solid #f5c2cd;
  font-size:.62rem;font-weight:700;letter-spacing:.03em;vertical-align:middle;
}
.status-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-raised);font-size:.68rem;font-weight:650;color:var(--text-secondary);
}
.status-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--success)}
.status-pill.is-offline{color:var(--brand-accent);border-color:#f5c2cd;background:#fff5f7}
.status-pill.is-offline .status-pill__dot{background:var(--brand-accent)}

/* Toast */
.toast{
  position:fixed;left:10px;right:10px;top:calc(var(--header-h) + var(--safe-t) + 6px);z-index:60;
  padding:11px 13px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--surface);box-shadow:0 6px 20px rgba(65,64,66,.14);font-size:.9rem;
}
.toast.ok{border-left:4px solid var(--success)}
.toast.warn{border-left:4px solid var(--warning);background:var(--warning-bg)}
.toast.err{border-left:4px solid var(--danger);background:var(--danger-bg);color:var(--danger)}

/* Main */
main{flex:1;width:100%;max-width:var(--max);margin:0 auto;padding:12px 12px calc(var(--nav-h) + var(--safe-b) + 18px)}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin:0 0 10px}
.page-head h1,.page-head h2{margin:0;font-size:1.2rem;font-weight:700;color:var(--brand-primary)}
.lead{margin:0 0 12px;color:var(--text-secondary);font-size:.9rem}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 13px;box-shadow:var(--shadow);margin:0 0 10px;min-width:0;
}
.card h3{margin:0 0 8px;font-size:.95rem;font-weight:700;color:var(--brand-primary)}
.card.action{display:block;width:100%;text-align:left;padding:14px;cursor:pointer;color:inherit}
.card.action:active{background:var(--surface-raised)}
.card.action .arrow{float:right;color:var(--brand-secondary);font-weight:700}
.stack{display:flex;flex-direction:column;gap:10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:359px){.grid-2{grid-template-columns:1fr}}

.sub,.muted{color:var(--text-secondary);font-size:.85rem}
.kpi{font-size:1.5rem;font-weight:780;color:var(--brand-primary);line-height:1.1}
.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}

.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn,a.btn{
  min-height:var(--touch);padding:11px 14px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);color:var(--brand-primary);
  font-weight:650;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;
}
.btn.primary{background:var(--brand-secondary);color:#fff;border-color:var(--brand-secondary)}
.btn.accent{background:var(--brand-accent);color:#fff;border-color:var(--brand-accent)}
.btn.ghost{background:var(--surface-raised)}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

.field{display:block;margin:8px 0}
.field > span{display:block;color:var(--text-secondary);font-weight:650;font-size:.82rem;margin-bottom:4px}
input:not([type=checkbox]):not([type=file]),textarea,select{
  width:100%;min-height:var(--touch);padding:11px 12px;border:1px solid #d2d2d2;border-radius:var(--radius);
  background:var(--surface);min-width:0;
}
textarea{min-height:100px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brand-secondary);outline-offset:1px}

.item{
  width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px;margin:0 0 8px;display:block;color:inherit;min-height:var(--touch);
}
.item strong{font-size:.98rem;color:var(--brand-primary)}
.group-label{
  margin:12px 0 6px;padding:4px 0;font-size:.75rem;font-weight:750;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--border);
}

.pill{
  display:inline-block;font-size:.7rem;border-radius:999px;padding:2px 8px;
  background:var(--surface-raised);color:var(--text-secondary);border:1px solid var(--border);
}
.pill.warn{background:var(--warning-bg);color:var(--warning);border-color:#e8dfb5}
.pill.danger{background:var(--danger-bg);color:var(--danger);border-color:#e8c4c4}
.pill.demo{background:#fff5f7;color:var(--brand-accent);border-color:#f5c2cd;font-weight:700}
.pill.info{background:#eef5fb;color:var(--brand-primary);border-color:#c5d8ec}

.line{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border);padding:8px 0}
.line span:first-child{color:var(--text-secondary);flex:0 1 40%}
.line span:last-child{text-align:right;overflow-wrap:anywhere;flex:1;font-weight:600}

.note{background:var(--surface-raised);padding:10px;border-radius:var(--radius);border:1px solid var(--border);margin:6px 0}
.note strong{color:var(--brand-primary)}
.warning{background:var(--warning-bg);color:var(--warning);border-left:4px solid #d1a361;padding:10px 12px;border-radius:var(--radius);margin:8px 0;font-size:.9rem}
.info-box{background:#eef5fb;border-left:4px solid var(--brand-secondary);padding:10px 12px;border-radius:var(--radius);margin:8px 0;font-size:.9rem;color:var(--text-primary)}
.empty{padding:24px 10px;text-align:center;color:var(--text-secondary)}
.unimplemented{opacity:.92}
.unimplemented .badge-ni{font-size:.68rem;font-weight:700;color:var(--warning)}

.photo{max-width:100%;max-height:220px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border)}
.section-tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px;-webkit-overflow-scrolling:touch}
.section-tabs a{
  flex:0 0 auto;padding:8px 12px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-secondary);text-decoration:none;font-size:.78rem;font-weight:650;min-height:36px;
}
.obs-panel{border:1.5px solid var(--brand-secondary)}

footer.app-footer{
  max-width:var(--max);margin:0 auto;padding:4px 12px;color:var(--text-secondary);font-size:.72rem;
  padding-bottom:calc(var(--nav-h) + var(--safe-b) + 6px);
}

/* Bottom nav */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--surface);border-top:1px solid var(--border);
  padding:2px 1px calc(2px + var(--safe-b));
  box-shadow:0 -1px 8px rgba(65,64,66,.05);
}
.bottom-nav button{
  appearance:none;border:0;background:transparent;color:var(--text-secondary);
  min-height:var(--nav-h);padding:4px 1px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;font-size:.6rem;font-weight:650;line-height:1.15;min-width:0;
}
.bottom-nav .nav-label{
  display:block;max-width:100%;padding:0 1px;text-align:center;
  white-space:normal;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;
}
.bottom-nav .ico{font-size:1.1rem;line-height:1;color:var(--brand-secondary);opacity:.5}
.bottom-nav button.active{color:var(--brand-primary)}
.bottom-nav button.active .ico{color:var(--brand-accent);opacity:1}
.bottom-nav button:focus-visible{outline:2px solid var(--brand-secondary);outline-offset:-2px}

.loading{padding:36px 14px;text-align:center;color:var(--text-secondary)}
.more-list button.item{margin-bottom:6px}

@media(min-width:768px){
  :root{--max:800px}
  .bottom-nav{left:50%;transform:translateX(-50%);max-width:var(--max);border-inline:1px solid var(--border)}
}
@media(min-width:1024px){
  :root{--max:920px}
}
@media(max-width:360px){
  .app-header__logo{height:30px}
  .app-header__sub{display:none}
  .bottom-nav button{font-size:.52rem;padding:3px 0}
  :root{--nav-h:64px}
}
@media(max-width:320px){
  .bottom-nav button{font-size:.48rem}
}