/**
 * Nipun ERP — Universal Responsive UI System
 * Mobile-first layout primitives shared across panels.
 */

:root {
    --erp-bp-mobile-max: 767px;
    --erp-bp-tablet-min: 768px;
    --erp-bp-tablet-max: 1024px;
    --erp-bp-laptop-min: 1025px;
    --erp-bp-laptop-max: 1440px;
    --erp-bp-desktop-min: 1441px;

    --erp-color-navy: #022248;
    --erp-color-brand: #3170de;
    --erp-color-accent: #b8872d;
    --erp-color-surface: #f4f6fb;
    --erp-color-border: #e2e8f0;
    --erp-color-muted: #64748b;
    --erp-color-text: #1e293b;

    --erp-font-sans: Inter, "Noto Sans Telugu", "Nunito Sans", system-ui, sans-serif;
    --erp-font-heading: "Source Sans 3", Inter, system-ui, sans-serif;

    --erp-radius-sm: 8px;
    --erp-radius-md: 12px;
    --erp-radius-lg: 16px;

    --erp-space-xs: 0.35rem;
    --erp-space-sm: 0.65rem;
    --erp-space-md: 1rem;
    --erp-space-lg: 1.5rem;
    --erp-space-xl: 2rem;

    --erp-touch-min: 44px;
    --erp-header-h: 3.25rem;
    --erp-sidebar-w: 18rem;
    --erp-container-max: 88rem;
}

/* ---- Base: prevent horizontal page scroll ---- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.erp-ui,
body.fr-portal,
body.login-portal,
body.sp-portal,
body.pp-portal {
    overflow-x: clip;
    max-width: 100vw;
}

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

/* ---- Page shell ---- */
.erp-page {
    width: 100%;
    max-width: var(--erp-container-max);
    margin-inline: auto;
    padding: clamp(0.75rem, 2.5vw, 1.5rem);
}

.erp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--erp-space-sm) var(--erp-space-md);
    margin-bottom: var(--erp-space-lg);
}

.erp-page-header h1,
.erp-page-header .erp-page-title {
    margin: 0;
    font-family: var(--erp-font-heading);
    font-size: clamp(1.25rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--erp-color-navy);
    letter-spacing: -0.02em;
}

.erp-page-header .erp-page-lead {
    margin: 0.35rem 0 0;
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    line-height: 1.55;
    color: var(--erp-color-muted);
    max-width: 42rem;
}

.erp-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ---- Cards ---- */
.erp-card {
    background: #fff;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-md);
    box-shadow: 0 1px 3px rgba(2, 34, 72, 0.05);
    padding: clamp(0.85rem, 2vw, 1.25rem);
}

.erp-card + .erp-card {
    margin-top: var(--erp-space-md);
}

.erp-card-title {
    margin: 0 0 0.5rem;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    font-weight: 700;
    color: var(--erp-color-navy);
}

/* ---- Dashboard widget grid ---- */
.erp-dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--erp-space-md);
}

@media (min-width: 768px) {
    .erp-dash-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.erp-stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 5.5rem;
    padding: 1rem 1.1rem;
    border-radius: var(--erp-radius-md);
    border: 1px solid var(--erp-color-border);
    background: #fff;
}

.erp-stat-card strong {
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: var(--erp-color-navy);
    line-height: 1.1;
}

.erp-stat-card span {
    font-size: 0.875rem;
    color: var(--erp-color-muted);
}

/* ---- Forms ---- */
.erp-form {
    display: grid;
    gap: var(--erp-space-md);
}

.erp-form-row {
    display: grid;
    gap: var(--erp-space-md);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .erp-form-row--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

.erp-field label,
.erp-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--erp-color-text);
}

