:root {
    --bdf-ink: #111827;
    --bdf-muted: #64748b;
    --bdf-line: rgba(15, 23, 42, 0.10);
    --bdf-panel: rgba(255, 255, 255, 0.92);
    --bdf-gold: #b7791f;
    --bdf-gold-soft: #fff7ed;
}

.fi-body {
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(244, 247, 251, 1)),
        #f8fafc;
    color: var(--bdf-ink);
}

.fi-sidebar {
    background: linear-gradient(180deg, #111827 0%, #182235 58%, #101827 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.fi-sidebar .fi-sidebar-nav,
.fi-sidebar .fi-sidebar-header {
    background: transparent;
}

.fi-topbar {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid var(--bdf-line);
    backdrop-filter: blur(14px);
}

.fi-main {
    max-width: 1520px;
}

.fi-logo {
    letter-spacing: 0;
}

.bdf-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #ffffff;
    line-height: 1.05;
}

.bdf-brand-logo__mark {
    display: inline-grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 0.7rem;
    background: linear-gradient(135deg, #d6a54c, #8a5a18);
    color: #111827;
    font-size: 0.78rem;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.bdf-brand-logo__text {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.bdf-brand-logo__text strong {
    color: #ffffff;
    font-size: 0.9rem;
}

.fi-sidebar-group-label,
.fi-sidebar-item-label {
    letter-spacing: 0;
}

.fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.86);
    font-weight: 650;
}

.fi-sidebar-item a,
.fi-sidebar-item-button {
    border-radius: 0.7rem;
    color: rgba(255, 255, 255, 0.88);
}

.fi-section,
.fi-ta-ctn,
.fi-fo-field-wrp,
.fi-modal-window {
    border-color: var(--bdf-line);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

.fi-section {
    background: var(--bdf-panel);
}

.fi-ta-header,
.fi-ta-content {
    background: rgba(255, 255, 255, 0.96);
}

.fi-ta-table thead {
    background: #f8fafc;
}

.fi-ta-table th {
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
}

.fi-ta-row:hover {
    background: #fffbeb;
}

.fi-badge {
    border-radius: 999px;
    font-weight: 700;
}

.fi-btn {
    border-radius: 0.7rem;
    font-weight: 700;
}

.bdf-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: end;
    padding: clamp(1.25rem, 2vw, 2rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.2rem;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.94)),
        #111827;
    color: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.bdf-dashboard-hero__eyebrow,
.bdf-login-brand__eyebrow {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: rgba(214, 165, 76, 0.18);
    color: #f8d590;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    padding: 0.3rem 0.65rem;
}

.bdf-dashboard-hero h1 {
    margin-top: 0.8rem;
    font-size: clamp(1.55rem, 2.5vw, 2.45rem);
    font-weight: 800;
    letter-spacing: 0;
}

.bdf-dashboard-hero p {
    margin-top: 0.55rem;
    max-width: 58rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.98rem;
}

.bdf-dashboard-hero__status {
    display: flex;
    min-width: 15rem;
    align-items: center;
    gap: 0.7rem;
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.85rem 1rem;
}

.bdf-dashboard-hero__status strong,
.bdf-dashboard-hero__status span {
    display: block;
}

.bdf-dashboard-hero__status span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
}

.bdf-status-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 0.35rem rgba(34, 197, 94, 0.18);
}

.bdf-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
    margin-top: 0.95rem;
}

