/**
 * Sidebar: panel primary color shell, white navigation, white pill active row.
 * Top bar is disabled in AdminPanelProvider; logo slot is hidden below.
 * Loaded after Filament panel styles via AdminPanelProvider.
 */
:root {
    --primary-600: oklch(0.426 0.17 27.894);
    --primary-800: oklch(0.426 0.17 27.894);
    --nx-sidebar-hover: rgb(255 255 255 / 0.1);
}

/* No logo / brand block in sidebar header */
.fi-sidebar .fi-sidebar-header-logo-ctn {
    display: none !important;
}

/* Shell — uses Filament primary palette (--primary-* from AdminPanelProvider colors) */
.fi-sidebar.fi-main-sidebar {
    background-color: var(--primary-800) !important;
    border-inline-end: 1px solid rgb(255 255 255 / 0.14);
    border-start-end-radius: 1.25rem;
    border-end-end-radius: 1.25rem;
}

/* Navigation items — inactive */
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn {
    background-color: transparent !important;
}

.fi-sidebar .fi-sidebar-item-btn > .fi-icon {
    color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: rgb(255 255 255) !important;
}

/* Hover only for non-active links — avoids blending active row with translucent hover over red sidebar */
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active) > .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url:not(.fi-active) > .fi-sidebar-item-btn:focus-visible {
    background-color: var(--nx-sidebar-hover) !important;
}

/* Active row — white pill + primary type */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(255 255 255) !important;
    border-radius: 0.75rem !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--primary-700) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--primary-700) !important;
}

/* Active row hover/focus — keep an opaque light surface so label/icon stay readable */
.fi-sidebar .fi-sidebar-item.fi-active.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item.fi-active.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:focus-visible > .fi-sidebar-item-label {
    color: var(--primary-700) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover > .fi-icon,
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:focus-visible > .fi-icon {
    color: var(--primary-700) !important;
}

/*
 * Sidebar global search: full-width field + results panel, muted suffix + clear (match ⌘K hint).
 */
/*
 * Do not set width:100% on .fi-global-search-ctn — Filament adds margin-inline here;
 * width 100% + margins overflows the sidebar. Let the flex item size naturally.
 */
.fi-sidebar .fi-global-search-ctn {
    position: relative;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.fi-sidebar .fi-global-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fi-sidebar .fi-global-search-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fi-sidebar .fi-global-search-field .fi-input-wrp {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.fi-sidebar .fi-global-search-results-ctn {
    z-index: 50;
    width: 100% !important;
    max-width: none !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    box-sizing: border-box;
}

/* Flat dropdown — no “Pages” / “Resources” / resource-plural headings */
.fi-sidebar .fi-global-search-result-group-header {
    display: none !important;
}

.fi-sidebar .fi-global-search-field .fi-input {
    color: var(--gray-950);
}

/* Keyboard hint + any suffix icons — same tone as Filament’s muted ⌘K label */
.fi-sidebar .fi-global-search-field .fi-input-wrp-suffix {
    color: var(--gray-500);
}

.fi-sidebar .fi-global-search-field .fi-input-wrp-suffix .fi-icon {
    color: var(--gray-500) !important;
}

/* Chromium/WebKit native “clear” on type=search — replace blue control with gray ✕ */
.fi-sidebar .fi-global-search-field input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    margin-inline-start: calc(var(--spacing) * 1);
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
}

/* Nested item connectors */
.fi-sidebar .fi-sidebar-item-grouped-border-part {
    background-color: rgb(255 255 255 / 0.55) !important;
}

.fi-sidebar .fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar .fi-sidebar-item-grouped-border-part-not-last {
    background-color: rgb(255 255 255 / 0.35) !important;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-grouped-border-part {
    background-color: var(--primary-700) !important;
}

/* Navigation groups */
.fi-sidebar .fi-sidebar-group-label {
    color: rgb(255 255 255 / 0.88) !important;
}

.fi-sidebar .fi-sidebar-group-btn > .fi-icon {
    color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-group-collapse-btn .fi-icon {
    color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn {
    background-color: transparent !important;
}

.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:focus-visible {
    background-color: var(--nx-sidebar-hover) !important;
}

.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: rgb(255 255 255) !important;
}

.fi-sidebar .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: rgb(255 255 255) !important;
}

/* Hide default Filament collapse icon-buttons (replaced by nx-sidebar-collapse-controls) */
.fi-sidebar .fi-sidebar-header .fi-sidebar-open-collapse-sidebar-btn,
.fi-sidebar .fi-sidebar-header .fi-sidebar-close-collapse-sidebar-btn {
    display: none !important;
}

/* Header stacks collapse row above hidden logo slot */
.fi-sidebar .fi-sidebar-header {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: calc(var(--spacing) * 16);
    row-gap: calc(var(--spacing) * 1);
    padding-block: calc(var(--spacing) * 2);
}

/* Custom collapse / expand controls */
.fi-sidebar .nx-sidebar-collapse-controls {
    width: 100%;
}

.fi-sidebar .nx-sidebar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: rgb(255 255 255);
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    transition-property: background-color, color;
    transition-duration: 150ms;
}

.fi-sidebar .nx-sidebar-btn:hover,
.fi-sidebar .nx-sidebar-btn:focus-visible {
    background-color: var(--nx-sidebar-hover);
}

.fi-sidebar .nx-sidebar-btn-collapse {
    width: 100%;
    justify-content: flex-start;
}

.fi-sidebar .nx-sidebar-btn-expand {
    margin-inline: auto;
    background-color: transparent;
    padding: calc(var(--spacing) * 2);
}

.fi-sidebar .nx-sidebar-btn-expand:hover,
.fi-sidebar .nx-sidebar-btn-expand:focus-visible {
    background-color: var(--nx-sidebar-hover);
}

.fi-sidebar .nx-sidebar-btn-icon {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    flex-shrink: 0;
}

.fi-sidebar .nx-sidebar-collapse-glyph {
    display: inline-flex;
    width: calc(var(--spacing) * 5);
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
}

/* Footer — logout only */
.fi-sidebar .nx-sidebar-footer-logout-only.fi-sidebar-footer {
    margin-inline: calc(var(--spacing) * 4);
    margin-block: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 3);
    border-top: 1px solid rgb(255 255 255 / 0.14);
}

.fi-sidebar .nx-sidebar-logout-form {
    margin: 0;
}

.fi-sidebar .nx-sidebar-logout-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 2);
    padding-inline: calc(var(--spacing) * 2);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--tw-leading, var(--text-sm--line-height));
    color: rgb(255 170 170);
    background-color: transparent;
    cursor: pointer;
    outline: none;
    transition-property: background-color, color;
    transition-duration: 150ms;
}

