/*
 * theme.css — Bootstrap 5 helpers for the customer control panel.
 *
 * After the native-class migration the templates emit BS5 classes
 * (card, form-label, mb-3, dropdown-item, ...); this file only keeps
 * small app-specific rules, BS3-idiom defaults that BS5 does not
 * provide, and low-priority restores so the legacy Klorofil css
 * (main.css, written on top of BS3 core) keeps its look.
 * Loaded after bootstrap5 + main.css, before extra.css.
 */

/* ------------------------------------------------------------------ *
 * Reboot adjustments (BS5 vs BS3 defaults)
 * ------------------------------------------------------------------ */

/* BS5 underlines all links, BS3 did not */
a {
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Legacy classes kept in templates (BS3 core styles, no BS5 equivalent)
 * ------------------------------------------------------------------ */

.radio,
.checkbox {
	position: relative;
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
}

.radio label,
.checkbox label {
	min-height: 20px;
	padding-left: 20px;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}

.radio input[type=radio],
.radio-inline input[type=radio],
.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox] {
	position: absolute;
	margin: 4px 0 0;
	line-height: normal;
}

.radio-inline,
.checkbox-inline {
	position: relative;
	display: inline-block;
	padding-left: 20px;
	margin-bottom: 0;
	font-weight: 400;
	vertical-align: middle;
	cursor: pointer;
}

.thumbnail {
	display: block;
	padding: 4px;
	margin-bottom: 20px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}

/* .hide / .show helpers (BS3, used heavily by the app's JS) */
.hide {
	display: none !important;
}

/* sr-only (BS3/BS4 name; BS5 calls it visually-hidden) */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.hidden-xs {
	display: block !important;
}

@media (max-width: 767px) {
	.hidden-xs {
		display: none !important;
	}
}

/* dl-horizontal (BS3, horizontal only >=768px) */
.dl-horizontal dt {
	text-align: right;
}

@media (min-width: 768px) {
	.dl-horizontal dt {
		float: left;
		width: 160px;
		clear: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.dl-horizontal dd {
		margin-left: 180px;
	}
}

/* ------------------------------------------------------------------ *
 * Validation state: templates render server-side errors with the
 * BS3 "has-error" wrapper class (also toggled from JS)
 * ------------------------------------------------------------------ */

.has-error .form-control,
.has-error .form-select {
	border-color: #a94442;
}

.has-error .form-control:focus,
.has-error .form-select:focus {
	border-color: #843534;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #ce8483;
}

.has-error label,
.has-error .form-label {
	color: #a94442;
}

/* ------------------------------------------------------------------ *
 * Navbar: BS5 makes .navbar a flexbox and .navbar-nav a column —
 * the Klorofil theme is float/block based. Restore the BS3 model.
 * ------------------------------------------------------------------ */

.navbar.navbar-default {
	display: block;
	padding: 0;
	flex-wrap: nowrap;
}

.navbar-fixed-top {
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	z-index: 1030;
}

/* BS3 navbar core contained its floated children with a clearfix — BS5
 * (block layout again here) does not, causing navbar overlap */
.navbar:before,
.navbar:after {
	display: table;
	content: " ";
}

.navbar:after {
	clear: both;
}

/* BS5 makes .container-fluid a flex container. A flex container establishes
 * a new block formatting context, so it can no longer overlap the floated
 * .brand and is pushed below it (two stacked rows). Restore the BS3 block
 * flow so .brand and .container-fluid sit side by side.
 * (.navbar-btn spacing is fully styled by main.css — no BS3 core margins
 * needed here.) */
.navbar .container-fluid {
	display: block;
}

.navbar-nav {
	flex-direction: row;
}

.navbar-nav > li {
	float: left;
}

/* BS3 core made .nav > li > a display: block. Our navbar anchors have no
 * .nav-link class, so BS5 leaves them inline: vertical padding stops
 * affecting layout and floats inside (e.g. the ti-user icon) misalign. */
.navbar-nav > li > a {
	display: block;
}

/* BS5 auto-generates a caret via .dropdown-toggle::after. The navbar toggles
 * use icons only (BS3 showed no caret here either), and the block badge
 * wrappers (.item-visible/.notification-visible) would push the caret onto
 * its own 55px line box, doubling the toggle height. */
.navbar-nav .dropdown-toggle::after {
	display: none;
}

/* Sidebar menu: vertical BS5 pills. Colours are intentionally NOT overridden
 * here: main.css and the reseller styling (/style, loaded last) define the
 * item/active colours (.sidebar .nav li > a, a.active) — do not paint the
 * BS5 pill blue over them. Only the vertical stacking is enforced. */
#sidebar-nav .nav-pills {
	flex-direction: column;
}