.erp-field input,
.erp-field select,
.erp-field textarea,
.erp-form input:not([type="checkbox"]):not([type="radio"]),
.erp-form select,
.erp-form textarea {
    width: 100%;
    min-height: var(--erp-touch-min);
    padding: 0.55rem 0.75rem;
    font-size: 1rem;
    line-height: 1.4;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-sm);
    background: #fff;
    color: var(--erp-color-text);
}

.erp-field textarea,
.erp-form textarea {
    min-height: 6rem;
    resize: vertical;
}

.erp-field input:focus,
.erp-field select:focus,
.erp-field textarea:focus,
.erp-form input:focus,
.erp-form select:focus,
.erp-form textarea:focus {
    outline: 2px solid rgba(49, 112, 222, 0.35);
    outline-offset: 1px;
    border-color: var(--erp-color-brand);
}

/* ---- Buttons (44px touch target) ---- */
.erp-btn,
button.erp-btn,
a.erp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: var(--erp-touch-min);
    padding: 0.55rem 1.1rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border-radius: var(--erp-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.erp-btn--primary {
    background: var(--erp-color-navy);
    color: #fff;
}

.erp-btn--primary:hover {
    background: #0a3560;
}

.erp-btn--secondary {
    background: #fff;
    color: var(--erp-color-navy);
    border-color: var(--erp-color-border);
}

.erp-btn--block {
    width: 100%;
}

/* Sticky mobile action bar */
.erp-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-top: var(--erp-space-lg);
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--erp-color-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
    .erp-sticky-actions {
        position: static;
        padding: 0;
        margin-top: var(--erp-space-md);
        background: transparent;
        border-top: 0;
        backdrop-filter: none;
    }
}

/* ---- Tables ---- */
.erp-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--erp-color-border);
    border-radius: var(--erp-radius-md);
    background: #fff;
}

.erp-table-wrap table,
table.erp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.erp-table-wrap th,
.erp-table-wrap td,
table.erp-table th,
table.erp-table td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--erp-color-border);
}

.erp-table-wrap th,
table.erp-table th {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--erp-color-muted);
    background: #f8fafc;
    white-space: nowrap;
}

.erp-table-wrap tr:last-child td,
table.erp-table tr:last-child td {
    border-bottom: 0;
}

/* Mobile card view for tables marked data-erp-table="responsive" */
@media (max-width: 767px) {
    .erp-table--cards thead {
        display: none;
    }

    .erp-table--cards tbody,
    .erp-table--cards tr,
    .erp-table--cards td {
        display: block;
        width: 100%;
    }

    .erp-table-wrap {
        padding-inline: 0.15rem;
    }

    .erp-table--cards tr {
        margin-bottom: 0.85rem;
        padding: 0.9rem 1rem;
        border: 1px solid var(--erp-color-border);
        border-radius: var(--erp-radius-md);
        background: #fff;
        box-shadow: 0 2px 10px rgba(2, 34, 72, 0.05);
    }

    .erp-table--cards td {
        padding: 0.4rem 0;
        border: 0;
        font-size: 0.9375rem;
        line-height: 1.45;
    }

    .erp-table--cards td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--erp-color-muted);
        margin-bottom: 0.2rem;
    }

    .erp-table--cards td:first-child {
        padding-top: 0;
        padding-bottom: 0.55rem;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid #f1f5f9;
        font-size: 1rem;
        font-weight: 700;
        color: var(--erp-color-navy);
        line-height: 1.35;
    }

    .erp-table--cards td:first-child::before {
        display: none;
    }

    .erp-table--cards td:not([data-label])::before,
    .erp-table--cards td[data-label=""]::before {
        display: none;
    }

    .erp-table--cards td .flex,
    .erp-table--cards td [class*="gap-"] {
        flex-wrap: wrap;
        gap: 0.45rem;
    }
}

/* ---- Modals ---- */
.erp-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(2, 34, 72, 0.45);
    padding: 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

@media (min-width: 768px) {
    .erp-modal-backdrop {
        align-items: center;
    }
}

