/* =====================================================================
   Liva Backoffice — GLOBAL responsive layer (2026-07-06)
   Loaded after main.css from inc_header on EVERY page. Desktop above
   1280px is untouched; below that the fixed 1240px skeleton releases,
   and under 900px the chrome reflows for tablets/phones.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Fluid layer — ALL viewports. Legacy pages laid out their main column
   as a fixed centred table (viewcharge/refund/dispute/transfer = 964,
   profile & user forms = 800, booking/finance lists = 760, vendor report
   = 1280/820, billing preview = 850, cookie policy = 700, VAT = 640,
   multilanguage text = 570). Those columns now stretch to the full page
   (or dialog) width. Small card tables (login box, widgets < 500px)
   intentionally keep their size — they are already centred.
   Mail/PDF templates never load this file, so they keep fixed widths.
   --------------------------------------------------------------------- */
table[width="1280"], table[width="964"], table[width="850"],
table[width="820"], table[width="800"], table[width="760"],
table[width="700"], table[width="640"], table[width="570"] {
	width: 100% !important;
	margin-left: auto;
	margin-right: auto;
}

/* on small screens the fluid data grids would crush their columns into
   vertical text; keep a readable floor and let them scroll INSIDE
   .content-body (overflow-x:auto below 1281px) */
@media (max-width: 900px) {
	table[width="1280"], table[width="964"], table[width="850"], table[width="820"] { min-width: 700px; }
}

/* the User Permissions module grid sits in a legacy 20%-label/80%-content
   table, wasting the left fifth of the page; stack the label above the
   grid so the cards are centred and span the full width */
table:has(.perm-grid) > tbody > tr { display: block; }
table:has(.perm-grid) > tbody > tr > td { display: block; width: auto !important; text-align: left !important; }
table:has(.perm-grid) > tbody > tr > td[align="right"] { font-weight: bold; margin: 6px 0 2px; }

/* form controls may carry inline pixel widths — never let them overflow
   their (now fluid) cell; max-width wins over an inline width */
input, select, textarea { max-width: 100%; }

/* images inside content never force a horizontal scrollbar */
.content-body img { max-width: 100%; }

/* jQuery UI dialogs are opened with hardcoded pixel widths (e.g. 1000);
   clamp them to the viewport — backend_lib.js re-centres them */
.ui-dialog { max-width: calc(100vw - 16px) !important; }
.ui-dialog .ui-dialog-content { overflow-x: auto; }

/* ————————————————————————————————————————————————————————————————————————————————————
   HEADER STRIP — keeping the tool icons on screen as the viewport narrows.
   Measured 2026-08-05: at 1512px the row needed 1646px in a 1472px box and the right-most icon
   was simply cut off — no wrap, no scrollbar, just gone. main.css does the continuous part (the
   gaps shrink, the search box shrinks, long names ellipsize, and the timezone <select> no longer
   reserves 191px for an option nobody has selected). These steps do the discrete part.
   ORDER OF SACRIFICE, least useful first. THE RULE: nothing is ever dropped that is the only route
   to a back-office function. Names and preferences go first; the external app shortcuts go before
   the office clocks because they are bookmarks to OTHER applications and cost a bookmark, not a
   screen; every back-office icon — search, notifications, to-dos, settings, account, company,
   theme, language — survives to the bottom of the ladder, because those are the only way in.
   ———————————————————————————————————————————————————————————————————————————————————— */

/* 0. RETIRED — "take it out of the SPACING first" (the step that tightened every header gap
      before anything was dropped). It bought ~50px when the header was one elastic row; it is
      unnecessary now that surplus collects in the search field, AND IT HAD BECOME AN ACTIVE BUG.
   The block read:
       #top      { gap: clamp(10px, 1vw, 20px); }
       #top-info { gap: clamp(8px, 0.85vw, 20px); }
       #top-tools, #top-tools .top-apps { gap: clamp(5px, 0.45vw, 10px); }
   All three were tuned when #top-info was a HORIZONTAL row of four items and every gap in the
   header was elastic. Two of them now do damage rather than nothing:

   1 · #top-info became a two-line COLUMN, so that 8-20px is the gap BETWEEN THE NAME AND THE
       CLOCKS. Measured: 1px apart at 2000px, 12.85px apart at 1512px — the same block 12px taller
       on the narrower screen, which is why deck 1 measured 50px at 2000 and 59.3px at 1512. The
       header's vertical rhythm was a function of viewport width, by accident.
   2 · #top-tools' gap is now the INNER half of a two-level grouping rhythm (6px inside a group,
       19px between groups). Letting it drift to 5px at one width and 10px at another erases the
       distinction the grouping is made of — which is precisely the "undifferentiated run" this
       pass exists to fix.

   The header no longer needs elastic gaps at all: surplus width collects in ONE place that can
   use it (the search field's auto margins), so the gaps can be the fixed values the composition
   was designed around, at every width. */

/* 1. The greeting, but NOT the name. "Welcome..." is 75px of politeness and carries nothing; the
      name it introduces reads perfectly well on its own. */
@media (max-width: 1560px) {
	#top-info .top-welcome-label { display: none; }
}

/* 2. The viewer's own name. The least informative string in the header — they know who they are —
      and it is 90px including its gap. The account menu still shows it. */
@media (max-width: 1470px) {
	#top-info .top-welcome { display: none; }
	/* The chip ellipsizes. 2026-09-23: it was cut to 110px here, and "The Lab · Production" / "The Lab ·
	   Platform" (the view fronts hq.lab / prod.lab) became "The Lab · Produc…" at 1440px — the one word that
	   says which front you are on was the word lost. 150px holds the longest environment + view name. */
	.company-switch .company-switch-label { max-width: 150px; }
}

