:root {
    --color-neutral-800: #262626;
    --color-white: #ffffff;
    
    --color-accent: var(--color-neutral-800);
    --color-accent-content: var(--color-neutral-800);
    --color-accent-foreground: var(--color-white);
}
.dark {
    --color-accent: var(--color-white);
    --color-accent-content: var(--color-white);
    --color-accent-foreground: var(--color-neutral-800);
}

[data-flux-field]:not(ui-radio, ui-checkbox) {
    display: grid;
    gap: 0.5rem;
}
[data-flux-label] {
    margin-bottom: 0 !important;
    line-height: 1.25 !important;
}
input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-offset-width: 2px;
    --tw-ring-color: var(--color-accent);
    --tw-ring-offset-color: var(--color-accent-foreground);
}

/* Sidebar polish */
.app-sidebar {
    width: 390px;
    padding: 22px 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    box-shadow: inset -1px 0 0 #e2e8f0;
}

.dark .app-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #101827 100%);
    box-shadow: inset -1px 0 0 #334155;
}

.app-sidebar-brand {
    margin-bottom: 12px;
    padding: 8px 10px;
}

.app-sidebar-nav {
    margin-top: 10px;
}

.app-sidebar-group {
    gap: 8px;
}

.app-sidebar-item {
    min-height: 58px !important;
    width: 100%;
    border-radius: 14px;
    padding: 0 16px !important;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.app-sidebar-item:hover {
    background: #dce4ee;
    color: #0f172a;
    box-shadow: 0 2px 0 rgba(15, 23, 42, 0.06);
}

.app-sidebar-item[aria-current="page"],
.app-sidebar-item[data-current="true"],
.app-sidebar-item.is-current {
    background: linear-gradient(135deg, #dbeafe 0%, #b8d7ff 100%);
    color: #1d4ed8;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
}

.dark .app-sidebar-item {
    color: #d4deea !important;
}

.dark .app-sidebar-item:hover {
    background: #1b2a3f;
    color: #f8fafc;
    box-shadow: none;
}

.dark .app-sidebar-item[aria-current="page"],
.dark .app-sidebar-item[data-current="true"],
.dark .app-sidebar-item.is-current {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    color: #eff6ff;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.35);
}

.app-sidebar-icon {
    font-size: 24px !important;
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    flex: 0 0 24px;
}

.app-sidebar-item span:not(.material-icons) {
    flex: 1 1 auto;
}

@media (max-width: 1024px) {
    .app-sidebar {
        width: 100%;
        padding: 16px 12px;
    }
}