.fi-sidebar {
    background-color: #f3f3f3;
    border-inline-end: 1px solid var(--gray-200);
}

.fi-sidebar:where(.dark, .dark *) {
    background-color: #1e293b;
    border-inline-end: 1px solid var(--gray-700);
}

.fi-sidebar-nav {
    padding-inline: 0.75rem;
    padding-block: 1rem;
    row-gap: 1rem;
}

.fi-sidebar-nav-groups {
    row-gap: 0.5rem;
}

.fi-sidebar-group {
    row-gap: 0.125rem;
}

.fi-sidebar-item-btn,
.fi-sidebar-group-btn,
.fi-sidebar-group-dropdown-trigger-btn {
    padding: 0.375rem 0.625rem;
}

.fi-topbar:where(.dark, .dark *) {
    background-color: #1e293b;
}

.fi-body:where(.dark, .dark *) {
    background-color: #0f172a;
}

/* Stretch the photo card to match the height of the sections next to it.
   Its class only lands on .fi-sc-section (deep inside the grid cell), so
   every ancestor down to the visible card needs to pass the height through
   — :has() reaches the outer grid cell without touching unrelated grids. */
.fi-grid-col:has(> .fi-sc-component > .profile-photo-card) {
    display: flex;
    align-self: stretch;
}

.fi-grid-col:has(> .fi-sc-component > .profile-photo-card) > .fi-sc-component {
    display: flex;
    flex: 1;
}

.profile-photo-card {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.profile-photo-card > .fi-section {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.profile-photo-card .fi-section-content-ctn {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.profile-photo-card .fi-section-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding-block: 0.5rem;
}

.profile-photo-upload .fi-fo-file-upload-avatar {
    margin-inline: auto;
}

.profile-photo-name {
    margin-top: 0.5rem;
}

.profile-photo-email {
    margin-top: -0.25rem;
}

/* Internal components (section cards, dashboard widgets, tables, modals)
   use --gray-900 for their dark background, which reads as near-black.
   Retint that token so every internal component picks up the same
   elegant slate tone as the menu/header, instead of pure black. */
:where(.dark, .dark *) {
    --gray-900: #1e293b;
}