/* ========= Evidencia IP — UI kit (no external deps) ========= */
:root{
  --bg: #0b1020;
  --surface: #121933;
  --card: #161f3f;
  --elev: rgba(255,255,255,0.06);
  --text: #eef2ff;
  --muted: #b8c0d9;
  --primary: #5b8cff;
  --primary-600: #4c78e6;
  --accent: #22d3ee;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --border: #243055;
  --ring: rgba(91,140,255,0.55);
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --space: 12px;
  --space-lg: 20px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(34,211,238,0.08), transparent 60%),
              radial-gradient(900px 600px at -10% 80%, rgba(91,140,255,0.10), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---- Utilities ---- */
.container{max-width:1100px;margin-inline:auto;padding:24px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:6px;align-items:center; margin-bottom: 8px;}
.center{display:grid;place-items:center}
.hidden{display:none !important}
.separator{height:1px;background:var(--border);margin:8px 0}



/* ---- Card / panel ---- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px !important;
  gap:16px !important;
  margin-top: 16px !important;
}

/* ---- Buttons ---- */
.btn{
  appearance:none; border:0; border-radius:12px;
  padding:6px 10px; font-weight:600; cursor:pointer;
  color:#0a0f1f; background:var(--primary);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0px 0px 5px rgba(222, 232, 252, 0.212);
  font-size: 10px;
}
.btn:hover{background:var(--primary-600);text-decoration: none;}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:#24314f;color:var(--text);box-shadow:none; border:1px solid var(--border);}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border); text-decoration: none;}
.btn.danger{background:var(--danger) !important;color:#fff}

.btn-login{
  appearance:none; border:0; border-radius:12px;
  padding:12px 14px; font-weight:600; cursor:pointer;
  color:#0a0f1f; background:var(--primary);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 6px 20px rgba(91,140,255,.35);
  font-size: 14px;
}
.btn-login:hover{background:var(--primary-600);text-decoration: none;}
.btn-login:active{transform:translateY(1px)}

/* ---- Inputs ---- */
.input, select, .select, textarea{
  width: 100%; padding:12px 14px; border-radius:12px;

  border:1px solid var(--border); color:var(--text);
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.input:focus, select:focus, textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--ring);
}
.input.invalid{border-color:var(--danger)}
.help{color:var(--muted); font-size:.9rem; margin-top:10px;}
.field{display:flex;flex-direction:column;gap:8px; margin-bottom: 15px;}
.field-row{display:grid;grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:720px){ .field-row{grid-template-columns:1fr} }

.input2 {
  width: 220px; padding:12px 14px; border-radius:12px;

  border:1px solid var(--border); color:var(--text);
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;

}

/* ---- Auth pages ---- */
.auth-wrap{
  min-height:100vh; display:grid; place-items:center; padding:32px;
}
.auth-card{
  width:min(420px, 100%);
  padding:28px; gap:18px; display:flex; flex-direction:column;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px;
}

.test{
  margin-top: 16px;
}

.logo_app {
    display: flex;              /* spraví z kontajnera flexbox */
    align-items: center;        /* vertikálne vystredenie */
    justify-content: center;    /* horizontálne vystredenie (ak nechceš, daj flex-start) */
    height: 100%;               /* nech zaberie výšku rodiča (napr. headeru) */
}

/* ak je vnútri <img>, jemné doladenie */
.logo_app img {
    max-height: 220px;           /* uprav podľa toho, aké veľké logo chceš */
    height: auto;
    width: auto;
    display: block;
}

.brand-logo{
  width:36px; height:36px; border-radius:10px;
  background: conic-gradient(from 210deg at 50% 50%, var(--primary), var(--accent));
  box-shadow:0 10px 30px rgba(34,211,238,0.25);
}
.auth-title{font-size:1.2rem; margin:2px 0}
.auth-sub{color:var(--muted); margin-bottom:6px}
.form-actions{display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:50px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Layout (app shell) ---- */
.app{
  min-height:100vh; display:grid;
  grid-template-columns:260px 1fr;
  grid-template-rows:56px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
}
.sidebar{grid-area:sidebar; background:linear-gradient(180deg,#0e1530,#0b1124); border-right:1px solid var(--border); position:sticky; top:0; height:100vh}
.topbar{grid-area:topbar; backdrop-filter:saturate(160%) blur(6px); background:rgba(12,18,40,0.75); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 16px; position:sticky; top:0; z-index:5}

.topbar [data-burger]{ display:none; }
@media (max-width:980px){ .topbar [data-burger]{ display:inline-flex; } }
@media (max-width:980px){ .topbar [data-sidebar-toggle]{ display:none; } }
@media (min-width:981px){ .topbar [data-sidebar-toggle]{ display:inline-flex; } }

.main{grid-area:main; padding:20px;}

@media (max-width:980px){
  .app{grid-template-columns:1fr; grid-template-rows:auto 1fr; grid-template-areas:"topbar" "main"}
  .sidebar{position:fixed; inset:0 30% 0 0; transform:translateX(-100%); transition:transform .25s ease; z-index:1001}
  .sidebar.open{transform:none}
}

/* ---- Sidebar content ---- */

.side-header{
  display:flex;
  flex-direction:column;      /* toto ich dá pod seba */
  align-items:center;
  gap:8px;
  padding:18px 16px 12px;
  border-bottom:1px solid var(--border);
  text-align:center;
}


.side-nav{padding:10px}
.nav-group{margin-top:8px}
.nav-label{color:var(--muted); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:10px 12px}
.nav-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--text);
}
.nav-link:hover{background:#0f1733}
.nav-link.active{background:#152246; box-shadow: inset 0 0 0 1px #263562}
.nav-link svg{width:18px;height:18px; opacity:.9}

/* ---- Topbar ---- */
.hamburger{display:none; background:transparent; border:0; color:var(--text); padding:8px; border-radius:8px}
@media (max-width:980px){ .hamburger{display:inline-flex} }
.user-chip{display:flex; align-items:center; gap:8px}
.avatar{width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent))}

/* ---- Components ---- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:1024px){ .kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){ .kpi-grid{grid-template-columns:1fr}}
.kpi{padding:16px}
.kpi .num{font-size:1.rem; font-weight:800}
.kpi .lbl{color:#1844bb; font-weight:500}

.topbar-title{font-size: 20px; font-weight: 700;}

/* ---- Tables ---- */
.table-wrap{ border:1px solid var(--border); border-radius:12px; overflow: hidden;}
table{width:100%; border-collapse:separate; border-spacing:0}
thead th{
  position:sticky; top:0;  z-index:1;
  text-align:center; padding:12px; font-weight:700; border-bottom:1px solid var(--border);
  font-size: 14px;
}
tbody td{padding:6px; border-bottom:1px solid rgba(36,48,85,.6); border-left:1px solid rgba(36,48,85,.6); text-align: center;}
tbody tr:hover{background:rgba(255,255,255,0.02)}
.badge{font-size:.78rem; padding:4px 8px; border-radius:999px; border:1px solid var(--border); color:var(--muted)}
.badge.success{border-color:rgba(34,197,94,.4); color:#bbf7d0; background:rgba(34,197,94,.08)}

/* ---- Alerts ---- */
.alert{padding:6px 14px; border-radius:10px; border:1px solid var(--border); background:#0f1733}
.alert.warn{border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); color:#fde68a}

/* ---- Forms misc ---- */
.input-wrap{position:relative}
.input-wrap .toggle-password{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; color:var(--muted); border:0; cursor:pointer; padding:6px
}
.checkbox{display:flex; align-items:center; gap:8px}
.checkbox input{width:18px;height:18px; accent-color:var(--primary)}
.hr-text{display:flex; align-items:center; gap:10px; color:var(--muted)}
.hr-text::before,.hr-text::after{content:""; flex:1; height:1px; background:var(--border)}
.footer-note{color:var(--muted); font-size:.88rem; text-align:center; margin-top:12px}

/* ========== Téma a akcent (CSS premenné) ========== */
:root{
  --accent-h: 210; /* default modrá (Hue) */
  --accent: hsl(var(--accent-h) 90% 55%);
  --accent-600: hsl(var(--accent-h) 80% 48%);
  --accent-700: hsl(var(--accent-h) 80% 40%);
}
:root, html[data-theme="light"]{
  color-scheme: light;
  --bg: #f6f8fc;
  --surface: #ffffff;
  --text: #121a2b;
  --muted: #6b7280;
  --border: #e5e7eb;
}
html[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0b1220;
  --surface: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;
}
/* základné prefarbenie hlavných prvkov podľa témy */
body, .app{ background: var(--bg); color: var(--text); }
.card{ background: var(--surface); border:1px solid var(--border); }
.sidebar{ background: var(--surface); border-right:1px solid var(--border); }
.topbar{ background: var(--surface); border-bottom:1px solid var(--border); }
.table-wrap table th, .table-wrap table td{ border-color: var(--border); }
.badge.success{ background: var(--accent-700); color:#fff; }
.btn{ background: var(--accent); color:#fff; border:1px solid var(--accent-600); }
.btn:hover{ background: var(--accent-600); }

/* ========== Topbar rozloženie a ovládanie témy ========== */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:8px 16px; }
.topbar-left{ display:flex; align-items:center; gap:10px; }
.topbar-right{ display:flex; align-items:center; gap:16px; }
.user-chip{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; }
.user-chip svg{ width:18px; height:18px; }

/* hamburger (ak už máš, ponechaj svoj) */
.burger{ width:36px; height:32px; display:grid; place-items:center; gap:3px; border:1px solid var(--border); background:var(--surface); border-radius:8px; }
.burger span{ display:block; width:18px; height:2px; background:var(--text); }

/* prepínač témy – moderný „pill“ bez SVG; bude mať 50px odsadenie od usera */
.theme-toggle{ width:56px; height:30px; border-radius:999px; position:relative; background:var(--border); border:1px solid var(--border); cursor:pointer; margin-right:50px; }
.theme-toggle::after{
  content:"";
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background: var(--accent); transition: transform .25s ease-in-out;
}
html[data-theme="dark"] .theme-toggle{ background:#1f2937; }
html[data-theme="dark"] .theme-toggle::after{ transform: translateX(26px); }

/* voľba akcentu – malé guľaté vzorky */
.accent-swatches{ display:flex; align-items:center; gap:8px; }
.accent-swatches .swatch{
  width:18px; height:18px; border-radius:50%; border:1px solid var(--border); cursor:pointer;
}
.accent-swatches .swatch[data-accent="210"]{ background:hsl(210 90% 55%); } /* modrá */
.accent-swatches .swatch[data-accent="140"]{ background:hsl(140 70% 45%); } /* zelená */
.accent-swatches .swatch[data-accent="20"] { background:hsl(20 90% 55%); }  /* oranžová */
.accent-swatches .swatch[data-accent="330"]{ background:hsl(330 70% 60%); } /* fialová */



/* ===== THEME SURFACE VARS (fix hard-coded dark colors) ===== */
:root, html[data-theme="light"]{
  /* light palette */
  --ink: #121A2B;
  --ink-muted: #6b7280;
  --surface-1: #ffffff;   /* hlavné plochy (topbar, sidebar, cards) */
  --surface-2: #f6f8fc;   /* hover/sekundárne pozadie v light */
  --surface-3: #e9edf5;   /* active/zdôraznené pozadie v light */
  --btn-menen: #b9b9b9;
}
html[data-theme="dark"]{
  /* dark palette (mapované z tvojich farieb) */
  --ink: #e5e7eb;
  --ink-muted: #9ca3af;
  --surface-1: #121A2B;   /* býv. #121A2B */
  --surface-2: #0F1733;   /* býv. #0F1733 */
  --surface-3: #152246;
  --btn-menen: #333333;   /* býv. #152246 (príp. #0F152D podľa potreby) */


}

.auth-links{
  font-size: 12px;
  text-align: right;
}

/* ===== GLOBAL SURFACE/TEXT OVERRIDES ===== */
body, .app { background: var(--bg, var(--surface-2)) !important; color: var(--ink) !important; }
.topbar { background: var(--surface-1) !important; color: var(--ink) !important; border-bottom:1px solid var(--border); }
.sidebar { background: var(--surface-1) !important; color: var(--ink) !important; border-right:1px solid var(--border); }
.card, .dropdown, .menu, .table-wrap table { background: var(--surface-1) !important; color: var(--ink) !important; }

/* tabuľky – línie */
.table-wrap table th, .table-wrap table td { border-color: var(--border) !important; color: var(--ink) !important; }

/* ===== NAV LINKS (menu v sidebare) ===== */
.sidebar .nav-link { background: transparent !important; color: var(--ink) !important; }
.sidebar .nav-link:hover { background: var(--surface-2) !important; color: var(--ink) !important; }
.sidebar .nav-link.active { background: var(--surface-3) !important; color: var(--ink) !important; }

/* ===== BUTTONS ===== */
.btn { background: var(--accent) !important; border:1px solid var(--accent-600) !important; color:#fff !important; }
.btn:hover { background: var(--accent-600) !important; }
.btn.secondary { background: var(--btn-menen) !important; border:1px solid var(--border) !important; color: var(--ink) !important; }
.btn.ghost { background: transparent !important; border:1px solid var(--accent-600) !important; color: var(--accent) !important; }

/* badges, alerts, texty */
.badge { background: var(--surface-2) !important; color: var(--ink) !important; }
.badge.success { background: var(--accent-700) !important; color:#fff !important; }
.alert { background: var(--surface-2) !important; color: var(--ink) !important; border:1px solid var(--border) !important; }

/* ikony v linkách nech majú farbu textu */
.nav-link svg path, .user-chip svg path { fill: currentColor !important; }


.req { color: #ef4444; margin-left: 2px; }
.input.invalid { background-color: #fee2e2 !important; border-color: #ef4444 !important; }
.help.js-error { color: #ef4444; font-size: 12px; margin-top: 4px; }

/* ===== Sidebar collapse (desktop) ===== */
.app{ transition: grid-template-columns .25s ease; }

.app.is-collapsed{
  grid-template-columns: 0 1fr; /* sidebar stiahni na 0, main ide na plnú šírku */
}

.app.is-collapsed .sidebar{
  visibility: hidden;   /* nechytá fokus */
  pointer-events: none; /* neklikateľné */
  border: 0;
  overflow: hidden;
}

/* Na mobile ponechaj existujúci režim (burger s .open) */
@media (max-width:980px){
  .app.is-collapsed{ grid-template-columns: 1fr; }
}

/* Close tlačidlo v sidebare – iba mobil */
.sidebar .sidebar-close { display: none; }

@media (max-width:980px){
  
  .sidebar .sidebar-close{
    display: inline-flex;
    position: absolute; top: 8px; right: 8px;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border-radius: 8px;
    z-index: 1001; /* nad obsahom sidebara */
  }

  /* Backdrop za sidebarom – zobraziť len keď je .open */
  .sidebar-backdrop{ display:none; }
  .sidebar.open + .sidebar-backdrop{
    display:block;
    position:fixed; inset:0;
    background: var(--overlay-bg, rgba(0,0,0,.35));
    z-index: 100; /* pod sidebarom, nad obsahom */
  }
}

/* Info o zálohe – základný vzhľad (OK stav) */
.backup-status {
  padding: 10px 12px;
  border-radius: var(--radius-xs, 8px);
  border: 1px solid var(--border, #243055);
  background: rgba(148, 163, 184, 0.08);
  color: var(--text, #eef2ff);
  font-size: 13px;
  line-height: 1.4;
}

/* Varovanie: záloha staršia ako 7 dní */
.backup-status.backup-status--old {
  border-color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger, #ef4444);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
}

/* aby silný text a link zdedili farbu */
.backup-status.backup-status--old strong {
  color: inherit;
}

.backup-status.backup-status--old a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.backup-status.backup-status--old a:hover {
  text-decoration: none;
}


.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-card {
  background: var(--surface, #020617);
  color: var(--text, #e5e7eb);
  padding: 24px 28px;
  border-radius: 14px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
  text-align: center;
}

.modal-card h2 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
}

.modal-card p {
  margin: 0 0 16px 0;
  font-size: .95rem;
  line-height: 1.4;
}

/* Logo v sidebare – obrázok v kontajneri brand-logo, ale len v sidebare */
.side-header .brand-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  background: transparent;
  box-shadow: none;
  min-height: 100px;
}

.side-header .brand-logo img {
  max-width:100%;
  max-height:80px;
  border-radius:inherit;
  object-fit:contain;
  display:block;
}

.side-header .brand-logo.brand-logo--image {
  background: transparent;
  box-shadow: none;
}

.logo_nahlad {
  width:140px; 
  
  display:flex; 
  align-items:center; 
  justify-content:center; 
  background:rgba(148,163,184,0.08);
  margin-top: 20px;
  margin-bottom: 20px;
}

/* ---- License info layout (info_licence.php) ---- */
.license-info-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:18px;
}

.license-info-box{
  flex:1 1 calc(33.333% - 12px);
  min-width:220px;
  padding:12px 14px;
  border-radius:12px;
  background: var(--surface-1);
  border:1px solid var(--border);
}

@media (max-width:900px){
  .license-info-box{
    flex:1 1 100%;
  }
}

.license-info-label{
  font-size:0.8rem;
  color:var(--ink-muted);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:6px;
}

.license-info-value{
  font-size:0.98rem;
  font-weight:500;
  color:var(--ink);
}

.license-info-dates{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:0.9rem;
}

@media (min-width:640px){
  .license-info-dates{
    flex-direction:row;
    gap:10px;
  }
}

.license-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:600;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--ink);
}

.license-info-detail{
  padding:10px 12px;
  border-radius:10px;
  background:var(--surface-2);
  border:1px solid var(--border);
  font-size:0.95rem;
  line-height:1.4;
  color:var(--ink);
}