:root {
    /* --- Rootshive premium warm-neutral system --- */
    --background: #FDFDFC;
    --sidebar: #FDFDFC;
    --surface: #FFFFFF;
    --surface-hover: #F8F7F4;
    --control-active: #FFF3E5;
    --control-active-hover: #FFE8D0;

    --text-primary: #171717;
    --text-secondary: #5F5F5F;
    --text-muted: #9A9A9A;

    --border: #E8E6E2;
    --border-strong: #D8D5CF;

    --primary: #FD450A;
    --primary-hover: #DC6E12;
    --primary-soft: #FFF3E5;

    --success: #49B78A;
    --success-soft: #EAF8F1;
    --warning: #E6A23C;
    --warning-soft: #FFF7E8;
    --danger: #E45353;
    --danger-soft: #FFF0F0;

    --info-column: #FFF8E8;
    --planning-column: #FFFBE4;
    --task-column: #FFF1F1;
    --meeting-column: #FFF8EA;

    --shadow-xs: 0 1px 2px rgba(23, 23, 23, 0.04);
    --shadow-sm: 0 8px 24px rgba(41, 35, 27, 0.06);
    --shadow-md: 0 18px 50px rgba(41, 35, 27, 0.09);

    /* Legacy aliases keep older screens on the same palette. */
    --rc-primary: var(--primary);
    --rc-primary-hover: var(--primary-hover);
    --rc-secondary: var(--text-secondary);
    --rc-success: var(--success);
    --rc-info: var(--primary);
    --rc-warning: var(--warning);
    --rc-warning-rgb: 230, 162, 60;
    --rc-danger: var(--danger);
    --rc-dark: var(--text-primary);
    --rc-light: var(--primary-soft);

    /* --- Warm neutral scale --- */
    --rc-gray-100: var(--background);
    --rc-gray-200: var(--surface-hover);
    --rc-gray-300: var(--border);
    --rc-gray-400: var(--border-strong);
    --rc-gray-500: var(--text-muted);
    --rc-gray-600: var(--text-secondary);
    --rc-gray-700: #474747;
    --rc-gray-800: #2E2E2E;
    --rc-gray-900: var(--text-primary);

    /* --- Typography --- */
    --rc-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --rc-font-scale: 95%;
    --rc-letter-spacing: -0.03em;
    --rc-text-body: var(--text-secondary);
    --rc-text-muted: var(--text-muted);
    --rc-text-heading: var(--text-primary);
    --rc-text-soft: var(--text-muted);

    /* --- Forms --- */
    --rc-input-bg: #ffffff;
    --rc-input-border: var(--rc-gray-300);
    --rc-input-border-hover: var(--rc-gray-500);
    --rc-input-border-focus: var(--rc-primary);
    --rc-input-placeholder: var(--rc-text-soft);
    --rc-focus-ring: rgba(253, 69, 10, 0.18);

    /* --- Buttons --- */
    --rc-button-min-height: 2.8rem;
    --rc-button-padding-x: 1.25rem;
    --rc-button-padding-y: 0.75rem;
    --rc-button-font-size: 0.8rem;
    --rc-button-font-weight: 600;
    --rc-button-line-height: 1.2;
    --rc-button-radius: 12px;
    --rc-primary-button-radius: 12px;

    /* --- Bootstrap Theme Variable Overrides (v5) --- */
    --bs-primary: var(--rc-primary);
    --bs-secondary: var(--rc-secondary);
    --bs-success: var(--rc-success);
    --bs-info: var(--rc-info);
    --bs-warning: var(--rc-warning);
    --bs-danger: var(--rc-danger);
    --bs-dark: var(--rc-dark);
    --bs-light: var(--rc-light);

    --bs-body-color: var(--rc-text-body);
    --bs-body-bg: var(--background);
    --bs-font-sans-serif: var(--rc-font-sans);
    --bs-body-font-family: var(--rc-font-sans);

    --bs-link-color: var(--rc-text-heading);
    --bs-link-hover-color: var(--rc-text-heading);

    /* Bootstrap utility classes like .link-primary/.text-primary often depend on RGB vars.
     Define them so they don't fall back to Bootstrap blue. */
    --bs-primary-rgb: 253, 69, 10;
    --bs-info-rgb: 253, 69, 10;
    --bs-success-rgb: 73, 183, 138;
    --bs-warning-rgb: 230, 162, 60;
    --bs-danger-rgb: 228, 83, 83;
    --bs-link-color-rgb: 23, 23, 23;
}

/* Global defaults (safe fallbacks when Bootstrap variables aren't applied) */
html {
    font-size: var(--rc-font-scale);
}

body {
    font-family: var(--rc-font-sans);
    font-size: 1rem;
    letter-spacing: var(--rc-letter-spacing);
    color: var(--rc-text-body);
    background-color: var(--background);
}

