/*
	Theme layer.

	Loaded after the template's own stylesheets and before any page css, so it
	restyles the shared chrome (topbar, cards, forms, tables) without touching
	core.css / components.css / pages.css / menu.css, and without overruling a
	page that deliberately styles itself.

	The panel is read all day and is mostly tables of serials, dates and counts,
	so this leans dense and quiet: hairline borders instead of shadow, tinted
	status chips instead of saturated pills, and colour reserved for the things
	that carry meaning.

	Retheming means editing the tokens in :root, not hunting through the rules.
*/

:root {
	/* Surfaces */
	--t-app-bg: #f4f6f9;
	--t-surface: #ffffff;
	--t-surface-sunken: #f8fafc;
	--t-surface-hover: #f1f5fb;

	/* Hairlines - the panel is held together by borders, not shadows. */
	--t-border: #e4e8ee;
	--t-border-strong: #cfd6e0;

	/* Ink */
	--t-ink: #1f2a37;
	--t-ink-soft: #4b5666;
	--t-ink-muted: #6b7688;
	--t-ink-faint: #98a2b3;

	/* Brand */
	--t-primary: #0f6f8c;
	--t-primary-dark: #0c5b73;
	--t-primary-soft: #eef5f7;
	--t-primary-line: #cadfe6;
	--t-topbar: #1b2734;
	--t-topbar-2: #26374a;
	--t-accent: #12a56f;

	/* Semantic - solid for fills, tinted pairs for chips and alerts. */
	--t-success: #12a56f;
	--t-success-bg: #e9f7f1;
	--t-success-line: #bfe6d5;
	--t-success-ink: #0a6f4a;

	--t-info: #1f93c4;
	--t-info-bg: #e9f4fa;
	--t-info-line: #bfdff0;
	--t-info-ink: #16657f;

	--t-warning: #d99420;
	--t-warning-bg: #fdf5e6;
	--t-warning-line: #f2ddb0;
	--t-warning-ink: #8a5c0c;

	--t-danger: #dc4444;
	--t-danger-bg: #fdeded;
	--t-danger-line: #f6cccc;
	--t-danger-ink: #a32626;

	/* Purple has no semantic role in the chrome, but the equipment and
	   incident pages use it as a fifth status colour. */
	--t-purple: #6366a8;

	/* Incident and inspection rows are tinted by status - an operator reads
	   these at a glance, so they keep the exact weights they had. Harmonising
	   their hue would trade real discriminability for tidiness. */
	--t-row-red-soft: #f3d7d5;
	--t-row-red: #f6b3b4;
	--t-row-blue: #b3d5f6;
	--t-row-purple: #d4b3f6;
	--t-row-green: #d6f3d5;

	/* Shape - tight radii; data panels should read precise, not bubbly. */
	--t-radius: 8px;
	--t-radius-sm: 6px;
	--t-radius-xs: 4px;

	/* Elevation - only things that float get a shadow. */
	--t-shadow-sm: 0 1px 2px rgba(16, 30, 54, .05);
	--t-shadow: 0 4px 12px -4px rgba(16, 30, 54, .12), 0 1px 3px rgba(16, 30, 54, .06);
	--t-shadow-lg: 0 16px 40px -12px rgba(16, 30, 54, .28);
	--t-ring: 0 0 0 3px rgba(15, 111, 140, .18);

	--t-control-h: 36px;
	--t-ease: 140ms cubic-bezier(.4, 0, .2, 1);
}


/* ---------------------------------------------------------------- base -- */

html,
body {
	background: var(--t-app-bg);
}

body {
	color: var(--t-ink-soft);
	font-size: 13px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--t-ink);
	font-weight: 600;
}

a {
	color: var(--t-primary);
	transition: color var(--t-ease);
}

a:hover,
a:focus {
	color: var(--t-primary-dark);
}

::selection {
	background: rgba(15, 111, 140, .16);
}

hr {
	border-top-color: var(--t-border);
}

/* Serials, dates and counts sit in columns, so digits must share a width -
   this is what stops numeric columns looking ragged. */
.table,
.pagination,
input,
select,
textarea,
.label,
.badge {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* Keyboard users get a visible ring; pointer users do not. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--t-primary);
	outline-offset: 2px;
}

