:root {
    --hama-teal-900: #0d5768;
    --hama-teal-700: #12849a;
    --hama-teal-500: #1497aa;
    --hama-green-600: #76ae3a;
    --hama-green-500: #87be43;
    --hama-green-400: #9bcd60;
    --hama-ink-900: #183945;
    --hama-ink-700: #3a5a67;
    --hama-surface: #f4fbfb;
}

.fi-body {
    background:
        radial-gradient(circle at 96% -8%, rgba(20, 151, 170, 0.2), transparent 36%),
        radial-gradient(circle at 5% 2%, rgba(135, 190, 67, 0.15), transparent 40%),
        linear-gradient(180deg, #f9fdfd 0%, var(--hama-surface) 48%, #f7fbfa 100%);
    color: var(--hama-ink-700);
}

.fi-topbar-ctn {
    backdrop-filter: blur(8px);
}

.fi-topbar {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(13, 87, 104, 0.12);
    box-shadow: 0 8px 24px rgba(11, 70, 86, 0.08);
}

.fi-topbar-item-btn {
    border-radius: 0.8rem;
}

.fi-topbar-item-btn:hover,
.fi-topbar-item-btn:focus-visible {
    background-color: rgba(20, 151, 170, 0.1);
}

.fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: rgba(20, 151, 170, 0.14);
}

.fi-topbar-item.fi-active .fi-topbar-item-label {
    color: var(--hama-teal-900);
}

.fi-sidebar {
    border-inline-end: 1px solid rgba(7, 62, 77, 0.2);
    background: linear-gradient(175deg, #0c5b6e 0%, #0f7486 52%, #1497aa 100%);
}

.dark .fi-sidebar {
    background: linear-gradient(175deg, #0b4f60 0%, #0f6474 52%, #137f8f 100%);
}

.fi-sidebar-nav {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

.fi-sidebar-header,
.fi-body-has-topbar .fi-sidebar-header {
    background: transparent;
    box-shadow: none;
    border: 0;
}

.fi-sidebar-item-btn,
.fi-sidebar-group-dropdown-trigger-btn,
.fi-sidebar-database-notifications-btn {
    border-radius: 0.9rem;
    min-height: 2.7rem;
}

.fi-sidebar-item-label,
.fi-sidebar-group-label,
.fi-sidebar-database-notifications-btn-label {
    color: rgba(244, 252, 251, 0.95);
    font-weight: 600;
}

.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-group-btn > .fi-icon,
.fi-sidebar-group-dropdown-trigger-btn > .fi-icon,
.fi-sidebar-database-notifications-btn > .fi-icon {
    color: rgba(230, 245, 248, 0.9);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible,
.fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-sidebar-group-dropdown-trigger-btn:focus-visible,
.fi-sidebar-database-notifications-btn:hover,
.fi-sidebar-database-notifications-btn:focus-visible {
    background: rgba(255, 255, 255, 0.14);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(
        125deg,
        rgba(135, 190, 67, 0.98),
        rgba(20, 151, 170, 0.94)
    );
    box-shadow: 0 10px 20px rgba(9, 62, 80, 0.28);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: #093945;
}

.fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: #e9f8f8;
}

.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
    background-color: rgba(211, 239, 242, 0.5);
}

.fi-sidebar-item-grouped-border-part {
    background-color: rgba(230, 245, 248, 0.85);
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 8px;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 999px;
}

.fi-main {
    padding-top: 0.9rem;
    padding-bottom: 1.5rem;
}

.fi-page-header-main-ctn {
    padding-top: 1.2rem;
}

.fi-header-heading {
    color: var(--hama-teal-900);
}

.fi-header-subheading {
    color: #57707c;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section.fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border: 1px solid rgba(13, 87, 104, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #fbfefe 100%);
    box-shadow: 0 14px 30px rgba(10, 66, 82, 0.09);
}

.fi-section .fi-section-header-heading,
.fi-ta-ctn .fi-ta-header-heading,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    color: #114f60;
}

.fi-section .fi-section-header-description,
.fi-ta-ctn .fi-ta-header-description,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    color: #5e7783;
}

.fi-ta-ctn .fi-ta-header,
.fi-ta-ctn .fi-ta-header-toolbar,
.fi-ta-ctn .fi-pagination,
.fi-ta-ctn .fi-ta-selection-indicator,
.fi-ta-ctn .fi-ta-reorder-indicator {
    background: #f8fcfc;
}

.fi-ta-row:hover {
    background: rgba(20, 151, 170, 0.06);
}

.fi-input-wrp {
    border-radius: 0.85rem;
    background: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 16px rgba(12, 79, 95, 0.04);
}

.fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
    box-shadow:
        0 0 0 4px rgba(20, 151, 170, 0.14),
        0 8px 16px rgba(12, 79, 95, 0.06);
}

.fi-input-wrp .fi-input-wrp-label {
    color: #55707d;
}

.fi-btn {
    border-radius: 0.85rem;
    transition:
        transform 0.18s ease,
        box-shadow 0.2s ease,
        background-color 0.18s ease;
}

.fi-btn:not(.fi-outlined) {
    box-shadow: 0 8px 18px rgba(10, 71, 86, 0.08);
}

.fi-btn.fi-color:not(.fi-outlined) {
    box-shadow: 0 12px 24px rgba(16, 122, 138, 0.25);
}

.fi-btn.fi-color:not(.fi-outlined):hover,
.fi-btn.fi-color:not(.fi-outlined):focus-visible {
    transform: translateY(-1px);
}

.fi-btn.fi-outlined {
    border-color: rgba(12, 96, 114, 0.22);
}

