/* Brand palette — shared (works with light content + dark chrome) */
:root {
    --abs-gold: #d4a853;
    --abs-gold-light: #f0d78c;
    --abs-gold-pale: #f7f1e4;
    --abs-gold-muted: rgb(212 168 83 / 0.16);
    --abs-gold-border: rgb(212 168 83 / 0.4);
    --abs-cream: #f5f3ef;
    --abs-brown: #8b5e3c;

    /* Dark chrome — navy sidebar + topbar */
    --abs-chrome: #0d1b2a;
    --abs-chrome-deep: #08131f;
    --abs-chrome-elevated: #152536;
    --abs-chrome-border: rgb(67 97 238 / 0.25);
    --abs-chrome-fg: #f8fafc;
    --abs-chrome-fg-muted: rgb(248 250 252 / 0.68);
    --abs-chrome-hover: rgb(255 255 255 / 0.08);
    --abs-chrome-active: rgb(67 97 238 / 0.92);

    --abs-accent: #4361ee;
    --abs-page-bg: #f8f9fb;

    --abs-header-bg: var(--abs-chrome);
    --abs-header-bg-dark: var(--abs-chrome-deep);
    --abs-header-fg: var(--abs-chrome-fg);
    --abs-header-fg-muted: var(--abs-chrome-fg-muted);
    --abs-header-hover: var(--abs-chrome-hover);
    --abs-header-active: var(--abs-chrome-active);
    --abs-header-gold-accent: var(--abs-gold);

    --abs-sidebar-bg: var(--abs-chrome);
    --abs-sidebar-bg-deep: var(--abs-chrome-deep);
    --abs-sidebar-border: var(--abs-chrome-border);
    --abs-sidebar-text: var(--abs-chrome-fg);
    --abs-sidebar-muted: var(--abs-chrome-fg-muted);
}

/* Light / bright theme — dark chrome + warm gold accents */
html:not(.dark) .fi-body {
    background-color: var(--abs-page-bg);
    background-image: none;
}

html:not(.dark) .fi-topbar {
    background-color: var(--abs-header-bg);
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
    --tw-ring-shadow: 0 0 #0000;
    --tw-ring-color: transparent;
}

/* Match sidebar to dark topbar in light mode */
html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar.fi-sidebar-open,
html:not(.dark) aside.fi-sidebar {
    background-color: var(--abs-sidebar-bg) !important;
    background-image: linear-gradient(
        180deg,
        var(--abs-chrome-elevated) 0%,
        var(--abs-sidebar-bg) 4rem,
        var(--abs-sidebar-bg-deep) 100%
    ) !important;
    border-inline-end: 1px solid var(--abs-sidebar-border) !important;
    box-shadow: inset -1px 0 0 rgb(255 255 255 / 0.04);
}

@media (min-width: 64rem) {
    html:not(.dark) .fi-sidebar,
    html:not(.dark) .fi-sidebar.fi-sidebar-open,
    html:not(.dark) aside.fi-sidebar {
        background-color: var(--abs-sidebar-bg) !important;
        background-image: linear-gradient(
            180deg,
            var(--abs-chrome-elevated) 0%,
            var(--abs-sidebar-bg) 4rem,
            var(--abs-sidebar-bg-deep) 100%
        ) !important;
    }
}

html:not(.dark) .fi-sidebar.fi-sidebar-open {
    --tw-ring-color: var(--abs-sidebar-border);
}

html:not(.dark) .fi-sidebar-nav {
    background-color: transparent;
}

html:not(.dark) .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-database-notifications-btn > .fi-sidebar-database-notifications-btn-label {
    color: var(--abs-sidebar-text);
}

html:not(.dark) .fi-sidebar-group-label {
    color: rgb(148 163 184);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

html:not(.dark) .fi-sidebar-item-btn > .fi-icon,
html:not(.dark) .fi-sidebar-group-btn > .fi-icon,
html:not(.dark) .fi-sidebar-group-dropdown-trigger-btn > .fi-icon,
html:not(.dark) .fi-sidebar-database-notifications-btn > .fi-icon {
    color: var(--abs-sidebar-muted);
}

html:not(.dark) .fi-sidebar-group-dropdown-trigger-btn:hover,
html:not(.dark) .fi-sidebar-group-dropdown-trigger-btn:focus-visible,
html:not(.dark) .fi-sidebar-database-notifications-btn:hover,
html:not(.dark) .fi-sidebar-database-notifications-btn:focus-visible {
    background-color: var(--abs-chrome-hover);
}

html:not(.dark) .fi-sidebar-footer {
    border-top: 1px solid rgb(255 255 255 / 0.08);
    padding-top: 0.75rem;
}

html:not(.dark) .fi-sidebar .fi-user-menu-trigger {
    color: var(--abs-sidebar-text);
}

html:not(.dark) .fi-sidebar .fi-user-menu-trigger .fi-tenant-menu-trigger-text {
    color: var(--abs-sidebar-text);
}

html:not(.dark) .fi-sidebar .fi-user-menu-trigger .fi-icon {
    color: var(--abs-sidebar-muted);
}

html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html:not(.dark) .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
html:not(.dark) .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: rgb(255 255 255 / 0.08);
    border-radius: 0.75rem;
}

html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--abs-accent);
    background-image: linear-gradient(90deg, #4361ee 0%, #3a56d4 100%);
    box-shadow: 0 8px 18px rgb(67 97 238 / 0.28);
}

html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item.fi-active
    > .fi-sidebar-item-btn
    > .fi-sidebar-grouped-border
    > .fi-sidebar-item-grouped-border-part {
    color: #fff;
}

html:not(.dark) .fi-sidebar-item.fi-active
    > .fi-sidebar-item-btn
    > .fi-sidebar-grouped-border
    > .fi-sidebar-item-grouped-border-part {
    background-color: var(--abs-gold);
}

html:not(.dark) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: var(--abs-gold);
}

html:not(.dark) .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--abs-chrome-fg-muted);
}

html:not(.dark) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: #fff;
}

html:not(.dark) .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    border-top: none;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.03);
}

html:not(.dark) .fi-section-header-heading {
    color: #3f3f46;
}

html:not(.dark) .fi-wi-stats-overview-stat {
    border-inline-start: none;
    border: 1px solid rgb(229 231 235);
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.03);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