* {
	scrollbar-width: thin;
	scrollbar-color: var(--t-border-strong) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background: var(--t-border-strong);
	border: 3px solid transparent;
	border-radius: 999px;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--t-ink-faint);
	border: 3px solid transparent;
	background-clip: content-box;
}


/* ------------------------------------------------------------- topbar -- */

#topnav .topbar-main {
	background-color: var(--t-topbar);
	background-image: linear-gradient(180deg, var(--t-topbar-2), var(--t-topbar));
}

.logo {
	font-size: 28px;
	letter-spacing: .3px;
}

.logo span span {
	color: var(--t-accent) !important;
}

#topnav .topbar-main .nav > li > a {
	border-radius: var(--t-radius-sm);
	font-weight: 500;
	padding: 0 14px;
	transition: background-color var(--t-ease);
}

#topnav .topbar-main .nav > li > a:hover {
	background: rgba(255, 255, 255, .08) !important;
}

#topnav .topbar-main .navbar-nav > .open > a {
	background-color: rgba(255, 255, 255, .13) !important;
}

#topnav .navbar-custom {
	background-color: var(--t-surface);
	border-bottom: 1px solid var(--t-border);
}


/* ------------------------------------------------------- main nav bar -- */

/* menu.css defines the whole dropdown only inside its own min-width:992px
   block - below that a submenu is a plain indented list inside the white
   drawer, and `> li > a:after` is the caret's position. Styling either
   unscoped turned the mobile drawer into a floating card and replaced its
   caret with a bar, so everything here stays behind the same breakpoint. */
@media (min-width: 992px) {
	#topnav .navigation-menu > li > a {
		color: var(--t-ink-muted);
		font-weight: 500;
		transition: color var(--t-ease), box-shadow var(--t-ease);
	}

	#topnav .navigation-menu > li > a i {
		color: var(--t-ink-faint);
		transition: color var(--t-ease);
	}

	/* Underline the open / active section so the current area is readable at
	   a glance - the template only changed the text colour. An inset shadow
	   does it without touching :after, which the caret owns, and without the
	   2px of layout a border would add. */
	#topnav .navigation-menu > li:hover > a,
	#topnav .navigation-menu > li.active > a {
		background-color: transparent;
		box-shadow: inset 0 -2px 0 var(--t-primary);
		color: var(--t-primary);
	}

	#topnav .navigation-menu > li:hover > a i,
	#topnav .navigation-menu > li.active > a i {
		color: var(--t-primary);
	}

	#topnav .navigation-menu > li .submenu {
		border: 1px solid var(--t-border);
		border-radius: 0 0 var(--t-radius) var(--t-radius);
		box-shadow: var(--t-shadow);
		padding: 8px 0;
	}

	/* The desktop block in menu.css zeroes the inner list's padding-left - the
	   LTR side. In RTL the browser's own 40px start padding lands on the right
	   instead, so every megamenu item sat off its own edge with dead space
	   beside it. The matching padding-right:0 exists, but in the max-width:991px
	   block, so it only ever reached the mobile drawer. */
	#topnav .navigation-menu > li .submenu li ul {
		padding-right: 0;
	}

	#topnav .navigation-menu > li .submenu li a {
		color: var(--t-ink-soft);
		transition: background-color var(--t-ease), color var(--t-ease);
	}

	#topnav .navigation-menu > li .submenu li a:hover {
		background: var(--t-primary-soft);
		color: var(--t-primary);
	}
}


/* --------------------------------------------------------- page title -- */

.page-title {
	color: var(--t-ink);
	font-size: 19px;
	font-weight: 600;
	line-height: 58px;
	letter-spacing: -.2px;
}

.header-title {
	color: var(--t-ink);
	font-size: 14px;
	font-weight: 600;
}


/* --------------------------------------------------- cards and panels -- */

.card-box,
.panel,
.widget-box {
	background-color: var(--t-surface);
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	box-shadow: var(--t-shadow-sm);
}

.panel-heading {
	border-bottom: 1px solid var(--t-border);
	border-radius: var(--t-radius) var(--t-radius) 0 0;
	font-weight: 600;
}

.panel-default > .panel-heading {
	background: var(--t-surface-sunken);
	color: var(--t-ink);
}

