/* ============================================================
   MOBILE MODERN UI - Premium Mobile Experience for SchoolPro
   ============================================================ */

/* Modern Mobile Header */
@media (max-width: 1023px) {
    .app-header {
        background: rgba(255, 255, 255, 0.72) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        padding: 12px 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    }
    
    body.dark-mode .app-header {
        background: rgba(17, 24, 39, 0.75) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    }
    
    .app-header .app-title {
        gap: 10px !important;
    }
    
    .app-header .app-title a {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .app-header .app-title img {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
    }
    
    .app-header .app-title span {
        font-size: 1rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.3px !important;
    }
    
    /* Back button - modern pill */
    .app-header a[title="Kembali ke halaman sebelumnya"] {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        background: #f1f5f9 !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
        transition: all 0.2s ease !important;
    }
    
    .app-header a[title="Kembali ke halaman sebelumnya"]:active {
        transform: scale(0.9);
        background: #e2e8f0 !important;
    }
    
    body.dark-mode .app-header a[title="Kembali ke halaman sebelumnya"] {
        background: #1f2937 !important;
        border-color: #374151 !important;
    }
    
    /* Profile trigger - modern */
    .app-header .profile-trigger {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        border: 2px solid rgba(255, 255, 255, 0.8) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
        transition: all 0.2s ease !important;
    }
    
    .app-header .profile-trigger:active {
        transform: scale(0.92);
    }
    
    body.dark-mode .app-header .profile-trigger {
        border-color: #1f2937 !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    .app-header .profile-trigger img {
        border-radius: 10px !important;
    }
    
    /* Header date/time row - modern compact */
    .app-header > div:last-child {
        font-size: 0.7rem !important;
        gap: 6px !important;
        margin-top: 2px !important;
    }
    
    .app-header > div:last-child > div {
        padding: 3px 10px !important;
        border-radius: 20px !important;
        font-size: 0.68rem !important;
    }
    
    /* Scan button in header */
    .app-header a[title="Rekod Kehadiran"] {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        padding: 0 !important;
    }
    
    .app-header a[title="Rekod Kehadiran"] i {
        font-size: 1.3rem !important;
    }
    
    /* Notification Badge */
    .app-header .notif-badge {
        width: 15px !important;
        height: 15px !important;
        font-size: 8px !important;
        top: -3px !important;
        right: -3px !important;
        border-width: 1.5px !important;
    }
}

/* Modern Bottom Navigation */
@media (max-width: 1023px) {
    body .bottom-nav {
        border-radius: 22px 22px 0 0 !important;
        background: rgba(255, 255, 255, 0.88) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08) !important;
        height: 68px !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    
    body.dark-mode .bottom-nav {
        background: rgba(17, 24, 39, 0.88) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3) !important;
    }
    
    body .bottom-nav .nav-item {
        gap: 2px !important;
    }
    
    body .bottom-nav .nav-item img {
        width: 34px !important;
        height: 34px !important;
        margin-bottom: 0 !important;
        filter: grayscale(0.3);
        opacity: 0.75;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    
    body .bottom-nav .nav-item i {
        font-size: 1.6rem !important;
    }
    
    body .bottom-nav .nav-item.active img {
        filter: grayscale(0);
        opacity: 1;
        transform: translateY(-3px) scale(1.1);
    }
    
    body .bottom-nav .nav-item span {
        font-size: 12px !important;
        font-weight: 850 !important;
        letter-spacing: -0.3px !important;
        color: #64748b !important;
        transition: all 0.3s ease !important;
    }
    
    body .bottom-nav .nav-item.active span {
        color: var(--primary) !important;
        font-weight: 800 !important;
    }
    
    body.dark-mode .bottom-nav .nav-item span {
        color: #9ca3af !important;
    }
    
    body.dark-mode .bottom-nav .nav-item.active span {
        color: var(--primary) !important;
    }
    
    /* Home icon - modern floating */
    body .bottom-nav .nav-home {
        transform: translateY(-20px) !important;
    }
    
    body .home-icon-bg {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
        border: 5px solid #f1f5f9 !important;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    
    body.dark-mode .home-icon-bg {
        border-color: #0b0f19 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    }
    
    body .bottom-nav .nav-home:active .home-icon-bg {
        transform: scale(0.9) !important;
    }
    
    body .bottom-nav .nav-home img {
        width: 38px !important;
        height: 38px !important;
        filter: none !important;
        opacity: 1 !important;
    }
    
    body .bottom-nav .nav-home i {
        font-size: 1.8rem !important;
    }
    
    /* Curved swoop - refined */
    body .home-icon-bg::before,
    body .home-icon-bg::after {
        width: 22px !important;
        height: 22px !important;
    }
    
    body .home-icon-bg::before {
        left: -27px !important;
        border-top-right-radius: 22px !important;
        box-shadow: 10px -10px 0 0 #f1f5f9 !important;
    }
    
    body .home-icon-bg::after {
        right: -27px !important;
        border-top-left-radius: 22px !important;
        box-shadow: -10px -10px 0 0 #f1f5f9 !important;
    }
    
    body.dark-mode .home-icon-bg::before {
        box-shadow: 10px -10px 0 0 #0b0f19 !important;
    }
    
    body.dark-mode .home-icon-bg::after {
        box-shadow: -10px -10px 0 0 #0b0f19 !important;
    }
    
    body .bottom-nav .nav-item.nav-home span {
        bottom: -18px !important;
        font-size: 12px !important;
    }
}

/* Modern Dashboard - Hero Banner */
@media (max-width: 1023px) {
    .hero-banner {
        padding: 32px 18px 70px !important;
        border-bottom-left-radius: 28px !important;
        border-bottom-right-radius: 28px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
    }
    
    .hero-banner .hero-greeting-h1 {
        font-size: 1.5rem !important;
    }
    
    .hero-banner .hero-greeting-h1 span:first-child {
        font-size: 0.95rem !important;
    }
    
    .hero-banner .hero-top-row {
        margin-bottom: 20px !important;
    }
    
    .hero-banner .hero-top-row > div:first-child {
        max-width: 75% !important;
    }
    
    .hero-banner .hero-top-row > div:last-child {
        width: 60px !important;
        height: 60px !important;
        border-radius: 18px !important;
        border-width: 2.5px !important;
    }
    
    .hero-banner .hero-date-time-row {
        gap: 8px !important;
    }
    
    .hero-banner .hero-date-time-row > div {
        padding: 6px 12px !important;
        border-radius: 16px !important;
        font-size: 0.7rem !important;
    }
    
    .hero-banner .hero-date-time-row i {
        font-size: 0.95rem !important;
    }
    
    .hero-banner .hero-status-box {
        margin-top: 10px !important;
    }
    
    .hero-banner .hero-status-box > div {
        padding: 8px 14px !important;
        border-radius: 14px !important;
        font-size: 0.72rem !important;
    }
    
    /* Badge pills in hero */
    .hero-banner [style*="border-radius: 24px"] {
        padding: 5px 10px !important;
        font-size: 0.62rem !important;
    }
}

/* Modern Floating Menu Card */
@media (max-width: 1023px) {
    .floating-menu-card {
        margin: -50px 14px 20px !important;
        border-radius: 24px !important;
        padding: 20px 14px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }
    
    .floating-menu-card::before {
        content: "MENU UTAMA";
        display: block;
        font-size: 0.85rem;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 15px;
        padding-left: 5px;
    }
    
    .menu-grid {
        gap: 10px !important;
    }
    
    .menu-item {
        padding: 12px 4px !important;
        border-radius: 16px !important;
        transition: all 0.2s ease;
    }
    
    .menu-item .menu-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 0 !important;
        margin-bottom: 6px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    
    .menu-item:active .menu-icon {
        transform: scale(0.9) !important;
    }
    
    .menu-item .menu-label {
        font-size: var(--menu-size) !important;
        font-weight: 800 !important;
        color: #1e293b !important;
        line-height: 1.1 !important;
        letter-spacing: -0.2px !important;
    }
    
    /* Toggle button */
    .floating-menu-card > div:last-child {
        margin-top: 10px !important;
        padding-top: 8px !important;
    }
    
    .floating-menu-card > div:last-child a {
        font-size: 0.75rem !important;
        padding: 8px 20px !important;
        border-radius: 20px !important;
        background: #f8fafc !important;
        transition: all 0.2s ease !important;
    }
    
    .floating-menu-card > div:last-child a:active {
        background: #e2e8f0 !important;
        transform: scale(0.95);
    }
    
    body.dark-mode .floating-menu-card > div:last-child a {
        background: #1f2937 !important;
    }
}

/* Modern Quick Cards */
@media (max-width: 1023px) {
    .quick-actions-scroll {
        gap: 12px !important;
        padding: 0 14px 20px !important;
        margin: 0 -14px !important;
    }
    
    .quick-card {
        flex: 0 0 250px !important;
        border-radius: 20px !important;
        padding: 16px !important;
        gap: 12px !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04) !important;
    }
    
    .quick-card-img {
        width: 56px !important;
        height: 56px !important;
        border-radius: 14px !important;
        font-size: 1.5rem !important;
    }
    
    .quick-card-content h4 {
        font-size: 0.85rem !important;
    }
    
    .quick-card-content p {
        font-size: 0.68rem !important;
    }
    
    .quick-card-content a {
        font-size: 0.68rem !important;
    }
}

/* Modern Section Headers */
@media (max-width: 1023px) {
    .page-content h3 {
        font-size: 0.95rem !important;
        font-weight: 850 !important;
        letter-spacing: -0.3px !important;
    }
    
    .page-content > div > h3,
    .page-content > div > div > h3 {
        margin-bottom: 10px !important;
    }
}

/* Modern Premium Cards */
@media (max-width: 1023px) {
    .premium-card {
        border-radius: 20px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.9) !important;
    }
    
    .premium-card:hover {
        transform: none !important;
    }
    
    .premium-card:active {
        transform: scale(0.98) !important;
    }
}

/* Modern Page Content Spacing */
@media (max-width: 1023px) {
    .page-content {
        padding: 0 14px 90px !important;
    }
    
    .dashboard-wrapper {
        margin: -20px -14px 0 !important;
    }
}

/* Modern Login Page - Mobile */
@media (max-width: 1023px) {
    .login-split-container {
        min-height: 100vh;
        background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }
    
    .login-form-side {
        padding: 20px 16px !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    .login-form-container {
        max-width: 100% !important;
    }
    
    .mobile-logo-header {
        margin-bottom: 24px !important;
    }
    
    .mobile-logo-header > div:first-child {
        width: 72px !important;
        height: 72px !important;
        border-radius: 20px !important;
        margin-bottom: 14px !important;
        box-shadow: 0 8px 24px rgba(27, 79, 237, 0.08) !important;
    }
    
    .mobile-logo-header h1 {
        font-size: 1.6rem !important;
    }
    
    .mobile-logo-header h3 {
        font-size: 0.95rem !important;
    }
    
    .mobile-logo-header p {
        font-size: 0.8rem !important;
        margin-bottom: 16px !important;
    }
    
    .login-input {
        padding: 13px 16px 13px 44px !important;
        border-radius: 14px !important;
        font-size: 0.9rem !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    }
    
    .login-input:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 4px rgba(27, 79, 237, 0.1) !important;
    }
    
    .login-btn {
        padding: 14px 20px !important;
        border-radius: 14px !important;
        font-size: 0.9rem !important;
    }
    
    .login-options {
        margin-bottom: 20px !important;
    }
    
    .divider {
        margin: 20px 0 !important;
    }
    
    .register-prompt {
        margin-top: 20px !important;
        font-size: 0.8rem !important;
    }
    
    .mobile-ad {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 16px !important;
        padding: 18px !important;
        min-height: 140px !important;
    }
    
    .mobile-ad .ad-title {
        font-size: 0.9rem !important;
    }
    
    .mobile-ad .ad-desc {
        font-size: 0.75rem !important;
    }
}

/* Modern Profile Menu */
@media (max-width: 1023px) {
    #profile-menu {
        border-radius: 20px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        overflow: hidden !important;
    }
    
    #profile-menu > div:first-child {
        padding: 14px !important;
    }
    
    #profile-menu a {
        padding: 12px 14px !important;
        font-size: 0.85rem !important;
        transition: all 0.2s ease !important;
    }
    
    #profile-menu a:active {
        background: #f8fafc !important;
    }
    
    body.dark-mode #profile-menu a:active {
        background: #1f2937 !important;
    }
}

