/* ==========================================================================
   app.css
   Čo robí: vizuálny štýl celej aplikácie RevízieOPZ
   Čo NESMIE: obsahovať žiadnu logiku – len CSS
   ========================================================================== */

/* --- CSS premenné (farby, základné hodnoty) --- */
:root {
  --bg:          #0f1117;   /* hlavné pozadie stránky */
  --bg2:         #181c27;   /* pozadie kariet */
  --bg3:         #1f2435;   /* pozadie inputov, hover stavov */
  --border:      #2a2f42;   /* farba ohraničení */
  --text:        #e8eaf0;   /* hlavný text */
  --text-muted:  #8b90a0;   /* sekundárny / tlmený text */
  --accent:      #4f7fff;   /* modrá akcentová farba */
  --accent-h:    #6b93ff;   /* hover stav akcentovej farby */
  --danger:      #e05555;   /* červená – nebezpečné akcie */
  --ok:          #3ecf8e;   /* zelená – v poriadku */
  --warn:        #f5a623;   /* oranžová – varovanie */
}

/* --- Reset a základy --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size:   15px;
  line-height: 1.6;
  min-height:  100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ==========================================================================
   KARTY (.card)
   ========================================================================== */
.card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: 10px;
  padding:       20px 24px;
}
.card + .card { margin-top: 16px; }

/* ==========================================================================
   TLAČIDLÁ (.btn)
   ========================================================================== */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         8px 18px;
  border-radius:   7px;
  border:          none;
  font-size:       14px;
  font-weight:     500;
  cursor:          pointer;
  transition:      background .15s, opacity .15s;
  white-space:     nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary       { background: var(--accent);  color: #fff; }
.btn-primary:hover { background: var(--accent-h); }

.btn-ghost         { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover   { background: var(--bg3); }

.btn-danger        { background: var(--danger); color: #fff; }
.btn-danger:hover  { opacity: .85; }

/* Tlačidlo na celú šírku (napr. login) */
.btn-block { width: 100%; }

/* ==========================================================================
   BADGE – stavové štítky
   ========================================================================== */
.badge {
  display:       inline-block;
  padding:       2px 9px;
  border-radius: 20px;
  font-size:     12px;
  font-weight:   600;
  line-height:   1.6;
}
.badge-blue { background: #1e3a6e; color: #7aaaff; }
.badge-ok   { background: #0e3d28; color: var(--ok);   }
.badge-warn { background: #3d2e0a; color: var(--warn); }
.badge-nok  { background: #3d1010; color: #ff7a7a;    }

/* ==========================================================================
   GRID A LAYOUT
   ========================================================================== */
.g2  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.g3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.g4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.flex     { display: flex; align-items: center; }
.gap-8    { gap: 8px; }
.gap-16   { gap: 16px; }
.ml-auto  { margin-left: auto; }

/* ==========================================================================
   FORMULÁRE
   ========================================================================== */
.form-field {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  margin-bottom:  14px;
}
.form-field:last-child { margin-bottom: 0; }

label.lbl {
  font-size:   13px;
  font-weight: 500;
  color:       var(--text-muted);
}

input,
select,
textarea {
  background:    var(--bg3);
  border:        1px solid var(--border);
  border-radius: 7px;
  color:         var(--text);
  padding:       9px 12px;
  font-size:     14px;
  font-family:   inherit;
  width:         100%;
  outline:       none;
  transition:    border-color .15s;
}
input:focus,
select:focus,
textarea:focus { border-color: var(--accent); }

input::placeholder,
textarea::placeholder { color: var(--text-muted); opacity: .7; }

textarea { resize: vertical; min-height: 80px; }

select option { background: var(--bg3); }

/* ==========================================================================
   NAVIGÁCIA (.app-nav)
   ========================================================================== */
.app-nav {
  display:       flex;
  align-items:   center;
  gap:           16px;
  background:    var(--bg2);
  border-bottom: 1px solid var(--border);
  padding:       0 24px;
  height:        56px;
  position:      sticky;
  top:           0;
  z-index:       100;
}

.nav-logo {
  font-size:       18px;
  font-weight:     700;
  color:           var(--text);
  text-decoration: none;
  letter-spacing:  -.3px;
  flex-shrink:     0;
}
.nav-logo span { color: var(--accent); }

.nav-tabs {
  display: flex;
  gap:     4px;
}

.nav-tab {
  padding:         6px 14px;
  border-radius:   6px;
  font-size:       14px;
  color:           var(--text-muted);
  text-decoration: none;
  transition:      background .15s, color .15s;
}
.nav-tab:hover    { background: var(--bg3); color: var(--text); text-decoration: none; }
.nav-tab.on       { background: var(--bg3); color: var(--text); font-weight: 600; }

.nav-right {
  display:     flex;
  align-items: center;
  gap:         10px;
}

/* ==========================================================================
   UTILITY
   ========================================================================== */
.hidden { display: none !important; }

.section-title {
  font-size:     20px;
  font-weight:   600;
  margin-bottom: 20px;
}

.text-muted { color: var(--text-muted); }

/* ==========================================================================
   RESPONZÍVNE – mobile
   ========================================================================== */
@media (max-width: 768px) {
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }

  .app-nav {
    padding: 0 14px;
    gap:     8px;
    height:  52px;
  }
  .nav-logo { font-size: 16px; }
  .nav-tabs { gap: 2px; }
  .nav-tab  { padding: 5px 10px; font-size: 13px; }

  .card { padding: 16px; }
}