/* ============================================================
   EDUCREST ERP
   RESPONSIVE DESIGN SYSTEM
   ------------------------------------------------------------
   Final global responsive override layer
   Powered by GREATENANT SCHOOL CONNECT
   ============================================================ */

/*
   RESPONSIVE CSS RESPONSIBILITIES
   --------------------------------
   1. Desktop / laptop optimization
   2. Tablet layouts
   3. Mobile layouts
   4. Sidebar / navigation transformation
   5. Responsive grids
   6. Responsive tables
   7. Responsive forms
   8. Responsive dashboards
   9. Responsive modals / overlays
   10. Responsive typography
   11. Touch-friendly controls
   12. Accessibility / reduced motion
   13. Print optimization

   IMPORTANT:
   This file intentionally comes LAST in the stylesheet stack.
   It overrides previous CSS only where viewport behavior
   requires it.
*/


/* ============================================================
   01. RESPONSIVE FOUNDATION
   ============================================================ */

:root {
    --responsive-max-content: 1680px;
    --responsive-gutter: 24px;
    --responsive-mobile-gutter: 16px;

    --responsive-sidebar-width: 280px;
    --responsive-sidebar-collapsed: 84px;

    --responsive-topbar-height: 76px;

    --responsive-control-height: 44px;
    --responsive-touch-target: 44px;

    --responsive-transition:
        180ms cubic-bezier(.2, .7, .2, 1);
}


/* Prevent accidental horizontal scrolling */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}


/* Better media defaults */

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

img {
    height: auto;
}

iframe {
    border: 0;
}


/* Long text should not destroy layouts */

