/*
 * KORE Reform theme - Kered's October 2026 brief.
 *
 * Black is the foundation and blue the identity: what was blue stays blue,
 * what was white is now black or charcoal, and the sidebar is black. Three
 * layers - near-black page, charcoal cards, blue headers and actions - with
 * white primary text and grey secondary text.
 *
 * Type is Manrope SemiBold for headings and key figures, Inter for everything
 * else; 600 is the main weight, 500 the supporting one, 700 only for alerts
 * and milestones.
 *
 * Loaded after every other stylesheet (old_base.html), so it wins at equal
 * specificity. SB Admin's utilities are !important, so their overrides are too.
 */

:root {
  color-scheme: dark;

  --kx-bg: #08090C;            /* page */
  --kx-surface: #1A1C22;       /* cards */
  --kx-surface-2: #23262E;     /* inputs, card headers, rows */
  --kx-border: #2E323B;
  /* Kered's #4F73E0 a touch deeper: white writing on it is 4.3:1, under the
     4.5:1 minimum, and on this it is 4.5:1. The eye cannot tell them apart. */
  --kx-blue: #4D70D9;          /* header panels, buttons */
  --kx-blue-strong: var(--kx-blue);
  --kx-blue-deep: #3556B8;     /* hover, pressed */
  --kx-blue-text: #8AA4F2;     /* blue writing on black or charcoal */
  --kx-text: #FFFFFF;
  --kx-text-muted: #A9AEB8;
  --kx-danger: #B3261E;
  --kx-success: #1E7B45;
  --kx-info: #1B6F80;
  --kx-warning: #8A6100;
  --kx-secondary: #3A3D45;     /* secondary buttons, neutral notes */

  --kx-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kx-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Type ------------------------------------------------------------- */

body,
.btn, .form-control, .custom-select, input, select, textarea, button,
.sidebar, .tooltip, .popover, .dropdown-menu {
  font-family: var(--kx-body);
}

body { font-size: 15px; font-weight: 400; line-height: 1.5; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.modal-title, .card-title, .page-title {
  font-family: var(--kx-heading);
  font-weight: 600;
  color: inherit;
  letter-spacing: -0.01em;
}

/* Page heading in the top bar */
.topbar .page-title { font-size: 1.5rem; line-height: 1.2; }           /* 24px */
@media (min-width: 768px) { .topbar .page-title { font-size: 1.75rem; } }   /* 28px */

/* Section headings */
.card-header h5, .card-header h6, .card-header .h5, .card-header .h6,
.card-header .m-0, h5, .h5 { font-size: 1.125rem; }                        /* 18px */
h6, .h6 { font-size: 1rem; }                                               /* 16px */

/* Key figures - streak count, calories, macros. Bootstrap's display sizes are
   weight 300, which is the thin look Kered wants gone. */
.kx-stat, .display-1, .display-2, .display-3, .display-4, .display-5 {
  font-family: var(--kx-heading);
  font-weight: 600;
}
.kx-food { font-weight: 500; }   /* food and workout names, profile values */
.table td { font-weight: 500; }  /* values, beside their 600 labels */
th { font-weight: 600; }
.select2-container, .select2-results__option { font-weight: 500; }   /* food names in the picker */

b, strong { font-weight: 600; }

small, .small { font-size: 0.8125rem; }                                    /* 13px */

.btn { font-weight: 600; }
.btn:not(.btn-sm):not(.btn-lg) { font-size: 0.9375rem; }                   /* 15px */

label, .col-form-label { font-weight: 600; }

/* Alerts and milestones are the place for real bold */
.alert, .alert strong { font-weight: 600; }
.alert-heading, .alert .font-weight-bold { font-weight: 700; }

/* SB Admin's "bold" is 700 everywhere; Kered wants it for alerts only */
.font-weight-bold { font-weight: 600 !important; }
.font-weight-light, .font-weight-lighter { font-weight: 400 !important; }

/* ---- Page and shell --------------------------------------------------- */

html, body, #wrapper, #content-wrapper, #content {
  background-color: var(--kx-bg) !important;
}
body { color: var(--kx-text); }

/* Login, payment and onboarding pages were on the blue gradient */
body.bg-gradient-primary, body.body-colour {
  background: var(--kx-bg) !important;
}

a { color: var(--kx-blue-text); }
a:hover { color: #B3C4F7; }

hr { border-top-color: var(--kx-border); }

/* Top bar */
.topbar, .topbar.bg-white, .navbar.bg-white {
  background-color: var(--kx-bg) !important;
  border-bottom: 1px solid var(--kx-border);
  box-shadow: none !important;
}
.topbar .page-title, .topbar .text-gray-800 { color: var(--kx-text) !important; }
.topbar .btn-link, #sidebarToggleTop { color: var(--kx-blue-text) !important; }
.topbar #sidebarToggleTop:hover { background-color: var(--kx-surface-2); }

/* Sidebar: black, white labels, blue for the section you are in */
.sidebar.bg-gradient-primary, .sidebar {
  background: var(--kx-bg) !important;
  border-right: 1px solid var(--kx-border);
}
.sidebar-dark .nav-item .nav-link,
.sidebar-dark .nav-item .nav-link i { color: rgba(255, 255, 255, 0.85); }
.sidebar .nav-item .nav-link span { font-family: var(--kx-body); font-weight: 500; }
.sidebar-dark .nav-item .nav-link:hover,
.sidebar-dark .nav-item .nav-link:hover i { color: #fff; }
.sidebar-dark .nav-item.active .nav-link {
  background-color: var(--kx-blue-strong);
  color: #fff;
}
.sidebar-dark .nav-item.active .nav-link i { color: #fff; }
.sidebar-dark hr.sidebar-divider { border-top-color: var(--kx-border); }
.nutrition-locked { opacity: 0.7; }

/* ---- Cards ------------------------------------------------------------ */

.card {
  background-color: var(--kx-surface);
  border-color: var(--kx-border);
  color: var(--kx-text);
}
.card-header, .card-footer {
  background-color: var(--kx-surface-2);
  border-color: var(--kx-border);
}
.card.shadow, .shadow { box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.5) !important; }

/* Kered's blue - section headers, the nutrition overview */
.bg-primary { background-color: var(--kx-blue) !important; }
.border-primary { border-color: var(--kx-blue) !important; }
.border-left-primary { border-left-color: var(--kx-blue) !important; }

/* What was white is now charcoal */
.bg-white, .bg-light { background-color: var(--kx-surface) !important; }
.bg-gray-100, .bg-gray-200 { background-color: var(--kx-surface-2) !important; }
/* SB Admin's mid-grey (the Coaching Call card) is too light for white writing */
.bg-secondary { background-color: var(--kx-secondary) !important; }

/* ---- Writing ---------------------------------------------------------- */

.text-gray-900, .text-gray-800, .text-gray-700, .text-dark, .text-black,
.text-body { color: var(--kx-text) !important; }
.text-gray-600, .text-gray-500, .text-gray-400, .text-muted,
.text-secondary { color: var(--kx-text-muted) !important; }
.text-primary { color: var(--kx-blue-text) !important; }
.text-success { color: #4FD18B !important; }
.text-danger { color: #FF7A70 !important; }
.text-warning { color: #F6C23E !important; }
.text-info { color: #5BC8DB !important; }
/* Blue panels keep white writing */
.bg-primary .text-primary, .bg-primary a:not(.btn) { color: #fff !important; }
.bg-primary .text-white-50 { color: #fff !important; }

/* ---- Buttons ---------------------------------------------------------- */

.btn-primary {
  background-color: var(--kx-blue-strong);
  border-color: var(--kx-blue-strong);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--kx-blue-deep);
  border-color: var(--kx-blue-deep);
  color: #fff;
}
.btn-secondary, .btn-light, .btn-dark {
  background-color: var(--kx-secondary);
  border-color: var(--kx-secondary);
  color: #fff;
}
.btn-secondary:hover, .btn-light:hover, .btn-dark:hover {
  background-color: #4A4E58; border-color: #4A4E58; color: #fff;
}
.btn-success { background-color: var(--kx-success); border-color: var(--kx-success); color: #fff; }
.btn-success:hover { background-color: #17643A; border-color: #17643A; color: #fff; }
.btn-danger { background-color: var(--kx-danger); border-color: var(--kx-danger); color: #fff; }
.btn-danger:hover { background-color: #921E18; border-color: #921E18; color: #fff; }
.btn-info { background-color: var(--kx-info); border-color: var(--kx-info); color: #fff; }
.btn-info:hover { background-color: #155A68; border-color: #155A68; color: #fff; }
.btn-warning { color: #1A1C22; }
.btn-outline-primary { color: var(--kx-blue-text); border-color: var(--kx-blue-text); }
.btn-outline-primary:hover { background-color: var(--kx-blue-strong); border-color: var(--kx-blue-strong); color: #fff; }
.btn-outline-secondary { color: var(--kx-text-muted); border-color: var(--kx-border); }
.btn-outline-secondary:hover { background-color: var(--kx-secondary); color: #fff; }
.btn-link { color: var(--kx-blue-text); }

/* ---- Forms ------------------------------------------------------------ */

.form-control, .custom-select, .form-control-user,
.form-control:focus {
  background-color: var(--kx-surface-2);
  border-color: var(--kx-border);
  color: var(--kx-text);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--kx-blue);
  box-shadow: 0 0 0 0.2rem rgba(77, 112, 217, 0.35);
}
.form-control::placeholder { color: #7D828D; opacity: 1; }
.form-control:disabled, .form-control[readonly] { background-color: #15171C; color: var(--kx-text-muted); }
.input-group-text {
  background-color: var(--kx-secondary);
  border-color: var(--kx-border);
  color: var(--kx-text);
}
.form-text, .help-block { color: var(--kx-text-muted) !important; }
.custom-control-label::before { background-color: var(--kx-surface-2); border-color: #5A5F6B; }

/* ---- Tables, lists, menus --------------------------------------------- */

.table { color: var(--kx-text); }
.table th, .table td, .table thead th { border-color: var(--kx-border); }
/* A blue table head (the meals list) stays blue */
.table thead:not(.bg-primary) th, .thead-light th { background-color: var(--kx-surface-2); color: var(--kx-text); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); }
.table-hover tbody tr:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--kx-text); }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--kx-border); }

.list-group-item {
  background-color: var(--kx-surface);
  border-color: var(--kx-border);
  color: var(--kx-text);
}
.list-group-item-action:hover { background-color: var(--kx-surface-2); color: var(--kx-text); }

.dropdown-menu { background-color: var(--kx-surface); border-color: var(--kx-border); }
.dropdown-item { color: var(--kx-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--kx-surface-2); color: var(--kx-text); }

.nav-tabs { border-color: var(--kx-border); }
.nav-tabs .nav-link.active { background-color: var(--kx-surface); border-color: var(--kx-border) var(--kx-border) var(--kx-surface); color: var(--kx-text); }
.nav-pills .nav-link.active { background-color: var(--kx-blue-strong); }

.progress { background-color: var(--kx-surface-2); font-size: 0.8125rem; }
.progress-bar.bg-primary { background-color: var(--kx-blue-strong) !important; }

.badge-light, .badge-secondary { background-color: var(--kx-secondary); color: #fff; }
.badge-primary { background-color: var(--kx-blue-strong); }
.badge-warning { color: #1A1C22; }

/* ---- Pop-ups ---------------------------------------------------------- */

.modal-content {
  background-color: var(--kx-surface);
  border-color: var(--kx-border);
  color: var(--kx-text);
}
.modal-header, .modal-footer { border-color: var(--kx-border); }
.modal-backdrop.show { opacity: 0.75; }
.close, .close:hover { color: #fff; text-shadow: none; }

/* ---- Alerts: dark fills, white writing -------------------------------- */

/* Rows and cells use these classes too, without .alert */
.alert, .alert-danger, .alert-success, .alert-warning, .alert-info, .alert-primary,
.alert-secondary, .alert-light, .alert-dark { color: #fff; }
.alert-danger > th, .alert-danger > td { color: #fff; }
.alert { border-width: 0 0 0 4px; }
.alert-danger { background-color: #4A1512; border-color: #E5534B; }
.alert-success { background-color: #12371F; border-color: #3FB96E; }
.alert-warning { background-color: #3D2E05; border-color: #F6C23E; }
.alert-info, .alert-primary { background-color: #16264F; border-color: var(--kx-blue); }
.alert-secondary, .alert-light, .alert-dark { background-color: #2A2D35; border-color: #6B7080; }
.alert .alert-link, .alert a:not(.btn) { color: #fff; text-decoration: underline; }

/* ---- Widgets ---------------------------------------------------------- */

/* Food search (select2) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--kx-surface-2) !important;
  border-color: var(--kx-border) !important;
  color: var(--kx-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--kx-text) !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #7D828D; }
.select2-dropdown {
  background-color: var(--kx-surface) !important;
  border-color: var(--kx-border) !important;
  color: var(--kx-text);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--kx-surface-2);
  border-color: var(--kx-border) !important;
  color: var(--kx-text);
}
.select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--kx-surface-2); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--kx-blue-strong) !important; color: #fff !important;
}
.select2-results__group, .select2-container--default .select2-results__group { color: var(--kx-text-muted) !important; }

/* Calendar (FullCalendar 5 reads these) */
.fc {
  --fc-page-bg-color: var(--kx-surface);
  --fc-neutral-bg-color: var(--kx-surface-2);
  --fc-neutral-text-color: var(--kx-text-muted);
  --fc-border-color: var(--kx-border);
  --fc-today-bg-color: rgba(77, 112, 217, 0.18);
  --fc-button-bg-color: var(--kx-blue-strong);
  --fc-button-border-color: var(--kx-blue-strong);
  --fc-button-hover-bg-color: var(--kx-blue-deep);
  --fc-button-active-bg-color: var(--kx-blue-deep);
  color: var(--kx-text);
}
.fc a { color: var(--kx-text); }

/* Date picker (flatpickr) */
.flatpickr-calendar { background: var(--kx-surface); border-color: var(--kx-border); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.6); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays, span.flatpickr-weekday { background: var(--kx-surface); color: var(--kx-text); fill: var(--kx-text); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--kx-text); }
.flatpickr-day { color: var(--kx-text); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: #5A5F6B; }
.flatpickr-day:hover { background: var(--kx-surface-2); border-color: var(--kx-surface-2); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--kx-blue-strong); border-color: var(--kx-blue-strong); }
.flatpickr-day.today { border-color: var(--kx-blue-text); }

/* Signature pad - the ink is dark, so the pad stays white inside the dark card */
.jSignature, canvas.jSignature { background-color: #fff !important; border-radius: 0.35rem; }

/* Scrollbars */
::-webkit-scrollbar-track { background: var(--kx-bg); }
::-webkit-scrollbar-thumb { background: #3A3D45; }

/* ---- Nutrition -------------------------------------------------------- */

/* Date chips: charcoal, with the chosen day in blue (was bright blue / green) */
.date-item { background-color: var(--kx-surface-2); color: var(--kx-text); border: 1px solid var(--kx-border); }
.date-item:hover { background-color: var(--kx-secondary); }
.date-item.selected-date { background-color: var(--kx-blue-strong); border-color: var(--kx-blue-strong); }
#calendarPicker { background-color: var(--kx-surface-2); border-color: var(--kx-border); color: var(--kx-text); }

.nutrition-item .display-4, .nutrition-item .display-5 { font-size: 1.75rem; line-height: 1.2; }  /* 28px */