/*
 * 1C-style list layout: on pages that contain a data table (.fi-ta-ctn),
 * make the table card fill exactly the remaining viewport height and let
 * ONLY its row area (.fi-ta-content) scroll internally — the outer browser
 * window itself never scrolls because of it, no matter how little or how
 * much data there is.
 *
 * This chain uses real flex-grow (not a guessed "100dvh minus N px" offset)
 * so it self-adjusts to however tall the topbar/breadcrumb/heading actually
 * render. It is scoped with :has(.fi-ta-ctn) so pages WITHOUT a table
 * (forms, dashboard, settings) are completely untouched and keep Filament's
 * normal "grow with content, scroll the whole page" behaviour.
 */

html.fi:has(.fi-ta-ctn) {
    height: 100dvh;
    overflow: hidden;
}

.fi-body:has(.fi-ta-ctn) {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fi-body:has(.fi-ta-ctn) > .fi-layout {
    flex: 1 1 auto;
    min-height: 0;
}

.fi-main-ctn:has(.fi-ta-ctn) {
    height: 100% !important;
    overflow: hidden;
}

.fi-main:has(.fi-ta-ctn) {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fi-page:has(.fi-ta-ctn) {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fi-page-header-main-ctn:has(.fi-ta-ctn) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fi-page-main:has(.fi-ta-ctn) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fi-page-content:has(.fi-ta-ctn) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Filament wraps page content in a CSS Grid (.fi-grid), then a block-level
   .fi-grid-col > .fi-sc-component > .fi-ta chain before .fi-ta-ctn — none of
   which are flex by default, which is why height wasn't reaching the table
   at all. Force each of them to pass height through too. */
.fi-page-content:has(.fi-ta-ctn) > .fi-grid {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Filament renders a duplicate ".fi-grid-col.fi-hidden" alongside the real
   one (a responsive/breakpoint variant it toggles via display:none) —
   :not(.fi-hidden) is required or we'd force that hidden duplicate visible
   too, doubling up and pushing the real content down. */
.fi-grid:has(.fi-ta-ctn) > .fi-grid-col:not(.fi-hidden),
.fi-grid-col:has(.fi-ta-ctn) > .fi-sc-component,
.fi-sc-component:has(.fi-ta-ctn) > .fi-ta {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fi-ta-ctn {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fi-ta-ctn > .fi-ta-main {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Depending on the table's config (filters/header actions present or not),
   Filament either wraps rows in a nested .fi-ta-content-header +
   .fi-ta-content pair, or puts the <table> directly inside
   .fi-ta-content-ctn with no extra wrapper. Handle both: the header (if any)
   stays fixed-size, and whichever element actually needs to scroll — the
   inner .fi-ta-content, or .fi-ta-content-ctn itself when there's no split —
   gets the internal scrollbar. */
.fi-ta-content-ctn {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.fi-ta-content-header {
    flex: 0 0 auto;
}

.fi-ta-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* 1C-style grid: visible borders around every cell, not just row dividers. */
.fi-ta-table {
    border-collapse: collapse;
}

/* The checkbox-selection header cell (<th class="fi-ta-cell fi-ta-selection-cell">)
   and the actions-column header (<th class="fi-ta-actions-header-cell">) use
   different classes from the regular data-column headers — include them
   everywhere a "header cell" rule applies below, or they'd be left out of
   the grid/shading/sticky treatment. */
.fi-ta-header-cell,
.fi-ta-actions-header-cell,
th.fi-ta-cell,
td.fi-ta-cell {
    border: 1px solid rgb(228 228 231);
}

html.dark .fi-ta-header-cell,
html.dark .fi-ta-actions-header-cell,
html.dark th.fi-ta-cell,
html.dark td.fi-ta-cell {
    border-color: rgb(63 63 70);
}

/* Bold record text, shaded header row ("шапка"). Filament toggles dark mode
   via an `html.dark` class (not `data-theme`), so target that directly.
   Sticky on the <th> cells themselves (not <thead>) for cross-browser
   support — they stick to the top of .fi-ta-content-ctn / .fi-ta-content,
   the nearest scrolling ancestor, so the header stays put while rows
   scroll underneath it. */
.fi-ta-header-cell,
.fi-ta-actions-header-cell,
th.fi-ta-cell {
    background-color: rgb(244 244 245);
    position: sticky;
    top: 0;
    z-index: 2;
}

html.dark .fi-ta-header-cell,
html.dark .fi-ta-actions-header-cell,
html.dark th.fi-ta-cell {
    background-color: rgb(39 39 42);
}

td.fi-ta-cell {
    font-weight: 600;
}

/*
 * Sidebar "subordinate subsystem" fold/unfold (Asosiy / Qo'shimchalar
 * inside Ma'lumotlar). Toggled by app-provided JS (AdminPanelProvider's
 * BODY_END render hook), which adds/removes fi-nav-parent-collapsed on
 * the li[data-nav-parent] element.
 */
li[data-nav-parent] > a.fi-sidebar-item-btn {
    cursor: pointer;
}

li[data-nav-parent] > a.fi-sidebar-item-btn::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-start: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.5;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

li[data-nav-parent].fi-nav-parent-collapsed > a.fi-sidebar-item-btn::after {
    transform: rotate(-45deg);
}

li[data-nav-parent].fi-nav-parent-collapsed > ul.fi-sidebar-sub-group-items {
    display: none;
}

/* ============================================================
 * Document line grids (Repeater "table" layout) — 1C-style dense
 * bordered spreadsheet: honor per-column widths, horizontally scroll
 * wide tables, and draw cell borders + a shaded header row like the
 * 1C tabular section (ТабличнаяЧасть).
 * ============================================================ */
.fi-fo-table-repeater {
    overflow-x: auto;
}

/* width:max-content lets the browser honor each <th style="width:">
 * instead of squeezing 20+ columns into the viewport — table-layout:auto
 * otherwise compresses inputs (e.g. the product picker collapses to a
 * vertical sliver of letters). */
.fi-fo-table-repeater > table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}

.fi-fo-table-repeater > table thead th {
    background: rgb(148 163 184 / 0.14);
    border: 1px solid rgb(148 163 184 / 0.40);
    padding: 0.3rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.fi-fo-table-repeater > table tbody td {
    border: 1px solid rgb(148 163 184 / 0.25);
    padding: 0.15rem 0.3rem;
    vertical-align: top;
}

.dark .fi-fo-table-repeater > table thead th {
    background: rgb(148 163 184 / 0.10);
    border-color: rgb(148 163 184 / 0.25);
}

.dark .fi-fo-table-repeater > table tbody td {
    border-color: rgb(148 163 184 / 0.18);
}

/* ------------------------------------------------------------------
 * Document line grid — align single-value cells inside the taller
 * two-row (stacked pair) rows, and drop the number spinners (1C has
 * neither — plain vertically-centred cells).
 * ------------------------------------------------------------------ */
.fi-fo-table-repeater tbody td {
    vertical-align: middle !important;
}

/* No spin buttons on numeric inputs in the grid */
.fi-fo-table-repeater input[type="number"]::-webkit-outer-spin-button,
.fi-fo-table-repeater input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.fi-fo-table-repeater input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ------------------------------------------------------------------
 * Line grid — 1C spreadsheet look: strip each input's "box" (border,
 * ring, white fill, rounded corners) so values sit plainly in the
 * cell, and draw a hairline between the two stacked values of a pair.
 * ------------------------------------------------------------------ */
.fi-fo-table-repeater .fi-input-wrp {
    box-shadow: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Keep the active cell visible without a box border */
.fi-fo-table-repeater .fi-input-wrp:focus-within {
    background: rgb(59 130 246 / 0.10) !important;
}

/* Compact rows */
.fi-fo-table-repeater .fi-input {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}

/* Stacked pair: remove the gap and separate the two values with a hairline */
.fi-fo-table-repeater .fi-sc.fi-sc-has-gap {
    gap: 0 !important;
}
.fi-fo-table-repeater .fi-sc > .fi-grid-col + .fi-grid-col {
    border-top: 1px solid rgb(148 163 184 / 0.30);
}

/* ==================================================================
 * Collapsible header → bigger table. On a document form, ONLY while the
 * header ("Sarlavha") section is collapsed (Filament adds .fi-collapsed),
 * switch the page to a full-height flex layout so the line-grid repeater
 * grows into the freed space and scrolls internally. Expanded = untouched
 * (normal page flow, table at its natural size). Every rule is gated on a
 * collapsed section coexisting with a line-grid repeater, so no other page
 * is affected.
 * ================================================================== */
html.fi:has(.fi-fo-table-repeater):has(.fi-section.fi-collapsed) {
    height: 100dvh;
    overflow: hidden;
}
.fi-body:has(.fi-section.fi-collapsed):has(.fi-fo-table-repeater) {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fi-body:has(.fi-section.fi-collapsed):has(.fi-fo-table-repeater) > .fi-layout {
    flex: 1 1 auto;
    min-height: 0;
}
.fi-main-ctn:has(.fi-section.fi-collapsed):has(.fi-fo-table-repeater) {
    height: 100% !important;
    overflow: hidden;
}
.fi-main:has(.fi-section.fi-collapsed):has(.fi-fo-table-repeater) {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fi-page:has(.fi-section.fi-collapsed):has(.fi-fo-table-repeater) {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fi-page-header-main-ctn:has(.fi-section.fi-collapsed):has(.fi-fo-table-repeater) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fi-page-main:has(.fi-section.fi-collapsed):has(.fi-fo-table-repeater) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fi-page-content:has(.fi-section.fi-collapsed):has(.fi-fo-table-repeater) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Every ancestor between the page and the repeater that CONTAINS it becomes a
   height-passing flex column; siblings (the collapsed header, the action
   buttons) don't contain the repeater, so they keep their natural size. */
.fi-page:has(.fi-section.fi-collapsed) .fi-grid:has(.fi-fo-table-repeater),
.fi-page:has(.fi-section.fi-collapsed) .fi-grid-col:has(.fi-fo-table-repeater),
.fi-page:has(.fi-section.fi-collapsed) .fi-sc-component:has(.fi-fo-table-repeater),
.fi-page:has(.fi-section.fi-collapsed) form.fi-sc-form:has(.fi-fo-table-repeater),
.fi-page:has(.fi-section.fi-collapsed) .fi-sc-section:has(.fi-fo-table-repeater),
.fi-page:has(.fi-section.fi-collapsed) .fi-section:has(.fi-fo-table-repeater),
.fi-page:has(.fi-section.fi-collapsed) .fi-section-content-ctn:has(.fi-fo-table-repeater),
.fi-page:has(.fi-section.fi-collapsed) .fi-section-content:has(.fi-fo-table-repeater),
.fi-page:has(.fi-section.fi-collapsed) .fi-fo-field:has(.fi-fo-table-repeater),
.fi-page:has(.fi-section.fi-collapsed) .fi-fo-field-content-col:has(.fi-fo-table-repeater) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* The repeater itself becomes the internal scroll area. display:block (not its
   default grid) keeps the <table> at its natural height pinned to the top —
   otherwise the grid stretches the table to fill, ballooning each row so FEWER
   rows fit. Block + overflow:auto means compact rows and more of them visible,
   with a scrollbar once they exceed the freed space. */
.fi-page:has(.fi-section.fi-collapsed) .fi-fo-table-repeater {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* ==================================================================
 * Document line grid: "add row" button ABOVE the table (1C "Добавить"
 * sits over the tabular section), and flex-column layout so a wide
 * table still scrolls horizontally and rows keep their natural height.
 * ================================================================== */
.fi-fo-table-repeater {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.fi-fo-table-repeater > table {
    order: 2;
}
.fi-fo-table-repeater-add {
    order: 1;
    margin-bottom: 6px;
}

/* Line-grid "add row": button pinned left, section title ("Tovarlar") beside it
 * (moved there by AdminPanelProvider JS) so the grid loses its separate heading row. */
.fi-fo-table-repeater-add {
    justify-content: flex-start !important;
    align-items: center;
    gap: 12px;
}
.fi-repeater-inline-title {
    font-weight: 600;
    font-size: 0.95rem;
}

/* ==================================================================
 * Podsistemalar (sidebar) — kattaroq shrift, 3D rangli ikonkalar,
 * mayin fon. (Foydalanuvchi so'rovi: 1, 2, 9)
 * ================================================================== */

/* (9) Mayin fon — sidebar butun maydoni yumshoq gradient */
.fi-sidebar,
.fi-sidebar-nav {
    background: linear-gradient(180deg, #f5f8fc 0%, #eaf0f7 100%) !important;
}
html.dark .fi-sidebar,
html.dark .fi-sidebar-nav {
    background: linear-gradient(180deg, #0f1729 0%, #0b1120 100%) !important;
}

/* (1) Podsistema (guruh) nomlari — ajralib turadigan sarlavha */
.fi-sidebar-group-label {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    letter-spacing: 0;
    line-height: 1.15;
}
.fi-sidebar-group-btn {
    padding-top: 0.45rem;
    padding-bottom: 0.3rem;
}
.fi-sidebar-item-label {
    font-size: 1.05rem !important;
    font-weight: 600;
}
.fi-sidebar-item-btn {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    gap: 0.7rem;
}

/* (2) 3D rangli ikonkalar — "app-icon" uslubidagi chip */
.fi-sidebar-item-icon {
    box-sizing: border-box;
    width: 1.9rem !important;
    height: 1.9rem !important;
    padding: 0.34rem;
    border-radius: 0.6rem;
    color: #fff !important;
    background-image: linear-gradient(145deg, var(--atd-ic-a, #34d399), var(--atd-ic-b, #059669));
    box-shadow:
        0 2px 5px rgba(2, 6, 23, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -2px 4px rgba(0, 0, 0, 0.18);
    flex: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    transform: translateY(-1px) scale(1.08);
    box-shadow:
        0 5px 12px rgba(2, 6, 23, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--atd-ic-a, #34d399) 35%, transparent),
        0 3px 8px rgba(2, 6, 23, 0.35);
}

/* Har bir ikonkaga o'z rangi (guruh ichida 8 xil rang aylanadi) */
.fi-sidebar-group-items > li:nth-child(8n + 1) .fi-sidebar-item-icon { --atd-ic-a: #34d399; --atd-ic-b: #059669; }
.fi-sidebar-group-items > li:nth-child(8n + 2) .fi-sidebar-item-icon { --atd-ic-a: #60a5fa; --atd-ic-b: #2563eb; }
.fi-sidebar-group-items > li:nth-child(8n + 3) .fi-sidebar-item-icon { --atd-ic-a: #fbbf24; --atd-ic-b: #d97706; }
.fi-sidebar-group-items > li:nth-child(8n + 4) .fi-sidebar-item-icon { --atd-ic-a: #c084fc; --atd-ic-b: #7c3aed; }
.fi-sidebar-group-items > li:nth-child(8n + 5) .fi-sidebar-item-icon { --atd-ic-a: #f472b6; --atd-ic-b: #db2777; }
.fi-sidebar-group-items > li:nth-child(8n + 6) .fi-sidebar-item-icon { --atd-ic-a: #2dd4bf; --atd-ic-b: #0d9488; }
.fi-sidebar-group-items > li:nth-child(8n + 7) .fi-sidebar-item-icon { --atd-ic-a: #fb7185; --atd-ic-b: #e11d48; }
.fi-sidebar-group-items > li:nth-child(8n + 8) .fi-sidebar-item-icon { --atd-ic-a: #38bdf8; --atd-ic-b: #0284c7; }

/* Sub-guruh (parent ichidagi bolalar) ham rangli */
.fi-sidebar-sub-group-items > li:nth-child(3n + 1) .fi-sidebar-item-icon { --atd-ic-a: #34d399; --atd-ic-b: #059669; }
.fi-sidebar-sub-group-items > li:nth-child(3n + 2) .fi-sidebar-item-icon { --atd-ic-a: #60a5fa; --atd-ic-b: #2563eb; }
.fi-sidebar-sub-group-items > li:nth-child(3n + 3) .fi-sidebar-item-icon { --atd-ic-a: #c084fc; --atd-ic-b: #7c3aed; }