/* ------------------------------------------------------------------ *
 * Tabs: templates use BS3 markup (li.active > a[data-bs-toggle=tab]).
 * BS5 toggles .active on the anchor itself, not the li.
 * ------------------------------------------------------------------ */

.nav-tabs {
	border-bottom: 1px solid #ddd;
}

/* main.css (Klorofil) removes the tabs bottom border on the panel-tab
 * card headers (a #ddd line rendered under the tabs on
 * /product/webhosting/...); keep tabs inside card headers bare */
.card > .card-header .nav-tabs {
	border-bottom: none;
}

/* main.css paints the active-tab cover as an absolutely positioned
 * ::after border with no positioned ancestor — Firefox's fractional
 * line-box heights put that white border 1px off the tab bottom,
 * showing a dark line under the active tab. Drop the fragile ::after
 * mask and give the active anchor itself a white bottom border: its
 * border box overlaps the #eaeff2 header divider seamlessly. */
.card.panel-tab .nav-tabs > li.active > a {
	position: relative;
	border-bottom-color: #fff;
}

.card.panel-tab .nav-tabs > li.active > a:after {
	display: none;
}

/* BS5's ul is a flex container: BS3's float/margin-bottom shim breaks the
 * active-tab geometry in Firefox (fractional line heights) and is not
 * needed for the BS5 layout */

.nav-tabs > li > a {
	margin-right: 2px;
	line-height: 1.42857143;
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0;
	padding: 10px 15px;
	display: block;
}

.nav-tabs > li > a:hover {
	border-color: #eeeeee #eeeeee #dddddd;
}

.nav-tabs > li > a.active,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: #555555;
	cursor: default;
	background-color: #fff;
	border: 1px solid #dddddd;
	border-bottom-color: transparent;
}

/* Tab panes outside .tab-content would always be visible in BS5 */
.tab-pane {
	display: none;
}

.tab-pane.active {
	display: block;
}

/* ------------------------------------------------------------------ *
 * Dropdowns: menu items are still BS3-style li > a (main.css styles
 * them); provide the BS3 base so BS5's unstyled anchors look right.
 * ------------------------------------------------------------------ */

.dropdown-menu > li > a {
	display: block;
	clear: both;
	font-weight: 400;
	white-space: nowrap;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	text-decoration: none;
}

/* BS5 removed .input-group-btn: unwrap the wrapper */
.input-group-btn {
	display: contents;
}

/* ------------------------------------------------------------------ *
 * Breadcrumb: markup stays ul.breadcrumb > li (main.css styles it),
 * only the separator content came from BS3 core.
 * ------------------------------------------------------------------ */

.breadcrumb > li {
	display: inline-block;
}

.breadcrumb > li + li:before {
	content: "/\00a0";
	padding: 0 5px;
}

/* ------------------------------------------------------------------ *
 * Misc replacements
 * ------------------------------------------------------------------ */

/* .table .form-control-static was renamed to form-control-plaintext */
.table .form-control-plaintext {
	padding-top: 4px;
	padding-bottom: 0;
	display: table-cell;
}

/* ------------------------------------------------------------------ *
 * BS3 core restoration
 *
 * Bootstrap 3's own component/base styles (bootstrap.css) disappeared
 * with the BS5 upgrade; main.css was written on top of them. These ports
 * reproduce the missing BS3 defaults. Everything here deliberately uses
 * low specificity and never sets a property that main.css already sets,
 * so main.css and the reseller styling (/style, loaded last) keep
 * priority — resellers can change these elements from the database.
 * ------------------------------------------------------------------ */

body {
	line-height: 1.42857143;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.1;
	color: inherit;
	font-weight: 500;
}

/* BS3 core heading/paragraph margins */
h1, h2, h3 {
	margin-top: 20px;
	margin-bottom: 10px;
}

h4, h5, h6 {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* BS3 core: label { margin-bottom: 5px } (BS5 dropped it, which
 * tightened the pitch of plain label lists such as the TLD grid) */
label {
	margin-bottom: 5px;
}

/* BS3 core: buttons do not wrap */
.btn {
	white-space: nowrap;
}

/* BS3 core: block buttons fill their container */
.btn-block {
	display: block;
	width: 100%;
}

/* native color swatch in the .color-picker input-group */
.input-group .colorinput {
	width: 40px;
	min-width: 40px;
	flex: 0 0 40px;
	padding: .25rem;
	cursor: pointer;
}

/* Boxy inputs: square corners and a clearly visible border on every input
 * field (text inputs, selects, textareas, select2 widgets and the search
 * field inside the select2 dropdown). */
.form-control,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
	border-radius: 0;
	border-color: #c9cdd9;
}

