/* 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; }

/* ---- Top navbar ---- */
.app-nav {
	background-color: var(--bol-color-background-secondary);
	border-bottom: 1px solid var(--bol-color-border);
	padding: .6rem 0;
	margin-bottom: 1.5rem;
}
.app-nav .brand {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--bol-color-text-primary);
	text-decoration: none;
	letter-spacing: -.01em;
}
.app-nav .brand .dot { color: var(--bol-color-primary); }
.app-nav .nav-link-b {
	color: var(--bol-color-text-secondary);
	text-decoration: none;
	font-weight: 500;
	padding: .35rem .75rem;
	border-radius: .4rem;
}
.app-nav .nav-link-b:hover { background-color: var(--bol-color-hover); color: var(--bol-color-text-primary); }
.app-nav .nav-link-b.active { color: var(--bol-color-primary); background-color: var(--bol-color-primary-lighter); }

.page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }

/* ---- Department bar ---- */
.dept-bar {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	background-color: var(--bol-color-background-secondary);
	border: 1px solid var(--bol-color-border);
	border-radius: .5rem;
	padding: .75rem 1rem;
}
.dept-bar .form-control { max-width: 280px; }

/* ---- 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);
}

/* 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; }
.table thead th {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	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: .6rem;
	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);
}