/**
 * SNEC IMS — unified responsive fixes (all portals + public pages)
 * Load LAST after other stylesheets.
 */

/* ==================== GLOBAL ==================== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
video,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

.table-scroll,
.table-responsive,
.dataTables_wrapper,
.az-data-table,
.content-area .table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==================== DASHBOARD PORTALS (admin / institution / student / teacher) ==================== */

@media (max-width: 1024px) {
    /* Override snec-template tablet sidebar-as-grid for portal body classes */
    body.institution-portal .main-content,
    body.teacher-portal .main-content,
    body.student-portal .main-content {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.institution-portal .main-content {
        padding: 16px !important;
        gap: 16px !important;
    }

    body.institution-portal .sidebar,
    body.teacher-portal .sidebar,
    body.student-portal .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: min(320px, 88vw) !important;
        max-width: 88vw !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 10200 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18) !important;
        padding: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background: #f5f8ff !important;
    }

    body.institution-portal .sidebar.active,
    body.teacher-portal .sidebar.active,
    body.student-portal .sidebar.active {
        transform: translateX(0) !important;
    }

    body.institution-portal .sidebar-menu,
    body.teacher-portal .sidebar-menu,
    body.student-portal .sidebar-menu {
        display: block !important;
        grid-template-columns: none !important;
    }

    body.institution-portal .content-area,
    body.teacher-portal .content-area,
    body.student-portal .content-area {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        padding: 16px !important;
        overflow-x: hidden !important;
    }

    #dashboard-page .main-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    #dashboard-page,
    #dashboard-page .main-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .content-area,
    #home-section,
    section.content-area {
        padding: 12px 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        overflow-x: hidden !important;
    }

    #dashboard-page .main-content {
        padding: 12px 14px !important;
        gap: 0 !important;
    }

    /* Bootstrap grid — stack columns */
    .content-area .row > [class*="col-"],
    .content-area .row-sm > [class*="col-"],
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"],
    .row > [class*="col-sm-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .content-area .row,
    .content-area .row-sm {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Inline layout overrides (views with legacy inline styles) */
    .content-area [style*="display: grid"],
    .content-area [style*="display:grid"],
    .content-area form[style*="display: grid"],
    .content-area form[style*="display:grid"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .content-area [style*="grid-template-columns: repeat"],
    .content-area [style*="grid-template-columns:repeat"] {
        grid-template-columns: 1fr !important;
    }

    .content-area [style*="display: flex"][style*="justify-content: space-between"],
    .content-area [style*="display:flex"][style*="justify-content: space-between"],
    .content-area [style*="display: flex"][style*="justify-content:space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* Cards */
    .content-area .card,
    .card-dashboard-one,
    .az-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 16px !important;
    }

    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* Tables scroll inside wrapper — preserve native table layout for column alignment */
    .content-area .table-responsive,
    .content-area .table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .content-area .table-responsive > table,
    .content-area .table-scroll > table,
    .content-area .table-responsive > .table,
    .content-area .table-scroll > .table {
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        font-size: 13px;
    }

    .content-area .table th,
    .content-area .table td,
    .content-area table th,
    .content-area table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
        vertical-align: middle !important;
    }

    .content-area .table thead th {
        white-space: nowrap !important;
    }

    /* Forms */
    .content-area input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .content-area select,
    .content-area textarea,
    .content-area .form-control,
    .content-area .form-select {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Form action rows only — do not crush filter/toolbar buttons */
    .content-area .form-actions:not(.filter-actions):not(.filter-actions-row) .btn,
    .content-area .form-actions:not(.filter-actions):not(.filter-actions-row) .action-button {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important;
    }

    .content-area table .btn,
    .content-area .table .btn,
    .content-area td .btn,
    .content-area .filter-actions .btn,
    .content-area .filter-actions .action-button,
    .content-area .filter-actions-row .btn,
    .content-area .filter-actions-row .action-button,
    .content-area .btn-sm,
    .content-area a.btn-sm {
        width: auto !important;
        min-width: 88px !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
    }

    .content-area .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .content-area .btn-group .btn {
        flex: 1 1 auto !important;
        min-width: 88px !important;
    }

    /* Modals */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    /* DataTables controls */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
        margin-bottom: 10px !important;
    }

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

    .dataTables_wrapper .dataTables_paginate {
        margin-top: 12px !important;
        overflow-x: auto !important;
    }

    /* Azia dashboard title rows */
    .az-dashboard-one-title {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .az-dashboard-one-title > div {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .content-area,
    #home-section {
        padding: 10px !important;
    }

    body.institution-portal .main-content,
    body.teacher-portal .main-content {
        padding: 10px !important;
    }

    .content-area .card {
        padding: 12px !important;
    }

    .az-dashboard-title,
    .content-area h2 {
        font-size: 1.25rem !important;
    }
}

/* ==================== TEACHER PORTAL (standalone layout) ==================== */

@media (max-width: 1024px) {
    .teacher-portal #dashboard-page .main-content {
        flex-direction: column !important;
    }

    .teacher-portal .content-area {
        padding: 16px !important;
    }
}

/* ==================== EXAM REGISTRATION APP LAYOUT ==================== */

@media (max-width: 768px) {
    .sidebar.col-md-3,
    .sidebar.col-lg-2 {
        position: fixed !important;
        z-index: 1050 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.col-md-3.show,
    .sidebar.col-lg-2.show {
        transform: translateX(0);
    }

    .main-content,
    .main-content.col-md-9,
    .main-content.col-lg-10 {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 12px !important;
    }

    .container-fluid > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==================== PUBLIC WEBSITE ==================== */

@media (max-width: 991px) {
    .public-page-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .filter-grid {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .filter-grid > div {
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .colleges-grid,
    .forms-grid,
    .admission-programs-grid,
    .downloads-list {
        grid-template-columns: 1fr !important;
    }

    .exam-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    .about-nav-tabs,
    .academics-tabs {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .about-tab-btn,
    .tab-btn,
    .admission-tab-btn {
        width: 100% !important;
        text-align: center !important;
    }

    .mission-vision-grid {
        grid-template-columns: 1fr !important;
    }

    .about-doc-grid {
        grid-template-columns: 1fr !important;
    }

    .related-programs-section {
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .related-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .public-website-body .header-nav-links {
        display: none !important;
    }

    .public-page-header {
        min-height: 200px !important;
        padding-top: 88px !important;
    }

    .important-dates-table,
    .table-responsive-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .important-dates-table table,
    .dates-table {
        min-width: 520px;
    }

    .download-item-footer .action-button {
        width: 100% !important;
    }

    .program-banner-image {
        height: min(280px, 45vh) !important;
    }

    .program-meta-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .public-page-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .filter-bar {
        padding: 16px !important;
    }

    .surface-card {
        border-radius: 14px;
    }
}

/* ==================== WELCOME / HOME ==================== */

@media (max-width: 768px) {
    .hero-section {
        min-height: auto !important;
    }

    .hero-content {
        margin-top: 80px !important;
        padding: 16px !important;
    }

    .statistics-container,
    .steps-grid,
    .events-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

/* ==================== AUTH / LOGIN PAGES ==================== */

@media (max-width: 576px) {
    .login-container,
    .auth-container,
    .register-container,
    body > .container {
        padding: 16px !important;
        max-width: 100% !important;
    }

    .login-card,
    .auth-card {
        width: 100% !important;
        padding: 24px 16px !important;
    }
}