html:not(.dark) .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04);
    transform: translateY(-1px);
}

html:not(.dark) .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
    color: #78716c;
}

html:not(.dark) .fi-ta-ctn {
    border-top: none;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.03);
}

html:not(.dark) .fi-ta-header-cell {
    background-color: rgb(250 250 249);
    color: #3f3f46;
    font-weight: 600;
}

html:not(.dark) .fi-btn.fi-color-primary:not(.fi-outlined) {
    background-image: linear-gradient(
        180deg,
        rgb(240 215 140 / 0.18) 0%,
        transparent 100%
    );
}

html:not(.dark) .fi-badge.fi-color-warning {
    background-color: var(--abs-gold-pale);
    color: #92400e;
    --tw-ring-color: var(--abs-gold-border);
}

html:not(.dark) .fi-simple-main {
    background: linear-gradient(
        180deg,
        var(--abs-gold-pale) 0%,
        white 30%
    );
    border-top: 3px solid var(--abs-gold);
}

html:not(.dark) .fi-topbar .fi-icon-btn[aria-label*="theme" i].fi-active,
html:not(.dark) .fi-topbar .fi-icon-btn:hover .fi-icon[class*="sun"],
html:not(.dark) .fi-topbar [class*="theme-switcher"] .fi-active {
    color: var(--abs-gold-light);
}

/* Dark theme — same gold accents so bright/dark feel matched */
html.dark .fi-topbar {
    border-bottom: 2px solid var(--abs-gold);
    box-shadow: 0 2px 0 rgb(212 168 83 / 0.15);
}

html.dark .fi-sidebar,
html.dark .fi-sidebar.fi-sidebar-open,
html.dark aside.fi-sidebar {
    background-color: var(--abs-chrome-deep) !important;
    background-image: linear-gradient(
        180deg,
        var(--abs-chrome) 0%,
        var(--abs-chrome-deep) 100%
    ) !important;
    border-inline-end: 1px solid var(--abs-chrome-border) !important;
}

@media (min-width: 64rem) {
    html.dark .fi-sidebar,
    html.dark .fi-sidebar.fi-sidebar-open,
    html.dark aside.fi-sidebar {
        background-color: var(--abs-chrome-deep) !important;
        background-image: linear-gradient(
            180deg,
            var(--abs-chrome) 0%,
            var(--abs-chrome-deep) 100%
        ) !important;
    }
}

html.dark .fi-sidebar-group-label {
    color: var(--abs-gold);
    font-weight: 600;
}

html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--abs-chrome-active);
}

html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--abs-gold-light);
}

html.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    border-top: none;
    border: 1px solid rgb(39 39 42 / 0.6);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
}

html.dark .fi-wi-stats-overview-stat {
    border-inline-start: none;
    border: 1px solid rgb(63 63 70 / 0.5);
    background: rgb(24 24 27 / 0.5);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

html.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
    border-color: rgb(63 63 70 / 0.8);
    transform: translateY(-1px);
}

html.dark .fi-ta-ctn {
    border-top: none;
    border: 1px solid rgb(39 39 42 / 0.6);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
}

html.dark .fi-ta-header-cell {
    background-color: rgb(18 18 20);
    color: rgb(212 212 216);
    font-weight: 600;
}

html:not(.dark) .fi-topbar .fi-logo {
    color: var(--abs-header-fg);
    font-weight: 600;
}

html:not(.dark) .fi-topbar .fi-icon-btn {
    color: var(--abs-header-fg-muted);
}

html:not(.dark) .fi-topbar .fi-icon-btn:hover,
html:not(.dark) .fi-topbar .fi-icon-btn:focus-visible {
    color: var(--abs-header-fg);
    background-color: var(--abs-header-hover);
}

html:not(.dark) .fi-topbar .fi-topbar-item-btn {
    color: var(--abs-header-fg-muted);
}

html:not(.dark) .fi-topbar .fi-topbar-item-btn:hover,
html:not(.dark) .fi-topbar .fi-topbar-item-btn:focus-visible {
    color: var(--abs-header-fg);
    background-color: var(--abs-header-hover);
}

html:not(.dark) .fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn {
    color: var(--abs-header-fg);
    background-color: var(--abs-header-active);
    box-shadow: inset 0 -2px 0 var(--abs-gold);
}

html:not(.dark) .fi-topbar .fi-topbar-item-btn > .fi-icon,
html:not(.dark) .fi-topbar .fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon {
    color: inherit;
}

html:not(.dark) .fi-body-has-topbar .fi-sidebar-header {
    background-color: var(--abs-header-bg);
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
    --tw-ring-color: transparent;
}

html:not(.dark) .fi-body-has-topbar .fi-sidebar-header .fi-logo {
    color: var(--abs-header-fg);
}

.fi-sidebar-header .fi-logo img,
.fi-topbar .fi-logo img {
    border-radius: 0.5rem;
    object-fit: cover;
    width: auto;
}

html:not(.dark) .fi-body-has-topbar .fi-sidebar-header .fi-icon-btn {
    color: var(--abs-header-fg-muted);
}

/* List pages: inset content with space on the left and right of the sidebar */
.fi-main-ctn > .fi-main {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}

