/**
* Upendo Hostel — management application design system.
*
* WHY THE HOSTEL HAS ITS OWN STYLESHEET
* -------------------------------------
* It had none. Every `lshostel-` class the views emitted styled nothing, so
* the hostel's screens rendered as bare wp-admin markup: unstyled headings,
* default tables, cards that were not cards. The system worked and looked
* broken, which for the person using it is indistinguishable from broken.
*
* It is a separate file from the lodge's rather than a section inside it,
* because the two businesses are separate and the interface should say so
* before anybody reads a word. Same standard of work, different identity: the
* lodge is teal, the hostel is indigo-slate. An administrator who runs both on
* one login can tell from across the room which one they are looking at.
*
* THREE RULES, THE SAME THREE THE LODGE KEEPS
* -------------------------------------------
* 1. Status is never carried by colour alone. Every badge and every alert
* carries a word as well as a hue, because roughly one man in twelve
* cannot reliably separate the red from the amber, and this is an
* operations tool where getting that wrong means a bed double-booked.
*
* 2. Density over decoration. A warden reads this standing at a desk with a
* student waiting.
*
* 3. It lives inside wp-admin, so it must out-specify wp-admin without
* reaching for !important. The .lshostel-app scope does that.
*
* @package LodgeStay_PMS
*/
/* ==========================================================================
1. TOKENS
========================================================================== */
.lshostel-app {
/*
* THE SCALES ARE THE PLATFORM'S; ONLY THE COLOUR IS THE HOSTEL'S.
*
* These used to be twelve neutrals, seven spacing steps in PIXELS, two radii
* and two shadows, all written out here with their own values. The lodge had
* its own set with different steps in different units, and the two drifted
* exactly as you would expect: the same card had a 6px corner in one system
* and an 8px corner in the other, and nobody could have told you why.
*
* They are now aliases onto toplife.css, so there is one value behind each
* and changing it changes all three systems together. Every alias below
* preserves the pixel value the hostel had, so this is a change of
* PLUMBING and not of appearance — with two exceptions, both noted where
* they occur.
*/
--hs-neutral-0: var(--tl-neutral-0);
--hs-neutral-25: var(--tl-neutral-25);
--hs-neutral-50: var(--tl-neutral-50);
--hs-neutral-100: var(--tl-neutral-100);
--hs-neutral-200: var(--tl-neutral-200);
--hs-neutral-300: var(--tl-neutral-300);
--hs-neutral-400: var(--tl-neutral-400);
--hs-neutral-500: var(--tl-neutral-500);
/*
* EXCEPTION ONE, AND IT WAS A BUG.
*
* This read `#4c536616` — eight hex digits where six were meant, which CSS
* reads as a colour at 9% opacity. Anywhere it was used as text the text was
* all but invisible; anywhere it was used as a border the border was not
* there. The sibling token `--hs-neutral-650` was `#4c5366`, opaque, and was
* almost certainly added because somebody hit this and worked around it
* rather than finding it.
*
* Both now point at the shared neutral, which is what they were both
* reaching for.
*/
--hs-neutral-600: var(--tl-neutral-600);
--hs-neutral-650: var(--tl-neutral-600);
--hs-neutral-700: var(--tl-neutral-700);
--hs-neutral-800: var(--tl-neutral-800);
--hs-neutral-900: var(--tl-neutral-900);
/*
* Indigo-slate. Deliberately not the lodge's teal and deliberately not a
* bright SaaS purple: this is a student hostel's back office, and the
* palette is calm because most of what appears on these screens is routine.
*
* This is the hostel's identity and the only block in this file that is not
* an alias. It is also published as --tl-primary-* so the shared rules in
* toplife.css — the focus ring, chiefly — pick up the hostel's colour rather
* than the lodge's.
*/
--hs-primary-50: #eef1f9;
--hs-primary-100: #d8def2;
--hs-primary-200: #b3bfe4;
--hs-primary-300: #8496d1;
--hs-primary-400: #5c72bd;
--hs-primary-500: #4257a5;
--hs-primary-600: #354688;
--hs-primary-700: #2b396e;
--hs-primary-800: #222d57;
--hs-primary-900: #1a2242;
--tl-primary-50: var(--hs-primary-50);
--tl-primary-100: var(--hs-primary-100);
--tl-primary-500: var(--hs-primary-500);
--tl-primary-700: var(--hs-primary-700);
/*
* Status. Each of these is paired with a WORD everywhere it is used.
*
* EXCEPTION TWO: these now resolve to the platform's semantic ramp rather
* than the hostel's own slightly different greens and reds. The hostel's
* success green was #2e7d4f and the lodge's #1e874b — near enough that
* nobody would notice them side by side, and far enough that they were two
* decisions where there should have been one.
*/
--hs-good-50: var(--tl-success-50);
--hs-good-500: var(--tl-success-500);
--hs-good-700: var(--tl-success-700);
--hs-notice-50: var(--tl-notice-50);
--hs-notice-500: var(--tl-notice-500);
--hs-notice-700: var(--tl-notice-700);
--hs-warning-50: var(--tl-warning-50);
--hs-warning-500: var(--tl-warning-500);
--hs-warning-700: var(--tl-warning-700);
--hs-urgent-50: var(--tl-danger-50);
--hs-urgent-500: var(--tl-danger-500);
--hs-urgent-700: var(--tl-danger-700);
--hs-info-50: var(--tl-info-50);
--hs-info-500: var(--tl-info-500);
--hs-info-700: var(--tl-info-700);
/* The ink the platform computes for text on --hs-info-50, bridged under the
hostel's own name like every other colour here. It falls back to 700, so
the hostel is unchanged when the theme is not supplying one. */
--hs-info-ink: var(--tl-info-ink, var(--tl-info-700));
/*
* Spacing. The hostel's seven px steps map onto the platform's rem scale
* with every value preserved exactly: 4, 8, 12, 16, 24, 32, 48. The gaps in
* the mapping (--tl-space-5, -10) are steps the hostel never had and can now
* reach for.
*/
--hs-space-1: var(--tl-space-1); /* 4 */
--hs-space-2: var(--tl-space-2); /* 8 */
--hs-space-3: var(--tl-space-3); /* 12 */
--hs-space-4: var(--tl-space-4); /* 16 */
--hs-space-5: var(--tl-space-6); /* 24 */
--hs-space-6: var(--tl-space-8); /* 32 */
--hs-space-7: var(--tl-space-12); /* 48 */
--hs-radius: var(--tl-radius);
--hs-radius-lg: var(--tl-radius-lg);
--hs-shadow-sm: var(--tl-shadow-sm);
--hs-shadow: var(--tl-shadow-md);
--hs-border: 1px solid var(--tl-border);
color: var(--hs-neutral-800);
}
/* ==========================================================================
2. PAGE SHELL
========================================================================== */
.lshostel-app {
/*
* A little air on the right. wp-admin's .wrap runs content to the edge of
* the viewport, which on a 1920px monitor puts the end of a wide table
* against the window frame.
*/
padding-right: var(--hs-space-4);
max-width: 1600px;
}
.lshostel-masthead {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--hs-space-3);
padding: var(--hs-space-4) 0 var(--hs-space-3);
border-bottom: 2px solid var(--hs-primary-600);
margin-bottom: var(--hs-space-4);
}
.lshostel-masthead__title {
margin: 0;
padding: 0;
font-size: 1.5rem;
line-height: 1.2;
font-weight: 650;
color: var(--hs-primary-800);
}
/*
* The screen's name, now a span inside the rather than a
beside it --
* see the note in LSHOSTEL_App::masthead(). It has to look exactly as it did:
* `display:block` restores the line of its own that a paragraph had, and the
* weight and line-height undo what the heading would otherwise impose on it.
* Nothing about the rendered result changes; only what it is called.
*/
.lshostel-masthead__where {
display: block;
margin: 0;
font-size: 0.9rem;
font-weight: 400;
line-height: 1.4;
color: var(--hs-neutral-500);
}
/*
* The navigation and the content sit side by side on a wide screen and stack
* on a narrow one. Grid rather than float, so the sidebar cannot end up taller
* than the content and leave a hole under it.
*/
.lshostel-app {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
/*
* The masthead sits over the CONTENT column, not across both, so the
* screen's name, the breadcrumb, the page title and the first card all
* begin on one vertical line. It spanned both columns until an alignment
* audit measured it: the title was starting 220px to the left of
* everything it described. The sidebar spans both rows instead; nothing
* about its width changes.
*/
grid-template-areas:
"nav masthead"
"nav main";
/*
* THE ROWS MUST BE DECLARED, AND THIS IS THE WHOLE OF THE "HUGE BLANK AREA".
*
* The sidebar spans both rows (see the note above). Both rows were implicit,
* so both were `auto`, and CSS Grid distributes a spanning item's excess
* height EQUALLY across the auto rows it spans. The sidebar carries about
* thirty links and measures ~1483px; the masthead is 119px and an empty
* screen's content is ~114px. So the browser made each row ~741px and put
* the content at the top of the second one.
*
* Measured on /receipts/: `main` began at **752px**, 633px below the
* masthead, on a screen whose content is 114px tall. Nothing was padding,
* margin or min-height — the space was a grid row, sized by the sidebar.
*
* It is intermittent for a reason that matters: the distribution only shows
* when the sidebar is TALLER than the content column. A busy screen absorbs
* it and looks correct; an empty state shows all of it. Production has no
* business data by design, so most screens are empty states, and the defect
* appeared almost everywhere at once while the dashboard looked fine.
*
* `auto 1fr` says what was always meant: the masthead row is as tall as the
* masthead, and the content row takes the remainder — so the sidebar's
* height lands in the flexible row instead of being split into the fixed
* one. On /receipts/ this moves `main` from 752px to 135px.
*
* `align-items: start` below keeps `main` at the top of that row rather than
* stretching it, so nothing gains a height it did not ask for.
*/
grid-template-rows: auto 1fr;
gap: 0 var(--hs-space-5);
align-items: start;
}
.lshostel-masthead { grid-area: masthead; }
.lshostel-nav { grid-area: nav; }
.lshostel-main { grid-area: main; min-width: 0; }
/* ==========================================================================
2b. THE CONTENT CONTAINER
--------------------------------------------------------------------------
WHY THE HOSTEL SAT AGAINST THE LEFT EDGE, AND WHY IT WAS NOT A MISSING
PADDING.
On the direct portal the hostel shell renders as `
` inside `.lspms-manage__body`, and manage.css carries
.lspms-manage .wrap { margin: 0; padding: 0; }
written to strip the margins wp-admin's own `.wrap` brings, which the portal
has no use for. Two classes beats one, so it also stripped the hostel's own
`padding-right: var(--hs-space-4)` from section 2 — silently, and only on the
portal, which is why the same stylesheet looked right inside wp-admin.
The lodge was never affected because its content container is
`.lspms__content`, which is not a `.wrap`; it keeps its 24px gutters and its
`--tl-measure` cap, and that is the geometry the hostel is missing rather
than any particular number.
So the container is restored here, at the same specificity that removed it,
in the hostel's own stylesheet and out of the hostel's own tokens. No
`!important`, no arbitrary left padding, and wp-admin is untouched.
========================================================================== */
.lspms-manage .lshostel-app {
/*
* A gutter on both sides rather than only the right. The old rule added air
* on the right alone because inside wp-admin the left was already provided
* by `#wpcontent`; on the portal there is no `#wpcontent`, so the left had
* nothing and the content started at zero.
*/
/*
* --hs-space-7 is the top of the hostel's scale. An earlier draft asked for
* an -8, which does not exist; the whole `padding` shorthand would have
* been invalid and the gutter this rule exists to add would have been
* silently absent, which is the exact failure it was written to fix.
*/
padding: 0 var(--hs-space-5) var(--hs-space-7);
/*
* A measure, not the whole monitor — the same reasoning, and the same
* token, as `.lspms__content`. Beyond this a row of KPI cards becomes a
* line of distant islands.
*/
max-width: var(--tl-measure);
margin-inline: auto;
}
/*
* minmax(0, 1fr) above and min-width: 0 here are the pair that stops a wide
* table stretching the grid column and pushing the whole page sideways. A grid
* item's default min-width is auto, which means "as wide as my content", which
* for a table of thirty payments means the page scrolls horizontally.
*/
/* ==========================================================================
3. SIDEBAR
========================================================================== */
.lshostel-nav {
position: sticky;
top: 46px;
/*
* The nav is taller than most viewports, and a sticky element can only
* hold while its grid container has room left beneath it. On a short
* page that room is a few dozen pixels, so the sidebar scrolled away
* with the content. Giving it its own height limit and scrollbar makes
* it hold on every page, long or short, and keeps the whole menu
* reachable when the menu itself is taller than the screen.
*/
max-height: calc(100vh - 46px);
overflow-y: auto;
background: var(--hs-neutral-0);
border: var(--hs-border);
border-radius: var(--hs-radius-lg);
padding: var(--hs-space-3) 0;
box-shadow: var(--hs-shadow-sm);
}
.lshostel-nav-group {
margin: var(--hs-space-4) var(--hs-space-4) var(--hs-space-2);
padding: 0;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
/*
* 400 MEASURED 2.87:1 ON THE NAV CARD, AND THIS IS SMALL UPPERCASE TEXT.
*
* The nav card is `--hs-neutral-0`, white in light mode, and the theme's
* generated 400 resolves to #969998 against it. That is under AA for any
* text and this is the hardest kind to read: 0.68rem, bold, tracked out by
* 0.09em, in capitals. Dark mode was never the problem -- the same token
* resolves to #979a9f on the dark card at 4.78:1 -- so the defect was
* light-mode only and invisible to a dark-mode contrast suite.
*
* 500 is the next step down the SAME ramp: 5.32:1 in light and 5.39:1 in
* dark. No new colour, and the hierarchy it exists for is untouched -- a
* navigation link is `--hs-neutral-700` at 11.23:1, so this heading is
* still visibly the quieter of the two. Quieter than its items is the job;
* quieter than legibility is not.
*/
color: var(--hs-neutral-500);
}
.lshostel-nav-group:first-child { margin-top: var(--hs-space-1); }
.lshostel-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.lshostel-nav li { margin: 0; }
.lshostel-nav a {
display: flex;
align-items: center;
gap: var(--hs-space-2);
padding: var(--hs-space-2) var(--hs-space-4);
color: var(--hs-neutral-700);
text-decoration: none;
font-size: 0.9rem;
border-left: 3px solid transparent;
}
.lshostel-nav a:hover,
.lshostel-nav a:focus {
background: var(--hs-primary-50);
color: var(--hs-primary-700);
}
.lshostel-nav a:focus-visible {
/*
* A THIRD ELEMENT, BEYOND THE TWO THAT WERE AUTHORISED, AND FLAGGED AS ONE.
*
* The regression test added for the two above measures the whole
* navigation, and it found this: `--hs-primary-500` resolves to #5c65ac in
* BOTH themes -- the dark generator lifts most steps and leaves 500 as the
* fill -- so on the dark card at #2a2f34 the focus ring sits at 2.52:1,
* under the 3:1 a non-text indicator needs. A keyboard user in dark mode
* cannot reliably see where they are.
*
* 600 is the next step on the SAME ramp, no new colour, and it is already
* the active row's left bar and active icon two rules below -- so the
* focused and the current row now agree about which colour means "this
* one". 7.63:1 in light, 4.67:1 in dark.
*
* Written up rather than folded in silently: the correction that was asked
* for covered two elements and this is a third. It is one token on the same
* ramp and it is reversible in one line.
*/
outline: 2px solid var(--hs-primary-600);
outline-offset: -2px;
}
.lshostel-nav a.current {
background: var(--hs-primary-50);
border-left-color: var(--hs-primary-600);
color: var(--hs-primary-800);
font-weight: 600;
}
.lshostel-nav .dashicons {
font-size: 17px;
width: 17px;
height: 17px;
/*
* The same step, for the same reason. An icon is a non-text control and
* needs 3:1 rather than 4.5, but 400 was 2.87:1 and failed even that.
*/
color: var(--hs-neutral-500);
flex: none;
}
.lshostel-nav a.current .dashicons { color: var(--hs-primary-600); }
/* ==========================================================================
4. BREADCRUMBS
========================================================================== */
.lshostel-crumbs {
margin: 0 0 var(--hs-space-4);
font-size: 0.82rem;
color: var(--hs-neutral-500);
}
.lshostel-crumbs ol {
display: flex;
flex-wrap: wrap;
gap: var(--hs-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.lshostel-crumbs li { margin: 0; }
/* The separator is generated, so it is never read aloud as a list item. */
.lshostel-crumbs li + li::before {
content: "\203A";
margin-right: var(--hs-space-2);
color: var(--hs-neutral-300);
}
.lshostel-crumbs [aria-current="page"] {
color: var(--hs-neutral-800);
font-weight: 600;
}
/* ==========================================================================
5. SECTIONS AND HEADINGS
========================================================================== */
.lshostel-section { margin: 0 0 var(--hs-space-6); }
.lshostel-h2 {
margin: 0 0 var(--hs-space-3);
padding: 0;
font-size: 1.05rem;
font-weight: 650;
color: var(--hs-neutral-800);
}
.lshostel-h3 {
margin: var(--hs-space-5) 0 var(--hs-space-3);
font-size: 1rem;
font-weight: 600;
color: var(--hs-neutral-700);
}
.lshostel-lead {
margin: 0 0 var(--hs-space-4);
max-width: 74ch;
color: var(--hs-neutral-650);
font-size: 0.92rem;
line-height: 1.6;
}
/* ==========================================================================
6. BRIEFING
========================================================================== */
.lshostel-briefing {
background: linear-gradient(135deg, var(--hs-primary-700), var(--hs-primary-500));
color: var(--hs-neutral-0);
border-radius: var(--hs-radius-lg);
padding: var(--hs-space-5);
margin-bottom: var(--hs-space-5);
}
.lshostel-briefing__greeting {
margin: 0 0 var(--hs-space-1);
padding: 0;
font-size: 1.35rem;
font-weight: 650;
/*
* White on the gradient's lightest stop is 4.9:1. Stated because it is the
* one place in this file where text sits on a coloured field rather than on
* a neutral, and it is the first thing that would break if the gradient
* were lightened for looks.
*/
color: var(--hs-neutral-0);
}
.lshostel-briefing__lead {
margin: 0 0 var(--hs-space-3);
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.92);
}
.lshostel-briefing__body {
margin: 0 0 var(--hs-space-2);
font-size: 1rem;
line-height: 1.55;
max-width: 70ch;
color: var(--hs-neutral-0);
}
.lshostel-briefing__stamp {
margin: 0;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.78);
}
/* ==========================================================================
7. KPI CARDS
========================================================================== */
.lshostel-kpis {
display: grid;
/*
* auto-fill with a minimum, so the row reflows instead of squashing. 210px
* is the width at which "TZS 1,250,000" still fits on one line at the value
* font size; below that the number wraps and a KPI card whose number wraps
* is unreadable.
*/
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: var(--hs-space-3);
margin-bottom: var(--hs-space-4);
}
.lshostel-kpi {
position: relative;
background: var(--hs-neutral-0);
border: var(--hs-border);
border-radius: var(--hs-radius-lg);
padding: var(--hs-space-4);
box-shadow: var(--hs-shadow-sm);
min-width: 0;
}
.lshostel-kpi__icon {
position: absolute;
top: var(--hs-space-4);
right: var(--hs-space-4);
font-size: 18px;
width: 18px;
height: 18px;
color: var(--hs-neutral-300);
}
.lshostel-kpi__label {
margin: 0 var(--hs-space-6) var(--hs-space-2) 0;
padding: 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--hs-neutral-500);
}
.lshostel-kpi__value {
margin: 0 0 var(--hs-space-2);
font-size: 1.6rem;
line-height: 1.15;
font-weight: 650;
color: var(--hs-neutral-900);
font-variant-numeric: tabular-nums;
/*
* A long amount shrinks the gap between digits rather than wrapping. The
* non-breaking space in "TZS 150,000" keeps the code with the number; this
* keeps the number itself on one line down to about 320px.
*/
overflow-wrap: break-word;
word-break: normal;
}
.lshostel-kpi__description {
margin: 0;
font-size: 0.8rem;
line-height: 1.45;
color: var(--hs-neutral-500);
}
/* ==========================================================================
8. ALERTS
========================================================================== */
.lshostel-alerts {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--hs-space-2);
}
.lshostel-alert {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--hs-space-3);
margin: 0;
padding: var(--hs-space-3) var(--hs-space-4);
border-radius: var(--hs-radius);
border: 1px solid transparent;
/* The left rule is a second, non-colour signal of severity: thicker for
the ones that matter more. */
border-left-width: 4px;
background: var(--hs-neutral-50);
font-size: 0.9rem;
}
.lshostel-alert__level {
flex: none;
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.08em;
padding: 2px var(--hs-space-2);
border-radius: 3px;
}
.lshostel-alert__message {
flex: 1 1 240px;
min-width: 0;
line-height: 1.5;
}
.lshostel-alert__action {
flex: none;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.lshostel-alert--urgent {
background: var(--hs-urgent-50);
border-color: var(--hs-urgent-500);
}
.lshostel-alert--urgent .lshostel-alert__level {
background: var(--hs-urgent-500);
color: #fff;
}
.lshostel-alert--urgent .lshostel-alert__action { color: var(--hs-urgent-700); }
.lshostel-alert--warning {
background: var(--hs-warning-50);
border-color: var(--hs-warning-500);
}
.lshostel-alert--warning .lshostel-alert__level {
background: var(--hs-warning-500);
color: #fff;
}
.lshostel-alert--warning .lshostel-alert__action { color: var(--hs-warning-700); }
.lshostel-alert--notice {
background: var(--hs-notice-50);
border-color: var(--hs-notice-500);
}
.lshostel-alert--notice .lshostel-alert__level {
background: var(--hs-notice-500);
color: #fff;
}
.lshostel-alert--notice .lshostel-alert__action { color: var(--hs-notice-700); }
.lshostel-alert--info {
background: var(--hs-info-50);
border-color: var(--hs-info-500);
}
.lshostel-alert--info .lshostel-alert__level {
background: var(--hs-info-500);
color: #fff;
}
.lshostel-alert--info .lshostel-alert__action { color: var(--hs-info-ink, var(--hs-info-700)); }
/* ==========================================================================
9. BADGES
========================================================================== */
.lshostel-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px var(--hs-space-2);
border-radius: 3px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.03em;
white-space: nowrap;
}
/*
* The hostel colours its badges by TONE, and pending, cancelled and refunded
* all resolve to `notice` — three states a bookkeeper has to tell apart,
* printed in one colour. The colour was not merely insufficient there, it was
* saying they were the same. The mark is per state, so they stop matching.
*/
.lshostel-badge__mark {
font-size: 12px;
width: 12px;
height: 12px;
line-height: 12px;
flex: 0 0 12px;
}
.lshostel-badge__label { display: inline; }
.lshostel-badge--good { background: var(--hs-good-50); color: var(--hs-good-700); }
.lshostel-badge--notice { background: var(--hs-notice-50); color: var(--hs-notice-700); }
.lshostel-badge--warning { background: var(--hs-warning-50); color: var(--hs-warning-700); }
.lshostel-badge--urgent { background: var(--hs-urgent-50); color: var(--hs-urgent-700); }
.lshostel-badge--info { background: var(--hs-info-50); color: var(--hs-info-ink, var(--hs-info-700)); }
/* ==========================================================================
10. QUICK ACTIONS
========================================================================== */
.lshostel-actions {
display: flex;
flex-wrap: wrap;
gap: var(--hs-space-2);
}
.lshostel-action {
display: inline-flex;
align-items: center;
gap: var(--hs-space-2);
/* 40px tall, which is a comfortable target with a thumb. */
min-height: 40px;
padding: var(--hs-space-2) var(--hs-space-4);
background: var(--hs-neutral-0);
border: var(--hs-border);
border-radius: var(--hs-radius);
color: var(--hs-neutral-700);
text-decoration: none;
font-size: 0.88rem;
font-weight: 500;
box-shadow: var(--hs-shadow-sm);
}
.lshostel-action:hover,
.lshostel-action:focus {
border-color: var(--hs-primary-400);
color: var(--hs-primary-700);
background: var(--hs-primary-50);
}
.lshostel-action:focus-visible {
outline: 2px solid var(--hs-primary-500);
outline-offset: 1px;
}
.lshostel-action .dashicons {
font-size: 16px;
width: 16px;
height: 16px;
color: var(--hs-primary-500);
}
/* ==========================================================================
11. TODAY'S OPERATIONS
========================================================================== */
.lshostel-ops {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: var(--hs-space-3);
}
.lshostel-op {
background: var(--hs-neutral-0);
border: var(--hs-border);
border-radius: var(--hs-radius-lg);
padding: var(--hs-space-4);
min-width: 0;
}
.lshostel-op__title {
margin: 0 0 var(--hs-space-2);
padding: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--hs-neutral-500);
}
.lshostel-op__count {
margin: 0 0 var(--hs-space-1);
font-size: 1.7rem;
font-weight: 650;
line-height: 1.1;
color: var(--hs-neutral-900);
font-variant-numeric: tabular-nums;
}
.lshostel-op__note {
margin: 0;
font-size: 0.8rem;
line-height: 1.4;
color: var(--hs-neutral-500);
}
/* An empty note leaves no ghost gap under the number. */
.lshostel-op__note:empty { display: none; }
/* ==========================================================================
12. EMPTY STATES
========================================================================== */
/*
* An empty state has to look INTENDED. The failure it guards against is a
* screen that has nothing on it because there is nothing to show, being read
* as a screen that has nothing on it because it broke. So: a bordered panel
* with two sentences, not a bare line of grey text.
*/
.lshostel-empty-state {
background: var(--hs-neutral-25);
border: 1px dashed var(--hs-neutral-300);
border-radius: var(--hs-radius-lg);
padding: var(--hs-space-5);
text-align: center;
margin: 0 0 var(--hs-space-4);
}
.lshostel-empty-state__heading {
margin: 0 0 var(--hs-space-2);
font-size: 0.98rem;
font-weight: 600;
color: var(--hs-neutral-700);
}
.lshostel-empty-state__body {
margin: 0 auto;
max-width: 62ch;
font-size: 0.87rem;
line-height: 1.55;
color: var(--hs-neutral-500);
}
/* ==========================================================================
13. TABLES
========================================================================== */
/*
* The wrapper scrolls, not the page. A payments table with seven columns is
* wider than a phone; without this the whole document scrolls sideways and the
* navigation goes with it.
*/
.lshostel-tablewrap {
/*
* `position: relative` is not decoration - it is what makes the clipping
* work, and the lodge's `.lspms-scroll` carries the same line with the same
* reasoning written out beside it.
*
* An absolutely positioned descendant is clipped by an ancestor's overflow
* only when that ancestor is also its CONTAINING BLOCK, and a `static`
* scroller is not one. WordPress's own `.screen-reader-text` is
* `position: absolute`; inside a static scroller those spans are laid out
* against a containing block further up, escape the scroller entirely, and
* add their off-screen width to the page.
*
* The lodge found this on its calendar, which pushed the document 30px
* sideways at 375px while every visible element measured inside the
* viewport. The hostel had the same hole and nothing had fallen into it:
* no hostel table contained an absolutely positioned element until the
* month-end screen put a labelled form in one, at which point the page went
* 690px wide at 320px. The visible elements were all where they should be.
*/
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: var(--hs-border);
border-radius: var(--hs-radius-lg);
background: var(--hs-neutral-0);
margin-bottom: var(--hs-space-4);
}
.lshostel-table {
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
}
/* A table that is its own wrapper still needs the frame. */
.lshostel-table:not(.lshostel-tablewrap > .lshostel-table) {
background: var(--hs-neutral-0);
}
.lshostel-table th,
.lshostel-table td {
padding: var(--hs-space-3) var(--hs-space-4);
text-align: left;
border-bottom: 1px solid var(--hs-neutral-100);
vertical-align: top;
}
.lshostel-table thead th {
background: var(--hs-neutral-50);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--hs-neutral-500);
white-space: nowrap;
border-bottom: 1px solid var(--hs-neutral-200);
}
.lshostel-table tbody tr:last-child th,
.lshostel-table tbody tr:last-child td { border-bottom: 0; }
.lshostel-table tbody tr:hover { background: var(--hs-neutral-25); }
.lshostel-table--compact th,
.lshostel-table--compact td {
padding: var(--hs-space-2) var(--hs-space-3);
}
.lshostel-unset {
color: var(--hs-neutral-400);
font-style: italic;
}
/*
* A sentence explaining what a control will do, sitting under it. Quieter than
* the surrounding text but not as quiet as `.lshostel-unset`, which means
* "nobody has filled this in" — this means "read this before you press it".
*/
.lshostel-hint {
color: var(--hs-neutral-500);
font-size: 13px;
margin: 4px 0 12px;
max-width: 60ch;
}
/*
* A form's fields, two or three across depending on the width available. auto-fit
* rather than a fixed column count, so the registration form is one column on a
* phone at the reception desk without a media query saying where the break is.
*/
.lshostel-formgrid {
display: grid;
gap: 0 16px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.lshostel-field {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0 0 12px;
max-width: 640px;
}
.lshostel-field label {
color: var(--hs-neutral-600);
font-size: 13px;
font-weight: 600;
}
.lshostel-field input,
.lshostel-field select,
.lshostel-field textarea {
max-width: 100%;
width: 100%;
}
/* ==========================================================================
13a. THE HOSTEL FORM-CONTROL BASELINE
==========================================================================
THE PORTAL HAS NO wp-admin forms.css, AND NOTHING REPLACED IT.
`LSPMS_Manage_Screen::handles()` prints an explicit allowlist of stylesheets
and deliberately omits wp-admin's, because they would drag WordPress's visual
identity onto the portal. wp-admin is where every control gets its height,
padding, border and radius — so on hostel.toplifelodge.co.tz a control had
none of them and fell back to the browser default.
Measured across all 40 rendered Hostel screens: ELEVEN of them carried
controls 19-21px tall — allocate, announcements, applications, dashboard,
monthend, payments, residents, roles, settings, staff and verifications. The
admission form was simply the first one anybody looked at closely.
Scoped to `.lshostel-app`, which is the Hostel shell and nothing else: the
Lodge and Group portals are untouched. Deliberately LOW specificity (0,2,1)
and placed above the screen-specific rules, so `.lshostel-appform`'s controls
and `.lshostel-rangeform`'s date fields continue to win where they have
something more particular to say. This is a floor, not an override.
========================================================================== */
.lshostel-app input[type="text"],
.lshostel-app input[type="search"],
.lshostel-app input[type="email"],
.lshostel-app input[type="tel"],
.lshostel-app input[type="url"],
.lshostel-app input[type="number"],
.lshostel-app input[type="password"],
.lshostel-app input[type="date"],
.lshostel-app select,
.lshostel-app textarea {
background: var(--hs-neutral-0);
border: 1px solid var(--hs-neutral-300);
border-radius: var(--hs-radius);
box-sizing: border-box;
color: inherit;
font: inherit;
min-height: 40px;
padding: var(--hs-space-2) var(--hs-space-3);
}
.lshostel-app textarea {
min-height: 80px;
padding: var(--hs-space-3);
}
/*
* A file input is a control the browser draws and will not take a height the
* way a text field will. It gets the spacing and is otherwise left alone.
*/
.lshostel-app input[type="file"] {
font: inherit;
padding: var(--hs-space-2) 0;
}
/*
* A disabled control should read as unavailable rather than as empty.
*/
.lshostel-app input:disabled,
.lshostel-app select:disabled,
.lshostel-app textarea:disabled {
background: var(--hs-neutral-50);
color: var(--hs-neutral-500);
cursor: not-allowed;
}
.lshostel-app ::placeholder {
color: var(--hs-neutral-500);
opacity: 1;
}
/* ==========================================================================
13b. THE ADMISSION FORM
==========================================================================
Four rules, and every value in them is a token this file already declares.
The form is a long document rather than a dialogue, so what it needs from
the stylesheet is not decoration: it is the ability to tell four kinds of
block apart at a glance while scrolling.
Nothing here introduces a colour. `--hs-primary-*` is the hostel's ramp,
which the whole platform now wears, and the semantic families are untouched.
========================================================================== */
/*
* The conditional half of the health question.
*
* Indented and ruled rather than merely revealed, because it belongs TO the
* answer above it: a paragraph and a file upload that appear at the same
* indentation as everything else read as two more fields on the form, and a
* reader who has just chosen "No" cannot see why they are still there.
*/
.lshostel-appform__conditional {
border-left: 3px solid var(--hs-primary-200);
margin: 0 0 16px;
padding: 4px 0 4px 16px;
}
/*
* FOR OFFICIAL USE ONLY, and the separation is the requirement rather than a
* preference. On the paper form it is a ruled box with its own heading,
* because what is inside it is the hostel's answer and everything above it is
* the student's question. A screen that ran the two together would invite
* somebody to read an allocation as something the applicant had asked for.
*/
.lshostel-appform__official {
background: var(--hs-primary-50);
border: 1px solid var(--hs-primary-200);
}
/*
* One signature, with what is recorded above the way to record it. Bounded so
* that three of them in a column do not read as one long list of fields.
*/
/*
* ONE SIGNATURE CARD, USED THREE TIMES.
*
* `application_signature()` is a single generator called for the student, the
* parent or guardian and the authorising officer, so the markup was already
* shared. What was not shared was a card: the block drew a top RULE and no
* box, and the form inside it carried `.lshostel-form--inline`, which is an
* inline-block and therefore SHRINK-WRAPS. Measured at 1440px the form was
* 267px wide inside a 1148px section — the "small floating card pushed to the
* left". The three blocks looked different from one another only because their
* longest label differed, which is what shrink-wrapping does.
*
* So: a real card, and a grid inside it rather than an inline-block. The grid
* is `auto-fit` over a 240px minimum, so the name and the file control sit side
* by side where there is room and stack where there is not, with no breakpoint
* deciding it. `max-width` keeps a text field at a readable measure instead of
* running it across a 1600px monitor.
*/
.lshostel-appform__signature {
background: var(--hs-neutral-0);
border: var(--hs-border);
border-radius: var(--hs-radius);
margin: 0 0 var(--hs-space-3);
/*
* THE CARD IS CAPPED, NOT ONLY ITS CONTENTS.
*
* Capping the form alone left the CARD stretching to its section: measured
* at 1440px the card was 1148px, the form 760px, and 355px of the card was
* empty to the right of the last control. A box that wide around controls
* that narrow reads as a layout that failed rather than one that chose.
*
* 794px is the form's 760px measure plus this card's own 16px of padding on
* each side and its 1px borders, so the card is exactly as wide as what it
* holds. Below about 826px of available width it is the section that is
* narrower, the cap stops applying and the card fills the row -- which is
* why 1024px measured 1px of slack before this and needs no breakpoint now.
*/
max-width: 794px;
padding: var(--hs-space-4);
}
.lshostel-appform__signature:last-child {
margin-bottom: 0;
}
/*
* The form is the card's content, so it fills the card rather than
* shrink-wrapping inside it. `--inline` is doing nothing useful here and the
* grid replaces it; the class stays on the element because it is the same
* generator that other screens use.
*/
.lshostel-appform__signature .lshostel-form {
align-items: end;
display: grid;
gap: var(--hs-space-3) var(--hs-space-4);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
max-width: 760px;
width: 100%;
}
/*
* A hidden input is still a grid ITEM. Six of them sit in this form -- the
* nonce, the referer, the action, the task, the id and the signatory -- and
* without this they take six cells and push the two real fields onto a second
* row, leaving a card that is mostly empty. `display: none` takes them out of
* layout without changing what they submit.
*/
.lshostel-appform__signature .lshostel-form input[type="hidden"] {
display: none;
}
.lshostel-appform__signature .lshostel-form > .lshostel-field {
margin-bottom: 0;
}
/*
* Record sits on its own full-width row under the fields it records, in the
* same place in all three cards.
*/
/*
* Record ends the row it belongs to, under the controls it records, at the
* right-hand edge in all three cards. `justify-self` moves the paragraph
* within its cell and leaves the button its own size, so the touch target is
* unchanged.
*/
.lshostel-appform__signature .lshostel-form > p:last-child {
grid-column: 1 / -1;
justify-self: end;
margin: 0;
}
/*
* The row of things that can be done to an application: the workflow buttons,
* and the print button beside them.
*
* Each of those is its own