/* ===== BKM Bootstrap 5 base ===== */
:root{
/* --bkm-brand:#bf1e2d;           primary red */
--bkm-brand:#ff0000;           /* primary red */
--bkm-navbar-h:64px;
}

/* Fix body offset for fixed-top navbar */
body {
    font-family: 'Quicksand', 'Quattrocento Sans', 'Work Sans', 'Julius Sans One', sans-serif;
    padding-top: var(--bkm-navbar-h);
}
/* Footer headings and links */
footer, footer a { font-family: 'Goldman', sans-serif; }
/* optional: ensure footer doesn’t shrink */
footer { flex: 0 0 auto; }

/* Page headers (h1–h3) */
h1, h2, h3 { font-family: 'Goldman', sans-serif; }

/* Navbar brand + nav links */
.navbar-brand, .navbar-nav .nav-link { font-family: 'Goldman', sans-serif; }

/* Default brand image sizing */
.bkm-brand-img { height: 40px; width: auto; }

/* On mobile/tablet, use a taller square logo so it reads better */
@media (max-width: 575.98px){
    footer .row, footer .col, footer .col-lg-8, footer .col-lg-4 { text-align: center !important; }
    /* Space out social icons and phone a bit */
    footer .d-flex { justify-content: center !important; }
    footer .d-flex.gap-3 a { margin: 0 .5rem; }

    .bkm-brand-img { height: 62px; } /* try 52–56 if you want even bigger */    
    .navbar { padding-top: .01rem; padding-bottom: .01rem; }
}

/* Layout guardrails so brand doesn't push the toggler off-line */
.navbar-brand { flex: 0 0 auto; }
.navbar-toggler { flex: 0 0 auto; }

/* Brand color override */
.btn-primary{ background:var(--bkm-brand); border-color:var(--bkm-brand); }
.btn-primary:hover{ filter:brightness(.92); }

/* Login visuals */
.bkm-logo {
  max-width: 100%;   /* never overflow card */
  height: auto;      /* preserve aspect ratio */
  width: 98%;        /* default width relative to card */
}

