/* ==========================================================================
   MyMedHealth CRM - Modern theme layer
   --------------------------------------------------------------------------
   Loaded LAST in every layout, after AdminLTE / Bootstrap / Syncfusion CSS.
   Pure re-skin: colours, typography, radii, shadows, focus states and subtle
   motion. It deliberately avoids changing padding/height of grid rows, inputs
   and layout containers so Syncfusion grid sizing and AdminLTE layout
   behaviour (push-menu, sidebar collapse, iframe layout) stay intact.
   Vendor files under wwwroot/adminlte and wwwroot/lib are NOT modified.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand: deep teal-blue (white text on primary = 5.4:1, WCAG AA) */
    --tm-primary: #0e7490;
    --tm-primary-hover: #155e75;
    --tm-primary-active: #164e63;
    --tm-primary-50: #ecf6f9;
    --tm-primary-100: #d3eaf1;
    --tm-primary-ring: rgba(14, 116, 144, 0.28);

    /* Neutrals (slate) */
    --tm-bg: #f3f6f9;
    --tm-surface: #ffffff;
    --tm-surface-2: #f8fafc;
    --tm-text: #1e293b;
    --tm-text-2: #334155;
    --tm-muted: #64748b;            /* 4.76:1 on white */
    --tm-border: #e2e8f0;
    --tm-border-strong: #cbd5e1;

    /* Sidebar */
    --tm-sidebar-bg: #0f2537;
    --tm-sidebar-bg-2: #0b1d2c;
    --tm-sidebar-text: #cbd5e1;
    --tm-sidebar-text-strong: #ffffff;
    --tm-sidebar-hover: rgba(255, 255, 255, 0.07);
    --tm-sidebar-active: #0e7490;
    --tm-sidebar-accent: #5eead4;

    /* Status */
    --tm-success: #15803d;
    --tm-success-hover: #166534;
    --tm-success-50: #ecfdf3;
    --tm-warning: #f59e0b;
    --tm-warning-hover: #d97706;
    --tm-warning-50: #fffbeb;
    --tm-danger: #dc2626;
    --tm-danger-hover: #b91c1c;
    --tm-danger-50: #fef2f2;
    --tm-info: #0369a1;
    --tm-info-50: #eff8ff;

    /* Shape & depth */
    --tm-radius-sm: 6px;
    --tm-radius: 10px;
    --tm-radius-lg: 14px;
    --tm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.05);
    --tm-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.05);
    --tm-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);

    /* Typography */
    --tm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --tm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Re-point the variables the app's existing inline CSS already uses */
    --primary: var(--tm-primary);
    --blue: var(--tm-primary);
    --bs-blue: var(--tm-primary);
    --bs-primary: var(--tm-primary);
    --bs-primary-rgb: 14, 116, 144;
    --bs-body-font-family: var(--tm-font);
    --bs-body-color: var(--tm-text);
    --bs-border-color: var(--tm-border);
    --bs-link-color: var(--tm-primary);
    --bs-link-hover-color: var(--tm-primary-hover);
}

/* --------------------------------------------------------------------------
   2. Base / typography
   -------------------------------------------------------------------------- */
body {
    font-family: var(--tm-font);
    font-size: 0.9375rem; /* Inter runs wider than Source Sans Pro; keeps line lengths similar */
    color: var(--tm-text);
    /* background left as-is (white) so the iframe/capture layout keeps its look;
       the admin shell's grey canvas comes from .content-wrapper below */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--tm-font);
    color: var(--tm-text);
    letter-spacing: -0.01em;
}

a {
    color: var(--tm-primary);
}

a:hover {
    color: var(--tm-primary-hover);
}

.text-primary {
    color: var(--tm-primary) !important;
}

.bg-primary {
    background-color: var(--tm-primary) !important;
}

.text-muted {
    color: var(--tm-muted) !important;
}

.border-primary {
    border-color: var(--tm-primary) !important;
}

::selection {
    background: var(--tm-primary-100);
    color: var(--tm-text);
}

.content-wrapper {
    background-color: var(--tm-bg);
}

/* --------------------------------------------------------------------------
   3. Top navbar
   -------------------------------------------------------------------------- */
.main-header.navbar {
    background-color: var(--tm-surface);
    border-bottom: 1px solid var(--tm-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.main-header .navbar-nav .nav-link {
    color: var(--tm-muted);
    border-radius: var(--tm-radius-sm);
}

.main-header .navbar-nav .nav-link:hover,
.main-header .navbar-nav .nav-link:focus {
    color: var(--tm-primary);
}

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

.dropdown-item {
    color: var(--tm-text-2);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--tm-primary-50);
    color: var(--tm-primary-hover);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--tm-primary);
    color: #fff;
}

