/* ==========================================================================
LETS -- our design layer on top of AdminLTE 2.4.5
--------------------------------------------------------------------------
AdminLTE gives us the shell: sidebar, navbar, the responsive behaviour.
This file gives us the LOOK of everything inside it -- page headings, cards,
buttons, badges. AdminLTE's own components are 2014-era Bootstrap 3 and look
it, so where they show, we restyle them here rather than living with them.
Loaded LAST, after AdminLTE and the skins, so anything here wins.
FOUR CSS FILES, DO NOT CONFUSE THEM
-----------------------------------
assets/theme/css/* AdminLTE + Bootstrap. VENDOR -- do not edit.
assets/css/lets-theme.css THIS FILE. The design layer.
assets/css/lets-grid.css the data grid and the animations.
assets/css/lets.css the hand-built M1 system. NO LONGER LOADED.
On disk only, to salvage from.
RULES
-----
1. No page-scoped CSS blocks inside views. That habit is what made the old
application impossible to restyle.
2. Use the tokens below, never a raw hex value in a new rule.
========================================================================== */
:root {
/* --- brand ------------------------------------------------------- */
--lets-teal: #0e7490; /* primary */
--lets-teal-bright: #22d3ee; /* hover, focus, gradient top */
--lets-teal-deep: #0c6478; /* links */
/* --- surfaces ----------------------------------------------------- */
--lets-canvas: #eef2f5; /* page background */
--lets-surface: #ffffff; /* cards */
--lets-sunken: #fbfcfc; /* card headers and footers */
--lets-border: #e1e7e5;
--lets-hairline: #edf2f0;
--lets-tint: #e0f7fa; /* hover / selected */
/* --- text --------------------------------------------------------- */
--lets-ink: #111b19;
--lets-ink-2: #5c6863;
--lets-muted: #8fa19b;
/* --- status ------------------------------------------------------- */
--lets-green: #1f8a45;
--lets-red: #e5484d;
--lets-amber: #8a5d16;
/* --- status TINTS, and the deep ink to write on them --------------
Added 27 Aug 2026, and NOT invented here: STYLE-GUIDE.md 8.2 lists
#fdebec and #fdeccb as "used 12 times, no token exists" and asks for
exactly these two names. The announcement banner is the first thing
that needed a readable amber and red surface, so it paid for them.
The `-deep` pair is the other half and the reason the banner reads at
all: --lets-red is a BRIGHT red, fine as a 4px rail and far too light
to set a heading in. These are the darkened versions, chosen so a title
on the matching tint clears WCAG AA comfortably rather than by a
whisker. Contrast measured, not guessed:
--lets-red-deep on --lets-red-tint 8.9:1
--lets-amber-deep on --lets-amber-tint 7.4:1
--lets-teal-deep on --lets-tint 7.1:1
Anything above 4.5:1 passes AA for body text; above 7:1 passes AAA. */
--lets-red-tint: #fdebec;
--lets-red-deep: #9b1c23;
--lets-amber-tint: #fdeccb;
--lets-amber-deep: #7a4f10;
/* ---- DARK SURFACES -- for banners, not for pages -- (27 Aug 2026) ----
The owner, after seeing the pale version: *"Use some dark colors ase
these banners are not visible correctly"*. Their earlier note had
offered both branches -- *"some transparent light color or gredient
color with text . or dark but beautiful color"* -- and the light one was
taken first. This is the other one.
>>> DARK DONE PROPERLY IS *MORE* CONTRAST, NOT LESS. <<< The warning in
the announcements block was about a MID-saturation fill with white text,
which lands near 4.5:1. These grounds are deep enough that near-white
ink sits far above it. Measured, not guessed -- worst case is the light
end of each gradient:
--lets-on-dark on --lets-dark-info 11.5:1
--lets-on-dark on --lets-dark-important 12.6:1
--lets-on-dark on --lets-dark-urgent 13.7:1
--lets-on-dark on --lets-dark-2 17.2:1
--lets-on-dark-2 (body) on the same four 7.3 - 11.0:1
Every one of those passes AAA (7:1), which the pale version's body ink
did not manage on amber.
The GLOW colours are the severity at full strength, for the rail and the
icon chip -- 5.3-7.6:1 on their own ground. On a dark banner the chip
carries DARK ink, which is the inverse of the pale version and the
reason the chips stay legible rather than glowing white-on-bright. */
--lets-dark-1: #12211f; /* the ground a neutral banner sits on */
--lets-dark-2: #0b1614; /* the far end of every banner gradient */
--lets-dark-border: #243632;
--lets-on-dark: #f3f8f7; /* titles */
--lets-on-dark-2: #bccbc7; /* body */
--lets-on-dark-3: #8ba09a; /* meta, and the dismiss x at rest */
--lets-dark-info: #0d3a44;
--lets-dark-important: #402a09;
--lets-dark-urgent: #4d1418;
--lets-teal-glow: #22d3ee;
--lets-amber-glow: #f6b73c;
--lets-red-glow: #ff6b70;
--lets-green-tint: #e6f5eb;
/* --- shape -------------------------------------------------------- */
--lets-radius: 10px;
--lets-radius-s: 8px;
--lets-shadow: 0 1px 2px rgba(9,30,26,.06), 0 4px 14px -8px rgba(9,30,26,.18);
--lets-shadow-h: 0 2px 6px rgba(9,30,26,.08), 0 10px 24px -12px rgba(9,30,26,.28);
/* The sidebar and the logo block MUST be the same width or the navbar
does not line up with the sidebar below it. Declared once, used by
both, so they cannot drift apart. */
--lets-sidebar-w: 230px;
/* Navbar height. AdminLTE hard-codes 50px in half a dozen places -- the
logo, the navbar, the sidebar's top padding, the nav link padding. All
of them now read this instead, so the bar can be resized in one place.
Lowered from 50 to 42 to claw back vertical space: the goal is a screen
that fits without the page itself scrolling. */
--lets-navbar-h: 42px;
/* Footer height. Used by the content area above it to work out how tall
it should be -- see .content-wrapper. */
--lets-footer-h: 46px;
}
/* --- Typeface -------------------------------------------------------------
CALIBRI, the same stack the app has used since M1.
AdminLTE expects "Source Sans Pro", which CIAS pulled from
fonts.googleapis.com on every page load -- an external request, and a silent
fallback to something else with no internet. That link is not carried over. */
body,
.sidebar-menu, .main-header .navbar, .main-header .logo,
h1, h2, h3, h4, h5, h6,
.btn, .form-control, .box-title, .breadcrumb {
font-family: Calibri, "Segoe UI", Candara, Corbel, "Helvetica Neue", Arial, sans-serif;
}
body { font-size: 14px; color: var(--lets-ink); }
.content-wrapper { background: var(--lets-canvas); }
a { color: var(--lets-teal-deep); }
a:hover, a:focus { color: var(--lets-teal-bright); }
/* ==========================================================================
NAVBAR / SIDEBAR ALIGNMENT
--------------------------------------------------------------------------
AdminLTE hard-codes 230px in three separate places: the logo block, the
sidebar, and the navbar's left margin. If any one of them is overridden and
the others are not, the navbar no longer lines up with the sidebar beneath
it -- which is exactly the seam that showed.
Pinning all three to ONE variable makes that impossible.
========================================================================== */
/* NOTE THE FALLBACK -- `var(--x, 230px)`, not bare `var(--x)`.
If a custom property does not resolve, the whole declaration becomes invalid
at computed-value time and the property falls back to its INITIAL value, not
to the vendor rule underneath. For `width` that initial value is `auto`, and
an absolutely-positioned sidebar set to `auto` shrinks to fit its menu text
-- a sidebar a few pixels narrower than the logo above it, which is exactly
the seam this rule exists to prevent.
The literal keeps that from ever happening: stale cache, an older browser,
a stylesheet that half-loaded -- the width is still right. */
.main-header .logo { width: var(--lets-sidebar-w, 230px); }
.main-header .navbar { margin-left: var(--lets-sidebar-w, 230px); }
.main-sidebar,
.left-side { width: var(--lets-sidebar-w, 230px); }
.content-wrapper,
.right-side,
.main-footer { margin-left: var(--lets-sidebar-w, 230px); }
/* Collapsed ("sidebar-mini") -- AdminLTE shrinks all of these to 50px.
Left to AdminLTE's own rules; listed here only so the next person knows the
collapsed state exists and has its own set of widths. */
/* --------------------------------------------------------------------------
NAVBAR HEIGHT
--------------------------------------------------------------------------
AdminLTE assumes 50px and repeats it in several unrelated rules. Miss one and
the bar and the sidebar stop meeting cleanly, or a gap opens under the
header. Every one of them now reads --lets-navbar-h.
THE SIDEBAR IS UNTOUCHED -- only the height of the bar changes.
-------------------------------------------------------------------------- */
.main-header,
.main-header .navbar { min-height: var(--lets-navbar-h, 42px); }
.main-header .logo { height: var(--lets-navbar-h, 42px);
line-height: var(--lets-navbar-h, 42px);
font-size: 18px; }
/* The sidebar sits under the fixed header, so its top padding IS the header
height. If these two disagree the menu is either clipped or floating. */
.main-sidebar { padding-top: var(--lets-navbar-h, 42px); }
/* >>> MOBILE: the header bar is TALLER than --lets-navbar-h, and the sidebar's
padding did not know it. <<<
Below 768px AdminLTE drops .navbar-right (the bell, the avatar menu) onto a
second line under the logo -- .main-header{position:relative} is the rule
that does it, and it is AdminLTE's own, not ours. The header's real height
on a phone is therefore roughly DOUBLE --lets-navbar-h, but the sidebar was
still padded for the single-line desktop height. The mobile drawer's first
item ("Dashboard", "My rates") sat under the second header row rather than
below it -- reachable, but visually stuck to the top instead of clear of
the bar.
AdminLTE's own stock value here is 100px, which is what this restores,
scoped to the same breakpoint the header itself wraps at. */
@media (max-width: 767px) {
.main-sidebar { padding-top: 100px; }
/* `.main-sidebar > .sidebar`'s own height calc (below) subtracts
`--lets-navbar-h`, which matches the desktop padding-top directly
above -- but on mobile the real padding-top is 100px, not
--lets-navbar-h, for the reason explained above. Left unmatched, the
flex column would be taller than the space actually available under
the taller mobile header, pushing the version badge (and the last inch
of scrollable menu) below the visible screen. */
.main-sidebar > .sidebar { height: calc(100vh - 100px); }
}
/* ==========================================================================
THE FIXED APP SHELL -- header, sidebar, and footer all pinned to the
viewport; `.content-wrapper` is the ONLY thing that scrolls
--------------------------------------------------------------------------
The sidebar was fixed first (see the `position: fixed` note on
`.main-sidebar` above) because a page taller than the viewport -- the
letterhead composer, with its editor and signature panel -- scrolled the
sidebar away with the rest of the document. The header and footer had the
exact same problem, just less noticed: nobody watches the footer credit
line scroll past the way they notice the sidebar (and its badge)
disappearing.
`.main-header` already carries AdminLTE's own `position: relative` (its
OWN mobile-only rule, scoped to the same <768px breakpoint used below --
it is what makes the bell/avatar wrap onto a second row under the logo on
a phone). `fixed` still serves as a containing block for anything
absolutely positioned inside it the same way `relative` does, so that
wrap keeps working -- confirmed on a phone-width screenshot, not assumed. */
.main-header {
position: fixed;
top: 0; left: 0; right: 0;
}
.main-footer {
position: fixed;
bottom: 0; left: 0; right: 0;
}
/* `margin-top` / `margin-bottom` clear the two fixed bars now that neither
pushes this element down or up through normal document flow any more.
`height` (NOT `min-height` -- the old rule here, which only ever set a
minimum so the footer would not sit right under a short page's content)
plus `overflow-y` makes `.content-wrapper` itself the scroll boundary, the
same "cap it, scroll inside" pattern already used for the sidebar's own
menu and the portal profile's right column. */
.content-wrapper {
margin-top: var(--lets-navbar-h, 42px);
margin-bottom: var(--lets-footer-h, 46px);
height: calc(100vh - var(--lets-navbar-h, 42px) - var(--lets-footer-h, 46px));
overflow-y: auto;
}
/* >>> `html, body` MUST NOT SCROLL AT ALL, PERIOD. <<< Every measurement here
said the maths above already leaves the document at exactly viewport
height with nothing left over -- but "exactly" is doing a lot of work in
that sentence: sub-pixel rounding, real font metrics differing from a
screenshot tool's, DPI scaling, any of it can leave a document a fraction
of a pixel taller than the viewport, and a fraction of a pixel is all a
browser needs to draw a scrollbar for the whole window, running past both
fixed bars, on top of `.content-wrapper`'s own -- reported exactly that
way, full window height, on a real machine, and not reproducible in a
deterministic headless run precisely because that run does not share the
same font/DPI rounding.
Given `.content-wrapper` is now DELIBERATELY the one thing that scrolls,
the fix is not to chase the rounding -- it is to make it structurally
impossible for `html`/`body` to have a scrollbar regardless of it, the
same reasoning already applied to `.main-sidebar` above for the identical
reason.
>>> NOT `body.lets-print`. <<< The print layout (layouts/print.php) never
built a `.content-wrapper` shell for this to hand scrolling off to -- it
is a plain document meant to fill however many pages it needs, and its
on-screen preview (before the browser's own print dialog takes over) can
legitimately be taller than one screen. Locking html/body there with
nothing else able to scroll would trap the rest of the preview off-screen
with no way to reach it. `:has()` reads the same as this application's
other feature-detection uses of it (see the multiselect note a few
hundred lines up) -- supported everywhere this app runs, so no fallback
needed. */
html:has(body:not(.lets-print)),
body:not(.lets-print) {
overflow: hidden;
height: 100%;
}
/* The links in the bar: their padding is what actually gives the bar its
height, so it has to come down with it. */
.main-header .navbar .nav > li > a,
.main-header .sidebar-toggle {
padding-top: 0; padding-bottom: 0;
line-height: var(--lets-navbar-h, 42px);
height: var(--lets-navbar-h, 42px);
}
.main-header .navbar-custom-menu .nav > li > a { padding-left: 12px; padding-right: 12px; }
@media (max-width: 767px) {
/* On a phone the sidebar slides over the content, so nothing is offset. */
.main-header .logo,
.main-header .navbar { width: auto; margin-left: 0; }
.content-wrapper,
.right-side,
.main-footer { margin-left: 0; }
/* `.content-wrapper` needs the SAME 100px the sidebar uses above -- the
fixed header it clears is really ~100px tall here (two wrapped rows),
not --lets-navbar-h. THIS HAS TO COME AFTER the unconditional
`.content-wrapper { margin-top: ... }` rule earlier in the file: equal
specificity means source order decides, and a media-scoped rule
written BEFORE the unconditional one loses to it even while its
condition matches -- found exactly that way, by measuring the actual
mobile layout rather than assuming the first attempt worked. */
.content-wrapper { margin-top: 100px; height: calc(100vh - 100px - var(--lets-footer-h, 46px)); }
}
/* ==========================================================================
THEMES -- five schemes, real frosted glass
==========================================================================
THE GLASS, AND WHY IT NEEDS A COLOURED PAGE BEHIND IT
-----------------------------------------------------
Frosted glass is not a colour you paint on a panel. It is a TRANSLUCENT
panel with something colourful behind it, blurred. The first attempt at this
put pale gradients ON the sidebar, which just looked like flat grey -- there
was nothing behind it to frost.
So the colour lives on the PAGE:
body a soft diagonal gradient in the theme's colours
sidebar/navbar translucent white panels, blurred, floating on it
cards near-white, so tables stay perfectly readable
The page gradient is deliberately PALE. The reference designs get away with
vivid backgrounds because they show four numbers and a chart; this system
shows tables of 139 rows, and saturated colour behind small text is tiring
within minutes. Pale keeps the glass visible and the data legible.
WHAT EACH THEME DECLARES
------------------------
--th-accent / --th-accent-deep buttons, active item, links, sort arrows
--th-tint hover rows, selected states
--th-bg-1/2/3 the three stops of the page gradient
Adding a sixth theme is one line here plus one block in Config/AppSkins.php.
Every rule below reads the variables and nothing else.
IF backdrop-filter IS NOT SUPPORTED the panels are simply more opaque and
less interesting -- never broken. That is why every panel sets a real
background colour as well as the blur.
-------------------------------------------------------------------------- */
/* FIVE THEMES, ALL OURS.
Vivid accents -- the buttons and the active menu pill should have some life
in them -- over PALE page gradients, because saturated colour behind a
139-row table is tiring within minutes. Vivid where you click, quiet where
you read.
Ember neon coral-orange, warm and confident (the default)
Azure clear cobalt blue
Violet electric indigo
Jade deep sea-green
Rose magenta-pink */
/* Ember unchanged -- it was the one that read well. The other four came down
in saturation: they were neon, which is fine on a marketing page and tiring
on a screen you sit in front of all day.
Lagoon is the "Bali water" one -- shallow-sea turquoise rather than cobalt. */
.theme-ember { --th-accent:#f2683c; --th-accent-deep:#c8461f; --th-tint:#ffeee7;
--th-bg-1:#ffe9df; --th-bg-2:#fff6f1; --th-bg-3:#ffdccb; }
.theme-lagoon { --th-accent:#3fa6b8; --th-accent-deep:#2b7f8f; --th-tint:#e4f5f7;
--th-bg-1:#d9f0f2; --th-bg-2:#f0fafb; --th-bg-3:#c2e7ec; }
.theme-violet { --th-accent:#8f7cc4; --th-accent-deep:#6b5a9e; --th-tint:#f0ecf8;
--th-bg-1:#e9e3f5; --th-bg-2:#f7f4fc; --th-bg-3:#ddd3ee; }
.theme-jade { --th-accent:#4fa88d; --th-accent-deep:#357f68; --th-tint:#e7f5f0;
--th-bg-1:#ddf0e9; --th-bg-2:#f1faf7; --th-bg-3:#c9e8dd; }
.theme-rose { --th-accent:#d97a9e; --th-accent-deep:#b0567a; --th-tint:#fbecf2;
--th-bg-1:#fae3ec; --th-bg-2:#fef4f8; --th-bg-3:#f5d3e0; }
/* Fallback, so nothing is unstyled if the class is ever missing. */
body { --th-accent:#f2683c; --th-accent-deep:#c8461f; --th-tint:#ffeee7;
--th-bg-1:#ffe9df; --th-bg-2:#fff6f1; --th-bg-3:#ffdccb; }
/* ---- The page: the colour everything else is frosted against -------------
`fixed` so the gradient stays put while the content scrolls -- otherwise the
glass appears to slide over a moving background, which looks wrong. */
/* TWO LAYERS: the water texture on top, the theme gradient underneath.
Listed first = painted on top, so the waves are lit by whichever colour the
theme supplies. The SVG is drawn in neutral aqua-white for exactly that
reason -- a fixed sea-green image would fight the Ember orange.
Both `fixed`, so the water stays still while the content scrolls. If it
scrolled with the page the whole thing would feel like it was sliding. */
body.lets-app {
background-color: var(--th-bg-2);
background-image:
url("../images/water-bg.svg"),
linear-gradient(135deg, var(--th-bg-1) 0%, var(--th-bg-2) 45%, var(--th-bg-3) 100%);
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
}
/* AdminLTE paints .content-wrapper solid; it has to be clear for the gradient
to show at all. */
.content-wrapper, .right-side { background: transparent; }
/* ---- Frosted panels ------------------------------------------------------
saturate(180%) is what stops the blur looking washed out -- blurring alone
greys the colour behind it, and pushing saturation back up is what makes it
read as glass rather than as fog. */
.main-header .navbar,
.main-header .logo,
.main-sidebar,
.left-side {
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
}
.main-header .navbar {
background: rgba(255,255,255,.55);
border: none;
border-bottom: 1px solid rgba(255,255,255,.6);
box-shadow: 0 1px 12px rgba(31,56,77,.06);
}
.main-header .logo {
background: rgba(255,255,255,.42);
color: var(--th-accent-deep);
border-bottom: 0;
box-shadow: inset -1px 0 0 rgba(255,255,255,.5);
}
/* TWO LAYERS IN ONE DECLARATION: the translucent white wash is listed FIRST so
it sits on top of the pattern, and the pattern is what you see through the
glass. Without something behind it, "translucent" and "grey" look identical.
Done with background layers rather than a ::before, because backdrop-filter
creates a stacking context -- a negatively-stacked pseudo-element inside one
does not paint where you would expect, and two background layers do the job
outright. */
.main-sidebar,
.left-side {
background-image:
linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.34)),
url("../images/sidebar-pattern.svg");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed, fixed;
box-shadow: inset -1px 0 0 rgba(255,255,255,.55), 1px 0 16px rgba(31,56,77,.05);
}
/* ---- The bar's contents, now that it is pale ----------------------------- */
.main-header .navbar .nav > li > a,
.main-header .sidebar-toggle { color: #47586b; }
.main-header .navbar .nav > li > a:hover,
.main-header .sidebar-toggle:hover,
.main-header .navbar .nav > .open > a {
background: rgba(255,255,255,.55) !important;
color: var(--th-accent-deep) !important;
}
/* ---- The menu: rounded pills, as in the reference designs ---------------- */
.sidebar-menu > li > a {
color: #47586b; font-weight: 600;
margin: 2px 8px; padding: 9px 12px;
border-radius: 9px;
border-left: none !important; /* AdminLTE's 3px bar -- the pill replaces it */
transition: background .16s ease, color .16s ease;
}
.sidebar-menu > li > a > .fa { color: #8798aa; width: 18px; }
/* The portal's "New Offers" unread count (layouts/portal.php) -- the only
sidebar link with a badge at all, so it is also the only one with
anything sitting at that right edge. Bootstrap's `.label.pull-right`
floats it there with no margin of its own, flush against the pill's own
padding -- which read as cramped, almost clipped, next to five other
items with nothing there but empty space. A little room to breathe, and
a rounder, pill shape instead of Bootstrap's squared-off label corners,
matching the shape of the link it sits inside. */
.sidebar-menu > li > a > .label.pull-right {
margin: 1px 2px 0 6px;
padding: 3px 8px;
border-radius: 999px;
font-weight: 700;
}
.sidebar-menu > li.header {
background: transparent; color: #8fa1b3;
font-size: 10px; letter-spacing: .9px; font-weight: 700;
padding: 12px 20px 5px;
}
.sidebar-menu > li:hover > a {
background: rgba(255,255,255,.72) !important;
color: var(--th-accent-deep) !important;
}
/* The current page: a solid accent pill. The one thing that is NOT translucent,
because it is how you find your place at a glance. */
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
background: linear-gradient(135deg, var(--th-accent), var(--th-accent-deep)) !important;
color: #fff !important;
box-shadow: 0 4px 12px -4px rgba(31,56,77,.4);
}
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.menu-open > a > .fa { color: #fff; }
.sidebar-menu > li:hover > a > .fa { color: var(--th-accent); }
.sidebar-menu .treeview-menu {
background: rgba(255,255,255,.3) !important;
margin: 0 8px 4px; border-radius: 9px; padding: 4px 0;
}
.sidebar-menu .treeview-menu > li > a {
color: #5a6b7d; padding: 6px 12px 6px 30px; border-radius: 7px; margin: 0 4px;
}
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a {
background: rgba(255,255,255,.85) !important;
color: var(--th-accent-deep) !important;
}
/* ---- Footer: frosted too, with an accent hairline ------------------------ */
.main-footer {
background: rgba(255,255,255,.5);
-webkit-backdrop-filter: blur(14px) saturate(180%);
backdrop-filter: blur(14px) saturate(180%);
border-top: 1px solid rgba(255,255,255,.6);
box-shadow: inset 0 2px 0 var(--th-accent);
color: #55677a;
}
/* ---- Cards: near-white, so tables stay readable on the gradient ---------- */
.box, .lets-grid, .lets-page {
background: rgba(255,255,255,.88);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-color: rgba(255,255,255,.9);
box-shadow: 0 1px 2px rgba(31,56,77,.04), 0 8px 24px -12px rgba(31,56,77,.18);
}
/* ==========================================================================
PAGE HEAD -- ONE title per screen, and it lives here
--------------------------------------------------------------------------
Replaces AdminLTE's .content-header. Everything that identifies the page is
in a single band: icon, title, one line of explanation, breadcrumb, and the
page's buttons.
Before this there were three: the navbar said "Domains", the content header
said "Domains", and the card said "Domains". One screen, one title.
Drawn by app/Views/partials/page-head.php -- no view writes this markup.
========================================================================== */
/* COMPACT ON PURPOSE.
This band used to be ~100px tall: 18px padding, a 21px title, then the
description on its own line below. Stacked under a 50px navbar it pushed the
table down far enough that the page itself scrolled.
Now it is one row about 46px tall -- icon, title and description on the same
line, breadcrumb and buttons on the right. The description truncates with an
ellipsis rather than wrapping to a second line and growing the band; the full
text is still there on hover. */
.lets-page {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
padding: 8px 14px; margin: 0 0 12px;
background: var(--lets-surface);
border: 1px solid var(--lets-border);
border-left: 3px solid var(--lets-teal);
border-radius: var(--lets-radius);
box-shadow: var(--lets-shadow);
/* ----------------------------------------------------------------------
>>> THIS position/z-index IS WHAT KEEPS THE "?" BALLOON IN FRONT. <<<
Removing it puts the balloon BEHIND the table again.
WHY IT IS NEEDED, because the reason is not obvious:
`.lets-page`, `.lets-grid` and `.box` all carry `backdrop-filter` for the
frosted-glass look. **backdrop-filter creates a NEW STACKING CONTEXT.**
That means the balloon's own `z-index: 1040` is measured only against its
siblings INSIDE this band -- it cannot lift the balloon above anything
outside it, no matter how large the number is.
The grid or card that follows makes its own stacking context too, and
being later in the document it painted on top. So the balloon appeared
underneath the table and could not be read.
Giving this band a real z-index raises the WHOLE context above what
follows, which is the only thing that fixes it. Chasing the number on the
balloon itself does nothing at all -- that was tried.
---------------------------------------------------------------------- */
position: relative;
z-index: 30;
}
.lets-page__main {
min-width: 0; flex: 1 1 320px;
display: flex; align-items: baseline; gap: 10px;
}
.lets-page__title {
display: flex; align-items: center; gap: 9px;
margin: 0; font-size: 17px; font-weight: 700; color: var(--lets-ink);
line-height: 1.2; white-space: nowrap; flex: 0 0 auto;
}
.lets-page__title .fa {
width: 28px; height: 28px; flex: 0 0 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--lets-radius-s);
background: linear-gradient(135deg, var(--lets-teal-bright), var(--lets-teal));
color: #fff; font-size: 13px;
}
/* On the same line as the title, clipped rather than wrapping. */
.lets-page__sub {
margin: 0; font-size: 12px; color: var(--lets-muted); line-height: 1.4;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lets-page__side {
display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
}
.lets-page__crumbs {
font-size: 12px; color: var(--lets-muted);
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.lets-page__crumbs a { color: var(--lets-teal-deep); }
.lets-page__crumbs .sep { color: #cbd6d2; }
.lets-page__actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
/* A screen-level switch standing beside the buttons in the page-head -- the
Users list's "Show deleted" is the first. Deliberately NOT a .btn: it does
not perform an action, it changes what the screen is showing, and dressing
it as a button would invite it to be read as one more thing to press. */
.lets-page__toggle {
display: inline-flex; align-items: center; gap: 6px;
margin: 0; font-size: 12.5px; font-weight: 600;
color: var(--lets-muted); white-space: nowrap; cursor: pointer;
}
.lets-page__toggle input { margin: 0; cursor: pointer; }
@media (max-width: 991px) {
/* Too narrow for one line -- let the description drop below the title
rather than squeezing it to nothing. */
.lets-page__main { flex-wrap: wrap; }
.lets-page__sub { flex: 1 0 100%; white-space: normal; }
}
@media (max-width: 767px) {
/* PHONE. Everything stacks and nothing is allowed to push the page wider
than the screen -- a page that scrolls sideways is the thing this whole
mobile pass exists to remove.
`flex: 1 1 320px` on the main block was the real culprit: a 320px basis
inside a ~360px content area left no room for the breadcrumb and the
buttons, so they ran off the right edge. min-width:0 lets a flex item
shrink below its content size, which is not the default and is the usual
reason a flex row refuses to fit. */
.lets-page { padding: 10px 12px; }
.lets-page__main { flex: 1 1 100%; min-width: 0; }
.lets-page__side { width: 100%; flex-wrap: wrap; gap: 8px; }
.lets-page__crumbs { flex: 1 1 100%; }
.lets-page__actions { width: 100%; }
/* Buttons share the row and shrink together rather than overflowing. */
.lets-page__actions .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; }
}
/* AdminLTE pads .content generously. Trim it -- with the page-head carrying its
own margin, the extra only pushed the table further down.
width: .content was running the full width of .content-wrapper, right up
against the sidebar's edge with nothing between them -- reads as
overlapping it. Pull it in 5px so there is a visible gap. */
.content-wrapper > .content { padding: 5px 14px; width: calc(100% - 5px); }
/* ==========================================================================
BUTTONS -- restyled. AdminLTE's are Bootstrap 3 and look 2014.
--------------------------------------------------------------------------
Softer corners, a real shadow, a gradient on the primary action, and a press
that actually moves. Sizes are unchanged so nothing reflows.
========================================================================== */
.btn {
border-radius: var(--lets-radius-s);
font-weight: 650;
padding: 7px 15px;
border: 1px solid transparent;
box-shadow: none;
transition: background-color .16s ease, border-color .16s ease,
box-shadow .16s ease, transform .1s ease, color .16s ease;
}
.btn:focus, .btn:active:focus {
outline: none;
box-shadow: 0 0 0 3px var(--lets-tint);
}
.btn:active { transform: translateY(1px); }
.btn-default {
background: var(--lets-surface);
border-color: var(--lets-border);
color: var(--lets-ink-2);
}
.btn-default:hover, .btn-default:focus {
background: var(--lets-tint);
border-color: var(--lets-teal-bright);
color: var(--lets-teal);
}
.btn-primary {
background: linear-gradient(135deg, var(--lets-teal-bright), var(--lets-teal));
border-color: transparent; color: #fff;
box-shadow: 0 2px 8px -2px rgba(14,116,144,.5);
}
.btn-primary:hover, .btn-primary:focus {
background: linear-gradient(135deg, #3ddcf2, #12849f);
border-color: transparent; color: #fff;
box-shadow: 0 4px 14px -3px rgba(14,116,144,.55);
}
.btn-danger {
background: #fdebec; border-color: #f5c2c4; color: var(--lets-red);
}
.btn-danger:hover, .btn-danger:focus {
background: var(--lets-red); border-color: var(--lets-red); color: #fff;
}
/* >>> WHITE-ON-WHITE, ON A COLOURED BOX HEADER. <<< AdminLTE forces every
.btn inside a solid-red box header to white text --
".box.box-solid.box-danger>.box-header .btn{color:#fff}" -- built for its
own transparent box-tool buttons, where that is the whole point. Against
THIS theme's own soft-pink .btn-danger (background #fdebec, above) it
read as white text on a background one shade off white -- invisible. The
Escalation box's own action button is exactly this case: box-danger
header, btn-danger button, active escalation. Restoring the text colour
here (the background was never touched by AdminLTE's rule and was
already fine); an ID selector outranks AdminLTE's four-class one without
needing !important. */
#escalationOpen.btn-danger { color: var(--lets-red); }
/* The ID selector above outranks .btn-danger:hover's two classes, so
without this it also won on hover/focus -- red text on the red hover
background. Match its specificity here to restore white on hover. */
#escalationOpen.btn-danger:hover, #escalationOpen.btn-danger:focus { color: #fff; }
.btn-success { background: linear-gradient(135deg,#34d399,#15803d); border-color: transparent; color: #fff; }
.btn-warning { background: linear-gradient(135deg,#fbbf24,#d97706); border-color: transparent; color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 7px; }
.btn-xs { padding: 3px 8px; font-size: 11px; border-radius: 6px; }
.btn-flat { border-radius: var(--lets-radius-s); }
/* An icon-only button should be square, not a wide pill with an icon adrift
in the middle of it. */
.lets-btn-icon {
width: 28px; height: 28px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
}
/* ==========================================================================
CARDS -- AdminLTE's .box, restyled
========================================================================== */
.box {
border: 1px solid var(--lets-border);
border-top: 1px solid var(--lets-border); /* kill the 3px coloured stripe */
border-radius: var(--lets-radius);
box-shadow: var(--lets-shadow);
margin-bottom: 18px;
}
.box.box-primary, .box.box-info, .box.box-success,
.box.box-warning, .box.box-danger, .box.box-default { border-top-color: var(--lets-border); }
.box-header.with-border { border-bottom: 1px solid var(--lets-hairline); padding: 13px 16px; }
.box-header .box-title { font-size: 14px; font-weight: 700; color: var(--lets-ink); }
.box-body { padding: 16px; }
.box-footer {
background: var(--lets-sunken);
border-top: 1px solid var(--lets-hairline);
border-radius: 0 0 var(--lets-radius) var(--lets-radius);
padding: 11px 16px; color: var(--lets-ink-2);
}
/* A card whose whole body is a grid needs no padding of its own -- the grid
brings its own border and spacing. */
.box-body--flush { padding: 0; }
/* Boxes lift a little on hover, enough to read as interactive. */
.box { transition: box-shadow .18s ease, transform .18s ease; }
/* ==========================================================================
BADGES / LABELS
========================================================================== */
.label {
display: inline-block; padding: 3px 9px; border-radius: 99px;
font-size: 11px; font-weight: 700; letter-spacing: .2px;
}
.label-primary { background: var(--lets-tint); color: var(--lets-teal); }
.label-success { background: #e2f6e6; color: var(--lets-green); }
.label-danger { background: #fdebec; color: var(--lets-red); }
.label-warning { background: #fdeccb; color: var(--lets-amber); }
.label-info { background: #e5edfb; color: #2f5cb0; }
.label-default { background: var(--lets-hairline); color: var(--lets-ink-2); }
/* ==========================================================================
FORMS
========================================================================== */
.form-control {
border: 1px solid var(--lets-border);
border-radius: var(--lets-radius-s);
box-shadow: none;
height: auto; padding: 8px 11px;
color: var(--lets-ink);
transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
border-color: var(--lets-teal-bright);
box-shadow: 0 0 0 3px var(--lets-tint);
}
.control-label { font-weight: 650; color: var(--lets-ink-2); }
.help-block { font-size: 12px; color: var(--lets-muted); line-height: 1.55; }
.has-error .form-control { border-color: var(--lets-red); }
/* ==========================================================================
CALLOUTS -- AdminLTE's are very loud; these are quieter
========================================================================== */
/*
* >>> `!important` ALONE DID NOT FIX THIS. THE SELECTOR HAD TO MATCH TOO.
* <<< (29 Aug 2026)
* AdminLTE.min.css sets `.callout.callout-info` (and -warning, -danger,
* -success) to a solid, saturated fill with `!important` on both
* `background-color` and `color` -- a TWO-CLASS selector. The first attempt
* here added `!important` to the bare `.callout` rule below and stopped,
* reasoning that `!important` alone would win. It does not: when both sides
* are `!important`, the cascade falls back to SPECIFICITY next, and a
* two-class selector beats a one-class one regardless of which file loaded
* last or which declaration is newer. AdminLTE kept winning, silently, and
* the symptom -- a `btn-default` button as a pale grey pill on a bright cyan
* fill, readable nowhere -- came back exactly as it was before that "fix".
*
* The rule below now repeats the compound selector for every severity
* AdminLTE colours, so the specificity actually ties -- and this file loads
* LAST (see layouts/app.php), so the tie goes to it.
*/
.callout,
.callout.callout-info,
.callout.callout-warning,
.callout.callout-danger,
.callout.callout-success {
border-radius: var(--lets-radius); border: 1px solid var(--lets-border);
border-left: 3px solid var(--lets-teal);
box-shadow: none; padding: 14px 16px;
background: var(--lets-surface) !important; color: var(--lets-ink-2) !important;
}
.callout h4 { font-size: 14px; font-weight: 700; color: var(--lets-ink); margin-top: 0; }
.callout-info { border-left-color: var(--lets-teal); }
.callout-warning { border-left-color: #f0a92e; }
.callout-danger { border-left-color: var(--lets-red); }
.callout-success { border-left-color: var(--lets-green); }
/* An explanatory note -- quieter still than a callout. */
.lets-note {
padding: 12px 15px; margin-bottom: 18px;
border: 1px dashed var(--lets-border); border-radius: var(--lets-radius);
background: var(--lets-sunken); color: var(--lets-ink-2);
font-size: 13px; line-height: 1.6;
}
.lets-note ul { margin: 7px 0 0; padding-left: 18px; }
.lets-note li { margin-bottom: 4px; }
.lets-note code, .lets-page__sub code {
padding: 1px 5px; border-radius: 4px;
background: var(--lets-hairline); color: var(--lets-teal-deep); font-size: 12px;
}
/* ==========================================================================
MASTER DATA HUB -- the cards on /master
========================================================================== */
.lets-hub-card { display: block; color: inherit; text-decoration: none; }
.lets-hub-card:hover, .lets-hub-card:focus { color: inherit; text-decoration: none; }
.lets-hub-card .box { height: 100%; margin-bottom: 18px; }
.lets-hub-card:hover .box {
border-color: var(--lets-teal-bright);
box-shadow: var(--lets-shadow-h);
transform: translateY(-2px);
}
.lets-hub-card__head { display: flex; align-items: center; gap: 11px; }
.lets-hub-card__icon {
width: 38px; height: 38px; flex: 0 0 38px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--lets-radius-s);
background: var(--lets-tint); color: var(--lets-teal); font-size: 16px;
transition: background .18s ease, color .18s ease;
}
.lets-hub-card:hover .lets-hub-card__icon {
background: linear-gradient(135deg, var(--lets-teal-bright), var(--lets-teal));
color: #fff;
}
.lets-hub-card__name { font-size: 15px; font-weight: 700; color: var(--lets-ink); }
.lets-hub-card__count { font-size: 12px; color: var(--lets-muted); font-weight: 600; }
.lets-hub-card__help { margin: 11px 0 0; font-size: 12px; color: var(--lets-muted); line-height: 1.55; }
/* ==========================================================================
TABLES that are NOT the data grid (dashboard, profile, my access)
========================================================================== */
.table > thead > tr > th {
background: #e4f0ee; color: var(--lets-ink);
font-size: 10px; font-weight: 750; letter-spacing: .6px; text-transform: uppercase;
border-bottom: 1px solid var(--lets-border); padding: 9px 12px;
}
.table > tbody > tr > td,
.table > tbody > tr > th { border-top: 1px solid var(--lets-hairline); padding: 9px 12px; }
.table-hover > tbody > tr:hover { background: var(--lets-tint); }
/* ==========================================================================
MISC
========================================================================== */
.lets-filename { font-size: 11px; font-family: Consolas, monospace; color: var(--lets-muted); }
.lets-warn { margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--lets-amber); }
/* Row action buttons: each Retire/Delete sits in its own