:root {
    --mg-primary: #2196f3;
    --mg-primary-dark: #1976d2;
    --mg-primary-soft: #e3f2fd;
    --mg-button-primary: #2196f3;
    --mg-button-primary-hover: #1976d2;
    --mg-success: #25b372;
    --mg-warning: #f5a623;
    --mg-danger: #ef5350;
    --mg-surface: #fff;
    --mg-surface-subtle: #f8f9fa;
    --mg-page: #f1f4f8;
    --mg-border: #ddd;
    --mg-text: #333;
    --mg-muted: #777;
    --mg-nav: #263238;
    --mg-field: #fff;
    --mg-field-border: #ccc;
    --mg-row-alt: #fcfcfc;
    --mg-row-hover: #eef7ff;
    --mg-detail: #f4f8fc;
    --mg-detail-label: #f8fafc;
    --mg-detail-border: #dbe3ea;
    --mg-track: #e9ecef;
    --mg-progress-start: #2196f3;
    --mg-progress-end: #26a69a;
    --mg-success-soft: #e8f5e9;
    --mg-success-ink: #087f5b;
    --mg-info-ink: #1565c0;
    --mg-warning-soft: #fff3e0;
    --mg-warning-ink: #9a5b00;
    --mg-danger-soft: #ffebee;
    --mg-danger-ink: #c62828;
    --mg-auth-bg:
        linear-gradient(rgb(38 50 56 / 88%), rgb(38 50 56 / 88%)),
        radial-gradient(circle at 20% 20%, #2196f3, transparent 42%),
        #263238;
    --mg-radius: .25rem;
    --mg-shadow: 0 1px 2px rgb(0 0 0 / 7%);
    --mg-content: 1480px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --mg-primary: #51a8ff;
    --mg-primary-dark: #8bc5ff;
    --mg-primary-soft: #263d54;
    --mg-button-primary: #287fc4;
    --mg-button-primary-hover: #3294df;
    --mg-success: #34d399;
    --mg-warning: #fb923c;
    --mg-danger: #f87171;
    --mg-surface: #2c2d33;
    --mg-surface-subtle: #32333a;
    --mg-page: #1e1f24;
    --mg-border: #3f4149;
    --mg-text: #f3f4f6;
    --mg-muted: #a7aab3;
    --mg-nav: #141517;
    --mg-field: #25262b;
    --mg-field-border: #4b4d56;
    --mg-row-alt: #303138;
    --mg-row-hover: #263b50;
    --mg-detail: #252a31;
    --mg-detail-label: #2d333c;
    --mg-detail-border: #454a54;
    --mg-track: #454750;
    --mg-progress-start: #51a8ff;
    --mg-progress-end: #4db6ac;
    --mg-success-soft: #193d32;
    --mg-success-ink: #6ee7b7;
    --mg-info-ink: #93c5fd;
    --mg-warning-soft: #4a3222;
    --mg-warning-ink: #fdba74;
    --mg-danger-soft: #4b252b;
    --mg-danger-ink: #fda4af;
    --mg-auth-bg:
        radial-gradient(circle at 20% 20%, rgb(81 168 255 / 24%), transparent 38%),
        #141517;
    --mg-shadow: 0 1px 3px rgb(0 0 0 / 32%);
}

:root[data-theme="pink-pastel"] {
    --mg-primary: #8b5cf6;
    --mg-primary-dark: #7c3aed;
    --mg-primary-soft: #f3e8ff;
    --mg-button-primary: linear-gradient(135deg, #ec4899, #8b5cf6 62%, #38bdf8);
    --mg-button-primary-hover: linear-gradient(135deg, #db2777, #7c3aed 62%, #0ea5e9);
    --mg-success: #34b88a;
    --mg-warning: #f59e79;
    --mg-danger: #ef6f91;
    --mg-surface: #fffafd;
    --mg-surface-subtle: #fff4fa;
    --mg-page: linear-gradient(135deg, #fff7fb 0%, #fdf8ff 45%, #f2f9ff 100%);
    --mg-border: #e7d7e5;
    --mg-text: #35283a;
    --mg-muted: #806f84;
    --mg-nav: linear-gradient(120deg, #4c3158, #70406d);
    --mg-field: #fff;
    --mg-field-border: #dfcde0;
    --mg-row-alt: #fff7fb;
    --mg-row-hover: #f7edff;
    --mg-detail: #fdf6ff;
    --mg-detail-label: #f8effd;
    --mg-detail-border: #e5d3ed;
    --mg-track: #ebe5f3;
    --mg-progress-start: #7dd3fc;
    --mg-progress-end: #c4b5fd;
    --mg-success-soft: #e8fbf4;
    --mg-success-ink: #248466;
    --mg-info-ink: #7c3aed;
    --mg-warning-soft: #fff1eb;
    --mg-warning-ink: #a65f49;
    --mg-danger-soft: #ffe8ef;
    --mg-danger-ink: #b84366;
    --mg-auth-bg:
        radial-gradient(circle at 18% 18%, rgb(125 211 252 / 38%), transparent 34%),
        radial-gradient(circle at 82% 78%, rgb(196 181 253 / 42%), transparent 38%),
        linear-gradient(135deg, #fff7fb, #f5f1ff 55%, #edf8ff);
    --mg-shadow: 0 1px 3px rgb(112 64 109 / 14%);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 3.5rem;
}

body {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    color: var(--mg-text);
    background: var(--mg-page);
    font-family: Inter, sans-serif;
}

:root[data-theme] .card,
:root[data-theme] .dropdown-menu,
:root[data-theme] .modal-content,
:root[data-theme] .offcanvas,
:root[data-theme] .list-group-item {
    color: var(--mg-text);
    background-color: var(--mg-surface);
    border-color: var(--mg-border);
}

:root[data-theme] .dropdown-item {
    color: var(--mg-text);
}

:root[data-theme] .dropdown-item:hover,
:root[data-theme] .dropdown-item:focus {
    color: var(--mg-text);
    background-color: var(--mg-row-hover);
}

:root[data-theme] .form-control,
:root[data-theme] .form-select {
    color: var(--mg-text);
    background-color: var(--mg-field);
    border-color: var(--mg-field-border);
}

:root[data-theme] .form-control:focus,
:root[data-theme] .form-select:focus {
    color: var(--mg-text);
    background-color: var(--mg-field);
    border-color: var(--mg-primary);
}

:root[data-theme] .btn-light,
:root[data-theme] .bg-light {
    color: var(--mg-text);
    background-color: var(--mg-surface-subtle) !important;
    border-color: var(--mg-border);
}

:root[data-theme] .text-body {
    color: var(--mg-text) !important;
}

:root[data-theme] .text-muted {
    color: var(--mg-muted) !important;
}

:root[data-theme] .border,
:root[data-theme] .border-top,
:root[data-theme] .border-end,
:root[data-theme] .border-bottom,
:root[data-theme] .border-start {
    border-color: var(--mg-border) !important;
}

:root[data-theme] select option {
    color: var(--mg-text);
    background: var(--mg-field);
}

a {
    color: var(--mg-primary-dark);
}

img {
    max-width: 100%;
}

/* Limitless application chrome */

.site-header.navbar {
    position: relative;
    z-index: 1030;
    min-height: 3.5rem;
    padding: 0;
    color: #fff;
    background: var(--mg-nav);
    border: 0;
}

.site-header > .container-fluid {
    min-height: 3.5rem;
}

.site-header .navbar-brand {
    min-width: 12rem;
    margin: 0;
    padding-block: .5rem;
}

.brand-mark {
    display: inline-grid;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: var(--mg-primary);
    border-radius: var(--mg-radius);
}

.brand-copy {
    margin-left: .75rem;
    line-height: 1.15;
}

.brand-copy strong,
.brand-copy small {
    display: block;
}

.brand-copy strong {
    color: #fff;
    font-size: .875rem;
    font-weight: 600;
}

.brand-copy small {
    margin-top: .1875rem;
    color: rgb(255 255 255 / 55%);
    font-size: .6875rem;
}

.site-header .navbar-nav-link {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    padding: .5rem .75rem;
    color: rgb(255 255 255 / 68%);
    font-size: .8125rem;
    font-weight: 500;
}

.site-header .navbar-nav-link:hover,
.site-header .navbar-nav-link:focus,
.site-header .navbar-nav-link.active {
    color: #fff;
    background: rgb(255 255 255 / 10%);
}

.site-header .navbar-toggler {
    margin-left: auto;
    color: #fff;
    border: 0;
}

.site-header .nav-profile-photo {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    background: rgb(255 255 255 / 12%);
}

.site-header .status-indicator {
    width: .5rem;
    height: .5rem;
}

.limitless-subnav {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 3rem;
    padding: .375rem 0;
    background: var(--mg-surface);
    border-bottom: 1px solid var(--mg-border);
    box-shadow: var(--mg-shadow);
}

.limitless-subnav .navbar-nav-link {
    display: flex;
    min-height: 2.25rem;
    align-items: center;
    padding: .4375rem .75rem;
    color: var(--mg-muted);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.limitless-subnav .navbar-nav-link:hover,
.limitless-subnav .navbar-nav-link:focus,
.limitless-subnav .navbar-nav-link.active {
    color: #fff;
    background: var(--mg-primary);
}

/* Page structure */

.home-shell,
.budget-shell,
.admin-shell,
.request-shell,
.endpoint-shell,
.repository-shell,
.health-shell,
.tutor-shell {
    width: min(100%, var(--mg-content));
    margin-inline: auto;
    padding: 1.5rem clamp(.875rem, 2vw, 1.5rem) 3rem;
}

.narrow {
    max-width: 960px;
}

.home-heading,
.budget-page-heading,
.admin-page-heading,
.request-page-heading,
.endpoint-page-heading,
.repository-page-heading,
.health-hero,
.tutor-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.home-heading h1,
.budget-page-heading h1,
.admin-page-heading h1,
.request-page-heading h1,
.endpoint-page-heading h1,
.repository-page-heading h1,
.health-hero h1,
.tutor-heading h1 {
    margin: .25rem 0 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 500;
    line-height: 1.25;
}

.home-heading p,
.budget-page-heading p,
.admin-page-heading p,
.request-page-heading p,
.endpoint-page-heading p,
.repository-page-heading p,
.health-hero p,
.tutor-heading p {
    max-width: 72ch;
    margin: .35rem 0 0;
    color: var(--mg-muted);
}

.eyebrow,
.home-card-kicker {
    display: inline-flex;
    color: var(--mg-primary-dark);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Limitless cards and grids */

.home-dashboard-card,
.home-card,
.hero-panel,
.form-showcase,
.component-panel,
.table-wrap,
.swatch-group,
.type-sample,
.budget-panel,
.budget-scope-panel,
.budget-metric,
.admin-panel,
.admin-metrics article,
.request-panel,
.request-bucket,
.request-card,
.endpoint-panel,
.endpoint-metric,
.repository-panel,
.repository-category-panel,
.health-panel,
.tutor-panel,
.auth-card,
.account-card,
.dialog-panel,
.receipt-preview-card,
.question-card {
    min-width: 0;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    box-shadow: var(--mg-shadow);
}

.home-dashboard-card,
.home-card,
.budget-panel,
.budget-scope-panel,
.admin-panel,
.request-panel,
.request-bucket,
.endpoint-panel,
.repository-panel,
.repository-category-panel,
.health-panel,
.tutor-panel {
    padding: 1.25rem;
}

.home-dashboard-grid,
.home-card-grid,
.budget-grid,
.admin-grid,
.request-grid,
.repository-detail-grid,
.health-grid,
.tutor-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
}

.home-dashboard-grid > *,
.home-card-grid > *,
.budget-grid > *,
.admin-grid > *,
.request-grid > *,
.repository-detail-grid > *,
.health-grid > *,
.tutor-dashboard-grid > * {
    grid-column: span 6;
}

.home-dashboard-card.wide,
.budget-grid > .wide,
.admin-grid > .wide,
.request-grid > .wide,
.repository-detail-grid > .wide,
.health-grid > .wide,
.tutor-dashboard-grid > .wide {
    grid-column: 1 / -1;
}

.home-card-header,
.budget-panel-heading,
.admin-panel-heading,
.request-panel-heading,
.endpoint-panel-heading,
.repository-panel-heading,
.tutor-panel-heading,
.role-panel-heading,
.request-card-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--mg-border);
}

.home-card-header h2,
.budget-panel-heading h2,
.admin-panel-heading h2,
.request-panel-heading h2,
.endpoint-panel-heading h2,
.repository-panel-heading h2,
.tutor-panel-heading h2,
.role-panel-heading h2,
.request-card-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.home-card-header p,
.budget-panel-heading p,
.admin-panel-heading p,
.request-panel-heading p,
.endpoint-panel-heading p,
.repository-panel-heading p,
.tutor-panel-heading p {
    margin: .25rem 0 0;
    color: var(--mg-muted);
}

.home-muted,
.budget-muted,
.admin-muted,
.health-muted,
.field-hint,
.wizard-help,
.generation-note {
    color: var(--mg-muted);
}

/* Metrics and progress */

.home-metric-strip,
.budget-summary,
.admin-metrics,
.endpoint-metrics,
.tutor-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .875rem;
    margin-bottom: 1.25rem;
}

.home-metric,
.budget-metric,
.admin-metrics article,
.endpoint-metric,
.tutor-metric {
    min-width: 0;
    padding: 1rem;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
}

.home-metric span,
.budget-metric span,
.admin-metrics span,
.endpoint-metric span,
.tutor-metric span {
    display: block;
    color: var(--mg-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.home-metric strong,
.budget-metric strong,
.admin-metrics strong,
.endpoint-metric strong,
.tutor-metric strong {
    display: block;
    margin-top: .25rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.home-metric small,
.budget-metric small,
.admin-metrics small,
.endpoint-metric small,
.tutor-metric small {
    display: block;
    margin-top: .25rem;
    color: var(--mg-muted);
}

.progress-track,
.home-bar-track,
.home-category-track,
.trouble-bar {
    display: block;
    height: .375rem;
    overflow: hidden;
    background: var(--mg-track);
    border-radius: 50rem;
}

.progress-track > *,
.home-bar-fill,
.home-category-track > *,
.trouble-bar > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--mg-progress-start), var(--mg-progress-end));
    border-radius: inherit;
}

meter,
progress {
    width: 100%;
    height: .5rem;
    accent-color: var(--mg-primary);
}

meter::-webkit-meter-bar {
    background: var(--mg-track);
    border: 0;
    border-radius: 50rem;
}

meter::-webkit-meter-optimum-value,
progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--mg-progress-start), var(--mg-progress-end));
    border-radius: 50rem;
}

meter::-moz-meter-bar,
progress::-moz-progress-bar {
    background: linear-gradient(90deg, var(--mg-progress-start), var(--mg-progress-end));
    border-radius: 50rem;
}

.category-row.near-limit meter,
.category-row.over-budget meter {
    accent-color: var(--mg-danger);
}

.category-row.near-limit meter::-webkit-meter-optimum-value,
.category-row.over-budget meter::-webkit-meter-optimum-value,
.home-category-track > .danger {
    background: var(--mg-danger);
}

.category-row.near-limit meter::-moz-meter-bar,
.category-row.over-budget meter::-moz-meter-bar {
    background: var(--mg-danger);
}

/* Buttons, fields, badges and alerts */

.button {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    min-height: 2.375rem;
    padding: .5rem .875rem;
    color: var(--mg-text);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
}

.button:hover {
    color: var(--mg-text);
    background: var(--mg-surface-subtle);
}

.button.primary {
    color: #fff;
    background: var(--mg-button-primary);
    border-color: var(--mg-primary);
}

.button.primary:hover {
    color: #fff;
    background: var(--mg-button-primary-hover);
}

.button.danger {
    color: #fff;
    background: var(--mg-danger);
    border-color: var(--mg-danger);
}

.button.ghost {
    background: transparent;
    border-color: transparent;
}

.button.compact {
    min-height: 2rem;
    padding: .3125rem .625rem;
    font-size: .75rem;
}

.button:disabled,
.button.disabled {
    pointer-events: none;
    opacity: .55;
}

.button-row,
.button-row,
.budget-action-row,
.budget-page-actions,
.budget-form-actions,
.admin-form-actions,
.request-card-actions,
.request-detail-actions,
.repository-detail-actions,
.repository-attachment-actions,
.profile-action-row,
.wizard-actions,
.dialog-actions,
.home-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    align-items: center;
}