/* --------------------------------------------------------------------------
   4. Sidebar (AdminLTE shell + Syncfusion TreeView menu)
   -------------------------------------------------------------------------- */
.main-sidebar.sidebar-blue-theme,
.main-sidebar[class*=sidebar-blue-theme] {
    background-color: var(--tm-sidebar-bg) !important;
    background-image: linear-gradient(180deg, var(--tm-sidebar-bg) 0%, var(--tm-sidebar-bg-2) 100%);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04), 4px 0 18px rgba(15, 23, 42, 0.12) !important;
}

.main-sidebar .brand-link {
    color: var(--tm-sidebar-text-strong);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    letter-spacing: 0.02em;
}

.main-sidebar .brand-link .brand-text {
    font-weight: 600 !important;
}

.main-sidebar .user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info span {
    color: var(--tm-sidebar-text);
    font-size: 0.875rem;
}

.main-sidebar .user-panel img {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

/* AdminLTE nav links (if any page uses the classic nav-sidebar markup) */
.main-sidebar .nav-sidebar .nav-link {
    color: var(--tm-sidebar-text);
    border-radius: var(--tm-radius-sm);
}

.main-sidebar .nav-sidebar .nav-link:hover {
    background-color: var(--tm-sidebar-hover);
    color: var(--tm-sidebar-text-strong);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--tm-sidebar-active);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--tm-sidebar-accent);
}

/* Syncfusion TreeView used as the main menu */
.main-sidebar .e-treeview .e-list-text {
    color: var(--tm-sidebar-text);
    font-family: var(--tm-font);
    font-size: 0.875rem;
}

.main-sidebar .e-treeview .e-icon-collapsible,
.main-sidebar .e-treeview .e-icon-expandable {
    color: rgba(203, 213, 225, 0.7);
}

.main-sidebar .e-treeview .e-list-item > .e-fullrow {
    border-radius: var(--tm-radius-sm);
}

.main-sidebar .e-treeview .e-list-item.e-hover > .e-fullrow,
.main-sidebar .e-treeview .e-list-item.e-hover.e-active > .e-fullrow {
    background-color: var(--tm-sidebar-hover) !important;
    border-color: transparent !important;
}

.main-sidebar .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
.main-sidebar .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
.main-sidebar .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
    color: var(--tm-sidebar-text-strong);
}

.main-sidebar .e-treeview .e-list-item.e-active > .e-fullrow,
.main-sidebar .e-treeview .e-list-item.e-active.e-animation-active > .e-fullrow,
.main-sidebar .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
    background-color: var(--tm-sidebar-active) !important;
    border-color: var(--tm-sidebar-active) !important;
    box-shadow: inset 3px 0 0 var(--tm-sidebar-accent);
}

.main-sidebar .e-treeview .e-list-item.e-active > .e-text-content {
    background-color: transparent !important;
}

.main-sidebar .e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    color: #fff;
    font-weight: 600;
}

.main-sidebar .e-treeview .e-list-item.e-active > .e-text-content .e-icon-collapsible,
.main-sidebar .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
    color: #fff;
}

/* Sidebar scrollbar tint */
#navbarnav::-webkit-scrollbar-track {
    background-color: transparent;
}

#navbarnav::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: var(--tm-sidebar-bg);
}

/* --------------------------------------------------------------------------
   5. Content header / page titles
   -------------------------------------------------------------------------- */
.content-header h1,
.content-header .m-0 {
    font-weight: 600;
    color: var(--tm-text);
    letter-spacing: -0.015em;
}

.breadcrumb {
    background: transparent;
}

.breadcrumb-item a {
    color: var(--tm-muted);
}

.breadcrumb-item.active {
    color: var(--tm-text-2);
}

