/* ==========================================================================
   ACTI Compact Internal Screens
   Student, Parent and Administration screens only
   The public homepage is unaffected
   ========================================================================== */

/* Remove the large public-layout gap below the website header. */

body:has(.admin-dashboard-page) main,
body:has(.admin-page) main {
    padding-top: 10px !important;
    padding-bottom: 24px !important;
}

/* ==========================================================================
   Dashboard page
   ========================================================================== */

.admin-dashboard-page {
    width: min(calc(100% - 40px), 1480px) !important;
    margin: 0 auto !important;
}

/* Compact welcome/header panel. */

.admin-dashboard-header {
    min-height: 0 !important;
    margin: 0 0 14px !important;
    padding: 16px 22px !important;
}

.admin-dashboard-header > div:first-child {
    min-width: 0;
}

.admin-dashboard-header > div:first-child > span {
    margin: 0 !important;
}

.admin-dashboard-header h1 {
    margin: 3px 0 5px !important;
    font-size: clamp(1.7rem, 2.5vw, 2.2rem) !important;
    line-height: 1.12 !important;
}

.admin-dashboard-header p {
    margin: 0 !important;
    line-height: 1.35 !important;
}

.admin-dashboard-actions {
    gap: 10px !important;
}

.admin-dashboard-actions form {
    margin: 0 !important;
}

.admin-dashboard-primary-action,
.admin-dashboard-secondary-action {
    min-height: 40px !important;
    padding: 8px 16px !important;
}

/* Compact success and information messages. */

.admin-dashboard-page > .admin-card {
    margin: 0 0 14px !important;
    padding: 13px 18px !important;
}

/* ==========================================================================
   Two-row statistic cards
   Row 1: label and value
   Row 2: description
   ========================================================================== */

.admin-statistics-grid {
    gap: 14px !important;
    margin: 0 0 16px !important;
}

.admin-statistic-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px 18px !important;
}

.admin-statistic-card > span {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
}

.admin-statistic-card > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.admin-statistic-card > p {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

/* ==========================================================================
   Frames below the statistics
   ========================================================================== */

.admin-module-section {
    margin: 0 0 16px !important;
    padding: 18px 22px !important;
}

.admin-module-section > header {
    margin: 0 0 13px !important;
}

.admin-module-section > header h2 {
    margin-bottom: 0 !important;
}

.admin-module-grid {
    gap: 14px !important;
}

.admin-module-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 15px 18px !important;
}

.admin-module-card h3 {
    margin: 0 0 6px !important;
}

.admin-module-card p {
    margin: 0 0 4px !important;
}

/* ==========================================================================
   Regular internal administration screens
   ========================================================================== */

.admin-page {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
}

.admin-page > .admin-page-header {
    margin-bottom: 12px !important;
    padding: 14px 20px !important;
}

.admin-page > .admin-card {
    margin-bottom: 14px !important;
    padding: 16px 20px !important;
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 820px) {
    body:has(.admin-dashboard-page) main,
    body:has(.admin-page) main {
        padding-top: 8px !important;
    }

    .admin-dashboard-page,
    .admin-page {
        width: min(calc(100% - 20px), 820px) !important;
    }

    .admin-dashboard-header {
        padding: 15px 18px !important;
    }

    .admin-statistic-card,
    .admin-module-card {
        padding: 14px 16px !important;
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 560px) {
    .admin-dashboard-page,
    .admin-page {
        width: calc(100% - 16px) !important;
    }

    .admin-dashboard-header {
        margin-bottom: 12px !important;
        padding: 14px 15px !important;
    }

    .admin-dashboard-page > .admin-card {
        margin-bottom: 12px !important;
        padding: 12px 15px !important;
    }

    .admin-statistics-grid,
    .admin-module-grid {
        gap: 12px !important;
    }

    .admin-statistic-card {
        padding: 13px 15px !important;
    }

    .admin-module-section {
        padding: 16px 15px !important;
    }

    .admin-page > .admin-page-header,
    .admin-page > .admin-card {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Reduce the remaining header-to-content gap by approximately half. */

.admin-dashboard-page,
.admin-page {
    margin-top: -28px !important;
}

@media (max-width: 820px) {
    .admin-dashboard-page,
    .admin-page {
        margin-top: -18px !important;
    }
}

@media (max-width: 560px) {
    .admin-dashboard-page,
    .admin-page {
        margin-top: -10px !important;
    }
}