/* =============================================================
   app.css — Zdieľané štýly pre všetky stránky s navigáciou
   ============================================================= */

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f0f2f5; }

/* Sidebar — light */
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 220px; background: #ffffff; border-right: 1px solid #e5e7eb; color: #374151; display: flex; flex-direction: column; z-index: 100; }
.sidebar-logo { padding: 16px 20px; font-size: 16px; font-weight: 700; border-bottom: 1px solid #e5e7eb; color: #2d4a6e; display: flex; align-items: center; gap: 8px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-text span { font-size: 11px; color: #9ca3af; font-weight: 400; margin-top: 2px; }
.nav { flex: 1; padding: 8px 0; overflow-y: auto; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 1px 8px; border-radius: 8px; color: #4b5563; text-decoration: none; font-size: 14px; transition: all 0.12s; }
.nav a svg { opacity: 0.65; flex-shrink: 0; }
.nav a:hover { background: #f0f4f8; color: #2d4a6e; }
.nav a:hover svg { opacity: 1; }
.nav a.active { background: #eef4fb; color: #3b6ea6; font-weight: 600; }
.nav a.active svg { opacity: 1; }
.nav .section { padding: 14px 20px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: #b0bac6; font-weight: 600; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid #e5e7eb; background: #f8fafc; }
.sidebar-footer strong { display: block; color: #374151; font-size: 13px; font-weight: 600; }
.sidebar-footer #userRole { display: block; color: #9ca3af; font-size: 11px; margin-top: 2px; }
.sidebar-footer a { color: #e05252; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; text-decoration: none; }
.sidebar-footer a:hover { color: #dc2626; }

/* Hlavný layout */
.main { margin-left: 220px; min-height: 100vh; }
.topbar { background: white; border-bottom: 1px solid #e5e7eb; padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
.topbar h2 { font-size: 18px; font-weight: 600; color: #2d4a6e; }
.content { padding: 24px; }

/* Tlačidlá */
.btn { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.btn-primary { background: #3b6ea6; color: white; }
.btn-primary:hover { background: #4475b4; }
.btn-outline { background: white; color: #374151; border: 1.5px solid #d1d5db; }
.btn-outline:hover { border-color: #9ca3af; }
.btn-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.btn-danger:hover { background: #fee2e2; }
.btn-sm { padding: 5px 12px; font-size: 12px; }

/* Hamburger tlačidlo */
.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: none; background: none; cursor: pointer;
    color: #374151; border-radius: 8px; flex-shrink: 0;
}
.hamburger:hover { background: #f0f4f8; }

/* Overlay za sidebarem na mobile */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 99;
}
.sidebar-overlay.show { display: block; }

/* Responzívne */
@media (max-width: 900px) {
    .sidebar { transform: translateX(-220px); transition: transform 0.22s ease; }
    .sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.12); }
    .main { margin-left: 0; }
    .hide-mobile { display: none; }
    .hamburger { display: inline-flex; }
    .topbar { padding: 0 16px; gap: 8px; }
}