.panel-footer {
	background: var(--t-surface-sunken);
	border-top: 1px solid var(--t-border);
	border-radius: 0 0 var(--t-radius) var(--t-radius);
	color: var(--t-ink-muted);
}

.well {
	background: var(--t-surface-sunken);
	border-color: var(--t-border);
	border-radius: var(--t-radius);
	box-shadow: none;
}


/* ------------------------------------------------------- record header -- */

/* Every detail page opens by naming one record and listing a few facts about
   it. The shape is always the same: identity with its actions facing them over
   a rule, then a strip of facts with the record's location or status across
   from it. base/equipment and base/services_place each grew their own copy of
   this before it was wanted on four more pages, so it lives here once instead
   of in six page stylesheets. */

.rec-head {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 14px;
	padding-bottom: 13px;
	border-bottom: 1px solid var(--t-border);
}

.rec-identity {
	margin-left: 16px;
}

.rec-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--t-ink);
}

/* Secondary parts of the name - a brand and model behind a type, say - are
   quieter and separated by a dot rather than punctuation in the template. */
.rec-title span {
	font-size: 15px;
	font-weight: normal;
	color: var(--t-ink-muted);
}

.rec-title span::before {
	content: "\00b7";
	margin: 0 6px;
	color: var(--t-ink-faint);
}

.rec-sub {
	margin-top: 7px;
	font-size: 12px;
	color: var(--t-ink-muted);
}

.rec-sub > span + span {
	margin-right: 16px;
}

.rec-sub code,
.rec-aside code {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	background-color: var(--t-surface-sunken);
	font-size: 12px;
	color: var(--t-ink-soft);
	direction: ltr;
	unicode-bidi: embed;
}

/* A classification that reads as a chip rather than as more of the name. */
.rec-tag {
	display: inline-block;
	margin-left: 7px;
	padding: 2px 9px;
	border-radius: 3px;
	background-color: var(--t-surface-sunken);
	font-size: 11px;
	color: var(--t-ink-muted);
}

/* Grows into whatever the identity leaves and pins its buttons to the far
   edge. It has to grow to hold that edge, but it must stay shrinkable:
   flex-shrink 0 looked right on a two button card and pushed a four button one
   wider than the screen instead of wrapping. */
.rec-actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	/* Even margins on the buttons, pulled back here, so the bar centres against
	   the identity exactly and wrapped rows keep the same 6px gap. */
	margin: -3px;
}

.rec-actions .btn {
	margin: 3px;
}

.rec-actions .btn i {
	margin-left: 5px;
}

.rec-meta {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 14px;
	padding: 12px 15px;
	border-radius: var(--t-radius-xs);
	background-color: var(--t-surface-sunken);
}

.rec-facts {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	font-size: 13px;
}

.rec-facts dt {
	-ms-flex: none;
	flex: none;
	font-weight: normal;
	color: var(--t-ink-muted);
}

.rec-facts dt::after {
	content: ":";
}

.rec-facts dd {
	-ms-flex: none;
	flex: none;
	margin: 0 6px 0 0;
	color: var(--t-ink);
}

.rec-facts dd + dt {
	margin-right: 22px;
}

/* The half facing the facts across the strip - where the record is, or what
   state it is in. min-width lets a long one wrap rather than widen the card. */
.rec-aside {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	font-size: 13px;
	color: var(--t-ink-soft);
}

.rec-aside a {
	color: var(--t-primary);
}

.rec-aside .badge {
	margin-left: 6px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: normal;
}

@media (max-width: 767px) {
	.rec-sub > span {
		display: block;
		margin-top: 4px;
	}

	.rec-sub > span + span {
		margin-right: 0;
	}
}


/* ------------------------------------------------------------ buttons -- */

.btn {
	border-radius: var(--t-radius-sm);
	border-width: 1px;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	padding: 7px 14px;
	transition: background-color var(--t-ease), border-color var(--t-ease),
		color var(--t-ease), box-shadow var(--t-ease);
}

.btn:focus-visible {
	box-shadow: var(--t-ring);
}

.btn-sm,
.btn-group-sm > .btn {
	font-size: 12px;
	padding: 5px 11px;
}

