@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

/*
 * NeuroTrainer brand override layer — NeuroTrainer Visual Brand & Style Guide
 * v1.0 (2026). Loaded AFTER style.css so these rules win. Do NOT edit style.css.
 *
 * Scheme (inverted): LIGHT shell (topbar + sidebar) with Electric Indigo active
 * states; DARK Deep Space content area with dark cards/tables/inputs and light
 * text. Dark-content rules are scoped under .content-page so the light shell and
 * the light .wrapper-page auth screens are unaffected.
 *
 * Palette: Deep Space #0D0F12 · Electric Indigo #6366F1 (accent; hover #4F46E5;
 * #818CF8 for indigo text/links on dark) · White · Mist #F5F8F7 · Midnight
 * #1A1A2E · Slate #6B7280 · Haze #E2E8E6. Type: Inter (UI) + IBM Plex Mono (data).
 */

:root {
  --nt-deep-space: #0D0F12;
  --nt-indigo: #6366F1;
  --nt-indigo-hover: #4F46E5;
  --nt-indigo-light: #818CF8;          /* indigo text/links on dark */
  --nt-indigo-soft: rgba(99, 102, 241, 0.15);
  --nt-white: #FFFFFF;
  --nt-mist: #F5F8F7;
  --nt-midnight: #1A1A2E;
  --nt-slate: #6B7280;
  --nt-haze: #E2E8E6;
  /* dark content surfaces */
  --nt-content-bg: #0D0F12;
  --nt-surface: #181B22;               /* cards / page-title */
  --nt-surface-2: #11141A;             /* table header, inputs */
  --nt-on-dark: #E6E8EC;               /* primary text on dark */
  --nt-on-dark-muted: #9AA3B2;         /* secondary text on dark */
  --nt-dark-border: rgba(255, 255, 255, 0.08);
  --nt-sidebar-slate: #262D34;          /* midpoint between #3F4A56 and Deep Space #0D0F12 */
  --nt-sidebar-slate-hover: #313A44;
  --nt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --nt-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ============ Typography ============ */
/* html carried a charcoal (#323b44) bg that showed through below short pages
   (e.g. login) as a grey band — make it Deep Space too. */
html { background-color: var(--nt-content-bg); }
body {
  font-family: var(--nt-font);
  color: var(--nt-on-dark);
  background-color: var(--nt-content-bg);
}
h1, h2, h3, h4, h5, h6,
.page-title, .header-title, .btn, .nav, .dropdown-menu, label, .form-control { font-family: var(--nt-font); }

/* Data voice — IBM Plex Mono for numbers/metrics */
.nt-mono, .nt-stat { font-family: var(--nt-mono); font-variant-numeric: tabular-nums; }
.nt-stat { color: var(--nt-indigo-light); font-weight: 700; }

/* ============ Topbar ============ */
/* Logo plaque (top of the sidebar column) matches the rest of the sidebar; the
   nav strip stays Deep Space. */
.topbar .topbar-left { background-color: var(--nt-sidebar-slate) !important; border-right: 1px solid var(--nt-dark-border); }
.navbar-custom { background-color: var(--nt-deep-space) !important; border-bottom: 1px solid var(--nt-dark-border); }
.button-menu-mobile { background-color: var(--nt-deep-space); color: var(--nt-on-dark); }
.cobrand-logo { color: #ffffff !important; }
/* Collapsed side-menu rail (70px) shows the brain mark via .logo-small. The
   source image is wider than the rail, so constrain it — without this it renders
   at natural width and overflows across the nav strip (the collapse bug). */
.logo-small img { height: 42px; width: auto; max-width: 100%; padding-top: 0; vertical-align: middle; }
#wrapper.enlarged .topbar .topbar-left .logo-small { line-height: 70px; }
.navbar-custom .nav-link { color: rgba(255, 255, 255, 0.7); }
.navbar-custom .nav-link:hover { color: #ffffff; }

/* ============ Sidebar (slate, matching the user dropdown #3F4A56) ============ */
.side-menu.left {
  background: var(--nt-sidebar-slate) !important;
  box-shadow: none;
  border-right: 1px solid var(--nt-dark-border);
}
#sidebar-menu > ul > li > a { color: #D6DAE0; border-left: 3px solid transparent; }
#sidebar-menu > ul > li > a:hover { color: #ffffff; background: var(--nt-sidebar-slate-hover); }
#sidebar-menu > ul > li > a.active {
  color: #ffffff !important;
  background: rgba(99, 102, 241, 0.25) !important;
  border-left: 3px solid var(--nt-indigo) !important;
}
#sidebar-menu ul li a i { color: inherit; }
.sidebar-inner .nav-footer p { color: #AEB6C2; }
.sidebar-inner .nav-footer a { color: var(--nt-indigo-light); }
.text-nt-blue { color: var(--nt-indigo-light) !important; }

/* Collapsed side-menu (.enlarged) hover flyout. The Minton template styles the
   popout label and submenu with a light-grey box (#eeeeee/#ffffff) and the old
   cyan-green text (#19c38f); on the dark shell that reads as a broken light
   overflow. Re-skin in the slate palette so the popout looks intentional.
   !important here matches the template's !important light backgrounds. */
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:hover,
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:active,
#wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:focus {
  background: var(--nt-sidebar-slate-hover) !important;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > a {
  background: var(--nt-sidebar-slate-hover);
  color: #ffffff;
  border-color: var(--nt-indigo);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a,
#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul a {
  background: var(--nt-sidebar-slate);
  color: #D6DAE0;
}
#wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a:hover,
#wrapper.enlarged .left.side-menu #sidebar-menu li .show-menu + ul a:hover {
  background: var(--nt-sidebar-slate-hover);
  color: #ffffff;
}
#wrapper.enlarged #sidebar-menu ul ul { border-color: var(--nt-dark-border) !important; }

/* ============ Content area (DARK Deep Space) ============ */
.content-page { background-color: var(--nt-content-bg); color: var(--nt-on-dark); }
.content-page a { color: var(--nt-indigo-light); }
.content-page a:hover { color: #A5B4FC; }
.content-page .text-dark, .content-page .text-body { color: var(--nt-on-dark) !important; }
.content-page .text-muted { color: var(--nt-on-dark-muted) !important; }

/* Page title — dark surface */
.page-title-box {
  background-color: var(--nt-surface);
  box-shadow: none;
  border-bottom: 1px solid var(--nt-dark-border);
}
.page-title { color: var(--nt-on-dark); font-weight: 600; }
.page-title-box .breadcrumb, .page-title-box .breadcrumb a,
.page-title-box .breadcrumb-item.active { color: var(--nt-on-dark-muted); }

/* Cards / panels — dark surface */
.content-page .card-box,
.card-box {
  background-color: var(--nt-surface);
  color: var(--nt-on-dark);
  border: 1px solid var(--nt-dark-border);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.content-page .header-title, .card-box .header-title { color: var(--nt-on-dark); }
/* keep .text-white white on dark cards (do not force to midnight) */

/* Tables — dark */
.content-page .table { color: var(--nt-on-dark); }
.content-page .table thead th {
  background-color: var(--nt-surface-2);
  color: var(--nt-on-dark);
  border-bottom: 1px solid var(--nt-dark-border);
  font-weight: 600;
}
.content-page .table td, .content-page .table th,
.content-page .table-bordered, .content-page .table-bordered td, .content-page .table-bordered th {
  border-color: var(--nt-dark-border);
}
.content-page .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); }
.content-page .table-hover tbody tr:hover { background-color: rgba(99, 102, 241, 0.08); }

/* Forms — dark inputs */
.content-page .form-control {
  background-color: var(--nt-surface-2);
  border: 1px solid var(--nt-dark-border);
  color: var(--nt-on-dark);
  border-radius: 6px;
}
.content-page .form-control:focus {
  background-color: var(--nt-surface-2);
  border-color: var(--nt-indigo);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
  color: var(--nt-on-dark);
}
.content-page .form-control::placeholder { color: var(--nt-on-dark-muted); opacity: 1; }
.content-page .input-group-text {
  background-color: var(--nt-surface-2);
  border-color: var(--nt-dark-border);
  color: var(--nt-on-dark-muted);
}

/* ============ Buttons (indigo primary) ============ */
.btn { border-radius: 6px; font-weight: 600; transition: all 150ms ease; }
.btn-rounded, .btn-rounded-small { border-radius: 6px !important; }
.btn-primary { background-color: var(--nt-indigo); border-color: var(--nt-indigo); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-primary.focus, .open > .dropdown-toggle.btn-primary,
.btn-primary:not([disabled]):not(.disabled).active,
.btn-primary:not([disabled]):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--nt-indigo-hover) !important;
  border-color: var(--nt-indigo-hover) !important;
}
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5) !important; }
.btn-custom.btn-primary { background-color: var(--nt-indigo); border-color: var(--nt-indigo); }
/* secondary action buttons used the old cyan (.btn-info) -> brand indigo */
.btn-info, .btn-custom.btn-info { background-color: var(--nt-indigo); border-color: var(--nt-indigo); color: #fff; }
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.btn-custom.btn-info:hover, .show > .btn-info.dropdown-toggle {
  background-color: var(--nt-indigo-hover) !important; border-color: var(--nt-indigo-hover) !important;
}
.btn-info:focus, .btn-info.focus { box-shadow: 0 0 0 2px rgba(99,102,241,0.5) !important; }
.btn-outline-primary { color: var(--nt-indigo-light); border-color: var(--nt-indigo); }
.btn-outline-primary:hover { background-color: var(--nt-indigo); border-color: var(--nt-indigo); color: #fff; }

/* Accent utilities that used the old cyan */
.text-primary { color: var(--nt-indigo-light) !important; }
.bg-primary { background-color: var(--nt-indigo) !important; }
.badge-primary { background-color: var(--nt-indigo); }

/* ============ Components ============ */
/* select2 (rendered on body, so not scoped) — dark field, indigo tags */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--nt-surface-2) !important;
  border: 1px solid var(--nt-dark-border) !important;
  border-radius: 6px !important;
}
.select2-container--default .select2-selection__rendered { color: var(--nt-on-dark); }
.select2-container--default .select2-selection__placeholder { color: var(--nt-on-dark-muted); }
.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: var(--nt-indigo) !important;
  border-color: var(--nt-indigo) !important;
  color: #fff !important;
  border-radius: 4px !important;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove { color: rgba(255,255,255,0.85) !important; }