.erp-modal {
    width: 100%;
    max-width: 32rem;
    max-height: min(90vh, 720px);
    overflow: auto;
    border-radius: var(--erp-radius-lg);
    background: #fff;
    box-shadow: 0 24px 64px rgba(2, 34, 72, 0.22);
    padding: 1.25rem;
}

.erp-modal-title {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--erp-color-navy);
}

/* ---- Accessibility helpers ---- */
.erp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--erp-color-brand);
    outline-offset: 2px;
}

/* Panel compatibility: upgrade common table wrappers */
.fr-portal .table-gov-wrap,
.fr-portal .overflow-x-auto,
body.fr-portal main .overflow-x-auto {
    max-width: 100%;
}

.fr-portal .table-gov {
    min-width: 0;
}

@media (max-width: 767px) {
    .fr-portal .table-gov {
        min-width: 640px;
    }

    .fr-portal .table-gov-wrap,
    .fr-portal .erp-table-wrap {
        margin-inline: calc(-1 * clamp(0.75rem, 2.5vw, 1.5rem));
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
}

/* Login touch targets */
.login-portal button,
.login-portal .login-submit,
.login-portal a.login-btn {
    min-height: var(--erp-touch-min);
}

/* Partner portal */
body.pp-portal {
    font-family: var(--erp-font-sans);
    overflow-x: clip;
}

body.pp-portal .overflow-x-auto {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

body.pp-portal table {
    min-width: 0;
}

@media (max-width: 767px) {
    body.pp-portal button,
    body.pp-portal a[role="button"],
    body.pp-portal .btn {
        min-height: var(--erp-touch-min);
    }

    body.pp-portal .erp-table-wrap {
        margin-inline: -1rem;
        border-radius: 0;
    }
}

/* Admin panel — NCC mobile helpers globally */
.adm-sidebar ~ main .ncc-datatable,
.adm-sidebar ~ .flex-1 .ncc-datatable,
body.erp-ui .ncc-datatable {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 768px) {
    .ncc-stat-grid {
        grid-template-columns: 1fr 1fr !important;
    }

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

/* Attendance workflow — allow wrap on small screens */
.fr-portal nav[aria-label="Attendance workflow"] ol {
    min-width: 0;
}

.fr-portal nav[aria-label="Attendance workflow"] ol > li {
    min-width: min(100%, 9rem);
}

@media (max-width: 639px) {
    .fr-portal nav[aria-label="Attendance workflow"] ol > li {
        flex: 1 1 calc(50% - 0.25rem);
    }
}

/* Homepage — prevent horizontal scroll, touch-friendly CTAs */
body.home-page,
body.hp-home-page {
    overflow-x: clip;
    max-width: 100vw;
}

@media (max-width: 767px) {
    body.home-page .hp-nav-cta,
    body.home-page .hp-header-actions a,
    body.home-page .hp-mobile-menu-btn,
    body.home-page .hp-sticky-cta a {
        min-height: var(--erp-touch-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.home-page section {
        padding-inline: clamp(0.75rem, 4vw, 1.25rem);
    }
}

/* Login — mobile stack + touch targets */
@media (max-width: 959px) {
    .login-portal .login-layout {
        flex-direction: column;
        min-height: 100dvh;
    }

    .login-portal .login-hero {
        flex: 0 0 auto;
        min-height: auto;
        padding: 1.25rem 1rem;
    }

    .login-portal .login-shell {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        padding: 1rem;
    }
}

.login-portal input[type="submit"],
.login-portal button[type="submit"],
.login-portal .login-role-tab {
    min-height: var(--erp-touch-min);
}

/* Fee workflow — wrap on small screens */
.fr-portal nav[aria-label="Fee billing workflow"] ol {
    min-width: 0;
}

.fr-portal nav[aria-label="Fee billing workflow"] ol > li {
    min-width: min(100%, 8.5rem);
}

@media (max-width: 639px) {
    .fr-portal nav[aria-label="Fee billing workflow"] ol > li {
        flex: 1 1 calc(50% - 0.25rem);
    }
}

/* Attendance mark — status buttons on mobile */
@media (max-width: 767px) {
    .fr-portal .erp-table--cards td .att-status-btn,
    .fr-portal table[data-erp-table="responsive"] td button {
        min-height: var(--erp-touch-min);
        min-width: var(--erp-touch-min);
    }
}

/* ============================================================
   Mobile sidebar + panel menus (hamburger, backdrop, accordion)
   ============================================================ */
.erp-sidebar-backdrop,
#fr-sidebar-backdrop,
#sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(2, 34, 72, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.erp-sidebar-backdrop.hidden,
#sidebar-backdrop.hidden {
    display: none !important;
}

body.erp-sidebar-open {
    overflow: hidden;
}

body.erp-sidebar-open #sidebar,
body.erp-sidebar-open #partner-sidebar,
body.erp-sidebar-open .fr-sidebar#sidebar {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    #sidebar.fr-sidebar,
    .fr-sidebar#sidebar {
        z-index: 40 !important;
    }

    #fr-panel-global-bar,
    .fr-panel-global-bar {
        display: flex !important;
        z-index: 30;
        position: sticky;
        top: 0;
    }

    #fr-sidebar-mobile-fab {
        z-index: 38;
        -webkit-tap-highlight-color: transparent;
    }
    #sidebar,
    #partner-sidebar,
    .adm-sidebar,
    .fr-sidebar#sidebar {
        width: min(18.5rem, 88vw) !important;
        max-width: 88vw;
    }

    #sidebar nav,
    #partner-sidebar nav,
    .adm-sidebar nav,
    .fr-sidebar#sidebar nav {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        flex: 1 1 auto;
        min-height: 0;
    }

    #sidebar nav a,
    #partner-sidebar nav a,
    .adm-sidebar nav a,
    .adm-sidebar nav button,
    .fr-sidebar#sidebar .fr-sidebar-link {
        min-height: var(--erp-touch-min);
        white-space: normal;
        word-break: break-word;
        line-height: 1.35;
    }

    .adm-nav-section-btn,
    .adm-nav-group-btn,
    [data-menu-toggle] {
        min-height: var(--erp-touch-min);
        width: 100%;
        text-align: left;
    }

    [data-menu].erp-accordion-open {
        animation: erp-accordion-in 0.28s ease;
    }

    [data-sidebar-toggle],
    [data-sidebar-open],
    #sidebar-toggle,
    [data-fr-sidebar-toggle],
    [data-partner-sidebar-toggle] {
        min-width: var(--erp-touch-min);
        min-height: var(--erp-touch-min);
    }
}

