:root{
  --bg:#0f1420; --card:#151b2a; --muted:#9aa3b2; --fg:#eef2f7;
  --pri:#3b82f6; --pri-acc:#60a5fa; --red:#ef4444; --green:#22c55e;
  --border:#263143; --shadow:0 6px 20px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:14px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif}
.hidden{display:none !important}
.center{text-align:center}
.muted{color:var(--muted);opacity:.9}
.mt-compact{margin-top:8px}
.mt-small{margin-top:6px}

body  {
    font-size: 13px;
  }

/* topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:#101828;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.userbar{display:flex;align-items:center;gap:8px}
.userbar .sep{width:1px;height:18px;background:var(--border);margin:0 6px}
.timer{font-variant-numeric:tabular-nums;color:var(--pri-acc)}

/* layout */
.wrap{max-width:1800px;margin:18px auto;padding:0 14px}
.grid{display:grid;gap:12px}
.grid.compact{gap:8px}
.g2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.g2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:14px}
.card.compact{padding:10px}
.card-lite{background:#0f172a;border:1px solid #1f2a3d;border-radius:10px;padding:10px}
.group-title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#93a4b8;margin-bottom:6px}

/* headings – bílé */
h2,h3,h4{margin:6px 0 8px;color:var(--fg)}
h3.tight{margin:0}

/* forms */
label{display:block;margin:6px 0 4px;color:var(--muted)}
input,select,textarea{width:100%;padding:9px;border-radius:10px;border:1px solid var(--border);background:#0b1220;color:var(--fg)}
input[type="checkbox"] {width: 5%; !important}
textarea{min-height:80px}
.form.compact textarea{min-height:64px}
.form .status{min-height:16px;margin:6px 0 6px}
.form .status.ok{color:var(--green)}
.form .status.err{color:var(--red)}
.form-sectioned .modal-header{margin-bottom:8px}
.form-sectioned .sub{color:#b9c3d0;font-size:12px;opacity:.95}

/* zvýraznění vstupu pro kód podniku */
#pCode{
  font-family:ui-monospace, Menlo, Consolas, "SFMono-Regular", monospace;
  letter-spacing:.08em; font-weight:700;
}

/* buttons */
.btn{background:var(--pri);color:white;border:0;border-radius:10px;padding:9px 12px;cursor:pointer;box-shadow:var(--shadow)}
.btn.small{padding:6px 9px;border-radius:8px}
.btn.flat{background:transparent;border:1px solid var(--border);color:var(--fg)}
.btn.danger{background:var(--red)}
.btn.w100{width:100%}

/* toolbars */
.toolbar{display:flex;gap:10px;align-items:end;margin-bottom:10px;flex-wrap:wrap}
.toolbar.compact{gap:8px;margin-bottom:8px}
.toolbar .grow{flex:1;min-width:200px}
.pager{display:flex;align-items:center;gap:6px}

/* tables */
.tablewrap{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;overflow:auto}
.tablewrap.compact{padding:4px}
.tablewrap.scroll-y{max-height:55vh;overflow:auto}
.table{width:100%;border-collapse:separate;border-spacing:0;min-width:800px}
.table.compact th,.table.compact td{padding:8px}
.table thead th{position:sticky;top:0;background:#0b1220;color:#e2e8f0;padding:10px;text-align:left;border-bottom:1px solid var(--border)}
.table tbody td{padding:10px;border-bottom:1px solid var(--border);background:#111927;color:var(--fg)}
.table th{color:var(--fg)}
.table .nowrap{white-space:nowrap}

.badge-st-aktivni{background:var(--green) !important;}   /* zelená – aktivní */
.badge-st-sklad{background:#0ea5e9 !important;}         /* modrá – sklad */
.badge-st-koupene{background:#64748b !important;}       /* šedá / neutrální – koupené */
.badge-st-vyrazene{background:var(--red) !important;}   /* červená – vyřazené */

/* Každá buňka tabulky má vlastní horizontální scroll, pokud je obsah dlouhý */
#devicesTable td {
  max-width: 220px;
  overflow-x: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Tlačítka vždy viditelná, nesmršťují se */
#devicesTable td:last-child {
  white-space: nowrap;
  overflow: visible;
}

/* Skryj scrollbar u krátkých textů, zobraz jen když je nutný */
#devicesTable td::-webkit-scrollbar {
  height: 6px;
}
#devicesTable td::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 3px;
}

.audit-link{display:inline-block;text-decoration:none;font-size:16px;}
.audit-link:hover{text-decoration:underline;}


/* tiles – centrování na login stránce */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,220px));gap:10px;justify-content:center;margin-top:8px}
.tiles.compact{gap:8px}
.tile{display:flex;align-items:flex-end;justify-content:center;height:110px;background:#0b1220;border:1px solid var(--border);border-radius:12px;color:#fff;text-decoration:none;font-weight:600;background-size:cover;background-position:center;padding:8px;box-shadow:var(--shadow);width:100%}
.tile.compact{height:98px}
.tile:hover{outline:2px solid var(--pri-acc)}

/* toast */
.toast{position:fixed;right:14px;bottom:14px;min-width:240px;background:#111827;border:1px solid var(--border);border-radius:12px;color:#fff;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:.2s}
.toast.ok{border-color:#1f8f4d}
.toast.err{border-color:#b42318}
.toast .wrap{padding:10px}
.toast .title{font-weight:700;margin-bottom:4px}
.toast .msg{opacity:.9}
.toast.hidden{opacity:0;pointer-events:none}
.toast:not(.hidden){opacity:1;transform:translateY(0)}

/* modals – blur & kontrast */
.modal{border:0;border-radius:12px;padding:0;background:transparent;max-width:880px;width:calc(100% - 24px)}
.modal.wide{max-width:1100px}
.modal::backdrop{background:rgba(3,8,20,.55);backdrop-filter:blur(6px)}
.modal form{background:var(--card);border:1px solid var(--border);padding:12px;border-radius:12px;box-shadow:var(--shadow);color:var(--fg)}
.modal form.compact{padding:10px}
.modal menu{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}

/* history badges */
.badge{display:inline-block;padding:3px 7px;border-radius:999px;background:#334155;color:#fff;font-size:12px}
.badge-hw{background:#2563eb}
.badge-sw{background:#14b8a6}

/* guest – centrování login + kód */
.guest-stage{min-height:60vh;display:flex;align-items:center;justify-content:center}
.guest-box{max-width:900px;width:100%}

/* vysvětlivky a kontakt */
.helper{font-size:12px;color:var(--muted);opacity:.8;margin-top:6px}

/* codes modal – čitelné */
.codes-table thead th{background:#0d1424}
.codes-table tbody td{background:#0e1627}
.codes-table tbody td:nth-child(2){font-family:ui-monospace, Menlo, Consolas, monospace;font-weight:700}

/* checkbox list – sjednocená výška a pořadí (checkbox vlevo, text hned za ním) */
.checks{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:8px;
  max-height:45vh;
  overflow:auto;
  padding-right:4px;
}
.checks.compact{gap:6px}
.chk{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#0b1220;
  font-size:13px;
  min-height:38px;      /* sjednocená výška */
  line-height:1;        /* aby výška nebyla rozhozená víceradým textem */
}
.chk input[type="checkbox"]{
  margin:0;             /* checkbox úplně vlevo */
}
.chk span{
  display:inline-block; /* text hned za checkboxem */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}

/* správa uživatelů */
.user-mgmt .card-lite{min-height:100%}
.user-mgmt .tablewrap.scroll-y{max-height:45vh}
.user-mgmt table thead th{background:#0d1424}
.user-mgmt table tbody td{background:#0e1627}

/* tools modal – širší levý panel (form) */
.tools-grid{display:grid;grid-template-columns:1.5fr 2fr;gap:10px}
@media (max-width:900px){ .tools-grid{grid-template-columns:1fr} }

/* mobile tweaks */
@media (max-width:720px){
  .wrap{padding:0 10px}
  .guest-stage{min-height:50vh}
  .toolbar .pager{width:100%;justify-content:flex-end;margin-top:6px}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .table{min-width:700px}
}

/* responsive table -> cards on mobile */
@media (max-width:720px){
  .table.responsive{width:100%;border-collapse:separate;border-spacing:0 8px}
  .table.responsive thead{display:none}
  .table.responsive tbody tr{
    display:block;background:var(--card);border:1px solid var(--border);
    border-radius:12px;padding:10px;box-shadow:var(--shadow)
  }
  .table.responsive tbody td{
    display:flex;justify-content:space-between;gap:10px;
    padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.05)
  }
  .table.responsive tbody td:last-child{border-bottom:0}
  .table.responsive tbody td::before{
    content:attr(data-col); color:var(--muted); font-weight:600
  }
  /* toolbar stack */
  .toolbar{flex-wrap:wrap;gap:8px}
  .toolbar > *{min-width:140px}
  .toolbar .grow{flex:1 1 100%}
  .toolbar .pager{flex:1 1 auto;justify-content:flex-end}
}
/* info icon button */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:999px;border:1px solid var(--border);
  background:#0f1628;color:#cfe0ff;font-weight:700;cursor:pointer;
  margin-right:6px; box-shadow:var(--shadow);
}
.icon-btn:hover{background:#122038}


/* --- NOTE modal: multi-line block text --- */
#modalNote .form { max-width: 640px; }
#modalNote #noteText{
  white-space: pre-wrap;        /* respektuje \n */
  word-break: break-word;       /* láme dlouhá slova */
  overflow-wrap: anywhere;      /* krajní případ, láme kdekoli */
  max-height: 50vh;             /* když je poznámka dlouhá, scrolluje */
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  line-height: 1.45;
}


/* --- Actions column layout --- */
th.actions-col{ width: 220px; }             /* desktop fixní šířka */
td.actions-cell{
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:999px; border:1px solid var(--border);
  background:#0f1628; color:#cfe0ff; font-weight:700; cursor:pointer;
  margin-right:6px; box-shadow:var(--shadow);
  line-height:1; vertical-align:middle; flex:0 0 24px;   /* nehne layoutem */
}
.icon-btn:hover{ background:#122038; }


@media (max-width:720px){
  .table.responsive tbody td.actions-cell{
    display:flex; gap:8px; flex-wrap:wrap;
  }
  th.actions-col{ width:auto; } /* na mobilu nechat volné */
}


/* --- Historie: multi-line poznámky, bezpečné zalamování --- */
#modalHistory .hist-note{
  white-space: pre-wrap;      /* respektuje \n a zároveň zalamuje */
  word-break: break-word;     /* láme dlouhá „slova“ (hash, UUID, atd.) */
  overflow-wrap: anywhere;    /* nouzové zalomení kdekoli, když je třeba */
  line-height: 1.45;
}

/* Pomůže, když máš úzké sloupce v historii */
#modalHistory table{
  table-layout: fixed;        /* stabilní šířky sloupců */
  width: 100%;
}
#modalHistory td, 
#modalHistory th{
  overflow: hidden;           /* nevyteče z buňky */
  text-overflow: ellipsis;    /* jen pro extrémně dlouhé řádky bez mezer */
  vertical-align: top;
}
@media (max-width:1700px){
  body  {
    font-size: 10px;
  }
}