.bdf-shortcut-card {
    display: block;
    min-height: 6rem;
    border: 1px solid var(--bdf-line);
    border-radius: 0.95rem;
    background: #ffffff;
    padding: 1rem;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.bdf-shortcut-card:hover {
    transform: translateY(-2px);
    border-color: rgba(183, 121, 31, 0.36);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

.bdf-shortcut-card span {
    display: block;
    color: var(--bdf-ink);
    font-weight: 800;
}

.bdf-shortcut-card small {
    display: block;
    margin-top: 0.45rem;
    color: var(--bdf-muted);
    line-height: 1.35;
}

.bdf-login-brand {
    margin-bottom: 1.25rem;
    text-align: center;
}

.bdf-login-brand h1 {
    margin-top: 0.75rem;
    color: var(--bdf-ink);
    font-size: 1.55rem;
    font-weight: 850;
    letter-spacing: 0;
}

.bdf-login-brand p {
    margin: 0.45rem auto 0;
    max-width: 26rem;
    color: var(--bdf-muted);
    font-size: 0.92rem;
}

.fi-simple-layout {
    background:
        radial-gradient(circle at 50% 0%, rgba(214, 165, 76, 0.18), transparent 34rem),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.fi-simple-main {
    border: 1px solid var(--bdf-line);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.13);
}

.bdf-sidebar-footer {
    margin: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding-top: 0.8rem;
    color: rgba(255, 255, 255, 0.76);
}

.bdf-sidebar-footer span,
.bdf-sidebar-footer small {
    display: block;
}

.bdf-sidebar-footer span {
    font-size: 0.78rem;
    font-weight: 800;
}

.bdf-sidebar-footer small {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.72rem;
}

@media (max-width: 768px) {
    .bdf-dashboard-hero {
        grid-template-columns: 1fr;
        border-radius: 0.95rem;
    }

    .bdf-dashboard-hero__status {
        min-width: 0;
    }

    .bdf-shortcut-grid {
        grid-template-columns: 1fr;
    }
}

.fi-sidebar-item.fi-active a,
.fi-sidebar-item a[aria-current="page"],
.fi-sidebar-item-button[aria-current="page"] {
    background: linear-gradient(135deg, rgba(214, 165, 76, 0.22), rgba(124, 58, 237, 0.10));
    color: #ffffff;
    box-shadow: inset 3px 0 0 #d6a54c;
}

.fi-sidebar-item a:hover,
.fi-sidebar-item-button:hover {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
}

.fi-sidebar-item-icon {
    color: rgba(248, 213, 144, 0.94);
}

.fi-sidebar-item a:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item a[aria-current="page"] .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label {
    color: #ffffff;
}

.fi-header-heading {
    color: #101827;
    font-weight: 850;
    letter-spacing: 0;
}

.fi-header-subheading {
    color: var(--bdf-muted);
}

.bdf-command-center {
    display: grid;
    gap: 1.05rem;
}

.bdf-command-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
    gap: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1.35rem;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(28, 37, 57, 0.97) 56%, rgba(60, 32, 104, 0.94)),
        #0f172a;
    padding: clamp(1.2rem, 2.2vw, 2.25rem);
    color: #ffffff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.26);
}

.bdf-command-hero::after {
    content: "";
    position: absolute;
    right: -8rem;
    top: -8rem;
    width: 20rem;
    height: 20rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(214, 165, 76, 0.28), rgba(214, 165, 76, 0));
    pointer-events: none;
}

.bdf-command-hero__main,
.bdf-command-hero__panel {
    position: relative;
    z-index: 1;
}

.bdf-command-hero__eyebrow {
    display: inline-flex;
    width: fit-content;
    border: 1px solid rgba(248, 213, 144, 0.30);
    border-radius: 999px;
    background: rgba(214, 165, 76, 0.13);
    color: #f8d590;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0;
    padding: 0.32rem 0.7rem;
}

.bdf-command-hero h1 {
    max-width: 760px;
    margin-top: 0.85rem;
    font-size: clamp(1.7rem, 3vw, 3.05rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
}

.bdf-command-hero p {
    max-width: 660px;
    margin-top: 0.8rem;
    color: rgba(255, 255, 255, 0.73);
    font-size: 1rem;
    line-height: 1.6;
}

.bdf-command-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.25rem;
}

.bdf-command-meta > span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
}

.bdf-command-status i {
    display: inline-block;
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.45rem;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 0.25rem rgba(34, 197, 94, 0.18);
}

.bdf-command-hero__panel {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 12rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.05rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
    padding: 1.1rem;
    backdrop-filter: blur(14px);
}

.bdf-panel-label {
    color: #f8d590;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.bdf-command-hero__panel strong {
    margin-top: 0.4rem;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.05;
}

.bdf-command-hero__panel small {
    margin-top: 0.6rem;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.45;
}

.bdf-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.bdf-kpi-card {
    position: relative;
    display: flex;
    min-height: 10.5rem;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bdf-line);
    border-radius: 1.05rem;
    background: #ffffff;
    padding: 1.1rem;
    text-decoration: none;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.07);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.bdf-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: var(--bdf-card-accent, #d6a54c);
}

