/* === Viktorka – design tokens (elektronika / cyan + modrá) === */
:root{
/* Palette */
--primary-50:#EAFBFF; --primary-100:#D4F6FF; --primary-200:#AEEBFE; --primary-300:#82DBFA;
--primary-400:#5AD0F6; --primary-500:#4CC9F0; --primary-600:#34B6E0; --primary-700:#2799BE; --primary-800:#1E7A99; --primary-900:#155B73;
--secondary-500:#3A86FF;
--success-500:#22C55E; --danger-500:#EF4444; --warning-500:#F59E0B;


/* Neutrals (dark UI by default, protože Viktorka má tmavý dashboard) */
--bg:#0B141A; --bg-soft:#0F1F27; --surface:#101A22; --surface-2:rgba(255,255,255,.06);
--text:#EAF2F7; --muted:#9FB0BD; --border:rgba(255,255,255,.12);


/* Layout */
--radius:12px; --shadow:0 10px 28px rgba(0,0,0,.35); --gap:14px;


/* Focus ring */
--focus: rgba(76,201,240,.35);
}


/* === Base === */
html,body{ height:100%; }
body{ color:var(--text); background:var(--bg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
*{ box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }


/* === Buttons – sjednoceno s autoservis třídami === */
.btn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:6px 12px; border-radius:var(--radius); font-weight:700; letter-spacing:.2px; cursor:pointer; transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }


/* Primary (použijeme i pro .btn-success aby se dashboard nemusel měnit) */
.btn-success, .btn-primary, .btn-accent{
background: var(--primary-500); color:#0A141A; border:1px solid color-mix(in srgb, var(--primary-600) 60%, transparent);
}
.btn-success:hover, .btn-primary:hover, .btn-accent:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn-success:focus-visible, .btn-primary:focus-visible, .btn-accent:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus); }


/* Ghost */
.btn-ghost{ background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.16); }
.btn-ghost:hover{ background: rgba(255,255,255,.08); }
.btn-ghost:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus); }


/* Danger */
.btn-danger{ background: rgba(239,68,68,.10); color:#fecaca; border:1px solid rgba(239,68,68,.35); }
.btn-danger:hover{ background: rgba(239,68,68,.16); filter: brightness(1.04); }
.btn-danger:focus-visible{ outline:0; box-shadow:0 0 0 2px rgba(239,68,68,.35); }


/* Sizes */
.btn-sm{ font-size:13px; padding:6px 10px; height:32px; border-radius:10px; white-space:nowrap; }
.btn-wide{ min-width:140px; justify-content:center; }


/* === Cards & tables === */
.card{ background: rgba(255,255,255,.06); border:1px solid var(--border); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); backdrop-filter: blur(6px); overflow:hidden; }
.table{ width:100%; border-collapse: collapse; }
.table th{ text-align:left; font-weight:700; color:var(--text); padding:10px; border-bottom:1px solid rgba(255,255,255,.10); }
.table td{ padding:10px; border-bottom:1px solid rgba(255,255,255,.06); color:var(--text); }
.table tr:hover td{ background: var(--surface-2); }