.select2-dropdown { background-color: var(--nt-surface) !important; border: 1px solid var(--nt-dark-border) !important; color: var(--nt-on-dark); }
/* search box inside the dropdown — wrapper had a white #fbfbfb bg, field was white */
.select2-search--dropdown,
.select2-container--default .select2-search--dropdown {
  background-color: var(--nt-surface) !important;
}
.select2-search__field, .select2-search--dropdown .select2-search__field {
  background-color: var(--nt-surface-2) !important;
  border: 1px solid var(--nt-dark-border) !important;
  color: var(--nt-on-dark) !important;
  border-radius: 6px !important;
}
/* option + group label readability (old theme used dark #323b44 text) */
.select2-results__option { color: var(--nt-on-dark) !important; }
.select2-results__group { color: #C3CAD4 !important; font-weight: 700; }
.select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--nt-surface-2) !important; color: var(--nt-on-dark) !important; }
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--nt-indigo) !important; color: #ffffff !important; }

/* DataTables controls */
.content-page .dataTables_filter input, .content-page .dataTables_length select {
  background-color: var(--nt-surface-2) !important;
  border: 1px solid var(--nt-dark-border) !important;
  border-radius: 6px !important;
  color: var(--nt-on-dark) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--nt-indigo) !important; border-color: var(--nt-indigo) !important; color: #fff !important;
}
.content-page .page-item.active .page-link { background-color: var(--nt-indigo); border-color: var(--nt-indigo); }
.content-page .page-link { color: var(--nt-indigo-light); background-color: var(--nt-surface); border-color: var(--nt-dark-border); }

