/* ============================================================
   global.css — Cancer Expert System (Glassmorphism Edition)
   Semua elemen shared: sidebar, sweetalert, scrollbar, dll
   ============================================================ */

/* ── Loading Overlay (shared pages) ── */
#loadingOverlay {
    position: fixed; inset: 0;
    background: rgba(5,13,26,0.80);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#loadingOverlay.show { display: flex; }
.loading-spinner {
    width: 52px; height: 52px;
    border: 3px solid rgba(0,212,184,0.15);
    border-top: 3px solid #00d4b8;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
.loading-text { margin-top:1rem; color:#00d4b8; font-weight:700; font-size:0.95rem; animation:pulse 1.2s ease-in-out infinite; }
.loading-sub  { color:rgba(255,255,255,0.4); font-size:0.82rem; margin-top:0.3rem; }
.loading-bar-wrap { width:180px; height:3px; background:rgba(255,255,255,0.06); border-radius:2px; margin-top:1rem; overflow:hidden; }
.loading-bar-fill { height:3px; background:linear-gradient(90deg,#00d4b8,#7c3aed); border-radius:2px; animation:loadBar 1.5s ease-in-out infinite; }

@keyframes spin    { to{ transform:rotate(360deg); } }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:0.45} }
@keyframes loadBar { 0%{width:0;margin-left:0} 60%{width:80%;margin-left:0} 100%{width:0;margin-left:100%} }

/* ── SweetAlert2 — Glass Dark ── */
.swal2-popup {
    background: rgba(9,20,38,0.85) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07) !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    padding: 2rem !important;
    color: white !important;
}
.swal2-title         { font-size:1.2rem !important; font-weight:800 !important; color:white !important; }
.swal2-html-container{ font-size:0.88rem !important; color:rgba(255,255,255,0.5) !important; line-height:1.6 !important; }
.swal2-confirm       { background:#00d4b8 !important; color:#050d1a !important; border-radius:12px !important; font-weight:700 !important; padding:11px 30px !important; border:none !important; box-shadow:0 4px 20px rgba(0,212,184,0.35) !important; font-size:0.88rem !important; }
.swal2-cancel        { background:rgba(255,255,255,0.07) !important; color:rgba(255,255,255,0.55) !important; border-radius:12px !important; font-weight:600 !important; padding:11px 30px !important; border:1px solid rgba(255,255,255,0.12) !important; font-size:0.88rem !important; }
.swal2-confirm:hover { transform:translateY(-2px) !important; box-shadow:0 8px 30px rgba(0,212,184,0.5) !important; }
.swal2-cancel:hover  { background:rgba(255,255,255,0.12) !important; }
.swal2-actions       { gap:10px !important; margin-top:1.5rem !important; }
.swal2-icon          { margin:0.8rem auto 0.4rem !important; }
.swal2-confirm.swal2-danger-btn  { background:linear-gradient(135deg,#c0392b,#e74c3c) !important; box-shadow:0 4px 20px rgba(192,57,43,0.35) !important; color:white !important; }
.swal2-confirm.swal2-logout-btn  { background:linear-gradient(135deg,#7b1fa2,#9c27b0) !important; color:white !important; }
.swal2-confirm.swal2-warning-btn { background:linear-gradient(135deg,#e67e22,#f39c12) !important; color:white !important; }

/* ── Sidebar Toggle (Desktop) ── */
#sidebarCollapseBtn {
    position: fixed;
    top: 50%;
    left: var(--sidebar-w, 260px);
    transform: translateY(-50%);
    width: 22px; height: 44px;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
    border-left: none;
    border-radius: 0 12px 12px 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 1002;
    transition: left 0.3s ease, background 0.2s;
    color: rgba(255,255,255,0.5); font-size: 0.65rem;
    box-shadow: 3px 0 12px rgba(0,0,0,0.2);
}
#sidebarCollapseBtn:hover { background:rgba(0,212,184,0.15); color:#00d4b8; border-color:rgba(0,212,184,0.3); }
body.sidebar-collapsed #sidebarCollapseBtn { left: 0; }
body.sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-w,260px))); }
body.sidebar-collapsed .main-content { margin-left: 0 !important; transition: margin-left 0.3s ease; }
.sidebar { transition: transform 0.3s ease !important; }
.main-content { transition: margin-left 0.3s ease !important; }
@media (max-width:991.98px) {
    #sidebarCollapseBtn { display: none !important; }
}

/* ── Mobile Bottom Nav ── */
.mobile-bottom-nav {
    display: none;
    position: fixed; bottom:0; left:0; right:0;
    background: rgba(5,13,26,0.80);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.10);
    z-index: 998;
    padding: 6px 0 env(safe-area-inset-bottom,0px);
    box-shadow: 0 -4px 30px rgba(0,0,0,0.3);
}
.mobile-bottom-nav a {
    flex:1; display:flex; flex-direction:column;
    align-items:center; gap:2px;
    color:rgba(255,255,255,0.35); text-decoration:none;
    font-size:0.62rem; padding:6px 2px;
    transition:0.2s;
}
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover { color:#00d4b8; }
.mobile-bottom-nav a i { font-size:1.1rem; }
@media (max-width:991.98px) {
    .mobile-bottom-nav { display:flex; }
    .content-area { padding-bottom: 75px !important; }
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width:5px; height:5px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0.03); border-radius:3px; }
::-webkit-scrollbar-thumb { background:rgba(0,212,184,0.3); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#00d4b8; }

/* ── Mobile Improvements ── */
@media (max-width:576px) {
    .form-control, .form-select { min-height:44px; font-size:16px; }
    .btn { min-height:40px; }
    .modal-dialog { margin:0.5rem; }
    .modal-content { border-radius:16px; }
    .content-area { padding:0.75rem !important; }
    .table-card { border-radius:12px; }
    .form-card  { border-radius:12px; }
}

/* ── Focus ring ── */
.form-control:focus, .form-select:focus, .btn:focus {
    outline:none;
    box-shadow:0 0 0 3px rgba(0,212,184,0.18) !important;
}

/* ── Smooth page entry ── */
body { animation: pgFadeIn 0.3s ease; }
@keyframes pgFadeIn { from{opacity:0.6} to{opacity:1} }

/* ── Hover lift utility ── */
.hover-lift { transition:transform 0.25s ease,box-shadow 0.25s ease; }
.hover-lift:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.25) !important; }