@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --ink: #1C1F22;
  --ink-soft: #4A5157;
  --paper: #EDEEE9;
  --panel: #FBFBF9;
  --line: #D9DAD3;
  --steel: #4C5B66;
  --steel-dark: #35414A;
  --ember: #B33A24;
  --ember-dark: #8F2E1C;
  --amber: #BD7A1E;
  --amber-bg: #F7ECD8;
  --ok: #3F7A5E;
  --ok-bg: #E4EFE9;
  --neutral-bg: #E9EAE4;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(28,31,34,0.06), 0 2px 8px rgba(28,31,34,0.04);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; font-size:15px; line-height:1.5; }
h1,h2,h3,h4 { font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.01em; color:var(--ink); margin:0 0 .5em 0; text-transform:uppercase; }
h1{font-size:1.5rem;} h2{font-size:1.15rem;} h3{font-size:1rem;}
a{color:var(--ember); text-decoration:none; cursor:pointer;}
a:hover{text-decoration:underline;}
.mono{font-family:'IBM Plex Mono',monospace;}

.demo-banner{ background:var(--steel-dark); color:#E7E9E6; padding:9px 24px; font-size:.82rem;
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.demo-banner b{color:#fff;}
.demo-banner button{ background:none; border:1px solid rgba(255,255,255,.3); color:#E7E9E6; border-radius:3px;
  padding:3px 10px; font-size:.76rem; cursor:pointer; }
.demo-banner button:hover{border-color:var(--ember); color:#fff;}

.app-shell{ display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.sidebar{ background:var(--steel-dark); color:#E7E9E6; padding:24px 0; display:flex; flex-direction:column; }
.brand{ padding:0 20px 22px 20px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:18px; }
.brand-mark{ display:inline-block; width:38px; height:auto; margin-bottom:10px; }
.brand-mark img{ display:block; width:100%; height:auto; }
.logo-full{ display:block; width:100%; max-width:230px; height:auto; margin:0 auto; }
.brand-title{ font-family:'Oswald',sans-serif; font-weight:600; font-size:1rem; letter-spacing:.01em;
  color:#fff; line-height:1.25; }
.brand-sub{ font-size:.72rem; color:#A9B4B9; text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }
.nav{ display:flex; flex-direction:column; gap:2px; padding:0 12px; }
.nav a{ color:#C7CFD1; text-decoration:none; padding:9px 12px; border-radius:var(--radius); font-size:.88rem;
  font-weight:500; display:flex; align-items:center; gap:9px; }
.nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav a.active{ background:var(--ember); color:#fff; }
.nav-icon{ width:16px; text-align:center; opacity:.85; font-size:.85rem; }
.nav-back{ margin-bottom:8px; padding-bottom:9px !important; border-bottom:1px solid rgba(255,255,255,.1); }
.nav-back.nav-disabled{ opacity:.35; pointer-events:none; }

.sidebar-footer{
  margin-top:auto; padding:14px 20px 0 20px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.8rem; color:#A9B4B9;
}
.sidebar-footer form{ margin-top:8px; }
.sidebar-footer button{
  background:none; border:1px solid rgba(255,255,255,.25); color:#E7E9E6;
  padding:5px 10px; border-radius:var(--radius); font-size:.78rem; cursor:pointer;
}
.sidebar-footer button:hover{ border-color:var(--ember); color:#fff; }

.main{ padding:30px 40px 60px 40px; max-width:1600px; }
.topline{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; gap:20px; flex-wrap:wrap; }
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); margin-bottom:6px; }

.btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radius); border:1px solid transparent;
  font-family:'Inter',sans-serif; font-weight:600; font-size:.85rem; cursor:pointer; text-decoration:none; line-height:1.2; }
.btn-primary{ background:var(--ember); color:#fff; }
.btn-primary:hover{ background:var(--ember-dark); }
.btn-secondary{ background:var(--panel); color:var(--ink); border-color:var(--line); }
.btn-secondary:hover{ border-color:var(--steel); }
.btn-ghost{ background:transparent; color:var(--steel-dark); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--steel); }
.btn-danger{ background:transparent; color:var(--ember-dark); border-color:var(--line); }
.btn-danger:hover{ border-color:var(--ember); background:#FBEBE7; }
.btn-sm{ padding:5px 11px; font-size:.78rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); }
.panel + .panel{ margin-top:18px; }

table.data{ width:100%; border-collapse:collapse; }
table.data th{ text-align:left; font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--steel); padding:0 12px 10px 12px; border-bottom:1px solid var(--line); }
table.data td{ padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.data tr:last-child td{ border-bottom:none; }
table.data tr:hover td{ background:rgba(76,91,102,.04); }
.customer-table th:nth-child(1), .customer-table td:nth-child(1),
.customer-table th:nth-child(6), .customer-table td:nth-child(6),
.customer-table th:nth-child(7), .customer-table td:nth-child(7){
  white-space:nowrap; width:1%;
}
.filter-row th{ padding:0 12px 10px 12px; border-bottom:1px solid var(--line); }
.filter-row .filter-input{ width:100%; padding:6px 8px; border:1px solid var(--line); border-radius:2px;
  background:#fff; font-family:'Inter',sans-serif; font-size:.78rem; color:var(--ink); font-weight:400;
  text-transform:none; letter-spacing:normal; }
.filter-row .filter-input:focus{ outline:2px solid var(--ember); outline-offset:1px; border-color:var(--ember); }

label{ display:block; font-size:.78rem; font-weight:600; color:var(--steel-dark); margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.03em; }
input[type=text],input[type=email],input[type=tel],input[type=date],textarea,select{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  font-family:'Inter',sans-serif; font-size:.9rem; color:var(--ink); }
textarea{ resize:vertical; min-height:70px; }
input:focus,textarea:focus,select:focus{ outline:2px solid var(--ember); outline-offset:1px; border-color:var(--ember); }
.field{ margin-bottom:16px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hint{ font-size:.78rem; color:var(--ink-soft); margin-top:4px; }
.file-drop{ border:1.5px dashed var(--line); border-radius:var(--radius); padding:20px; text-align:center; color:var(--ink-soft); font-size:.85rem; background:#fff; }

.checkbox-group{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-top:2px; }
.checkbox-item{ display:flex; align-items:center; gap:7px; text-transform:none; font-weight:400;
  font-size:.88rem; letter-spacing:normal; color:var(--ink); margin-bottom:0; cursor:pointer; }
.checkbox-item input[type=checkbox]{ width:auto; margin:0; cursor:pointer; }
.type-chip{ display:inline-block; padding:3px 9px; border-radius:2px; background:var(--neutral-bg); color:var(--steel-dark);
  font-size:.72rem; font-weight:600; margin:0 6px 6px 0; }

.tag{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 16px; border-radius:2px;
  font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.tag::before{ content:''; position:absolute; left:6px; top:50%; transform:translateY(-50%); width:4px; height:4px; border-radius:50%; background:currentColor; }
.tag-novy{ background:var(--neutral-bg); color:var(--ink-soft); }
.tag-caka_na_podpis{ background:var(--amber-bg); color:var(--amber); }
.tag-podpisany{ background:#E4EAF0; color:var(--steel-dark); }
.tag-odoslany{ background:var(--ok-bg); color:var(--ok); }

.event-card{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 18px 16px 34px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:var(--radius); margin-bottom:10px; }
.event-card.st-caka_na_podpis{ border-left-color:var(--amber); }
.event-card.st-podpisany{ border-left-color:var(--steel); }
.event-card.st-odoslany{ border-left-color:var(--ok); }
.event-card::before{ content:''; position:absolute; left:14px; top:50%; transform:translateY(-50%); width:8px; height:8px;
  border-radius:50%; border:1.5px solid var(--line); background:var(--paper); }
.event-card-title{ font-weight:600; margin-bottom:2px; }
.event-card-meta{ font-size:.78rem; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; }

.empty{ text-align:center; padding:44px 20px; color:var(--ink-soft); }
.empty h3{ color:var(--ink-soft); }

.alert{ padding:11px 15px; border-radius:var(--radius); font-size:.85rem; margin-bottom:18px; }
.alert-error{ background:#FBEBE7; color:var(--ember-dark); border:1px solid #EBC4B9; }
.alert-success{ background:var(--ok-bg); color:var(--ok); border:1px solid #C5DED2; }

.sig-wrap{ border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:14px; }
.sig-canvas-holder{ border:1.5px dashed var(--line); border-radius:var(--radius);
  background:repeating-linear-gradient(0deg, transparent, transparent 27px, #EEEFEA 28px); position:relative; }
canvas#sigCanvas{ display:block; touch-action:none; width:100%; height:180px; cursor:crosshair; }

.pdf-preview{ width:100%; height:420px; border:1px solid var(--line); border-radius:var(--radius); background:#525659; position:relative; overflow:hidden; }
.pdf-preview iframe{ width:100%; height:100%; border:none; }
.pdf-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#C9CCCE; font-size:.85rem; text-align:center; padding:20px; }
.sig-overlay{ position:absolute; right:26px; bottom:34px; background:rgba(255,255,255,0.94); padding:6px 10px 8px 10px; border-radius:2px; }
.sig-overlay img{ display:block; width:150px; }
.sig-overlay .sig-meta{ font-size:.62rem; color:#333; margin-top:2px; font-family:'IBM Plex Mono',monospace; border-top:1px solid #ccc; padding-top:3px; }

.divider{ height:1px; background:var(--line); margin:18px 0; }
.small-note{ font-size:.78rem; color:var(--ink-soft); }
.section-title-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }

/* ---------- Prihlásenie ---------- */
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--steel-dark); }
.login-box{ width:360px; background:var(--panel); border-radius:var(--radius); padding:34px 30px; box-shadow:0 10px 40px rgba(0,0,0,.3); }
.login-brand{ text-align:center; margin-bottom:22px; }

/* ---------- Kalendár ---------- */
.cal-nav{ display:flex; align-items:center; gap:14px; }
.cal-nav h2{ margin:0; min-width:170px; text-align:center; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.cal-weekday{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--steel); text-align:center; padding:8px 0; background:var(--neutral-bg); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cal-cell{ min-height:96px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 6px; position:relative; background:#fff; }
.cal-cell.empty{ background:var(--paper); }
.cal-cell.today{ background:#FBEFEA; }
.cal-daynum{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ink-soft); }
.cal-cell.today .cal-daynum{ color:var(--ember-dark); font-weight:700; }
.cal-chip{ display:block; font-size:.68rem; padding:2px 5px; border-radius:2px; margin-top:3px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; cursor:pointer; }
.cal-chip.st-novy{ background:var(--neutral-bg); color:var(--ink-soft); }
.cal-chip.st-caka_na_podpis{ background:var(--amber-bg); color:var(--amber); }
.cal-chip.st-podpisany{ background:#E4EAF0; color:var(--steel-dark); }
.cal-chip.st-odoslany{ background:var(--ok-bg); color:var(--ok); }
.cal-legend{ display:flex; gap:16px; margin-top:14px; flex-wrap:wrap; }
.cal-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink-soft); }
.cal-legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; }

/* ---------- Mapa ---------- */
#customerMap{ width:100%; height:480px; border-radius:var(--radius); border:1px solid var(--line); }
.leaflet-popup-content-wrapper{ border-radius:3px; font-family:'Inter',sans-serif; }
.map-popup-title{ font-weight:700; margin-bottom:4px; }
.map-popup-meta{ font-size:.8rem; color:var(--ink-soft); margin-bottom:6px; }
.map-popup-link{ font-size:.8rem; font-weight:600; }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- Mobilný horný panel a rozbaľovacie menu ---------- */
.mobile-topbar{ display:none; }
.sidebar-overlay{ display:none; }

@media (max-width:860px){
  .mobile-topbar{
    display:flex; align-items:center; gap:14px;
    background:var(--steel-dark); color:#fff; padding:12px 18px;
    position:sticky; top:0; z-index:30;
  }
  .hamburger-btn{
    background:none; border:1px solid rgba(255,255,255,.3); color:#fff;
    width:38px; height:38px; border-radius:var(--radius); font-size:1.1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .mobile-topbar-title{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.02em; font-size:.95rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

  .app-shell{ grid-template-columns:1fr; min-height:0; }
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:250px;
    transform:translateX(-100%); transition:transform .25s ease; z-index:50;
    box-shadow:2px 0 18px rgba(0,0,0,.25);
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-overlay.show{
    display:block; position:fixed; inset:0; background:rgba(20,22,24,.5); z-index:40;
  }
  .main{ padding:18px; }
  .field-row{ grid-template-columns:1fr; }
  table.data{ min-width:720px; }

  /* Zoznam zákazníkov: namiesto vodorovného posúvania sa tabuľka na úzkych
     oknách prekreslí ako sada kartičiek, ktoré sa prispôsobia šírke okna. */
  table.data.customer-table{ min-width:0; }
  .customer-table thead tr:first-child{ display:none; }
  .customer-table .filter-row{
    display:flex; flex-wrap:wrap; gap:8px; background:var(--neutral-bg);
    padding:10px; border-radius:var(--radius); border-bottom:none;
  }
  .customer-table .filter-row th{
    display:block; width:auto; flex:1 1 130px; padding:0; border:none;
  }
  .customer-table .filter-row th:last-child{ flex:0 0 auto; }
  .customer-table, .customer-table tbody{ display:block; width:100%; }
  .customer-table tbody tr{
    display:block; border:1px solid var(--line); border-radius:var(--radius);
    margin:10px 0; padding:6px 12px; background:#fff;
  }
  .customer-table tbody td{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    text-align:left !important; white-space:normal; width:auto !important;
    padding:7px 0; border-bottom:1px dashed var(--line);
  }
  .customer-table tbody td:last-child{ border-bottom:none; justify-content:flex-end; }
  .customer-table tbody td::before{
    content: attr(data-label); flex-shrink:0; font-family:'IBM Plex Mono',monospace;
    font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--steel);
  }
  .customer-table tbody td[data-label=""]::before{ display:none; }

  /* zabránime automatickému priblíženiu na iOS pri fokuse na formulárové polia */
  input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],textarea,select{
    font-size:16px;
  }
  .btn{ padding:10px 16px; }
  .login-box{ width:92vw; padding:28px 22px; }
  .pdf-preview{ height:320px; }
  #customerMap{ height:360px; }
  .cal-cell{ min-height:64px; padding:4px; }
  .cal-chip{ font-size:.62rem; padding:1px 4px; }
  .cal-nav h2{ min-width:0; font-size:1rem; }
}

@media (max-width:480px){
  .topline{ flex-direction:column; align-items:stretch; }
  .topline .btn{ width:100%; justify-content:center; }
  .topline > div[style*="flex"]{ width:100%; display:flex; gap:8px; }
  .topline > div[style*="flex"] .btn{ width:auto; flex:1; }
  .cal-chip{ display:none; }
  .cal-cell{ min-height:38px; }
  .cal-cell.today::after{ content:'●'; color:var(--ember); font-size:.6rem; position:absolute; bottom:4px; left:6px; }
}

/* --- Kontrolný zoznam --- */
.checklist-row{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid #EDEEEA; }
.checklist-row:last-child{ border-bottom:none; }
.checklist-text{ flex:1; font-size:.88rem; line-height:1.4; }
.checklist-options{ display:flex; gap:12px; white-space:nowrap; flex-shrink:0; }
.checklist-options label{ display:flex; align-items:center; gap:4px; font-size:.82rem; cursor:pointer; }
.checklist-fillin{ width:160px; flex-shrink:0; padding:6px 8px; border:1px solid var(--line); border-radius:var(--radius); font-family:inherit; font-size:.85rem; }
.checklist-fillin-wrap{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.checklist-suffix{ font-size:.78rem; color:var(--steel); white-space:nowrap; }
table.data{ width:100%; border-collapse:collapse; font-size:.85rem; }
table.data th, table.data td{ padding:8px 10px; border:1px solid var(--line); text-align:left; }
table.data th{ background:var(--neutral-bg); font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; }
@media (max-width: 720px){
  .checklist-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .checklist-fillin{ width:100%; }
  .checklist-fillin-wrap{ width:100%; flex-wrap:wrap; }
}