@media (min-width: 768px) {
    .fi-main-ctn > .fi-main {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-inline-start: 1.5rem;
        padding-inline-end: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .fi-main-ctn > .fi-main {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-inline-start: 2rem;
        padding-inline-end: 2rem;
    }
}

/* Show/create/edit pages that opt into full width still fill the main area */
.fi-main-ctn > .fi-main.fi-width-full {
    margin-left: 0;
    margin-right: 0;
    margin-inline: 0;
    width: 100%;
    max-width: none;
}

/* Fill the content column (list pages stay inset; show pages stay full width) */
.fi-page-content,
.fi-ta-ctn,
.fi-sc-form,
.fi-schemas-section,
.fi-sc-section,
.fi-infolist,
.fi-resource-relation-manager {
    width: 100%;
    max-width: none;
}

/* Course view — full-width detail and lessons */
.fi-resource-courses.fi-resource-view-record-page .fi-schemas-section,
.fi-resource-courses.fi-resource-view-record-page .fi-resource-relation-manager {
    width: 100%;
    max-width: none;
}

.fi-resource-courses.fi-resource-view-record-page .fi-infolist {
    width: 100%;
}

/* Course create/edit — full-width form */
.fi-resource-courses.fi-resource-create-record-page .fi-sc-form,
.fi-resource-courses.fi-resource-edit-record-page .fi-sc-form,
.fi-resource-courses.fi-resource-create-record-page .fi-schemas-section,
.fi-resource-courses.fi-resource-edit-record-page .fi-schemas-section {
    width: 100%;
    max-width: none;
}

/* Student create/edit — full-width form */
.fi-resource-students.fi-resource-create-record-page .fi-sc-form,
.fi-resource-students.fi-resource-edit-record-page .fi-sc-form,
.fi-resource-students.fi-resource-create-record-page .fi-schemas-section,
.fi-resource-students.fi-resource-edit-record-page .fi-schemas-section,
.fi-resource-students.fi-resource-create-record-page .fi-sc-section,
.fi-resource-students.fi-resource-edit-record-page .fi-sc-section {
    width: 100%;
    max-width: none;
}

/* Staff create/edit — full-width form */
.fi-resource-staff.fi-resource-create-record-page .fi-sc-form,
.fi-resource-staff.fi-resource-edit-record-page .fi-sc-form,
.fi-resource-staff.fi-resource-create-record-page .fi-schemas-section,
.fi-resource-staff.fi-resource-edit-record-page .fi-schemas-section {
    width: 100%;
    max-width: none;
}

/* Branch create/edit — full-width form */
.fi-resource-branches.fi-resource-create-record-page .fi-sc-form,
.fi-resource-branches.fi-resource-edit-record-page .fi-sc-form,
.fi-resource-branches.fi-resource-create-record-page .fi-schemas-section,
.fi-resource-branches.fi-resource-edit-record-page .fi-schemas-section {
    width: 100%;
    max-width: none;
}

/* Dashboard — full-width table widgets */
.fi-wi-table .fi-ta-ctn {
    width: 100%;
    max-width: none;
}

/* Dashboard — slightly smaller typography */
.abs-dashboard-page .fi-page-content {
    font-size: 0.9375rem;
}

.abs-dashboard-page .fi-wi-stats-overview-stat {
    padding: 1.5rem 1.375rem;
}

.abs-dashboard-page .fi-wi-stats-overview-stat-value {
    font-size: 1.75rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.abs-dashboard-page .fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem;
    line-height: 1.3;
    font-weight: 500;
    color: rgb(82 82 91);
}

.abs-dashboard-page .fi-wi-stats-overview-stat-description {
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: rgb(120 113 108);
}

html.dark .abs-dashboard-page .fi-wi-stats-overview-stat-label {
    color: rgb(161 161 170);
}

html.dark .abs-dashboard-page .fi-wi-stats-overview-stat-description {
    color: rgb(113 113 122);
}

.abs-dashboard-page .fi-wi-stats-overview-stat-icon .fi-icon {
    color: var(--abs-gold);
    opacity: 0.7;
}

html.dark .abs-dashboard-page .fi-wi-stats-overview-stat-icon .fi-icon {
    color: var(--abs-gold-light);
    opacity: 0.5;
}

.abs-dashboard-page .fi-section-header-heading,
.abs-dashboard-page .fi-account-widget-heading {
    font-size: 0.9375rem;
    line-height: 1.375rem;
    font-weight: 600;
    color: rgb(24 24 27);
}

html:not(.dark) .abs-dashboard-page .fi-section-header-heading,
html:not(.dark) .abs-dashboard-page .fi-account-widget-heading {
    color: #27272a;
}

html.dark .abs-dashboard-page .fi-section-header-heading,
html.dark .abs-dashboard-page .fi-account-widget-heading {
    color: rgb(244 244 245);
}

.abs-dashboard-page .fi-section-header-description,
.abs-dashboard-page .fi-account-widget-user-name {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.abs-dashboard-page .fi-ta-header-cell,
.abs-dashboard-page .fi-ta-cell,
.abs-dashboard-page .fi-ta-cell .fi-ta-cell-content,
.abs-dashboard-page .fi-ta-cell .fi-ta-cell-label,
.abs-dashboard-page .fi-ta-header-toolbar,
.abs-dashboard-page .fi-ta-group-header {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.abs-dashboard-page .fi-ta-header-heading {
    font-size: 0.9375rem;
    line-height: 1.375rem;
}

.abs-dashboard-page .fi-ta-header-description {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.abs-dashboard-page .fi-badge {
    font-size: 0.6875rem;
}

.abs-dashboard-page .fi-fo-field-wrp-label label,
.abs-dashboard-page .fi-input-wrp label {
    font-size: 0.8125rem;
}

/* My Learning Plan */
.abs-learning-plan-course-picker {
    margin-bottom: 1.5rem;
    max-width: 28rem;
}

.abs-learning-plan-course-picker__label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(55 65 81);
}

html.dark .abs-learning-plan-course-picker__label {
    color: rgb(209 213 219);
}

.abs-learning-plan-course-picker__select {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219);
    background-color: white;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

html.dark .abs-learning-plan-course-picker__select {
    border-color: rgb(75 85 99);
    background-color: rgb(31 41 55);
    color: white;
}

.abs-learning-plan-stats {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
    .abs-learning-plan-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.abs-learning-plan-stat {
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: white;
    padding: 1rem 1.125rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

html.dark .abs-learning-plan-stat {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.55);
}

.abs-learning-plan-stat__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
}

html.dark .abs-learning-plan-stat__label {
    color: rgb(156 163 175);
}

.abs-learning-plan-stat__value {
    display: block;
    margin-top: 0.375rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: rgb(17 24 39);
}

html.dark .abs-learning-plan-stat__value {
    color: rgb(243 244 246);
}

.abs-learning-plan-stat__hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

html.dark .abs-learning-plan-stat__hint {
    color: rgb(156 163 175);
}

.abs-learning-plan-stat__bar {
    margin-top: 0.625rem;
    height: 0.375rem;
    overflow: hidden;
    border-radius: 9999px;
    background: rgb(229 231 235);
}

html.dark .abs-learning-plan-stat__bar {
    background: rgb(55 65 81);
}

.abs-learning-plan-stat__bar-fill {
    height: 100%;
    border-radius: 9999px;
    background: #8b5e3c;
    transition: width 0.3s ease;
}

html:not(.dark) .abs-learning-plan-stat__bar-fill {
    background: var(--abs-gold);
}

.abs-learning-plan-alert {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.75rem;
    border-width: 1px;
    padding: 1rem 1.125rem;
}

@media (min-width: 640px) {
    .abs-learning-plan-alert {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.abs-learning-plan-alert__title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.abs-learning-plan-alert__message {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    opacity: 0.9;
}

.abs-learning-plan-alert__action {
    flex-shrink: 0;
}

.abs-learning-plan-overview {
    display: grid;
    gap: 0.875rem;
    font-size: 0.875rem;
}

.abs-learning-plan-overview dt {
    color: rgb(107 114 128);
}

html.dark .abs-learning-plan-overview dt {
    color: rgb(156 163 175);
}

.abs-learning-plan-overview dd {
    margin-top: 0.125rem;
    font-weight: 500;
    color: rgb(17 24 39);
}

html.dark .abs-learning-plan-overview dd {
    color: rgb(243 244 246);
}

.abs-learning-plan-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
}

.abs-learning-plan-empty--compact {
    padding: 1.5rem 1rem;
}

.abs-learning-plan-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: rgb(243 244 246);
    color: rgb(107 114 128);
}

html.dark .abs-learning-plan-empty__icon {
    background: rgb(31 41 55);
    color: rgb(156 163 175);
}

.abs-learning-plan-empty__title {
    margin-top: 0.875rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

html.dark .abs-learning-plan-empty__title {
    color: rgb(243 244 246);
}

.abs-learning-plan-empty__text {
    margin-top: 0.375rem;
    max-width: 24rem;
    font-size: 0.875rem;
    color: rgb(107 114 128);
}

html.dark .abs-learning-plan-empty__text {
    color: rgb(156 163 175);
}

.abs-learning-plan-sessions {
    display: grid;
    gap: 0.875rem;
}

.abs-learning-plan-session {
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251 / 0.65);
    padding: 1rem 1.125rem;
}

html.dark .abs-learning-plan-session {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.35);
}

.abs-learning-plan-session--active {
    border-color: rgb(139 94 60 / 0.35);
    background: rgb(139 94 60 / 0.06);
    box-shadow: inset 3px 0 0 #8b5e3c;
}

html:not(.dark) .abs-learning-plan-session--active {
    border-color: var(--abs-gold-border);
    background: var(--abs-gold-muted);
    box-shadow: inset 3px 0 0 var(--abs-gold);
}

html.dark .abs-learning-plan-session--active {
    border-color: rgb(139 94 60 / 0.45);
    background: rgb(139 94 60 / 0.12);
}

.abs-learning-plan-session__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.abs-learning-plan-session__title-group {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
}

.abs-learning-plan-session__number {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    background: rgb(139 94 60 / 0.12);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #8b5e3c;
}

html:not(.dark) .abs-learning-plan-session__number {
    background: var(--abs-gold-muted);
    color: #92610d;
}

html.dark .abs-learning-plan-session__number {
    background: rgb(139 94 60 / 0.2);
    color: rgb(214 180 152);
}

.abs-learning-plan-session__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(17 24 39);
}

html.dark .abs-learning-plan-session__title {
    color: rgb(243 244 246);
}

.abs-learning-plan-session__materials {
    margin-top: 0.875rem;
    border-top: 1px solid rgb(229 231 235);
    padding-top: 0.875rem;
}

html.dark .abs-learning-plan-session__materials {
    border-top-color: rgb(55 65 81);
}

.abs-learning-plan-session__materials-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(107 114 128);
}