/* --------------------------------------------------------------------------
   6. Cards, fieldsets, form-cards
   (borders are drawn with box-shadow so card dimensions do not change)
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--tm-surface);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow-sm);
}

.card-header {
    background-color: transparent;
    border-bottom-color: var(--tm-border);
    border-top-left-radius: var(--tm-radius) !important;
    border-top-right-radius: var(--tm-radius) !important;
}

.card-header h5,
.card-header .card-title {
    font-weight: 600;
    color: var(--tm-text);
}

.card-footer {
    background-color: var(--tm-surface-2);
    border-top-color: var(--tm-border);
    border-bottom-left-radius: var(--tm-radius) !important;
    border-bottom-right-radius: var(--tm-radius) !important;
}

.card.card-primary.card-outline,
.card-primary.card-outline {
    border-top-color: var(--tm-primary);
}

.form-card {
    border-color: var(--tm-border);
    border-radius: var(--tm-radius);
}

.form-card-header {
    font-weight: 600;
    color: var(--tm-text);
}

fieldset {
    border-color: var(--tm-border);
    border-radius: var(--tm-radius);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn {
    font-family: var(--tm-font);
    font-weight: 500;
    border-radius: var(--tm-radius-sm);
    letter-spacing: 0.005em;
}

.btn:focus,
.btn.focus,
.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--tm-primary-ring) !important;
    outline: 0;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):hover {
    background-color: var(--tm-primary-hover);
    border-color: var(--tm-primary-hover);
    color: #fff;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--tm-primary-active);
    border-color: var(--tm-primary-active);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
    opacity: 0.55;
}

.btn-secondary,
.btn-secondary:not(:disabled):not(.disabled) {
    background-color: #f1f5f9;
    border-color: var(--tm-border-strong);
    color: var(--tm-text-2);
}

.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):hover,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: #e2e8f0;
    border-color: #94a3b8;
    color: var(--tm-text);
}

.btn-success,
.btn-success:not(:disabled):not(.disabled) {
    background-color: var(--tm-success);
    border-color: var(--tm-success);
    color: #fff;
}

.btn-success:hover,
.btn-success:not(:disabled):not(.disabled):hover,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--tm-success-hover);
    border-color: var(--tm-success-hover);
    color: #fff;
}

.btn-danger,
.btn-danger:not(:disabled):not(.disabled) {
    background-color: var(--tm-danger);
    border-color: var(--tm-danger);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):hover,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--tm-danger-hover);
    border-color: var(--tm-danger-hover);
    color: #fff;
}

.btn-warning,
.btn-warning:not(:disabled):not(.disabled) {
    background-color: var(--tm-warning);
    border-color: var(--tm-warning);
    color: #1f2937;
}

.btn-warning:hover,
.btn-warning:not(:disabled):not(.disabled):hover {
    background-color: var(--tm-warning-hover);
    border-color: var(--tm-warning-hover);
    color: #111827;
}

.btn-info,
.btn-info:not(:disabled):not(.disabled) {
    background-color: var(--tm-info);
    border-color: var(--tm-info);
    color: #fff;
}

.btn-outline-primary {
    color: var(--tm-primary);
    border-color: var(--tm-primary);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    color: #fff;
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
}

.btn-outline-secondary {
    color: var(--tm-text-2);
    border-color: var(--tm-border-strong);
    background-color: var(--tm-surface);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
    color: var(--tm-text);
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

.btn-outline-danger {
    color: var(--tm-danger);
    border-color: var(--tm-danger);
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: var(--tm-danger);
    border-color: var(--tm-danger);
}

.btn-outline-success {
    color: var(--tm-success);
    border-color: var(--tm-success);
}

.btn-outline-success:hover {
    color: #fff;
    background-color: var(--tm-success);
    border-color: var(--tm-success);
}

.btn-link {
    color: var(--tm-primary);
}

/* Bootstrap 5 close button, used across the app while the admin shell ships
   Bootstrap 4 CSS (where .btn-close has no styling). Only empty buttons. */
.btn-close:empty {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 0.85em auto no-repeat;
    border: 0;
    border-radius: var(--tm-radius-sm);
    opacity: 0.5;
    cursor: pointer;
}

.btn-close:empty:hover {
    opacity: 0.85;
    background-color: #f1f5f9;
}

.btn-close:empty:focus {
    outline: 0;
    box-shadow: 0 0 0 3px var(--tm-primary-ring);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   8. Forms (colours, radius, focus only - no height/padding changes)
   -------------------------------------------------------------------------- */
label:not(.form-check-label):not(.custom-file-label),
.form-label {
    font-weight: 500;
    color: var(--tm-text-2);
}

.form-control,
form input.form-control,
form select.form-control,
form textarea.form-control,
.custom-select {
    font-family: var(--tm-font);
    color: var(--tm-text);
    background-color: var(--tm-surface);
    border-color: var(--tm-border-strong);
    border-radius: var(--tm-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder {
    color: #94a3b8;
}

.form-control:focus,
form input.form-control:focus,
form select.form-control:focus,
form textarea.form-control:focus,
.custom-select:focus {
    border-color: var(--tm-primary);
    box-shadow: 0 0 0 3px var(--tm-primary-ring);
    outline: 0;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--tm-surface-2);
    color: var(--tm-muted);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--tm-danger);
}

/* Bootstrap 5 select (unstyled under the Bootstrap 4 admin CSS) */
.form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-family: var(--tm-font);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--tm-text);
    background-color: var(--tm-surface);
    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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px 10px;
    border: 1px solid var(--tm-border-strong);
    border-radius: var(--tm-radius-sm);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-select:focus {
    border-color: var(--tm-primary);
    box-shadow: 0 0 0 3px var(--tm-primary-ring);
    outline: 0;
}