* {
    min-width: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
button,
label,
td,
th {
    overflow-wrap: break-word;
}


/* ============================================================
   02. GLOBAL CONTAINER SYSTEM
   ============================================================ */

.container,
.page-container,
.dashboard-container,
.content-container {
    width: min(
        calc(100% - (var(--responsive-gutter) * 2)),
        var(--responsive-max-content)
    );

    margin-inline: auto;
}


/* Full-width utility */

.container-fluid,
.full-width {
    width: 100%;
    max-width: 100%;
}


/* Responsive horizontal spacing */

.responsive-padding {
    padding-inline: var(--responsive-gutter);
}


/* ============================================================
   03. DASHBOARD MASTER LAYOUT
   ============================================================ */

.dashboard-shell {
    width: 100%;
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        var(--dash-sidebar-width, var(--responsive-sidebar-width))
        minmax(0, 1fr);

    overflow: hidden;
}


.dashboard-sidebar {
    width: var(--dash-sidebar-width, var(--responsive-sidebar-width));
    min-width: 0;

    position: fixed;
    inset: 0 auto 0 0;

    z-index: 1000;

    transition:
        width var(--responsive-transition),
        transform var(--responsive-transition);

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: thin;
}


.dashboard-main {
    min-width: 0;
    width: 100%;

    margin-left: var(
        --dash-sidebar-width,
        var(--responsive-sidebar-width)
    );

    transition:
        margin-left var(--responsive-transition),
        width var(--responsive-transition);
}


/* Prevent desktop content from escaping */

.dashboard-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


/* ============================================================
   04. SIDEBAR COLLAPSED DESKTOP MODE
   ============================================================ */

.dashboard-shell.sidebar-collapsed {
    grid-template-columns:
        var(--responsive-sidebar-collapsed)
        minmax(0, 1fr);
}

.dashboard-shell.sidebar-collapsed .dashboard-sidebar {
    width: var(--responsive-sidebar-collapsed);
}

.dashboard-shell.sidebar-collapsed .dashboard-main {
    margin-left: var(--responsive-sidebar-collapsed);
}


/* Hide labels when collapsed */

.dashboard-shell.sidebar-collapsed .nav-label,
.dashboard-shell.sidebar-collapsed .sidebar-brand-text,
.dashboard-shell.sidebar-collapsed .sidebar-user-info,
.dashboard-shell.sidebar-collapsed .nav-section-title,
.dashboard-shell.sidebar-collapsed .sidebar-footer-text {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}


/* Center navigation icons */

.dashboard-shell.sidebar-collapsed .nav-item {
    justify-content: center;
}

.dashboard-shell.sidebar-collapsed .nav-icon {
    margin-inline: auto;
}


/* ============================================================
   05. TOPBAR
   ============================================================ */

.dashboard-topbar {
    width: 100%;
    min-width: 0;

    min-height:
        var(--dash-topbar-height,
        var(--responsive-topbar-height));

    display: flex;
    align-items: center;

    gap: 16px;
}


.topbar-left,
.topbar-right {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}


.topbar-left {
    flex: 1 1 auto;
}


.topbar-right {
    flex: 0 0 auto;
}


/* ============================================================
   06. PAGE HEADER
   ============================================================ */

.page-header {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.page-header-content {
    flex: 1 1 auto;
    min-width: 0;
}


.page-actions {
    flex: 0 0 auto;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px;
}


/* ============================================================
   07. DASHBOARD GRIDS
   ============================================================ */

.stats-grid,
.dashboard-grid,
.module-grid,
.quick-actions,
.analytics-grid,
.overview-grid,
.cards-grid {
    width: 100%;
    min-width: 0;
}


/* Prevent cards from forcing horizontal scroll */

.stat-card,
.dashboard-card,
.module-tile,
.quick-action,
.chart-card,
.overview-card {
    min-width: 0;
    max-width: 100%;
}


/* ============================================================
   08. RESPONSIVE TABLE FOUNDATION
   ============================================================ */

.table-responsive,
.data-table-wrapper,
.dashboard-table-wrapper {
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
}


/* Tables retain usable minimum width */

.table-responsive table,
.data-table-wrapper table,
.dashboard-table-wrapper table {
    width: 100%;
    min-width: 720px;
}


/* Compact tables */

.table-responsive.table-compact table {
    min-width: 560px;
}


/* ============================================================
   09. RESPONSIVE FORMS
   ============================================================ */

.form-grid,
.form-row {
    width: 100%;
    min-width: 0;
}


.form-group,
.form-field {
    min-width: 0;
}


input,
select,
textarea,
button {
    max-width: 100%;
}


textarea {
    resize: vertical;
}


/* Long selects */

select {
    text-overflow: ellipsis;
}


/* ============================================================
   10. RESPONSIVE MODAL FOUNDATION
   ============================================================ */

.modal,
.dialog,
.drawer,
.offcanvas {
    max-width: 100vw;
}


.modal-content,
.dialog-content {
    max-width: calc(100vw - 32px);
}


.modal-body,
.dialog-body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}


/* ============================================================
   11. RESPONSIVE AUTHENTICATION FOUNDATION
   ============================================================ */

.auth-page,
.auth-layout {
    width: 100%;
    min-height: 100vh;
}


.auth-container,
.auth-card,
.auth-panel {
    max-width: 100%;
}


/* Prevent auth illustrations from causing overflow */

.auth-illustration,
.auth-visual,
.auth-brand-panel {
    min-width: 0;
    overflow: hidden;
}


/* ============================================================
   12. LARGE DESKTOP
   1680px AND ABOVE
   ============================================================ */

@media (min-width: 1681px) {

    .dashboard-content {
        padding-inline: clamp(
            24px,
            2vw,
            48px
        );
    }

    .dashboard-content-inner {
        width: min(
            100%,
            var(--responsive-max-content)
        );

        margin-inline: auto;
    }

}


/* ============================================================
   13. STANDARD DESKTOP
   1200px – 1680px
   ============================================================ */

@media (max-width: 1680px) {

    :root {
        --responsive-gutter: 22px;
    }

}


/* ============================================================
   14. LAPTOP
   1025px – 1199px
   ============================================================ */

@media (max-width: 1199px) {

    :root {
        --responsive-gutter: 20px;
    }


    /* Sidebar */

    .dashboard-shell {
        grid-template-columns:
            var(--responsive-sidebar-collapsed)
            minmax(0, 1fr);
    }


    .dashboard-sidebar {
        width: var(--responsive-sidebar-collapsed);
    }


    .dashboard-main {
        margin-left: var(--responsive-sidebar-collapsed);
    }


    .dashboard-sidebar .nav-label,
    .dashboard-sidebar .sidebar-brand-text,
    .dashboard-sidebar .sidebar-user-info,
    .dashboard-sidebar .nav-section-title,
    .dashboard-sidebar .sidebar-footer-text {
        opacity: 0;
        visibility: hidden;
        width: 0;
        overflow: hidden;
    }


    .dashboard-sidebar .nav-item {
        justify-content: center;
    }


    .dashboard-sidebar .nav-icon {
        margin-inline: auto;
    }


    /* Dashboard grids */

    .stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .dashboard-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .module-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .analytics-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* Full-width cards */

    .dashboard-card.span-full,
    .chart-card.span-full,
    .overview-card.span-full {
        grid-column: 1 / -1;
    }


    /* Topbar */

    .dashboard-topbar {
        gap: 12px;
    }


    .dashboard-search {
        max-width: 320px;
    }

}


/* ============================================================
   15. TABLET LANDSCAPE
   769px – 1024px
   ============================================================ */

@media (max-width: 1024px) {

    :root {
        --responsive-gutter: 18px;
    }


    /* Dashboard becomes mobile-navigation architecture */

    .dashboard-shell {
        display: block;
        min-height: 100vh;
    }


    .dashboard-sidebar {
        width: min(
            300px,
            86vw
        );

        transform: translateX(-105%);

        box-shadow:
            20px 0 50px rgba(7, 20, 38, .20);

        z-index: 1200;
    }


    .dashboard-sidebar.is-open,
    .dashboard-shell.sidebar-open .dashboard-sidebar {
        transform: translateX(0);
    }


    .dashboard-main {
        width: 100%;
        margin-left: 0;
    }


    /* Mobile menu trigger */

    .menu-toggle,
    .sidebar-toggle,
    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: var(--responsive-touch-target);
        height: var(--responsive-touch-target);

        flex: 0 0 var(--responsive-touch-target);
    }


    /* Sidebar backdrop */

    .sidebar-backdrop,
    .dashboard-overlay {
        position: fixed;
        inset: 0;

        z-index: 1100;

        background:
            rgba(7, 20, 38, .52);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transition:
            opacity var(--responsive-transition),
            visibility var(--responsive-transition);
    }


    .sidebar-backdrop.is-visible,
    .dashboard-shell.sidebar-open .sidebar-backdrop,
    .dashboard-shell.sidebar-open .dashboard-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


    /* Dashboard topbar */

    .dashboard-topbar {
        position: sticky;
        top: 0;

        z-index: 900;

        padding-inline: var(--responsive-gutter);
    }


    /* Page header */

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .page-actions {
        width: 100%;
    }


    /* Search */

    .dashboard-search {
        max-width: none;
        flex: 1 1 220px;
    }


    /* Stats */

    .stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* Dashboard cards */

    .dashboard-grid,
    .analytics-grid {
        grid-template-columns:
            1fr;
    }


    /* Modules */

    .module-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    /* Charts */

    .chart-container {
        min-height: 260px;
    }


    /* User menu */

    .user-menu-panel,
    .notification-panel {
        max-width:
            calc(100vw - 36px);
    }

}


