.mh-300 {
	min-height: 300px !important;
}

.mh-500 {
	min-height: 500px !important;
}

.alt-font1 {
	font-family: "Prompt", sans-serif;
}

.alt-font2 {
	font-family: "Quicksand", sans-serif;
}

.alt-font3 {
	font-family: "Chivo Mono", monospace;
}

.alt-font4 {
	font-family: "Roboto Mono", monospace;
}

.alt-font5 {
	font-family: "Exo", sans-serif;
}

.content-lead {
	font-family: "Prompt", sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #014034;
	text-transform: capitalize;
}

.content-lead:before {
	font-family: "Font Awesome 7 Pro";
	content: "\f044" !important;
	font-weight: 900;
	display: inline-block;
	padding-right: 5px;
	color: #030303;
}

.faq-lead {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #030303;
	text-transform: capitalize;
}

.faq-lead:before {
	font-family: "Font Awesome 7 Pro";
	content: "\f059" !important;
	font-weight: 900 !important;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	padding-right: 5px;
	color: #030303;
}

.error-message {
	color: #c00;
	font-weight: bold;
	font-size: 13px;
}

.card-height-lg {
	min-height: 700px !important;
}

.card-height-md {
	min-height: 400px !important;
}

.card-height-sm {
	min-height: 200px !important;
}

.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 140px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: -75px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.paragraph-fix p {
	margin-bottom: 1rem;
}

/* Section headings inside rich-text content (knowledge base articles, service descriptions).
   Indigo, from the theme's primary color family, so headings stand apart from the emerald titles.
   Contrast passes WCAG AA in both themes: #4338ca on #fff is about 7.9:1, #a5b4fc on #0c1427 about 9:1. */
.paragraph-fix {
	--content-heading-color: #4338ca;
	--content-heading-rule: rgba(67, 56, 202, 0.25);
}
[data-bs-theme="dark"] .paragraph-fix {
	--content-heading-color: #a5b4fc;
	--content-heading-rule: rgba(165, 180, 252, 0.3);
}
.paragraph-fix h2,
.paragraph-fix h3,
.paragraph-fix h4,
.paragraph-fix h5 {
	color: var(--content-heading-color);
	font-weight: 600;
	margin: 1.75rem 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--content-heading-rule);
}
.paragraph-fix > h2:first-child,
.paragraph-fix > h3:first-child,
.paragraph-fix > h4:first-child,
.paragraph-fix > h5:first-child {
	margin-top: 0;
}
.paragraph-fix ul,
.paragraph-fix ol {
	margin-bottom: 1rem;
}
.paragraph-fix li {
	margin-bottom: 0.25rem;
}

/* Sidebar hamburger: show just the icon — no button border/box, no offset.
   (Theme sets .sidebar-toggler{width:0px}, which pushes the icon out of its box.) */
