/*
    The narrow layout of the panel.

    Why a stylesheet at all, when the rule in docs/rental-module-concept.md is
    that custom panel views carry inline style attributes: an inline style
    cannot hold a media query. Everything that has to react to the size of the
    screen has to live in a file, so this is that file - plain CSS, no Tailwind,
    registered as a Filament asset the same way the calendar's stylesheet is.

    Two things keep it from becoming the dependency a custom theme would be:

    1. Nothing here styles the wide layout. Every rule is scoped to a phone, so
       if the stylesheet were ever missing the panel renders exactly as it did
       before this file existed - no blank page, no collapsed grid.
    2. The layout in the Blade views stays in the inline styles. This file only
       overrides them, which is also why !important shows up: an inline style
       outranks a stylesheet, and these rules have to win.

    [data-layout='mobile'] is set by resources/views/filament/view-mode.blade.php
    and means "render narrow", whether that was decided by the width of the
    screen or by the switch in the user menu. [data-view-mode='mobile'] is the
    stronger statement: the user asked for narrow explicitly.
*/

/* ---------------------------------------------------------------------------
   Buchungsformular - Gegenstandsliste
   --------------------------------------------------------------------------- */

/*
    On a phone the item picker stops being a table and becomes one card per
    item. As a table it is wider than the screen, so the quantity field and the
    "Frei" badge sit at opposite ends of a row: typing a quantity means
    scrolling sideways, and what is actually free scrolls out of sight while
    you do it. That is the whole complaint about this form on a phone.
*/
[data-layout='mobile'] .vt-items-scroll {
    overflow-x: visible !important;
}

[data-layout='mobile'] .vt-items,
[data-layout='mobile'] .vt-items tbody {
    display: block;
}

[data-layout='mobile'] .vt-items thead {
    display: none;
}

[data-layout='mobile'] .vt-items tr {
    display: grid;
    grid-template-columns: 6rem 1fr;
    grid-template-areas:
        'name name'
        'qty free'
        'price why';
    gap: 0.625rem 0.75rem;
    align-items: start;
    padding: 0.875rem 0;
}

[data-layout='mobile'] .vt-items td {
    display: block;
    padding: 0 !important;
    text-align: start !important;
}

[data-layout='mobile'] .vt-items-name {
    grid-area: name;
}

[data-layout='mobile'] .vt-items-qty {
    grid-area: qty;
}

[data-layout='mobile'] .vt-items-free {
    grid-area: free;
}

[data-layout='mobile'] .vt-items-price {
    grid-area: price;
}

/* Sits beside the price, which carries a label above it. Aligning to the end
   of the row puts the hint on the same line as the amount rather than level
   with the word "Preis/Tag". */
[data-layout='mobile'] .vt-items-why {
    grid-area: why;
    align-self: end;
}

/* The input is 5rem wide on purpose in a table cell; in a card it should fill
   the box that draws the border around it. */
[data-layout='mobile'] .vt-items-qty input {
    width: 100% !important;
}

/* The column headers are gone with the table, so each card carries its own,
   above the value rather than beside it - there is no room beside it. */
[data-layout='mobile'] .vt-items td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1875rem;
    font-size: 0.6875rem;
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   Buchungsformular - Felder, Summe, Schaltflächen
   --------------------------------------------------------------------------- */

/*
    The field grids fit themselves to the available width, so on a real phone
    they already fall to one column. They need saying only when the narrow
    layout was forced on a wide screen, where there is room for more.
*/
[data-layout='mobile'] .vt-field-grid,
[data-layout='mobile'] .vt-card-grid {
    grid-template-columns: 1fr !important;
}

/* The totals block is held to 22rem and pushed right, which leaves it stranded
   in a corner once the screen is narrower than that. */
[data-layout='mobile'] .vt-totals {
    max-width: none !important;
}

/* Two buttons side by side leave neither of them a comfortable target. */
[data-layout='mobile'] .vt-form-actions {
    flex-direction: column;
    align-items: stretch !important;
}

[data-layout='mobile'] .vt-form-actions .fi-btn {
    width: 100%;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   Erzwungene schmale Ansicht
   --------------------------------------------------------------------------- */

/*
    Filament's own schemas - the inventory and user forms, the booking
    infolist - lay themselves out from the width of the window, which a
    stylesheet cannot argue with. They can be talked round, though: the column
    counts are custom properties, one per breakpoint, and pointing the wide
    ones back at the default collapses every schema in the panel to the single
    column it uses on a phone.

    Only for the explicit choice. In automatic mode the window is already
    narrow and Filament has done this by itself.
*/
[data-view-mode='mobile'] .fi-grid {
    --cols-sm: var(--cols-default) !important;
    --cols-md: var(--cols-default) !important;
    --cols-lg: var(--cols-default) !important;
    --cols-xl: var(--cols-default) !important;
    --cols-2xl: var(--cols-default) !important;
}

/* A cell spanning three columns of a grid that now has one would pull the grid
   back open, so the spans have to follow the counts. */
[data-view-mode='mobile'] .fi-grid-col {
    --col-span-sm: var(--col-span-default) !important;
    --col-span-md: var(--col-span-default) !important;
    --col-span-lg: var(--col-span-default) !important;
    --col-span-xl: var(--col-span-default) !important;
    --col-span-2xl: var(--col-span-default) !important;
}