/* Modals — dark surface to match content */
.modal-content { background-color: var(--nt-surface); color: var(--nt-on-dark); border-radius: 8px; border: 1px solid var(--nt-dark-border); }
.modal-header, .modal-footer { border-color: var(--nt-dark-border); }
.modal-content .close { color: var(--nt-on-dark); text-shadow: none; opacity: 0.7; }

/* Dropdown menus — matched to the sidebar slate */
.dropdown-menu { background-color: var(--nt-sidebar-slate); color: var(--nt-on-dark); border: 1px solid var(--nt-dark-border); }
.dropdown-menu .dropdown-item, .dropdown-menu .noti-title h5 { color: var(--nt-on-dark); }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background-color: var(--nt-sidebar-slate-hover); color: #ffffff; }

/* ============ Footer — match dark content ============ */
.footer, .footer-full {
  background-color: var(--nt-content-bg) !important;
  color: var(--nt-on-dark-muted);
  border-top: 1px solid var(--nt-dark-border);
}
.footer a { color: var(--nt-indigo-light); }

/* ============ Auth pages (.wrapper-page) — dark card on dark body ============ */
/* body is Deep Space (set above); the login card is a dark surface too. */
.wrapper-page {
  background-color: var(--nt-surface);
  border: 1px solid var(--nt-dark-border);
  border-radius: 8px;
  padding: 28px 28px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.wrapper-page .logo-lg, .wrapper-page .logo-lg span { color: var(--nt-on-dark) !important; }
.wrapper-page .form-control {
  background-color: var(--nt-surface-2); border: 1px solid var(--nt-dark-border); color: var(--nt-on-dark); border-radius: 6px;
}
.wrapper-page .form-control:focus { background-color: var(--nt-surface-2); border-color: var(--nt-indigo); box-shadow: 0 0 0 2px rgba(99,102,241,0.35); color: var(--nt-on-dark); }
.wrapper-page .form-control::placeholder { color: var(--nt-on-dark-muted); opacity: 1; }
.wrapper-page .input-group-text { background-color: var(--nt-surface-2); border-color: var(--nt-dark-border); color: var(--nt-on-dark-muted); }
.wrapper-page a { color: var(--nt-indigo-light); }