.form-control:focus {
	border-color: #6f7a94;
}
/* select2 single-selection widget: exactly as tall as the native
 * .form-control selects it replaced, derived the same way BS5 computes
 * .form-control's height (padding .375rem + line-height 1.5 + 1px borders)
 * so it scales with any font-size. */
.select2-container--default .select2-selection--single {
	height: auto;
	padding: .375rem 0;
	border-radius: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.5;
	padding: 0 2.25rem 0 0.75rem;
}

/* Native .form-control selects carry a 16px BS5 chevron (see the
 * select.form-control rule above); select2's default theme uses a small
 * solid triangle. Use the same chevron on the widget. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	top: 0;
	right: 1px;
	padding-right: 0.75rem;
	box-sizing: border-box;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 12px;
}

.select2-dropdown {
	border-radius: 0;
	border-color: #e1e3ea;
}

/* select2 stores its width as an inline style at init time; when
 * initialized in a just-shown modal stale px widths can end up stored.
 * Force the standard widths instead: full row, or flexed inside
 * input-groups (rule below). */
.select2-container {
	width: 100% !important;
}

/* select2 inside an .input-group must stay on the input row like the native
 * .form-control it replaces; its fixed 100% width would grab the whole row
 * and wrap the remaining group elements (/ and the path input) */
.input-group > .select2-container {
	width: auto !important;
	flex: 1 1 auto;
	min-width: 0;
}

