/*
 * Shubbak 2.0 on top of Filament, for the merchant dashboard and the admin panel.
 * From the guide's product board: a Sana'a Night sidebar with the active item in
 * Aden Blue, gypsum pages with white cards, radii 8 (fields) / 13 (buttons) /
 * 14 (cards) / 21 (modals), labels in 600, and solid status pills: amber for new,
 * Qamariya Sky for on the way, the semantic colours for the rest.
 * Colour scales come from Brand.php (--primary-*, --gray-*); storefronts never load this file.
 */

:root {
    --sb-night: #0B1530;
    --sb-blue: #2346E0;
    --sb-blue-hover: #1E3CBD;
    --sb-amber: #F6B12E;
    --sb-sky: #A8BCFF;
    --sb-gypsum: #F4F6FB;
    --sb-line: #E1E4EB;
    --sb-muted: #51586D;
    --sb-r-field: 8px;
    --sb-r-button: 13px;
    --sb-r-card: 14px;
    --sb-r-panel: 21px;
    --sb-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Dark mode: ink and secondary text flip; lines become a faint white. */
.dark { --sb-muted: #B3B7C2; --sb-line: rgb(255 255 255 / .08); }

/* Type: Arabic needs taller lines than Latin; headings in 700, labels in 600. */
.fi-body { color: var(--sb-night); line-height: 1.7; }
.dark .fi-body { color: #F4F6FB; }
.fi-header-heading { font-weight: 700; letter-spacing: 0; text-wrap: balance; }
.fi-header-subheading, .fi-section-header-description { color: var(--sb-muted); }
.fi-section-header-heading, .fi-modal-heading, .fi-ta-header-heading { font-weight: 600; }
.fi-fo-field-label-content, .fi-in-entry-label { font-weight: 600; }
.fi-ta-table, .fi-wi-stats-overview-stat-value, .fi-in-text, .rpt-value, .rpt-table { font-variant-numeric: tabular-nums; }

/* Logo lockup (resources/views/filament/brand-logo.blade.php): white on the night sidebar and in dark mode. */
.shubbak-logo { --logo-ink: var(--sb-night); --logo-mark: var(--sb-blue); }
.fi-sidebar .shubbak-logo, .dark .shubbak-logo { --logo-ink: #FFFFFF; --logo-mark: #FFFFFF; }

/* Sidebar: Sana'a Night, items in neutral 300, the current page as a blue tab. */
.fi-sidebar { background: var(--sb-night); color: #CFD2DB; }
.dark .fi-sidebar { border-inline-end: 1px solid rgb(255 255 255 / .08); }
.fi-sidebar-header { background: var(--sb-night); box-shadow: none; border-color: rgb(255 255 255 / .08); }
.fi-sidebar-group-label { color: #979CAA; font-weight: 600; }
.fi-sidebar-group-collapse-btn, .fi-sidebar-close-collapse-sidebar-btn, .fi-sidebar-open-collapse-sidebar-btn { color: #979CAA; }
.fi-sidebar-item-btn { border-radius: 10px; color: #CFD2DB; transition: background-color 150ms var(--sb-ease), color 150ms var(--sb-ease); }
.fi-sidebar-item-btn .fi-sidebar-item-label { color: inherit; }
.fi-sidebar-item-btn .fi-icon, .fi-sidebar-item-btn svg { color: #979CAA; }
.fi-sidebar-item-btn:hover, .fi-sidebar-item-btn:focus-visible { background: rgb(255 255 255 / .06); color: #FFFFFF; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--sb-blue); color: #FFFFFF; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { font-weight: 600; color: #FFFFFF; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg { color: #FFFFFF; }
.fi-sidebar-item-grouped-border-part, .fi-sidebar-item-grouped-border-part-not-first, .fi-sidebar-item-grouped-border-part-not-last { background: rgb(255 255 255 / .15); }
.fi-sidebar .fi-tenant-menu-trigger { color: #FFFFFF; border-radius: 10px; }
.fi-sidebar .fi-tenant-menu-trigger:hover { background: rgb(255 255 255 / .06); }
.fi-sidebar .fi-tenant-menu-trigger-tenant-name, .fi-sidebar .fi-tenant-menu-trigger-current-tenant-label { color: inherit; }
.fi-sidebar .fi-tenant-menu-trigger-current-tenant-label { color: #979CAA; }
.fi-sidebar-footer, .fi-sidebar .fi-user-menu-trigger, .fi-sidebar .fi-icon-btn { color: #CFD2DB; }
.fi-sidebar .fi-icon-btn:hover { color: #FFFFFF; background: rgb(255 255 255 / .06); }
.fi-sidebar .fi-input-wrp { background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.fi-sidebar .fi-input-wrp:focus-within { box-shadow: inset 0 0 0 2px var(--sb-sky); }
.fi-sidebar .fi-input { color: #FFFFFF; }
.fi-sidebar .fi-input::placeholder, .fi-sidebar .fi-input-wrp svg { color: #979CAA; }
.fi-sidebar .fi-sidebar-database-notifications-btn, .fi-sidebar .fi-sidebar-database-notifications-btn .fi-sidebar-database-notifications-btn-label { color: #CFD2DB; }

/* Cards: white on gypsum, no shadow, a hairline where the page needs separation. */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-wi-chart .fi-section, .fi-fo-repeater-item, .fi-in-repeatable-item {
    border-radius: var(--sb-r-card);
    box-shadow: none;
    --tw-ring-color: var(--sb-line);
}
:root:not(.dark) .fi-section, :root:not(.dark) .fi-ta-ctn, :root:not(.dark) .fi-wi-stats-overview-stat { outline: 1px solid var(--sb-line); outline-offset: -1px; }
.fi-section-header { padding-block: 1rem; }
.fi-wi-stats-overview-stat-label { color: var(--sb-muted); font-size: .8125rem; }
.dark .fi-wi-stats-overview-stat-label { color: #B3B7C2; }
.fi-wi-stats-overview-stat-value { font-weight: 700; }
.fi-modal-window { border-radius: var(--sb-r-panel); }
.fi-dropdown-panel { border-radius: var(--sb-r-card); }

/* Buttons: one solid blue action per screen, 13px radius, 600, a small press. */
.fi-btn { border-radius: var(--sb-r-button); font-weight: 600; transition: background-color 150ms var(--sb-ease), transform 120ms var(--sb-ease); }
.fi-btn:active { transform: scale(.97); }
.fi-btn.fi-color-primary:not(.fi-outlined):not([aria-pressed="false"]) { background: var(--sb-blue); }
.fi-btn.fi-color-primary:not(.fi-outlined):not([aria-pressed="false"]):hover { background: var(--sb-blue-hover); }
/* Toggle buttons: the unchosen option is a quiet outline, so the chosen one reads at a glance. */
.fi-btn[aria-pressed="false"] { background: #FFFFFF; color: var(--sb-night); box-shadow: inset 0 0 0 1.5px var(--sb-line); }
.fi-btn[aria-pressed="false"]:hover { background: #F0F2FD; }
.dark .fi-btn[aria-pressed="false"] { background: transparent; color: #CFD2DB; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .14); }
.fi-btn.fi-outlined { box-shadow: inset 0 0 0 1.5px var(--color-600, var(--sb-blue)); }
.fi-icon-btn { border-radius: 10px; }

/* Fields: labels above, a 1.5px neutral 600 border (4.3:1 on white), a blue ring on focus. */
.fi-input-wrp { border-radius: var(--sb-r-field); --tw-ring-color: #747A8B; box-shadow: inset 0 0 0 1.5px #747A8B; }
.fi-input-wrp:focus-within { box-shadow: inset 0 0 0 2px var(--sb-blue); }
.dark .fi-input-wrp { box-shadow: inset 0 0 0 1.5px #51586D; }
.fi-fo-file-upload .filepond--panel-root { border-radius: var(--sb-r-card); }
.fi-checkbox-input, .fi-radio-input { border-color: #747A8B; }
.fi-toggle.fi-toggle-on, .fi-toggle[aria-checked="true"] { background: var(--sb-blue); }

/* Tables: gypsum header, roomy rows, a blue tint on hover. */
.fi-ta-header-cell { background: var(--sb-gypsum); color: var(--sb-muted); font-weight: 600; }
.dark .fi-ta-header-cell { background: rgb(255 255 255 / .03); color: #B3B7C2; }
.fi-ta-row { transition: background-color 120ms var(--sb-ease); }
:root:not(.dark) .fi-ta-row.fi-clickable:hover { background: #F0F2FD; }
.fi-ta-empty-state-heading { font-weight: 700; }
.fi-ta-empty-state-description { color: var(--sb-muted); }
.fi-ta-empty-state-icon-bg { background: #F0F2FD; }
.fi-ta-empty-state-icon-bg svg { color: var(--sb-blue); }

/* Status pills: solid, 12px, 600, from the guide (new = amber, on the way = sky). */
.fi-badge { border-radius: 999px; font-weight: 600; padding-inline: .625rem; box-shadow: none; --tw-ring-color: transparent; }
.fi-badge.fi-color { background: var(--color-600); color: #FFFFFF; }
.fi-badge.fi-color .fi-icon, .fi-badge.fi-color svg { color: inherit; }
.fi-badge.fi-color-amber { background: var(--sb-amber); color: var(--sb-night); }
.fi-badge.fi-color-sky { background: var(--sb-sky); color: var(--sb-night); }
.fi-badge.fi-color-primary { background: #DEE3FA; color: #19329A; }
.fi-badge.fi-color-gray { background: #EDEFF5; color: var(--sb-muted); }
.dark .fi-badge.fi-color-primary { background: rgb(35 70 224 / .3); color: #DEE3FA; }
.dark .fi-badge.fi-color-gray { background: rgb(255 255 255 / .08); color: #CFD2DB; }

/* Tabs, pagination and notifications follow the same radii. */
.fi-tabs { border-radius: var(--sb-r-card); }
.fi-tabs-item { border-radius: 10px; font-weight: 600; }
.fi-tabs-item.fi-active { background: #F0F2FD; color: var(--sb-blue); }
.fi-no-notification { border-radius: var(--sb-r-card); }

/* Sign-in, sign-up and password pages: a quiet mashrabiya pattern on gypsum behind the card. */
.fi-simple-layout {
    background-color: var(--sb-gypsum);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 3 L41 22 L22 41 L3 22 Z' fill='none' stroke='%23DEE3FA' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dark .fi-simple-layout { background-color: var(--sb-night); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 3 L41 22 L22 41 L3 22 Z' fill='none' stroke='%23101F53' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fi-simple-main { border-radius: var(--sb-r-panel); box-shadow: 0 1px 2px rgb(11 21 48 / .06); }
:root:not(.dark) .fi-simple-main { outline: 1px solid var(--sb-line); }
.fi-simple-header-heading { font-weight: 700; }

/* Browser surfaces from the palette: selection, caret, scrollbars, sidebar avatars. */
::selection { background: #DEE3FA; color: var(--sb-night); }
.dark ::selection { background: rgb(35 70 224 / .55); color: #FFFFFF; }
input, textarea { caret-color: var(--sb-blue); }
html { scrollbar-color: #CFD2DB transparent; }
html.dark { scrollbar-color: #2E374E transparent; }
.fi-sidebar { color-scheme: dark; }
.fi-sidebar-nav { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .18) transparent; }
.fi-sidebar .fi-avatar { box-shadow: 0 0 0 1.5px rgb(255 255 255 / .28); }
.fi-ta-icon.fi-color-amber svg, .fi-icon.fi-color-amber { color: var(--sb-amber); }

/* Keyboard focus: 2px Aden Blue with a 2px gap; never on mouse clicks. */
:focus-visible { outline: 2px solid var(--sb-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .fi-btn, .fi-sidebar-item-btn, .fi-ta-row { transition: none; }
    .fi-btn:active { transform: none; }
}