/* ===== BKM Bootstrap 5 base ===== */
:root{
  --bkm-brand:#bf1e2d;           /* 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 */
} 
.bkm-red-bubble{ background: var(--bkm-brand) }
.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 */

/* ===== Members: single-open edit accordion (Task 2b structural rebuild) ===== */
/* Scoped to .member-edit so nothing leaks to other pages. Replaces the style
   blocks that were copy-pasted inline across the old add/edit + tabs/*.php. */
.member-edit .accordion-button { font-weight: 600; }
.member-edit .accordion-button:not(.collapsed) { color: #fff; background: var(--bkm-brand); box-shadow: none; }
.member-edit .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
.member-edit .accordion-button:focus { border-color: var(--bkm-brand); box-shadow: 0 0 0 .15rem rgba(191,30,45,.25); }
.member-edit table.tbl-dark-head thead th { background: #272727; color: #fff; }
.member-edit .strikethru { text-decoration: line-through; opacity: .6; }
.member-edit .id-avatar {
    width: 3rem; height: 3rem; border-radius: 50%; background: var(--bkm-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto;
    letter-spacing: .02em;
}
.member-edit .comms-bubble-in  { background: #e9ecef; border-radius: 12px 12px 12px 2px; max-width: 75%; word-break: break-word; }
.member-edit .comms-bubble-out { background: #0d6efd; color: #fff; border-radius: 12px 12px 2px 12px; max-width: 75%; word-break: break-word; }
.member-edit .comms-bubble-out .text-muted { color: rgba(255,255,255,.7) !important; }
.member-edit .comms-bubble-group { background: #0edc7d; color: #fff; border-radius: 12px 12px 2px 12px; max-width: 75%; word-break: break-word; }
.member-edit .comms-bubble-group .text-muted { color: rgba(255,255,255,.7) !important; }
.member-edit .comms-bubble-group .comms-group-tag { color: #d1f2e0; }
.member-edit .comms-reply-box { border-top: 1px solid #dee2e6; background: #f8f9fa; }

/* ===== Members edit: opt-in mobile table stacking (Task 2c) ===== */
/* Opt-in per table via .table-stack-mobile - NOT a blanket rule on .table-responsive.
   Below 767.98px (Bootstrap sm/md boundary, covers phones in both orientations) each
   row collapses into a bordered card and every cell shows its data-label. Above the
   breakpoint this block is inert, so the desktop/tablet table is completely unchanged.
   Colors reuse the tokens already in this file (#dee2e6 borders like .comms-reply-box,
   #f1f3f5 row rules like .table.curriculum, #6c757d muted like .badge-inactive);
   labels use font-weight 600 to match this page's .form-label.fw-semibold fields. */
@media (max-width: 767.98px){
    .table-stack-mobile thead{
        /* keep in the DOM for screen readers, hide visually (Bootstrap .visually-hidden) */
        position: absolute !important;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .table-stack-mobile,
    .table-stack-mobile tbody,
    .table-stack-mobile tr,
    .table-stack-mobile td{
        display: block;
        width: 100%;
    }
    .table-stack-mobile tr{
        border: 1px solid #dee2e6;
        border-radius: .375rem;
        padding: .5rem .75rem;
        margin-bottom: .75rem;
        background: #fff;
    }
    .table-stack-mobile tr:last-child{ margin-bottom: 0; }
    .table-stack-mobile td{
        padding: .35rem 0;
        border: 0;
        border-bottom: 1px solid #f1f3f5;
        text-align: left !important;
        white-space: normal;
        background-color: transparent !important; /* neutralise table-striped / table-hover */
        box-shadow: none !important;
    }
    .table-stack-mobile td:last-child{ border-bottom: 0; }
    .table-stack-mobile td::before{
        content: attr(data-label);
        display: block;
        font-weight: 600;
        margin-bottom: .15rem;
    }
    /* no label on cells that carry none (e.g. Contracts empty-state colspan row) */
    .table-stack-mobile td:not([data-label])::before{ display: none; }
    /* action-button and pure-checkbox columns: quieter, smaller label */
    .table-stack-mobile td.tsm-quiet::before{
        font-weight: 400;
        font-size: .8125rem;
        color: #6c757d;
    }
    /* left-align controls that were centre-aligned for the desktop grid
       (e.g. Linked Accounts' SMS Notify switch) so they sit under their label */
    .table-stack-mobile td .justify-content-center{ justify-content: flex-start !important; }
}