/* 3. The user-selectable UTC clock. Three clocks is a luxury on a 1280 laptop, and this is the one
      a person chose to ADD — its offset is the only header text that is a preference rather than a
      fact, and the picker is still there the moment the window is widened. */
@media (max-width: 1340px) {
	#top-info .top-clock-utc { display: none; }
	.company-switch .company-switch-label { max-width: 120px; } /* 84px cut the view name too (2026-09-23) */
}

/* 4. The external app shortcuts (ChatGPT / Drive / Gmail / extranet / affiliate portal). All five
      are target="_blank" links to a different application, so the cost of losing them is a
      bookmark; the cost of losing the FR/TH clocks instead is the information two offices run on.
      They come back the moment the window is widened. */
@media (max-width: 1170px) {
	#top-tools .top-apps, #top-tools .top-apps-sep { display: none; }
	/* the rule that CLOSED the app group has nothing to close once the group is gone, and would
	   render as a hairline floating at the cluster's left edge. Selected via the named group, not
	   by position, so adding a sixth group later cannot silently hide the wrong divider. */
	#top-tools .top-apps + .top-sep { display: none; }
}

/* 5. The FR/TH clocks — last, and only just above the point where the whole row wraps (900px,
      below). A wrapped two-row header pushes every page down on exactly the screens with the
      least height to spare. */
@media (max-width: 1020px) {
	#top-info { display: none; }
}

@media (max-width: 1280px) {
	/* release the fixed skeleton — pages shrink instead of side-scrolling */
	#container, #container #nav, #container #content, #container #footer { min-width: 0 !important; }
	#container #content #inner { padding: 12px; }
	/* wide legacy tables scroll INSIDE the page, never break the layout */
	.content-body { overflow-x: auto; }
	input.input, select.input-white-bg, select.input, textarea { max-width: 100%; }
}

@media (max-width: 900px) {
	/* --- header strip: the flex row wraps; welcome/clocks/tools flow onto rows --- */
	#container #top { flex-wrap: wrap; gap: 10px 14px; min-height: 0; }
	/* the identity block loses its zone rule when the row wraps — a vertical divider only means
	   something while the zones are side by side */
	#top-info { flex-wrap: wrap; gap: 6px 16px; white-space: normal; border-right: 0; padding-right: 0; }
	/* wrapped, the search gets its own line and should use it; auto margins would centre a short
	   field in the middle of an otherwise empty row */
	#lv_gsearch_form { margin-inline: 0; max-width: 100%; flex: 1 1 100%; }
	/* ⛔ flex MUST go back to 1 1 auto + min-width:0 here. On the desktop row the cluster is
	   `0 0 auto` so that it cannot absorb surplus (that is the search's job) — but `0 0 auto`
	   also means it cannot SHRINK, and a phone needs it to shrink before it can wrap. Measured at
	   390px without this line: document.scrollWidth 547 against a 390 viewport, 30 elements off
	   screen. The desktop rule and the phone rule want opposite things from the same property,
	   which is exactly what a breakpoint is for. */
	#top-tools { margin-left: 0; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }

	/* --- main nav: pills wrap onto rows, slightly tighter --- */
	#container #nav a, #container #nav a:hover, #container #nav a.over, #container #nav a.over:hover { padding: 8px 12px; }
	ul#top_main_menu li ul.nav-dropdown { border-radius: 10px; }

	/* --- heading bars: fixed-height background images give way --- */
	.bar-heading, .bar-heading-left, .bar-heading-right, .bar-heading-center { height: auto !important; min-height: 0 !important; background-image: none !important; }
	.bar-heading ul { display: flow-root; }
	.bar-heading ul li { float: none !important; display: block; text-align: left !important; padding: 2px 0 !important; }

	/* --- content: forms and lists breathe --- */
	#container #content #inner { padding: 8px; }
	.content-body table td { word-break: break-word; }
	.hr-anchor-nav ul { flex-wrap: wrap; }

	/* --- the notification bell's dropdown stays on screen (HQ 100274) ---
	   main.css hangs .notif-panel (340px) off the END of the bell. On the desktop row the bell sits at
	   the right, so that works; once the header wraps the bell lands mid-row (measured at 390px: bell
	   at x=194, panel from x=-121 to 221 — a third of it off the left edge, title and "Mark all read"
	   cut). Here the panel hangs from the HEADER instead: #top becomes its positioning box, the panel
	   opens directly under the header, flush with its end edge, and never wider than the header less
	   an 8px gutter each side. Same pattern as the environment menu's phone rule in main.css
	   (anchor to a box that is on screen, cap at the viewport). Logical properties only, so an RTL
	   page mirrors. Desktop (>900px) is untouched.
	   ⚠ !important on #notif_bell is required, not a habit: the span's position:relative is an inline
	   style in inc_topmenu.php, which no selector can outrank otherwise. Its two badges anchor to the
	   inner <a>, which keeps its own position:relative, so they do not move. */
	#container #top { position: relative; }
	#notif_bell { position: static !important; }
	#notif_panel.notif-panel { top: 100%; inset-inline-start: auto; inset-inline-end: 8px; width: min(340px, calc(100% - 16px)); box-sizing: border-box; }
}

@media (max-width: 600px) {
	/* phone: form label/value pairs stack (legacy 20%/80% table forms) */
	.content-body table tr td[width="20%"], .content-body table tr td[width="80%"] { display: block; width: 100% !important; text-align: left !important; }
	/* Unscoped for the same reason as the base rule in main.css — a modern page's footer must
	   centre on a phone too. Equal specificity to that base rule, and this file loads after it,
	   so the later rule wins; on legacy pages it still overrides via the cascade. */
	#footer { text-align: center; }
}