/* ============================================================
   16. TABLET PORTRAIT
   600px – 768px
   ============================================================ */

@media (max-width: 768px) {

    :root {
        --responsive-gutter: 16px;
    }


    /* --------------------------------------------------------
       GLOBAL TYPOGRAPHY
       -------------------------------------------------------- */

    h1,
    .page-title {
        font-size: clamp(
            1.45rem,
            4vw,
            2rem
        );
    }


    h2 {
        font-size: clamp(
            1.25rem,
            3.5vw,
            1.65rem
        );
    }


    h3 {
        font-size: clamp(
            1.1rem,
            3vw,
            1.35rem
        );
    }


    /* --------------------------------------------------------
       TOPBAR
       -------------------------------------------------------- */

    .dashboard-topbar {
        min-height: 68px;
        padding-inline: var(--responsive-gutter);
    }


    .topbar-left,
    .topbar-right {
        gap: 8px;
    }


    .dashboard-search {
        order: 10;
        width: 100%;
        flex-basis: 100%;
    }


    /* If search is directly inside topbar */

    .dashboard-topbar:has(.dashboard-search) {
        flex-wrap: wrap;
        padding-block: 10px;
    }


    /* --------------------------------------------------------
       CONTENT
       -------------------------------------------------------- */

    .dashboard-content {
        padding:
            18px
            var(--responsive-gutter)
            28px;
    }


    /* --------------------------------------------------------
       STATS
       -------------------------------------------------------- */

    .stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .stat-card {
        padding: 16px;
    }


    .stat-value {
        font-size: 1.45rem;
    }


    /* --------------------------------------------------------
       MODULES
       -------------------------------------------------------- */

    .module-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    /* --------------------------------------------------------
       QUICK ACTIONS
       -------------------------------------------------------- */

    .quick-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* --------------------------------------------------------
       FORMS
       -------------------------------------------------------- */

    .form-grid,
    .form-row {
        grid-template-columns: 1fr !important;
    }


    .form-group.span-2,
    .form-field.span-2,
    .form-group.full,
    .form-field.full {
        grid-column: auto !important;
    }


    /* --------------------------------------------------------
       TOOLBARS
       -------------------------------------------------------- */

    .dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
    }


    .toolbar-left,
    .toolbar-right {
        width: 100%;
    }


    .toolbar-left,
    .toolbar-right,
    .filter-group {
        flex-wrap: wrap;
    }


    /* --------------------------------------------------------
       BUTTONS
       -------------------------------------------------------- */

    .page-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: 100%;
    }


    .page-actions .btn,
    .page-actions button,
    .page-actions a {
        width: 100%;
    }


    /* --------------------------------------------------------
       CARDS
       -------------------------------------------------------- */

    .dashboard-card,
    .chart-card,
    .overview-card {
        border-radius: 16px;
    }


    .card-header {
        gap: 12px;
        flex-wrap: wrap;
    }


    .card-actions {
        width: 100%;
    }


    /* --------------------------------------------------------
       CHARTS
       -------------------------------------------------------- */

    .chart-container {
        min-height: 230px;
    }


    /* --------------------------------------------------------
       ACTIVITY FEED
       -------------------------------------------------------- */

    .activity-item {
        align-items: flex-start;
    }


    .activity-content {
        min-width: 0;
    }


    /* --------------------------------------------------------
       PROFILE / NOTIFICATIONS
       -------------------------------------------------------- */

    .profile-card {
        flex-wrap: wrap;
    }


    .notification-item {
        gap: 10px;
    }


    /* --------------------------------------------------------
       CALENDAR
       -------------------------------------------------------- */

    .calendar-grid {
        gap: 4px;
    }


    .calendar-day {
        min-height: 42px;
    }

}


