/* =====================================================================
   Liva Back Office — GLOBAL modernization skin (2026-07-08)
   Loaded on EVERY page (after main.css/responsive.css). Maps the shared
   LEGACY markup patterns (.content-body, .txt-header-blue, .input,
   .black-button, .bar-heading, list tables, form sections) onto the
   modern .lt-* design tokens defined in backoffice.css, so the ~147
   not-yet-rebuilt pages adopt one consistent, modern look without a
   per-page rewrite. CONSERVATIVE: restyles chrome/typography/controls,
   does NOT restructure legacy layout tables.

   Tokens (mirror backoffice.css): brand #0089CF, link #0b6aa2,
   text #22313f / heading #16242f, muted #8a97a5, borders #e3e8ee.

   Pages already rebuilt on .lt-mod load backoffice.css AFTER this file
   and win; container-level rules are also explicitly neutralized inside
   .lt-mod / .rsv below so nothing is double-styled.
   ===================================================================== */

/* ---- content panel: the legacy .content-body becomes a modern card ---- */
#container #content #inner .content-body {
	background: #fff;
	border: 1px solid #e3e8ee;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(16, 42, 67, .04);
	padding: 20px 22px;
	margin-bottom: 16px;
}
/* pages already modernized on .lt-mod / .rsv manage their own panels */
.lt-mod .content-body, .rsv .content-body {
	background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0;
}

/* ---- page / section headings ---- */
#container .txt-header-blue,
#container .txt-header-blue:visited,
a.txt-header-blue, a.txt-header-blue:visited {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #16242f;
	line-height: 1.3;
}
#container .section_title { font-size: 15px; font-weight: 700; color: #16242f; }
#container .section_label { color: #5c6b78; font-weight: 500; }
/* in-content links pick up the brand link colour (menu/header untouched) */
/* .faq-btn joins the button allow-list: an <a class="faq-btn faq-btn--primary"> is a BUTTON,
   and this rule (3 ids + the :not() classes) outranks .faq-btn--primary's own color:#fff, so
   the label rendered #0b6aa2 on the #0091d5 button — blue on blue, ~2:1 contrast. The same
   <button> was white; only the anchor form was hit. The light-mode twin at the bottom of this
   file already excludes [class*="btn"], so it never had the bug — this line is the one that
   predates that pattern. Excluding here rather than escaping with !important in faq.css, so
   any future anchor-as-button in the FAQ centre is right by default. */
#container #content #inner .content-body a:not(.black-button):not(.white-button):not(.lt-btn):not(.faq-btn) { color: #0b6aa2; }

/* ---- form controls: modern fields (border/radius/focus ring) ---- */
#container input.input,
#container input.input-white-bg,
#container select.input,
#container select.input-white-bg,
#container textarea.input,
#container .content-body input[type="text"],
#container .content-body input[type="password"],
#container .content-body input[type="number"],
#container .content-body input[type="email"],
#container .content-body select,
#container .content-body textarea {
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #22313f;
	background: #fff;
	border: 1px solid #d3dbe2;
	border-radius: 8px;
	padding: 7px 10px;
	line-height: 1.3;
	box-sizing: border-box;
	max-width: 100%;
}
#container input.input:focus,
#container input.input-white-bg:focus,
#container select.input:focus,
#container select.input-white-bg:focus,
#container textarea.input:focus,
#container .content-body input:focus,
#container .content-body select:focus,
#container .content-body textarea:focus {
	outline: none;
	border-color: #0089CF;
	box-shadow: 0 0 0 3px rgba(0, 137, 207, .12);
}
/* don't touch controls already styled inside rebuilt pages */
.lt-mod input, .lt-mod select, .lt-mod textarea,
.rsv .rsv-filter input, .rsv .rsv-filter select { box-shadow: none; }

