/**
 * PaintClarity sidebar app-shell (2026-09-10, Mike). Opt-in full-screen layout
 * with a left sidebar, rendered by the canvas path in paintops.php only when
 * the "Sidebar layout" setting is on (body.paintops-shell). Everything here
 * is scoped under .paintops-shell so it can never affect the classic layout
 * or the rest of the site.
 */

/* In shell mode the in-content top app bar and bottom nav are replaced by the
 * sidebar + top bar, so hide them. PHONES ARE THE EXCEPTION, see the
 * max-width:782px block at the bottom of this file. */
.paintops-shell .paintops-appbar,
.paintops-shell .paintops-bottomnav,
.paintops-shell .pbn-sheet,
.paintops-shell .pbn-sheet-backdrop { display: none !important; }

/* (2026-09-13 visual pass) STRUCTURE IS NAVY. The rail was white-on-white
 * with hairline greys, which is the default look of every SaaS starter
 * template and gave the app no spine. It now takes --po-nav-bg, which all
 * eight themes already define as a dark structural color, so this is one
 * change that themes each answer in their own palette. Content stays on
 * white; the chrome carries the weight. */
.paintops-shell { --po-shell-w: 240px; background: var(--po-app-bg, #eef1f5); }
.paintops-shell .po-shell {
	display: grid;
	grid-template-columns: var(--po-shell-w) 1fr;
	min-height: 100vh;
	min-height: 100dvh;
}

/* Sidebar ------------------------------------------------------------------ */
.paintops-shell .po-side {
	background: var(--po-nav-bg, #293241);
	border-right: 0;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	z-index: 40;
}
/* Brand block: the PaintClarity mark and wordmark, always, on every theme
 * (Mike 2026-09-13). The company's own logo is a DOCUMENT mark and stays
 * on quotes, invoices and expense reports; the menu identifies the product.
 * The mark sits on a small white chip because its brush handle is dark navy
 * and would disappear straight onto the rail. */
.paintops-shell .po-side-brand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 16px 14px; border-bottom: 1px solid var(--po-on-nav-line, rgba(255,255,255,.13)); }
.paintops-shell .po-side-mark { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 6px; background: #fff; padding: 3px; box-sizing: border-box; display: block; }
.paintops-shell .po-side-logo { max-width: 150px; max-height: 34px; height: auto; width: auto; display: block; }
.paintops-shell .po-side-word { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--po-on-nav-strong, #fff); line-height: 1.1; }
/* Which build this is, beside the product name (2026-09-16). A quiet chip
 * rather than part of the wordmark: the product is PaintClarity in both
 * builds, and the edition is a qualifier on it. Pro is the accent color
 * the rail already uses for its active marker; Free is a plain outline,
 * because Free is a statement of fact and not a nag to upgrade. */
.paintops-shell .po-side-edition {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 4px;
	white-space: nowrap;
}
.paintops-shell .po-side-edition.is-pro {
	color: #0d2233;
	background: var(--po-nav-marker, #98C1D9);
}
.paintops-shell .po-side-edition.is-free {
	color: var(--po-on-nav, rgba(255,255,255,.80));
	border: 1px solid var(--po-on-nav-line, rgba(255,255,255,.28));
}
/* The business name still belongs here: it says WHOSE books these are.
 * It is subordinate to the product mark, on its own line, quiet. */
.paintops-shell .po-side-biz { flex: 1 1 100%; color: var(--po-on-nav-muted, rgba(255,255,255,.56)); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0; padding: 0; border-bottom: 0; }
.paintops-shell .po-side-nav { padding: 8px 8px 16px; overflow-y: auto; flex: 1 1 auto; }
.paintops-shell .po-side-grp { font-size: var(--po-fs-label, 11px); font-weight: 700; letter-spacing: .09em; color: var(--po-on-nav-muted, rgba(255,255,255,.56)); text-transform: uppercase; padding: 18px 10px 6px; }
.paintops-shell .po-side-nav a {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 10px; margin: 1px 0;
	border-radius: var(--po-radius-xs, 4px);
	color: var(--po-on-nav, rgba(255,255,255,.80)) !important;
	font-weight: 500; font-size: var(--po-fs-body, 14px); text-decoration: none;
	line-height: 1.3;
	box-shadow: inset 3px 0 0 transparent;
	transition: background-color .12s ease;
}
.paintops-shell .po-side-nav a:hover { background: var(--po-on-nav-hover, rgba(255,255,255,.07)); color: var(--po-on-nav-strong, #fff) !important; }
/* Active: a lifted wash plus a 3px marker in PaintClarity sky blue. A bar is
 * the business-software convention for "you are here" and, unlike a filled
 * pill, it does not read as a button you can press. This is the one place
 * the interactive blue appears on the rail. */
.paintops-shell .po-side-nav a.is-active {
	background: var(--po-on-nav-active, rgba(255,255,255,.12));
	color: var(--po-on-nav-strong, #fff) !important;
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--po-nav-marker, #98C1D9);
}
.paintops-shell .po-side-ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.paintops-shell .po-side-nav a.is-active .po-side-ic { opacity: 1; }
.paintops-shell .po-side-label { flex: 1 1 auto; min-width: 0; }
.paintops-shell .po-side-pro { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--po-on-nav-muted, rgba(255,255,255,.56)); border: 1px solid var(--po-on-nav-line, rgba(255,255,255,.22)); border-radius: 3px; padding: 1px 5px; }
.paintops-shell .po-side-foot { border-top: 1px solid var(--po-on-nav-line, rgba(255,255,255,.13)); padding: 10px 16px; color: var(--po-on-nav-muted, rgba(255,255,255,.56)); font-size: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* Main column -------------------------------------------------------------- */
.paintops-shell .po-shell-main { display: flex; flex-direction: column; min-width: 0; }
/* The top bar stays white ON PURPOSE. White content column against a navy
 * rail is the whole layout idea; a second dark band would close the page in. */
.paintops-shell .po-topbar {
	background: var(--po-card-bg, #fff);
	border-bottom: 1px solid var(--po-card-border, #dde4ea);
	display: flex; align-items: center; gap: var(--po-s3, 12px);
	padding: 10px var(--po-s5, 24px);
	position: sticky; top: 0; z-index: 30;
}
.paintops-shell .po-topbar-spacer { flex: 1 1 auto; }
.paintops-shell .po-topbar-who { color: var(--po-text-muted, #5b6673); font-size: var(--po-fs-meta, 13px); }
.paintops-shell .po-topbar-who strong { color: var(--po-text, #2b3440); font-weight: 600; }

/* App-wide job search box living in the top bar next to + New (Mike
 * 2026-09-10). Sits right-aligned before the user + New button; its
 * suggestions dropdown overhangs below the sticky header. */
.paintops-shell .po-topbar .po-jobs-search { flex: 0 1 300px; min-width: 150px; }
.paintops-shell .po-topbar .po-jobs-search-input { height: 34px; border-radius: var(--po-radius-xs, 4px); font-size: var(--po-fs-body, 14px); }
@media (max-width: 620px) {
	.paintops-shell .po-topbar-who { display: none; }
	.paintops-shell .po-topbar .po-jobs-search { flex: 1 1 auto; min-width: 0; }
}
.paintops-shell .po-side-toggle { display: none; border: 1px solid var(--po-input-border, #ccd6de); background: var(--po-card-bg, #fff); border-radius: var(--po-radius-xs, 4px); padding: 5px 8px; cursor: pointer; line-height: 1; color: var(--po-text, #2b3440); }
/* SVG hamburger (font-independent, always high-contrast) */
.paintops-shell .po-side-toggle .po-side-ic { width: 22px; height: 22px; opacity: 1; }

/* + New button + menu (top bar) */
.paintops-shell .po-new { position: relative; }
/* The one primary action in the chrome, so it is the one solid accent fill. */
.paintops-shell .po-new-btn {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--po-accent, #3D5A80); color: #fff !important;
	border: 1px solid var(--po-accent, #3D5A80);
	border-radius: var(--po-radius-xs, 4px); padding: 8px 13px; font-weight: 600; font-size: var(--po-fs-body, 14px);
	cursor: pointer; text-decoration: none; list-style: none;
}
.paintops-shell .po-new-btn::-webkit-details-marker { display: none; }
.paintops-shell .po-new-btn .po-side-ic { width: 18px; height: 18px; opacity: 1; }
.paintops-shell .po-new-btn:hover { filter: brightness(1.07); }
.paintops-shell .po-new-btn:focus-visible { outline: 2px solid var(--po-accent, #3D5A80); outline-offset: 2px; }
/* A menu genuinely floats, so this keeps its shadow. */
.paintops-shell .po-new-menu {
	position: absolute; right: 0; top: calc(100% + 6px);
	background: var(--po-menu-bg, #fff); border: 1px solid var(--po-menu-border, #dde4ea); border-radius: var(--po-radius-sm, 5px);
	box-shadow: 0 8px 24px rgba(16,24,40,.13);
	min-width: 240px; padding: var(--po-s1, 4px); z-index: 50;
}
.paintops-shell .po-new-menu a {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px; border-radius: var(--po-radius-xs, 4px); color: var(--po-menu-text, #2b3440) !important;
	text-decoration: none; font-weight: 500; font-size: var(--po-fs-body, 14px);
}
.paintops-shell .po-new-menu a:hover { background: var(--po-menu-hover, #f1f5f9); }
.paintops-shell .po-new-menu .po-side-ic { width: 18px; height: 18px; color: var(--po-accent, #3D5A80); }

/* Content area: a comfortable capped column (Mike 2026-09-10), left-aligned
 * next to the sidebar, rather than stretching full-width edge-to-edge, which
 * read busier than the approved mockup. Wide content (big tables) still
 * scrolls inside its own overflow container, so the cap never clips it. */
/* (2026-09-13 visual pass) Responsive use of space: the column was capped at
 * 1080px on every monitor, so a 27in screen showed the same narrow strip as a
 * 15in laptop with a third of the width empty. The cap now steps up once, at
 * 1500px of viewport, which is enough for the wide financial tables to stop
 * scrolling inside themselves without letting body text run to an unreadable
 * measure. */
.paintops-shell .paintops-app-canvas-inner { max-width: 1080px !important; margin: 0 !important; padding: var(--po-s5, 24px) var(--po-s6, 32px) 48px !important; }
@media (min-width: 1500px) {
	.paintops-shell .paintops-app-canvas-inner { max-width: 1320px !important; padding-left: 40px !important; padding-right: 40px !important; }
}

.paintops-shell .po-shell-backdrop { display: none; }

/* Responsive: off-canvas sidebar under 900px --------------------------------*/
@media screen and (max-width: 900px) {
	.paintops-shell .po-shell { grid-template-columns: 1fr; }
	.paintops-shell .po-side {
		position: fixed; left: 0; top: 0; width: 260px; height: 100vh; height: 100dvh;
		transform: translateX(-100%); transition: transform .22s ease;
		box-shadow: 0 0 32px rgba(0,0,0,.22);
	}
	.paintops-shell .po-shell.is-open .po-side { transform: none; }
	.paintops-shell .po-side-toggle { display: inline-flex; align-items: center; }
	.paintops-shell .po-shell.is-open .po-shell-backdrop {
		display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 35;
	}
	.paintops-shell .paintops-app-canvas-inner { padding: var(--po-s4, 16px) var(--po-s4, 16px) 40px !important; }
}

.po-side-foot .po-side-wpadmin{color:var(--po-on-nav,rgba(255,255,255,.80));text-decoration:none;font-weight:600;}
.po-side-foot .po-side-wpadmin:hover{text-decoration:underline;}
/* Sign out (2026-09-20). Same treatment as the WP Admin link beside it:
 * the footer sits on the dark nav, so it needs the on-nav ink, and the
 * footer's own rules do not reach an <a>. Underlined on hover only, so the
 * footer stays quiet. */
.po-side-foot a.po-side-logout{color:var(--po-on-nav,rgba(255,255,255,.80));text-decoration:none;font-weight:600;}
.po-side-foot a.po-side-logout:hover{text-decoration:underline;}
/* Hover ink pinned (Mike 2026-10-01: "hovering over WP Admin and Sign out
 * is dark and makes the text almost invisible"). The two rules above set
 * the resting colour only, so a theme's own a:hover (dark ink on a light
 * page) won on hover and painted dark text on the dark rail. Same !important
 * the nav links use, since the theme's rule can be arbitrarily specific. */
.paintops-shell .po-side-foot a:hover,
.paintops-shell .po-side-foot a:focus { color: var(--po-on-nav-strong, #fff) !important; text-decoration: underline; }

/* Phones keep the bottom bar, even in shell mode (Mike 2026-09-13) ----------
 * The rule at the top of this file hid the bottom nav on EVERY device on the
 * grounds that the sidebar replaces it. That holds on desktop, but under
 * 900px the sidebar goes off-canvas behind the hamburger, so a phone was
 * left with no always-visible navigation at all: the bottom bar was gone and
 * the only way anywhere was to open the drawer first. Since the sidebar
 * layout is ON by default (paintops_seed_default_options), that hit every
 * new install's phone.
 *
 * So below the bottom nav's own 782px breakpoint the bar comes back, and the
 * hamburger drawer stays available beside it for the full menu. The markup is
 * already on every app route (paintops_render_app_nav() runs in shell mode
 * too, the shell only hid its output), so this is purely a display fix.
 *
 * Both the rule above and these carry !important and the same specificity, so
 * these win by coming later in the file. Keep them last. */
@media screen and (max-width: 782px) {
	.paintops-shell .paintops-bottomnav { display: flex !important; }
	/* The "More" sheet and its backdrop manage their own [hidden] attribute
	 * (app-nav.js), so only un-hide the shown state. */
	.paintops-shell .pbn-sheet:not([hidden]) { display: block !important; }
	.paintops-shell .pbn-sheet-backdrop:not([hidden]) { display: block !important; }
	/* Clear the fixed bar. body.paintops-nav-bottom-active already gets
	 * --pbn-clear padding (app-nav.css), but in shell mode the scrolling
	 * column is the shell's content box, so pad that too or the last rows
	 * sit under the bar. */
	.paintops-shell .paintops-app-canvas-inner {
		padding-bottom: calc(16px + var(--pbn-clear, 100px)) !important;
	}
	/* And hide the top bar's "+ New" here (Mike 2026-09-13). Once the bottom
	 * bar is back, its raised "+" is the New control on a phone and opens the
	 * same chooser, so two "+ New" buttons were competing on one small screen.
	 * Safe to hide unconditionally: both controls are gated on the same
	 * permission expression ($is_staff || paintops_user_can_create_job), so a
	 * user with no "+" in the bottom bar has no "+ New" up here either, and
	 * nothing is lost. The classic (non-shell) app bar needs no equivalent:
	 * app-nav.css already hides it whole below 782px. */
	.paintops-shell .po-topbar .po-new,
	.paintops-shell .po-topbar .po-new-btn { display: none !important; }

	/* ONE MENU ON A PHONE (Mike 2026-09-20: "there are 2 menus... hide the
	 * top menu on the mobile app").
	 *
	 * Below this width the bottom bar is back, so the hamburger beside the
	 * search box was a second, competing way into the same destinations, and
	 * the two lists were not even the same: the drawer had Checkup and the
	 * sheet did not. The More sheet now carries everything the drawer did,
	 * including the version, who you are signed in as, and an administrator's
	 * WP Admin link, so nothing is lost by hiding this.
	 *
	 * 782px ON PURPOSE, matching the bottom nav's own breakpoint exactly.
	 * The drawer is still the only menu between 782 and 900px, where the
	 * sidebar is off-canvas and there is no bottom bar, so the hamburger has
	 * to survive there. Do not raise this to 900. */
	.paintops-shell .po-side-toggle { display: none !important; }
	/* The spacer sits BEFORE the search in the DOM, where its job is pushing
	 * "signed in as" and "+ New" to the right. Both are hidden at this width,
	 * so with the hamburger gone too it was just holding 55px of empty space
	 * on the left and pushing the search box off-centre. */
	.paintops-shell .po-topbar-spacer { display: none; }
	.paintops-shell .po-topbar { gap: 10px; }
}