/**
 * Shared responsive foundation for Super Admin, Franchise, and Faculty dashboards.
 * Goal: reflow layout by breakpoint. Never squeeze a desktop navbar into a phone.
 */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    min-width: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

canvas {
    max-width: 100%;
}

.navbar,
.sidebar,
.main-content,
.container,
.page-head,
.filters,
.kpi-grid,
.insights-grid,
.analytics-grid,
.royalty-kpi-grid,
.grid2,
.grid3,
.card,
.kpi,
.kpi-card {
    min-width: 0;
    max-width: 100%;
}

.main-content {
    overflow-x: auto;
}

/* -------------------------------------------------------------------------- */
/* Navbar — never wrap into overlapping rows                                   */
/* -------------------------------------------------------------------------- */

.navbar,
.navbar-title,
.navbar-actions {
    min-width: 0;
}

.navbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 70px;
    overflow: hidden;
    box-sizing: border-box;
}

.navbar h1,
.navbar-title {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden;
    margin: 0;
}

.navbar-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar .navbar-logo,
.navbar .kict-logo,
.navbar .navbar-logo img,
.navbar h1 img {
    flex-shrink: 0;
    max-height: 40px !important;
    width: auto !important;
    max-width: 120px;
}

.navbar-actions,
.navbar-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
}

.navbar-actions a,
.navbar-actions button,
.navbar-right a,
.navbar-right button,
.navbar a.ghost,
.navbar button.ghost,
.navbar .btn-logout,
.navbar .btn-refresh {
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    transform: none !important;
}