html.dark .abs-learning-plan-session__materials-label {
    color: rgb(156 163 175);
}

.abs-learning-plan-session__materials-text {
    margin-top: 0.5rem;
    white-space: pre-line;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(75 85 99);
}

html.dark .abs-learning-plan-session__materials-text {
    color: rgb(209 213 219);
}

.abs-learning-plan-session__files {
    margin-top: 0.625rem;
    display: grid;
    gap: 0.375rem;
}

.abs-learning-plan-session__files a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #8b5e3c;
    text-decoration: none;
}

html:not(.dark) .abs-learning-plan-session__files a {
    color: #92610d;
}

.abs-learning-plan-session__files a:hover {
    text-decoration: underline;
}

html.dark .abs-learning-plan-session__files a {
    color: rgb(214 180 152);
}

.abs-learning-plan-session__feedback {
    margin-top: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(214 180 152 / 0.35);
    background: rgb(255 251 245);
}

.abs-learning-plan-session__feedback--roadmap {
    margin-top: 0.75rem;
}

html.dark .abs-learning-plan-session__feedback {
    border-color: rgb(139 94 60 / 0.35);
    background: rgb(139 94 60 / 0.08);
}

.abs-learning-plan-session__feedback-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(139 94 60);
}

html.dark .abs-learning-plan-session__feedback-label {
    color: rgb(214 180 152);
}

.abs-learning-plan-session__feedback-text {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgb(55 65 81);
    white-space: pre-wrap;
}

html.dark .abs-learning-plan-session__feedback-text {
    color: rgb(209 213 219);
}

/* My Course Progress — roadmap timeline */
.abs-course-roadmap {
    display: grid;
    gap: 0;
}

.abs-course-roadmap-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.875rem;
    padding-bottom: 1rem;
    position: relative;
}

.abs-course-roadmap-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.1875rem;
    top: 2.25rem;
    bottom: 0;
    width: 2px;
    background: rgb(229 231 235);
}

html.dark .abs-course-roadmap-item:not(:last-child)::before {
    background: rgb(55 65 81);
}

.abs-course-roadmap-item--completed:not(:last-child)::before {
    background: rgb(139 94 60 / 0.35);
}

html:not(.dark) .abs-course-roadmap-item--completed:not(:last-child)::before {
    background: var(--abs-gold-border);
}

.abs-course-roadmap-item__marker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 9999px;
    border: 2px solid rgb(229 231 235);
    background: white;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(107 114 128);
}

html.dark .abs-course-roadmap-item__marker {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39);
    color: rgb(156 163 175);
}

.abs-course-roadmap-item--active .abs-course-roadmap-item__marker {
    border-color: #8b5e3c;
    background: rgb(139 94 60 / 0.12);
    color: #8b5e3c;
    box-shadow: 0 0 0 4px rgb(139 94 60 / 0.12);
}