.form-select:disabled {
    background-color: var(--tm-surface-2);
    color: var(--tm-muted);
}

.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--tm-primary);
}

/* Bootstrap 4 (AdminLTE) positions .form-check-input absolutely for its own .form-check layout. Pages
   written with Bootstrap 5 markup (a checkbox inside a card or label, a .form-switch, a grid cell) had
   their boxes pushed over the label text or out of the card. Keep checkboxes in the normal flow, and
   keep the Bootstrap 4 placement only for a classic <div class="form-check"><input><label> block. */
.form-check-input {
    position: static;
    margin: 0;
    vertical-align: middle;
    flex: 0 0 auto;
}

.form-check:not(.form-switch):not(.form-check-inline) > .form-check-input {
    position: absolute;
    margin-top: .3rem;
    margin-left: -1.25rem;
}

/* Bootstrap 5 switch (Bootstrap 4 has none, so .form-switch showed a plain, misplaced checkbox). */
.form-switch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
    min-height: 1.5rem;
}

.form-switch .form-check-input {
    -webkit-appearance: none;
    appearance: none;
    width: 2.25em;
    height: 1.25em;
    border-radius: 2em;
    border: 1px solid var(--tm-border-strong, #adb5bd);
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e") left center / contain no-repeat;
    cursor: pointer;
    transition: background-position .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.form-switch .form-check-input:checked {
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: right center;
}

.form-switch .form-check-input:disabled {
    opacity: .55;
    cursor: default;
}

.form-switch .form-check-label {
    margin: 0;
    padding: 0;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--tm-primary-ring);
}

.form-check-input:checked {
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
}

.input-group-text {
    background-color: var(--tm-surface-2);
    border-color: var(--tm-border-strong);
    color: var(--tm-muted);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
}

/* Select2 (bootstrap-5 theme) */
.select2-container--bootstrap-5 .select2-selection {
    border-color: var(--tm-border-strong) !important;
    border-radius: var(--tm-radius-sm) !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--tm-primary) !important;
    box-shadow: 0 0 0 3px var(--tm-primary-ring) !important;
}

/* --------------------------------------------------------------------------
   9. Syncfusion inputs / dropdowns / buttons (match .form-control)
   -------------------------------------------------------------------------- */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-ddl.e-input-group,
.e-ddl.e-input-group.e-control-wrapper,
.e-float-input.e-control-wrapper {
    border-color: var(--tm-border-strong);
    border-radius: var(--tm-radius-sm);
    font-family: var(--tm-font);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.e-input-group:not(.e-float-icon-left):not(.e-float-input)::before,
.e-input-group:not(.e-float-icon-left):not(.e-float-input)::after,
.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before,
.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after {
    background: var(--tm-primary);
}

.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
.e-ddl.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    border-color: var(--tm-primary);
    box-shadow: 0 0 0 3px var(--tm-primary-ring);
}

input.e-input,
textarea.e-input,
.e-input-group input.e-input,
.e-input-group .e-input.e-field,
.e-input-group.e-control-wrapper input.e-input {
    font-family: var(--tm-font);
    color: var(--tm-text);
}

.e-input-group.e-control-wrapper.e-disabled,
.e-input-group.e-disabled {
    background-color: var(--tm-surface-2);
}

.e-dropdownbase .e-list-item {
    font-family: var(--tm-font);
}

.e-dropdownbase .e-list-item.e-item-focus,
.e-dropdownbase .e-list-item.e-hover {
    background-color: var(--tm-primary-50);
    color: var(--tm-primary-active);
}

.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover {
    background-color: var(--tm-primary);
    color: #fff;
}

.e-popup.e-ddl,
.e-popup.e-multi-select-list-wrapper {
    border-radius: var(--tm-radius-sm);
    border-color: var(--tm-border);
    box-shadow: var(--tm-shadow);
}

.e-btn,
.e-css.e-btn {
    font-family: var(--tm-font);
    border-radius: var(--tm-radius-sm);
}

.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover {
    background-color: var(--tm-primary-hover);
    border-color: var(--tm-primary-hover);
}

.e-checkbox-wrapper .e-label,
.e-css.e-checkbox-wrapper .e-label,
.e-radio + label .e-label,
.e-switch-wrapper .e-switch-on,
.e-switch-wrapper .e-switch-off {
    font-family: var(--tm-font);
}

.e-dialog {
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-lg);
    border-color: transparent;
}

.e-dialog .e-dlg-header-content {
    border-top-left-radius: var(--tm-radius-lg);
    border-top-right-radius: var(--tm-radius-lg);
}

.e-dialog .e-footer-content {
    border-bottom-left-radius: var(--tm-radius-lg);
    border-bottom-right-radius: var(--tm-radius-lg);
}