/* ============================================================
   17. LARGE MOBILE
   481px – 599px
   ============================================================ */

@media (max-width: 599px) {

    :root {
        --responsive-gutter: 14px;
    }


    /* --------------------------------------------------------
       DASHBOARD CONTENT
       -------------------------------------------------------- */

    .dashboard-content {
        padding:
            16px
            var(--responsive-gutter)
            24px;
    }


    /* --------------------------------------------------------
       PAGE HEADER
       -------------------------------------------------------- */

    .page-header {
        gap: 14px;
    }


    .page-subtitle {
        font-size: .9rem;
    }


    .page-actions {
        grid-template-columns: 1fr;
    }


    /* --------------------------------------------------------
       STATS
       -------------------------------------------------------- */

    .stats-grid {
        grid-template-columns: 1fr;
    }


    .stat-card {
        display: flex;
        align-items: center;
        gap: 14px;
    }


    .stat-card .stat-icon {
        flex: 0 0 46px;
    }


    .stat-card .stat-content {
        flex: 1;
        min-width: 0;
    }


    /* --------------------------------------------------------
       MODULES
       -------------------------------------------------------- */

    .module-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .module-tile {
        padding: 14px;
    }


    .module-icon {
        width: 42px;
        height: 42px;
    }


    /* --------------------------------------------------------
       QUICK ACTIONS
       -------------------------------------------------------- */

    .quick-actions {
        grid-template-columns: 1fr;
    }


    /* --------------------------------------------------------
       TABLES
       -------------------------------------------------------- */

    .table-responsive,
    .data-table-wrapper,
    .dashboard-table-wrapper {
        margin-inline:
            calc(var(--responsive-gutter) * -1);

        width:
            calc(100% + (var(--responsive-gutter) * 2));
    }


    .table-responsive table,
    .data-table-wrapper table,
    .dashboard-table-wrapper table {
        min-width: 620px;
    }


    /* --------------------------------------------------------
       DASHBOARD SEARCH
       -------------------------------------------------------- */

    .dashboard-search input,
    .dashboard-search .search-input {
        height: 44px;
    }


    /* --------------------------------------------------------
       USER AREA
       -------------------------------------------------------- */

    .topbar-user-name,
    .user-name,
    .profile-name {
        display: none;
    }


    /* --------------------------------------------------------
       NOTIFICATIONS
       -------------------------------------------------------- */

    .notification-panel,
    .user-menu-panel,
    .profile-dropdown {
        position: fixed;

        top: 68px;
        right: 10px;
        left: 10px;

        width: auto;
        max-width: none;
    }


    /* --------------------------------------------------------
       DASHBOARD CARDS
       -------------------------------------------------------- */

    .dashboard-card {
        padding: 16px;
    }


    /* --------------------------------------------------------
       WELCOME / HERO PANEL
       -------------------------------------------------------- */

    .welcome-panel,
    .dashboard-hero,
    .overview-banner {
        padding: 20px;
    }


    .welcome-panel-content,
    .dashboard-hero-content {
        width: 100%;
    }


    .welcome-panel-illustration,
    .dashboard-hero-illustration {
        display: none;
    }


    /* --------------------------------------------------------
       FILE CARDS
       -------------------------------------------------------- */

    .file-card {
        flex-direction: column;
        align-items: stretch;
    }


    /* --------------------------------------------------------
       PAYMENT PROVIDERS
       -------------------------------------------------------- */

    .payment-provider-grid {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   18. SMALL MOBILE
   360px – 480px
   ============================================================ */

@media (max-width: 480px) {

    :root {
        --responsive-gutter: 12px;
    }


    /* --------------------------------------------------------
       TYPOGRAPHY
       -------------------------------------------------------- */

    html {
        font-size: 15px;
    }


    h1,
    .page-title {
        font-size: 1.4rem;
        line-height: 1.2;
    }


    h2 {
        font-size: 1.2rem;
    }


    h3 {
        font-size: 1.05rem;
    }


    /* --------------------------------------------------------
       DASHBOARD CONTENT
       -------------------------------------------------------- */

    .dashboard-content {
        padding:
            14px
            var(--responsive-gutter)
            22px;
    }


    /* --------------------------------------------------------
       TOPBAR
       -------------------------------------------------------- */

    .dashboard-topbar {
        min-height: 62px;
        padding-inline: 12px;
    }


    .menu-toggle,
    .sidebar-toggle,
    .mobile-menu-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }


    /* --------------------------------------------------------
       MODULES
       -------------------------------------------------------- */

    .module-grid {
        grid-template-columns: 1fr;
    }


    .module-tile {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
    }


    .module-tile .module-icon {
        flex: 0 0 42px;
    }


    /* --------------------------------------------------------
       STAT CARD
       -------------------------------------------------------- */

    .stat-card {
        padding: 14px;
    }


    .stat-value {
        font-size: 1.3rem;
    }


    .stat-label {
        font-size: .82rem;
    }


    /* --------------------------------------------------------
       CARD HEADER
       -------------------------------------------------------- */

    .card-header {
        flex-direction: column;
        align-items: flex-start;
    }


    .card-actions {
        width: 100%;
    }


    /* --------------------------------------------------------
       BUTTONS
       -------------------------------------------------------- */

    .btn,
    button,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
    }


    .btn-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }


    /* --------------------------------------------------------
       FILTERS
       -------------------------------------------------------- */

    .filter-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }


    .filter-group select,
    .filter-group input {
        width: 100%;
    }


    /* --------------------------------------------------------
       PAGINATION
       -------------------------------------------------------- */

    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }


    /* --------------------------------------------------------
       MODALS
       -------------------------------------------------------- */

    .modal-content,
    .dialog-content {
        width:
            calc(100vw - 20px);

        max-width:
            calc(100vw - 20px);

        max-height:
            calc(100vh - 20px);

        border-radius: 16px;
    }


    /* --------------------------------------------------------
       FORM ACTIONS
       -------------------------------------------------------- */

    .form-actions {
        flex-direction: column;
        width: 100%;
    }


    .form-actions .btn,
    .form-actions button {
        width: 100%;
    }


    /* --------------------------------------------------------
       BREADCRUMBS
       -------------------------------------------------------- */

    .breadcrumb {
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;

        scrollbar-width: none;
    }


    .breadcrumb::-webkit-scrollbar {
        display: none;
    }


    /* --------------------------------------------------------
       TABS
       -------------------------------------------------------- */

    .tabs,
    .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;

        scrollbar-width: none;
    }


    .tabs::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar {
        display: none;
    }


    .tab,
    .nav-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }


    /* --------------------------------------------------------
       CHARTS
       -------------------------------------------------------- */

    .chart-container {
        min-height: 200px;
    }


    /* --------------------------------------------------------
       EMPTY STATES
       -------------------------------------------------------- */

    .empty-state {
        padding: 30px 18px;
    }


    /* --------------------------------------------------------
       LOADING STATES
       -------------------------------------------------------- */

    .loading-state {
        padding: 24px 14px;
    }

}