html:not(.dark) .abs-course-roadmap-item--active .abs-course-roadmap-item__marker {
    border-color: var(--abs-gold);
    background: var(--abs-gold-muted);
    color: #92610d;
    box-shadow: 0 0 0 4px var(--abs-gold-muted);
}

html.dark .abs-course-roadmap-item--active .abs-course-roadmap-item__marker {
    background: rgb(139 94 60 / 0.2);
    color: rgb(214 180 152);
}

.abs-course-roadmap-item--completed .abs-course-roadmap-item__marker {
    border-color: #8b5e3c;
    background: #8b5e3c;
    color: white;
}

html:not(.dark) .abs-course-roadmap-item--completed .abs-course-roadmap-item__marker {
    border-color: var(--abs-gold);
    background: var(--abs-gold);
    color: #422006;
}

.abs-course-roadmap-item__body {
    border-radius: 0.75rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251 / 0.65);
    padding: 0.875rem 1rem;
}

html.dark .abs-course-roadmap-item__body {
    border-color: rgb(55 65 81);
    background: rgb(17 24 39 / 0.35);
}

.abs-course-roadmap-item--active .abs-course-roadmap-item__body {
    border-color: rgb(139 94 60 / 0.35);
    background: rgb(139 94 60 / 0.06);
}

html:not(.dark) .abs-course-roadmap-item--active .abs-course-roadmap-item__body {
    border-color: var(--abs-gold-border);
    background: var(--abs-gold-muted);
}

html.dark .abs-course-roadmap-item--active .abs-course-roadmap-item__body {
    border-color: rgb(139 94 60 / 0.45);
    background: rgb(139 94 60 / 0.12);
}

.abs-course-roadmap-item--completed .abs-course-roadmap-item__body {
    opacity: 0.92;
}

.abs-course-roadmap-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.abs-course-roadmap-item__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: rgb(17 24 39);
}

html.dark .abs-course-roadmap-item__title {
    color: rgb(243 244 246);
}

.abs-course-roadmap-item__stage {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: rgb(107 114 128);
}

html.dark .abs-course-roadmap-item__stage {
    color: rgb(156 163 175);
}

.abs-course-roadmap-item__date {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: rgb(107 114 128);
}

html.dark .abs-course-roadmap-item__date {
    color: rgb(156 163 175);
}

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

/* Small screens (phones) */
@media (max-width: 640px) {
    .fi-main-ctn > .fi-main {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-inline-start: 1rem;
        padding-inline-end: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }

    .fi-page-content {
        padding: 0;
    }

    /* Stats overview cards */
    .fi-wi-stats-overview {
        gap: 0.625rem;
    }

    .abs-dashboard-page .fi-wi-stats-overview-stat {
        padding: 1rem;
    }

    .abs-dashboard-page .fi-wi-stats-overview-stat-value {
        font-size: 1.375rem;
    }

    .abs-dashboard-page .fi-wi-stats-overview-stat-label {
        font-size: 0.75rem;
    }

    /* Tables */
    .fi-ta {
        font-size: 0.8125rem;
    }

    .fi-ta-header-cell,
    .fi-ta-cell {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Forms */
    .fi-sc-form {
        gap: 1rem;
    }

    .fi-section {
        padding: 1rem;
    }

    .fi-section-header-heading {
        font-size: 0.875rem;
    }

    /* Repeater */
    .fi-repeater-item {
        padding: 0.75rem;
    }

    .fi-repeater-item .fi-fo-field-wrp {
        margin-bottom: 0.5rem;
    }

    /* Hide less important table columns on mobile */
    .fi-ta-col-created_at,
    .fi-ta-col-updated_at {
        display: none;
    }

    /* Buttons */
    .fi-btn {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 0.8125rem;
    }

    /* Action buttons in tables */
    .fi-ta-actions {
        flex-wrap: wrap;
    }

    /* Dashboard specific */
    .abs-dashboard-page .fi-section-header-heading {
        font-size: 0.875rem;
    }

    /* Topbar */
    .fi-topbar {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Medium screens (tablets) */
@media (min-width: 641px) and (max-width: 1023px) {
    .fi-main-ctn > .fi-main {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-inline-start: 1.5rem;
        padding-inline-end: 1.5rem;
    }

    .abs-dashboard-page .fi-wi-stats-overview-stat {
        padding: 1.125rem;
    }

    .fi-section {
        padding: 1.25rem;
    }
}

/* Ensure proper form layout on all screens */
@media (max-width: 768px) {
    .fi-sc-form .fi-fo-field-wrp {
        width: 100%;
    }

    /* Repeater fields stack on mobile */
    .fi-repeater-item .fi-grid {
        grid-template-columns: 1fr !important;
    }

    .fi-repeater-item .fi-col {
        grid-column: span 1 !important;
    }

    /* Modal forms */
    .fi-modal {
        padding: 0.5rem;
    }

    .fi-modal-content {
        max-height: calc(100vh - 1rem);
        border-radius: 0.75rem;
    }
}

/* Fix sidebar overlay on mobile */
@media (max-width: 1023px) {
    .fi-sidebar {
        max-width: 100%;
        width: 16rem;
    }

    .fi-sidebar-overlay {
        background-color: rgb(0 0 0 / 0.5);
    }
}

/* Charts responsiveness */
@media (max-width: 640px) {
    .fi-wi-chart {
        padding: 0.75rem;
    }

    .fi-wi-chart canvas {
        max-height: 200px;
    }
}

/* Page headings */
@media (max-width: 640px) {
    .fi-page-heading {
        font-size: 1.25rem;
    }

    .fi-page-subheading {
        font-size: 0.8125rem;
    }
}

/* ============================================
   Dashboard overview — mockup layout
   ============================================ */

.abs-dashboard-page .fi-header-heading,
.abs-dashboard-page .fi-page-heading {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.abs-dashboard-page .fi-header-subheading,
.abs-dashboard-page .fi-page-subheading {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #64748b;
}

.abs-dashboard-page .fi-header-actions .fi-btn {
    border-radius: 0.65rem;
}

.abs-dashboard-page .abs-dashboard-filters {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.9rem;
    box-shadow: 0 4px 6px rgb(15 23 42 / 0.04);
    padding: 1rem 1.1rem;
}

.abs-dashboard-page .abs-dashboard-filters .fi-section-header {
    display: none;
}

.abs-dashboard-page .abs-dashboard-filters .fi-btn.fi-color-primary {
    background: var(--abs-accent);
    background-image: none;
    color: #fff;
    border-radius: 0.65rem;
    box-shadow: 0 8px 16px rgb(67 97 238 / 0.22);
}

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

@media (min-width: 768px) {
    .abs-presence-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .abs-presence-grid--summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .abs-presence-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .abs-presence-grid--summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.abs-presence-card,
.abs-dash-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.9rem;
    box-shadow: 0 4px 6px rgb(15 23 42 / 0.04);
}

.abs-presence-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 0.95rem;
    min-height: 6.5rem;
}

.abs-presence-card__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.abs-presence-card__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    line-height: 1.3;
}

.abs-presence-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0f172a;
    line-height: 1.1;
}

.abs-icon-badge,
.abs-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.abs-icon-badge {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
}

.abs-icon-tile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
}

