/* Custom styles for JHS Attendance System - theme + Sidebar Registry v3 restore */
.theme-body {
    background: var(--theme-page-bg, #f1f5f9);
    color: var(--theme-text, #0f172a);
    font-family: var(--theme-font-family, Inter, Arial, sans-serif);
}

.theme-sidebar {
    background: var(--theme-sidebar, var(--theme-primary, #0f172a));
}

.theme-nav-link:hover,
.theme-nav-link.active,
.sidebar-item.active {
    background: var(--theme-primary-hover, #1e293b);
}

.theme-card {
    background: var(--theme-card-bg, #ffffff);
    border-top: 4px solid var(--theme-accent, #2563eb);
}

.theme-button {
    background: var(--theme-accent, #2563eb);
    color: #ffffff;
    border-radius: var(--theme-button-radius, 0.75rem);
}
.theme-button:hover { filter: brightness(0.92); }
.theme-badge { background: var(--theme-accent-soft, #dbeafe); color: var(--theme-text, #0f172a); }
.theme-text { color: var(--theme-text, #0f172a); }
.theme-muted { color: var(--theme-muted-text, #64748b); }
.theme-border { border-color: var(--theme-accent, #2563eb); }
.theme-header { background: var(--theme-header, #ffffff); }

.theme-effect-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
    opacity: 0.7;
}
.theme-effect-layer::before,
.theme-effect-layer::after {
    position: absolute;
    inset: 0;
    display: block;
    font-size: 24px;
    line-height: 48px;
    white-space: pre-wrap;
    animation: theme-fall 18s linear infinite;
}
.theme-effect-layer::after { animation-duration: 24s; animation-delay: -8s; opacity: .55; }
.theme-effect-snow .theme-effect-layer::before,
.theme-effect-snow .theme-effect-layer::after { content: "❄  ❅   ❄    ❆  ❄\A   ❅  ❄   ❆    ❄  ❅\A ❄    ❆  ❅   ❄   ❆\A   ❄  ❅    ❄  ❆"; color: #ffffff; text-shadow: 0 0 2px #94a3b8; }
.theme-effect-hearts .theme-effect-layer::before,
.theme-effect-hearts .theme-effect-layer::after { content: "♡   ♥    ♡  ♥   ♡\A   ♥  ♡   ♥    ♡\A ♡    ♥  ♡   ♥"; color: #fb7185; }
.theme-effect-bubbles .theme-effect-layer::before,
.theme-effect-bubbles .theme-effect-layer::after { content: "○   ◌    ○  ◯   ◌\A   ◯  ○   ◌    ○\A ◌    ○  ◯   ◌"; color: #38bdf8; }
.theme-effect-bats .theme-effect-layer::before,
.theme-effect-bats .theme-effect-layer::after { content: "🦇      🦇   🦇\A    🦇        🦇\A 🦇    🦇"; color: #111827; }
.theme-effect-confetti .theme-effect-layer::before,
.theme-effect-confetti .theme-effect-layer::after { content: "✦  ✧  ✹  ✦  ✧\A  ✹  ✦  ✧  ✹\A ✧  ✹  ✦  ✧"; color: var(--theme-accent, #f59e0b); }
@keyframes theme-fall { from { transform: translateY(-35%) translateX(0); } to { transform: translateY(100%) translateX(8%); } }

/* Sidebar Framework v3 / Registry */
.sidebar-v3 {
    width: 18rem;
    height: 100vh;
    flex-direction: column;
    overflow: hidden;
    transition: width .22s ease, transform .22s ease;
}
.sidebar-v3-header,
.sidebar-v3-footer {
    flex: 0 0 auto;
    padding: 1rem;
}
.sidebar-v3-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 1rem 0.75rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.45) rgba(255,255,255,.08);
}
.sidebar-v3-menu::-webkit-scrollbar { width: 8px; }
.sidebar-v3-menu::-webkit-scrollbar-track { background: rgba(255,255,255,.08); border-radius: 999px; }
.sidebar-v3-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.45); border-radius: 999px; }
.sidebar-v3-menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.65); }
.sidebar-search { outline: none; border: 1px solid rgba(255,255,255,.2); }
.sidebar-search:focus { border-color: var(--theme-accent, #2563eb); box-shadow: 0 0 0 2px rgba(37,99,235,.25); }
.sidebar-item { display:flex !important; align-items:center; gap:.65rem; min-height:2.5rem; white-space:nowrap; }
.sidebar-icon { width:1.5rem; min-width:1.5rem; display:inline-flex; justify-content:center; }
.sidebar-group-toggle { cursor:pointer; border-radius:.5rem; }
.sidebar-group-toggle:hover { background: rgba(255,255,255,.08); }
.sidebar-group.is-collapsed .sidebar-group-items { display:none; }
.sidebar-chevron { transition: transform .18s ease; }
.sidebar-group.is-collapsed .sidebar-chevron { transform: rotate(-90deg); }
.sidebar-search-hidden { display:none !important; }

@media (min-width:768px) {
    body.sidebar-expanded main { margin-left:18rem !important; }
    body.sidebar-collapsed main { margin-left:5rem !important; }
    body.sidebar-collapsed #appSidebar { width:5rem !important; }
    body.sidebar-collapsed #appSidebar .sidebar-label,
    body.sidebar-collapsed #appSidebar .sidebar-section,
    body.sidebar-collapsed #appSidebar .sidebar-search-wrap { display:none !important; }
    body.sidebar-collapsed #appSidebar .sidebar-v3-header,
    body.sidebar-collapsed #appSidebar .sidebar-v3-footer,
    body.sidebar-collapsed #appSidebar .sidebar-v3-menu { padding-left:.75rem; padding-right:.75rem; }
    body.sidebar-collapsed #appSidebar .sidebar-item { justify-content:center; }
}
@media (max-width:767px) {
    .sidebar-v3 { width:18rem !important; transform: translateX(-105%); display:flex !important; }
    body.mobile-sidebar-open .sidebar-v3 { transform: translateX(0); }
    body.mobile-sidebar-open #sidebarBackdrop { display:block !important; }
    main { margin-left:0 !important; padding-top:4rem; }
}

/* PWA Foundation */
.pwa-install-button {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 10000;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--theme-accent, #2563eb);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.24);
    cursor: pointer;
}
.pwa-install-button:hover { filter: brightness(0.95); }
.pwa-network-status {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 10001;
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-size: 0.875rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.24);
}
@media (max-width:640px) {
    .pwa-install-button { right: 0.75rem; bottom: 0.75rem; padding: 0.65rem 0.85rem; }
    .pwa-network-status { bottom: 4.25rem; font-size: 0.8rem; }
}