/*
 * Sidebar of the admin panel: a blue gradient that stays dark in the light and
 * the dark theme. It only sets colors, spacing and the group label; the font
 * is the one of the project. Contrast of the text on the lightest end of the
 * gradient is at least 4.5 (checked, see docs/TODO-Panel-Kerja-Harian.md B4.2).
 */
/*
 * Scrolling a touchpad to the very top or bottom must not drag the whole page,
 * with its top bar and sidebar, past its edge and leave an empty strip. The
 * sidebar menu keeps its own scrolling to itself for the same reason.
 */
html,
body {
    overscroll-behavior: none;
}

.fi-main-sidebar .fi-sidebar-nav {
    overscroll-behavior: contain;
}

.fi-main-sidebar,
.dark .fi-main-sidebar {
    --wp-sb-text: #c9d8f0;
    --wp-sb-text-strong: #ffffff;
    --wp-sb-label: #9fb6da;
    --wp-sb-hover: rgb(255 255 255 / 0.07);
    --wp-sb-active: rgb(255 255 255 / 0.14);
    --wp-sb-badge: #c62f2f;
    --wp-sb-scrollbar: rgb(255 255 255 / 0.25);

    color: var(--wp-sb-text);
    background: linear-gradient(185deg, #061633 0%, #0b2350 45%, #123f86 100%);
    border-color: transparent;
}

.fi-main-sidebar .fi-sidebar-header-ctn,
.dark .fi-main-sidebar .fi-sidebar-header-ctn {
    background: transparent;
    box-shadow: none;
}

.fi-main-sidebar .fi-sidebar-nav {
    scrollbar-color: var(--wp-sb-scrollbar) transparent;
    scrollbar-width: thin;
}

.fi-main-sidebar .wp-sidebar-group-label {
    padding: 1rem 0.75rem 0.25rem;
    color: var(--wp-sb-label);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    list-style: none;
}

.fi-main-sidebar .fi-sidebar-item-btn {
    color: var(--wp-sb-text);
    border-radius: 0.5625rem;
}

.fi-main-sidebar .fi-sidebar-item-icon,
.fi-main-sidebar .fi-sidebar-item-label {
    color: inherit;
}

.fi-main-sidebar .fi-sidebar-item-btn:hover,
.fi-main-sidebar .fi-sidebar-item-btn:focus-visible {
    color: var(--wp-sb-text-strong);
    background: var(--wp-sb-hover);
}

.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    color: var(--wp-sb-text-strong);
    font-weight: 600;
    background: var(--wp-sb-active);
}

.fi-main-sidebar .fi-sidebar-item-btn:focus-visible {
    outline: 2px solid var(--wp-sb-text-strong);
    outline-offset: -2px;
}

/*
 * The original items have no icon. They read as a quieter second list: aligned
 * with the labels above, a little smaller and dimmer (contrast at least 5.8).
 */
.fi-main-sidebar .fi-sidebar-item-btn:not(:has(.fi-sidebar-item-icon)) {
    padding-block: 0.375rem;
    padding-inline-start: 2.25rem;
    color: #b4c6e4;
    font-size: 0.8125rem;
}

.fi-main-sidebar .fi-sidebar-item-btn:not(:has(.fi-sidebar-item-icon)):hover,
.fi-main-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:not(:has(.fi-sidebar-item-icon)) {
    color: var(--wp-sb-text-strong);
}

/*
 * Thin, quiet scrollbars everywhere in the panel instead of the thick grey
 * bars of the browser (under the table tabs, around wide tables, at the edge
 * of the page). The thumb keeps a contrast of about 3 against the background.
 */
html {
    scrollbar-color: #8391a7 transparent;
}

html.dark {
    scrollbar-color: #64748b transparent;
}

* {
    scrollbar-width: thin;
}

.fi-main-sidebar .wp-sidebar-divider {
    height: 1px;
    margin: 0.5rem 0.75rem;
    list-style: none;
    background: rgb(255 255 255 / 0.12);
}

.fi-main-sidebar .fi-sidebar-item-badge-ctn .fi-badge {
    color: #ffffff;
    background: var(--wp-sb-badge);
    --tw-ring-color: transparent;
}