.e-tab .e-tab-header,
.e-tooltip-wrap .e-tip-content,
.e-toast-container .e-toast {
    font-family: var(--tm-font);
}

.e-toast-container .e-toast {
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow-lg);
}

/* --------------------------------------------------------------------------
   10. Syncfusion Grid, toolbar, pager (colours only; row heights untouched)
   -------------------------------------------------------------------------- */
.e-grid {
    font-family: var(--tm-font);
    border-color: var(--tm-border);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow-sm);
}

.e-grid > :first-child {
    border-top-left-radius: var(--tm-radius);
    border-top-right-radius: var(--tm-radius);
}

.e-grid > .e-gridpager,
.e-grid > :last-child {
    border-bottom-left-radius: var(--tm-radius);
    border-bottom-right-radius: var(--tm-radius);
}

.e-grid .e-gridheader,
.e-grid .e-headercontent,
.e-grid .e-headercell,
.e-grid .e-detailheadercell,
.e-grid .e-grouptopleftcell,
.e-grid .e-filterbarcell {
    background-color: var(--tm-surface-2);
    border-color: var(--tm-border);
}

.e-grid .e-gridheader {
    border-bottom-color: var(--tm-border-strong);
}

.e-grid .e-headercell .e-headertext,
.e-grid .e-headercelldiv {
    font-family: var(--tm-font);
    font-weight: 600;
    color: var(--tm-text-2);
}

.e-grid .e-row,
.e-grid .e-rowcell {
    font-family: var(--tm-font);
}

.e-grid .e-rowcell {
    color: var(--tm-text);
    border-color: #edf1f5;
}

.e-grid .e-row.e-altrow {
    background-color: #f8fafc;
}

.e-grid.e-gridhover tr[role='row']:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
.e-grid.e-gridhover tr[role='row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
    background-color: var(--tm-primary-50);
    color: var(--tm-text);
}

.e-grid td.e-active {
    background-color: var(--tm-primary-100);
    color: var(--tm-text);
}

.e-grid .e-gridcontent .e-content {
    background-color: var(--tm-surface);
}

.e-grid .e-sortnumber {
    background-color: var(--tm-primary-100);
    color: var(--tm-primary-active);
}

/* Toolbar (standalone and inside grids) */
.e-toolbar,
.e-toolbar .e-toolbar-items {
    background-color: var(--tm-surface);
    font-family: var(--tm-font);
}

.e-grid .e-toolbar {
    border-bottom: 1px solid var(--tm-border);
    border-top-left-radius: var(--tm-radius);
    border-top-right-radius: var(--tm-radius);
}

.e-grid .e-toolbar .e-toolbar-items {
    border-top-left-radius: var(--tm-radius);
}

.e-toolbar .e-toolbar-item .e-tbar-btn {
    font-family: var(--tm-font);
    border-radius: var(--tm-radius-sm);
    color: var(--tm-text-2);
}

.e-toolbar .e-toolbar-item .e-tbar-btn .e-icons,
.e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: var(--tm-text-2);
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover,
.e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    background-color: var(--tm-primary-50);
    border-color: transparent;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-icons,
.e-toolbar .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text,
.e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-icons,
.e-toolbar .e-toolbar-item .e-tbar-btn:focus .e-tbar-btn-text {
    color: var(--tm-primary-hover);
}

.e-toolbar .e-toolbar-item .e-tbar-btn:active {
    background-color: var(--tm-primary-100);
}

.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-icons,
.e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn .e-tbar-btn-text {
    color: #94a3b8;
}

/* Pager */
.e-grid .e-gridpager,
.e-pager {
    background-color: var(--tm-surface);
    border-color: var(--tm-border);
    font-family: var(--tm-font);
    color: var(--tm-muted);
}

.e-pager .e-numericitem,
.e-grid .e-gridpager .e-numericitem {
    color: var(--tm-text-2);
    border-radius: var(--tm-radius-sm);
}

.e-pager .e-numericitem:hover {
    background-color: var(--tm-primary-50);
    color: var(--tm-primary-hover);
}

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover,
.e-grid .e-gridpager .e-currentitem {
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
    color: #fff !important;
}

.e-pager .e-pagercontainer {
    border-color: var(--tm-border);
    border-radius: var(--tm-radius-sm);
}

/* Context menu & checkbox accents (keep the app's primary-coloured selection) */
.e-contextmenu-wrapper ul,
.e-contextmenu-container ul {
    border-radius: var(--tm-radius-sm);
    box-shadow: var(--tm-shadow);
    font-family: var(--tm-font);
}

/* --------------------------------------------------------------------------
   11. Plain HTML tables
   -------------------------------------------------------------------------- */
.table {
    color: var(--tm-text);
}

.table th,
.table td {
    border-color: var(--tm-border);
}

