/*
 * TranCE theme — Phase 1: foundation.
 * Global typography, page background and colour utilities.
 * Loaded after page CSS (from views/header), so it overrides SB Admin 2 / Bootstrap defaults.
 */

/* No forced grayscale smoothing: it renders Roboto thin and soft on macOS */
html {
	text-rendering: optimizeLegibility;
}

body {
	font-family: var(--tce-font);
	font-size: var(--tce-fs-md);
	line-height: var(--tce-lh);
	color: var(--tce-text);
	background-color: var(--tce-bg);
}

#content-wrapper,
#content-wrapper #content {
	background-color: var(--tce-bg);
}

/* Form controls inherit the app font instead of the browser default */
input, button, select, optgroup, textarea, .btn, .form-control, .form-select, .dropdown-menu, .modal, .tooltip, .popover {
	font-family: var(--tce-font);
}

/* ---- Headings: one scale for every page ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--tce-font);
	font-weight: var(--tce-fw-medium);
	color: var(--tce-text);
	letter-spacing: 0;
	line-height: 1.3;
}

h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: var(--tce-fs-2xl); }
h3, .h3 { font-size: var(--tce-fs-2xl); }
h4, .h4 { font-size: var(--tce-fs-xl); }
h5, .h5 { font-size: var(--tce-fs-lg); }
h6, .h6 { font-size: var(--tce-fs-md); }

/* Page title used across reports/forms: "<h1 class='h3 mb-0 text-gray-800'>" */
.container-fluid > h1:first-child,
.container-fluid > .h3:first-child,
.container-fluid > .d-sm-flex > h1,
.container-fluid > .d-sm-flex > .h3 {
	font-size: var(--tce-fs-2xl);
	font-weight: var(--tce-fw-medium);
	color: var(--tce-text);
}

b, strong { font-weight: var(--tce-fw-bold); }

small, .small { font-size: var(--tce-fs-sm); }

label, .form-label, .col-form-label {
	font-size: var(--tce-fs-md);
	font-weight: var(--tce-fw-medium);
	color: var(--tce-text) !important; /* SB Admin forces black !important */
}

/* ---- Links ---- */
a {
	color: var(--tce-secondary);
	transition: color var(--tce-dur) var(--tce-ease);
}
a:hover { color: var(--tce-primary); }

/* ---- Colour utilities (BS4 + BS5 class names) ---- */
.text-primary { color: var(--tce-primary) !important; }
.text-success { color: var(--tce-success) !important; }
.text-danger { color: var(--tce-error) !important; }
.text-warning { color: var(--tce-warning) !important; }
.text-info { color: var(--tce-info) !important; }
.text-muted, .text-secondary { color: var(--tce-text-muted) !important; }
.text-gray-800, .text-gray-900, .text-dark { color: var(--tce-text) !important; }
.text-gray-600, .text-gray-700 { color: var(--tce-text-muted) !important; }
.text-gray-300, .text-gray-400, .text-gray-500 { color: var(--tce-text-disabled) !important; }

.bg-primary { background-color: var(--tce-primary) !important; }
.bg-success { background-color: var(--tce-success) !important; }
.bg-danger { background-color: var(--tce-error) !important; }
.bg-warning { background-color: var(--tce-warning) !important; }
.bg-info { background-color: var(--tce-info) !important; }
.bg-light { background-color: var(--tce-surface-variant) !important; }

.border-left-primary { border-left-color: var(--tce-primary) !important; }
.border-left-success { border-left-color: var(--tce-success) !important; }
.border-left-warning { border-left-color: var(--tce-warning) !important; }
.border-left-danger { border-left-color: var(--tce-error) !important; }
.border-left-info { border-left-color: var(--tce-info) !important; }

hr { border-color: var(--tce-divider); opacity: 1; }

/* ---- Selection, focus, scrollbars ---- */
::selection { background: rgba(var(--tce-secondary-rgb), 0.22); }

:focus-visible {
	outline: 2px solid var(--tce-secondary);
	outline-offset: 2px;
}

* { scrollbar-width: thin; scrollbar-color: var(--tce-outline-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
	background: var(--tce-outline-strong);
	border-radius: var(--tce-radius-pill);
	border: 2px solid transparent;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--tce-text-disabled); }
::-webkit-scrollbar-track { background: transparent; }