.btn-primary,
.btn-custom {
	background-color: var(--t-primary) !important;
	border-color: var(--t-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active {
	background-color: var(--t-primary-dark) !important;
	border-color: var(--t-primary-dark) !important;
}

.btn-success { background-color: var(--t-success) !important; border-color: var(--t-success) !important; }
.btn-info    { background-color: var(--t-info)    !important; border-color: var(--t-info)    !important; }
.btn-warning { background-color: var(--t-warning) !important; border-color: var(--t-warning) !important; }
.btn-danger  { background-color: var(--t-danger)  !important; border-color: var(--t-danger)  !important; }

.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: #0e8c5e !important; border-color: #0e8c5e !important; }
.btn-info:hover,    .btn-info:focus,    .btn-info:active    { background-color: #197ea9 !important; border-color: #197ea9 !important; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background-color: #bd7f16 !important; border-color: #bd7f16 !important; }
.btn-danger:hover,  .btn-danger:focus,  .btn-danger:active  { background-color: #c53a3a !important; border-color: #c53a3a !important; }

.btn-default {
	background-color: var(--t-surface);
	border-color: var(--t-border-strong);
	color: var(--t-ink-soft);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	background-color: var(--t-surface-sunken);
	border-color: var(--t-ink-faint);
	color: var(--t-ink);
}

.btn-group > .btn:first-child:not(:last-child) {
	border-radius: 0 var(--t-radius-sm) var(--t-radius-sm) 0;
}

.btn-group > .btn:last-child:not(:first-child) {
	border-radius: var(--t-radius-sm) 0 0 var(--t-radius-sm);
}

/* Row actions repeat on every line, so a wall of solid colour swamps the data
   they belong to. Quiet by default, coloured on hover. */
/* btn-icon was an unstyled marker before this file gave it meaning, and a third
   of its uses carry a label beside the icon. So the base rule only sizes the
   button - min-width keeps an icon-only one compact, the padding matches .btn so
   the two never sit at different heights, and a labelled one keeps whatever
   colour its variant asks for.

   The quiet treatment is what a table of row actions needs, where a column of
   solid colour blocks swamps the data beside it - so :has scopes it to the
   buttons that really are just an icon. A browser without :has drops those
   rules and keeps the coloured button, which is what the page did before. */
.btn.btn-icon {
	min-width: 30px;
	padding: 7px 8px;
	text-align: center;
}

.btn.btn-icon:has(> i:only-child) {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var(--t-ink-soft) !important;
}

.btn.btn-icon:has(> i:only-child):hover,
.btn.btn-icon:has(> i:only-child):focus {
	background-color: var(--t-surface-hover) !important;
	color: var(--t-ink) !important;
}

.btn.btn-icon.btn-primary:has(> i:only-child):hover { background-color: var(--t-primary-soft) !important; color: var(--t-primary) !important; }
.btn.btn-icon.btn-success:has(> i:only-child):hover { background-color: var(--t-success-bg) !important; color: var(--t-success-ink) !important; }
.btn.btn-icon.btn-warning:has(> i:only-child):hover { background-color: var(--t-warning-bg) !important; color: var(--t-warning-ink) !important; }
.btn.btn-icon.btn-danger:has(> i:only-child):hover  { background-color: var(--t-danger-bg)  !important; color: var(--t-danger-ink)  !important; }
.btn.btn-icon.btn-info:has(> i:only-child):hover    { background-color: var(--t-info-bg)    !important; color: var(--t-info-ink)    !important; }


/* -------------------------------------------------------------- forms -- */

.form-control {
	border-color: var(--t-border-strong);
	border-radius: var(--t-radius-sm);
	color: var(--t-ink);
	font-size: 13px;
	height: var(--t-control-h);
	box-shadow: none;
	transition: border-color var(--t-ease), box-shadow var(--t-ease);
}

textarea.form-control {
	height: auto;
}

.form-control:focus {
	border-color: var(--t-primary);
	box-shadow: var(--t-ring);
}

.form-control::placeholder {
	color: var(--t-ink-faint);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	background-color: var(--t-surface-sunken);
	color: var(--t-ink-muted);
}

/* Field labels are signposts, not content - smaller and quieter than the
   value they label. */
label,
.control-label {
	color: var(--t-ink-muted);
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 5px;
}

.help-block {
	color: var(--t-ink-muted);
	font-size: 12px;
}

/* select2 ships its own chrome; pull it onto the same tokens. */
.select2-container .select2-selection--single {
	border-color: var(--t-border-strong);
	border-radius: var(--t-radius-sm);
	height: var(--t-control-h);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--t-ink);
	line-height: 34px;
}

.select2-container--default .select2-selection--multiple {
	border-color: var(--t-border-strong);
	border-radius: var(--t-radius-sm);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--t-primary);
	box-shadow: var(--t-ring);
}

.select2-dropdown {
	border-color: var(--t-border-strong);
	border-radius: var(--t-radius-sm);
	box-shadow: var(--t-shadow);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--t-primary);
}


/* ------------------------------------------------------------- tables -- */

.table {
	font-size: 13px;
}

.table > thead > tr > th {
	background: var(--t-surface-sunken);
	border-bottom: 1px solid var(--t-border-strong) !important;
	border-top: 0;
	color: var(--t-ink-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1px;
	padding: 10px 12px;
	vertical-align: middle;
	white-space: nowrap;
}

.table > tbody > tr > td {
	border-top-color: var(--t-border);
	color: var(--t-ink-soft);
	padding: 9px 12px;
	vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--t-surface-sunken);
}

.table-hover > tbody > tr:hover,
.table-striped > tbody > tr:hover {
	background-color: var(--t-surface-hover);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
	border-color: var(--t-border);
}

.table-responsive {
	border-color: var(--t-border);
	border-radius: var(--t-radius-sm);
}


/* ------------------------------------------------ status chips, badges -- */

/* Solid pills shout on every row. A tint plus dark text reads as a status
   without competing with the values beside it. */
.label,
.badge {
	border-radius: var(--t-radius-xs);
	border: 1px solid transparent;
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 16px;
	padding: 2px 8px;
}

.label.label-default {
	background-color: var(--t-surface-sunken);
	border-color: var(--t-border-strong);
	color: var(--t-ink-muted);
}

.label.label-primary {
	background-color: var(--t-primary-soft);
	border-color: var(--t-primary-line);
	color: var(--t-primary-dark);
}

.label.label-success {
	background-color: var(--t-success-bg);
	border-color: var(--t-success-line);
	color: var(--t-success-ink);
}

.label.label-info {
	background-color: var(--t-info-bg);
	border-color: var(--t-info-line);
	color: var(--t-info-ink);
}

.label.label-warning {
	background-color: var(--t-warning-bg);
	border-color: var(--t-warning-line);
	color: var(--t-warning-ink);
}

.label.label-danger {
	background-color: var(--t-danger-bg);
	border-color: var(--t-danger-line);
	color: var(--t-danger-ink);
}

/* Badges stay solid - they are counts on a control, not a status on a row. */
.badge {
	background-color: var(--t-ink-muted);
	border-radius: 999px;
	color: #fff;
}


/* ------------------------------------------------------------- alerts -- */

/* An accent rail on the reading edge marks severity without tinting the whole
   block into unreadability. */
.alert {
	background-color: var(--t-surface);
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius-sm);
	border-right: 3px solid var(--t-ink-faint);
	box-shadow: var(--t-shadow-sm);
	color: var(--t-ink);
	font-size: 13px;
	padding: 11px 14px;
}