.field,
.auth-form label,
.budget-form label,
.request-form label,
.admin-form label,
.repository-form label,
.tutor-form label {
    display: grid;
    gap: .4375rem;
    color: var(--mg-text);
    font-size: .8125rem;
    font-weight: 500;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea {
    width: 100%;
    min-height: 2.375rem;
    padding: .5rem .75rem;
    color: var(--mg-text);
    font: inherit;
    font-weight: 400;
    background: var(--mg-field);
    border: 1px solid var(--mg-field-border);
    border-radius: var(--mg-radius);
    outline: 0;
}

textarea {
    min-height: 5rem;
    resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--mg-primary);
    box-shadow: 0 0 0 .125rem rgb(33 150 243 / 20%);
}

input[type="checkbox"],
input[type="radio"] {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    min-height: 1rem;
    margin: 0;
    accent-color: var(--mg-primary);
}

.check-row,
.auth-check,
.budget-check,
.admin-check,
.check-field,
.compact-radio {
    display: flex !important;
    gap: .625rem;
    align-items: center;
}

.budget-form-grid,
.admin-form,
.request-form,
.repository-form,
.tutor-form-grid,
.profile-theme-form,
.budget-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.wide,
.field-wide,
.budget-form-actions,
.admin-form-actions,
.request-form-actions {
    grid-column: 1 / -1;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: .25rem .5rem;
    color: var(--mg-muted);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    background: var(--mg-surface-subtle);
    border-radius: 50rem;
}

