/* ============================================================
   NRTC Brand System
   All brand colors flow through these custom properties.
   Light mode is the default; body.dark-mode overrides them.

   Brand palette (NRTC Brand Guide v2.0, Sep 2025):
   Primary:   Obsidian #181818 | Strawberry #B21424 | Aqua #4BB9B5
   Secondary: Charcoal #333333 | Logo Red #E31F26  | Silver #E5E5E5
              Jade #A6DCE0    | Mint #52B48A      | Sky #87C1C9
              Breeze #006666
   Logo:      Obsidian #181818 + Logo Red #E31F26 (Pantone 185C)
   Font:      Poppins (primary), Century Gothic (MS Office only)

   Interactive accent uses Logo Red (#E31F26) rather than Strawberry
   (#B21424) to maintain visual cohesion with the NRTC logo mark.
   ============================================================ */

:root {
  --nrtc-red:          #E31F26;   /* NRTC Logo Red — interactive accent */
  --nrtc-red-hover:    #c41a20;   /* derived hover state */
  --nrtc-dark:         #181818;   /* Obsidian */
  --nrtc-charcoal:     #333333;   /* Charcoal */
  --nrtc-text:         #333333;   /* Charcoal — body text */
  --nrtc-muted:        #888888;
  --nrtc-utility-bg:   #E5E5E5;   /* Silver */
  --nrtc-nav-bg:       #ffffff;
  --nrtc-nav-border:   #e8e8e8;
  --nrtc-subnav-bg:    #fafafa;
  --nrtc-surface:      #f7f7f7;
  --nrtc-card:         #ffffff;
  --nrtc-border:       #e8e8e8;
}

body.dark-mode {
  --nrtc-text:         #e5e5e5;
  --nrtc-muted:        #8a8a8a;
  --nrtc-utility-bg:   #111111;
  --nrtc-nav-bg:       #191919;
  --nrtc-nav-border:   #2a2a2a;
  --nrtc-subnav-bg:    #1e1e1e;
  --nrtc-surface:      #121212;
  --nrtc-card:         #1e1e1e;
  --nrtc-border:       #2a2a2a;
}

/* ============================================================
   Global font
   ============================================================ */
body, .navbar, .sidebar, h1, h2, h3, h4, h5, h6,
label, .btn, input, select, textarea, .nav-link {
  font-family: 'Poppins', sans-serif !important;
}

/* ============================================================
   Bootstrap 4 primary color override
   Fixes all 55 btn-primary / text-primary / badge-primary
   occurrences across templates without touching any template.
   ============================================================ */