@keyframes erp-accordion-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Teacher portal mobile sidebar */
@media (max-width: 767px) {
    body.tp-portal #sidebar,
    body:not(.pp-portal) #sidebar.tp-side-link {
        z-index: 50;
    }

    body .tp-side-link {
        min-height: var(--erp-touch-min);
    }
}

/* Partner sidebar open state */
@media (max-width: 767px) {
    #partner-sidebar.translate-x-0,
    #partner-sidebar.erp-sidebar-is-open {
        transform: translateX(0) !important;
    }
}

/* ============================================================
   Mobile shell polish — menus, backdrop, panel bars
   ============================================================ */
/* Franchise mobile top bar — no Tailwind required */
.fr-panel-global-bar {
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    #fr-panel-global-bar,
    .fr-panel-global-bar {
        display: none !important;
    }
}

@keyframes erp-backdrop-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.erp-sidebar-backdrop:not(.hidden) {
    animation: erp-backdrop-in 0.22s ease;
}

@media (max-width: 767px) {
    #sidebar.is-open,
    #sidebar.erp-sidebar-is-open,
    #sidebar.translate-x-0,
    #partner-sidebar.is-open,
    #partner-sidebar.erp-sidebar-is-open,
    .adm-sidebar.is-open,
    .adm-sidebar.erp-sidebar-is-open,
    .fr-sidebar#sidebar.is-open,
    .fr-sidebar#sidebar.erp-sidebar-is-open {
        box-shadow: 12px 0 40px rgba(46, 16, 101, 0.38);
    }

    .fr-panel-global-bar {
        padding-top: max(0.55rem, env(safe-area-inset-top, 0px));
        padding-bottom: 0.55rem;
        gap: 0.65rem;
        border-bottom-color: rgba(103, 61, 230, 0.14);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 18px rgba(76, 29, 149, 0.07);
    }

    .fr-panel-global-bar [data-fr-sidebar-toggle] {
        border-radius: 0.85rem;
        border-color: rgba(103, 61, 230, 0.28);
        background: linear-gradient(180deg, rgba(103, 61, 230, 0.1) 0%, rgba(103, 61, 230, 0.06) 100%);
        color: #673de6;
        box-shadow: 0 1px 2px rgba(76, 29, 149, 0.08);
        transition: transform 0.15s ease, background 0.15s ease;
    }

    .fr-panel-global-bar [data-fr-sidebar-toggle]:active {
        transform: scale(0.96);
    }

    [data-sidebar-toggle],
    [data-sidebar-open],
    #sidebar-toggle,
    [data-fr-sidebar-toggle],
    [data-partner-sidebar-toggle],
    [data-sidebar-close] {
        transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    [data-sidebar-toggle]:active,
    [data-sidebar-open]:active,
    #sidebar-toggle:active,
    [data-fr-sidebar-toggle]:active,
    [data-partner-sidebar-toggle]:active {
        transform: scale(0.96);
    }

    [data-sidebar-toggle]:focus-visible,
    [data-fr-sidebar-toggle]:focus-visible,
    #sidebar-toggle:focus-visible,
    [data-partner-sidebar-toggle]:focus-visible {
        outline: 2px solid var(--erp-color-brand, #3170de);
        outline-offset: 2px;
    }

    body.erp-sidebar-open .sp-student-menu-fab,
    body.erp-sidebar-open .tp-menu-fab,
    body.erp-sidebar-open #fr-sidebar-mobile-fab {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.92);
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    #sidebar nav a,
    #partner-sidebar nav a,
    .fr-sidebar#sidebar .fr-sidebar-link {
        border-left: 3px solid transparent;
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    #sidebar nav a.bg-blue-50,
    #sidebar nav a.tp-side-link--active,
    .erp-sidebar.fr-sidebar#sidebar .fr-sidebar-link.is-active-link {
        border-left-color: #fff;
    }

    body.fr-portal > main,
    body.fr-portal > #page-main {
        padding-inline: clamp(0.75rem, 3.5vw, 1.25rem);
    }

    body.fr-portal .school-hero {
        margin-inline: -0.15rem;
        border-radius: 0 0 1.35rem 1.35rem;
    }

    body.fr-portal .rounded-2xl.border.bg-white.shadow-sm,
    body.fr-portal .hub-card {
        border-radius: 1.1rem;
    }

    .erp-mobile-topbar,
    #erp-mobile-topbar {
        z-index: 30;
        position: sticky;
        top: 0;
        padding-top: max(0.55rem, env(safe-area-inset-top, 0px));
        padding-bottom: 0.55rem;
        gap: 0.65rem;
        border-bottom-color: rgba(226, 232, 240, 0.95);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 18px rgba(15, 23, 42, 0.06);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .erp-mobile-topbar__toggle,
    .erp-mobile-topbar [data-sidebar-toggle],
    .erp-mobile-topbar [data-fr-sidebar-toggle] {
        border-radius: 0.85rem;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    body.pp-portal .pp-page-intro a {
        min-height: var(--erp-touch-min);
        display: inline-flex;
        align-items: center;
    }
}