.table thead th {
    background-color: var(--tm-surface-2);
    color: var(--tm-text-2);
    font-weight: 600;
    border-bottom: 1px solid var(--tm-border-strong);
}

.table thead.thead-dark th,
.table-dark thead th {
    background-color: var(--tm-sidebar-bg);
    color: #fff;
    border-color: var(--tm-sidebar-bg);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8fafc;
}

.table-hover tbody tr:hover {
    background-color: var(--tm-primary-50);
    color: var(--tm-text);
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--tm-border);
}

/* --------------------------------------------------------------------------
   12. Modals (Bootstrap) and SweetAlert2
   -------------------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-lg);
    background-color: var(--tm-surface);
}

.modal-header {
    border-bottom: 1px solid var(--tm-border);
    border-top-left-radius: var(--tm-radius-lg);
    border-top-right-radius: var(--tm-radius-lg);
    background-color: var(--tm-surface);
    align-items: center;
}

.modal-title {
    font-weight: 600;
    color: var(--tm-text);
    letter-spacing: -0.01em;
}

.modal-footer {
    border-top: 1px solid var(--tm-border);
    background-color: var(--tm-surface-2);
    border-bottom-left-radius: var(--tm-radius-lg);
    border-bottom-right-radius: var(--tm-radius-lg);
}

.modal-body .card {
    box-shadow: 0 0 0 1px var(--tm-border);
}

.modal-backdrop {
    background-color: #0f172a;
}

.modal-backdrop.show {
    opacity: 0.45;
}

/* SweetAlert2 v11 ships :where() selectors (zero specificity) - these win */
.swal2-container .swal2-popup {
    font-family: var(--tm-font);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-lg);
    color: var(--tm-text);
}