.btn-primary                       { background-color: var(--nrtc-red) !important; border-color: var(--nrtc-red) !important; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active                { background-color: var(--nrtc-red-hover) !important; border-color: var(--nrtc-red-hover) !important; }
.btn-outline-primary               { color: var(--nrtc-red) !important; border-color: var(--nrtc-red) !important; }
.btn-outline-primary:hover         { background-color: var(--nrtc-red) !important; color: #fff !important; }
.text-primary                      { color: var(--nrtc-red) !important; }
.bg-primary                        { background-color: var(--nrtc-red) !important; }
.badge-primary                     { background-color: var(--nrtc-red) !important; }
.border-primary                    { border-color: var(--nrtc-red) !important; }
a                                  { color: var(--nrtc-red); }
a:hover                            { color: var(--nrtc-red-hover); }
/* Exception: nav links that have their own color set should not be overridden */
.nrtc-navbar a, .nrtc-utility a    { color: inherit; }

/* AdminLTE yellow — no role in NRTC brand, map to red */
.text-yellow                       { color: var(--nrtc-red) !important; }

/* AdminLTE card-outline card-primary — override blue top border */
.card-outline.card-primary         { border-top-color: var(--nrtc-red) !important; }

/* ============================================================
   iCheck replacement — native checkbox/radio with brand accent
   Remove iCheck JS calls; CSS accent-color handles styling.
   ============================================================ */
input[type="checkbox"],
input[type="radio"]                { accent-color: var(--nrtc-red); width: 16px; height: 16px; cursor: pointer; }

/* ============================================================
   Form control focus ring — red instead of Bootstrap blue
   ============================================================ */
.form-control:focus {
  border-color: var(--nrtc-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(227, 31, 38, 0.25) !important;
}

/* ============================================================
   .content-header reset
   10 templates use this AdminLTE structural div.
   With no sidebar the banded secondary header is unwanted.
   ============================================================ */
.content-header {
  background: transparent !important;
  padding: 0 0 12px 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.content-header .breadcrumb {
  background: transparent !important;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: var(--nrtc-muted);
  padding: 0;
  margin: 0;
}

/* ============================================================
   Scroll margin for sticky nav
   Prevents anchor-linked section headings from hiding
   under the ~129px sticky chrome stack.
   ============================================================ */
:target { scroll-margin-top: 145px; }

/* ============================================================
   Badges and status indicators
   ============================================================ */
.badge-primary, .badge-info { background-color: var(--nrtc-red) !important; }
.badge-secondary              { background-color: #555 !important; }

/* ============================================================
   Flash messages / alerts
   Only override .alert-info blue; leave semantic colors alone.
   ============================================================ */
.alert-info {
  background-color: rgba(227, 31, 38, 0.08);
  border-color: var(--nrtc-red);
  color: var(--nrtc-charcoal);
}

/* ============================================================
   Bootstrap modals
   ============================================================ */
.modal-header {
  background-color: var(--nrtc-dark);
  color: #ffffff;
  border-bottom: 3px solid var(--nrtc-red);
  border-radius: calc(0.3rem - 1px) calc(0.3rem - 1px) 0 0;
}
.modal-header .close            { color: #ffffff; opacity: 0.7; }
.modal-header .close:hover      { opacity: 1; }
.modal-title                    { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; }
body.dark-mode .modal-content   { background-color: var(--nrtc-card); border-color: var(--nrtc-border); }
body.dark-mode .modal-body,
body.dark-mode .modal-footer    { background-color: var(--nrtc-card); color: var(--nrtc-text); border-color: var(--nrtc-border); }

/* ============================================================
   Loading overlays and spinners (4 templates)
   ============================================================ */
.overlay > .fa-spin,
.overlay > .spinner-border       { color: var(--nrtc-red) !important; }
.overlay                         { background: rgba(255,255,255,0.7); }
body.dark-mode .overlay          { background: rgba(0,0,0,0.6); }

/* ============================================================
   Select2 — light mode already in this file; dark mode additions
   ============================================================ */
body.dark-mode .select2-container--default .select2-selection--single {
  background-color: #1e1e1e;
  border-color: var(--nrtc-border);
  color: var(--nrtc-text);
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--nrtc-text);
}
body.dark-mode .select2-dropdown {
  background-color: #1e1e1e;
  border-color: var(--nrtc-border);
}
body.dark-mode .select2-container--default .select2-results__option {
  color: var(--nrtc-text);
  background-color: #1e1e1e;
}
body.dark-mode .select2-container--default .select2-results__option--highlighted {
  background-color: var(--nrtc-red);
  color: #fff;
}

/* ============================================================
   DataTables — override blue header and pagination
   ============================================================ */
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--nrtc-dark) !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}
table.dataTable tbody tr:hover  { background-color: rgba(227, 31, 38, 0.04) !important; }
body.dark-mode table.dataTable tbody tr { background-color: var(--nrtc-card); color: var(--nrtc-text); }
body.dark-mode table.dataTable tbody tr:hover { background-color: rgba(227, 31, 38, 0.08) !important; }
body.dark-mode table.dataTable thead th { background-color: #0a0a0a !important; }

/* ============================================================
   AdminLTE layout migration — remove sidebar offsets
   ============================================================ */
.content-wrapper {
  margin-left: 0 !important;
  padding: 20px 24px !important;
  background: var(--nrtc-surface) !important;
  min-height: calc(100vh - 129px);
  transition: background-color 0.2s;
}
.wrapper {
  display: block !important;
  height: auto !important;
  min-height: 100vh;
}
/* Remove AdminLTE's main-header top offset */
.main-header { display: none !important; }

/* ============================================================
   NRTC Top Nav Chrome
   ============================================================ */

/* Utility bar */
.nrtc-utility {
  background: var(--nrtc-utility-bg);
  padding: 6px 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--nrtc-charcoal);
  position: sticky;
  top: 0;
  z-index: 1025;
  transition: background-color 0.2s;
}
.nrtc-utility a { color: var(--nrtc-charcoal); text-decoration: none; }
.nrtc-utility a:hover { text-decoration: underline; }
.nrtc-utility .nrtc-signout { color: var(--nrtc-red); }
body.dark-mode .nrtc-utility a,
body.dark-mode .nrtc-utility span { color: #aaa; }
body.dark-mode .nrtc-utility .nrtc-signout { color: var(--nrtc-red); }

/* Main nav */
.nrtc-navbar {
  background: var(--nrtc-nav-bg);
  border-bottom: 1px solid var(--nrtc-nav-border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 0;
  height: 56px;
  position: sticky;
  top: 37px;
  z-index: 1025;
  transition: background-color 0.2s, border-color 0.2s;
}
.nrtc-logo {
  display: flex;
  align-items: center;
  margin-right: 28px;
  text-decoration: none !important;
  flex-shrink: 0;
}
.nrtc-logo svg { width: 64px; height: 27px; }
.nrtc-navlinks { display: flex; gap: 2px; flex: 1; align-items: center; }
.nrtc-navlink {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--nrtc-red) !important;
  text-decoration: none !important;
  text-transform: uppercase;
  padding: 8px 14px;
  letter-spacing: 0.3px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}
.nrtc-navlink:hover, .nrtc-navlink.active { border-bottom-color: var(--nrtc-red); }
.nrtc-navlink-muted {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--nrtc-charcoal) !important;
  text-decoration: none !important;
  text-transform: uppercase;
  padding: 8px 14px;
}
body.dark-mode .nrtc-navlink-muted { color: #888 !important; }

/* Theme toggle */
.nrtc-theme-toggle {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  color: #555;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  margin-left: 12px;
  transition: background 0.15s;
  white-space: nowrap;
}
body.dark-mode .nrtc-theme-toggle { background: rgba(255,255,255,0.08); border-color: #333; color: #aaa; }
.nrtc-theme-toggle:hover { background: #e0e0e0; }
body.dark-mode .nrtc-theme-toggle:hover { background: rgba(255,255,255,0.12); }

/* Sub-nav */
.nrtc-subnav {
  background: var(--nrtc-subnav-bg);
  border-bottom: 1px solid var(--nrtc-border);
  padding: 0 24px;
  display: flex;
  gap: 0;
  position: sticky;
  top: 93px;   /* 37px utility + 56px nav */
  z-index: 1020;
  transition: background-color 0.2s;
}
.nrtc-subtab {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--nrtc-muted);
  text-decoration: none !important;
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  display: inline-block;
  transition: color 0.15s, border-color 0.15s;
}
.nrtc-subtab:hover { color: var(--nrtc-text); }
.nrtc-subtab.active { color: var(--nrtc-red) !important; border-bottom-color: var(--nrtc-red); font-weight: 500; }

/* Logo dark-mode letterform flip */
body.dark-mode .nrtc-logo .cls-2 { fill: #ffffff; }

/* Dark mode body/page background */
body.dark-mode { background-color: var(--nrtc-surface) !important; }
body.dark-mode .content-wrapper { color: var(--nrtc-text); }

/* Transition on theme switch */
body, .content-wrapper, .nrtc-utility, .nrtc-navbar, .nrtc-subnav,
.card, .modal-content, input, select, textarea {
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Card dark mode */
body.dark-mode .card { background-color: var(--nrtc-card); border-color: var(--nrtc-border); color: var(--nrtc-text); }
body.dark-mode .card-header { background-color: rgba(0,0,0,0.2); border-color: var(--nrtc-border); }

/* Form inputs dark mode */
body.dark-mode .form-control {
  background-color: #1e1e1e;
  border-color: var(--nrtc-border);
  color: var(--nrtc-text);
}
body.dark-mode .form-control::placeholder { color: #555; }

/* Mobile hamburger */
.nrtc-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex-direction: column;
  gap: 5px;
}
.nrtc-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nrtc-red);
  border-radius: 2px;
  transition: transform 0.2s;
}
.nrtc-nav-drawer {
  display: none;
  position: fixed;
  top: 93px;
  left: 0;
  right: 0;
  background: var(--nrtc-nav-bg);
  border-bottom: 1px solid var(--nrtc-border);
  z-index: 1035;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.nrtc-nav-drawer a {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 12px 24px;
  border-bottom: 1px solid var(--nrtc-border);
  text-decoration: none !important;
}
.nrtc-nav-drawer .nrtc-drawer-primary { color: var(--nrtc-red) !important; }
.nrtc-nav-drawer .nrtc-drawer-muted   { color: var(--nrtc-muted) !important; }
.nrtc-subnav-mobile { overflow-x: auto; white-space: nowrap; }

@media (max-width: 768px) {
  .nrtc-hamburger    { display: flex; }
  .nrtc-navlinks,
  .nrtc-navlink,
  .nrtc-navlink-muted,
  .nrtc-theme-toggle { display: none !important; }
  .nrtc-subnav       { top: 93px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nrtc-subtab       { white-space: nowrap; }
  .content-wrapper   { padding: 14px 16px !important; }
}

/* Dashboard max-width for stat widgets */
.dashboard-content { max-width: 1400px; }

/* ============================================================
   Existing rules below — Select2 light mode, diff classes,
   JSON styling, table helpers, etc.
   ============================================================ */

.length-break {
    word-break: break-all !important;
    width: 70% !important;
}

table td {
    font-family:'Roboto Mono' !important;
}

/*Fit default macbook screen*/
.small-box .icon {
    font-size: 70px !important;
}

.btn {
    padding: 5px 4px !important;
}

/* Pretty JSON */
.json-pre {
   background-color: ghostwhite;
   border: 1px solid silver;
   padding: 10px 20px;
   margin: 20px;
}
.json-key {
   color: brown;
}
.json-value {
   color: navy;
}
.json-string {
   color: olive;
}

.user-footer {
    background-color: #222d32 !important;
}

.ms-container {
    background-size: 20px 20px;
    background-position: center;
}

.search-input {
    width: 100%;
}

.sidebar .image { padding-top: 0.7em; }
.sidebar .info { color: #fff; }
.sidebar .info p { margin: 0; }
.sidebar .info a { font-size: 0.8em; }

/* Global Styles */
table.records thead th, table.records tbody td { text-align: center; vertical-align: middle; }
table.records thead th:last-of-type { width: 50px; }
div.records > div.dataTables_wrapper > div.row:first-of-type { margin: 0 0.5em 0 0.5em; }
div.records > div.dataTables_wrapper > div.row:last-of-type { margin: 0.4em 0.5em 0.4em 0.5em; }
div.records > div.dataTables_wrapper table.dataTable { margin: 0 !important; }

.diff {
    font-family: monospace;
    padding: 0 0.2em;
}
.diff::before {
    content: "\00a0";
    padding-right: 0.1em;
}

.diff-deletion {
    background-color: lightcoral;
}
.diff-deletion::before {
    content: "-";
}

.diff-addition {
    background-color: lightgreen;
}
.diff-addition::before {
    content: "+";
}

/* Select2 — Bootstrap 4 sizing/border match */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + .75rem + 2px);
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .75rem + 2px);
    padding-left: .75rem;
    color: #495057;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + .75rem + 2px);
    right: .5rem;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--nrtc-red);
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(227, 31, 38, 0.25);
}