/* ============================================================
   19. EXTRA SMALL DEVICES
   BELOW 360px
   ============================================================ */

@media (max-width: 359px) {

    :root {
        --responsive-gutter: 10px;
    }


    html {
        font-size: 14px;
    }


    .dashboard-content {
        padding-inline: 10px;
    }


    .dashboard-topbar {
        padding-inline: 8px;
    }


    .stat-card,
    .dashboard-card {
        padding: 12px;
    }


    .module-tile {
        padding: 12px;
    }


    .page-title {
        font-size: 1.25rem;
    }


    .sidebar {
        width: 92vw;
    }

}


/* ============================================================
   20. LANDSCAPE MOBILE
   ============================================================ */

@media (
    max-width: 768px
) and (
    orientation: landscape
) {

    .dashboard-sidebar {
        overflow-y: auto;
    }


    .dashboard-topbar {
        min-height: 58px;
    }


    .dashboard-content {
        padding-top: 14px;
    }


    .modal-content,
    .dialog-content {
        max-height: 90vh;
    }

}


/* ============================================================
   21. VERY SHORT SCREENS
   ============================================================ */

@media (max-height: 600px) {

    .dashboard-sidebar {
        overflow-y: auto;
    }


    .auth-page,
    .auth-layout {
        min-height: 100svh;
    }


    .modal-content,
    .dialog-content {
        max-height: 92vh;
    }

}


/* ============================================================
   22. TOUCH DEVICES
   ============================================================ */

@media (pointer: coarse) {

    button,
    a,
    input,
    select,
    textarea,
    [role="button"] {
        touch-action: manipulation;
    }


    button,
    [role="button"] {
        min-height: 44px;
    }


    .nav-item,
    .menu-item,
    .dropdown-item {
        min-height: 44px;
    }


    .table-responsive,
    .data-table-wrapper,
    .dashboard-table-wrapper {
        scrollbar-width: auto;
    }

}


/* ============================================================
   23. HOVER DEVICES ONLY
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    .nav-item:hover {
        transform: translateX(2px);
    }


    .dashboard-card:hover,
    .stat-card:hover,
    .module-tile:hover {
        transform: translateY(-2px);
    }

}


/* ============================================================
   24. FOLDABLE / NARROW VIEWPORT SUPPORT
   ============================================================ */

@media (max-width: 400px) {

    .dashboard-sidebar {
        width: 88vw;
    }


    .dashboard-sidebar .sidebar-header {
        padding-inline: 16px;
    }


    .dashboard-sidebar .sidebar-content {
        padding-inline: 10px;
    }

}


