@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@media screen {
    body.gtna-compact {
        --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
        --ui-radius: .65rem;
        --ui-control-radius: .45rem;
        --ui-shadow: 0 2px 8px rgba(15, 23, 42, .035);
        font-family: var(--ui-font);
        font-size: .8125rem;
        line-height: 1.45;
    }

    body.gtna-compact .main-content {
        padding: .35rem .7rem .65rem;
        font-size: .8125rem;
    }

    body.gtna-compact :is(.main-content, .gtna-standalone) > :is(.container, .container-fluid, .acct-page) {
        padding: .5rem .25rem !important;
    }

    body.gtna-compact :is(.main-content, .gtna-standalone) .row:not(.g-0):not(.gx-0) {
        --bs-gutter-x: .75rem;
    }

    body.gtna-compact :is(.main-content, .gtna-standalone) .row:not(.g-0):not(.gy-0) {
        --bs-gutter-y: .65rem;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(h1, h2, h3, h4, h5, h6) {
        font-family: var(--ui-font);
        font-weight: 600 !important;
        letter-spacing: -.02em;
        line-height: 1.35;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) h1:not([class*="display-"]) { font-size: 1.3rem !important; }
    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) h2:not([class*="display-"]) { font-size: 1.15rem !important; }
    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) h3:not([class*="display-"]) { font-size: 1.05rem !important; }
    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) h4:not([class*="display-"]) { font-size: 1rem !important; }
    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) h5:not([class*="display-"]) { font-size: .88rem !important; }
    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) h6:not([class*="display-"]) { font-size: .8rem !important; }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .card {
        border-radius: var(--ui-radius) !important;
        box-shadow: var(--ui-shadow) !important;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .card-body:not(.p-0) {
        padding: .7rem !important;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(.card-header, .card-footer):not(.p-0) {
        padding: .5rem .7rem !important;
    }

    body.gtna-compact .main-content :is(.portal-hero-compact, .student-classes-hero, .grading-hero, .gradebook-hero, .assignment-hero, .notifications-hero, .parent-hero, .children-hero, .calendar-hero, .teacher-submissions-head, .hub-header-card) {
        padding: .65rem .75rem !important;
        margin-bottom: .65rem !important;
        border-radius: var(--ui-radius) !important;
        box-shadow: var(--ui-shadow) !important;
    }

    body.gtna-compact .main-content :is(.subject-portrait-head, .subject-portrait-body, .assignment-overview-head) {
        padding: .6rem .7rem;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .form-label {
        margin-bottom: .25rem;
        font-size: .72rem;
        font-weight: 500 !important;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(.form-control, .form-select, .input-group-text) {
        min-height: 30px;
        padding-top: .3rem !important;
        padding-bottom: .3rem !important;
        padding-left: .55rem;
        border-radius: var(--ui-control-radius) !important;
        font-family: var(--ui-font);
        font-size: .78rem !important;
        line-height: 1.4;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(input, select, textarea, button) {
        font-family: var(--ui-font);
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .btn {
        border-radius: var(--ui-control-radius);
        font-size: .75rem;
        font-weight: 500;
        line-height: 1.4;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .btn:not(.rounded-circle):not(.p-0):not(.admin-action-btn):not([class*="icon-btn"]) {
        min-height: 30px;
        padding: .3rem .6rem !important;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .btn-sm {
        font-size: .72rem;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(.form-check-input, .btn, .form-control, .form-select):focus-visible {
        outline: 2px solid var(--gtna-primary, #4f46e5);
        outline-offset: 2px;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .table > :not(caption) > * > :is(th, td) {
        padding: .4rem .55rem !important;
        line-height: 1.4;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .table thead th {
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .025em;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .table tbody td {
        font-size: .78rem;
    }

    body.gtna-compact .table .subject-class-name {
        font-size: .78rem;
        font-weight: 600;
        line-height: 1.25;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .table .subject-class-metadata {
        margin-top: 1px !important;
        font-size: .68rem;
        line-height: 1.2;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .table > :not(caption) > .subject-class-row > td {
        padding-block: .3rem !important;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .alert {
        padding: .55rem .7rem;
        border-radius: var(--ui-radius);
        font-size: .78rem;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(small, .small, .form-text) {
        font-size: .74rem;
        line-height: 1.4;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(.mb-4, .mb-5) {
        margin-bottom: .8rem !important;
    }

    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(.mt-4, .mt-5) {
        margin-top: .8rem !important;
    }

    body.gtna-compact .modal-content {
        border-radius: .75rem;
        font-family: var(--ui-font);
        font-size: .8125rem;
    }

    body.gtna-compact .modal :is(.modal-header, .modal-footer) { padding: .6rem .75rem; }
    body.gtna-compact .modal .modal-body { padding: .75rem !important; }

    body.gtna-compact .sidebar .nav-link {
        padding: .35rem .75rem;
        gap: .5rem;
        font-size: .75rem;
        line-height: 1.45;
    }

    body.gtna-compact .sidebar-brand { padding: .65rem .85rem; }
    body.gtna-compact .sidebar-user-wrap { padding: .4rem .85rem; }
    body.gtna-compact .sidebar-user-name { font-size: .78rem; font-weight: 600; }
    body.gtna-compact .sidebar-section-label { padding: .5rem .85rem .15rem; }
    body.gtna-compact .page-backbar { margin-bottom: .35rem; }
    body.gtna-compact .page-backbar :is(.btn, .page-meta-chip) {
        min-height: 28px;
        padding: .25rem .55rem;
        font-size: .73rem;
        font-weight: 500;
        box-shadow: var(--ui-shadow);
    }

    body.gtna-compact > footer { padding: .5rem .75rem !important; }

    body.gtna-compact.gtna-entry { font-family: var(--ui-font); padding-block: 1rem; }
    body.gtna-compact.gtna-entry .school-logo {
        font-size: clamp(1.25rem, 3vw, 2rem);
        font-weight: 600;
        letter-spacing: -.025em;
    }
    body.gtna-compact.gtna-entry .portal-rail { padding: .85rem; border-radius: .85rem; }
    body.gtna-compact.gtna-entry .portal-card { padding: .85rem !important; border-radius: var(--ui-radius); }
    body.gtna-compact.gtna-entry .portal-card :is(h2, h3) { font-size: 1rem; font-weight: 600; }
    body.gtna-compact.gtna-entry .portal-icon { width: 40px; height: 40px; font-size: 1.15rem; margin-bottom: .55rem; }
    body.gtna-compact.gtna-entry .login-section { padding: 1rem; }
    body.gtna-compact.gtna-entry .card-body { padding: 1rem !important; }
    body.gtna-compact.gtna-entry .modal-header { padding: .7rem .85rem; }
    body.gtna-compact.gtna-entry .login-section .card { border-radius: .75rem; }
}

@media screen and (max-width: 991.98px) {
    body.gtna-compact .main-content { padding: .45rem .6rem .75rem; }
    body.gtna-compact .page-backbar { gap: .4rem; }
}

@media screen and (max-width: 575.98px) {
    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(.form-control, .form-select) {
        font-size: 1rem !important;
        min-height: 36px;
    }
    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) .btn:not(.p-0):not(.admin-action-btn):not([class*="icon-btn"]) {
        min-height: 36px;
    }
    body.gtna-compact.gtna-entry .portal-icon { margin-bottom: .35rem; }
}

@media screen and (pointer: coarse) {
    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(.btn, .form-control, .form-select),
    body.gtna-compact .sidebar .nav-link {
        min-height: 44px;
    }
    body.gtna-compact :is(.main-content, .modal, .gtna-standalone) :is(.admin-action-btn, [class*="icon-btn"], .btn.rounded-circle) {
        min-width: 44px;
        height: 44px;
    }
}