/* ══════════════════════════════════════════════════════════════
   WeilTest – weil.css  |  Sdílený základ
   Styl: Premium Dark (GitHub/Raycast)
══════════════════════════════════════════════════════════════ */

:root {
    --bg:        #ffffff;
    --bg2:       #f6f8fa;
    --bg3:       #eaeef2;
    --bg4:       #d0d7de;
    --border:    #d0d7de;
    --text:      #1f2328;
    --muted:     #656d76;
    --primary:   #1f6feb;
    --primary2:  #388bfd;
    --accent:    #0969da;
    --success:   #1a7f37;
    --error:     #cf222e;
    --warning:   #9a6700;
    --radius:    8px;
    --radius-sm: 6px;
    --shadow:    0 1px 3px rgba(31,35,40,0.12), 0 8px 24px rgba(66,74,83,0.12);
    --font:      'Inter', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
    --bg:        #0d1117;
    --bg2:       #161b22;
    --bg3:       #21262d;
    --bg4:       #30363d;
    --border:    #30363d;
    --text:      #e6edf3;
    --muted:     #7d8590;
    --primary:   #388bfd;
    --primary2:  #58a6ff;
    --accent:    #58a6ff;
    --success:   #3fb950;
    --error:     #f85149;
    --warning:   #d29922;
    --shadow:    0 1px 3px rgba(1,4,9,0.8), 0 8px 24px rgba(1,4,9,0.4);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:        #0d1117;
        --bg2:       #161b22;
        --bg3:       #21262d;
        --bg4:       #30363d;
        --border:    #30363d;
        --text:      #e6edf3;
        --muted:     #7d8590;
        --primary:   #388bfd;
        --primary2:  #58a6ff;
        --accent:    #58a6ff;
        --success:   #3fb950;
        --error:     #f85149;
        --warning:   #d29922;
        --shadow:    0 1px 3px rgba(1,4,9,0.8), 0 8px 24px rgba(1,4,9,0.4);
    }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    transition: background 0.2s, color 0.2s;
}

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 56px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    gap: 16px;
}

.topbar .logo {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.topbar .logo-icon {
    width: 24px;
    height: 24px;
    background: var(--primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    flex-shrink: 0;
}

.topbar nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.topbar nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.topbar nav a:hover { color: var(--text); background: var(--bg3); }
.topbar nav a.active { color: var(--text); font-weight: 600; }

.topbar nav .logout {
    color: var(--error);
    border: 1px solid transparent;
    margin-left: 4px;
}
.topbar nav .logout:hover {
    background: rgba(248,81,73,0.08);
    border-color: rgba(248,81,73,0.2);
}

.nav-user {
    font-size: 13px;
    color: var(--muted);
    padding: 4px 10px;
    background: var(--bg3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.btn-nav-login {
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    padding: 5px 14px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: none !important;
}
.btn-nav-login:hover { filter: brightness(1.1); background: var(--primary) !important; }

/* ── Theme toggle ───────────────────────────────────────────── */
.theme-toggle {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: 0.15s;
    flex-shrink: 0;
    margin-left: 4px;
}
.theme-toggle:hover { color: var(--text); background: var(--bg3); }

/* ── FOOTER ─────────────────────────────────────────────────── */
footer {
    text-align: center;
    padding: 20px 16px;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid var(--border);
}
footer a { color: var(--accent); text-decoration: none; font-weight: 500; }
footer a:hover { text-decoration: underline; }

/* ── TLAČÍTKA ───────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
    font-family: var(--font);
    line-height: 20px;
}
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:active { transform: scale(0.98); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font);
    line-height: 20px;
}
.btn-secondary:hover { background: var(--bg3); border-color: var(--muted); }

/* ── FORMULÁŘE ──────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--text); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select, textarea {
    width: 100%;
    padding: 7px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    line-height: 20px;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(31,111,235,0.15);
}

/* ── BADGE ──────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--bg3); color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px; padding: 2px 10px;
    font-size: 12px; font-weight: 600;
}
.badge-blue   { background: rgba(31,111,235,0.1); color: var(--primary); border-color: rgba(31,111,235,0.25); }
.badge-green  { background: rgba(26,127,55,0.1);  color: var(--success); border-color: rgba(26,127,55,0.25); }
.badge-red    { background: rgba(207,34,46,0.1);  color: var(--error);   border-color: rgba(207,34,46,0.25); }
.badge-yellow { background: rgba(154,103,0,0.1);  color: var(--warning); border-color: rgba(154,103,0,0.25); }

/* ── ALERT ──────────────────────────────────────────────────── */
.alert {
    padding: 12px 16px; border-radius: var(--radius-sm);
    font-size: 14px; border: 1px solid transparent;
    margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px;
}
.alert-success { background: rgba(26,127,55,0.08);  border-color: rgba(26,127,55,0.3);  color: var(--success); }
.alert-error   { background: rgba(207,34,46,0.08);  border-color: rgba(207,34,46,0.3);  color: var(--error); }
.alert-warning { background: rgba(154,103,0,0.08);  border-color: rgba(154,103,0,0.3);  color: var(--warning); }
.alert-info    { background: rgba(31,111,235,0.08); border-color: rgba(31,111,235,0.3); color: var(--primary); }

/* ── TABULKA ────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
    background: var(--bg2); color: var(--muted);
    font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 10px 16px; text-align: left;
    border-bottom: 1px solid var(--border);
}
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg2); }
tbody td { padding: 11px 16px; color: var(--text); vertical-align: middle; }
/* ══════════════════════════════════════════════════════════════
   LIGHT MODE
══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --bg:        #ffffff;
    --bg2:       #f6f8fa;
    --bg3:       #eaeef2;
    --bg4:       #d0d7de;
    --border:    rgba(0,0,0,0.12);
    --text:      #1f2328;
    --muted:     #656d76;
    --primary:   #1f6feb;
    --primary2:  #6a2bd6;
    --accent:    #0969da;
    --success:   #1a7f37;
    --error:     #cf222e;
    --warning:   #9a6700;
    --shadow:    0 1px 3px rgba(31,35,40,0.12), 0 8px 24px rgba(66,74,83,0.12);
}

[data-theme="light"] body {
    background: var(--bg);
}

[data-theme="light"] .topbar {
    background: rgba(255,255,255,0.95);
}

[data-theme="light"] .topbar nav a:hover,
[data-theme="light"] .topbar nav a.active {
    background: rgba(0,0,0,0.06);
    color: var(--text);
}

[data-theme="light"] .topbar nav .logout {
    color: var(--error);
    border-color: rgba(207,34,46,0.3);
}

[data-theme="light"] .topbar nav .logout:hover {
    background: rgba(207,34,46,0.08);
}

[data-theme="light"] .topbar .logo {
    background: linear-gradient(135deg, var(--accent), var(--primary2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Theme toggle tlačítko ──────────────────────────────────── */
.theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    margin-left: 6px;
    line-height: 1;
}

.theme-toggle:hover {
    background: var(--bg3);
    color: var(--text);
}