.alert-success {
	background-color: var(--t-success-bg);
	border-color: var(--t-success-line);
	border-right-color: var(--t-success);
	color: var(--t-success-ink);
}

.alert-info {
	background-color: var(--t-info-bg);
	border-color: var(--t-info-line);
	border-right-color: var(--t-info);
	color: var(--t-info-ink);
}

.alert-warning {
	background-color: var(--t-warning-bg);
	border-color: var(--t-warning-line);
	border-right-color: var(--t-warning);
	color: var(--t-warning-ink);
}

.alert-danger {
	background-color: var(--t-danger-bg);
	border-color: var(--t-danger-line);
	border-right-color: var(--t-danger);
	color: var(--t-danger-ink);
}

/* The dismiss control was a faint hairline glyph; make it a real target. */
.alert .close,
.modal-header .close {
	color: inherit;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	opacity: .45;
	text-shadow: none;
	transition: opacity var(--t-ease);
}

.alert .close:hover,
.modal-header .close:hover {
	opacity: .9;
}

/* Bootstrap keeps the button inside by padding the alert 35px on that side and
   pulling the button 21px into it. The padding above is the whole alert's, so
   it undid the first half and the button sat 7px past the border. It is placed
   against the alert itself instead, level with the first line. */
.alert-dismissable,
.alert-dismissible {
	position: relative;
	padding-left: 40px;
}

