/* ══════════════════════════════════════════════════════════════════
   GLASS DESIGN OVERLAY — Lehký glassmorphism pro celé prostředí
   Přidává se nad stávající styly (přepisuje jen co je potřeba)
   ══════════════════════════════════════════════════════════════════ */

/* ── Pozadí aplikace: světlý gradient s blur-blob efektem ── */
body {
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 30%, #e0f2fe 60%, #f0f9ff 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
  position: relative;
}

/* Dekorativní blobs v pozadí */
body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: glassBlobFloat 12s ease-in-out infinite;
}
body::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,130,246,.18) 0%, rgba(147,197,253,.08) 70%, transparent 100%);
  top: -150px; left: -100px;
}
body::after {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(14,165,233,.15) 0%, rgba(186,230,253,.07) 70%, transparent 100%);
  bottom: -100px; right: -80px;
  animation-delay: -6s;
}

@keyframes glassBlobFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  40%       { transform: translate(30px,-40px) scale(1.06); }
  70%       { transform: translate(-20px,25px) scale(.95); }
}

/* Veškerý obsah nad blob-y */
.app, .login-screen { position: relative; z-index: 1; }

/* ── SIDEBAR: frosted glass, světlý ── */
.sidebar {
  background: linear-gradient(180deg,
    rgba(8,40,72,.92) 0%,
    rgba(10,45,77,.90) 60%,
    rgba(7,31,56,.92) 100%) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,.10);
  box-shadow: 4px 0 32px rgba(8,40,72,.20) !important;
}

/* ── TOPBAR: glass ── */
.topbar {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(27,126,194,.12) !important;
  box-shadow: 0 1px 20px rgba(27,126,194,.08) !important;
}

/* ── Hlavní obsah: zajistit z-index ── */
.main-content {
  background: transparent !important;
}

/* ── PAGE CONTENT wrapper ── */
.page-content {
  background: transparent !important;
}

/* ── CARDS: glass efekt ── */
.card {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 4px 24px rgba(27,126,194,.07), inset 0 1px 0 rgba(255,255,255,.9) !important;
  border-radius: 14px !important;
  transition: box-shadow .2s, transform .2s;
}
.card:hover {
  box-shadow: 0 8px 32px rgba(27,126,194,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
  transform: translateY(-1px);
}

/* ── MODAL overlay & dialog: glass ── */
#modal-overlay {
  background: rgba(15,23,42,.45) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-dialog,
#modal-dialog {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 24px 64px rgba(8,40,72,.18), inset 0 1px 0 rgba(255,255,255,.95) !important;
  border-radius: 18px !important;
}

.modal-header {
  background: rgba(248,250,252,.6) !important;
  border-bottom: 1px solid rgba(27,126,194,.10) !important;
  border-radius: 18px 18px 0 0 !important;
}

.modal-footer {
  background: rgba(248,250,252,.6) !important;
  border-top: 1px solid rgba(27,126,194,.10) !important;
  border-radius: 0 0 18px 18px !important;
}

/* ── DATA TABLE: glass rows ── */
.data-table {
  background: transparent !important;
  border-radius: 10px;
  overflow: hidden;
}
.data-table thead tr {
  background: rgba(15,23,42,.88) !important;
  backdrop-filter: blur(8px);
}
.data-table tbody tr {
  background: rgba(255,255,255,.55) !important;
  transition: background .15s;
}
.data-table tbody tr:nth-child(even) {
  background: rgba(239,246,255,.60) !important;
}
.data-table tbody tr:hover {
  background: rgba(219,234,254,.80) !important;
}

/* ── FORM INPUTS: glass ── */
.form-input,
.form-select,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(27,126,194,.20) !important;
  backdrop-filter: blur(8px);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-input:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(27,126,194,.50) !important;
  box-shadow: 0 0 0 3px rgba(27,126,194,.12) !important;
  outline: none;
}

/* ── BUTTONS: frosted glass ── */
.btn {
  backdrop-filter: blur(8px);
  transition: all .2s cubic-bezier(.4,0,.2,1) !important;
}
.btn-primary {
  background: linear-gradient(135deg, #1B7EC2 0%, #1568A8 100%) !important;
  box-shadow: 0 4px 14px rgba(27,126,194,.30) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(27,126,194,.40) !important;
  filter: brightness(1.08);
}
.btn-secondary {
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(27,126,194,.20) !important;
  color: var(--blue-700) !important;
}
.btn-secondary:hover {
  background: rgba(255,255,255,.95) !important;
  border-color: rgba(27,126,194,.40) !important;
  transform: translateY(-1px) !important;
}

/* ── BADGES: glass ── */
.badge, [class*="badge-"] {
  backdrop-filter: blur(4px);
}

/* ── ATTENDANCE TABLE: glass rows ── */
.attendance-table tbody tr:hover {
  background: rgba(219,234,254,.70) !important;
}

/* ── DASHBOARD SUMMARY CARDS / STAT BOXES ── */
.stat-card,
[class*="stat-"] {
  background: rgba(255,255,255,.68) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 4px 20px rgba(27,126,194,.08) !important;
  border-radius: 14px !important;
}

/* ── TOAST NOTIFICATIONS: glass ── */
.toast,
[class*="toast-"],
#toast-container > * {
  background: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow: 0 8px 32px rgba(8,40,72,.15) !important;
  border-radius: 12px !important;
}

/* ── HOVER animace na nav-item ── */
.nav-item.active {
  background: linear-gradient(135deg, rgba(27,126,194,.9) 0%, rgba(21,104,168,.95) 100%) !important;
  box-shadow: 0 3px 14px rgba(27,126,194,.45), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter: blur(8px);
}
.nav-item:hover {
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(4px);
}

/* ── PRINT: skryjeme glass efekty pro tisk ── */
@media print {
  body, body::before, body::after {
    background: white !important;
  }
  .card, .modal-dialog, .data-table tbody tr {
    background: white !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
  }
}

/* ── Scrollbar: glass styl ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(241,245,249,.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(27,126,194,.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(27,126,194,.45);
}

/* ── LOGIN CARD: glass ── */
.login-card {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 32px 80px rgba(8,40,72,.35), inset 0 1px 0 rgba(255,255,255,.95) !important;
}