.bdf-kpi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 23, 42, 0.18);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.bdf-kpi-card__label {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.bdf-kpi-card strong {
    margin-top: 0.7rem;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 900;
    line-height: 1.05;
}

.bdf-kpi-card small {
    margin-top: 0.55rem;
    color: var(--bdf-muted);
    line-height: 1.45;
}

.bdf-kpi-card em {
    margin-top: auto;
    color: var(--bdf-card-accent, #b7791f);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 850;
}

.bdf-kpi-card--amber { --bdf-card-accent: #d6a54c; background: linear-gradient(180deg, #ffffff, #fffbeb); }
.bdf-kpi-card--green { --bdf-card-accent: #22c55e; background: linear-gradient(180deg, #ffffff, #f0fdf4); }
.bdf-kpi-card--violet { --bdf-card-accent: #8b5cf6; background: linear-gradient(180deg, #ffffff, #f5f3ff); }
.bdf-kpi-card--blue { --bdf-card-accent: #0ea5e9; background: linear-gradient(180deg, #ffffff, #f0f9ff); }
.bdf-kpi-card--red { --bdf-card-accent: #e11d48; background: linear-gradient(180deg, #ffffff, #fff1f2); }
.bdf-kpi-card--slate { --bdf-card-accent: #64748b; background: linear-gradient(180deg, #ffffff, #f8fafc); }

.bdf-command-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
    gap: 0.95rem;
}

.bdf-command-panel {
    border: 1px solid var(--bdf-line);
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, 0.96);
    padding: 1.05rem;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06);
}

.bdf-command-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bdf-command-panel__header span {
    color: #b7791f;
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.bdf-command-panel__header h2 {
    margin-top: 0.25rem;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0;
}

.bdf-command-panel__header a {
    flex: none;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.42rem 0.7rem;
    text-decoration: none;
}

.bdf-command-panel__header a:hover {
    background: #111827;
    color: #ffffff;
}

.bdf-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.bdf-metric,
.bdf-finance-list > div {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.9rem;
    background: #f8fafc;
    padding: 0.85rem;
}

.bdf-metric span,
.bdf-finance-list span {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
}

.bdf-metric strong,
.bdf-finance-list strong {
    display: block;
    margin-top: 0.35rem;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 900;
}

.bdf-metric small,
.bdf-finance-list small {
    display: block;
    margin-top: 0.35rem;
    color: #64748b;
    line-height: 1.35;
}

.bdf-finance-list {
    display: grid;
    gap: 0.7rem;
}

.bdf-finance-list > div:nth-child(2) {
    background: #f0fdf4;
}

.bdf-finance-list > div:nth-child(3) {
    background: #fff7ed;
}

.bdf-finance-list > div:nth-child(4) {
    background: #fff1f2;
}

.bdf-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
}

.bdf-action-card {
    display: block;
    min-height: 5.8rem;
    border: 1px solid var(--bdf-line);
    border-radius: 0.95rem;
    background: #ffffff;
    padding: 0.95rem;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.045);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.bdf-action-card:hover {
    transform: translateY(-2px);
    background: #fffbeb;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}

.bdf-action-card span {
    display: block;
    color: #0f172a;
    font-weight: 900;
}

.bdf-action-card small {
    display: block;
    margin-top: 0.4rem;
    color: #64748b;
    line-height: 1.35;
}

@media (max-width: 1180px) {
    .bdf-kpi-grid,
    .bdf-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 760px) {
    .bdf-command-hero,
    .bdf-kpi-grid,
    .bdf-metric-grid {
        grid-template-columns: 1fr;
    }

    .bdf-command-hero {
        border-radius: 1rem;
    }

    .bdf-command-panel__header {
        display: block;
    }

    .bdf-command-panel__header a {
        display: inline-flex;
        margin-top: 0.75rem;
    }
}

/* Step 16 redesign revision: dense admin command center + app-like portal dashboard. */
.bdf-ops-dashboard {
    display: grid;
    gap: 0.8rem;
}

.bdf-ops-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem 1rem;
    align-items: start;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 0.95rem;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8fafc 58%, #fff7ed 100%);
    padding: 1rem 1.1rem;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
}

.bdf-ops-eyebrow,
.bdf-portal-kicker {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: rgba(214, 165, 76, 0.13);
    color: #9a5f11;
    font-size: 0.7rem;
    font-weight: 850;
    padding: 0.22rem 0.55rem;
}

.bdf-ops-header h1 {
    margin-top: 0.42rem;
    color: #0f172a;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 900;
    line-height: 1.05;
}

.bdf-ops-header p {
    max-width: 50rem;
    margin-top: 0.32rem;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.45;
}

.bdf-ops-header__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    max-width: 34rem;
}

.bdf-ops-header__meta span,
.bdf-ops-header__actions a {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.3rem 0.65rem;
}

.bdf-ops-header__meta span {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    color: #475569;
}

.bdf-ops-status i {
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.4rem;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 0.22rem rgba(34, 197, 94, 0.16);
}

.bdf-ops-header__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.bdf-ops-header__actions a {
    background: #111827;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12);
}

.bdf-ops-header__actions a:hover {
    background: #d6a54c;
    color: #111827;
}

.bdf-kpi-grid--compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
}

.bdf-kpi-grid--compact .bdf-kpi-card {
    min-height: 7.6rem;
    border-radius: 0.82rem;
    padding: 0.78rem 0.85rem;
}

.bdf-kpi-grid--compact .bdf-kpi-card strong {
    margin-top: 0.42rem;
    font-size: clamp(1.05rem, 1.65vw, 1.45rem);
}

.bdf-kpi-grid--compact .bdf-kpi-card small {
    margin-top: 0.3rem;
    font-size: 0.72rem;
}

.bdf-kpi-grid--compact .bdf-kpi-card em {
    font-size: 0.72rem;
}

.bdf-ops-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr) minmax(260px, 0.65fr);
    gap: 0.8rem;
    align-items: start;
}

.bdf-ops-panel {
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.97);
    padding: 0.9rem;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.055);
}

