/* ═══════════════════════════════════════════
   SEMS – Mobile / Phone Optimizations
   ═══════════════════════════════════════════ */

/* ── Sidebar drawer on phone ── */
@media (max-width: 767px) {
    body:not(.sidebar-closed) #content.main-content,
    body.sidebar-closed #content.main-content,
    #content.main-content {
        margin-left: 0 !important;
    }

    body:not(.sidebar-closed) .header-container.fixed-top,
    body.sidebar-closed .header-container.fixed-top,
    .header-container.fixed-top {
        left: 0 !important;
        right: 0 !important;
    }

    .sidebar-wrapper.sems-sidebar-modern {
        width: 248px !important;
        z-index: 1050;
        transition: left 0.3s ease;
    }

    .main-container.sidebar-closed .sidebar-wrapper.sems-sidebar-modern {
        left: -270px !important;
    }

    .main-container:not(.sidebar-closed) .sidebar-wrapper.sems-sidebar-modern {
        left: 0 !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }

    .main-container:not(.sidebar-closed) .sems-sidebar-modern .sidebar-brand-text,
    .main-container:not(.sidebar-closed) .sems-sidebar-modern .nav-label,
    .main-container:not(.sidebar-closed) .sems-sidebar-modern .sidebar-user-meta {
        display: flex !important;
    }

    .main-container:not(.sidebar-closed) .sems-sidebar-modern .nav-group-label {
        display: flex !important;
    }

    .main-container:not(.sidebar-closed) .sems-sidebar-modern .nav-badge,
    .main-container:not(.sidebar-closed) .sems-sidebar-modern .nav-dot,
    .main-container:not(.sidebar-closed) .sems-sidebar-modern .sidebar-user-menu {
        display: flex !important;
    }

    .main-container:not(.sidebar-closed) .sems-sidebar-modern .menu-categories li.menu > a {
        justify-content: flex-start !important;
        padding: 8px 12px !important;
        min-height: 38px !important;
    }

    .overlay.show {
        display: block !important;
        opacity: 0.45;
        background: #0f172a;
        z-index: 1040 !important;
    }
}

/* ── Top header compact ── */
@media (max-width: 767px) {
    .header-container .navbar {
        height: 50px !important;
        padding: 0 8px !important;
    }

    .header-container .theme-brand .logo-area a.nav-link:not(:has(img)),
    .header-container .theme-brand a.nav-link.pr-4 {
        display: none !important;
    }

    .header-container .theme-brand img,
    .header-container .navbar-logo {
        width: 36px !important;
        height: 36px !important;
    }

    .navbar-item.flex-row {
        gap: 2px;
    }

    #pwa-install-btn {
        padding: 4px 8px !important;
        font-size: 0.75rem;
    }

    #pwa-install-btn .d-none.d-md-inline,
    #pwa-install-btn span {
        display: none !important;
    }

    .user-profile-dropdown .nav-link.user span {
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.8rem;
    }

    .user-profile-dropdown .avatar-sm {
        width: 28px !important;
        height: 28px !important;
    }

    .fullscreen-dropdown {
        display: none !important;
    }

    #content.main-content {
        margin-top: 50px !important;
    }
}

/* ── Sub-header / breadcrumb ── */
@media (max-width: 767px) {
    .sub-header-container {
        padding: 0 8px !important;
    }

    .sub-header-container .navbar {
        min-height: 44px !important;
        padding: 6px 0 !important;
        flex-wrap: nowrap;
    }

    .sub-header-container .navbar .sidebarCollapse {
        padding: 0 10px 0 0 !important;
        flex-shrink: 0;
    }

    .sub-header-container .page-header {
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }

    .sub-header-container .breadcrumb-one .breadcrumb {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .sub-header-container .breadcrumb-one .breadcrumb-item:not(.active) {
        display: none;
    }

    .sub-header-container .breadcrumb-one .breadcrumb-item.active {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .sub-header-container .breadcrumb-one .breadcrumb-item.active span {
        font-size: 0.72rem;
        letter-spacing: 0.02em;
    }

    .sub-header-container .center-side-filter {
        padding-right: 0 !important;
        flex-shrink: 0;
    }

    .sub-header-container .center-side-filter .nav-link {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }

    .subheader {
        padding: 8px 12px !important;
        margin-top: 0.25rem !important;
        margin-bottom: 0.75rem !important;
    }

    .subheader-title {
        font-size: 1rem !important;
        color: #2A3C6B !important;
        text-shadow: none !important;
    }
}

/* ── Content area spacing ── */
@media (max-width: 767px) {
    .layout-px-spacing {
        padding: 0 10px !important;
        min-height: auto !important;
    }

    .widget-content-area {
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }

    .table-header {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
    }

    .layout-spacing {
        padding: 0 !important;
    }
}

/* ── Responsive tables → cards on mobile ── */
@media (max-width: 767px) {
    .sems-table-responsive {
        overflow: visible !important;
    }

    .sems-table-responsive table.sems-mobile-ready {
        border: none;
    }

    .sems-table-responsive table.sems-mobile-ready thead {
        display: none;
    }

    .sems-table-responsive table.sems-mobile-ready tbody tr {
        display: block;
        background: #fff;
        border: 1px solid #e8ecf4;
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 4px 14px;
        box-shadow: 0 1px 4px rgba(42, 60, 107, 0.06);
    }

    .sems-table-responsive table.sems-mobile-ready tbody tr:hover {
        background: #fff;
    }

    .sems-table-responsive table.sems-mobile-ready tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        text-align: right !important;
        font-size: 0.85rem;
        word-break: break-word;
    }

    .sems-table-responsive table.sems-mobile-ready tbody td:last-child {
        border-bottom: none !important;
    }

    .sems-table-responsive table.sems-mobile-ready tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #64748b;
        text-align: left;
        flex-shrink: 0;
        max-width: 45%;
    }

    .sems-table-responsive table.sems-mobile-ready tbody td:empty::after {
        content: "—";
        color: #cbd5e1;
    }

    /* DataTables controls stack */
    .sems-table-responsive .dataTables_wrapper .row:first-child {
        flex-direction: column;
        gap: 8px;
    }

    .sems-table-responsive .dataTables_wrapper .dataTables_filter,
    .sems-table-responsive .dataTables_wrapper .dataTables_length {
        text-align: left !important;
        width: 100%;
    }

    .sems-table-responsive .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .sems-table-responsive .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .sems-table-responsive .dt-buttons .btn {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }
}

/* ── Dashboard mobile tweaks ── */
@media (max-width: 767px) {
    .student-dashboard {
        padding: 12px 10px 24px !important;
    }

    .sd-welcome-row {
        flex-direction: column;
        margin-bottom: 16px;
    }

    .sd-welcome-title {
        font-size: 1.25rem !important;
    }

    .sd-welcome-sub {
        font-size: 0.85rem;
    }

    .sd-semester-pill {
        width: 100%;
        justify-content: center;
    }

    .sd-kpi-card {
        padding: 14px;
    }

    .sd-kpi-value {
        font-size: 0.9rem;
    }

    .sd-service-card {
        padding: 14px 12px;
    }

    .sd-service-title {
        font-size: 0.85rem;
    }

    .sd-panel {
        padding: 16px;
    }
}

/* ── Forms & buttons touch-friendly ── */
@media (max-width: 767px) {
    .btn {
        min-height: 40px;
    }

    .form-control,
    .form-select {
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    .modal-dialog {
        margin: 10px;
    }
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 767px) {
        .header-container.fixed-top {
            padding-top: env(safe-area-inset-top);
        }

        .layout-px-spacing {
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        }
    }
}