p {
	margin: 0 0 10px;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

.btn {
	font-size: 14px;
	line-height: 1.42857143;
	/* BS3-core padding (overrides Klorofil's 6px 22px, which in BS5 also
	 * defeats the size modifiers) */
	padding: 6px 12px;
}

/* BS3 core size modifiers */
.btn-lg {
	padding: 10px 16px;
	font-size: 18px;
	line-height: 1.3333333;
	border-radius: 6px;
}

.btn-sm, .btn-xs {
	padding: 5px 10px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}

.btn-xs {
	padding: 1px 5px;
}

.form-control,
.form-select {
	font-size: 14px;
	line-height: 1.42857143;
}

/* BS3's .form-control-static had no width; BS5's plaintext forces
 * width: 100%, which breaks when the class sits on a floated grid col
 * (col-9 drops below its col-3 label) */
.form-control-plaintext {
	width: auto;
}

.form-horizontal .form-label {
	padding-top: 7px;
	margin-bottom: 0;
	text-align: right;
}

/* BS3 cleared the floated grid cols inside horizontal form groups; without
 * this, a wrapped 2-line label pushes the next row's label sideways */
.form-horizontal .mb-3:before,
.form-horizontal .mb-3:after {
	content: " ";
	display: table;
}

.form-horizontal .mb-3:after {
	clear: both;
}

.badge {
	border-radius: 3px;
}

/* BS3: every .col-* had its own 15px padding. BS5 only pads .row > * (the
 * gutter var is defined per-row), so cols outside a .row (dropdown menus,
 * notification/basket panels) lost their margins entirely. */
:where([class*="col-"]):not([class*="col-"].form-control-plaintext) {
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
}

/* BS3 colour palette (BS5's success/info/warning/danger are darker) */
:root {
	--bs-gutter-x: 1.875rem; /* BS3: 15px gutters */
	--bs-success-rgb: 92, 184, 92;   /* #5cb85c */
	--bs-info-rgb: 91, 192, 222;     /* #5bc0de */
	--bs-warning-rgb: 240, 173, 78;  /* #f0ad4e */
	--bs-danger-rgb: 217, 83, 79;    /* #d9534f */
}

/* Cards (native BS5): restore the BS3 panel look the legacy theme was
 * built on (main.css only styles card *variants*) */
:where(.card) {
	margin-bottom: 20px;
}

/* BS3 core: .panel-group .panel was margin: 0 + border-radius 4px
 * (the accordion database card, etc.), overriding the default card
 * spacing/radius inside a group */
.panel-group .card {
	margin-bottom: 0px;
	border-radius: 4px;
}

/* BS5 paints .card with color: var(--bs-body-color) (#212529) — the old
 * panels inherited the body colour (#5e6773). Keep that inheritance. */
.card .card-header,
.card .card-body,
.card .card-footer,
.card {
	color: inherit;
}

:where(.card > .card-header) {
	padding: 10px 15px;
	border-bottom: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

:where(.card > .card-header) {
	color: #333;
}

:where(.card > .card-body) {
	padding: 15px;
}

:where(.card > .card-footer) {
	padding: 10px 15px;
}

/* ------------------------------------------------------------------ *
 * Tables: BS5 paints every cell white with black text via CSS vars,
 * hiding main.css's `.table > thead > tr` (#f2f4f7/#a1a7af) and the
 * inherited body colour. Restore the BS3 look through the same vars so
 * contextual cells (table-danger etc.) keep working.
 * ------------------------------------------------------------------ */

.table {
	color: inherit;
	--bs-table-bg: transparent;
	--bs-table-border-color: #dddddd;
	--bs-table-striped-bg: #f9f9f9;
	--bs-table-striped-color: inherit;
	--bs-table-hover-bg: #f5f5f5;
	--bs-table-hover-color: inherit;
	--bs-table-active-bg: #f5f5f5;
	--bs-table-active-color: inherit;
}

/* Cells inherit their colour (main.css paints thead/tbody rows); BS5
 * defaults cells to --bs-emphasis-color (black) */
.table > :not(caption) > * > * {
	color: inherit;
}

/* main.css stripes on the tr (odd #fafbfc / even #f5f8fc) — the BS5 cell
 * accent would paint over it */
.table-striped > tbody > tr:nth-of-type(odd) > * {
	--bs-table-accent-bg: transparent;
}

/* BS5 gives .form-control-plaintext color: var(--bs-body-color) (#212529);
 * in BS3 a `p.form-control-plaintext` was unstyled and inherited the body
 * colour. Table cells (products, order detail) rely on that. */
.form-control-plaintext {
	color: inherit;
}

/* BS5's .form-control-plaintext sets `padding: .375rem 0`, overruling the
 * column padding when used together (e.g. col-9) — grid children lost their
 * left gutter, so shared boxes (fancy-checkbox) sat left of the inputs */
div[class*="col-"].form-control-plaintext {
	padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* Modals: main.css gives .modal-dialog a fixed width (700/900px) like BS3;
 * BS5's max-width (~500/800px) would clamp it, cramping forms (labels wrap,
 * checkboxes misalign) */
@media (min-width: 768px) {
	.modal-dialog,
	.modal-dialog.modal-lg {
		max-width: none;
	}
}

/* main.css: `.table > thead > tr > th { border-bottom: none }` */
.table > :not(caption) > thead > * > * {
	border-bottom-width: 0;
}

.dropdown-menu {
	color: inherit;
	font-size: 14px;
	/* BS3 core paddings (BS5 uses 0.5rem/16px) */
	padding: 5px 0;
	margin: 2px 0 0;
}

/* BS3 core aligned the right-navbar menus to the right edge of their item;
 * BS5 anchors them at the left edge, pushing wide basket/notification
 * boxes outside the window */
.navbar-right .dropdown-menu {
	right: 0;
	left: auto;
}

/* An "overflow-x: hidden" here would force overflow-y to auto (CSS spec),
 * and the .dropdown-auto::before hover-bridge pseudo-element overflows the
 * menu -> phantom scrollbars on every navbar dropdown. Clip both axes
 * instead; the notification list scrolls via its own inner container. */
.dropdown-menu.logged-user-menu {
	overflow: hidden;
}

/* the inner scroller: inline overflow-y:auto also forces overflow-x to
 * auto; the .notification negative margins ring-fenced below would then
 * produce a phantom horizontal scrollbar */
.notification-overview {
	overflow-x: hidden;
}

/* BS3 core: .panel-title > a (and its small variants) inherited the title
 * colour instead of the link colour; h*.card-title > a must do the same */
.card-title > .small > a,
.card-title > a,
.card-title > small > a {
	color: inherit;
	text-decoration: none;
}

.card-title > .small > a:hover,
.card-title > a:hover,
.card-title > small > a:hover {
	color: inherit;
}

/* ------------------------------------------------------------------ *
 * Sidebar pills render square (Klorofil look)
 * ------------------------------------------------------------------ */

#sidebar-nav .nav-pills .nav-link {
	border-radius: 0;
}

/* BS3 core: badges inside list-group items float right */
.list-group-item > .badge {
	float: right;
}

.list-group-item > .badge + .badge {
	margin-right: 5px;
}

/* BS3 core: explicit bottom margin (keeps spacing below the SPF/DKIM/DMARC
 * list even when the adjacent conditional column is absent) */
.list-group {
	margin-bottom: 20px;
}

/* the sidebar CTA fits on one line (matches BS3 rendering) */
.btn-order-products-sidebar {
	white-space: nowrap;
}

/* Plain selects styled without .form-control */
.form-select {
	color: #5e6773;
}

/* BS5 sets .form-control { appearance: none }, but our selects use
 * class="form-control" (BS3-era markup) instead of .form-select, so the
 * dropdown arrow disappeared. Re-apply the BS5 select caret/padding. */
select.form-control:not([multiple]):not([size]) {
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
}