/* =====================================================================
   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; }

@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 16px; }
	#top-info { flex-wrap: wrap; gap: 6px 16px; white-space: normal; }
	#top-tools { margin-left: 0; flex-wrap: wrap; }

	/* --- 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; }
}

@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; }
	#container #footer { text-align: center; }
}