.abs-icon-badge .fi-icon,
.abs-icon-tile .fi-icon,
.abs-icon-badge svg,
.abs-icon-tile svg {
    width: 1.1rem;
    height: 1.1rem;
}

.abs-icon-badge--success,
.abs-icon-tile--green,
.abs-icon-tile--success {
    background: #dcfce7;
    color: #16a34a;
}

.abs-icon-badge--danger,
.abs-icon-tile--red,
.abs-icon-tile--danger {
    background: #fee2e2;
    color: #dc2626;
}

.abs-icon-badge--warning,
.abs-icon-tile--orange,
.abs-icon-tile--warning {
    background: #ffedd5;
    color: #ea580c;
}

.abs-icon-tile--blue,
.abs-icon-tile--info {
    background: #dbeafe;
    color: #2563eb;
}

.abs-icon-tile--purple {
    background: #ede9fe;
    color: #7c3aed;
}

.abs-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6875rem;
    color: #94a3b8;
    line-height: 1.2;
}

.abs-delta--up {
    color: #16a34a;
}

.abs-delta--down {
    color: #dc2626;
}

.abs-delta__arrow {
    font-weight: 700;
}

.abs-dash-card {
    padding: 1.15rem 1.2rem 1.25rem;
    height: 100%;
}

.abs-dash-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.abs-dash-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: #0f172a;
}

.abs-dash-card__subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.775rem;
    color: #64748b;
}

.abs-dash-card__link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--abs-accent);
    text-decoration: none;
}

.abs-dash-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
}

.abs-highlights__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.abs-highlights__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.abs-highlights__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.abs-highlights__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
}

.abs-highlights__value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
}

.abs-finance__grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .abs-finance__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.abs-finance__tile {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.85rem 0.8rem;
    border: 1px solid #eef2f7;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.abs-finance__label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
}

