/* Shared chrome for pages using BootstrapHead()/BootstrapFooter() (see BootstrapChrome.php). */

:root {
	--brand-color: #cc5500;
	--brand-color-dark: #a64400;
	--brand-color-darker: #8a3900;
}

body {
	padding-top: 70px;
}

/* Theme: burnt orange. Bootstrap 3 is precompiled CSS (no LESS build step in this
   repo), so the theme is applied as overrides on top of the default navbar-default/
   btn-primary rules rather than recompiled variables. btn-danger stays red - that's
   a safety signal (destructive actions), not a brand color. */
.navbar-default {
	background-color: var(--brand-color);
	border-color: var(--brand-color-dark);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
	color: #fff;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: #fff;
	background-color: var(--brand-color-dark);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
	color: #fff;
	background-color: var(--brand-color-darker);
}

.navbar-default .navbar-toggle {
	border-color: var(--brand-color-dark);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	background-color: var(--brand-color-dark);
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #fff;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
	border-color: var(--brand-color-dark);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
	color: #fff;
	background-color: var(--brand-color);
}

.btn-primary {
	background-color: var(--brand-color);
	border-color: var(--brand-color-dark);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--brand-color-dark);
	border-color: var(--brand-color-darker);
}

@media (max-width: 767px) {
	body {
		padding-top: 60px;
	}
}

/* The nav section label and its dropdown-toggle caret are split into two separate
   anchors (see BootstrapChrome.php) so the label stays a single-click link. Force
   them onto one line - below the 768px breakpoint .navbar-nav>li isn't floated
   (each section stacks full-width), and two plain inline <a> tags inside that li
   were wrapping onto separate lines rather than sitting side by side. */
.navbar-nav .dropdown > a:first-child,
.navbar-nav .dropdown > a.dropdown-toggle {
	display: inline-block;
	float: none;
}

.navbar-nav .dropdown > a:first-child {
	padding-right: 4px;
}

.navbar-nav .dropdown > a.dropdown-toggle {
	padding-left: 6px;
	padding-right: 10px;
}

#AppContent {
	padding-top: 15px;
}

/* iOS Safari auto-zooms into any focused text input/select/textarea with a
   font-size under 16px. Bootstrap 3's .form-control defaults to 14px, which
   triggers it on every field on this app's pages. */
.form-control {
	font-size: 16px;
}

/* css/jsmodal-light.css sets the site-wide Modal to z-index 998/999, which sits
   below Bootstrap's fixed navbar (.navbar-fixed-top is 1030) - without this the
   Modal would render behind the nav on any BootstrapHead() page. */
#modal-overlay, #modal-container {
	z-index: 1050;
}

/* css/jsmodal-light.css also hardcodes #modal-content to a fixed 605px width.
   #modal-container is only given visibility:hidden when closed (not
   display:none), so that fixed-width child stays in layout at all times and
   forces the whole page's mobile layout viewport to expand past the real
   device width to fit it - which is what makes BootstrapHead()'s fixed navbar
   (and the page itself) overflow/horizontally-scroll on mobile, even with no
   Modal ever opened. width:auto lets it shrink to its actual (usually empty)
   content when closed; max-width keeps genuinely wide Modal content from
   reopening the same problem while it's open. */
@media (max-width: 767px) {
	#modal-content {
		width: auto;
		max-width: calc(100vw - 2px);
	}
}

/* Tiger stripes, on by default for every .table rather than needing
   .table-striped added by hand per table. Deliberately more visible than
   Bootstrap's own barely-there .table-striped tint (css/bootstrap.css,
   #f9f9f9) - on ViewEvent.php's Attendance List most of each cell is
   covered by its own <select>, so a whisper-subtle tint was invisible
   anywhere it mattered; #e8e8e8 still reads clearly in the sliver of cell
   background that shows around/behind one. Equal specificity to a page's
   own more-targeted background rules (e.g. ViewEvent.php's .ve-col-selected/
   .ve-col-today column highlights, or its sticky-column .ve-col-name/
   .ve-col-consent), so those still win - they're later in document order (a
   page's own <style> block always follows this linked stylesheet) - meaning
   striping backs off automatically wherever a page already means something
   more specific by a cell's background. A page that wants no striping at
   all (e.g. People.php, whose own per-row status colours it needs to show
   through untouched) can override this the same way - see that page's own
   <style> block for the pattern.
   :not(:has(th)) (2026-08-25, fixed) - replaces an earlier :not(:first-child)
   version, which assumed every table's header row is literally its first
   <tr> (true for most of this app's hand-written tables, none of which wrap
   a header in an actual <thead>) - but a table with NO header row at all
   got its first TWO rows wrongly left white (the 1st from :not(:first-child)
   itself, the 2nd from simply being nth-of-type(even)), not just the first.
   Detecting by content instead of position fixes both cases at once, with
   no changes needed to any table-generating page: this app's header rows
   are consistently a whole row of <th> cells (confirmed across every
   .table-using page checked), so a row is excluded only when it actually
   contains one - a headerless table's first row has no <th> and stripes
   normally like any other row, while a real header row (wherever it sits)
   is still correctly skipped. */
.table > tbody > tr:not(:has(th)):nth-of-type(odd) > td,
.table > tbody > tr:not(:has(th)):nth-of-type(odd) > th {
	background-color: #e8e8e8;
}