.menu-toggle {
    flex-shrink: 0;
    min-width: 44px !important;
    min-height: 44px !important;
    display: none;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------------------------------------- */
/* Sidebar — same behavior on every page                                       */
/* -------------------------------------------------------------------------- */

.sidebar {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.welcome-card {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

/* -------------------------------------------------------------------------- */
/* KPI / insight / chart grids                                                 */
/* -------------------------------------------------------------------------- */

.kpi-grid,
.insights-grid,
.analytics-grid,
.royalty-kpi-grid {
    width: 100%;
    display: grid;
    gap: 12px;
}

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

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

.kpi-card,
.insight-card,
.analytics-card,
.kpi-card-link,
.insight-card-link,
.analytics-card-link,
.kpi {
    min-width: 0;
    max-width: 100%;
}

.kpi-card {
    align-items: center;
}

.kpi-info {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.kpi .v,
.kpi-info h3,
.insight-card .value,
.kpi-value,
.metric-value,
.stat-value,
.amount-value {
    min-width: 0;
    max-width: 100%;
    display: block;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    font-size: clamp(0.98rem, 1.1vw + 0.7rem, 1.55rem) !important;
}

.kpi-info p,
.kpi .l,
.insight-card .label,
.insight-card h4,
.highlight-name,
.course-name-wrap {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.analytics-card h3,
.card h3 {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chart-container,
.chart {
    width: 100% !important;
    max-width: 100%;
}

.chart-container canvas,
.chart canvas {
    width: 100% !important;
    max-width: 100%;
    height: 100% !important;
}

.chart {
    position: relative;
    height: 260px;
    min-height: 200px;
}

.table-responsive,
.faculty-table-wrapper,
.dashboard-table-wrap,
[style*="overflow-x:auto"] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dashboard-table-wrap table,
.table-responsive table {
    min-width: 560px;
}

.dashboard-table-wrap td,
.table-responsive td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bar-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(48px, 1fr) auto !important;
}

.bar-row span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.filters {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
}

.grid2 {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 12px;
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.content-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

#customDates > div,
.filters .date-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#customDates input[type="date"] {
    min-width: 0;
    flex: 1 1 140px;
}

/* Desktop 1280+ keeps 4 KPI cards */
@media (min-width: 1280px) {
    .kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1279px) and (min-width: 1025px) {
    .kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

/* Tablet */
@media (max-width: 1024px) {
    .menu-toggle {
        display: inline-flex !important;
    }

    .navbar {
        padding: 10px 14px !important;
        gap: 6px;
    }

    .navbar h1 {
        font-size: 16px !important;
        gap: 8px !important;
    }

    .navbar .navbar-logo,
    .navbar .kict-logo,
    .navbar .navbar-logo img,
    .navbar h1 img {
        max-height: 34px !important;
        max-width: 96px;
    }

    .navbar-actions,
    .navbar-right {
        gap: 6px;
    }

    .navbar-actions span,
    .navbar-right .user-info span {
        display: none !important;
    }

    .navbar-actions a,
    .navbar-actions button,
    .navbar-right a,
    .navbar-right button,
    .navbar > a {
        padding: 8px 10px !important;
        font-size: 0 !important;
        line-height: 0;
    }

    .navbar-actions a i,
    .navbar-actions button i,
    .navbar-right a i,
    .navbar-right button i,
    .navbar .btn-logout i,
    .navbar > a i {
        font-size: 16px !important;
        line-height: 1;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 14px;
        padding-right: 14px;
    }

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

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

    .kpi .v,
    .kpi-info h3,
    .insight-card .value,
    .kpi-value,
    .metric-value,
    .stat-value,
    .amount-value {
        font-size: clamp(0.95rem, 2.2vw, 1.35rem) !important;
    }

    .chart {
        height: 240px;
    }

    .kpi-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 22px !important;
        flex-shrink: 0;
    }
}

/* Phone */
@media (max-width: 767px) {
    .navbar {
        padding: 8px 10px !important;
    }

    .navbar-actions span,
    .navbar-right .user-info span,
    .navbar h1 i {
        display: none !important;
    }

    .navbar-title-text {
        font-size: 14px;
    }

    .kpi-grid,
    .insights-grid,
    .analytics-grid,
    .grid2,
    .grid3 {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px;
    }

    .kpi .v,
    .kpi-info h3,
    .insight-card .value,
    .kpi-value,
    .metric-value,
    .stat-value,
    .amount-value {
        font-size: clamp(1.05rem, 4.6vw, 1.45rem) !important;
    }

    .chart {
        height: 220px;
    }

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

    .page-head {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .navbar .navbar-logo,
    .navbar .kict-logo,
    .navbar .navbar-logo img,
    .navbar h1 img {
        max-height: 28px !important;
        max-width: 72px;
        padding: 2px !important;
    }

    .navbar-actions a,
    .navbar-actions button {
        padding: 8px !important;
        min-width: 40px;
    }

    .main-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .kpi-card {
        flex-direction: row !important;
        text-align: left !important;
    }
}

@media (max-width: 360px) {
    .kpi .v,
    .kpi-info h3,
    .insight-card .value,
    .kpi-value,
    .metric-value,
    .stat-value,
    .amount-value {
        font-size: clamp(0.92rem, 4.8vw, 1.2rem) !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .navbar-actions a,
    .navbar-actions button,
    .menu-toggle,
    .quick button,
    .action {
        min-height: 44px;
    }
}

@media (min-width: 1025px) {
    .menu-toggle {
        display: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* Site-wide: every CRM sub-page + public pages                                */
/* -------------------------------------------------------------------------- */

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

.page-header,
.search-filter-bar,
.search-filter,
.filters-grid,
.form-grid,
.form-row,
.students-grid,
.courses-grid,
.faculty-grid,
.lectures-grid,
.certificate-grid,
.chart-grid,
.charts-grid,
.summary-cards,
.summary-grid,
.application-meta,
.alert-grid,
.content-grid,
.result-grid,
.filters-actions,
.btn-group,
.card,
.form-card,
.welcome-card {
    min-width: 0;
    max-width: 100%;
}

.page-header {
    gap: 12px;
}

.page-header h1,
.page-header h2 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.stats-table-wrapper,
.table-responsive,
.dashboard-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.form-group,
.form-group input,
.form-group select,
.form-group textarea {
    min-width: 0;
    max-width: 100%;
}

.country-code-wrapper {
    min-width: 0;
    max-width: 100%;
}

/* Card / form / filter grids: never force 280–350px columns on a 320px screen */
@media (max-width: 1024px) {
    .courses-grid,
    .faculty-grid,
    .students-grid,
    .lectures-grid,
    .certificate-grid,
    .chart-grid,
    .charts-grid,
    .content-grid,
    .summary-cards,
    .summary-grid,
    .application-meta,
    .alert-grid,
    .analytics-grid,
    .result-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
    }

    .form-grid,
    .form-row,
    .filters-grid,
    .filters {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)) !important;
    }

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

    html:has(.public-navbar) .page-header,
    html.public-site .page-header {
        flex-wrap: unset;
        align-items: unset;
    }

    .main-content {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 767px) {
    .courses-grid,
    .faculty-grid,
    .students-grid,
    .lectures-grid,
    .certificate-grid,
    .chart-grid,
    .charts-grid,
    .content-grid,
    .summary-cards,
    .summary-grid,
    .application-meta,
    .alert-grid,
    .analytics-grid,
    .form-grid,
    .form-row,
    .filters-grid,
    .filters,
    .result-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .search-filter-bar,
    .filter-group,
    .filters-actions,
    .btn-group,
    .actions {
        flex-wrap: wrap;
        min-width: 0;
    }

    .form-group input,
    .form-group select,
    .form-group textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px;
    }
}