.badge.success,
.success .badge {
    color: var(--mg-success-ink);
    background: var(--mg-success-soft);
}

.badge.info {
    color: var(--mg-info-ink);
    background: var(--mg-primary-soft);
}

.badge.warning {
    color: var(--mg-warning-ink);
    background: var(--mg-warning-soft);
}

.badge.danger {
    color: var(--mg-danger-ink);
    background: var(--mg-danger-soft);
}

.auth-alert,
.budget-alert,
.admin-alert,
.request-alert,
.tutor-alert,
.budget-grid-feedback {
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    color: var(--mg-danger-ink);
    background: var(--mg-danger-soft);
    border: 1px solid color-mix(in srgb, var(--mg-danger) 38%, var(--mg-border));
    border-radius: var(--mg-radius);
}

.auth-alert.success,
.budget-alert.success,
.admin-alert.success,
.request-alert.success,
.tutor-alert.success {
    color: var(--mg-success-ink);
    background: var(--mg-success-soft);
    border-color: color-mix(in srgb, var(--mg-success) 38%, var(--mg-border));
}

/* Tables and data lists */

.budget-table-wrap,
.admin-table-wrap,
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
}

.budget-table,
.admin-table,
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--mg-surface);
}

th,
td {
    padding: .75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--mg-border);
}

