/*
 * The dashboard's summary tiles.
 *
 * Filament ships them as wide, roomy rectangles three to a row, which put the
 * agency's own figures and the seventeen Baligpa banks well below the fold. The
 * task asks for square-ish tiles so more of them fit across and the page stops
 * scrolling.
 *
 * Shape lives here rather than in the widgets because the widgets decide *how
 * many* columns (see the DenseStatCards trait) and CSS decides what a card in
 * one of those columns looks like. This app has no compiled Filament theme, so
 * the file is served straight from public/ through the panel's versioned render
 * hook.
 *
 * Nothing here removes information: the label and the description are clamped
 * to two lines each — the "optimise the inside of the card" the task asks for —
 * and a tile whose text genuinely needs more room grows past the square instead
 * of cutting the text off, because aspect-ratio yields to content.
 */

/* Denser than Filament's 1.5rem, so the saving from more columns is not spent
   back on the gaps between them. */
.fi-wi-stats-overview .fi-sc {
    gap: 0.75rem;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat {
    padding: 0.875rem 1rem;
    min-height: 6.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*
 * Square from the tablet up. On a phone the grid is one or two columns wide, so
 * a square card would be as tall as the screen — there the task asks for
 * readability, not density, and the card keeps its natural height.
 */
@media (min-width: 640px) {
    .fi-wi-stats-overview .fi-wi-stats-overview-stat {
        aspect-ratio: 1 / 1;
        height: auto;
    }
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-content {
    row-gap: 0.375rem;
    min-width: 0;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-value {
    line-height: 1.15;
    /* Long figures (the storage total) wrap rather than widen the column. */
    overflow-wrap: anywhere;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-label-ctn {
    align-items: flex-start;
    column-gap: 0.375rem;
    min-width: 0;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-label-ctn .fi-icon,
.fi-wi-stats-overview .fi-wi-stats-overview-stat-description .fi-icon {
    flex: none;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-label {
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-description {
    align-items: flex-start;
    line-height: 1.35;
    min-width: 0;
}

.fi-wi-stats-overview .fi-wi-stats-overview-stat-description > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
}

/* ── The header: today, who is signed in, and the way out ─────────────────────
   (AGENCY-DASH-006 … ۰۰۹)

   One line at the end of the topbar, which in this RTL panel is its left. It
   sits inside the header's existing height rather than adding to it. */

.fi-agency-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
    line-height: 1.6;
    /* The avatar is the panel's own user menu and sits immediately before this
       block, which in an RTL topbar means immediately to its right — so the date
       ended up all but touching it. About half a centimetre of air between the
       two (AGENCY-DASHBOARD-601), put here rather than on the avatar so nothing
       about the user menu, its size or the rest of the header moves. */
    margin-inline-start: 1.25rem;
}

.fi-agency-header-user {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-agency-header-logout-form {
    display: inline-flex;
    margin: 0;
}

.fi-agency-header-logout {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
}

.fi-agency-header-logout:hover {
    color: var(--danger-600, #dc2626);
}

/* The date is the first thing to go when there is no room for it; the name and
   the way out matter more on a phone. */
@media (max-width: 640px) {
    .fi-agency-header-date {
        display: none;
    }
}

/* ── The managements, between the figures and the Baligpa breakdown ───────────
   (AGENCY-DASH-022 … ۰۳۹, AGENCY-DASHBOARD-605 … ۰۰۹)

   One column per sidebar group. A grid rather than columns of floats: every
   column in a row starts its heading at the same height whatever number of
   cards hangs beneath it, and a last row with four groups in it makes four
   columns rather than four and three empty ones.

   The cards are about twice the size they were. A card is as wide as its
   column, so «twice the size» is bought by taking roughly a third of the
   columns out of every row and giving the card half again its height: about
   1.4 × 1.4, which is twice the area rather than four times it. Nothing here
   reaches the two rows of stats cards — they have a stylesheet of their own,
   above, and keep the size they had (AGENCY-DASHBOARD-607). */

/*
 * AGENCY-DASHBOARD-CARDS-701 … ۷۰۵: how many groups fit in a row is a question
 * about widths, so the widths answer it.
 *
 * There is no column count here and no breakpoint. `auto-fill` lays down as
 * many columns as the container holds at the width one card needs, and `1fr`
 * then shares out what is left over — so a card is never carried to the next
 * row while its own width is still standing empty at the end of this one, and
 * the number per row rises with the screen instead of stopping at a figure
 * written down in advance (بند ۷۰۱ و ۷۰۴).
 *
 * 14rem is the width a card was given when the last task made these twice the
 * size, measured where the row was not being squeezed. Stating it as the
 * *minimum* is what keeps بند ۷۰۳: more columns are only ever added when they
 * fit at that size, never by shrinking the cards to make room. `min(100%, …)`
 * is for the phone, where 14rem may be more than the whole screen — without it
 * the row would overflow rather than fall to one column (بند ۷۰۴).
 *
 * The gap is the one the panel already used, unchanged (بند ۷۰۵).
 */
.fi-dash-managements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 1.25rem 0.875rem;
    align-items: start;
}

.fi-dash-management-group {
    min-width: 0;
}

/*
 * AGENCY-DASH-MENU-001 … ۰۰۸: where the name of a management menu sits over its
 * own cards.
 *
 * Centred rather than following the page's right-to-left start (بند ۲), and
 * centred on the group's *own* column — the heading is as wide as the column
 * its cards are in, so a name can never read as belonging to the group beside
 * it (بند ۸).
 *
 * Lower than it was (بند ۳). The heading keeps one height for every group, so
 * that the cards of a column whose name runs to two lines stay level with the
 * cards beside them; what changes is where the name sits inside that height.
 * It used to sit at the top, which is what left a one-line name stranded far
 * above the line with the gap growing and shrinking from menu to menu. Pinned
 * to the end instead, every name in the dashboard is the same short distance
 * above its own yellow line, whether it is one line long or two (بند ۳ و ۶).
 *
 * One rule for all of them: nothing here names a menu, so no menu can be left
 * with the old arrangement and none is spaced by hand (بند ۵ و ۶).
 *
 * DASHBOARD-MENU-SPACING-001 و ۰۰۲: that short distance is now twice what it
 * was. The gap the task measures is the one between a name and the yellow line
 * under it — this rule's own `padding-block-end`, ۰٫۵rem, and so ۱rem — and the
 * cards move down with the line, which is the rest of what it asks for. The
 * figure is doubled from the structure that was here rather than picked: the
 * task says as much in بند ۲.
 *
 * The shared height grows by exactly the same ۰٫۵rem. It has to: two lines of
 * text plus the old padding fitted inside ۳٫۱۲۵rem, and with the new padding
 * they would not, so a two-line name would have made its own heading taller
 * than its neighbours' and pushed its cards out of line with theirs (بند ۸).
 * Doubling the gap and keeping every heading one height are the same edit.
 */
.fi-dash-management-group-title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Two lines (۲ × ۰٫۸۱۲۵rem × ۱٫۵) and the padding below them still fit. */
    min-height: 3.625rem;
    margin: 0 0 0.5rem;
    /* Clear of the line, at twice the distance it used to be (بند ۱ و ۲). */
    padding-block-end: 1rem;
    border-block-end: 2px solid var(--primary-500, #f59e0b);
    line-height: 1.5;
    text-align: center;
}

/* Two lines at most, so a long group name cannot push its own cards down past
   the cards of the column beside it, and is never cut off sideways at any width
   (بند ۹). The row's headings all start at the same height either way — this
   keeps the cards level too. */
.fi-dash-management-group-title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-width: 0;
    overflow-wrap: anywhere;
}

.fi-dash-management-cards {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Half again as tall as it was — 4.875rem became 7rem — which together with the
   wider column is about twice the card (AGENCY-DASHBOARD-605). Every management
   card is exactly this height whatever its name is (AGENCY-DASH-031).
   The stats cards keep their own height: this rule never reaches them
   (AGENCY-DASH-034, AGENCY-DASHBOARD-602 و ۶۰۷). */
.fi-dash-management-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 7rem;
    padding: 0.75rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.875rem;
    background: var(--gray-50, #f9fafb);
    color: var(--gray-800, #1f2937);
    text-align: center;
    text-decoration: none;
    transition: border-color 120ms, background-color 120ms;
}

:where(.dark) .fi-dash-management-card {
    border-color: var(--gray-700, #374151);
    background: var(--gray-900, #111827);
    color: var(--gray-200, #e5e7eb);
}

.fi-dash-management-card:hover {
    border-color: var(--primary-500, #f59e0b);
    background: var(--primary-50, #fffbeb);
}

:where(.dark) .fi-dash-management-card:hover {
    background: rgba(245, 158, 11, 0.12);
}

/* Grown with the card rather than doubled: the task asks for visual balance
   inside the bigger card, not for an icon twice the size (AGENCY-DASHBOARD-606). */
.fi-dash-management-card-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    color: var(--primary-500, #f59e0b);
}

/* The name in full where it fits and clamped where it does not — never spilling
   out of the card and never overlapping the icon (AGENCY-DASH-033). Three lines
   at every width now: the card is tall enough for them, and a long name that
   used to be cut at two is not. */
.fi-dash-management-card-label {
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The more columns a row holds, the narrower each card is — so from four across
   the name is given a slightly smaller size. The card's height does not move:
   what changes is how much of it the name is allowed to fill, which is the
   difference between a name that reads and one that is cut
   (AGENCY-DASH-032 و ۰۳۳). */
@media (min-width: 1280px) {
    .fi-dash-management-card {
        gap: 0.4375rem;
        padding: 0.625rem;
    }

    .fi-dash-management-card-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .fi-dash-management-card-label {
        font-size: 0.875rem;
        line-height: 1.35;
    }
}

.fi-dash-visibility-note {
    line-height: 1.9;
}

/* ── «آخرین تغییرات فنی سایت», the one tile that is not a figure ──────────────
   (تغییرات-فنی-۰۲۰ … ۰۲۶)

   It keeps the height, the width, the corners, the padding and the alignment of
   every other tile in the row — بند ۰۲۲ refuses a card designed outside the
   dashboard's visual language — and is told apart only by the panel's own
   yellow around it.

   Its value is a management's name rather than a number, so it is set at the
   size the panel gives a name and not at the size it gives a figure; a long name
   wraps inside the square instead of widening the column.

   ── One and a half tiles wide, and not one taller (اصلاح-۰۰۱) ──

   The width comes from the grid — the card asks for three of the halves a tile
   is two of (AgencyStatsWidget) — and the only thing said here is that the
   height must not follow it. Every other tile is a square, so its height is its
   own width; this one is let out of the square and stretched to the height of
   the row instead, which is the height of the squares beside it. Nothing else
   about the card is touched: same corners, same yellow, same padding, same
   three levels of information. */

.fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-technical-changes {
    border-color: rgb(245 158 11 / 0.55);
    box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.35);
    /* Out of the square (which would make it one and a half times as tall), and
       up to the height of the row, which the squares beside it set. */
    aspect-ratio: auto;
    height: 100%;
}

:where(.dark) .fi-wi-stats-overview .fi-wi-stats-overview-stat.fi-stat-technical-changes {
    border-color: rgb(251 191 36 / 0.5);
    box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.3);
}

.fi-wi-stats-overview .fi-stat-technical-changes .fi-wi-stats-overview-stat-value {
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}