.alert-dismissable .close,
.alert-dismissible .close {
	position: absolute;
	top: 10px;
	left: 14px;
}


/* ------------------------------------------------------------- modals -- */

.modal-content {
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	box-shadow: var(--t-shadow-lg);
}

.modal-backdrop.in {
	opacity: .5;
}

.modal-header {
	border-bottom: 1px solid var(--t-border);
}

.modal-title {
	color: var(--t-ink);
	font-size: 15px;
	font-weight: 600;
}

.modal-footer {
	border-top: 1px solid var(--t-border);
}


/* -------------------------------------------- dropdowns and pagination -- */

.dropdown-menu {
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	box-shadow: var(--t-shadow);
	padding: 5px;
}

.dropdown-menu > li > a {
	border-radius: var(--t-radius-xs);
	color: var(--t-ink-soft);
	font-size: 13px;
	padding: 7px 12px;
	transition: background-color var(--t-ease), color var(--t-ease);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--t-primary-soft);
	color: var(--t-primary);
}

.dropdown-menu .divider {
	background-color: var(--t-border);
}

.pagination > li > a,
.pagination > li > span {
	border-color: var(--t-border);
	color: var(--t-ink-soft);
	font-size: 13px;
	margin: 0 2px;
	min-width: 32px;
	padding: 6px 10px;
	text-align: center;
	border-radius: var(--t-radius-xs) !important;
	transition: background-color var(--t-ease), color var(--t-ease),
		border-color var(--t-ease);
}

.pagination > li > a:hover,
.pagination > li > span:hover {
	background-color: var(--t-surface-hover);
	border-color: var(--t-border-strong);
	color: var(--t-primary);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
	background-color: var(--t-primary);
	border-color: var(--t-primary);
}

.pagination > .disabled > a,
.pagination > .disabled > span {
	background-color: var(--t-surface-sunken);
	border-color: var(--t-border);
	color: var(--t-ink-faint);
}


/* --------------------------------------------------------------- tabs -- */

.nav-tabs {
	border-bottom-color: var(--t-border);
}

.nav-tabs > li > a {
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--t-ink-muted);
	font-weight: 500;
	margin-left: 4px;
	margin-right: 0;
	padding: 9px 14px;
	transition: color var(--t-ease), border-color var(--t-ease);
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
	background-color: transparent;
	border-color: transparent;
	border-bottom-color: var(--t-border-strong);
	color: var(--t-ink);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid var(--t-primary);
	color: var(--t-primary);
	font-weight: 600;
}


/* --------------------------------------------------------- login page -- */

/* The login box lets half the picture behind it through; its fields and
   text stay solid. */
.wrapper-page .card-box {
	background-color: rgba(255, 255, 255, 0.5);
	background-color: color-mix(in srgb, var(--t-surface) 50%, transparent);
	border-radius: var(--t-radius);
	box-shadow: var(--t-shadow-lg);
	padding: 28px 26px;
}

.wrapper-page .logo {
	float: none;
	display: inline-block;
	color: var(--t-topbar) !important;
}


/* --------------------------------------------------- the date picker -- */

/* The Persian calendar the pages open for a date - jdatetimepicker - comes
   with its own grey striped table and Bootstrap 3 buttons. It is the panel's
   own card here: a quiet head naming the day picked, one box to a day with
   the chosen day filled, today ringed, and the days a page has ruled out
   faint. The plugin writes its markup with data-name attributes, so that is
   what these rules take hold of. */

.popover[id^="popover"] {
	min-width: 286px;
	padding: 0;
	border: 1px solid var(--t-border);
	border-radius: var(--t-radius);
	box-shadow: 0 12px 30px rgba(16, 24, 40, .14);
	font-family: inherit;
}

.popover[id^="popover"] > .arrow {
	display: none;
}

.popover-title[data-name="md-datetimepicker-title"] {
	/* the plugin sets Tahoma here; the panel's own face reads better */
	font-family: inherit;
	padding: 10px 14px;
	border-bottom: 1px solid var(--t-border);
	border-radius: var(--t-radius) var(--t-radius) 0 0;
	background-color: var(--t-surface-sunken);
	font-size: 13px;
	font-weight: 600;
	color: var(--t-ink);
}