th {
    color: var(--mg-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
    background: var(--mg-surface-subtle);
}

td strong,
td small {
    display: block;
}

td small {
    margin-top: .1875rem;
    color: var(--mg-muted);
}

.home-detail-list,
.budget-detail-list,
.repository-detail-list,
.request-detail-list,
.health-list,
.session-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.home-detail-list > div,
.budget-detail-list > div,
.repository-detail-list > div,
.request-detail-list > div,
.health-list > div,
.session-list > div {
    display: grid;
    grid-template-columns: minmax(8rem, 35%) 1fr;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--mg-border);
}

dt {
    color: var(--mg-muted);
    font-weight: 500;
}

dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Feature compositions */

.home-budget-visuals,
.home-budget-summary,
.home-category-preview,
.home-category-summary,
.category-stack,
.expense-frequency-summary,
.health-errors,
.admin-action-list,
.tutor-recent,
.receipt-preview-list {
    display: grid;
    gap: .875rem;
}

.home-budget-summary-row,
.home-category-summary-row,
.home-bar-row,
.budget-upcoming-row,
.home-request-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .625rem 0;
    border-bottom: 1px solid var(--mg-border);
}

.budget-upcoming-list,
.home-request-list,
.repository-attachment-list,
.question-list {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inline-form,
.profile-inline-form,
.repository-upload-form,
.request-comment-form,
.grade-form,
.profile-photo-form {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    align-items: flex-end;
}

.budget-alert-actions,
.budget-filter-actions,
.repository-page-heading-actions,
.request-page-heading-actions,
.role-form-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    align-items: center;
}

.budget-badge-stack,
.category-values,
.home-category-values,
.request-dialog-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    align-items: center;
}

.category-row {
    display: grid;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--mg-border);
}

.category-row:last-child {
    border-bottom: 0;
}

.category-row > div:first-child {
    display: grid;
    gap: .1875rem;
}

.category-row > div:first-child span {
    color: var(--mg-muted);
    font-size: .75rem;
}

.category-values {
    justify-content: space-between;
}

.category-values meter {
    flex: 1 0 100%;
}

.budget-color-swatch {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-right: .375rem;
    background: var(--category-color, var(--mg-primary));
    border-radius: 50%;
}

.home-bar-chart {
    display: grid;
    gap: .75rem;
}

.home-card-meta,
.home-profile-summary {
    display: grid;
    gap: .375rem;
    color: var(--mg-muted);
}

.home-profile-photo {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: 50%;
}

.home-status {
    display: inline-flex;
    padding: .25rem .5rem;
    color: var(--mg-success-ink);
    font-size: .6875rem;
    font-weight: 600;
    background: var(--mg-success-soft);
    border-radius: 50rem;
}

.budget-scope-modes {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.budget-scope-summary,
.budget-view-summary,
.budget-view-load,
.budget-view-editor,
.budget-view-account-fieldset {
    min-width: 0;
    padding: 1rem;
    background: var(--mg-surface-subtle);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
}

.budget-view-account-fieldset {
    margin: 0;
}

.budget-view-summary,
.budget-scope-panel {
    margin-bottom: 1.25rem;
}

.budget-view-summary,
.budget-scope-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.health-error,
.request-dialog-section {
    padding: .875rem;
    background: var(--mg-surface-subtle);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
}

.budget-upcoming-main,
.request-card-main,
.permission-copy,
.question-summary-copy {
    min-width: 0;
}

.budget-upcoming-main strong,
.budget-upcoming-main span,
.request-card-main strong,
.request-card-main span,
.permission-copy strong,
.permission-copy small,
.question-summary-copy strong,
.question-summary-copy small {
    display: block;
}

.budget-filter-toolbar,
.budget-view-name-row,
.budget-view-load-actions,
.budget-view-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
}

.budget-scope-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: .75rem;
    align-items: end;
}

.budget-scope-form .budget-scope-modes {
    grid-column: 1 / -1;
}

.budget-scope-panel,
.budget-view-layout {
    display: grid;
    gap: 1rem;
}

.budget-account-picker,
.budget-view-toggle-grid,
.admin-check-list,
.role-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .625rem;
}

.budget-account-option,
.radio-card,
.admin-check-row,
.role-tab {
    display: flex;
    gap: .625rem;
    align-items: center;
    padding: .75rem;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
}

.request-buckets,
.request-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.request-card-list,
.request-comment-list {
    display: grid;
    gap: .75rem;
}