.fi-sidebar .nx-sidebar-logout-btn:hover,
.fi-sidebar .nx-sidebar-logout-btn:focus-visible {
    background-color: var(--nx-sidebar-hover);
    color: rgb(255 200 200);
}

.fi-sidebar .nx-sidebar-logout-icon {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    flex-shrink: 0;
}

.fi-sidebar:not(.fi-sidebar-open) .nx-sidebar-logout-btn {
    justify-content: center;
}

/*
 * Page header Create actions — same visual language as active sidebar row:
 * white surface + primary foreground (see ListTenants CreateAction extraAttributes).
 */
body.fi .nx-match-sidebar-create-btn.fi-btn,
body.fi .nx-match-sidebar-create-btn .fi-btn {
    background-color: rgb(255 255 255) !important;
    color: var(--primary-700) !important;
    border-color: rgb(255 255 255) !important;
}

body.fi .nx-match-sidebar-create-btn .fi-icon {
    color: var(--primary-700) !important;
}

body.fi .nx-match-sidebar-create-btn.fi-btn:hover,
body.fi .nx-match-sidebar-create-btn.fi-btn:focus-visible,
body.fi .nx-match-sidebar-create-btn .fi-btn:hover,
body.fi .nx-match-sidebar-create-btn .fi-btn:focus-visible {
    background-color: rgb(255 255 255) !important;
    color: var(--primary-800) !important;
}

body.fi .nx-match-sidebar-create-btn:hover .fi-icon,
body.fi .nx-match-sidebar-create-btn:focus-visible .fi-icon {
    color: var(--primary-800) !important;
}