/* === Forms === */
.input,.select,.textarea{ width:100%; max-width:100%; height:36px; padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color:#e1e9f1; }
.textarea{ min-height:100px; resize:vertical; }
.input:focus,.select:focus,.textarea:focus{ outline:0; border-color: rgba(255,255,255,.28); box-shadow:0 0 0 2px var(--focus); }
.select{ color-scheme: dark; }
.select option,.select optgroup{ background:#0b1220; color:var(--text); }


/* === Flash === */
.flash{ border:1px solid color-mix(in srgb, var(--success-500) 35%, transparent); background: color-mix(in srgb, var(--success-500) 12%, transparent); color:#dcfce7; border-radius:10px; padding:10px 12px; margin:10px 0 12px; }
.flash--err{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); color:#fecaca; }

.container{ max-width:1280px; margin:0 auto; padding:0 16px; }
.toolbar{ display:flex; align-items:center; gap:12px; margin:10px 0 12px; }
.muted{ color: var(--muted); }

/* Typo scale – o 1 krok dolů */
html{ font-size: 15px; } /* zhruba -6% proti defaultu 16px */
.h1,.dashboard-title{ font-size:1.35rem; }
.tile__label{ font-size: 18px; letter-spacing:.3px; }
body{ line-height:1.45; }

.field{ position:relative; }
.field__icon{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:18px; height:18px; opacity:.65; }
.input--search{ padding-left:36px; }
.input{ box-shadow: inset 0 0 0 999px rgba(255,255,255,.00); transition: box-shadow .15s ease, background .15s ease; }
.input:hover{ background: rgba(255,255,255,.08); }

.table{ border-collapse: separate; border-spacing: 0 6px; }
.table thead th{ background: transparent; border-bottom: none; padding-bottom:4px; opacity:.8; }
.table tbody td{ background: rgba(255,255,255,.06); border-bottom: none; }
.table tbody tr{ transition: transform .12s ease, background .12s ease; }
.table tbody tr:hover td{ background: rgba(255,255,255,.10); }
/* Zaoblení „pilulek“ */
.table tbody tr td:first-child{ border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.table tbody tr td:last-child { border-top-right-radius:10px; border-bottom-right-radius:10px; }
/* Sloup s akcemi ať se nemačká */
.table td[style*="white-space:nowrap"]{ white-space:nowrap; }

/* === Soft varianta primární barvy (místo plné modré) === */
:root{
/* posuneme základ UI o chlup světleji – ladí s tvým dashboardem */
--bg:#121C24; /* bylo #0B141A */
--bg-soft:#15222B; /* bylo #0F1F27 */
--surface:#12202A; /* bylo #101A22 */


/* soft odstíny primární (cyan) */
--primary-500:#4CC9F0; /* zůstává, ale použijeme ho míň plně */
--primary-soft-bg: rgba(76,201,240,.16); /* výplň tlačítka */
--primary-soft-br: rgba(76,201,240,.35); /* bordura tlačítka */
--primary-soft-tx: #DDF6FE; /* text na soft tlačítku */
}


/* —— Buttons (jemnější) —— */
.btn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:6px 12px; border-radius: var(--radius); font-weight:700; letter-spacing:.2px; cursor:pointer; transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }


/* soft primární – default varianta pro akce (místo plné modré) */
.btn-primary-soft, .btn-accent{ background: var(--primary-soft-bg); color: var(--primary-soft-tx); border:1px solid var(--primary-soft-br); }
.btn-primary-soft:hover, .btn-accent:hover{ background: rgba(76,201,240,.22); transform: translateY(-1px); }
.btn-primary-soft:focus-visible, .btn-accent:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus); }


/* ghost – pro sekundární odkazy */
.btn-ghost{ background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.16); }
.btn-ghost:hover{ background: rgba(255,255,255,.08); }


/* search button – drobnější */
.btn-search{ composes: btn btn-primary-soft; height:34px; padding:6px 12px; font-weight:700; }