.request-card,
.request-comment {
    padding: 1rem;
}

.permission-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.permission-zone {
    min-width: 0;
    padding: 1rem;
    background: var(--mg-surface-subtle);
    border: 1px dashed var(--mg-border);
    border-radius: var(--mg-radius);
}

.permission-zone > header {
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.permission-list {
    display: grid;
    gap: .625rem;
    min-height: 5rem;
}

.permission-card {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .75rem;
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    cursor: grab;
}

.permission-card .permission-copy {
    flex: 1 1 auto;
}

.permission-drag {
    color: var(--mg-muted);
    cursor: grab;
}

.permission-move,
.dialog-close {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    color: var(--mg-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
}

.roles-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
    gap: 1.25rem;
}

.roles-sidebar,
.roles-workspace {
    min-width: 0;
}

.role-tab {
    width: 100%;
    justify-content: space-between;
    cursor: pointer;
}

.role-tab.active {
    color: #fff;
    background: var(--mg-primary);
    border-color: var(--mg-primary);
}

.roles-sidebar-heading {
    margin-bottom: .75rem;
}

.role-user-count,
.repository-total {
    color: var(--mg-muted);
    font-size: .75rem;
}

.danger-zone,
.role-danger {
    padding: 1rem;
    background: var(--mg-danger-soft);
    border: 1px solid color-mix(in srgb, var(--mg-danger) 30%, var(--mg-border));
    border-radius: var(--mg-radius);
}

.repository-attachment {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .75rem;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
}

.receipt-preview-image,
.receipt-preview-frame {
    display: block;
    width: 100%;
    min-height: 24rem;
    object-fit: contain;
    border: 0;
}

.question-card {
    overflow: hidden;
}

.question-card-summary {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
}

.question-card-body {
    padding: 1rem;
    border-top: 1px solid var(--mg-border);
}

.answer-details {
    margin-bottom: 1rem;
}

.question-toggle::before {
    content: "›";
}

.question-card[open] .question-toggle::before {
    content: "⌄";
}

.question-meta,
.result-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.session-finish,
.session-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.tutor-wizard,
.wizard-progress,
.session-progress {
    display: grid;
    gap: 1rem;
}

.health-title-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.health-status {
    display: inline-flex;
    padding: .375rem .625rem;
    font-weight: 600;
    border-radius: 50rem;
}

.health-status.success {
    color: var(--mg-success-ink);
    background: var(--mg-success-soft);
}

.health-status.failure {
    color: var(--mg-danger-ink);
    background: var(--mg-danger-soft);
}

/* Authentication and profile */

.auth-body {
    display: grid;
    min-height: 100svh;
    background: var(--mg-auth-bg);
}

.auth-shell {
    display: grid;
    min-height: 100svh;
    place-items: center;
    padding: 1.5rem;
}

.auth-card {
    width: min(100%, 28rem);
    padding: 1.5rem;
    border: 0;
    box-shadow: 0 .75rem 2rem rgb(0 0 0 / 22%);
}

.account-card {
    width: min(100%, 38rem);
}

.auth-brand {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1.5rem;
    text-decoration: none;
}

.auth-brand > span:last-child {
    display: grid;
}

.auth-brand strong {
    color: var(--mg-text);
    font-size: .875rem;
}

.auth-brand small {
    color: var(--mg-muted);
    font-size: .75rem;
}

.auth-heading {
    margin-bottom: 1.25rem;
}

.auth-heading h1 {
    margin: .5rem 0;
    font-size: 1.625rem;
    font-weight: 500;
}

.auth-heading p {
    margin: 0;
    color: var(--mg-muted);
}

.auth-form,
.auth-provider-stack {
    display: grid;
    gap: 1rem;
}

.auth-provider-stack {
    margin-bottom: 1rem;
}

.auth-form .button,
.auth-provider-stack .button {
    width: 100%;
}

.button.microsoft {
    color: #fff;
    background: #1f2937;
    border-color: #1f2937;
}

.auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .75rem;
    align-items: center;
    margin: 1rem 0;
    color: var(--mg-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    height: 1px;
    content: "";
    background: var(--mg-border);
}

.auth-check {
    min-height: 2.75rem;
    padding: .625rem .75rem;
    background: var(--mg-surface-subtle);
}

.auth-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    margin-top: 1rem;
}

.profile-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.profile-photo {
    width: 4.25rem;
    height: 4.25rem;
    object-fit: cover;
    border: 1px solid var(--mg-border);
    border-radius: 50%;
}

.profile-heading h1 {
    margin: 0;
    font-size: 1.5rem;
}

.profile-brand {
    margin-bottom: 1rem;
}

/* Native dialogs */

.app-dialog {
    width: min(calc(100% - 2rem), 44rem);
    max-height: calc(100dvh - 2rem);
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
}

.profile-dialog,
.repository-dialog,
.request-dialog,
.request-detail-dialog,
.request-edit-dialog,
.budget-filter-dialog {
    width: min(calc(100% - 2rem), 48rem);
}

.app-dialog::backdrop {
    background: rgb(15 23 42 / 55%);
    backdrop-filter: blur(2px);
}

.dialog-panel {
    max-height: calc(100dvh - 2rem);
    overflow: auto;
}

.dialog-heading,
.dialog-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.nav-icon-link {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    color: rgb(255 255 255 / 68%);
    text-decoration: none;
    border-radius: var(--mg-radius);
}

.nav-icon-link:hover {
    color: #fff;
    background: rgb(255 255 255 / 10%);
}

.site-footer {
    padding: 1rem clamp(.875rem, 2vw, 1.5rem);
    color: var(--mg-muted);
    font-size: .75rem;
    text-align: center;
    border-top: 1px solid var(--mg-border);
}

.dialog-heading {
    border-bottom: 1px solid var(--mg-border);
}

.dialog-heading h2 {
    margin: 0;
    font-size: 1.125rem;
}

.dialog-body {
    padding: 1.25rem;
}

.dialog-actions {
    background: var(--mg-surface-subtle);
    border-top: 1px solid var(--mg-border);
}