/* Modern Toast & Alert Animations */
@media (max-width: 1023px) {
    body .swal2-popup {
        border-radius: 24px !important;
        padding: 20px 18px !important;
    }
    
    body .swal2-title {
        font-size: 1.05rem !important;
    }
    
    body .swal2-html-container {
        font-size: 0.85rem !important;
    }
    
    body .swal2-confirm,
    body .swal2-cancel {
        padding: 12px !important;
        border-radius: 14px !important;
        font-size: 0.85rem !important;
    }
}

/* Modern Scrollbar & Touch Feedback */
@media (max-width: 1023px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    .page-content {
        scroll-behavior: smooth;
    }
    
    /* Smooth page transitions */
    .page-content > * {
        animation: mobileFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    @keyframes mobileFadeIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Modern Dark Mode Enhancements */
@media (max-width: 1023px) {
    body.dark-mode .floating-menu-card {
        background: rgba(17, 24, 39, 0.85) !important;
        border-color: rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important;
    }
    
    body.dark-mode .premium-card {
        background: rgba(17, 24, 39, 0.75) !important;
        border-color: rgba(255, 255, 255, 0.05) !important;
    }
    
    body.dark-mode .quick-card {
        background: #111827 !important;
        border-color: #1f2937 !important;
    }
    
    body.dark-mode .menu-item {
        background: #1e293b !important;
        border-color: #334155 !important;
    }

    body.dark-mode .menu-item .menu-label {
        color: #f3f4f6 !important;
    }
    
    body.dark-mode .login-form-side {
        background: transparent !important;
    }
    
    body.dark-mode .login-input {
        background: #1f2937 !important;
        border-color: #374151 !important;
        color: #f3f4f6 !important;
    }
    
    body.dark-mode .login-input::placeholder {
        color: #6b7280 !important;
    }
    
    body.dark-mode .mobile-logo-header h1 {
        color: #f3f4f6 !important;
    }
    
    body.dark-mode .mobile-logo-header h3 {
        color: #e5e7eb !important;
    }
    
    body.dark-mode .mobile-logo-header p {
        color: #9ca3af !important;
    }
    
    body.dark-mode .login-split-container {
        background: #0b0f19 !important;
    }
    
    body.dark-mode .divider::before {
        border-color: #1f2937 !important;
    }
    
    body.dark-mode .divider span {
        background: #0b0f19 !important;
        color: #6b7280 !important;
    }
    
    body.dark-mode .register-prompt {
        color: #9ca3af !important;
    }
    
    body.dark-mode .mobile-ad {
        background: #111827 !important;
        border-color: #1f2937 !important;
    }
    
    body.dark-mode .mobile-ad .ad-title {
        color: #f3f4f6 !important;
    }
    
    body.dark-mode .mobile-ad .ad-desc {
        color: #9ca3af !important;
    }
}

/* Modern Safe Area Support */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 1023px) {
        .bottom-nav {
            padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        }
        
        .page-content {
            padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* Modern Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .page-content > * {
        animation: none !important;
    }
    
    .bottom-nav .nav-item img,
    .bottom-nav .nav-item i {
        transition: none !important;
    }
}

/* ============================================================
   AUDIT FIX (P2): Responsive overflow guards
   1) Modul menggunakan margin negatif (edge-to-edge) untuk desktop.
      Pada tablet/mobile ia menyebabkan horizontal overflow ~6px-28px.
   2) Jadual lebar dibalut dalam .table-scroll oleh script global
      (index.php) supaya boleh scroll mendatar dengan terkawal.
   ============================================================ */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

@media (max-width: 1023px) {
    .container-main,
    .koku-container,
    .birthday-container,
    .pbdujian-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* ============================================================
   AUDIT QA 2026 — MOBILE OVERFLOW GUARDS
   1) Neutralize desktop "full-bleed" negative-margin wrappers
      (margin-left/right: -14px / -20px dsb.) pada skrin <= 768px.
   2) Cegah tatalan melintang tidak sengaja pada peringkat dokumen.
   ============================================================ */
@media (max-width: 768px) {
    [style*="margin-left: -"],
    [style*="margin-left:-"],
    [style*="margin: -"],
    [style*="margin:-"],
    [style*="margin: 0 -"],
    [style*="margin:0 -"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    body {
        overflow-x: hidden;
    }
}