[data-name="md-datetimepicker-popovercontent"] {
	padding: 10px 12px 12px;
}

[data-name="md-persiandatetimepicker"] table.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: transparent !important;
}

[data-name="md-persiandatetimepicker"] table.table td {
	padding: 2px !important;
	border: 0 !important;
}

/* the month and the year, with the way to the ones on either side */
table[data-name="md-persiandatetimepicker-headertable"] {
	margin-bottom: 8px !important;
}

table[data-name="md-persiandatetimepicker-headertable"] .btn {
	padding: 4px 8px;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 13px;
	color: var(--t-ink-muted);
}

table[data-name="md-persiandatetimepicker-headertable"] .btn:hover {
	background-color: var(--t-surface-sunken);
	color: var(--t-ink);
}

table[data-name="md-persiandatetimepicker-headertable"] .btn.disabled {
	opacity: .25;
}

[data-name="md-persiandatetimepicker-titlemonth"],
[data-name="md-persiandatetimepicker-titleyear"] {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--t-ink) !important;
}

/* the week days, and one box to a day */
[data-name="md-persiandatetimepicker"] table.table tr[data-name="md-persiandatetimepicker-weekdaysnames"] td {
	padding-bottom: 6px !important;
	font-size: 11px !important;
	font-weight: 600;
	color: var(--t-ink-faint);
}

[data-name="day"],
[data-name="today"],
[data-name="disabled-day"] {
	height: 30px;
	border-radius: var(--t-radius-sm);
	font-size: 12px;
	line-height: 30px;
	transition: background-color var(--t-ease), color var(--t-ease);
}

[data-name="day"]:not([class^="text"]) {
	color: var(--t-ink);
}

[data-name="day"]:hover {
	background-color: var(--t-surface-sunken) !important;
	color: var(--t-ink);
}

[data-name="disabled-day"] {
	opacity: .5;
	color: var(--t-ink-faint) !important;
	cursor: default;
}

[data-name="today"] {
	background: transparent !important;
	box-shadow: inset 0 0 0 1px var(--t-primary);
	color: var(--t-primary) !important;
}

[data-name="today"]:hover {
	background-color: var(--t-primary-soft) !important;
	color: var(--t-primary) !important;
}

/* the day picked; the plugin marks it with Bootstrap's own class */
[data-name="md-persiandatetimepicker"] .bg-primary {
	border-radius: var(--t-radius-sm);
	background-color: var(--t-primary) !important;
	font-weight: 600;
	color: #fff !important;
}

/* the clock, and the way back to today */
[data-name="md-persiandatetimepicker-timepicker"] {
	margin-top: 8px !important;
}

[data-name="md-persiandatetimepicker-timepicker"] input {
	height: 28px !important;
	border: 1px solid var(--t-border) !important;
	border-radius: 4px;
	background-color: var(--t-surface);
	font-size: 12px !important;
	color: var(--t-ink);
}

[data-name="md-persiandatetimepicker-timepicker"] td {
	color: var(--t-ink-faint);
}

[data-name="md-datetimepicker-popovercontent"] a[data-name="go-today"] {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--t-border);
	font-size: 12px;
	color: var(--t-primary) !important;
}


/* ------------------------------------------------------------- footer -- */

.footer {
	background: transparent;
	border-top: 1px solid var(--t-border);
	color: var(--t-ink-faint);
}


/* -------------------------------------------------------------- print -- */

/* Half of this panel is reports that end up on paper - tints and hairlines
   that read on screen disappear in print, so restate them. */
@media print {
	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.card-box,
	.panel {
		border: 1px solid #999;
		box-shadow: none;
	}

	.table > thead > tr > th {
		background: #eee !important;
		border-bottom: 1px solid #666 !important;
		color: #000;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.table > tbody > tr > td {
		border-top-color: #bbb;
		color: #000;
	}

	.table > tbody > tr,
	.table > thead {
		page-break-inside: avoid;
	}

	.label {
		border-color: #666 !important;
		color: #000 !important;
	}
}


/* ---------------------------------------------------------- animation -- */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}