/* ============================================================
   global.css — Cancer Expert System
   Full mobile responsive + sidebar toggle + enhanced UI/UX
   ============================================================ */

/* ── Loading Overlay ── */
#loadingOverlay {
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.94);
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
}
#loadingOverlay.show { display: flex; }
.loading-spinner {
    width: 56px; height: 56px;
    border: 5px solid #e8f5e9;
    border-top: 5px solid #1a6b3a;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
.loading-text { margin-top:1rem; color:#1a6b3a; font-weight:700; font-size:1rem; animation:pulse 1.2s ease-in-out infinite; }
.loading-sub  { color:#999; font-size:0.82rem; margin-top:0.3rem; }
.loading-bar-wrap { width:180px; height:4px; background:#e8f5e9; border-radius:2px; margin-top:1rem; overflow:hidden; }
.loading-bar-fill { height:4px; background:linear-gradient(90deg,#1a6b3a,#28a745); 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 Custom ── */
.swal2-popup        { border-radius:20px!important; font-family:'Segoe UI',sans-serif!important; box-shadow:0 25px 60px rgba(0,0,0,0.18)!important; padding:2rem!important; }
.swal2-title        { font-size:1.25rem!important; font-weight:800!important; color:#1a1a2e!important; }
.swal2-html-container { font-size:0.9rem!important; color:#555!important; line-height:1.6!important; }
.swal2-confirm      { background:linear-gradient(135deg,#1a6b3a,#28a745)!important; border-radius:12px!important; font-weight:700!important; padding:11px 30px!important; border:none!important; box-shadow:0 4px 15px rgba(26,107,58,0.35)!important; font-size:0.9rem!important; }
.swal2-cancel       { background:#f1f3f5!important; color:#555!important; border-radius:12px!important; font-weight:700!important; padding:11px 30px!important; border:none!important; font-size:0.9rem!important; }
.swal2-confirm:hover{ transform:translateY(-2px)!important; }
.swal2-cancel:hover { background:#e9ecef!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 15px rgba(192,57,43,0.35)!important; }
.swal2-confirm.swal2-logout-btn  { background:linear-gradient(135deg,#7b1fa2,#9c27b0)!important; }
.swal2-confirm.swal2-warning-btn { background:linear-gradient(135deg,#e67e22,#f39c12)!important; }

/* ── Sidebar Toggle (Desktop) ── */
#sidebarCollapseBtn {
    position: fixed;
    top: 50%;
    left: var(--sidebar-w, 260px);
    transform: translateY(-50%);
    width: 22px; height: 44px;
    background: white;
    border: 1.5px solid #ddd;
    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: #888; font-size: 0.65rem;
    box-shadow: 3px 0 12px rgba(0,0,0,0.08);
}
#sidebarCollapseBtn:hover { background:#1a6b3a; color:white; border-color:#1a6b3a; }

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: white;
    border-top: 1px solid #eee;
    z-index: 998;
    padding: 6px 0 env(safe-area-inset-bottom,0px);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.mobile-bottom-nav a {
    flex:1; display:flex; flex-direction:column;
    align-items:center; gap:2px;
    color:#aaa; text-decoration:none;
    font-size:0.62rem; padding:6px 2px;
    transition:0.2s;
}
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover { color:#1a6b3a; }
.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:6px; height:6px; }
::-webkit-scrollbar-track { background:#f5f5f5; border-radius:3px; }
::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#1a6b3a; }

/* ── 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(26,107,58,0.15)!important;
}

/* ── Smooth animations ── */
body { animation: pgFadeIn 0.25s ease; }
@keyframes pgFadeIn { from{opacity:0.7} to{opacity:1} }
.hover-lift { transition:transform 0.25s ease,box-shadow 0.25s ease; }
.hover-lift:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,0.1)!important; }