/* App-level design, layered on bolster.css (which provides the ORTEC tokens,
   Roboto and light/dark theming). Everything here uses bolster's --bol-* vars
   so it themes automatically in both modes. */

/* bolster themes form controls/tables/modals but not Bootstrap cards - a card
   would stay white in dark mode with unreadable light text. */
.card {
	background-color: var(--bol-color-background-secondary);
	color: var(--bol-color-text-primary);
	border-color: var(--bol-color-border);
}

/* Long ids (emails, "$(...)@clients") have no spaces; let them wrap so tables
   fit their column instead of overflowing. */
.break-anywhere { word-break: break-all; overflow-wrap: anywhere; }

.text-secondary { color: var(--bol-color-text-secondary) !important; }

/* ---- Page shell ---- */
/* The same skeleton Control Tower's routes and pre-trip pages use, so this
   app reads as one of them inside the Relevance shell: a slim filter strip on
   the secondary surface with the filters left and the pill navigation right,
   content on the primary surface below it in bordered sections. No brand bar
   - the shell around the iframe provides the chrome. */
#page { background-color: var(--bol-color-background-primary); min-height: 100vh; }
#topbar {
	position: sticky;
	top: 0;
	z-index: 1045;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--bol-color-background-secondary);
	color: var(--bol-color-text-primary);
	padding: 10px 14px;
	border-bottom: 1px solid var(--bol-color-border);
}
.topbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
/* The page name, where Control Tower's topbar carries its text: 500 weight,
   a touch larger than the controls, on the baseline of the filter fields. */
.page-heading { font-weight: 500; font-size: 1.2em; padding: 0 6px 6px 0; white-space: nowrap; }
/* No overflow container here: the assignee picker on the routes page is
   absolutely positioned inside a table cell, and any overflow-x on an
   ancestor would clip it (an overflow-x:auto ancestor also forces overflow-y
   to auto). A too-wide table scrolls with the page instead. */
#content { padding: 14px; }
.page-intro { color: var(--bol-color-text-secondary); margin: 6px 0 14px; max-width: 72rem; }

/* Filter fields: uppercase caption over a 38px control, one line across. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bol-color-text-secondary);
}
.field select, .field input { font-size: 0.85rem; height: 38px; }
.filter-bar .field select { min-width: 260px; }
/* The free-text search next to the filters (routes, drivers). */
.search-field { flex: 1 1 220px; max-width: 340px; }
.search-field input { width: 100%; }
/* A fixed value where a filter would be: same height and baseline as a control. */
.field-static { height: 38px; display: flex; align-items: center; font-size: .85rem; font-weight: 500; }
.topbar-row .field.actions { margin-left: auto; }
.topbar-row .field.actions label { visibility: hidden; }
.actions-inputs { display: flex; align-items: center; gap: 8px; }

/* Pill navigation - Control Tower's assignment page nav: bordered pills, the
   active one on the selection surface. */
.nav-link-b {
	color: var(--bol-color-text-secondary);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.85rem;
	padding: .4rem .85rem;
	border: 1px solid var(--bol-color-border);
	border-radius: var(--bol-radius-pill);
	white-space: nowrap;
}
.nav-link-b:hover { background-color: var(--bol-color-hover); color: var(--bol-color-text-primary); }
.nav-link-b.active { color: var(--bol-color-primary); background-color: var(--bol-color-selected); border-color: var(--bol-color-selected-border); }

/* The tenant from the Relevance profile; everything is scoped to it. */
.tenant-badge {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bol-color-text-secondary);
	background-color: var(--bol-color-background-tertiary);
	padding: .25rem .6rem;
	border-radius: var(--bol-radius-pill);
	margin-right: .25rem;
}

/* Control Tower's primary button has no border of its own. */
.btn-primary { border: none; }

/* ---- Card headers ---- */
.card-b-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	padding: .85rem 1.1rem;
	border-bottom: 1px solid var(--bol-color-border);
}
.card-b-header .h5 { font-weight: 600; }
.count-badge {
	display: inline-block;
	min-width: 1.5rem;
	text-align: center;
	font-size: .8rem;
	font-weight: 600;
	padding: .1rem .45rem;
	border-radius: 1rem;
	background-color: var(--bol-color-primary-lighter);
	color: var(--bol-color-primary);
}

/* Sections (Control Tower routes.css .section): bordered, brand radius, no
   shadow. Bootstrap's .card gets the same look so every panel matches. */