.sidebar-toggler {
	width: auto !important;
	padding: 0 10px !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	justify-content: center;
}
.sidebar-toggler:hover,
.sidebar-toggler:focus,
.sidebar-toggler:active {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Brand logo. Sign-in and reset: black artwork in light mode, white in dark mode. The sidebar is
   dark in both themes, so it always uses the white artwork. */
.brand-logo { height: 34px; width: auto; display: inline-block; }
.nobleui-logo .brand-logo { height: 48px; }
.brand-logo.footer-logo { height: 28px; }
.brand-logo-dark { display: none; }
[data-bs-theme="dark"] .brand-logo-light { display: none; }
[data-bs-theme="dark"] .brand-logo-dark { display: inline-block; }

/* Green headings that pass WCAG AA in both themes (emerald-500 is only about 2.5:1 on white):
   #047857 on #fff is about 5.5:1, #34d399 on #0c1427 about 9.5:1. Used on the KB Categories card. */
.text-accessible-green { color: #047857 !important; }
[data-bs-theme="dark"] .text-accessible-green { color: #34d399 !important; }

/* Client Info > Address: embedded Google map beside the address, full width of its column. */
.client-map { display: block; height: 220px; }

/* .table-stack: on phones, each row becomes a card and each cell a "LABEL ... value" line (label from
   data-label), so wide tables need no sideways scrolling. The label floats left and the value flows
   right-aligned, so cells holding a line break or a small note underneath still stack cleanly. */
@media (max-width: 767.98px) {
	.table-stack thead { display: none; }
	.table-stack, .table-stack tbody, .table-stack tr, .table-stack td, .table-stack tbody th { display: block; width: 100%; }
	.table-stack tr { border: 1px solid var(--bs-border-color); border-radius: .5rem; margin-bottom: .75rem; padding: 0 .75rem .25rem; overflow: hidden; }
	.table-stack td, .table-stack tbody th { text-align: right !important; border: 0; border-bottom: 1px solid var(--bs-border-color-translucent); padding: .5rem 0; white-space: normal; overflow-wrap: anywhere; }
	.table-stack td::after, .table-stack tbody th::after { content: ""; display: table; clear: both; }
	.table-stack td:last-child { border-bottom: 0; }
	.table-stack td[data-label]::before, .table-stack tbody th[data-label]::before { content: attr(data-label); float: left; margin-right: 1rem; text-align: left; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; font-size: .75rem; letter-spacing: .03em; line-height: 1.6; }
	.table-stack td > div, .table-stack td > .text-truncate { max-width: none !important; margin-left: auto; }
	.table-stack td .badge.w-100, .table-stack td .btn.w-100 { width: auto !important; }
	/* The first cell is the card's header band, so each record reads as its own card. */
	.table-stack tr > :first-child { text-align: left !important; margin: 0 -.75rem .25rem; width: calc(100% + 1.5rem); padding: .6rem .75rem; background-color: #f1f3f7; border-bottom: 1px solid var(--bs-border-color); font-weight: 600; }
	[data-bs-theme=dark] .table-stack tr > :first-child { background-color: #1a2440; }
	[data-bs-theme=dark] .table-stack tr { border-color: #26324f; }
	[data-bs-theme=dark] .table-stack tr > :first-child a { color: #848dff; }
	[data-bs-theme=dark] .table-stack tr > :first-child a.text-light { color: #e9ecef !important; }
}

/* Invoice line items on phones (includes/invoices/view-invoice.php): service and price side by side,
   the description on its own line below, totals as "label  amount" rows; no sideways scrolling. */
@media (max-width: 767.98px) {
	.invoice-lines thead { display: none; }
	.invoice-lines, .invoice-lines tbody, .invoice-lines tfoot { display: block; width: 100%; }
	.invoice-lines tr { display: flex; flex-wrap: wrap; align-items: flex-start; border-bottom: 1px solid var(--bs-border-color); }
	.invoice-lines td, .invoice-lines th { display: block; border: 0 !important; padding: .6rem .25rem; }
	.invoice-lines td:first-child, .invoice-lines th:first-child { flex: 1 1 0; min-width: 0; order: 1; text-align: left !important; white-space: normal; overflow-wrap: anywhere; }
	.invoice-lines .line-desc { white-space: normal; }
	.invoice-lines .text-end:last-child { flex: 0 0 auto; order: 2; text-align: right; white-space: nowrap; }
	.invoice-lines .line-desc { order: 3; flex: 0 0 100%; padding-top: 0; font-size: .85em; color: var(--bs-secondary-color); }
}


/* Automatic payment agreement: one paragraph of fine print (Add Payment Method, pay page). */
.arb-fine-print { font-size: .75rem; line-height: 1.5; color: var(--bs-secondary-color); }

/* Invoice view action buttons: an even two-column grid on phones, a right-aligned row from md up. */
.invoice-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: 100%; }
.invoice-actions > *, .invoice-actions .btn { width: 100%; }
@media (min-width: 768px) {
	.invoice-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; width: auto; }
	.invoice-actions > *, .invoice-actions .btn { width: auto; }
}

/* ==========================================================================
   Accessible theme colors (WCAG 2.1 AA, 4.5:1 for normal text)
   The theme's fills (#6571ff, #7987a1, #05a34a, #ff3366) give white text only 3.3–3.9:1, and white on
   info/warning is under 2:1. Fills get deeper shades; info and warning fills get dark text. The base
   --bs-* tokens are left alone because dark mode uses them as text, where they already pass.
   ========================================================================== */
:root {
	--a11y-primary: #4f5bf0;   --a11y-primary-rgb: 79, 91, 240;    --a11y-primary-hover: #3f4ad6;
	--a11y-secondary: #5f6b82; --a11y-secondary-rgb: 95, 107, 130; --a11y-secondary-hover: #4f5a6e;
	--a11y-success: #047857;   --a11y-success-rgb: 4, 120, 87;     --a11y-success-hover: #03634a;
	--a11y-danger: #d0164a;    --a11y-danger-rgb: 208, 22, 74;     --a11y-danger-hover: #b0123e;
	--a11y-on-light: #060c17;
}

/* Fills that carry white text. A fill paired with dark text keeps the original, lighter shade. */
.bg-primary:not(.text-dark):not(.text-black)   { background-color: rgba(var(--a11y-primary-rgb), var(--bs-bg-opacity, 1)) !important; color: #fff; }
.bg-secondary:not(.text-dark):not(.text-black) { background-color: rgba(var(--a11y-secondary-rgb), var(--bs-bg-opacity, 1)) !important; color: #fff; }
.bg-success:not(.text-dark):not(.text-black)   { background-color: rgba(var(--a11y-success-rgb), var(--bs-bg-opacity, 1)) !important; color: #fff; }
.bg-danger:not(.text-dark):not(.text-black)    { background-color: rgba(var(--a11y-danger-rgb), var(--bs-bg-opacity, 1)) !important; color: #fff; }
.text-bg-primary   { background-color: rgba(var(--a11y-primary-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-secondary { background-color: rgba(var(--a11y-secondary-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-success   { background-color: rgba(var(--a11y-success-rgb), var(--bs-bg-opacity, 1)) !important; }
.text-bg-danger    { background-color: rgba(var(--a11y-danger-rgb), var(--bs-bg-opacity, 1)) !important; }

/* Info and warning are light colors: they take dark text (11.6:1 and 12.3:1), never white. */
.bg-info:not(.text-white):not(.text-light), .bg-warning:not(.text-white):not(.text-light) { color: var(--a11y-on-light); }
.text-bg-info, .text-bg-warning { color: var(--a11y-on-light) !important; }

/* Solid buttons */
.btn-primary, .btn-secondary, .btn-success, .btn-danger {
	--bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
}
.btn-primary   { --bs-btn-bg: var(--a11y-primary);   --bs-btn-border-color: var(--a11y-primary);   --bs-btn-hover-bg: var(--a11y-primary-hover);   --bs-btn-hover-border-color: var(--a11y-primary-hover);   --bs-btn-active-bg: var(--a11y-primary-hover);   --bs-btn-active-border-color: var(--a11y-primary-hover);   --bs-btn-disabled-bg: var(--a11y-primary);   --bs-btn-disabled-border-color: var(--a11y-primary); }
.btn-secondary { --bs-btn-bg: var(--a11y-secondary); --bs-btn-border-color: var(--a11y-secondary); --bs-btn-hover-bg: var(--a11y-secondary-hover); --bs-btn-hover-border-color: var(--a11y-secondary-hover); --bs-btn-active-bg: var(--a11y-secondary-hover); --bs-btn-active-border-color: var(--a11y-secondary-hover); --bs-btn-disabled-bg: var(--a11y-secondary); --bs-btn-disabled-border-color: var(--a11y-secondary); }
.btn-success   { --bs-btn-bg: var(--a11y-success);   --bs-btn-border-color: var(--a11y-success);   --bs-btn-hover-bg: var(--a11y-success-hover);   --bs-btn-hover-border-color: var(--a11y-success-hover);   --bs-btn-active-bg: var(--a11y-success-hover);   --bs-btn-active-border-color: var(--a11y-success-hover);   --bs-btn-disabled-bg: var(--a11y-success);   --bs-btn-disabled-border-color: var(--a11y-success); }
.btn-danger    { --bs-btn-bg: var(--a11y-danger);    --bs-btn-border-color: var(--a11y-danger);    --bs-btn-hover-bg: var(--a11y-danger-hover);    --bs-btn-hover-border-color: var(--a11y-danger-hover);    --bs-btn-active-bg: var(--a11y-danger-hover);    --bs-btn-active-border-color: var(--a11y-danger-hover);    --bs-btn-disabled-bg: var(--a11y-danger);    --bs-btn-disabled-border-color: var(--a11y-danger); }

/* Outline buttons fill on hover: use the deep shades so the white hover text passes too. */
.btn-outline-primary   { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--a11y-primary);   --bs-btn-hover-border-color: var(--a11y-primary);   --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--a11y-primary-hover); }
.btn-outline-secondary { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--a11y-secondary); --bs-btn-hover-border-color: var(--a11y-secondary); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--a11y-secondary-hover); }
.btn-outline-success   { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--a11y-success);   --bs-btn-hover-border-color: var(--a11y-success);   --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--a11y-success-hover); }
.btn-outline-danger    { --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--a11y-danger);    --bs-btn-hover-border-color: var(--a11y-danger);    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--a11y-danger-hover); }
.btn-outline-info, .btn-outline-warning { --bs-btn-hover-color: var(--a11y-on-light); --bs-btn-active-color: var(--a11y-on-light); }

/* Faint text (tertiary) was 3.97:1 in both modes; 0.6 opacity gives 5.7:1 light, 5.2:1 dark. */
:root, [data-bs-theme=light] { --bs-tertiary-color: rgba(0, 0, 0, 0.6); }
[data-bs-theme=dark] { --bs-tertiary-color: rgba(208, 214, 225, 0.6); }

/* Light mode only: theme colors used as text on white were 1.7–3.9:1. Dark mode already passes. */
[data-bs-theme=light] {
	--bs-link-color: #4f5bf0; --bs-link-color-rgb: 79, 91, 240;
	--bs-link-hover-color: #3f4ad6; --bs-link-hover-color-rgb: 63, 74, 214;
}
[data-bs-theme=light] .text-primary   { color: var(--a11y-primary) !important; }
[data-bs-theme=light] .text-secondary { color: var(--a11y-secondary) !important; }
[data-bs-theme=light] .text-success   { color: var(--a11y-success) !important; }
[data-bs-theme=light] .text-danger    { color: var(--a11y-danger) !important; }
[data-bs-theme=light] .text-warning   { color: #b45309 !important; }
[data-bs-theme=light] .text-info      { color: #0e7490 !important; }
[data-bs-theme=light] .btn-outline-primary   { --bs-btn-color: var(--a11y-primary);   --bs-btn-border-color: var(--a11y-primary); }
[data-bs-theme=light] .btn-outline-secondary { --bs-btn-color: var(--a11y-secondary); --bs-btn-border-color: var(--a11y-secondary); }
[data-bs-theme=light] .btn-outline-success   { --bs-btn-color: var(--a11y-success);   --bs-btn-border-color: var(--a11y-success); }
[data-bs-theme=light] .btn-outline-danger    { --bs-btn-color: var(--a11y-danger);    --bs-btn-border-color: var(--a11y-danger); }
[data-bs-theme=light] .btn-outline-warning   { --bs-btn-color: #b45309; --bs-btn-border-color: #d97706; }
[data-bs-theme=light] .btn-outline-info      { --bs-btn-color: #0e7490; --bs-btn-border-color: #0891b2; }

/* Billing Admin dashboard: Needs Attention panels */
.attn-panel { display: flex; flex-direction: column; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-tertiary-bg); overflow: hidden; }
[data-bs-theme=dark] .attn-panel { background: rgba(255, 255, 255, .025); border-color: rgba(255, 255, 255, .08); }
.attn-head { display: flex; align-items: center; padding: .75rem 1rem; font-weight: 600; border-bottom: 1px solid var(--bs-border-color-translucent); }
.attn-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.attn-row:last-child { border-bottom: 0; }
.attn-row .min-w-0 { min-width: 0; }
.attn-sub { display: block; font-size: .8rem; color: var(--bs-secondary-color); }
.attn-foot { display: flex; justify-content: space-between; margin-top: auto; padding: .6rem 1rem; font-size: .85rem; border-top: 1px solid var(--bs-border-color-translucent); color: var(--bs-secondary-color); }

/* Page headers (title + action buttons): on phones the title gets its own line and the buttons sit under it. */
@media (max-width: 575.98px) {
	.page-content > .d-flex.justify-content-between.grid-margin { flex-wrap: wrap; gap: .5rem; }
	.page-content > .d-flex.justify-content-between.grid-margin > :first-child { flex: 1 1 100%; }
	.page-content > .d-flex.justify-content-between.grid-margin h4 { margin-bottom: 0 !important; }
}

/* Green field labels (email previews; invoice number/date/due/status): 5.5:1 light and print, 9.5:1 dark */
.preview-group { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #6d28d9; }
[data-bs-theme=dark] .preview-group { color: #c4b5fd; }
.meta-label { font-weight: 600; color: #047857; } .meta-when { color: #b45309; }
[data-bs-theme=dark] .meta-label { color: #34d399; }
@media print { .meta-label { color: #047857 !important; } }
[data-bs-theme=dark] .meta-when { color: #fbbf24; }

/* .table-wrap: let cells wrap (the theme sets white-space: nowrap on table cells), for tables with long names */
.table-wrap td, .table-wrap th { white-space: normal; }
.table-wrap td.text-nowrap { white-space: nowrap; }

/* Service lines on invoices (name, billing frequency, domain). Dark: 6.4–8.3:1; light and print: 5.7–7.1:1. */
.svc-name { color: #6d28d9; font-weight: 600; }
.svc-freq { color: #a21caf; }
.svc-domain { color: #7c3aed; }
[data-bs-theme=dark] .svc-name { color: #a78bfa; }
[data-bs-theme=dark] .svc-freq { color: #e88bfd; }
[data-bs-theme=dark] .svc-domain { color: #9c88ff; }
@media print {
	.svc-name { color: #6d28d9 !important; } .svc-freq { color: #a21caf !important; } .svc-domain { color: #7c3aed !important; }
}

/* Light mode alerts: the theme colors alert text with the bright base color (#fbbc06 on pale yellow is about 1.6:1).
   Use Bootstrap's emphasis shades instead (7–9:1). Dark mode keeps the theme's colors, which already pass. */
[data-bs-theme=light] .alert-primary   { color: var(--bs-primary-text-emphasis); }
[data-bs-theme=light] .alert-secondary { color: var(--bs-secondary-text-emphasis); }
[data-bs-theme=light] .alert-success   { color: var(--bs-success-text-emphasis); }
[data-bs-theme=light] .alert-danger    { color: var(--bs-danger-text-emphasis); }
[data-bs-theme=light] .alert-warning   { color: var(--bs-warning-text-emphasis); }
[data-bs-theme=light] .alert-info      { color: var(--bs-info-text-emphasis); }
[data-bs-theme=light] .alert .alert-link { color: inherit; }

/* Reports: Collections by Month. The whole column is the hover/focus target; its bar lightens to show it responded. */
.month-chart .month-col { outline-offset: 2px; }
.month-chart .month-bar { transition: filter .12s ease; }
.month-chart .month-col:hover .month-bar, .month-chart .month-col:focus-visible .month-bar { filter: brightness(1.2); }