/* ============================================================
   25. SAFE AREA SUPPORT
   ============================================================ */

@supports (padding: env(safe-area-inset-bottom)) {

    .dashboard-topbar {
        padding-top:
            max(
                8px,
                env(safe-area-inset-top)
            );
    }


    .dashboard-content {
        padding-bottom:
            max(
                24px,
                env(safe-area-inset-bottom)
            );
    }


    .mobile-bottom-nav {
        padding-bottom:
            env(safe-area-inset-bottom);
    }


    .dashboard-sidebar {
        padding-bottom:
            env(safe-area-inset-bottom);
    }

}


/* ============================================================
   26. MOBILE BOTTOM NAVIGATION
   Optional component for mobile dashboards
   ============================================================ */

.mobile-bottom-nav {
    display: none;
}


@media (max-width: 768px) {

    .mobile-bottom-nav {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 1000;

        min-height: 60px;

        display: grid;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        background: #ffffff;

        border-top:
            1px solid
            rgba(11, 31, 58, .10);

        box-shadow:
            0 -8px 25px
            rgba(11, 31, 58, .08);
    }


    .mobile-bottom-nav-item {
        min-height: 60px;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 3px;

        padding: 6px;

        color:
            var(
                --dash-muted,
                #6d7d91
            );

        text-decoration: none;
    }


    .mobile-bottom-nav-item.is-active,
    .mobile-bottom-nav-item.active {
        color:
            var(
                --dash-blue,
                #175da6
            );
    }


    .mobile-bottom-nav-icon {
        width: 22px;
        height: 22px;
    }


    .mobile-bottom-nav-label {
        font-size: .68rem;
        font-weight: 700;
    }


    .dashboard-content.has-mobile-bottom-nav {
        padding-bottom: 90px;
    }

}


/* ============================================================
   27. RESPONSIVE DATA TABLE - CARD MODE
   ============================================================ */

@media (max-width: 600px) {

    .responsive-table-card {
        border: 0;
    }


    .responsive-table-card table,
    .responsive-table-card thead,
    .responsive-table-card tbody,
    .responsive-table-card tr,
    .responsive-table-card th,
    .responsive-table-card td {
        display: block;
        width: 100%;
    }


    .responsive-table-card thead {
        display: none;
    }


    .responsive-table-card tbody {
        display: grid;
        gap: 12px;
    }


    .responsive-table-card tr {
        padding: 14px;

        border:
            1px solid
            rgba(11, 31, 58, .09);

        border-radius: 14px;

        background: #ffffff;
    }


    .responsive-table-card td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        gap: 16px;

        padding: 8px 0;

        border: 0;
    }


    .responsive-table-card td::before {
        content: attr(data-label);

        flex: 0 0 40%;

        font-weight: 700;

        color:
            var(
                --dash-muted,
                #6d7d91
            );
    }


    .responsive-table-card td:last-child {
        border-top:
            1px solid
            rgba(11, 31, 58, .07);

        margin-top: 6px;
        padding-top: 12px;
    }

}


/* ============================================================
   28. RESPONSIVE CALENDAR
   ============================================================ */

@media (max-width: 600px) {

    .calendar-header {
        flex-wrap: wrap;
        gap: 10px;
    }


    .calendar-grid {
        grid-template-columns:
            repeat(7, minmax(32px, 1fr));
    }


    .calendar-day {
        min-height: 38px;
        padding: 4px;
    }


    .calendar-day-number {
        font-size: .78rem;
    }


    .calendar-event {
        display: none;
    }

}


/* ============================================================
   29. RESPONSIVE ATTENDANCE GRID
   ============================================================ */

@media (max-width: 768px) {

    .attendance-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    .attendance-grid-inner {
        min-width: 680px;
    }

}


/* ============================================================
   30. RESPONSIVE TIMETABLE
   ============================================================ */

@media (max-width: 768px) {

    .timetable-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    .timetable {
        min-width: 760px;
    }

}


/* ============================================================
   31. RESPONSIVE FILE / UPLOAD AREA
   ============================================================ */

@media (max-width: 600px) {

    .upload-zone {
        padding: 28px 16px;
    }


    .upload-zone-icon {
        width: 48px;
        height: 48px;
    }


    .upload-actions {
        flex-direction: column;
    }


    .upload-actions .btn {
        width: 100%;
    }

}


/* ============================================================
   32. RESPONSIVE AI ASSISTANT
   ============================================================ */

@media (max-width: 768px) {

    .ai-assistant-panel {
        width: min(
            100%,
            420px
        );
    }

}


@media (max-width: 480px) {

    .ai-assistant-panel {
        position: fixed;

        inset:
            auto
            8px
            8px
            8px;

        width: auto;

        max-height:
            calc(100vh - 16px);

        border-radius: 18px;
    }


    .ai-chat-messages {
        max-height: 55vh;
    }


    .ai-chat-input {
        flex-wrap: wrap;
    }


    .ai-chat-input textarea {
        width: 100%;
        flex-basis: 100%;
    }

}


