/*
 * OMerci brand layer on top of Filament.
 * Values come from the apps' design tokens (Colors.json / Radius.json):
 *   Button/Primary  #38BDF8 (sky-400)   hover sky-500 #0EA5E9
 *   Border/main     #E2E8F0 (slate-200) cards are pure white with this 1px stroke
 *   Gradient        #38BDF8 -> #7DD3FC
 */

:root {
    --omerci-primary: #38bdf8;
    --omerci-primary-hover: #0ea5e9;
    --omerci-border: #e2e8f0;
    --omerci-gradient: linear-gradient(135deg, #38bdf8 0%, #7dd3fc 100%);
}

/* Brand mark in the sidebar / login */
.omerci-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 100%;
}

.omerci-brand-icon {
    height: 100%;
    aspect-ratio: 1;
    border-radius: 0.625rem;
}

.omerci-brand-name {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gray-900);
}

.dark .omerci-brand-name {
    color: var(--color-white);
}

.omerci-brand-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
}

/* Filled primary buttons use the exact brand sky with white text, like the apps */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    --bg: var(--omerci-primary);
    --hover-bg: var(--omerci-primary-hover);
    --dark-bg: var(--omerci-primary);
    --dark-hover-bg: var(--omerci-primary-hover);
    --text: #fff;
    --hover-text: #fff;
    --dark-text: #fff;
    --dark-hover-text: #fff;
}

/* Cards: pure white with a 1px Border/main stroke, no drop shadow */
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item,
.fi-in-repeatable-item,
.fi-simple-main {
    --tw-shadow: 0 0 #0000;
    --tw-ring-color: var(--omerci-border);
}

.dark .fi-section:not(.fi-section-not-contained),
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat,
.dark .fi-fo-repeater-item,
.dark .fi-in-repeatable-item,
.dark .fi-simple-main {
    --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
}

/*
 * Sidebar: deep brand navy, apart from the white top bar and the light
 * page, in light and dark mode. Labels and icons are light; the active
 * item is a brand-sky pill with an accent bar.
 */
.fi-sidebar,
.fi-sidebar-header {
    background: var(--omerci-sidebar-bg);
}

.fi-sidebar {
    --omerci-sidebar-bg: linear-gradient(180deg, #0c4a6e 0%, #082f49 100%);
    --omerci-sidebar-text: rgb(255 255 255 / 0.82);
    --omerci-sidebar-muted: rgb(186 230 253 / 0.6);
    --omerci-sidebar-hover: rgb(255 255 255 / 0.08);
    border-inline-end: 1px solid rgb(255 255 255 / 0.06);
}

.fi-sidebar-header {
    --omerci-sidebar-bg: #0c4a6e;
    --tw-ring-color: rgb(255 255 255 / 0.08);
}

.fi-sidebar .omerci-brand-name {
    color: var(--color-white);
}

.fi-sidebar .omerci-brand-tag {
    color: var(--omerci-sidebar-muted);
}

.fi-sidebar-group-label,
.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-collapse-btn,
.fi-sidebar-close-collapse-sidebar-btn,
.fi-sidebar-open-collapse-sidebar-btn {
    color: var(--omerci-sidebar-muted);
}

.fi-sidebar-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item-btn .fi-icon,
.fi-sidebar-database-notifications-btn,
.fi-sidebar-database-notifications-btn .fi-icon {
    color: var(--omerci-sidebar-text);
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-btn:focus-visible,
.fi-sidebar-database-notifications-btn:hover {
    background-color: var(--omerci-sidebar-hover);
}

.fi-sidebar-item-grouped-border-part {
    background-color: rgb(255 255 255 / 0.18);
}

/* Active item: brand-sky pill with an accent bar */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    position: relative;
    background-color: rgb(56 189 248 / 0.18);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-block: 0.375rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 9999px;
    background: var(--omerci-primary);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: var(--color-white);
    font-weight: 600;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon,
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon {
    color: #7dd3fc;
}

.dark .fi-sidebar {
    --omerci-sidebar-bg: linear-gradient(180deg, #0b1f33 0%, #020617 100%);
}

.dark .fi-sidebar-header {
    --omerci-sidebar-bg: #0b1f33;
}

/* Page behind the cards: a cool light grey, so white cards and the navy sidebar stand apart */
html:not(.dark) .fi-body {
    background-color: #f1f5f9;
}

/* Login: brand gradient behind the card, like the apps' splash */
.fi-simple-layout {
    background: var(--omerci-gradient);
}

.dark .fi-simple-layout {
    background: linear-gradient(135deg, #0c4a6e 0%, #020617 100%);
}

/* Delivery zone map field */
.omerci-zone {
    display: grid;
    gap: 0.5rem;
}

.omerci-zone-map {
    height: 420px;
    border: 1px solid var(--omerci-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

/* A zone corner on the OpenStreetMap (Leaflet) map: drag it, right-click to remove. */
.omerci-zone-vertex {
    border: 2px solid #0284c7;
    border-radius: 9999px;
    background-color: #fff;
    cursor: move;
}

.omerci-zone-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}

.omerci-zone-warning {
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    background-color: var(--warning-50);
    color: var(--warning-700);
}

.omerci-zone-text {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    background-color: var(--color-white);
}

.dark .omerci-zone-help {
    color: var(--gray-400);
}

.dark .omerci-zone-warning {
    background-color: color-mix(in oklab, var(--warning-400) 10%, transparent);
    color: var(--warning-400);
}

.dark .omerci-zone-text {
    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    color: var(--color-white);
}