.bkm-panel{ background:#f6f6f6; border:1px solid #e6e6e6; border-radius:4px }

/* Login form tweaks */
.bkm-panel form { border:none; border-radius:4px; }

/* Password toggle button */
.my-toggle {
    background:transparent; border:0; border-radius:.25em; color:#888; cursor:pointer; font-size:.75em; font-weight:bold; line-height: 1; margin-right:.5em; padding:.5em; text-transform:uppercase;
    -moz-appearance:none;
    -webkit-appearance:none;
}

/* Hero box */
.page-hero{background:#f8f9fa;border:1px solid #e9ecef;border-radius:.75rem;padding:1.25rem 1rem;margin-bottom:1rem}

/* General Page Formatting */
.content-block{ font-family:'Quicksand';margin:5px auto;text-align:justify;width:98% }
.content-block h2, .content-block h3, .content-block h4{ font-family:'Work Sans';letter-spacing:1px }
.content-block h2{font-size:24px;text-align:center;text-decoration:underline}
.content-block h3{ color:#185674 }
.content-block h4{ font-size:16px;font-weight:800;line-height:180%;text-align:center }
.content-block p, .content-block ul, .content-block blockquote{ font-size:16px;margin:20px auto;width:90% }
.content-block > p > a{font-weight:bold}
.content-block > ul, .content-block > ul > li > ul{margin:5px}
.content-block > ul > li{ margin:0;padding:5px 10px;text-align:left }
.content-block > ul > li > ul > li{ margin:0;padding:5px 10px;text-align:left }

/* Program Switcher Pills */
.program-switch .nav-pills .nav-link {
    border-radius: 50rem;            /* pill shape */
    margin-right: .5rem;
    padding: .35rem 1rem;
    font-weight: 500;
    color: #185674;
    background-color: #f8f9fa;       /* light background */
    border: 1px solid #dee2e6;       /* subtle border */
    transition: all .15s ease-in-out;
}
.program-switch .nav-pills .nav-link:hover {
    background-color: #e9ecef;
    color: #000;
}
.program-switch .nav-pills .nav-link.active {
    color: #fff;
    background-color: #185674;       /* your brand blue */
    border-color: #185674;
}

/* Custom Belt Rank Colors */
:root {
    --color-white: #fff;
    --color-yellow: #ffea00;
    --color-orange: #ff9800;
    --color-green: #4caf50;
    --color-blue: #2196f3;
    --color-brown: #795548;
    --color-red: #ff0000;    
    --color-black: #000;
}
.beltDot{ border-radius:50%;display:block;height:20px;width:20px }
.round-bubble {
    display: inline-flex;         /* Allows content-based sizing */
    align-items: center;         /* Vertically center content */
    justify-content: center;     /* Horizontally center content */
    min-width: 20px;
    min-height: 20px;
    margin-right:4px;
    padding: 6px;              /* Optional horizontal padding */
    border-radius: 999px;        /* Makes it round (pill shape if text is long) */
    font-size: 12px;             /* Optional: size text to fit nicely */
} 
.level0{ background: var(--color-white) }
.level1{ background: var(--color-yellow) }
.level2{ background: var(--color-orange) }
.level3{ background: var(--color-green) }
.level3a{ background-color: var(--color-green); border:solid 1px var(--color-blue) }
.level4{ background: var(--color-blue) }
.level4a{ background: var(--color-blue); border:solid 1px var(--color-brown) }
.level5{ background: var(--color-brown) }
.level5a{ background: var(--color-brown); border:solid 1px var(--color-red) }
.level5b{ background: var(--color-red) }
.level5c{ background: var(--color-red); border:solid 1px var(--color-black) }
.level5d{ background: var(--color-black); border:solid 1px var(--color-red) }
.level6{ background: var(--color-black) }

.level0-font{ color: var(--color-white) }
.level1-font{ color: var(--color-yellow) }
.level2-font{ color: var(--color-orange) }
.level3-font{ color: var(--color-green) }
.level3a-font{ color: var(--color-blue) }
.level4-font{ color: var(--color-blue) }
.level5-font{ color: var(--color-brown) }
.level5b-font{ color: var(--color-red) }
.level6-font{ color: var(--color-black) }

.level0-font-contrast, .level1-font-contrast, .level2-font-contrast, .level3-font-contrast, .level5b-font-contrast{ color: var(--color-black) !important; }
.level4-font-contrast, .level5-font-contrast, .level6-font-contrast{ color: var(--color-white)  !important;}

.level3a-font-contrast{color: var(--color-blue) }
.level4a-font-contrast{color: var(--color-brown) }
.level5a-font-contrast{color: var(--color-red) }
.level5c-font-contrast{color: var(--color-black) }
.level5d-font-contrast{color: var(--color-red) }

/* Curriculum Admin */
/* Layout + rhythm */
.table.curriculum { margin: 0; }
.table.curriculum tbody tr + tr { border-top: 1px solid #f1f3f5; }
.table.curriculum td, .table.curriculum th { vertical-align: middle; }

/* Curriculum Admin — column sizing */
.table.curriculum { table-layout: fixed; } /* make <col> widths authoritative */

/* Set concrete widths for cols 1, 2 and 5 */
.table.curriculum col.w-badges  { width: 230px !important; }
.table.curriculum col.w-tech    { width: 460px !important; }
.table.curriculum col.w-actions { width: 120px !important; }

/* Remove any legacy widths on header/cell classes so <colgroup> wins */
.col-badges, .col-tech, .col-actions { width: auto !important; }

/* Keep badges from wrapping weirdly */
.col-badges { white-space: nowrap; }
.badge-stack { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Optional: allow desc/comments to wrap nicely */
.col-desc, .col-cmts { overflow-wrap: anywhere; }

/* Group header row */
.curr-group-head {
  background: #eef5ff; /* subtle tint */
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .02em;
  border-top: 1px solid #dee2e6;
}
.curr-group-head th { padding-top: .6rem; padding-bottom: .6rem; }

/* Columns */
.col-badges { width: 1%; white-space: nowrap; padding-right: .25rem; }
.col-tech   { min-width: 240px; }
.col-desc   { width: 40%; }
.col-cmts   { width: 35%; }
.col-actions{ width: 120px; }

/* Badge stack */
.badge-stack {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  max-width: 180px;
}

/* Tighter bubble sizing without changing your colors */
.round-bubble { min-width: 20px; min-height: 20px; padding: 0 6px; line-height: 20px; font-weight: 600; }

/* Inactive tag */
.badge-inactive { background: #6c757d; }

/* Hover affordance */
.table.curriculum tbody tr:hover { background: #fafbfc; }

/* Optional: clamp long text on tighter screens */
@media (max-width: 1200px){
  .col-desc, .col-cmts { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* Colors and Badges for Expiring Contracts */
.text-bold-red{color:#dc3545;font-weight:700}
.text-dark-orange{color:#fd7e14}
.row-expired{background:rgba(220,53,69,.05)}

.table td.text-bold-red { color:#dc3545 !important; font-weight:700; } /* dark red for ≤10d */
.table td.text-dark-orange { color:#f78614 !important; font-weight:700; } /* dark orange for ≤30d */

/* works for Bootstrap 4/5 */
.table tr.row-expired > * { background-color: #ffeaea !important; }
.table-hover tr.row-expired:hover > * { background-color: #ffdede !important; } /* optional */

/* --- Expiration Badges --- */
.acct-row .badge-expired { background-color: #f8d7da; color: #842029; font-weight: 600 } /* soft red background; dark red text */
.acct-row .badge-expiring-10 { background-color: #fff3cd; color: #664d03; font-weight: 600 } /* yellow background; brownish text */
.acct-row .badge-expiring-30 { background-color: #ffe5b4; color: #7a3e00; font-weight: 600 } /* light orange background; darker orange text */
.acct-row .badge-active { background-color: #d1e7dd; color: #0f5132; font-weight: 600 } /* green background; dark green text */