.swal2-container .swal2-title {
    color: var(--tm-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.swal2-container .swal2-html-container {
    color: var(--tm-text-2);
}

.swal2-popup .swal2-styled {
    border-radius: var(--tm-radius-sm);
    font-weight: 500;
}

.swal2-popup .swal2-styled.swal2-confirm {
    background-color: var(--tm-primary);
}

.swal2-popup .swal2-styled.swal2-confirm:hover {
    background-image: none;
    background-color: var(--tm-primary-hover);
}

.swal2-popup .swal2-styled.swal2-deny {
    background-color: var(--tm-danger);
}

.swal2-popup .swal2-styled.swal2-cancel {
    background-color: #64748b;
}

.swal2-popup .swal2-styled:focus {
    box-shadow: 0 0 0 3px var(--tm-primary-ring);
}

.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select {
    border-color: var(--tm-border-strong);
    border-radius: var(--tm-radius-sm);
}

.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus {
    border-color: var(--tm-primary);
    box-shadow: 0 0 0 3px var(--tm-primary-ring);
}

/* --------------------------------------------------------------------------
   13. Badges, alerts, nav tabs, progress
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.badge-primary,
.badge.bg-primary {
    background-color: var(--tm-primary) !important;
    color: #fff;
}

.badge-success,
.badge.bg-success {
    background-color: var(--tm-success) !important;
    color: #fff;
}

.badge-danger,
.badge.bg-danger {
    background-color: var(--tm-danger) !important;
    color: #fff;
}

.badge-secondary,
.badge.bg-secondary {
    background-color: #64748b !important;
    color: #fff;
}

.alert {
    border-radius: var(--tm-radius);
    border-width: 1px;
}

.alert-primary,
.alert-info {
    background-color: var(--tm-info-50);
    border-color: #bae0f7;
    color: #0c4a6e;
}

.alert-success {
    background-color: var(--tm-success-50);
    border-color: #a7e3bf;
    color: #14532d;
}

.alert-warning {
    background-color: var(--tm-warning-50);
    border-color: #fcd98a;
    color: #78350f;
}

.alert-danger {
    background-color: var(--tm-danger-50);
    border-color: #fbc4c4;
    color: #7f1d1d;
}

.alert-secondary,
.alert-light {
    background-color: var(--tm-surface-2);
    border-color: var(--tm-border);
    color: var(--tm-text-2);
}

.alert .alert-link {
    color: inherit;
}

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

.nav-tabs .nav-link {
    color: var(--tm-muted);
    border-top-left-radius: var(--tm-radius-sm);
    border-top-right-radius: var(--tm-radius-sm);
}

.nav-tabs .nav-link:hover {
    color: var(--tm-primary);
    border-color: transparent transparent var(--tm-border);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--tm-primary);
    font-weight: 600;
    border-color: var(--tm-border) var(--tm-border) var(--tm-surface);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--tm-primary);
}

.progress {
    border-radius: 999px;
    background-color: #e2e8f0;
}

.progress-bar {
    background-color: var(--tm-primary);
}

.page-item.active .page-link {
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
}

.page-link {
    color: var(--tm-primary);
}

/* --------------------------------------------------------------------------
   14. Login / auth shell
   -------------------------------------------------------------------------- */
.login-page {
    background-color: var(--tm-bg);
    background-image: radial-gradient(1200px 600px at 10% -10%, rgba(14, 116, 144, 0.10), transparent 60%),
                      radial-gradient(900px 500px at 110% 110%, rgba(15, 37, 55, 0.08), transparent 60%);
}

.login-logo a {
    color: var(--tm-sidebar-bg);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.login-box .card {
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow);
}

/* --------------------------------------------------------------------------
   15. Theme tooltip (used by theme-modern.js when Bootstrap tooltips are
   not usable on the page)
   -------------------------------------------------------------------------- */
.tm-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2100;
    max-width: 260px;
    padding: 5px 9px;
    font-family: var(--tm-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: #fff;
    background-color: #0f172a;
    border-radius: var(--tm-radius-sm);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
    pointer-events: none;
    white-space: normal;
    word-wrap: break-word;
    opacity: 0;
    visibility: hidden;
}

.tm-tooltip.tm-tooltip-show {
    opacity: 1;
    visibility: visible;
}

.tooltip .tooltip-inner {
    font-family: var(--tm-font);
    background-color: #0f172a;
    border-radius: var(--tm-radius-sm);
}

/* --------------------------------------------------------------------------
   16. Motion - only for users who have not asked for reduced motion.
   Opacity-only on page containers: a transform there would create a new
   containing block and misplace position:fixed modals while animating.
   -------------------------------------------------------------------------- */
@keyframes tm-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    /* Page content fade-in (runs when Vue removes v-cloak, too) */
    .content-wrapper > #app,
    .content-wrapper > .content,
    .content-wrapper > .content-header,
    body > #app,
    .login-box {
        animation: tm-fade-in 0.32s ease-out;
    }

    /* Modal zoom-fade (Bootstrap 4 & 5 both toggle .fade/.show) */
    .modal.fade .modal-dialog {
        transform: translate(0, 14px) scale(0.97);
        transition: transform 0.26s var(--tm-ease), opacity 0.2s ease-out;
    }

    .modal.show .modal-dialog {
        transform: none;
    }

    .modal.modal-static .modal-dialog {
        transform: scale(1.02);
    }

    /* Buttons: gentle lift on hover */
    .btn {
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease,
                    box-shadow 0.15s ease, transform 0.15s var(--tm-ease);
    }

    .btn:not(.btn-link):not(.btn-close):not(.dropdown-item):not(:disabled):not(.disabled):hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    }

    .btn-group > .btn:hover,
    .input-group .btn:hover,
    .btn:active {
        transform: none !important;
    }

    /* Cards: soft shadow on hover (outside modals) */
    .card {
        transition: box-shadow 0.2s ease;
    }

    .content-wrapper .card:hover {
        box-shadow: var(--tm-shadow);
    }

    .modal .card:hover {
        box-shadow: 0 0 0 1px var(--tm-border);
    }

    /* Sidebar / nav link transitions */
    .main-sidebar .nav-link,
    .main-sidebar .e-treeview .e-fullrow,
    .main-sidebar .e-treeview .e-list-text,
    .main-header .nav-link,
    .dropdown-item,
    .nav-tabs .nav-link {
        transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }

    .e-grid .e-rowcell,
    .e-toolbar .e-tbar-btn,
    .e-pager .e-numericitem {
        transition: background-color 0.12s ease, color 0.12s ease;
    }

    .tm-tooltip {
        transition: opacity 0.12s ease, visibility 0.12s ease;
    }
}

/* --------------------------------------------------------------------------
   17. Print - strip decoration
   -------------------------------------------------------------------------- */
@media print {
    body,
    .content-wrapper {
        background: #fff !important;
    }

    .card,
    .e-grid,
    .modal-content,
    .main-header.navbar {
        box-shadow: none !important;
    }

    .tm-tooltip,
    .tooltip {
        display: none !important;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   18. Settings pages kit (st-*): a header with an icon tile and a one-line
   explanation, cards, option rows, help tooltips, empty states.
   Opacity/translate animations only on cards (never on containers that hold
   modals), and only when the user has not asked for reduced motion.
   -------------------------------------------------------------------------- */
.st-page {
    max-width: 1040px;
    padding: 4px 0 24px;
}

.st-page--narrow { max-width: 780px; }

.st-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px 18px;
    background: linear-gradient(120deg, var(--tm-primary-50) 0%, var(--tm-surface) 75%);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
}

.st-head__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: #fff;
    background: var(--st-tone, var(--tm-primary));
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(14, 116, 144, .22);
}