/* Limitless native data components */

.data-component-shell {
    min-width: 0;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    background: var(--mg-surface);
}

.limitless-data-component {
    min-width: 0;
    color: var(--mg-text);
    background: var(--mg-surface);
}

.datatable-mobile-tools {
    display: none;
}

.limitless-data-component .datatable-header,
.limitless-data-component .datatable-footer {
    padding: .875rem 1rem;
    color: var(--mg-muted);
    background: var(--mg-surface-subtle);
}

.limitless-data-component .datatable-header {
    border-bottom: 1px solid var(--mg-border);
}

.limitless-data-component .datatable-footer {
    border-top: 1px solid var(--mg-border);
}

.limitless-data-component .dataTables_length,
.limitless-data-component .dataTables_filter,
.limitless-data-component .dataTables_info,
.limitless-data-component .dataTables_paginate {
    display: flex;
    align-items: center;
    margin: 0;
}

.limitless-data-component .dataTables_filter {
    min-width: min(100%, 19rem);
}

.limitless-data-component .dataTables_filter label {
    display: flex;
    width: 100%;
    align-items: center;
}

.limitless-data-component .datatable-scroll-wrap {
    overflow-x: auto;
    scrollbar-color: var(--mg-border) var(--mg-surface-subtle);
}

.limitless-data-component .limitless-datatable {
    width: 100% !important;
    margin: 0 !important;
    color: var(--mg-text);
    font-size: .8125rem;
    border-collapse: collapse !important;
}