.bdf-ops-panel--system {
    grid-column: span 2;
}

.bdf-ops-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.75rem;
}

.bdf-ops-panel__header span {
    color: #9a5f11;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.bdf-ops-panel__header h2 {
    margin-top: 0.18rem;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 900;
}

.bdf-ops-panel__header a {
    flex: none;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 850;
    padding: 0.35rem 0.62rem;
    text-decoration: none;
}

.bdf-ops-panel__header a:hover {
    background: #111827;
    color: #ffffff;
}

.bdf-flow-list,
.bdf-status-list {
    display: grid;
    gap: 0.55rem;
}

.bdf-flow-row {
    display: grid;
    grid-template-columns: 7.1rem minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.78rem;
    background: #f8fafc;
    padding: 0.68rem;
}

.bdf-flow-row__time {
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 900;
}

.bdf-flow-row strong,
.bdf-status-card strong,
.bdf-system-card span {
    display: block;
    color: #0f172a;
    font-weight: 900;
}

.bdf-flow-row small,
.bdf-status-card small,
.bdf-system-card small {
    display: block;
    margin-top: 0.2rem;
    color: #64748b;
    line-height: 1.35;
}

.bdf-flow-row em {
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 850;
    padding: 0.22rem 0.5rem;
}

.bdf-finance-list--dense {
    gap: 0.55rem;
}

.bdf-finance-list--dense > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.65rem;
    align-items: center;
    border-radius: 0.78rem;
    padding: 0.68rem;
}

.bdf-finance-list--dense small {
    grid-column: 1 / -1;
    font-size: 0.72rem;
}

.bdf-status-card {
    display: block;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 0.24rem solid var(--bdf-status-accent, #d6a54c);
    border-radius: 0.78rem;
    background: #ffffff;
    padding: 0.68rem 0.72rem;
    text-decoration: none;
}

.bdf-status-card:hover,
.bdf-system-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
}