.st-head__text { min-width: 0; flex: 1 1 auto; }

.st-head h1,
.st-head h3 {
    margin: 0 0 2px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--tm-text);
}

.st-head p {
    margin: 0;
    font-size: .875rem;
    color: var(--tm-text-2);
}

.st-head__aside { flex: 0 0 auto; }

.st-card {
    margin-bottom: 16px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow-sm);
}

.st-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tm-border);
}

.st-card__head h2,
.st-card__head h6 {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--tm-text);
}

.st-card__head .st-card__icon { color: var(--st-tone, var(--tm-primary)); }
.st-card__head .st-card__hint { margin-left: auto; font-size: .8rem; color: var(--tm-muted); }
.st-card__body { padding: 14px 16px; }

.st-field { margin-bottom: 14px; }

.st-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: .875rem;
    color: var(--tm-text);
}

.st-hint { margin: 4px 0 0; font-size: .8rem; color: var(--tm-muted); }

/* An option the user turns on or off: the whole row is the target. */
.st-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 8px;
    padding: 12px 14px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.st-option:hover { border-color: var(--tm-primary); background: var(--tm-surface-2); }
.st-option:focus-within { box-shadow: 0 0 0 3px var(--tm-primary-ring); border-color: var(--tm-primary); }
.st-option.is-on { background: var(--tm-primary-50); border-color: var(--tm-primary-100); }
.st-option input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--tm-primary); }
.st-option__icon { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--tm-primary-50); color: var(--tm-primary); }
.st-option__text { display: flex; flex-direction: column; min-width: 0; }
.st-option__title { font-weight: 600; font-size: .9rem; color: var(--tm-text); }
.st-option__desc { font-size: .8rem; color: var(--tm-muted); }

/* (i) help: the text is in data-tip (and aria-label for screen readers). */
.st-help {
    position: relative;
    display: inline-flex;
    margin-left: 2px;
    font-size: .8rem;
    font-weight: 400;
    color: #94a3b8;
    cursor: help;
    outline: none;
}

.st-help:hover,
.st-help:focus { color: var(--tm-primary); }
.st-help:focus-visible { outline: 2px solid var(--tm-primary); outline-offset: 2px; border-radius: 50%; }

.st-help::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 50;
    bottom: calc(100% + 6px);
    left: 50%;
    width: max-content;
    max-width: 260px;
    padding: 6px 9px;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    color: #fff;
    background: #1f2937;
    border-radius: 6px;
    opacity: 0;
    transform: translate(-50%, 4px);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
}

.st-help:hover::after,
.st-help:focus::after { opacity: 1; transform: translate(-50%, 0); }

.st-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.st-actions .st-status { font-size: .85rem; color: var(--tm-muted); }

.st-empty {
    padding: 22px 12px;
    text-align: center;
    color: var(--tm-muted);
}

.st-empty i {
    display: block;
    margin: 0 auto 8px;
    font-size: 1.6rem;
    color: var(--tm-border-strong);
}

.st-empty strong { display: block; color: var(--tm-text); font-weight: 600; }

.st-table tbody tr { transition: background-color .15s ease; }
.st-table tbody tr:hover { background: var(--tm-surface-2); }
.st-table th { font-size: .8rem; font-weight: 600; color: var(--tm-muted); background: var(--tm-surface-2); }
.st-table td.st-center,
.st-table th.st-center { text-align: center; }
.st-table input[type="radio"],
.st-table input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--tm-primary); cursor: pointer; }

.st-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--tm-primary);
    background: var(--tm-primary-50);
    border-radius: 999px;
}

.btn .st-btn-icon { margin-right: 6px; }

@media (prefers-reduced-motion: no-preference) {
    .st-card,
    .st-head { animation: st-rise .32s ease-out both; }
    .st-card:nth-of-type(2) { animation-delay: .05s; }
    .st-card:nth-of-type(3) { animation-delay: .1s; }
    .st-card:nth-of-type(n+4) { animation-delay: .14s; }
    .st-head__icon { animation: st-pop .4s cubic-bezier(.2, .8, .3, 1.2) both; }
    .st-option:active { transform: scale(.995); }
    .st-page .btn { transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease; }
    .st-page .btn:active { transform: scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
    .st-option, .st-help::after, .st-table tbody tr { transition: none; }
}

@keyframes st-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes st-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
    .st-head { flex-wrap: wrap; padding: 12px 14px; }
    .st-head__aside { flex-basis: 100%; }
    .st-card__body { padding: 12px; }
}

/* Screen-reader-only text (Bootstrap 5's .visually-hidden; this app runs Bootstrap 4, which only has
   .sr-only). Without this, hidden labels and tooltip text show on screen. */
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    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;
}