/*
 * Officina Digitale: the look of the panels, on top of Filament's own theme.
 * Enamel white, steel grey, petrol blue; a night-blue sidebar. Red, amber and
 * green are kept for what they mean: late, waiting, done.
 * One file, no build step: taking its <link> away gives Filament's look back.
 */

:root {
    --od-night: #111c30;
    --od-night-soft: #1b2a45;
    --od-enamel: #f2f5f8;
    --od-brass: #b08d57;
    --od-late: #c2362b;
    --od-wait: #b7791f;
    --od-done: #1f8a4c;
    --od-radius: .75rem;
    --od-radius-small: .5rem;
}

/* ---------- Page ---------- */

.fi-body { background-color: var(--od-enamel); font-feature-settings: "tnum" 1, "ss01" 1; }
.fi-body:where(.dark, .dark *) { background-color: #0c1322; }

.fi-header-heading { letter-spacing: -.02em; font-weight: 600; }
.fi-header-subheading { max-width: 75rem; line-height: 1.5; }

/* ---------- Sidebar: night blue, in light and in dark ---------- */

.fi-sidebar { background-color: var(--od-night); border-inline-end: 0; }
.fi-sidebar-header { background-color: var(--od-night); border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: none; }
.fi-sidebar-header .fi-logo { color: #fff; font-weight: 600; letter-spacing: -.01em; }
.fi-sidebar-header .fi-icon-btn { color: rgba(255, 255, 255, .6); }

.fi-sidebar-nav { scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.fi-sidebar-group-label { color: rgba(255, 255, 255, .5); font-weight: 600; letter-spacing: .01em; }
.fi-sidebar-group-btn .fi-icon-btn, .fi-sidebar-group-collapse-btn { color: rgba(255, 255, 255, .45); }

.fi-sidebar-item-btn { border-radius: var(--od-radius-small); }
.fi-sidebar-item-label { color: rgba(255, 255, 255, .82); font-weight: 500; }
.fi-sidebar-item-btn > .fi-icon, .fi-sidebar-item-btn > svg { color: rgba(255, 255, 255, .5); }
.fi-sidebar-item-btn:hover, .fi-sidebar-item-btn:focus-visible { background-color: rgba(255, 255, 255, .07); }
.fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: #fff; }

/* Where you are: a brass bar on the left, as on a file tab. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: var(--od-night-soft); box-shadow: inset 3px 0 0 var(--od-brass); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: #fff; font-weight: 600; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > svg { color: var(--od-brass); }

/* On the night-blue sidebar the logo is always its light version. */
.fi-sidebar-header img.fi-logo { content: url('../../images/brand/officina-logo-dark.svg'); }

/* The branch chosen at the top of the sidebar. */
.fi-sidebar .fi-tenant-menu-trigger { background-color: rgba(255, 255, 255, .06); border-radius: var(--od-radius-small); }
.fi-sidebar .fi-tenant-menu-trigger-text, .fi-sidebar .fi-tenant-menu-trigger-tenant-name { color: #fff; }
.fi-sidebar .fi-tenant-menu-trigger-current-tenant-label { color: rgba(255, 255, 255, .55); }

/* ---------- Top bar ---------- */

.fi-topbar { box-shadow: none; border-bottom: 1px solid var(--gray-200); }
.fi-topbar:where(.dark, .dark *) { border-bottom-color: rgba(255, 255, 255, .08); }

/* ---------- Sections and tables: flat, with a hairline ---------- */

.fi-section:not(.fi-section-not-contained) { border-radius: var(--od-radius); box-shadow: none; border: 1px solid var(--gray-200); }
.fi-section:not(.fi-section-not-contained):where(.dark, .dark *) { border-color: rgba(255, 255, 255, .09); }
.fi-section-header-heading { font-weight: 600; letter-spacing: -.01em; }
.fi-section-header-description { line-height: 1.5; }

.fi-ta-ctn { border-radius: var(--od-radius); box-shadow: none; border: 1px solid var(--gray-200); }
.fi-ta-ctn:where(.dark, .dark *) { border-color: rgba(255, 255, 255, .09); }
.fi-ta-header-cell { background-color: var(--gray-50); }
.fi-ta-header-cell:where(.dark, .dark *) { background-color: rgba(255, 255, 255, .03); }
.fi-ta-header-cell-label { font-weight: 600; color: var(--gray-600); }
.fi-ta-header-cell-label:where(.dark, .dark *) { color: var(--gray-300); }
.fi-ta-row:hover { background-color: color-mix(in srgb, var(--primary-500) 6%, transparent); }
.fi-ta-text-item { line-height: 1.45; }

/* Lists that read at a glance: the header stays in sight, one row in two is tinted,
   the second line of a cell is clearly secondary, amounts line up digit under digit. */
.fi-ta-header-cell { position: sticky; top: 0; z-index: 1; border-bottom: 2px solid var(--gray-200); }
.fi-ta-header-cell:where(.dark, .dark *) { border-bottom-color: rgba(255, 255, 255, .12); }
.fi-ta-header-cell-label { font-size: .8125rem; letter-spacing: .01em; }
.fi-ta-table tbody > .fi-ta-row:nth-child(even) { background-color: color-mix(in srgb, var(--gray-500) 4%, transparent); }
.fi-ta-table tbody > .fi-ta-row:nth-child(even):hover { background-color: color-mix(in srgb, var(--primary-500) 6%, transparent); }
.fi-ta-cell { vertical-align: middle; }
.fi-ta-text-item { font-size: .9375rem; color: var(--gray-900); }
.fi-ta-text-item:where(.dark, .dark *) { color: var(--gray-100); }
.fi-ta-text-description { font-size: .8125rem; line-height: 1.4; color: var(--gray-500); margin-top: .1rem; }
.fi-ta-text-description:where(.dark, .dark *) { color: var(--gray-400); }
.fi-ta-text { font-variant-numeric: tabular-nums; }

/* The tabs above a list: which one is open must be obvious. */
.fi-tabs { border-radius: var(--od-radius); box-shadow: none; border: 1px solid var(--gray-200); padding: .3rem; gap: .25rem; }
.fi-tabs:where(.dark, .dark *) { border-color: rgba(255, 255, 255, .09); }
.fi-tabs-item { border-radius: var(--od-radius-small); font-weight: 600; }
.fi-tabs-item.fi-active { background-color: var(--primary-600); }
.fi-tabs-item.fi-active .fi-tabs-item-label, .fi-tabs-item.fi-active > .fi-icon { color: #fff; }

/* ---------- Controls ---------- */

.fi-btn { border-radius: var(--od-radius-small); font-weight: 600; box-shadow: none; }
.fi-input-wrp { border-radius: var(--od-radius-small); box-shadow: none; border: 1px solid var(--gray-300); transition: border-color .15s, box-shadow .15s; }
.fi-input-wrp:where(.dark, .dark *) { border-color: rgba(255, 255, 255, .14); }
.fi-input-wrp:not(.fi-disabled):hover { border-color: var(--gray-400); }
.fi-input-wrp:focus-within { border-color: var(--primary-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 22%, transparent); }
.fi-input-wrp.fi-invalid { border-color: var(--danger-600); }
.fi-input-wrp.fi-disabled { background-color: var(--gray-50); }
.fi-input-wrp.fi-disabled:where(.dark, .dark *) { background-color: rgba(255, 255, 255, .03); }
.fi-badge { border-radius: 999px; font-weight: 600; }
.fi-modal-window { border-radius: var(--od-radius); }
.fi-fo-field-label-content, .fi-fo-field-wrp-label { font-weight: 600; }

:focus-visible { outline-color: var(--primary-500); }

/* ---------- Sign-in pages ---------- */

.fi-simple-layout { background: linear-gradient(160deg, var(--od-night) 0%, #17365a 100%); }
.fi-simple-main { border-radius: var(--od-radius); box-shadow: 0 20px 50px rgba(8, 15, 30, .35); border: 0; }

/* ---------- Pieces shared by the pages written for the workshop ---------- */

.od-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--od-radius-small); }
.dark .od-card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.od-muted { color: var(--gray-500); }
.dark .od-muted { color: var(--gray-400); }
.od-late { color: var(--od-late); font-weight: 600; }
.od-wait { color: var(--od-wait); font-weight: 600; }
.od-done { color: var(--od-done); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Sidebar: find a page by typing; while filtering every group is open. */
.od-sidebar-filter { padding: 0 .5rem .5rem; }
.od-sidebar-filter input {
    width: 100%; padding: .45rem .7rem; font-size: .875rem; border-radius: .5rem;
    border: 1px solid rgb(148 163 184 / .35); background: rgb(255 255 255 / .06); color: inherit;
}
.od-sidebar-filter input::placeholder { color: rgb(148 163 184); }
.od-sidebar-filter input:focus { outline: 2px solid var(--primary-400); outline-offset: 0; }
.od-filtering .fi-sidebar-group-items { display: flex !important; height: auto !important; overflow: visible !important; }

/* Sidebar sub-items: folded under their page, open while the mouse is on it, open in their section, indented with a thin line. */
.fi-sidebar-open .od-sub-item { display: none; }
.fi-sidebar-open .od-sub-item.od-open, .fi-sidebar-open .od-sub-item.od-here, .od-filtering .od-sub-item { display: block; animation: od-unfold .14s ease-out; }
@keyframes od-unfold { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.fi-sidebar-open .od-sub-item > .fi-sidebar-item-btn {
    margin-inline-start: 1.15rem; padding-block: .3rem; padding-inline-start: .65rem;
    border-inline-start: 1px solid rgb(148 163 184 / .28); border-start-start-radius: 0; border-end-start-radius: 0;
}
.fi-sidebar-open .od-sub-item .fi-sidebar-item-label { font-size: .8125rem; }
.fi-sidebar-open .od-sub-item .fi-sidebar-item-icon { width: 1rem; height: 1rem; opacity: .75; }
.fi-sidebar-open .od-has-sub > .fi-sidebar-item-btn .fi-sidebar-item-label::after {
    content: ''; display: inline-block; width: .38rem; height: .38rem; margin-inline-start: .45rem; vertical-align: .12rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: .5; transition: transform .14s;
}
.fi-sidebar-open .od-has-sub.od-open > .fi-sidebar-item-btn .fi-sidebar-item-label::after,
.fi-sidebar-open .od-has-sub.od-here > .fi-sidebar-item-btn .fi-sidebar-item-label::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .od-sub-item { animation: none !important; } }
/* Phones and tablets: the sub-items open from an arrow of their own, large enough for a thumb. */
.fi-sidebar-open .od-sub-item.od-shut { display: none; }
.od-has-sub.od-touch { position: relative; }
.fi-sidebar-open .od-has-sub.od-touch > .fi-sidebar-item-btn .fi-sidebar-item-label::after { display: none; }
.od-has-sub.od-touch > .fi-sidebar-item-btn { padding-inline-end: 3.25rem; }
.od-sub-toggle { position: absolute; inset-block-start: 0; inset-inline-end: 0; display: grid; place-items: center; width: 3rem; height: 2.75rem; color: rgba(255, 255, 255, .75); -webkit-tap-highlight-color: transparent; }
.od-sub-toggle::before { content: ''; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .14s; }
.od-sub-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }

/* "Nuova chiamata": the button of the top bar and the floating window of the phone guide. */
.od-phone { margin-inline-end: .5rem; }
.od-phone-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: .6rem; font-size: .875rem; font-weight: 600;
    color: #fff; background: var(--primary-600, #1a7a96); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.od-phone-btn:hover { background: var(--primary-700, #15657c); }
.od-phone-btn:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.od-phone-btn.is-on { background: #b45309; }
.od-phone-icon { width: 1.1rem; height: 1.1rem; }
@media (max-width: 640px) { .od-phone-label { display: none; } }
.od-call { position: fixed; z-index: 45; display: flex; flex-direction: column; min-width: 20rem; min-height: 16rem; max-width: 96vw; max-height: 92vh;
    border-radius: .9rem; overflow: hidden; resize: both; background: #fff; box-shadow: 0 18px 50px rgb(15 23 42 / .28), 0 0 0 1px rgb(148 163 184 / .35); }
.dark .od-call { background: #0f172a; }
.od-call-bar { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem .45rem .8rem; cursor: move; user-select: none;
    background: var(--primary-700, #15657c); color: #fff; font-weight: 700; font-size: .9rem; touch-action: none; }
.od-call-bar span { flex: 1; }
.od-call-bar button, .od-call-bar a { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: .4rem; color: #fff; }
.od-call-bar button:hover, .od-call-bar a:hover { background: rgb(255 255 255 / .16); }
.od-call iframe { flex: 1; width: 100%; border: 0; background: transparent; }
.od-call.is-dragging iframe { pointer-events: none; }
/* "Siti": the list of external sites and their window. */
.od-sites { position: relative; }
.od-sites-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: .6rem; font-size: .875rem; font-weight: 600;
    border: 1px solid rgb(128 128 128 / .35); color: inherit; background: transparent; }
.od-sites-btn:hover, .od-sites-btn.is-on { background: rgb(128 128 128 / .12); }
.od-sites-btn:focus-visible { outline: 2px solid var(--primary-400); outline-offset: 2px; }
.od-sites-panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 46; width: min(22rem, 92vw); max-height: 75vh; overflow-y: auto; padding: .6rem;
    border-radius: .8rem; background: #fff; border: 1px solid rgb(128 128 128 / .25); box-shadow: 0 12px 32px rgb(15 23 42 / .18); }
.dark .od-sites-panel { background: #0f172a; }
.od-sites-search { padding: .3rem .3rem .7rem; border-bottom: 1px solid rgb(128 128 128 / .2); margin-bottom: .4rem; }
.od-sites-search label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; }
.od-sites-search input { width: 100%; border-radius: .5rem; border: 1px solid rgb(128 128 128 / .4); padding: .4rem .6rem; background: transparent; color: inherit; font-size: .9rem; }
.od-sites-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.od-sites-chips button { font-size: .8rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; background: var(--primary-600, #0f5c73); color: #fff; }
.od-sites-chips button:disabled { opacity: .45; cursor: not-allowed; }
.od-sites-title { font-size: .78rem; font-weight: 600; opacity: .65; padding: .5rem .4rem .2rem; }
.od-sites-item { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .45rem .5rem; border-radius: .5rem; text-align: left; font-size: .9rem; font-weight: 600; }
.od-sites-item:hover, .od-sites-item:focus-visible { background: rgb(128 128 128 / .12); outline: none; }
.od-sites-item small { font-weight: 400; opacity: .6; font-size: .75rem; white-space: nowrap; }
.od-sites-row { display: flex; align-items: center; gap: .15rem; }
.od-sites-row .od-sites-item { flex: 1; min-width: 0; }
.od-sites-star { flex: none; width: 2rem; height: 2rem; border-radius: .5rem; font-size: 1.05rem; line-height: 1; color: rgb(128 128 128 / .8); }
.od-sites-star:hover, .od-sites-star:focus-visible { background: rgb(128 128 128 / .12); outline: none; }
.od-sites-star.is-on { color: #d4a017; }
.od-sites-empty { font-size: .82rem; opacity: .7; padding: .2rem .5rem .5rem; }
.od-sites-others { border-top: 1px solid rgb(128 128 128 / .2); margin-top: .3rem; padding-top: .3rem; }
.od-sites-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: .45rem .5rem; border-radius: .5rem; font-size: .85rem; font-weight: 600; opacity: .8; }
.od-sites-toggle:hover, .od-sites-toggle:focus-visible { background: rgb(128 128 128 / .12); outline: none; }
.od-sites-toggle small { font-weight: 600; font-size: .72rem; padding: .05rem .45rem; border-radius: 999px; background: rgb(128 128 128 / .16); }
.od-sites-manage { display: block; margin-top: .4rem; padding: .5rem; border-top: 1px solid rgb(128 128 128 / .2); font-size: .82rem; font-weight: 600; color: var(--primary-600); }
.od-site-hint { padding: .3rem .8rem; font-size: .75rem; opacity: .7; border-bottom: 1px solid rgb(128 128 128 / .2); }
@media (max-width: 640px) { .od-sites-panel { position: fixed; left: 4vw; right: 4vw; top: 4rem; width: auto; } }

/* FIXY's face: round, never stretched; it breathes while thinking. */
.od-fixy { display: inline-block; flex: none; vertical-align: middle; border-radius: 30%; object-fit: contain; user-select: none; }
.od-fixy.is-thinking { animation: od-fixy-think 1.8s ease-in-out infinite; }
@keyframes od-fixy-think { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgb(39 198 178 / 0)); } 50% { transform: scale(1.07); filter: drop-shadow(0 0 .35rem rgb(39 198 178 / .55)); } }
@media (prefers-reduced-motion: reduce) { .od-fixy.is-thinking { animation: none; } }
/* Brand images with a light and a dark version. */
.od-brand-dark { display: none; }
.dark .od-brand-light { display: none; }
.dark .od-brand-dark { display: inline-block; }

/* Lists: the actions of a row stay on one line, as compact icons; the hovered row stands out. */
.fi-ta-actions { flex-wrap: nowrap; gap: .25rem; }
.fi-ta-row:hover > td { background: color-mix(in srgb, var(--primary-500) 5%, transparent); }
.fi-ta-header-cell-label { font-size: .78rem; letter-spacing: .01em; }

/* ==========================================================================
   Everywhere: a calmer, more modern page. Softer corners, one quiet shadow for
   what floats, clearer titles.
   ========================================================================== */

:root { --od-radius: .875rem; --od-radius-small: .625rem; --od-float: 0 1px 2px rgb(17 28 48 / .05), 0 8px 24px rgb(17 28 48 / .06); }

.fi-header-heading { font-size: 1.625rem; line-height: 1.2; }
.fi-section:not(.fi-section-not-contained), .fi-ta-ctn { background-clip: padding-box; }
.fi-wi-stats-overview-stat { border-radius: var(--od-radius); box-shadow: none; border: 1px solid var(--gray-200); }
.fi-wi-stats-overview-stat:where(.dark, .dark *) { border-color: rgba(255, 255, 255, .09); }
.fi-modal-window { box-shadow: 0 24px 64px rgb(8 15 30 / .28); }
.fi-dropdown-panel { border-radius: var(--od-radius-small); box-shadow: var(--od-float); }

/* The count on the filter button says little (often a zero): the filters on are spelled out above the list. */
.fi-ta-filters-dropdown .fi-icon-btn-badge-ctn, .fi-ta-filters-trigger-action-ctn .fi-icon-btn-badge-ctn { display: none; }

/* At the top of a page "Archivia" and "Elimina" stay readable but never shout louder than the work. */
.fi-header .fi-ac .fi-btn.fi-color-danger:not(.fi-outlined) {
    background: transparent; color: var(--danger-700); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger-600) 45%, transparent);
}
.fi-header .fi-ac .fi-btn.fi-color-danger:not(.fi-outlined) .fi-icon { color: currentColor; }
.fi-header .fi-ac .fi-btn.fi-color-danger:not(.fi-outlined):hover { background: color-mix(in srgb, var(--danger-600) 8%, transparent); }
.dark .fi-header .fi-ac .fi-btn.fi-color-danger:not(.fi-outlined) { color: var(--danger-300); }

/* The mini dashboard of Ticket and Schede: where to start, the tiles that open each part. */
.od-pb { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.od-pb-first { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; background: #fff; border: 1px solid var(--gray-200); border-inline-start: 4px solid var(--od-late); border-radius: var(--od-radius); }
.dark .od-pb-first { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); border-inline-start-color: var(--od-late); }
.od-pb-first-icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--od-late); }
.od-pb-first-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .875rem; line-height: 1.35; }
.od-pb-first-text strong { font-size: 1rem; font-weight: 600; }
.od-pb-first-label { font-size: .75rem; font-weight: 600; color: var(--od-late); }
.od-pb-tiles { display: grid; gap: .625rem; grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr)); }
@media (min-width: 1280px) { .od-pb-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.od-pb-tile { display: flex; flex-direction: column; gap: .125rem; min-height: 6.5rem; padding: .75rem .875rem; text-align: start; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--od-radius); transition: border-color .12s, box-shadow .12s; }
.dark .od-pb-tile { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.od-pb-tile:hover { border-color: var(--gray-400); }
.od-pb-tile:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.od-pb-tile-head { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; line-height: 1.25; color: var(--gray-600); }
.dark .od-pb-tile-head { color: var(--gray-300); }
.od-pb-tile-head .fi-icon { flex: none; width: 1.125rem; height: 1.125rem; }
.od-pb-tile-count { font-size: 1.75rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.od-pb-tile-summary { font-size: .75rem; line-height: 1.3; color: var(--gray-500); }
.dark .od-pb-tile-summary { color: var(--gray-400); }
.od-pb-tile.is-danger:not(.is-empty) .od-pb-tile-count, .od-pb-tile.is-danger:not(.is-empty) .fi-icon { color: var(--od-late); }
.od-pb-tile.is-wait:not(.is-empty) .od-pb-tile-count, .od-pb-tile.is-wait:not(.is-empty) .fi-icon { color: var(--od-wait); }
.od-pb-tile.is-primary .fi-icon { color: var(--primary-600); }
.od-pb-tile.is-empty .od-pb-tile-count { color: var(--gray-400); }
.od-pb-tile.is-on { border-color: var(--primary-600); box-shadow: inset 0 0 0 1px var(--primary-600); }
.od-pb-more { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.od-pb-chip { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.25rem; padding: .25rem .75rem; font-size: .8125rem; font-weight: 600; color: var(--gray-600); border-radius: 999px; border: 1px solid var(--gray-200); }
.dark .od-pb-chip { color: var(--gray-300); border-color: rgba(255, 255, 255, .12); }
.od-pb-chip:hover { border-color: var(--gray-400); }
.od-pb-chip.is-on { color: #fff; background: var(--primary-600); border-color: var(--primary-600); }
.od-pb-chip-badge { min-width: 1.25rem; padding-inline: .3rem; font-size: .75rem; text-align: center; border-radius: 999px; background: rgb(128 128 128 / .18); }
.od-pb-legend { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; color: var(--gray-600); }
.dark .od-pb-legend { color: var(--gray-300); }
.od-pb-legend i { width: .75rem; height: .75rem; border-radius: 999px; }
.od-pb-note { margin-inline-start: auto; font-size: .75rem; color: var(--gray-500); }

/* A row that burns says so on its edge: red urgent or late, amber old. */
/* The board of the practices: every open one at once, in columns. */
.od-pb-view { display: inline-flex; padding: 2px; border: 1px solid var(--gray-200); border-radius: .6rem; margin-inline-end: .375rem; }
.dark .od-pb-view { border-color: rgba(255, 255, 255, .12); }
.od-pb-view button { display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; padding: .125rem .7rem; font-size: .8125rem; font-weight: 600; border-radius: .45rem; color: var(--gray-600); }
.od-pb-view button .fi-icon { width: 1rem; height: 1rem; }
.od-pb-view button.is-on { background: var(--primary-600); color: #fff; }
.od-pc { display: grid; gap: .75rem; margin-top: .75rem; }
.od-pc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.od-pc-search { flex: 1 1 16rem; min-height: 2.5rem; padding: .25rem .75rem; border: 1px solid var(--gray-300); border-radius: .6rem; background: #fff; font-size: .875rem; }
.dark .od-pc-search { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); }
.od-pc-group { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; }
.od-pc-group > span { color: var(--gray-500); margin-inline-end: .25rem; }
.od-pc-group button { min-height: 2.25rem; padding: .125rem .7rem; font-weight: 600; border: 1px solid var(--gray-200); border-radius: 999px; }
.od-pc-group button.is-on { border-color: var(--primary-600); background: color-mix(in srgb, var(--primary-500) 12%, transparent); }
.od-pc-total { margin-inline-start: auto; font-size: .8125rem; font-weight: 600; color: var(--gray-500); }
.od-pc-cols { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; align-items: flex-start; }
.od-pc-col { flex: 0 0 15.75rem; display: flex; flex-direction: column; max-height: calc(100vh - 9rem); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: .75rem; scroll-snap-align: start; }
.dark .od-pc-col { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .1); }
.od-pc-head { display: flex; align-items: center; gap: .4rem; padding: .6rem .75rem; font-size: .875rem; font-weight: 700; border-bottom: 1px solid var(--gray-200); }
.dark .od-pc-head { border-color: rgba(255, 255, 255, .1); }
.od-pc-head .fi-icon { width: 1.1rem; height: 1.1rem; flex: none; }
.od-pc-col.is-danger .od-pc-head .fi-icon { color: var(--od-late); }
.od-pc-col.is-wait .od-pc-head .fi-icon { color: var(--od-wait); }
.od-pc-col.is-primary .od-pc-head .fi-icon { color: var(--primary-600); }
.od-pc-col.is-success .od-pc-head .fi-icon { color: var(--success-600); }
.od-pc-count { margin-inline-start: auto; min-width: 1.6rem; padding: 0 .4rem; text-align: center; border-radius: 999px; background: rgb(128 128 128 / .16); font-variant-numeric: tabular-nums; }
.od-pc-list { display: grid; gap: .4rem; padding: .5rem; overflow-y: auto; }
.od-pc-card { display: grid; gap: .1rem; padding: .5rem .6rem .5rem .7rem; background: #fff; border: 1px solid var(--gray-200); border-inline-start: 4px solid var(--gray-200); border-radius: .55rem; font-size: .8125rem; line-height: 1.3; color: inherit; }
.dark .od-pc-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.od-pc-card:hover { border-color: var(--gray-400); }
.od-pc-card:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.od-pc-card.is-urgent, .od-pc-card.is-late { border-inline-start-color: var(--od-late); }
.od-pc-card.is-old { border-inline-start-color: var(--od-wait); }
.od-pc-card.has-partner { background: color-mix(in srgb, var(--od-pc-partner) 12%, #fff); }
.dark .od-pc-card.has-partner { background: color-mix(in srgb, var(--od-pc-partner) 18%, transparent); }
.od-pc-top { display: flex; align-items: baseline; gap: .4rem; }
.od-pc-top strong { font-size: .875rem; }
.od-pc-mark { font-size: .6875rem; font-weight: 700; color: var(--od-late); }
.od-pc-card.is-old .od-pc-mark { color: var(--od-wait); }
.od-pc-age { margin-inline-start: auto; font-size: .75rem; color: var(--gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-pc-customer { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-pc-subject { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--gray-700); }
.dark .od-pc-subject { color: var(--gray-300); }
.od-pc-meta { display: flex; flex-wrap: wrap; gap: .1rem .5rem; font-size: .75rem; color: var(--gray-500); }
.od-pc-meta .is-missing { color: var(--od-late); }
.od-pc-empty, .od-pc-none { font-size: .8125rem; color: var(--gray-500); }
@media (max-width: 640px) {
    .od-pc-cols { margin-inline: -.75rem; padding-inline: .75rem; scroll-snap-type: x mandatory; }
    .od-pc-col { flex-basis: 86%; max-height: none; }
    .od-pc-total { margin-inline-start: 0; }
    .od-pc-group > span { display: none; }
}

.fi-ta-row.od-row-urgent > td:first-child, .fi-ta-row.od-row-late > td:first-child { box-shadow: inset 3px 0 0 var(--od-late); }
.fi-ta-row.od-row-old > td:first-child { box-shadow: inset 3px 0 0 var(--od-wait); }

/* The work order, top to bottom in the order of the work; what is missing to complete stays in sight. */
[data-od-step] { scroll-margin-top: calc(var(--topbar-height, 4rem) + 1rem); }
.od-wo-embedded .fi-ta-header-heading { display: none; }
.od-wo-embedded .fi-ta-header, .od-wo-embedded .fi-ta-header-ctn, .od-wo-embedded .fi-ta-actions { flex-wrap: wrap; min-width: 0; }
.od-wo-embedded .fi-ta-cell-description { min-width: 13rem; }
.od-wo-shortcuts { display: flex; flex-wrap: wrap; gap: .5rem; }
.od-wo-missing-room { height: 3.5rem; }
.od-wo-missing { position: fixed; inset-inline-end: 1.5rem; bottom: 6rem; z-index: 6; max-width: min(60rem, calc(100vw - 3rem)); display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; padding: .5rem .75rem; font-size: .875rem; background: #fff; border: 1px solid var(--od-wait); border-radius: var(--od-radius-small); box-shadow: var(--od-float); }
.dark .od-wo-missing { background: var(--gray-900); }
.od-wo-missing-label { font-weight: 600; }
.od-wo-missing button { min-height: 2rem; padding: .125rem .625rem; font-weight: 600; color: var(--od-wait); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--od-wait) 45%, transparent); }
.od-wo-missing.is-ready { border-color: var(--od-done); color: var(--od-done); font-weight: 600; }
.od-wo-missing.is-ready .fi-icon { width: 1.25rem; height: 1.25rem; }

/* The mark and the bar under the thumb belong to phones and tablets. */
.od-topbar-home, .od-dock { display: none; }
.od-sheet-overlay, .od-sheet { display: none; }

/* ==========================================================================
   Phones and tablets, where the sidebar is a drawer: the bar under the thumb.
   ========================================================================== */

@media (max-width: 1023.98px) {
    :root { --od-dock: 0px; }
    :root:has(.od-dock) { --od-dock: calc(3.75rem + env(safe-area-inset-bottom, 0px)); }

    .fi-main { padding-bottom: calc(var(--od-dock) + 1.5rem); }

    .od-topbar-home { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; margin-inline-end: .25rem; }
    .od-topbar-home img { width: 2.125rem; height: 2.125rem; }
    /* The menu opens from the bar under the thumb; pages without it (customer area) keep the usual button. */
    body:has(.od-dock) .fi-topbar-open-sidebar-btn, body:has(.od-dock) .fi-topbar-close-sidebar-btn { display: none !important; }

    /* Nuova chiamata is in the "+". */
    .fi-topbar .od-phone { display: none; }

    .od-dock {
        position: fixed; inset-inline: 0; bottom: 0; z-index: 25; display: flex; align-items: stretch; justify-content: space-around;
        height: var(--od-dock); padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #fff; border-top: 1px solid var(--gray-200);
    }
    .dark .od-dock { background: var(--gray-900); border-top-color: rgba(255, 255, 255, .1); }
    .od-dock-tab {
        flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
        font-size: .6875rem; font-weight: 500; color: var(--gray-500); -webkit-tap-highlight-color: transparent;
    }
    .dark .od-dock-tab { color: var(--gray-400); }
    .od-dock-tab .fi-icon { width: 1.5rem; height: 1.5rem; }
    .od-dock-tab.is-on { color: var(--primary-600); font-weight: 600; }
    .dark .od-dock-tab.is-on { color: var(--primary-300); }
    .od-dock-new {
        flex: none; align-self: center; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-inline: .35rem; margin-top: -1.25rem;
        border-radius: 1.1rem; color: #fff; background: var(--primary-600); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary-700) 40%, transparent);
        transition: transform .15s; -webkit-tap-highlight-color: transparent;
    }
    .od-dock-new .fi-icon { width: 1.75rem; height: 1.75rem; transition: transform .15s; }
    .od-dock-new:active { transform: scale(.94); }
    .od-dock-new.is-on .fi-icon { transform: rotate(45deg); }

    /* The warehouse terminal fills the screen and has its own buttons. */
    body:has(.tk) .od-dock { display: none; }

    /* While typing the keyboard needs the room. */
    body:has(.fi-main input:focus:not([type=checkbox]):not([type=radio]), .fi-main textarea:focus) .od-dock { display: none; }

    .od-sheet-overlay { display: block; position: fixed; inset: 0; z-index: 24; background: rgb(8 15 30 / .45); }
    .od-sheet {
        display: block; position: fixed; inset-inline: 0; bottom: var(--od-dock); z-index: 24; max-height: calc(100dvh - var(--od-dock) - 4rem); overflow-y: auto;
        padding: .5rem .75rem .75rem; background: #fff; border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -12px 40px rgb(8 15 30 / .2);
    }
    .dark .od-sheet { background: var(--gray-900); }
    .od-sheet-enter { transition: transform .2s ease-out, opacity .2s; }
    .od-sheet-from { transform: translateY(1.5rem); opacity: 0; }
    .od-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: .25rem .25rem .5rem .5rem; font-size: 1.0625rem; }
    .od-sheet-close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .75rem; color: var(--gray-500); }
    .od-sheet-close .fi-icon { width: 1.5rem; height: 1.5rem; }
    .od-sheet-item { display: flex; align-items: center; gap: .85rem; min-height: 3.5rem; padding: .5rem; border-radius: .875rem; -webkit-tap-highlight-color: transparent; }
    .od-sheet-item:active { background: var(--gray-100); }
    .dark .od-sheet-item:active { background: rgba(255, 255, 255, .06); }
    .od-sheet-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem; color: var(--primary-700); background: var(--primary-50); }
    .dark .od-sheet-icon { color: var(--primary-200); background: rgba(255, 255, 255, .08); }
    .od-sheet-icon .fi-icon { width: 1.5rem; height: 1.5rem; }
    .od-sheet-text { min-width: 0; display: flex; flex-direction: column; }
    .od-sheet-text strong { font-size: 1rem; font-weight: 600; }
    .od-sheet-text small { font-size: .8125rem; color: var(--gray-500); line-height: 1.3; }

    /* Tablet upright: a list wider than the screen keeps the buttons of its rows in sight. */
    .fi-ta-table:not(.fi-ta-table-stacked-on-mobile) tbody > tr > td:has(> .fi-ta-actions):last-child,
    .fi-ta-table.fi-ta-table-stacked-on-mobile tbody > tr.fi-ta-row > td:has(> .fi-ta-actions):last-child { position: sticky; inset-inline-end: 0; z-index: 1; background: #fff; box-shadow: -8px 0 8px -8px rgb(17 28 48 / .15); }
    .dark .fi-ta-table tbody > tr.fi-ta-row > td:has(> .fi-ta-actions):last-child { background: var(--gray-900); }

    /* The drawer slides in by itself, see mobile-drawer.blade.php. */
    .od-has-drawer .fi-sidebar { z-index: 31; translate: -100% 0 !important; transition: translate .18s ease-out; }
    .od-has-drawer.od-drawer .fi-sidebar { translate: 0 0 !important; }
    .od-has-drawer .fi-sidebar-close-overlay { display: none !important; }
    .od-drawer-overlay { display: none; position: fixed; inset: 0; z-index: 30; background: rgb(8 15 30 / .5); }
    .od-drawer .od-drawer-overlay { display: block; }
    .od-drawer body { overflow: hidden; }

    /* The drawer: comfortable to tap, above the bar. */
    .fi-sidebar .fi-sidebar-item-btn { min-height: 2.75rem; }
}

/* ==========================================================================
   Phones
   ========================================================================== */

@media (max-width: 639.98px) {
    .fi-main { padding-inline: .75rem; }
    .fi-page-content { row-gap: 1rem; }
    .fi-page-header-main-ctn { padding-block: .875rem 1rem; row-gap: 1rem; }

    /* Top bar: icons only, nothing cut at the edge. */
    .fi-topbar nav { padding-inline: .5rem; }
    .fi-topbar-end { gap: .125rem; margin-inline-start: auto; }
    .fi-topbar .od-sites-btn { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; border: 0; }
    .fi-topbar .od-sites-btn > span, .fi-topbar .od-sites-label { display: none; }

    /* Search: a magnifying glass that opens across the bar. */
    .fi-global-search-ctn { flex: none; }
    .fi-global-search-field { width: 2.5rem; }
    .fi-global-search-field .fi-input-wrp { border-color: transparent; background: transparent; }
    .fi-global-search-field .fi-input-wrp { position: relative; }
    .fi-global-search-field .fi-input-wrp-content-ctn { position: static; }
    .fi-global-search-field input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
    .fi-global-search-field .fi-input-wrp-suffix, .fi-global-search-field kbd { display: none; }
    .fi-global-search-field:focus-within { position: fixed; z-index: 35; inset-inline: .5rem; top: .625rem; width: auto; }
    .fi-global-search-field:focus-within .fi-input-wrp { background: #fff; border-color: var(--primary-600); }
    .dark .fi-global-search-field:focus-within .fi-input-wrp { background: var(--gray-900); }
    .fi-global-search-field:focus-within input { position: static; height: auto; opacity: 1; padding-inline: .5rem; }
    .fi-global-search-results-ctn { position: fixed !important; inset-inline: .5rem !important; top: 4rem !important; width: auto !important; max-width: none !important; }

    /* Title and buttons: the guide a discreet icon beside the title, the buttons as wide as the thumb wants. */
    .fi-header { position: relative; gap: .75rem; }
    .fi-header-heading { font-size: 1.375rem; padding-inline-end: 2.75rem; }
    .fi-header-subheading { font-size: .875rem; }
    .od-guide-btn { position: absolute; top: -.35rem; inset-inline-end: 0; }
    .od-guide-btn .fi-btn { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; border: 0; background: transparent; box-shadow: none; font-size: 0; }
    .od-guide-btn .fi-btn .fi-icon { width: 1.5rem; height: 1.5rem; color: var(--gray-500); }
    .fi-header .fi-ac { width: 100%; flex-wrap: wrap; gap: .5rem; }
    .fi-header .fi-ac > .fi-btn, .fi-header .fi-ac > * > .fi-btn { flex: 1 1 auto; justify-content: center; }
    .fi-header .fi-ac > .fi-dropdown, .fi-header .fi-ac > .fi-modal-trigger { flex: 1 1 auto; }
    .fi-header .fi-ac > .fi-dropdown .fi-btn { width: 100%; }

    /* Many buttons (a ticket, a work order): one line that slides, so the page starts near the top. */
    .fi-header .fi-ac:has(> :nth-child(4)) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + 1.5rem); margin-inline: -.75rem; padding-inline: .75rem; }
    .fi-header .fi-ac:has(> :nth-child(4))::-webkit-scrollbar { display: none; }
    .fi-header .fi-ac:has(> :nth-child(4)) > * { flex: none; }
    .fi-header .fi-ac:has(> :nth-child(4)) .fi-btn { white-space: nowrap; }

    /* Fingers and iPhones: nothing small to tap, 16px in every field or the page zooms by itself. */
    .fi-btn { min-height: 2.75rem; }
    .fi-icon-btn { min-width: 2.5rem; min-height: 2.5rem; }
    .fi-input-wrp input, .fi-input-wrp select, .fi-input-wrp textarea, .fi-input, .fi-select-input, .fi-select-input-btn, .fi-fo-rich-editor-content,
    input.fi-input, select.fi-select-input, textarea, .od-card input, .od-card select, .fi-main input:not([type=checkbox]):not([type=radio]), .fi-main select, .fi-main textarea { font-size: 16px; }
    .fi-input-wrp { min-height: 2.75rem; }
    .fi-checkbox-input, .fi-radio-input { width: 1.25rem; height: 1.25rem; }
    .fi-fo-field-wrp-helper-text { font-size: .8125rem; }

    /* Sections: less margin eaten from the side. */
    .fi-section-header { padding: .875rem 1rem; }
    .fi-section-content { padding: 1rem; }

    .fi-main .pr-form :is(input, select, textarea) { font-size: 16px; }

    /* Save button: stays above the bar under the thumb. */
    .fi-sc-actions.fi-sticky .fi-ac { bottom: var(--od-dock); inset-inline: 0; margin-inline: 0; width: 100%; padding: .5rem .75rem; display: flex; gap: .5rem; flex-wrap: nowrap; overflow-x: auto; z-index: 20; }
    .fi-sc-actions.fi-sticky .fi-ac .fi-btn { flex: 1 0 auto; justify-content: center; }
    .fi-sc-actions.fi-sticky .fi-ac .fi-btn:first-child { flex-grow: 3; }
    body:has(.fi-main input:focus:not([type=checkbox]):not([type=radio]), .fi-main textarea:focus) .fi-sc-actions.fi-sticky .fi-ac { bottom: 0; }

    /* Tabs: one line that slides, the open one obvious. */
    .fi-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
    .fi-tabs::-webkit-scrollbar { display: none; }
    .fi-tabs-item { flex: none; min-height: 2.5rem; scroll-snap-align: center; white-space: nowrap; }

    /* Lists as cards. */
    .fi-ta-ctn { background: transparent; border: 0; border-radius: 0; overflow: visible; }
    .fi-ta-ctn:where(.dark, .dark *) { background: transparent; }
    .fi-ta-header-toolbar { padding: 0 0 .625rem; gap: .5rem; flex-wrap: nowrap; background: transparent; border: 0; }
    .fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) { display: none; }
    .fi-ta-header-toolbar > * { min-width: 0; flex: 1 1 auto; }
    .fi-ta-header-toolbar > div:has(.fi-ta-search-field) { display: flex; align-items: center; gap: .25rem; width: 100%; }
    .fi-ta-search-field { flex: 1 1 auto; max-width: none; width: auto; }
    .fi-ta-col-manager-dropdown, .fi-ta-col-manager-modal { display: none; }
    .fi-ta-content-ctn { overflow: visible; border: 0; background: transparent; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile { background: transparent; border: 0; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody { display: flex; flex-direction: column; gap: .625rem; border: 0; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row {
        padding: .5rem 0; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--od-radius); overflow: hidden;
    }
    .dark .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .09); }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row:nth-child(even) { background: #fff; }
    .dark .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row:nth-child(even) { background: rgba(255, 255, 255, .04); }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row:active { background: var(--primary-50); }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:not(.fi-ta-selection-cell) { padding-block: .1875rem; padding-inline: 1rem; }
    /* A card reads like a card: its title on top, then "label  value" on one line each. */
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:has(> .fi-ta-cell-label) { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); column-gap: .75rem; align-items: baseline; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-cell-label { font-size: .8125rem; font-weight: 500; color: var(--gray-500); margin: 0; }
    .dark .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-cell-label { color: var(--gray-400); }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:is(:nth-child(1 of .fi-ta-cell:not(.fi-ta-selection-cell)), :nth-child(2 of .fi-ta-cell:not(.fi-ta-selection-cell))):has(> .fi-ta-cell-label) { display: block; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:is(:nth-child(1 of .fi-ta-cell:not(.fi-ta-selection-cell)), :nth-child(2 of .fi-ta-cell:not(.fi-ta-selection-cell))) > .fi-ta-cell-label { display: none; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:nth-child(2 of .fi-ta-cell:not(.fi-ta-selection-cell)) .fi-ta-text-item:not(.fi-ta-text-has-badges) { font-size: 1rem; font-weight: 600; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:nth-child(1 of .fi-ta-cell:not(.fi-ta-selection-cell)) .fi-ta-text-item:not(.fi-ta-text-has-badges) { font-size: .8125rem; font-weight: 600; color: var(--primary-700); }
    .dark .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:nth-child(1 of .fi-ta-cell:not(.fi-ta-selection-cell)) .fi-ta-text-item:not(.fi-ta-text-has-badges) { color: var(--primary-300); }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:not(:has(> .fi-ta-cell-label)):has(> .fi-ta-actions) { margin-top: .375rem; padding-top: .25rem; border-top: 1px solid var(--gray-100); }
    .dark .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > .fi-ta-cell:has(> .fi-ta-actions) { border-top-color: rgba(255, 255, 255, .06); }
    .fi-ta-table-stacked-header-row, .fi-ta-table-stacked-header-row > * { background: transparent; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td { background: transparent !important; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:has(> .fi-ta-actions):last-child { position: static; box-shadow: none; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-text, .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-icon, .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-col { padding: 0; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-col { justify-content: flex-start; text-align: start; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-text-item { text-align: start; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-cell-content { min-width: 0; }
    .fi-ta-table-stacked-header-cell { padding: 0 0 .5rem !important; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-record-content-ctn, .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-col { padding-inline: 0; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-actions { flex-wrap: wrap; justify-content: flex-start; padding-top: .25rem; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-actions .fi-icon-btn { min-width: 2.75rem; min-height: 2.75rem; }
    .fi-pagination { padding-inline: 0; }
    .fi-ta-footer, .fi-ta-footer-ctn { background: transparent; border: 0; }

    /* Nothing pushes the page wider than the phone. */
    .fi-main input, .fi-main select, .fi-main textarea, .fi-main img, .fi-main video { max-width: 100%; }
    .fi-main .tl-card { min-width: 0; }
    .fi-main .tl-scan input { min-width: 0; }
    .fi-main .np-table td.np-check, .fi-main .np-table th.np-check { width: 3.75rem; padding-inline: .125rem; }
    .fi-main .np-table th { font-size: .6875rem; letter-spacing: 0; text-transform: none; }
    .fi-section, .fi-section-content-ctn, .fi-section-content, .fi-page-content > *, .fi-sc > * { min-width: 0; }

    .od-pb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .od-pb-tiles { gap: .5rem; }
    .od-pb-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .5rem; min-height: 3.5rem; padding: .5rem .625rem; }
    .od-pb-tile-head { font-size: .75rem; }
    .od-pb-tile-count { font-size: 1.375rem; }
    .od-pb-tile-summary { display: none; }
    .od-pb-tile:first-child { grid-column: 1 / -1; }
    .od-pb-tile:first-child .od-pb-tile-summary { display: block; grid-column: 1 / -1; }
    .od-pb-tile:first-child .od-pb-tile-head { font-size: .875rem; }
    .od-pb-first { padding: .625rem .75rem; }
    .od-pb-more { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.75rem; padding-inline: .75rem; }
    .od-pb-more::-webkit-scrollbar { display: none; }
    .od-pb-chip { flex: none; white-space: nowrap; }
    .od-pb-note, .od-pb-legend { flex: none; }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row.od-row-urgent, .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row.od-row-late { border-inline-start: 4px solid var(--od-late); }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row.od-row-old { border-inline-start: 4px solid var(--od-wait); }
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-row > td:first-child { box-shadow: none; }

    /* One line that slides: the thumb needs the rest of the screen. While typing it steps aside. */
    .od-wo-missing { inset-inline: .5rem; bottom: calc(var(--od-dock) + 3.75rem); max-width: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .375rem .5rem; font-size: .8125rem; white-space: nowrap; }
    .od-wo-missing::-webkit-scrollbar { display: none; }
    .od-wo-missing button { flex: none; min-height: 2.25rem; }
    body:has(.fi-main input:focus:not([type=checkbox]):not([type=radio]), .fi-main textarea:focus) .od-wo-missing { display: none; }
    .od-wo-missing-room { height: 4rem; }

    /* Counter sale: each line of the cart on two rows, what is sold first and as wide as the phone. */
    .fi-main .tl-table thead { display: none; }
    .fi-main .tl-table, .fi-main .tl-table tbody { display: block; }
    .fi-main .tl-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding-block: .625rem; border-bottom: 1px solid var(--gray-100); }
    .dark .fi-main .tl-table tr { border-bottom-color: rgb(255 255 255 / .08); }
    .fi-main .tl-table td { display: block; padding: 0; border: 0; }
    .fi-main .tl-table td:first-child { grid-column: 1 / -1; }
    .fi-main .tl-table .tl-desc { min-height: 2.75rem; }
    .fi-main .tl-table .tl-price { width: 100%; min-height: 2.75rem; }
    .fi-main .tl-qty button { min-width: 2.5rem; min-height: 2.5rem; }
    .fi-main .tl-table td:last-child button { min-width: 2.5rem; min-height: 2.5rem; }

    /* The tiles of the summary pages, two to a row. */
    .fi-main :is(.so-cards, .wo-cards, .cf-cards, .rp-kpis, .fu-figures, .og-figures, .st-tiles) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
    .fi-main :is(.so-cards) > :first-child { grid-column: 1 / -1; }

    /* Agenda: days listed under each technician; empty days stay out of the way. */
    .fi-main .agenda-toolbar { gap: .5rem; }
    .fi-main .agenda-toolbar .fi-btn { flex: 1 1 0; padding-inline: .5rem; font-size: .8125rem; white-space: nowrap; }
    .fi-main .agenda-range { order: -1; width: 100%; margin: 0; }
    .fi-main .agenda-select { width: 100%; min-height: 2.75rem; }
    .fi-main .agenda-queue { grid-template-columns: minmax(0, 1fr); }
    .fi-main .agenda-col-list { max-height: 20rem; }
    .fi-main .agenda-plan { display: inline-grid; place-items: center; min-height: 2.25rem; padding-inline: .75rem; border-radius: .5rem; color: #fff; background: var(--primary-600); text-decoration: none; }
    .fi-main .agenda-scroll { overflow: visible; }
    .fi-main .agenda { display: block; min-width: 0; font-size: .9375rem; }
    .fi-main .agenda thead { display: none; }
    .fi-main .agenda tbody { display: flex; flex-direction: column; gap: .625rem; }
    .fi-main .agenda tr { display: block; border: 1px solid var(--gray-200); border-radius: var(--od-radius-small); overflow: hidden; }
    .dark .fi-main .agenda tr { border-color: rgba(255, 255, 255, .1); }
    .fi-main .agenda th, .fi-main .agenda td { display: block; width: auto; border: 0; padding: .625rem .75rem; }
    .fi-main .agenda tbody th { background: color-mix(in srgb, var(--gray-500) 7%, transparent); }
    .fi-main .agenda td:not(:has(.agenda-entry, .agenda-away)) { display: none; }
    .fi-main .agenda td::before { content: attr(data-day); display: block; margin-bottom: .375rem; font-size: .8125rem; font-weight: 600; color: var(--gray-600); }
    .dark .fi-main .agenda td::before { color: var(--gray-300); }
    .fi-main .agenda-entry-actions { gap: .5rem; font-size: .875rem; }
    .fi-main .agenda-entry-actions > * { min-height: 2.25rem; }

    /* Goals of the company: each measure a card, each box as wide as the phone. */
    .fi-main .cg-card { overflow: visible; padding: .875rem; }
    .fi-main .cg-table, .fi-main .cg-table tbody, .fi-main .cg-table tr, .fi-main .cg-table td { display: block; width: 100%; }
    .fi-main .cg-table thead { display: none; }
    .fi-main .cg-table tr { padding-block: .625rem; border-bottom: 1px solid rgba(128, 128, 128, .25); }
    .fi-main .cg-table td { padding: .25rem 0; border: 0; }
    .fi-main .cg-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .125rem; font-size: .8125rem; font-weight: 500; opacity: .7; }
    .fi-main .cg-table input { width: 100%; min-height: 2.75rem; text-align: start; }

    /* Windows (the "+" of the fields included): a sheet that rises from the bottom, as wide as the phone. */
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn { padding: 0; align-items: flex-end; min-height: 100dvh; }
    .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) > .fi-modal-window-ctn > .fi-modal-window {
        position: fixed; inset-inline: 0; bottom: 0; width: 100%; max-width: 100%; max-height: 94dvh; margin: 0; border-radius: 1.25rem 1.25rem 0 0;
    }
    /* A long email or link breaks instead of leaving the screen. */
    .fi-main a, .fi-main strong, .fi-modal-content a, .fi-modal-content strong { overflow-wrap: anywhere; }
    .fi-modal-slide-over > .fi-modal-window-ctn > .fi-modal-window { width: 100%; max-width: 100%; }
    .fi-modal-header { padding: .875rem 1rem; }
    .fi-modal-content { padding: 1rem; }
    .fi-modal-footer { padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom, 0px)); }
    .fi-modal-footer .fi-ac { width: 100%; }
    .fi-modal-footer .fi-btn { flex: 1 1 auto; justify-content: center; }
}