.card, .section { border-radius: var(--bol-radius); box-shadow: none; }
.section {
	background-color: var(--bol-color-background-secondary);
	border: 1px solid var(--bol-color-border);
	padding: 20px;
	margin: 0 0 20px;
	position: relative;
}
/* Tables inside cards: flush to the card edges, comfortable rows. */
.card .table { margin-bottom: 0; }
.card .table > thead > tr > th { border-top: none; }
.card .table > :not(caption) > * > * { padding: .7rem 1.1rem; }
/* Column captions as pre-trip renders them. */
.table thead th {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--bol-color-text-secondary);
	font-weight: 600;
}
/* Keep row text readable on hover: Bootstrap points the cell colour at its own
   --bs-table-hover-color (#212529, near-black) which is unreadable on the dark
   --bol-color-hover background, so pin it to the theme's primary text colour. */
.table-hover > tbody > tr:hover > * { background-color: var(--bol-color-hover); color: var(--bol-color-text-primary); }

.empty-cell { color: var(--bol-color-text-secondary); padding: 1.5rem 1.1rem; }

/* ---- Chips & badges ---- */
.id-chip {
	font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8rem;
	background-color: var(--bol-color-background-tertiary);
	color: var(--bol-color-text-primary);
	padding: .15rem .45rem;
	border-radius: .35rem;
}
.badge-b {
	display: inline-block;
	font-size: .72rem;
	font-weight: 600;
	padding: .18rem .5rem;
	border-radius: 1rem;
	line-height: 1.2;
}
.badge-type-Customer { background-color: var(--bol-color-primary-lighter); color: var(--bol-color-primary); }
.badge-type-Ortec { background-color: var(--bol-color-accent-lighter); color: var(--bol-color-accent); }
.badge-perm {
	background-color: var(--bol-color-background-tertiary);
	color: var(--bol-color-text-secondary);
	margin: 0 .15rem .15rem 0;
}

/* ---- Lightweight modal (no Bootstrap JS dependency) ---- */
.modal-b {
	position: fixed;
	inset: 0;
	z-index: 1050;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 3.5rem 1rem 1rem;
}
.modal-b[hidden] { display: none; }
body.modal-b-open { overflow: hidden; }
.modal-b-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, .5);
}
.modal-b-dialog {
	position: relative;
	width: 100%;
	max-width: 540px;
	background-color: var(--bol-color-background-secondary);
	color: var(--bol-color-text-primary);
	border: 1px solid var(--bol-color-border);
	border-radius: var(--bol-radius);
	box-shadow: 0 12px 48px rgba(0, 0, 0, .35);
	max-height: calc(100vh - 5rem);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.modal-b-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--bol-color-border);
}
.modal-b-header .h5 { font-weight: 600; }
.modal-b-body { padding: 1.25rem; overflow: auto; }
.modal-b-close {
	border: none;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--bol-color-text-secondary);
	cursor: pointer;
	padding: 0 .25rem;
}
.modal-b-close:hover { color: var(--bol-color-text-primary); }

/* Wide variant for side-by-side content (e.g. the route JSON preview). */
.modal-b-wide { max-width: 1100px; }

/* Stored route / trip payload as tabs: one JSON view at a time. */
.json-tabs {
	border: 1px solid var(--bol-color-border);
	border-radius: .5rem;
	overflow: hidden;
}
.json-tablist {
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .35rem .5rem;
	background-color: var(--bol-color-background-tertiary);
	border-bottom: 1px solid var(--bol-color-border);
}
.json-tab {
	appearance: none;
	border: none;
	background: transparent;
	padding: .35rem .7rem;
	border-radius: .35rem;
	font-size: .78rem;
	font-weight: 600;
	color: var(--bol-color-text-secondary);
	cursor: pointer;
}
.json-tab:hover { color: var(--bol-color-text-primary); }
.json-tab.active {
	background-color: var(--bol-color-background-primary);
	color: var(--bol-color-text-primary);
}
/* Push the Copy button to the far right of the tab strip. */
.json-copy { margin-left: auto; }
.json-body {
	margin: 0;
	padding: .75rem;
	overflow: auto;
	max-height: 60vh;
	font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .78rem;
	line-height: 1.45;
	white-space: pre;
	color: var(--bol-color-text-primary);
	background-color: var(--bol-color-background-primary);
}

/* Configuration page: one collapsible block per section of the department's
   driver app configuration. */
/* One line: marker, then the path as a heading, then the count pushed right.
   The card header wraps by default, which would drop a long path's marker and
   count onto lines of their own. */
.setting-summary { cursor: pointer; list-style: none; justify-content: flex-start; flex-wrap: nowrap; gap: 0; }
.setting-summary .h6 { flex: 1; min-width: 0; }
.setting-summary .count-badge { margin-left: auto; flex: none; }
.setting-summary::-webkit-details-marker { display: none; }
.setting-summary::before { content: '\25B8'; color: var(--bol-color-text-secondary); margin-right: .5rem; }
details[open] > .setting-summary::before { content: '\25BE'; }
details.card > .row { border-top: 1px solid var(--bol-color-border); margin: 0; }