.fi-badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.fi-simple-layout {
    background:
        radial-gradient(circle at 10% 0%, rgba(20, 151, 170, 0.2), transparent 34%),
        radial-gradient(circle at 90% 92%, rgba(135, 190, 67, 0.16), transparent 38%),
        linear-gradient(180deg, #f8fdfd 0%, #edf8f6 100%);
}

.fi-simple-main {
    border: 1px solid rgba(13, 87, 104, 0.12);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7fcfb 100%);
    box-shadow: 0 24px 70px rgba(9, 62, 78, 0.2);
}

.fi-simple-header-heading {
    color: #0e5a6d;
}

.fi-simple-header-subheading {
    color: #607986;
}

.fi-simple-header .fi-logo img {
    filter: drop-shadow(0 8px 20px rgba(12, 80, 95, 0.25));
}

.fi-wi-chart .fi-wi-chart-grid-color {
    color: #d3e5e7;
}

.fi-wi-chart .fi-wi-chart-text-color {
    color: #5c7682;
}

/* Dark mode refinements for contrast and visual hierarchy */
.dark .fi-body {
    background:
        radial-gradient(circle at 94% 0%, rgba(20, 151, 170, 0.16), transparent 38%),
        radial-gradient(circle at 8% 96%, rgba(135, 190, 67, 0.12), transparent 40%),
        linear-gradient(180deg, #08141a 0%, #0b1d25 52%, #0e212b 100%);
    color: #bdd0d8;
}

.dark .fi-topbar {
    background: rgba(9, 24, 31, 0.88);
    border-bottom: 1px solid rgba(90, 153, 171, 0.25);
    box-shadow: 0 10px 28px rgba(2, 11, 15, 0.45);
}

.dark .fi-topbar-item-btn:hover,
.dark .fi-topbar-item-btn:focus-visible {
    background-color: rgba(20, 151, 170, 0.2);
}

.dark .fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: rgba(135, 190, 67, 0.2);
}

.dark .fi-topbar-item.fi-active .fi-topbar-item-label {
    color: #d6f2f7;
}

.dark .fi-sidebar {
    border-inline-end-color: rgba(149, 217, 234, 0.2);
}

.dark .fi-header-heading {
    color: #daf3f8;
}

.dark .fi-header-subheading {
    color: #9eb7c2;
}

.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.dark .fi-section.fi-aside > .fi-section-content-ctn,
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat {
    border-color: rgba(99, 165, 183, 0.26);
    background: linear-gradient(180deg, #0f1f28 0%, #132833 100%);
    box-shadow: 0 18px 36px rgba(1, 9, 12, 0.48);
}

.dark .fi-section .fi-section-header-heading,
.dark .fi-ta-ctn .fi-ta-header-heading,
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    color: #d5eef6;
}

.dark .fi-section .fi-section-header-description,
.dark .fi-ta-ctn .fi-ta-header-description,
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
    color: #9db7c3;
}

.dark .fi-ta-ctn .fi-ta-header,
.dark .fi-ta-ctn .fi-ta-header-toolbar,
.dark .fi-ta-ctn .fi-pagination,
.dark .fi-ta-ctn .fi-ta-selection-indicator,
.dark .fi-ta-ctn .fi-ta-reorder-indicator {
    background: #10212a;
    border-color: rgba(96, 156, 173, 0.22);
}

.dark .fi-ta-row:hover {
    background: rgba(20, 151, 170, 0.16);
}

.dark .fi-input-wrp {
    background: #0f2029;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 18px rgba(2, 10, 14, 0.4);
}

.dark .fi-input-wrp .fi-input-wrp-label {
    color: #aac4cf;
}

.dark .fi-input-wrp :is(input, select, textarea) {
    color: #e2f0f5;
}

.dark .fi-input-wrp :is(input, select, textarea)::placeholder {
    color: #8ba4b0;
}

.dark .fi-btn:not(.fi-outlined) {
    box-shadow: 0 10px 22px rgba(1, 10, 14, 0.42);
}

.dark .fi-btn.fi-outlined {
    border-color: rgba(113, 175, 193, 0.28);
}

.dark .fi-tabs.fi-contained {
    border-color: rgba(110, 173, 191, 0.22);
}

.dark .fi-tabs:not(.fi-contained) {
    background: #0f2028;
    border: 1px solid rgba(103, 164, 181, 0.23);
}

.dark .fi-tabs-item:hover,
.dark .fi-tabs-item:focus-visible {
    background: rgba(20, 151, 170, 0.18);
}

.dark .fi-tabs-item.fi-active {
    background: rgba(135, 190, 67, 0.22);
}

.dark .fi-dropdown-panel {
    background: #10212a;
    border: 1px solid rgba(100, 162, 179, 0.24);
}

.dark .fi-modal > .fi-modal-window-ctn > .fi-modal-window {
    background: linear-gradient(180deg, #0f1f28 0%, #132833 100%);
    border: 1px solid rgba(101, 166, 183, 0.26);
}

.dark .fi-simple-layout {
    background:
        radial-gradient(circle at 10% 0%, rgba(20, 151, 170, 0.2), transparent 36%),
        radial-gradient(circle at 94% 94%, rgba(135, 190, 67, 0.12), transparent 38%),
        linear-gradient(180deg, #071219 0%, #0b1c24 100%);
}

.dark .fi-simple-main {
    border-color: rgba(94, 160, 177, 0.34);
    background: linear-gradient(180deg, #0d1d26 0%, #112530 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.dark .fi-simple-header-heading {
    color: #d8f0f7;
}

.dark .fi-simple-header-subheading {
    color: #a2bbc6;
}

.dark .fi-wi-chart .fi-wi-chart-grid-color {
    color: #27404d;
}

.dark .fi-wi-chart .fi-wi-chart-text-color {
    color: #8eacb8;
}