/* ---- buttons: brand primary + ghost, no legacy gradient/sprite ---- */
#container input.black-button,
#container a.black-button,
#container button.black-button,
#container .black-button {
	background: #0089CF !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	height: auto !important;
	padding: 8px 16px !important;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
	line-height: 1.3;
	display: inline-block;
}
#container input.black-button:hover,
#container a.black-button:hover,
#container button.black-button:hover,
#container .black-button:hover { background: #0a76b0 !important; }

#container input.white-button,
#container a.white-button,
#container button.white-button,
#container .white-button {
	background: #fff !important;
	background-image: none !important;
	border: 1px solid #cfd8df !important;
	border-radius: 8px !important;
	height: auto !important;
	padding: 8px 16px !important;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #33424f !important;
	text-decoration: none !important;
	cursor: pointer;
	line-height: 1.3;
	display: inline-block;
}
#container input.white-button:hover,
#container a.white-button:hover,
#container button.white-button:hover,
#container .white-button:hover { background: #f2f6f9 !important; }

/* ---- heading bar: drop the legacy sprite images, clean spacing ---- */
#container .bar-heading,
#container .bar-heading-left,
#container .bar-heading-right,
#container .bar-heading-center {
	background-image: none !important;
	height: auto !important;
	min-height: 0 !important;
}
#container .bar-heading-center { padding: 4px 0 !important; }

/* ---- data LIST tables (class="list") get a modern, readable look.
   Scoped to .content-body table.list so legacy LAYOUT tables are untouched. */