/* ============================================================
   33. RESPONSIVE PAYMENT AREA
   ============================================================ */

@media (max-width: 768px) {

    .payment-summary {
        grid-template-columns: 1fr;
    }


    .payment-method-grid,
    .payment-provider-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 480px) {

    .payment-method-grid,
    .payment-provider-grid {
        grid-template-columns: 1fr;
    }


    .payment-actions {
        display: grid;
        grid-template-columns: 1fr;
    }


    .payment-actions .btn {
        width: 100%;
    }

}


/* ============================================================
   34. RESPONSIVE PROFILE
   ============================================================ */

@media (max-width: 600px) {

    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }


    .profile-header-actions {
        width: 100%;
        justify-content: center;
    }


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


    .profile-details {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   35. RESPONSIVE SCHOOL / ORGANIZATION SWITCHER
   ============================================================ */

@media (max-width: 768px) {

    .org-context,
    .school-switcher,
    .organization-switcher {
        max-width: 100%;
        width: 100%;
    }


    .org-context select,
    .school-switcher select,
    .organization-switcher select {
        width: 100%;
    }

}


/* ============================================================
   36. RESPONSIVE NOTIFICATION CENTER
   ============================================================ */

@media (max-width: 480px) {

    .notification-center {
        position: fixed;

        inset:
            62px
            8px
            8px
            8px;

        width: auto;
        max-width: none;

        max-height:
            calc(100vh - 70px);
    }


    .notification-center-body {
        max-height:
            calc(100vh - 160px);

        overflow-y: auto;
    }

}


/* ============================================================
   37. RESPONSIVE DRAWERS
   ============================================================ */

@media (max-width: 768px) {

    .drawer {
        width: min(
            92vw,
            420px
        );
    }


    .drawer.drawer-right,
    .drawer.right {
        transform:
            translateX(105%);
    }


    .drawer.is-open,
    .drawer.open {
        transform:
            translateX(0);
    }

}


@media (max-width: 480px) {

    .drawer {
        width: 100vw;
        max-width: 100vw;
    }

}


/* ============================================================
   38. RESPONSIVE DROPDOWN MENUS
   ============================================================ */

@media (max-width: 600px) {

    .dropdown-menu {
        max-width:
            calc(100vw - 20px);

        overflow-x: hidden;
    }


    .dropdown-menu.align-right {
        right: 10px;
    }

}


/* ============================================================
   39. RESPONSIVE TOASTS
   ============================================================ */

@media (max-width: 600px) {

    .toast-container {
        left: 12px;
        right: 12px;

        width: auto;
    }


    .toast {
        width: 100%;
        max-width: none;
    }

}


/* ============================================================
   40. RESPONSIVE PAGINATION
   ============================================================ */

@media (max-width: 600px) {

    .pagination {
        gap: 4px;
    }


    .pagination .page-number:not(.active):not(:first-child):not(:last-child) {
        display: none;
    }

}


/* ============================================================
   41. RESPONSIVE BADGES / CHIPS
   ============================================================ */

@media (max-width: 480px) {

    .badge,
    .status-badge,
    .filter-chip,
    .role-badge {
        white-space: normal;
        text-align: center;
    }

}


/* ============================================================
   42. RESPONSIVE DASHBOARD HERO
   ============================================================ */

@media (max-width: 768px) {

    .dashboard-hero,
    .welcome-panel,
    .overview-banner {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }


    .dashboard-hero-actions,
    .welcome-actions {
        width: 100%;

        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 480px) {

    .dashboard-hero-actions,
    .welcome-actions {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   43. RESPONSIVE DASHBOARD STATISTICS
   ============================================================ */

@media (max-width: 600px) {

    .stat-meta {
        flex-wrap: wrap;
    }


    .stat-trend {
        font-size: .75rem;
    }


    .stat-progress {
        width: 100%;
    }

}


/* ============================================================
   44. RESPONSIVE CHART LEGENDS
   ============================================================ */

@media (max-width: 600px) {

    .chart-legend {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }


    .chart-legend-item {
        min-width: 0;
    }

}


@media (max-width: 380px) {

    .chart-legend {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   45. RESPONSIVE ACTIVITY TIMELINE
   ============================================================ */

@media (max-width: 600px) {

    .activity-feed {
        padding-left: 0;
    }


    .activity-item {
        gap: 10px;
    }


    .activity-timeline-line {
        display: none;
    }


    .activity-icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

}


/* ============================================================
   46. RESPONSIVE PROGRESS / ANALYTICS
   ============================================================ */

@media (max-width: 480px) {

    .progress-label {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }


    .analytics-summary {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   47. RESPONSIVE DASHBOARD FOOTER
   ============================================================ */

@media (max-width: 768px) {

    .dashboard-footer {
        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 8px;
    }

}


/* ============================================================
   48. ACCESSIBILITY
   ============================================================ */

/*
   Keep focus indicators visible on every screen size.
*/

:focus-visible {
    outline:
        3px solid
        rgba(244, 196, 48, .70);

    outline-offset: 2px;
}


/*
   Avoid sticky hover effects on touch devices.
*/

@media (pointer: coarse) {

    .dashboard-card:hover,
    .stat-card:hover,
    .module-tile:hover,
    .nav-item:hover {
        transform: none;
    }

}


/* ============================================================
   49. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

}


/* ============================================================
   50. HIGH CONTRAST SUPPORT
   ============================================================ */

@media (prefers-contrast: more) {

    .dashboard-card,
    .stat-card,
    .module-tile,
    input,
    select,
    textarea {
        border-width: 2px;
    }


    .nav-item,
    .btn,
    button {
        outline-offset: 2px;
    }

}


/* ============================================================
   51. PRINT RESPONSIVE OVERRIDES
   ============================================================ */

@media print {

    html,
    body {
        width: 100%;
        min-width: 0;
        overflow: visible;
        background: #ffffff !important;
    }


    .dashboard-shell {
        display: block !important;
    }


    .dashboard-sidebar,
    .dashboard-topbar,
    .mobile-bottom-nav,
    .sidebar-backdrop,
    .dashboard-overlay,
    .menu-toggle,
    .sidebar-toggle,
    .page-actions,
    .no-print {
        display: none !important;
    }


    .dashboard-main {
        margin: 0 !important;
        width: 100% !important;
    }


    .dashboard-content {
        padding: 0 !important;
        width: 100% !important;
    }


    .dashboard-card,
    .stat-card,
    .chart-card,
    .overview-card {
        box-shadow: none !important;
        break-inside: avoid;
    }


    table {
        page-break-inside: auto;
    }


    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }


    a {
        color: #000000 !important;
        text-decoration: none !important;
    }

}


/* ============================================================
   52. MOBILE APP-LIKE BODY MODE
   ============================================================ */

@media (max-width: 768px) {

    body.dashboard-page {
        -webkit-tap-highlight-color:
            rgba(244, 196, 48, .12);

        overscroll-behavior-x: none;
    }

}


/* ============================================================
   53. RESPONSIVE UTILITY CLASSES
   ============================================================ */

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}


@media (max-width: 768px) {

    .desktop-only {
        display: none !important;
    }


    .mobile-only {
        display: block !important;
    }


    .mobile-only-flex {
        display: flex !important;
    }


    .mobile-only-grid {
        display: grid !important;
    }

}


/* ============================================================
   54. RESPONSIVE VISIBILITY UTILITIES
   ============================================================ */

.hide-mobile {
    display: initial;
}


.hide-desktop {
    display: none;
}


@media (max-width: 768px) {

    .hide-mobile {
        display: none !important;
    }


    .hide-desktop {
        display: initial !important;
    }

}


/* ============================================================
   55. RESPONSIVE TEXT ALIGNMENT
   ============================================================ */

@media (max-width: 600px) {

    .mobile-text-center {
        text-align: center !important;
    }


    .mobile-text-left {
        text-align: left !important;
    }

}


/* ============================================================
   56. RESPONSIVE FLEX UTILITIES
   ============================================================ */

@media (max-width: 768px) {

    .mobile-stack {
        flex-direction: column !important;
        align-items: stretch !important;
    }


    .mobile-wrap {
        flex-wrap: wrap !important;
    }


    .mobile-full {
        width: 100% !important;
    }

}


/* ============================================================
   57. RESPONSIVE GRID UTILITIES
   ============================================================ */

@media (max-width: 768px) {

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


    .mobile-grid-2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


@media (max-width: 480px) {

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

}


/* ============================================================
   58. RESPONSIVE SPACING UTILITIES
   ============================================================ */

@media (max-width: 768px) {

    .mobile-p-0 {
        padding: 0 !important;
    }


    .mobile-p-sm {
        padding: 12px !important;
    }


    .mobile-gap-sm {
        gap: 8px !important;
    }


    .mobile-gap-md {
        gap: 12px !important;
    }

}


/* ============================================================
   59. FINAL OVERFLOW PROTECTION
   ============================================================ */

/*
   This is intentionally near the end of the file.
   It protects the application from accidental overflow
   introduced by future modules.
*/

.dashboard-page main,
.dashboard-page section,
.dashboard-page article,
.dashboard-page aside,
.dashboard-page header,
.dashboard-page footer {
    max-width: 100%;
    min-width: 0;
}


.dashboard-page .dashboard-card img,
.dashboard-page .stat-card img,
.dashboard-page .module-tile img {
    max-width: 100%;
}


/* Never allow code blocks or preformatted content
   to destroy mobile layouts. */

pre,
code {
    max-width: 100%;
}


pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   60. END OF EDUCREST RESPONSIVE SYSTEM
   ============================================================ */