/* —— Inputs / Selects —— */
.input,.select{ height:36px; padding:6px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color:#e1e9f1; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.input:hover,.select:hover{ background: rgba(255,255,255,.08); }
.input:focus,.select:focus{ outline:0; border-color: rgba(255,255,255,.28); box-shadow:0 0 0 2px var(--focus); }
.select{ color-scheme: dark; }
.select option,.select optgroup{ background:#0f1720; color:var(--text); }


/* —— Labely a skupiny —— */
.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-row{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.form-group label{ font-size:.9rem; color: var(--muted); font-weight:600; }


/* —— Tabulka jemnější (pilulky) —— */
.table{ border-collapse:separate; border-spacing:0 6px; }
.table thead th{ background:transparent; border-bottom:none; padding-bottom:4px; opacity:.85; }
.table tbody td{ background: rgba(255,255,255,.06); border-bottom:none; }
.table tbody tr:hover td{ background: rgba(255,255,255,.10); }
.table tbody tr td:first-child{ border-top-left-radius:10px; border-bottom-left-radius:10px; }
.table tbody tr td:last-child{ border-top-right-radius:10px; border-bottom-right-radius:10px; }


/* —— Typografie o chlup menší —— */
html{ font-size:15px; }
.tile__label{ font-size:18px; letter-spacing:.3px; }

/* === FORM SEARCH – jednotný vzhled napříč aplikací === */
.form-search{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.form-search .select{ min-width: 200px; }
.form-search .input{ flex:1; max-width: 360px; }
.form-search .btn{ height:36px; }


/* Varianta s ikonou uvnitř inputu */
.field{ position:relative; }
.field__icon{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:18px; height:18px; opacity:.65; pointer-events:none; }
.input.input--search{ padding-left:36px; }


/* Kompaktnější mezery v toolbarech na menších šířkách */
@media (max-width: 900px){
.form-search{ gap:8px; }
.form-search .select{ min-width: 160px; }
.form-search .input{ max-width: 100%; }
}

/* === FORM – sjednocený layout a prvky === */
.form-block{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow); }
.form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px 14px; }
@media (max-width: 900px){ .form-grid{ grid-template-columns:1fr; } }


.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-group label{ font-size:.92rem; color: var(--muted); font-weight:600; }


/* Text inputs / selects / textarea – sjednocené */
.form-input, .input, .select, .textarea{
height: 36px; padding: 6px 12px; border-radius: 10px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: #e1e9f1;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.textarea{ min-height: 96px; resize: vertical; }
.form-input:hover, .input:hover, .select:hover, .textarea:hover{ background: rgba(255,255,255,.08); }
.form-input:focus, .input:focus, .select:focus, .textarea:focus{ outline:0; border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 2px var(--focus); }


/* Select – temný vnitřek + rozumné šířky */
.select, select.form-input{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfe0ea' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }
.select{ color-scheme: dark; }
.select option, .select optgroup, select.form-input option, select.form-input optgroup{ background: #0f1720; color: var(--text); }
/* Toolbar/kratší selecty – ať nejsou přes půl obrazovky */
.select--sm{ min-width:180px; max-width: 260px; }


/* Pomocné utility */
.mb-0{ margin-bottom:0; } .mt-0{ margin-top:0; }


/* Radio/checkbox – sjednocený akcent */
input[type="radio"], input[type="checkbox"]{ accent-color: var(--primary-500); }


/* Volba typu zařízení – „cards“ vzhled */
.choice-list{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width: 900px){ .choice-list{ grid-template-columns: 1fr 1fr; } }
.choice{
display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: 12px;
border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.choice:hover{ background: rgba(255,255,255,.08); }
.choice input{ margin:0; }


/* Primární tlačítko v create – soft varianta, sladěná s dashboardem */
.btn-primary, .btn.btn-primary{ background: var(--primary-soft-bg); color: var(--primary-soft-tx); border:1px solid var(--primary-soft-br); }
.btn-primary:hover{ background: rgba(76,201,240,.22); transform: translateY(-1px); }

/* Flash zprávy – sjednocené s dark/soft UI */
.flash{
  max-width: 1100px;
  margin: 12px auto;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #eaf2f7;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.flash--ok{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: #dcfce7;
}
.flash--err{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: #fecaca;
}

/* === EDIT PAGE – sjednoceno se stylem CREATE / tokens === */

/* Fallback tokeny (kdyby se nenačetl tokens.css) */
:root{
  --surface:#0f1f27;
  --border:rgba(255,255,255,.12);
  --radius:12px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --text:#e9f3f7;
  --muted:#9fb0bd;
  --focus: rgba(76,201,240,.45);
  --warning-500:#f59e0b;

  --primary-500:#4CC9F0;
  --primary-soft-bg: rgba(76,201,240,.16);
  --primary-soft-br: rgba(76,201,240,.35);
  --primary-soft-tx: #DDF6FE;
}

/* Wrapper */
.edit-wrap{ max-width: 1100px; margin: 26px auto; padding: 0 16px; }

/* Sekce (stejné „karty“ jako u create) */
.form-section{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.section-title{
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
}

/* Grid uvnitř sekcí */
.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 14px;
  row-gap: 12px;
}
@media (max-width: 900px){ .form-grid{ grid-template-columns: 1fr; } }

.form-group{ display:flex; flex-direction:column; gap:6px; }
.form-group label{ color: var(--muted); font-weight:600; font-size:.95rem; }

/* Inputs / selects / textarea – sjednoceno */
.input, .form-input, select.input, textarea.input{
  width:100%;
  height:36px;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#e1e9f1;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.input:hover{ background: rgba(255,255,255,.08); }
.input:focus{ outline:0; border-color: rgba(255,255,255,.28); box-shadow:0 0 0 2px var(--focus); }

textarea.input{ min-height: 100px; resize: vertical; }

/* Select – tmavé menu + šipka + rozumné šířky */
select.input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfe0ea' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:34px;
  max-width: 320px;
}
select.input option, select.input optgroup{ background:#0f1720; color:var(--text); }

/* Volby typu zařízení – „cards“ */
.choices{ display:flex; flex-wrap:wrap; gap:10px; }
.choice{
  display:flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.14);
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.choice:hover{ background: rgba(255,255,255,.08); }
.choice input{ margin:0; }

/* Status – jemná soft varianta */
.status-hint{
  display:block;
  margin:.35rem 0 .5rem;
  padding:.45rem .6rem;
  border-left:3px solid var(--warning-500);
  background: color-mix(in srgb, var(--warning-500) 12%, transparent);
  color:#fef3c7;
  border-radius:8px;
  font-size:.9rem;
}
.status-select{
  border:1px solid var(--primary-soft-br);
  background: var(--primary-soft-bg);
  color: var(--primary-soft-tx);
  font-weight:700;
}

/* Buttons (sjednocené s create) */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:6px 12px;
  border-radius: 12px;
  font-weight:700; letter-spacing:.2px;
  cursor:pointer;
  transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  border:1px solid rgba(255,255,255,.16);
  background: transparent;
  color: var(--text);
}
.btn:hover{ background: rgba(255,255,255,.08); }
.btn-primary{
  background: var(--primary-soft-bg);
  color: var(--primary-soft-tx);
  border:1px solid var(--primary-soft-br);
}
.btn-primary:hover{ background: rgba(76,201,240,.22); transform: translateY(-1px); }
.btn-secondary{ background: transparent; }
.btn-danger{ background: rgba(239,68,68,.10); color:#fecaca; border:1px solid rgba(239,68,68,.35); }
.btn-danger:hover{ background: rgba(239,68,68,.16); }
.btn-sm{ font-size:13px; padding:6px 10px; height:32px; }

/* Použité díly – „pill rows“ */
.parts{ width:100%; border-collapse:separate; border-spacing:0 6px; }
.parts thead th{ text-align:left; font-weight:700; color:var(--text); padding:10px; border-bottom:none; opacity:.85; }
.parts tbody td{ padding:10px; background: rgba(255,255,255,.06); }
.parts tbody tr:hover td{ background: rgba(255,255,255,.10); }
.parts tbody tr td:first-child{ border-top-left-radius:10px; border-bottom-left-radius:10px; }
.parts tbody tr td:last-child{ border-top-right-radius:10px; border-bottom-right-radius:10px; }

/* Utility spacing */
.mt-4{ margin-top:1rem; } .mt-6{ margin-top:1.25rem; } .mt-8{ margin-top:2rem; }
.text-right{ text-align:right; }

/* Pojistka: dark plátno (kdyby body neměl theme class) */
body{ background:#0a141a; color:var(--text); }