#container #content #inner .content-body table.list {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}
.content-body table.list th,
.content-body table.list td { text-align: left; vertical-align: middle; }
.content-body table.list thead th,
.content-body table.list tr.list-heading td,
.content-body table.list tr.highlight1 td,
.content-body table.list th {
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #8a97a5;
	background: #f7fafc;
	border-bottom: 2px solid #edf1f5;
}
.content-body table.list td {
	padding: 11px 12px;
	font-size: 13px;
	color: #22313f;
	border-bottom: 1px solid #f0f3f6;
}
.content-body table.list tbody tr:hover td,
.content-body table.list tr:hover td { background: #f6fafd; }

/* ---- CMS edit/add form header (legacy .bar-heading) — modern, sprite-free.
   Markup untouched (all JS hooks preserved); this only restyles the chrome. ---- */
#container .bar-heading-action { font-size: 20px; font-weight: 700; color: #16242f; }
#container .bar-heading-breadcrumb { color: #c7d0d8; font-size: 12px; margin-top: 3px; }
#container .bar-heading-breadcrumb .nav-item { font-weight: 600; color: #7a8794; text-decoration: none; }
#container .bar-heading-breadcrumb .nav-item:hover,
#container .bar-heading-breadcrumb .nav-item.scrolled { color: #0089CF; }
#container .bar-heading-title { font-size: 18px; font-weight: 700; color: #16242f; }
#container .bar-heading-subtitle { font-size: 12.5px; color: #7a8794; }

/* ---- misc legacy accents to the brand ---- */
#container .required { color: #c0392b; }

/* ---- standardized page hierarchy: main-menu-name eyebrow above the page title.
   Shared with .lt-page-head (backoffice.css); defined here too so it renders on
   legacy bar-heading pages, which load the global skin but not backoffice.css. ---- */
/* [Note]:--lv-chrome-label, not the old literal #7a8b99 (bug 1728) — 3.511:1 on white, under AA.
   This copy is the one legacy bar-heading pages get, and several of them do NOT load theme.css, so
   the fallback literal is what actually paints there and it must be the AA-safe value, not the
   failing one. See the token's note in css/theme.css for the measurements. */
.lt-eyebrow { font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--lv-chrome-label, #5f6e7e); margin:0 0 2px; line-height:1.3; }
#container .bar-heading .lt-eyebrow { display:block; margin:0 0 3px; }

/* ---- page-intro TITLE: the title immediately after the menu eyebrow adopts the
   modern lt-page-head h1 look (black / 22px / bold), so legacy blue ".txt-blue"
   intros on bar-heading pages match the CMS Dashboard reference. Scoped to the
   title that follows an eyebrow, so section-header .txt-blue is untouched. ---- */
#container .lt-eyebrow + .txt-blue,
#container .lt-eyebrow + li.txt-blue {
	color:#16242f !important;
	font-size:22px !important;
	font-weight:700 !important;
	line-height:1.25 !important;
	float:none !important;
	display:block !important;
}
/* keep the grey menu eyebrow on its own line, above the title (it sits inside the
   legacy bar-heading <ul> alongside floated <li>s). */
#container .bar-heading .lt-eyebrow { display:block !important; float:none !important; clear:both !important; width:100%; }

/* ---- ONE page-intro size everywhere: normalize every header component's title to
   the CMS reference 22px and every eyebrow to 11px, regardless of module
   (rsv/lgl/rpt use 24px/10px; CMS/bar-heading use 22px/11px). Keeps their colours/
   weights; only the size is unified so every page's intro is identical. ---- */
#container .rsv-head-title, #container .lgl-head-title, #container .rpt-head-title { font-size:22px !important; }
#container .rsv-head-eyebrow, #container .lgl-head-eyebrow, #container .rpt-head-eyebrow { font-size:12px !important; }
/* size-normalize the CMS form title (bar-heading-action) + bar-heading-title to 22px too */
#container .bar-heading-action, #container .bar-heading-title { font-size:22px !important; }
/* eyebrow contrast on the colored affiliate hero (grey is invisible on the colour band) */
#container .affhub-hero .lt-eyebrow { color:rgba(255,255,255,.82) !important; }
/* [Note]:This one carries !important, so it would have DEFEATED the token fix above on the one
   surface it covers (bug 1728). affiliatesetting/index.php sets .on-light precisely because that
   content-body is WHITE — where #7a8b99 is 3.511:1. Same token, same reason. */
#container .affhub-hero.on-light .lt-eyebrow { color:var(--lv-chrome-label, #5f6e7e) !important; }

/* left-align the page intro flush with the content below (the legacy bar-heading
   <ul> carried a 10px indent; the header components sometimes center). */
#container .bar-heading-center ul { margin:0 !important; padding:0 !important; text-align:left !important; }
#container .bar-heading-center, #container .bar-heading-left, #container .bar-heading-right { text-align:left !important; }
#container .lt-eyebrow, #container .lt-eyebrow + .txt-blue, #container .lt-page-head, #container .rsv-head, #container .lgl-head, #container .rpt-head { text-align:left !important; }


/* =====================================================================
   ONE font across the entire back office: force Roboto (the branding
   typeface) everywhere, normalizing stray Arial / Helvetica Neue / Kanit
   declarations. Monospace is preserved for code/pre. ===================== */
body, body * { font-family: 'Roboto', Arial, Helvetica, sans-serif !important; }
body code, body pre, body kbd, body samp, body tt,
body .mono, body [class*="mono"], body [class*="code"] { font-family: 'SFMono-Regular', Menlo, Consolas, monospace !important; }


/* ===== section-nav available globally (hand-authored .lt-section-nav bars — e.g. the
   Products dashboard section jumps — match the shared partial; .scrolled = active) ===== */
#container .lt-section-nav { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:8px 10px; background:#f4f7fa; border:1px solid #e3e9ef; border-radius:8px; }
#container .lt-section-nav .lt-section-nav-label { font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#8a97a5; margin-right:6px; }
#container .lt-section-nav a.lt-section-tab { display:inline-block; padding:6px 15px; border-radius:6px; font-size:13px; font-weight:600; color:#33475b !important; text-decoration:none !important; border:1px solid transparent; }
#container .lt-section-nav a.lt-section-tab:hover { background:#e7eef5; }
#container .lt-section-nav a.lt-section-tab.is-active, #container .lt-section-nav a.lt-section-tab.scrolled { background:#0b6aa2 !important; color:#fff !important; }
/* left-align the centered CMS-form title (bar-heading-title/subtitle use width:80% + margin:auto) */
#container .bar-heading-title, #container .bar-heading-subtitle { width:auto !important; margin:0 !important; text-align:left !important; }
#container .bar-heading-center { text-align:left !important; }

/* ================= UNIFIED TYPOGRAPHY — global token reset (2026-07-15) =================
   ONE type scale + palette across the whole back office. SIZE rules are theme-agnostic;
   COLOUR rules are scoped to light mode (`:root:not([data-theme="dark"])`) so dark mode
   (theme.css) is untouched. Buttons / pills / badges / nav tabs / inverted contexts are
   excluded so semantic & on-colour text survives. Tokens: text #22313f, heading #16242f,
   link #0b6aa2, brand #0089CF. ========================================================= */

/* --- type scale (size/weight only — identical in both themes) --- */
#container #content #inner .content-body { font-size:13px; }
#container #content #inner .txt-header-blue,
#container #content #inner .content-body h2,
#container #content #inner .lt-card > h2 { font-size:16px !important; font-weight:700 !important; }

/* --- palette (light mode only; dark mode keeps theme.css) --- */
:root:not([data-theme="dark"]) #container #content #inner { color:#22313f; }
:root:not([data-theme="dark"]) #container #content #inner .txt-header-blue,
:root:not([data-theme="dark"]) #container #content #inner .content-body h2,
:root:not([data-theme="dark"]) #container #content #inner .lt-card > h2 { color:#16242f !important; }
:root:not([data-theme="dark"]) #container #content #inner .content-body a:not(.lt-btn):not(.black-button):not(.white-button):not(.lt-section-tab):not(.nav-item):not([class*="pill"]):not([class*="btn"]):not([class*="badge"]):not([class*="chip"]) { color:#0b6aa2 !important; }

/* Remove ALL navigation badges — main menu (.menu-alert), submenu (.menu-count +
   .menu-alert pending pills), and 3rd-level section-nav (the badge span appended
   inside a tab). The notification-bell badge (.notif-badge, a header tool) is kept. */
.menu-alert:not(.menu-alert-partner):not(.menu-action), .menu-count { display:none !important; }

/* EXCEPTION (user request 2026-08-03): partner-application pills come back.
   These are the "# of new operator / travel agent / affiliate / white label reseller
   applications awaiting review" counts on Contacts and its sub-items — the badge half of
   the same CEO ask that migration 790 implemented the notification half of.
   The blanket rule above (2026-07-15) is otherwise LEFT INTACT deliberately: it was a
   considered decision to drop the blue record-count pills, the SEO pills and the
   section-nav badges, and nobody asked for those back. So this narrows that rule to one
   opt-in class rather than reverting it — any badge that wants to survive must now say so.
   NOTE the pairing with the hide rule above: .menu-alert-partner carries BOTH classes, so
   without the :not() exclusion the !important hide would still win on specificity. */
.menu-alert.menu-alert-partner { display:inline-block !important; }

/* EXCEPTION 2 (user request 2026-08-04): HUMAN-ACTION counts. "Add a nav badge # for every human
   action needed within this menu category" — the red # on a main menu, its dropdown entries and
   their fly-out pages, counting ONLY items whose sole remaining step is a person deciding (an AI
   draft awaiting Approve/Reject, an image suggestion awaiting a decision). Not a backlog: how much
   work EXISTS keeps its own amber SEO pill and stays hidden, because a number that can never reach
   zero is a number nobody reads. Same shape as the partner exception above — an opt-in class, so
   the 2026-07-15 blanket rule stays intact for everything that did not ask to come back. The
   element carries BOTH classes, hence the :not() in the hide rule (specificity alone would lose to
   its !important). Counts come from Common\MenuCount_Model::getCmsActionCounts(). */
.menu-alert.menu-action { display:inline-block !important; }
#container .lt-section-nav a.lt-section-tab span { display:none !important; }