button,
input,
select,
textarea {
    font-family: inherit;
    letter-spacing: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-dark,
.text-body,
.form-control,
.form-select,
textarea.form-control {
    color: var(--rc-text-heading);
}

a {
    color: var(--rc-text-heading);
}

a:hover {
    color: var(--rc-text-heading);
}

/* --- Tag UI (pills used across screens) --- */
.badgeb,
.badgec,
.badged {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6em 1.5em;
    font-size: 10px;
    font-weight: 600;
    border-radius: 9999px;
    color: var(--rc-text-heading) !important;
    text-decoration: none !important;
}

.badgeb {
    background-color: var(--surface-hover);
    border: 1px solid var(--border);
}

.badgec {
    background-color: var(--primary-soft);
    color: var(--primary-hover) !important;
    border: 1px solid rgba(253, 69, 10, 0.2);
}

.badged {
    background-color: var(--success-soft);
    color: #28795B !important;
    border: 1px solid rgba(73, 183, 138, 0.22);
}

/* Checked-in: orange text on very light orange */
.badged.badged--checkedin {
    background-color: rgba(var(--rc-warning-rgb), 0.08) !important;
    color: var(--rc-text-heading) !important;
}

.badgec:visited,
.badgec:hover,
.badgec:focus,
.badgec:active {
    color: var(--rc-text-heading) !important;
    text-decoration: none !important;
}

.rc-checkin-btn,
.rc-checkin-btn:visited,
.rc-checkin-btn:hover,
.rc-checkin-btn:focus,
.rc-checkin-btn:active {
    color: var(--rc-text-heading) !important;
    text-decoration: none !important;
}

/* ---- Global: remove blue text color ----
   Some pages use Bootstrap utility classes (e.g. .link-primary) which can force blue.
   These overrides ensure links and "info" text follow the brand palette instead.
*/
.link-primary,
.link-primary:visited {
    color: var(--rc-primary) !important;
}

.link-primary:hover,
.link-primary:focus,
.link-primary:active {
    color: var(--rc-secondary) !important;
}

.link-info,
.link-info:visited,
.link-info:hover,
.link-info:focus,
.link-info:active,
.text-info {
    color: var(--rc-primary) !important;
}

/* Bootstrap-like utility alignment (works even on mixed Bootstrap versions) */
.text-primary {
    color: var(--rc-text-heading) !important;
}

.text-secondary,
.form-label,
.form-text {
    color: var(--rc-text-body) !important;
}

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

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    white-space: nowrap;
}

.btn:not(.btn-sm):not(.btn-lg):not(.btn-icon) {
    min-height: var(--rc-button-min-height);
    padding: var(--rc-button-padding-y) var(--rc-button-padding-x);
    font-size: var(--rc-button-font-size);
    font-weight: var(--rc-button-font-weight);
    line-height: var(--rc-button-line-height);
    border-radius: var(--rc-button-radius);
}

.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active {
    text-decoration: none;
    color: var(--bs-btn-hover-color, var(--bs-btn-color)) !important;
}

.btn-primary {
    background-color: var(--rc-primary) !important;
    border-color: var(--rc-primary) !important;
    color: #ffffff !important;
    border-radius: var(--rc-primary-button-radius, 999px) !important;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rc-primary-button-gap, 10px);
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

.btn-primary:not(.btn-sm):not(.btn-lg) {
    min-height: var(--rc-primary-button-min-height, var(--rc-button-min-height));
    padding: var(--rc-primary-button-padding, var(--rc-button-padding-y) var(--rc-button-padding-x));
    font-size: var(--rc-primary-button-font-size, var(--rc-button-font-size));
    font-weight: var(--rc-primary-button-font-weight, var(--rc-button-font-weight));
    line-height: var(--rc-primary-button-line-height, var(--rc-button-line-height));
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--rc-primary-button-hover-bg, var(--primary-hover)) !important;
    border-color: var(--rc-primary-button-hover-border, var(--primary-hover)) !important;
    color: #ffffff !important;
}

.btn-outline-primary {
    color: var(--rc-primary) !important;
    border-color: var(--rc-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--rc-primary) !important;
    border-color: var(--rc-primary) !important;
    color: #ffffff !important;
}

/* Text helpers requested */
.text-heading {
    color: var(--rc-text-heading) !important;
}

/* Inputs & Forms */
.form-control,
.form-select,
textarea.form-control {
    background-color: var(--rc-input-bg);
    border-color: var(--rc-input-border);
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--rc-input-placeholder);
}

.form-control:hover,
.form-select:hover,
textarea.form-control:hover {
    border-color: var(--rc-input-border-hover);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--rc-input-border-focus);
    box-shadow: 0 0 0 0.2rem var(--rc-focus-ring);
}

/* Subtle badge styles (optional utility classes) */
.badge-subtle-primary {
    background: var(--primary-soft);
    color: var(--primary-hover);
}

/* Avatars: ensure true circles globally */
.avatar-circle,
.avatar.avatar-circle {
    border-radius: 9999px !important;
    overflow: hidden;
}

.avatar-circle img,
.avatar.avatar-circle img {
    border-radius: inherit;
}

.badge-subtle-success {
    background: var(--success-soft);
    color: #28795B;
}

.badge-subtle-warning {
    background: var(--warning-soft);
    color: #94651D;
}

.badge-subtle-danger {
    background: var(--danger-soft);
    color: #A73737;
}

/* Premium global surface treatment. Kept intentionally restrained so data-heavy
   screens remain fast to scan while still feeling cohesive. */
.main {
    background: var(--background) !important;
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.toast {
    background-color: var(--surface);
    border-color: var(--border) !important;
}

.card,
.modal-content,
.dropdown-menu {
    box-shadow: var(--shadow-xs);
}

.dropdown-menu,
.modal-content,
.offcanvas {
    border-radius: 16px;
}

.dropdown-item {
    border-radius: 10px;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background: var(--surface-hover) !important;
    color: var(--text-primary) !important;
}

.table {
    --bs-table-bg: var(--surface);
    --bs-table-striped-bg: var(--surface-hover);
    --bs-table-hover-bg: var(--primary-soft);
    --bs-table-border-color: var(--border);
    color: var(--text-secondary);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--border);
}

.table thead th {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.form-control,
.form-select,
.input-group-text {
    background-color: var(--surface);
    border-color: var(--border);
    border-radius: 12px;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--border-strong);
}

.btn-light,
.btn-white {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

.btn-light:hover,
.btn-white:hover {
    background: var(--surface-hover) !important;
    border-color: var(--border-strong) !important;
}

.btn-outline-primary {
    background: var(--surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
    color: var(--primary-hover) !important;
}

.pagination .page-link {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-secondary);
}

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

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