.abs-finance__value {
    display: block;
    margin-top: 0.15rem;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.abs-enrollment__body {
    display: grid;
    gap: 1.25rem;
    align-items: center;
}

@media (min-width: 640px) {
    .abs-enrollment__body {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

.abs-donut {
    --abs-donut-active: 0%;
    width: 9.5rem;
    height: 9.5rem;
    border-radius: 50%;
    background: conic-gradient(#22c55e 0 var(--abs-donut-active), #6366f1 var(--abs-donut-active) 100%);
    display: grid;
    place-items: center;
    margin-inline: auto;
    position: relative;
}

.abs-donut::before {
    content: "";
    position: absolute;
    width: 6.35rem;
    height: 6.35rem;
    border-radius: 50%;
    background: #fff;
}

.abs-donut__hole {
    position: relative;
    z-index: 1;
    text-align: center;
}

.abs-donut__hole strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.abs-donut__hole span {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.abs-enrollment__legend {
    display: grid;
    gap: 0.85rem;
}

.abs-enrollment__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.abs-enrollment__label {
    display: block;
    font-size: 0.8125rem;
    color: #64748b;
}

.abs-enrollment__row strong {
    font-size: 1rem;
    color: #0f172a;
}

.abs-enrollment__share {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
}

.abs-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
}

.abs-dot--green {
    background: #22c55e;
}

.abs-dot--blue {
    background: #6366f1;
}

.abs-enrollment__rate {
    padding-top: 0.75rem;
    border-top: 1px solid #eef2f7;
}

.abs-enrollment__rate span:first-child {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
}

.abs-enrollment__rate strong {
    display: block;
    margin: 0.15rem 0 0.15rem;
    font-size: 1.65rem;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.abs-academic-year {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.75rem 0.75rem 0.25rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.8rem;
    background: rgb(255 255 255 / 0.06);
    color: #e2e8f0;
}

.abs-academic-year__icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    background: rgb(67 97 238 / 0.22);
    color: #c7d2fe;
}

.abs-academic-year__label {
    display: block;
    font-size: 0.6875rem;
    color: rgb(226 232 240 / 0.65);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.abs-academic-year strong {
    font-size: 0.875rem;
    font-weight: 650;
}

.abs-dashboard-page .fi-wi-chart .fi-section {
    border-radius: 0.9rem;
    box-shadow: 0 4px 6px rgb(15 23 42 / 0.04);
}

html.dark .abs-presence-card,
html.dark .abs-dash-card,
html.dark .abs-finance__tile,
html.dark .abs-dashboard-page .abs-dashboard-filters {
    background: rgb(24 24 27 / 0.7);
    border-color: rgb(63 63 70 / 0.55);
}

html.dark .abs-presence-card__value,
html.dark .abs-dash-card__title,
html.dark .abs-highlights__value,
html.dark .abs-finance__value,
html.dark .abs-donut__hole strong,
html.dark .abs-enrollment__rate strong {
    color: #f8fafc;
}

html.dark .abs-donut::before {
    background: rgb(24 24 27);
}

@media (max-width: 640px) {
    .abs-dashboard-page .fi-header-heading,
    .abs-dashboard-page .fi-page-heading {
        font-size: 1.35rem;
    }

    .abs-presence-card__value {
        font-size: 1.25rem;
    }
}

/* ============================================
   Create / edit student form
   ============================================ */

.abs-student-form-page {
    accent-color: #ea580c;
}

.abs-student-form-page .fi-header-heading,
.abs-student-form-page .fi-page-heading {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.abs-student-form-page .fi-header-subheading,
.abs-student-form-page .fi-page-subheading {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #64748b;
}

.abs-student-form-page .fi-header-actions .fi-btn {
    border-radius: 0.65rem;
}

.abs-student-form-page .fi-sc-form,
.abs-student-form-page .fi-form {
    gap: 1rem;
}

.abs-student-form-page .abs-student-section .fi-section,
.abs-student-form-page .abs-student-section .fi-sc-section {
    border-radius: 0.95rem;
    box-shadow: 0 4px 10px rgb(15 23 42 / 0.04);
}

.abs-student-form-page .abs-student-section--personal .fi-section,
.abs-student-form-page .abs-student-section--personal .fi-sc-section {
    background: #fffaf5;
    border: 1px solid rgb(234 88 12 / 0.14);
}

.abs-student-form-page .abs-student-section--registration .fi-section,
.abs-student-form-page .abs-student-section--registration .fi-sc-section {
    background: #f8fafc;
    border: 1px solid rgb(100 116 139 / 0.16);
}

.abs-student-form-page .abs-student-section--guardian .fi-section,
.abs-student-form-page .abs-student-section--guardian .fi-sc-section {
    background: #faf5ff;
    border: 1px solid rgb(124 58 237 / 0.14);
}

.abs-student-form-page .abs-student-section--login .fi-section,
.abs-student-form-page .abs-student-section--login .fi-sc-section {
    background: #eff6ff;
    border: 1px solid rgb(37 99 235 / 0.14);
}

.abs-student-form-page .abs-student-section--training .fi-section,
.abs-student-form-page .abs-student-section--training .fi-sc-section {
    background: #f0fdf4;
    border: 1px solid rgb(22 163 74 / 0.14);
}

.abs-student-form-page .fi-section-header-heading {
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: #0f172a;
}

.abs-student-form-page .fi-section-header-description {
    font-size: 0.78rem;
    color: #64748b;
}

.abs-student-form-page .fi-section-header .fi-icon,
.abs-student-form-page .fi-section-header-icon {
    width: 2rem;
    height: 2rem;
    padding: 0.35rem;
    border-radius: 0.55rem;
    background: #ffedd5;
    color: #ea580c;
}

.abs-student-form-page .abs-student-section--guardian .fi-section-header .fi-icon,
.abs-student-form-page .abs-student-section--guardian .fi-section-header-icon {
    background: #ede9fe;
    color: #7c3aed;
}

.abs-student-form-page .abs-student-section--login .fi-section-header .fi-icon,
.abs-student-form-page .abs-student-section--login .fi-section-header-icon {
    background: #dbeafe;
    color: #2563eb;
}

.abs-student-form-page .abs-student-section--registration .fi-section-header .fi-icon,
.abs-student-form-page .abs-student-section--registration .fi-section-header-icon {
    background: #e2e8f0;
    color: #475569;
}

.abs-student-form-page .abs-student-section--training .fi-section-header .fi-icon,
.abs-student-form-page .abs-student-section--training .fi-section-header-icon {
    background: #dcfce7;
    color: #16a34a;
}

.abs-student-form-page .abs-student-photo .filepond--root,
.abs-student-form-page .abs-student-photo .fi-fo-file-upload,
.abs-student-form-page .abs-student-photo {
    min-height: 11rem;
}

.abs-student-form-page .abs-student-photo .filepond--panel-root,
.abs-student-form-page .abs-student-id-upload .filepond--panel-root {
    min-height: 8.5rem;
    border: 1px dashed #cbd5e1;
    background: #fff;
    border-radius: 0.75rem;
}

.abs-student-form-page .abs-student-photo .filepond--drop-label {
    min-height: 11rem;
}

.abs-student-form-page .abs-student-photo .filepond--drop-label label,
.abs-student-form-page .abs-student-id-upload .filepond--drop-label label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.8125rem;
    text-align: center;
}

.abs-student-form-page .abs-student-photo .filepond--drop-label label::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #94a3b8;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.abs-student-form-page .fi-fo-radio {
    gap: 1rem;
}

.abs-student-form-page .fi-btn.fi-color-warning:not(.fi-outlined) {
    background: #ea580c;
    background-image: none;
    color: #fff;
    border-color: #ea580c;
    box-shadow: 0 8px 16px rgb(234 88 12 / 0.22);
}

.abs-student-form-page .fi-btn.fi-color-warning.fi-outlined {
    background: #fff;
    color: #ea580c;
    border-color: #fdba74;
}

.abs-student-form-page .fi-fo-field-wrp-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #475569;
}

.abs-student-form-page .fi-fo-field-wrp-hint,
.abs-student-form-page .fi-fo-field-wrp-helper-text {
    font-size: 0.72rem;
    color: #94a3b8;
}

.abs-student-form-page .fi-input,
.abs-student-form-page .fi-select-input,
.abs-student-form-page .fi-ta-input,
.abs-student-form-page .fi-textarea {
    border-radius: 0.55rem;
    font-size: 0.875rem;
}

.abs-student-form-page .fi-sc-form-footer,
.abs-student-form-page .fi-form-actions,
.abs-student-form-page .fi-ac-btn-group {
    justify-content: flex-start;
}

html.dark .abs-student-form-page .abs-student-section .fi-section,
html.dark .abs-student-form-page .abs-student-section .fi-sc-section {
    background: rgb(24 24 27 / 0.72);
    border-color: rgb(63 63 70 / 0.55);
}

/* ── Course create / edit form ───────────────────────────────────── */
.abs-course-form-page .abs-course-section .fi-section,
.abs-course-form-page .abs-course-section .fi-sc-section {
    background: #faf8f5;
    border: 1px solid rgb(139 94 60 / 0.14);
    border-radius: 0.9rem;
    box-shadow: 0 4px 6px rgb(15 23 42 / 0.03);
}

.abs-course-form-page .abs-course-section--info .fi-section,
.abs-course-form-page .abs-course-section--info .fi-sc-section {
    background: #faf8f5;
}

.abs-course-form-page .abs-course-section--syllabus .fi-section,
.abs-course-form-page .abs-course-section--syllabus .fi-sc-section {
    background: #f7f9fc;
    border-color: rgb(67 97 238 / 0.12);
}

.abs-course-form-page .abs-course-section--online .fi-section,
.abs-course-form-page .abs-course-section--online .fi-sc-section {
    background: #f6faf7;
    border-color: rgb(16 185 129 / 0.16);
}

.abs-course-form-page .abs-course-thumbnail .filepond--root,
.abs-course-form-page .abs-course-thumbnail .fi-fo-file-upload,
.abs-course-form-page .abs-course-thumbnail {
    min-height: 14rem;
}

.abs-course-form-page .abs-course-thumbnail .filepond--panel-root {
    min-height: 14rem;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 0.75rem;
}

.abs-course-form-page .abs-course-thumbnail .filepond--drop-label {
    min-height: 14rem;
}

.abs-course-form-page .abs-course-thumbnail .filepond--drop-label label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: center;
    cursor: pointer;
}

.abs-course-form-page .abs-course-thumbnail .filepond--drop-label label::before {
    content: '';
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    background-color: #94a3b8;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21zM8.25 8.25h.008v.008H8.25V8.25z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21zM8.25 8.25h.008v.008H8.25V8.25z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.abs-course-form-page .abs-course-thumbnail:hover .filepond--drop-label label::before {
    background-color: var(--abs-brown, #8b5e3c);
}

.abs-course-form-page .abs-course-thumbnail:hover .filepond--drop-label label {
    color: #475569;
}

.abs-attendance-hub-page .abs-attendance-hub-cards {
    margin-bottom: 1.25rem;
}

.abs-attendance-hub-page .abs-attendance-hub-cards.abs-presence-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 768px) {
    .abs-attendance-hub-page .abs-attendance-hub-cards.abs-presence-grid {
        grid-template-columns: 1fr;
    }
}

.abs-attendance-hub-card {
    min-height: 7.5rem;
}

.abs-attendance-hub-card__statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
    margin-top: 0.45rem;
}

.abs-attendance-status {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.abs-attendance-status--present {
    color: #16a34a;
}

.abs-attendance-status--absent {
    color: #dc2626;
}

.abs-attendance-status--late {
    color: #ea580c;
}

/* Ethiopian date picker + 12-hour AM/PM time picker */
.abs-ethiopian-datepicker,
.abs-ampm-timepicker {
    position: relative;
    width: 100%;
}

.abs-ethiopian-datepicker__trigger,
.abs-ampm-timepicker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--gray-300, #cbd5e1) 100%, transparent);
    background: var(--color-white, #fff);
    color: var(--gray-950, #0f172a);
    text-align: start;
    cursor: pointer;
}

.abs-ethiopian-datepicker__trigger:disabled,
.abs-ampm-timepicker__trigger:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.abs-ethiopian-datepicker__value,
.abs-ampm-timepicker__value {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.abs-ethiopian-datepicker__value--placeholder,
.abs-ampm-timepicker__value--placeholder {
    color: var(--gray-400, #94a3b8);
}

.abs-ethiopian-datepicker__icon,
.abs-ampm-timepicker__icon {
    display: inline-flex;
    color: var(--gray-500, #64748b);
}

.abs-ethiopian-datepicker__icon svg,
.abs-ampm-timepicker__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.abs-ethiopian-datepicker__panel,
.abs-ampm-timepicker__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.35rem);
    left: 0;
    width: min(22rem, 100%);
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--gray-200, #e2e8f0) 100%, transparent);
    background: var(--color-white, #fff);
    box-shadow: 0 10px 25px rgb(15 23 42 / 0.12);
}

.abs-ethiopian-datepicker__header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.abs-ethiopian-datepicker__selects {
    display: flex;
    flex: 1;
    gap: 0.4rem;
}

.abs-ethiopian-datepicker__select,
.abs-ampm-timepicker__select {
    width: 100%;
    min-height: 2rem;
    padding: 0.25rem 0.4rem;
    border-radius: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--gray-300, #cbd5e1) 100%, transparent);
    background: var(--color-white, #fff);
    color: inherit;
    font-size: 0.8125rem;
}

.abs-ethiopian-datepicker__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    color: var(--gray-600, #475569);
}

.abs-ethiopian-datepicker__nav:hover,
.abs-ethiopian-datepicker__today:hover,
.abs-ampm-timepicker__chip:hover {
    background: color-mix(in srgb, var(--primary-500, #8b5e3c) 12%, transparent);
}

.abs-ethiopian-datepicker__weekdays,
.abs-ethiopian-datepicker__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.15rem;
    text-align: center;
}

.abs-ethiopian-datepicker__weekdays {
    margin-bottom: 0.35rem;
    color: var(--gray-500, #64748b);
    font-size: 0.7rem;
    font-weight: 600;
}

.abs-ethiopian-datepicker__day {
    min-height: 2rem;
    border-radius: 0.4rem;
    font-size: 0.8125rem;
}

.abs-ethiopian-datepicker__day.is-today {
    box-shadow: inset 0 0 0 1px var(--primary-500, #8b5e3c);
}

.abs-ethiopian-datepicker__day.is-selected,
.abs-ampm-timepicker__chip.is-selected {
    background: var(--primary-500, #8b5e3c);
    color: #fff;
}

.abs-ethiopian-datepicker__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.65rem;
}

.abs-ethiopian-datepicker__today {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-600, #8b5e3c);
}

.abs-ampm-timepicker__hours {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.abs-ampm-timepicker__chip {
    min-height: 2rem;
    border-radius: 0.4rem;
    border: 1px solid color-mix(in srgb, var(--gray-200, #e2e8f0) 100%, transparent);
    font-size: 0.8125rem;
    font-weight: 600;
}

.abs-ampm-timepicker__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: end;
}

.abs-ampm-timepicker__label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-600, #475569);
}

.abs-ampm-timepicker__period {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    min-width: 7rem;
}

html.dark .abs-ethiopian-datepicker__trigger,
html.dark .abs-ampm-timepicker__trigger,
html.dark .abs-ethiopian-datepicker__panel,
html.dark .abs-ampm-timepicker__panel,
html.dark .abs-ethiopian-datepicker__select,
html.dark .abs-ampm-timepicker__select {
    background: var(--gray-900, #0f172a);
    border-color: color-mix(in srgb, var(--gray-700, #334155) 100%, transparent);
    color: var(--gray-100, #f1f5f9);
}