.bdf-status-card--green { --bdf-status-accent: #22c55e; }
.bdf-status-card--amber { --bdf-status-accent: #d6a54c; }
.bdf-status-card--violet { --bdf-status-accent: #8b5cf6; }
.bdf-status-card--red { --bdf-status-accent: #e11d48; }

.bdf-system-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.bdf-system-card,
.bdf-action-grid--dense .bdf-action-card {
    min-height: 4.9rem;
    border-radius: 0.78rem;
    padding: 0.72rem;
}

.bdf-action-grid--dense {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.55rem;
}

.bdf-portal-dashboard {
    display: grid;
    gap: 1rem;
}

.bdf-portal-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 1rem;
    align-items: end;
    overflow: hidden;
    border: 1px solid rgba(214, 165, 76, 0.18);
    border-radius: 1.4rem;
    background:
        linear-gradient(135deg, #ffffff 0%, #fff7ed 56%, #f5f3ff 100%);
    padding: 1.25rem;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
}

.bdf-portal-top h1 {
    margin-top: 0.55rem;
    color: #111827;
    font-size: clamp(1.55rem, 3.5vw, 2.35rem);
    font-weight: 900;
}

.bdf-portal-top p {
    max-width: 42rem;
    margin-top: 0.45rem;
    color: #64748b;
    line-height: 1.55;
}

.bdf-portal-context {
    border-radius: 1.05rem;
    background: #111827;
    color: #ffffff;
    padding: 1rem;
}

.bdf-portal-context strong,
.bdf-portal-context span {
    display: block;
}

.bdf-portal-context span {
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
}

.bdf-portal-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.bdf-portal-card,
.bdf-portal-action {
    display: block;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.15rem;
    background: #ffffff;
    padding: 1rem;
    text-decoration: none;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.bdf-portal-card {
    min-height: 8.5rem;
}

.bdf-portal-card:hover,
.bdf-portal-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.10);
}

.bdf-portal-card span,
.bdf-portal-action span {
    display: block;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 850;
}

.bdf-portal-card strong {
    display: block;
    margin-top: 0.55rem;
    color: #0f172a;
    font-size: 1.6rem;
    font-weight: 900;
}

.bdf-portal-card small,
.bdf-portal-action small {
    display: block;
    margin-top: 0.4rem;
    color: #64748b;
    line-height: 1.4;
}

.bdf-portal-card--amber { background: linear-gradient(180deg, #ffffff, #fff7ed); }
.bdf-portal-card--green { background: linear-gradient(180deg, #ffffff, #ecfdf5); }
.bdf-portal-card--blue { background: linear-gradient(180deg, #ffffff, #eff6ff); }
.bdf-portal-card--violet { background: linear-gradient(180deg, #ffffff, #f5f3ff); }

.bdf-portal-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.97);
    padding: 1rem;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.055);
}

.bdf-portal-panel__header span {
    color: #9a5f11;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.bdf-portal-panel__header h2 {
    margin-top: 0.2rem;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 900;
}

.bdf-portal-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.7rem;
    margin-top: 0.8rem;
}

@media (max-width: 1320px) {
    .bdf-kpi-grid--compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bdf-ops-grid {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    }

    .bdf-ops-panel--system {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .bdf-ops-header,
    .bdf-ops-grid,
    .bdf-portal-top {
        grid-template-columns: 1fr;
    }

    .bdf-ops-header__meta {
        justify-content: flex-start;
    }

    .bdf-system-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .bdf-kpi-grid--compact,
    .bdf-system-grid {
        grid-template-columns: 1fr;
    }

    .bdf-flow-row {
        grid-template-columns: 1fr;
    }
}

.bdf-page-shell {
    display: grid;
    gap: 1rem;
}

.bdf-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 62%, #fff7ed 100%);
    padding: 1.1rem;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
}

.bdf-page-kicker {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: rgba(214, 165, 76, 0.13);
    color: #9a5f11;
    font-size: 0.72rem;
    font-weight: 850;
    padding: 0.24rem 0.58rem;
}

.bdf-page-header h1 {
    margin-top: 0.45rem;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 900;
}

.bdf-page-header p {
    max-width: 56rem;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.5;
}

.bdf-page-status {
    min-width: 13rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 0.28rem solid var(--bdf-page-status, #d6a54c);
    border-radius: 0.9rem;
    background: #ffffff;
    padding: 0.85rem;
}

.bdf-page-status strong,
.bdf-page-status span {
    display: block;
}

.bdf-page-status strong {
    color: #0f172a;
    font-weight: 900;
}

.bdf-page-status span {
    margin-top: 0.25rem;
    color: #64748b;
    font-size: 0.78rem;
}

.bdf-page-status--green { --bdf-page-status: #22c55e; }
.bdf-page-status--violet { --bdf-page-status: #8b5cf6; }
.bdf-page-status--amber { --bdf-page-status: #d6a54c; }

.bdf-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
}

.bdf-page-actions--left {
    justify-content: flex-start;
}

.bdf-page-actions a,
.bdf-page-actions button,
.bdf-form-actions button,
.bdf-export-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    border: 0;
    border-radius: 0.72rem;
    background: #111827;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 850;
    padding: 0.55rem 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

.bdf-page-actions button,
.bdf-page-actions a:nth-child(2) {
    background: #fff7ed;
    color: #9a5f11;
}

.bdf-page-actions a:hover,
.bdf-page-actions button:hover,
.bdf-form-actions button:hover,
.bdf-export-card a:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.bdf-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    gap: 1rem;
}

.bdf-form-card,
.bdf-side-card,
.bdf-filter-card,
.bdf-report-panel,
.bdf-context-notice {
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.97);
    padding: 1rem;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.055);
}

.bdf-section-heading span,
.bdf-side-card span,
.bdf-filter-card label span,
.bdf-report-card span,
.bdf-context-card span,
.bdf-export-card span {
    color: #9a5f11;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.bdf-section-heading h2,
.bdf-side-card h2,
.bdf-export-card h2 {
    margin-top: 0.22rem;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 900;
}

.bdf-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1rem;
}

.bdf-field--full {
    grid-column: 1 / -1;
}

.bdf-field span {
    display: block;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 850;
    margin-bottom: 0.35rem;
}

.bdf-field input,
.bdf-filter-card input,
.bdf-filter-card select {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.72rem;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.9rem;
    padding: 0.65rem 0.75rem;
}

.bdf-field input:focus,
.bdf-filter-card input:focus,
.bdf-filter-card select:focus {
    border-color: #d6a54c;
    box-shadow: 0 0 0 0.2rem rgba(214, 165, 76, 0.14);
    outline: none;
}

.bdf-field-error {
    display: block;
    margin-top: 0.3rem;
    color: #e11d48;
    font-weight: 750;
}

.bdf-form-actions {
    margin-top: 1rem;
}

.bdf-side-card ul {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.8rem;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.45;
}

.bdf-filter-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.bdf-filter-card label span {
    display: block;
    margin-bottom: 0.35rem;
}

.bdf-report-kpis,
.bdf-context-grid,
.bdf-export-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.bdf-report-card,
.bdf-context-card,
.bdf-export-card {
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 0.95rem;
    background: #ffffff;
    padding: 0.95rem;
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.055);
}

.bdf-report-card {
    border-left: 0.28rem solid var(--bdf-card-accent, #d6a54c);
}

.bdf-report-card strong,
.bdf-context-card strong {
    display: block;
    margin-top: 0.45rem;
    color: #0f172a;
    font-size: 1.45rem;
    font-weight: 900;
}

.bdf-report-card small,
.bdf-export-card p,
.bdf-context-notice p {
    display: block;
    margin-top: 0.4rem;
    color: #64748b;
    line-height: 1.42;
}

.bdf-report-card--blue { --bdf-card-accent: #0ea5e9; }
.bdf-report-card--violet { --bdf-card-accent: #8b5cf6; }
.bdf-report-card--green { --bdf-card-accent: #22c55e; }
.bdf-report-card--amber { --bdf-card-accent: #d6a54c; }

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

.bdf-data-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.bdf-data-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    border-radius: 0.72rem;
    background: #f8fafc;
    padding: 0.72rem;
}

.bdf-data-list span {
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 750;
}

.bdf-data-list strong {
    color: #0f172a;
    font-weight: 900;
}

.bdf-export-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.bdf-export-card {
    display: flex;
    min-height: 9rem;
    flex-direction: column;
    justify-content: space-between;
}

.bdf-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.bdf-export-actions a:nth-child(2) {
    background: #fff7ed;
    color: #9a5f11;
}

.bdf-context-notice {
    border-color: rgba(214, 165, 76, 0.25);
    background: #fff7ed;
}

.bdf-context-notice strong {
    color: #9a5f11;
    font-weight: 900;
}

.fi-ta-table {
    border-collapse: separate;
    border-spacing: 0;
}

.fi-ta-row {
    transition: background 150ms ease, transform 150ms ease;
}

@media (max-width: 900px) {
    .bdf-page-header,
    .bdf-profile-layout,
    .bdf-filter-card,
    .bdf-report-grid {
        grid-template-columns: 1fr;
    }

    .bdf-report-kpis,
    .bdf-context-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .bdf-field-grid,
    .bdf-report-kpis,
    .bdf-context-grid {
        grid-template-columns: 1fr;
    }

    .bdf-page-status {
        min-width: 0;
    }

    .bdf-page-actions {
        justify-content: flex-start;
    }
}

/* Step 17 premium mobile UX revamp: visual language only, no backend behavior changes. */
:root {
    --bdf-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bdf-premium-bg: #f6f2eb;
    --bdf-premium-surface: rgba(255, 255, 255, 0.96);
    --bdf-premium-ink: #111113;
    --bdf-premium-muted: #6b7280;
    --bdf-premium-gold: #c9973a;
    --bdf-premium-gold-soft: #fff6df;
    --bdf-premium-green: #147d4f;
    --bdf-premium-red: #b4233c;
    --bdf-premium-blue: #315f9d;
}

html,
body,
.fi-body,
.fi-simple-layout,
.fi-sidebar,
.fi-main,
.fi-btn,
.fi-input-wrp,
.fi-ta,
.fi-dropdown-panel {
    font-family: var(--bdf-font);
}

.fi-body {
    background:
        radial-gradient(circle at 12% 0%, rgba(201, 151, 58, 0.14), transparent 28rem),
        linear-gradient(180deg, #faf7f2 0%, #f4f0e9 48%, #f7f8fb 100%);
}

.fi-main {
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

.fi-section,
.fi-ta-ctn,
.fi-modal-window,
.fi-fo-field-wrp,
.fi-dropdown-panel {
    border-radius: 1rem;
    border-color: rgba(17, 17, 19, 0.09);
    background: var(--bdf-premium-surface);
    box-shadow: 0 18px 48px rgba(17, 17, 19, 0.07);
}

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-ta-header-heading {
    color: var(--bdf-premium-ink);
    font-weight: 900;
    letter-spacing: 0;
}

.fi-header-subheading,
.fi-section-header-description,
.fi-ta-header-description,
.fi-fo-field-wrp-helper-text {
    color: var(--bdf-premium-muted);
    line-height: 1.55;
}

.fi-fo-field-wrp-label span,
.fi-input,
.fi-select-input,
.fi-ta-cell,
.fi-ta-header-cell-label {
    font-size: 0.92rem;
    line-height: 1.45;
}

.fi-fo-field-wrp-label span,
.fi-ta-header-cell-label {
    font-weight: 800;
}

.fi-btn {
    min-height: 2.55rem;
    border-radius: 0.78rem;
    font-weight: 850;
    letter-spacing: 0;
}

.fi-btn-color-primary {
    background: linear-gradient(135deg, #111113, #2b2417) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(17, 17, 19, 0.16);
}

.fi-btn-color-primary:hover {
    background: linear-gradient(135deg, #2b2417, #9a6a18) !important;
}

.fi-sidebar {
    background:
        linear-gradient(180deg, #090b12 0%, #111827 42%, #17120b 100%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.fi-sidebar-group-label {
    color: rgba(255, 246, 223, 0.74);
    font-size: 0.72rem;
    font-weight: 900;
}

.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.90);
    font-size: 0.91rem;
}

.fi-sidebar-item-icon {
    color: rgba(255, 218, 143, 0.96);
}

.fi-sidebar-item a,
.fi-sidebar-item-button {
    min-height: 2.48rem;
    border-radius: 0.88rem;
}

.fi-sidebar-item.fi-active a,
.fi-sidebar-item a[aria-current="page"],
.fi-sidebar-item-button[aria-current="page"] {
    background: linear-gradient(135deg, rgba(201, 151, 58, 0.30), rgba(255, 255, 255, 0.10));
    box-shadow: inset 3px 0 0 var(--bdf-premium-gold), 0 10px 26px rgba(0, 0, 0, 0.16);
}

.fi-topbar {
    background: rgba(255, 252, 247, 0.86);
    border-bottom-color: rgba(17, 17, 19, 0.08);
    backdrop-filter: blur(18px);
}

.fi-badge {
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0;
    padding-inline: 0.62rem;
    min-height: 1.55rem;
}

.fi-color-success .fi-badge,
.fi-badge-color-success {
    background: rgba(20, 125, 79, 0.11) !important;
    color: #0b6b42 !important;
}

.fi-color-warning .fi-badge,
.fi-badge-color-warning {
    background: rgba(201, 151, 58, 0.15) !important;
    color: #8a5a0a !important;
}

.fi-color-danger .fi-badge,
.fi-badge-color-danger {
    background: rgba(180, 35, 60, 0.11) !important;
    color: #9f1f36 !important;
}

.fi-color-info .fi-badge,
.fi-badge-color-info {
    background: rgba(49, 95, 157, 0.11) !important;
    color: #224f8d !important;
}

.fi-simple-layout {
    background:
        radial-gradient(circle at 50% 0%, rgba(201, 151, 58, 0.26), transparent 32rem),
        radial-gradient(circle at 12% 80%, rgba(49, 95, 157, 0.10), transparent 24rem),
        linear-gradient(180deg, #111827 0%, #241f17 44%, #f6f2eb 44%, #f6f2eb 100%);
}

.fi-simple-main {
    border-radius: 1.45rem;
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 34px 100px rgba(17, 17, 19, 0.22);
}

.bdf-login-brand {
    margin-bottom: 1.45rem;
}

.bdf-login-brand::before {
    content: "BD";
    display: grid;
    width: 4.2rem;
    height: 4.2rem;
    margin: 0 auto 0.9rem;
    place-items: center;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #f2d08a, #b7791f);
    color: #111113;
    font-weight: 950;
    box-shadow: 0 22px 54px rgba(17, 17, 19, 0.20);
}

.bdf-login-brand h1 {
    font-size: clamp(1.65rem, 5vw, 2.1rem);
    font-weight: 950;
}

.bdf-login-brand p {
    font-size: 0.96rem;
    line-height: 1.55;
}

.fi-ta-table {
    min-width: 760px;
}

.fi-ta-table th {
    background: #faf7f2;
    color: #5b6472;
    font-size: 0.78rem;
    font-weight: 900;
}

.fi-ta-row:hover {
    background: #fff8e8;
}

.fi-ta-empty-state {
    border-radius: 1rem;
    background: linear-gradient(135deg, #ffffff, #fff8e8);
}

.fi-ta-content-grid .fi-ta-record,
.fi-ta-content-grid .fi-ta-row,
.fi-ta-content-grid article,
.fi-ta-record {
    border-radius: 1rem;
}

.fi-ta-content-grid .fi-ta-record {
    box-shadow: 0 14px 34px rgba(17, 17, 19, 0.065);
}

.bdf-attendance-shell {
    display: grid;
    gap: 1rem;
}

.bdf-attendance-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    border: 1px solid rgba(17, 17, 19, 0.09);
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #ffffff, #fff7e5);
    padding: 1rem;
    box-shadow: 0 16px 42px rgba(17, 17, 19, 0.07);
}

.bdf-attendance-summary div {
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.85rem;
}

.bdf-attendance-summary span {
    display: block;
    color: #8a5a0a;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bdf-attendance-summary strong {
    display: block;
    margin-top: 0.32rem;
    color: #111113;
    font-size: 0.98rem;
    font-weight: 900;
}

.bdf-attendance-empty,
.bdf-attendance-table {
    border: 1px solid rgba(17, 17, 19, 0.09);
    border-radius: 1.1rem;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(17, 17, 19, 0.06);
}

.bdf-attendance-empty {
    padding: 3rem 1rem;
    color: var(--bdf-premium-muted);
    text-align: center;
    font-weight: 800;
}

.bdf-attendance-table {
    overflow-x: auto;
}

.bdf-attendance-table table {
    width: 100%;
    min-width: 880px;
    border-collapse: separate;
    border-spacing: 0;
}

.bdf-attendance-table th,
.bdf-attendance-table td {
    padding: 0.9rem;
    text-align: left;
}

.bdf-attendance-table th {
    background: #faf7f2;
    color: #5b6472;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.bdf-attendance-table tbody tr + tr td {
    border-top: 1px solid rgba(17, 17, 19, 0.07);
}

.bdf-attendance-student {
    color: #111113;
    font-size: 0.98rem;
    font-weight: 900;
}

.bdf-attendance-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(5.8rem, 1fr));
    gap: 0.45rem;
}

.bdf-attendance-status {
    min-height: 2.7rem;
    border: 1px solid rgba(17, 17, 19, 0.10);
    border-radius: 0.78rem;
    background: #f8fafc;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.bdf-attendance-status.is-active {
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(17, 17, 19, 0.14);
}

.bdf-attendance-status--present.is-active { background: var(--bdf-premium-green); }
.bdf-attendance-status--absent.is-active { background: var(--bdf-premium-red); }
.bdf-attendance-status--late.is-active { background: #b7791f; }
.bdf-attendance-status--excused.is-active { background: var(--bdf-premium-blue); }

.bdf-attendance-table input {
    width: 100%;
    min-width: 11rem;
    min-height: 2.55rem;
    border: 1px solid rgba(17, 17, 19, 0.12);
    border-radius: 0.78rem;
    background: #ffffff;
    color: #111113;
    padding: 0.58rem 0.72rem;
}

@media (max-width: 768px) {
    .fi-main {
        padding-inline: 0.65rem;
    }

    .fi-header-heading {
        font-size: 1.35rem;
        line-height: 1.18;
    }

    .fi-section,
    .fi-ta-ctn,
    .fi-modal-window {
        border-radius: 0.95rem;
    }

    .fi-btn {
        min-height: 2.9rem;
        width: auto;
    }

    .fi-ta-content-grid {
        gap: 0.85rem;
    }

    .fi-ta-content-grid .fi-ta-record,
    .fi-ta-content-grid article {
        border-radius: 1.05rem;
        padding: 0.3rem;
    }

    .fi-ta-table {
        min-width: 680px;
    }

    .bdf-portal-top,
    .bdf-page-header,
    .bdf-ops-header {
        border-radius: 1.05rem;
        padding: 1rem;
    }

    .bdf-portal-card,
    .bdf-portal-action,
    .bdf-action-card,
    .bdf-kpi-card {
        border-radius: 1.05rem;
        min-height: 6.4rem;
    }

    .bdf-attendance-summary {
        grid-template-columns: 1fr 1fr;
        border-radius: 1rem;
        padding: 0.72rem;
    }

    .bdf-attendance-table {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .bdf-attendance-table table,
    .bdf-attendance-table thead,
    .bdf-attendance-table tbody,
    .bdf-attendance-table tr,
    .bdf-attendance-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .bdf-attendance-table thead {
        display: none;
    }

    .bdf-attendance-table tr {
        margin-bottom: 0.85rem;
        border: 1px solid rgba(17, 17, 19, 0.09);
        border-radius: 1.05rem;
        background: #ffffff;
        padding: 0.85rem;
        box-shadow: 0 16px 36px rgba(17, 17, 19, 0.07);
    }

    .bdf-attendance-table td {
        border: 0 !important;
        padding: 0.55rem 0;
    }

    .bdf-attendance-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.32rem;
        color: #8a5a0a;
        font-size: 0.7rem;
        font-weight: 900;
        text-transform: uppercase;
    }

    .bdf-attendance-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bdf-attendance-status {
        min-height: 3rem;
        font-size: 0.82rem;
    }

    .bdf-attendance-table input {
        min-width: 0;
        min-height: 3rem;
    }
}

@media (max-width: 430px) {
    .fi-main {
        padding-inline: 0.5rem;
    }

    .fi-simple-main {
        border-radius: 1.1rem;
        margin-inline: 0.45rem;
    }

    .bdf-login-brand::before {
        width: 3.6rem;
        height: 3.6rem;
        border-radius: 1rem;
    }

    .bdf-login-brand h1 {
        font-size: 1.55rem;
    }

    .bdf-attendance-summary,
    .bdf-attendance-status-grid {
        grid-template-columns: 1fr;
    }
}