.limitless-data-component .limitless-datatable thead th {
    padding: .75rem;
    color: var(--mg-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
    background: var(--mg-surface-subtle);
    border-bottom: 1px solid var(--mg-border);
    white-space: nowrap;
}

.limitless-data-component .limitless-datatable thead th.sorting,
.limitless-data-component .limitless-datatable thead th.sorting_asc,
.limitless-data-component .limitless-datatable thead th.sorting_desc {
    position: relative;
    padding-right: 2.25rem !important;
}

.limitless-data-component .limitless-datatable thead th.sorting::before,
.limitless-data-component .limitless-datatable thead th.sorting::after,
.limitless-data-component .limitless-datatable thead th.sorting_asc::before,
.limitless-data-component .limitless-datatable thead th.sorting_asc::after,
.limitless-data-component .limitless-datatable thead th.sorting_desc::before,
.limitless-data-component .limitless-datatable thead th.sorting_desc::after {
    right: .75rem;
}

.limitless-data-component .limitless-datatable thead .datatable-filter-row th {
    padding: .375rem .5rem .625rem;
    vertical-align: top;
}

.limitless-data-component .datatable-filter-row input,
.limitless-data-component .datatable-filter-row select {
    min-height: 2rem;
    padding: .3125rem .5rem;
    color: var(--mg-text);
    font-size: .75rem;
    background-color: var(--mg-surface);
    border-color: var(--mg-border);
}

.limitless-data-component .limitless-datatable tbody tr {
    background: var(--mg-surface);
    border-bottom: 1px solid var(--mg-border);
}

.limitless-data-component .limitless-datatable tbody tr:nth-child(even) {
    background: var(--mg-row-alt);
}

.limitless-data-component .limitless-datatable tbody tr:hover {
    background: var(--mg-row-hover);
}

.limitless-data-component .limitless-datatable tbody td {
    padding: .6875rem .75rem;
    vertical-align: middle;
    border-color: var(--mg-border);
}

.limitless-data-component .limitless-datatable tbody td.control {
    width: 2.75rem;
    min-width: 2.75rem;
    text-align: center;
}

.limitless-data-component .limitless-datatable tbody td.control::before {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    place-items: center;
    color: var(--mg-primary-dark);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    content: "+";
    background: var(--mg-primary-soft);
    border: 1px solid var(--mg-detail-border);
    border-radius: 50%;
    box-shadow: none;
}

.limitless-data-component .limitless-datatable tr.parent td.control::before {
    color: #fff;
    content: "−";
    background: var(--mg-primary);
    border-color: var(--mg-primary);
}

.limitless-data-component .limitless-datatable tr.child > td {
    padding: .75rem .875rem 1rem;
    background: var(--mg-detail);
    border-top: 1px solid var(--mg-detail-border);
}

.limitless-data-component .dataTables_processing {
    color: var(--mg-text);
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    box-shadow: var(--mg-shadow);
}

.limitless-data-component .pagination {
    margin: 0;
}

.limitless-data-component .page-link {
    color: var(--mg-text);
    background: var(--mg-surface);
    border-color: var(--mg-border);
}

.limitless-data-component .page-item.active .page-link {
    color: #fff;
    background: var(--mg-primary);
    border-color: var(--mg-primary);
}

.endpoint-host-name {
    display: block;
    color: var(--mg-text);
    overflow-wrap: anywhere;
}

.endpoint-rustdesk-actions {
    display: inline-flex;
    gap: .375rem;
    align-items: center;
    justify-content: center;
}

.endpoint-action {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    color: var(--mg-muted);
    background: var(--mg-surface-subtle);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.endpoint-action:hover {
    color: var(--mg-primary);
    background: var(--mg-primary-soft);
    border-color: var(--mg-primary);
    transform: translateY(-1px);
}

.endpoint-action.rustdesk {
    color: #fff;
    background: var(--mg-primary);
    border-color: var(--mg-primary);
}

.endpoint-action.rustdesk:hover {
    color: #fff;
    background: var(--mg-primary-dark);
    border-color: var(--mg-primary-dark);
}

.endpoint-action svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(.budget-collapse-grid, .admin-collapse-grid, .endpoint-collapse-grid, .repository-collapse-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: .625rem;
    width: 100%;
}

:is(.budget-collapse-item, .admin-collapse-item, .endpoint-collapse-item),
.repository-collapse-grid > div {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    background: var(--mg-surface);
    border: 1px solid var(--mg-detail-border);
    border-left: .1875rem solid var(--mg-primary);
    border-radius: var(--mg-radius);
    box-shadow: 0 1px 1px rgb(15 23 42 / 4%);
}

:is(.budget-collapse-item, .admin-collapse-item, .endpoint-collapse-item).wide {
    grid-column: 1 / -1;
}

:is(.budget-collapse-label, .admin-collapse-label, .endpoint-collapse-label),
.repository-collapse-grid > div > span {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: .625rem .75rem;
    color: var(--mg-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .035em;
    text-transform: uppercase;
    background: var(--mg-detail-label);
    border-right: 1px solid var(--mg-detail-border);
}

:is(.budget-collapse-value, .admin-collapse-value, .endpoint-collapse-value),
.repository-collapse-grid > div > div {
    min-width: 0;
    padding: .625rem .75rem;
    overflow-wrap: anywhere;
    color: var(--mg-text);
    font-weight: 500;
}

.budget-collapse-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

:is(.budget-grid-cell-stack, .admin-grid-cell-stack, .endpoint-grid-cell-stack) {
    display: grid;
    min-width: 0;
    gap: .125rem;
}

:is(.budget-grid-cell-stack, .admin-grid-cell-stack, .endpoint-grid-cell-stack) small {
    color: var(--mg-muted);
    font-size: .6875rem;
}

:is(.budget-grid-truncate, .admin-grid-truncate, .endpoint-grid-truncate) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty states */

.home-empty-state,
.budget-empty,
.request-empty,
.tutor-empty {
    padding: 2rem 1rem;
    color: var(--mg-muted);
    text-align: center;
    background: var(--mg-surface-subtle);
    border: 1px dashed var(--mg-border);
    border-radius: var(--mg-radius);
}

/* Development component gallery */

.hero-section,
.section-band {
    width: min(100%, var(--mg-content));
    margin-inline: auto;
    padding: 3rem clamp(.875rem, 2vw, 1.5rem);
}

.hero-section {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(22rem, .9fr);
    gap: 2rem;
    align-items: center;
    min-height: calc(100vh - 6.5rem);
}

.hero-copy h1 {
    max-width: 18ch;
    margin: .5rem 0 1rem;
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 600;
    line-height: 1.05;
}

.hero-copy p,
.section-heading p {
    max-width: 68ch;
    color: var(--mg-muted);
    font-size: 1rem;
    line-height: 1.7;
}

.hero-actions,
.form-actions,
.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: 1.25rem;
}

.hero-panel,
.form-showcase,
.component-panel,
.swatch-group,
.type-sample {
    padding: 1.25rem;
}

.panel-toolbar {
    display: flex;
    gap: .625rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--mg-border);
}

.panel-toolbar > :last-child {
    margin-left: auto;
    color: var(--mg-muted);
}

.status-dot {
    width: .625rem;
    height: .625rem;
    background: var(--mg-success);
    border-radius: 50%;
    box-shadow: 0 0 0 .25rem rgb(37 179 114 / 12%);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.metric-grid > div {
    padding: 1rem;
    background: var(--mg-surface-subtle);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
}

.metric-grid span,
.metric-grid strong {
    display: block;
}

.metric-grid span {
    color: var(--mg-muted);
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.metric-grid strong {
    margin-top: .25rem;
    font-size: 1.375rem;
}

.progress-stack {
    display: grid;
    gap: .75rem;
}

.progress-stack label {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: .75rem;
    align-items: center;
    color: var(--mg-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.section-heading {
    margin-bottom: 1.5rem;
}

.section-heading h2 {
    margin: .375rem 0;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 500;
}

.foundation-grid,
.component-layout,
.data-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.control-grid,
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.field-wide {
    grid-column: 1 / -1;
}

.swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .625rem;
}

.swatch {
    display: grid;
    min-height: 5rem;
    align-content: end;
    padding: .75rem;
    color: #fff;
    background: var(--swatch, var(--mg-primary));
    border-radius: var(--mg-radius);
}

.swatch.ink { --swatch: #263238; }
.swatch.blue { --swatch: #2196f3; }
.swatch.teal { --swatch: #26a69a; }
.swatch.green { --swatch: #25b372; }
.swatch.red { --swatch: #ef5350; }

.summary-list {
    display: grid;
    gap: .75rem;
}

.summary-list article {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: .875rem;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
}

.tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--mg-border);
}

.tab {
    padding: .625rem .875rem;
    color: var(--mg-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
}

.tab.active {
    color: var(--mg-primary-dark);
    border-bottom-color: var(--mg-primary);
}

.alert {
    padding: .75rem 1rem;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
}

.alert.info {
    color: var(--mg-info-ink);
    background: var(--mg-primary-soft);
    border-color: color-mix(in srgb, var(--mg-primary) 32%, var(--mg-border));
}

.alert.success {
    color: var(--mg-success-ink);
    background: var(--mg-success-soft);
    border-color: color-mix(in srgb, var(--mg-success) 32%, var(--mg-border));
}

.alert.warning {
    color: var(--mg-warning-ink);
    background: var(--mg-warning-soft);
    border-color: color-mix(in srgb, var(--mg-warning) 32%, var(--mg-border));
}

.alert.danger {
    color: var(--mg-danger-ink);
    background: var(--mg-danger-soft);
    border-color: color-mix(in srgb, var(--mg-danger) 32%, var(--mg-border));
}

/* Responsive */

@media (max-width: 991.98px) {
    .site-header .navbar-collapse {
        flex-basis: 100%;
        order: 4;
        padding: .5rem 0 .75rem;
    }

    .site-header .navbar-collapse .primary-nav {
        position: static;
        display: flex;
        width: 100%;
        max-height: min(70vh, 32rem);
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        overflow-y: auto;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .site-header .navbar-collapse .primary-nav .navbar-nav-link {
        width: 100%;
        color: rgb(255 255 255 / 68%);
    }

    .site-header .navbar-collapse .primary-nav .navbar-nav-link:hover,
    .site-header .navbar-collapse .primary-nav .navbar-nav-link:focus,
    .site-header .navbar-collapse .primary-nav .navbar-nav-link.active {
        color: #fff;
        background: rgb(255 255 255 / 10%);
    }

    .home-dashboard-grid > *,
    .home-card-grid > *,
    .budget-grid > *,
    .admin-grid > *,
    .request-grid > *,
    .repository-detail-grid > *,
    .health-grid > *,
    .tutor-dashboard-grid > * {
        grid-column: 1 / -1;
    }

    .roles-layout {
        grid-template-columns: 1fr;
    }

    .hero-section,
    .foundation-grid,
    .component-layout,
    .data-layout {
        grid-template-columns: 1fr;
    }

    .hero-section {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    .budget-form-grid,
    .admin-form,
    .request-form,
    .repository-form,
    .tutor-form-grid,
    .profile-theme-form,
    .budget-filter-form,
    .permission-board {
        grid-template-columns: 1fr;
    }

    .control-grid,
    .form-grid,
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .wide,
    .field-wide {
        grid-column: auto;
    }

    .home-detail-list > div,
    .budget-detail-list > div,
    .repository-detail-list > div,
    .request-detail-list > div,
    .health-list > div,
    .session-list > div {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .repository-attachment,
    .health-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .budget-scope-form {
        grid-template-columns: 1fr;
    }

    .budget-scope-form .budget-scope-modes {
        display: grid;
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .budget-scope-form > .button {
        width: 100%;
    }

    .budget-scope-summary,
    .budget-view-summary {
        display: grid;
        justify-items: start;
    }

    .datatable-mobile-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
        padding: .875rem;
        background: var(--mg-surface-subtle);
        border-bottom: 1px solid var(--mg-border);
    }

    .datatable-mobile-tools label {
        display: grid;
        gap: .375rem;
        color: var(--mg-muted);
        font-size: .6875rem;
        font-weight: 600;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .limitless-data-component .datatable-scroll-wrap {
        overflow: visible;
    }

    .limitless-data-component .limitless-datatable,
    .limitless-data-component .limitless-datatable tbody {
        display: block;
        width: 100% !important;
    }

    .limitless-data-component .limitless-datatable thead {
        display: none;
    }

    .limitless-data-component .limitless-datatable tbody {
        padding: .75rem;
    }

    .limitless-data-component .limitless-datatable tbody tr:not(.child) {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        margin: 0 0 .75rem;
        overflow: hidden;
        background: var(--mg-surface);
        border: 1px solid var(--mg-border);
        border-radius: var(--mg-radius);
        box-shadow: 0 1px 2px rgb(15 23 42 / 6%);
    }

    .limitless-data-component .limitless-datatable tbody tr:not(.child):last-child {
        margin-bottom: 0;
    }

    .limitless-data-component .limitless-datatable tbody tr:not(.child) > td {
        display: grid;
        grid-column: 2;
        grid-template-columns: minmax(6.25rem, 38%) minmax(0, 1fr);
        gap: .75rem;
        min-width: 0;
        padding: .625rem .75rem;
        overflow-wrap: anywhere;
        text-align: left !important;
        border-bottom: 1px solid var(--mg-border);
    }

    .limitless-data-component .limitless-datatable tbody tr:not(.child) > td.dtr-hidden {
        display: none !important;
    }

    .limitless-data-component .limitless-datatable tbody tr:not(.child) > td:not(.control)::before {
        color: var(--mg-muted);
        font-size: .6875rem;
        font-weight: 600;
        letter-spacing: .035em;
        text-transform: uppercase;
        content: attr(data-label);
    }

    .limitless-data-component .limitless-datatable tbody tr:not(.child) > td.control {
        display: flex;
        grid-row: 1 / span 20;
        grid-column: 1;
        width: auto;
        min-width: 0;
        align-items: flex-start;
        justify-content: center;
        padding: .75rem .25rem;
        background: var(--mg-surface-subtle);
        border-right: 1px solid var(--mg-border);
        border-bottom: 0;
    }

    .limitless-data-component .limitless-datatable tbody tr.child {
        display: block;
        margin: -.75rem 0 .75rem 2rem;
        border: 1px solid var(--mg-detail-border);
        border-top: 0;
        border-radius: 0 0 var(--mg-radius) var(--mg-radius);
    }

    .limitless-data-component .limitless-datatable tbody tr.child > td {
        display: block !important;
        padding: .75rem;
    }

    table:not(.limitless-datatable) thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    table:not(.limitless-datatable) tr {
        display: block;
        margin-bottom: .75rem;
        border: 1px solid var(--mg-border);
    }

    table:not(.limitless-datatable) td {
        display: grid;
        grid-template-columns: minmax(7rem, 38%) 1fr;
        gap: .75rem;
    }

    table:not(.limitless-datatable) td::before {
        color: var(--mg-muted);
        font-size: .6875rem;
        font-weight: 600;
        text-transform: uppercase;
        content: attr(data-label);
    }
}

@media (max-width: 575.98px) {
    .site-header .navbar-brand {
        min-width: 0;
    }

    .home-shell,
    .budget-shell,
    .admin-shell,
    .request-shell,
    .endpoint-shell,
    .repository-shell,
    .health-shell,
    .tutor-shell {
        padding: 1rem .75rem 2rem;
    }

    .home-dashboard-card,
    .home-card,
    .budget-panel,
    .budget-scope-panel,
    .admin-panel,
    .request-panel,
    .request-bucket,
    .endpoint-panel,
    .repository-panel,
    .repository-category-panel,
    .health-panel,
    .tutor-panel {
        padding: 1rem;
    }

    .auth-shell {
        padding: .75rem;
    }

    .auth-card {
        padding: 1.25rem;
    }

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

    .budget-scope-form .budget-scope-modes,
    .datatable-mobile-tools {
        grid-template-columns: 1fr;
    }

    .limitless-data-component .datatable-header,
    .limitless-data-component .datatable-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .limitless-data-component .dataTables_filter {
        width: 100%;
    }
}