/* ============================================================
   WWSU 106.9 FM — AdminLTE / Bootstrap 4 Override
   --------------------------------------------------------------
   Drop-in stylesheet that re-themes the existing wwsu-master
   front-end to the WWSU brand system (Futura + Souvenir, green
   #019645 + ink #101820 + gold #CEA052) without touching the
   server templates.

   LOAD ORDER (in every layout.ejs / wwsu-master persona):
     1. AdminLTE / Bootstrap / DataTables (existing)
     2. plugin CSS (AmplitudeJS, Pace, iziToast, etc.)
     3. colors_and_type.css        ← tokens + webfonts
     4. wwsu-adminlte-override.css ← THIS FILE
     5. theme.css (if used) and any page-specific styles

   Anything not overridden falls back to AdminLTE — by design.
   We only restyle what carries identity weight.
   ============================================================ */


/* ------------------------------------------------------------
   0. TOKEN BRIDGE — alias the codebase-friendly names this file
   uses (e.g. --paper, --ink, --wwsu-green-700, --bg-soft) onto
   the canonical tokens defined in colors_and_type.css. Keeping
   this in one place means colors_and_type.css stays the source
   of truth and we never duplicate hex values.
   ------------------------------------------------------------ */
:root {
  /* Surfaces */
  --paper:             var(--wwsu-paper);
  --bg-soft:           var(--wwsu-cream-2);
  --rule-strong:       #BFC3C9;

  /* Ink scale */
  --ink:               var(--wwsu-ink);
  --ink-900:           #0A0F15;
  --ink-700:           var(--wwsu-navy-2);
  --ink-300:           #6B7280;
  --ink-200:           #9CA2AC;
  --ink-100:           #C9CCD0;
  --ink-50:            #E8EAEC;

  /* Green scale */
  --wwsu-green-900:    #013E1D;
  --wwsu-green-700:    var(--wwsu-green-deep);
  --wwsu-green-600:    #017A39;
  --wwsu-green-400:    var(--wwsu-green-glow);

  /* Gold scale */
  --wwsu-gold:         var(--wsu-gold);
  --wwsu-gold-700:     var(--wsu-gold-deep);

  /* Shadows */
  --shadow-1:          0 1px 2px rgba(16, 24, 32, 0.06), 0 1px 0 rgba(16, 24, 32, 0.04);
  --shadow-3:          0 12px 32px -16px rgba(16, 24, 32, 0.35);
}


/* ------------------------------------------------------------
   1. GLOBAL TYPE — Futura body / Souvenir editorial.
   --------------------------------------------------------------
   `!important` on the type families remains intentional: third-
   party plugin CSS (Bootstrap, FullCalendar, iziToast, Select2,
   Alpaca, DataTables) ships its own font-family rules that
   would otherwise leak into the rendered UI. We pin the brand
   typeface globally as a single deliberate override.
   ------------------------------------------------------------ */
html,
body,
.wrapper,
.modal,
.swal2-popup,
.iziToast,
.iziModal {
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--fg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display) !important;
  font-weight: 800;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  color: var(--fg);
}

/* Souvenir is reserved for editorial moments — opt-in via class.
   Use on hero subheads, pull-quotes, show-name tags. */
.wwsu-souvenir,
.wwsu-souvenir-italic,
blockquote.wwsu-pull,
.callout-quote {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-weight: 600;
  letter-spacing: var(--track-souvenir);
  text-transform: none;
}

/* Default link treatment — green underline, no Bootstrap blue. */
a, a:link {
  color: var(--wwsu-green-600);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--wwsu-green-600) 35%, transparent);
  transition: color .12s ease, border-color .12s ease;
}
a:hover, a:focus {
  color: var(--wwsu-green-700);
  border-bottom-color: var(--wwsu-green-700);
}
.btn a, .nav-link, .brand-link, .nav a, .breadcrumb a {
  border-bottom: 0;
}

/* ------------------------------------------------------------
   2-4. Reserved for retired AdminLTE shell selectors.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   5. CARDS — flat fill, ink rule, green underline
   ------------------------------------------------------------ */
.card {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-2) !important;
  box-shadow: var(--shadow-1) !important;
  position: relative;
}
.card::after {
  /* the 1px green underline that signs every card */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--wwsu-green);
  border-bottom-left-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: 14px 18px;
}
.card-header .card-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  font-size: var(--fs-14);
  color: var(--fg);
  margin: 0;
}
.card-body { padding: 18px; }
.card-footer {
  background: var(--bg-soft) !important;
  border-top: 1px solid var(--rule) !important;
  font-size: var(--fs-13);
  color: var(--fg-muted);
}

/* AdminLTE card variants (.card-success, .card-primary, etc) — repaint */
.card-primary:not(.card-outline)   > .card-header,
.card-success:not(.card-outline)   > .card-header { background: var(--wwsu-green) !important; color: var(--paper) !important; }
.card-warning:not(.card-outline)   > .card-header { background: var(--wwsu-gold) !important; color: var(--ink) !important; }
.card-danger:not(.card-outline)    > .card-header { background: var(--signal-red) !important; color: var(--paper) !important; }
.card-info:not(.card-outline)      > .card-header { background: var(--ink) !important; color: var(--paper) !important; }
.card-secondary:not(.card-outline) > .card-header { background: var(--ink-700) !important; color: var(--paper) !important; }

.card-primary:not(.card-outline) > .card-header .card-title,
.card-success:not(.card-outline) > .card-header .card-title,
.card-info:not(.card-outline)    > .card-header .card-title,
.card-secondary:not(.card-outline) > .card-header .card-title,
.card-danger:not(.card-outline)  > .card-header .card-title { color: var(--paper) !important; }

.card-outline.card-primary { border-top: 3px solid var(--wwsu-green) !important; }
.card-outline.card-success { border-top: 3px solid var(--wwsu-green) !important; }
.card-outline.card-warning { border-top: 3px solid var(--wwsu-gold) !important; }
.card-outline.card-danger  { border-top: 3px solid var(--signal-red) !important; }
.card-outline.card-info    { border-top: 3px solid var(--ink) !important; }


/* ------------------------------------------------------------
   6. Callouts used by chat, songs, and subscription status UI.
   ------------------------------------------------------------ */
.callout {
  background: var(--paper) !important;
  border: 1px solid var(--rule-soft);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius-2) !important;
  padding: 14px 18px;
  margin: 0 0 16px;
  box-shadow: var(--shadow-1);
  color: var(--ink);
}
.callout h4, .callout h5 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  font-size: var(--fs-13);
  margin: 0 0 4px;
  color: var(--ink);
}
.callout p { margin: 0; }
.callout p + p { margin-top: 4px; }

.callout-success { border-left-color: var(--wwsu-green) !important; }
.callout-warning { border-left-color: var(--wwsu-gold) !important; }
.callout-danger  { border-left-color: var(--signal-red) !important; }
.callout-info    { border-left-color: var(--ink) !important; }


/* ------------------------------------------------------------
   7. BUTTONS — squared, Futura caps, green-first
   ------------------------------------------------------------ */
.btn {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  font-size: var(--fs-13);
  border-radius: var(--radius-1) !important;
  padding: 9px 16px;
  border-width: 1px;
  box-shadow: none !important;
  transition: background .12s ease, color .12s ease, transform .04s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn.focus { outline: 2px solid var(--wwsu-green-400); outline-offset: 2px; box-shadow: none !important; }

.btn-primary, .btn-success {
  background: var(--wwsu-green) !important;
  border-color: var(--wwsu-green) !important;
  color: var(--paper) !important;
}
.btn-primary:hover, .btn-success:hover {
  background: var(--wwsu-green-700) !important;
  border-color: var(--wwsu-green-700) !important;
  color: var(--paper) !important;
}

.btn-warning {
  background: var(--wwsu-gold) !important;
  border-color: var(--wwsu-gold) !important;
  color: var(--ink) !important;
}
.btn-warning:hover {
  background: var(--wwsu-gold-700, #B5894A) !important;
  border-color: var(--wwsu-gold-700, #B5894A) !important;
}

.btn-danger {
  background: var(--signal-red) !important;
  border-color: var(--signal-red) !important;
  color: var(--paper) !important;
}

.btn-secondary {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}
.btn-secondary:hover {
  background: var(--ink-700) !important;
  border-color: var(--ink-700) !important;
}

.btn-outline-primary, .btn-outline-success {
  background: transparent !important;
  border: 1px solid var(--wwsu-green) !important;
  color: var(--wwsu-green-700) !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover {
  background: var(--wwsu-green) !important;
  color: var(--paper) !important;
}

/* AdminLTE color utility buttons we explicitly retire */
.btn.bg-orange, .btn.bg-purple, .btn.bg-blue, .btn.bg-pink, .btn.bg-teal {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}


/* ------------------------------------------------------------
   8. BADGES + RIBBONS
   ------------------------------------------------------------ */
.badge {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  font-size: var(--fs-11);
  border-radius: var(--radius-1) !important;
  padding: 4px 8px;
}
.badge-pill { border-radius: 999px !important; }
.badge-success, .badge-primary { background: var(--wwsu-green) !important; color: var(--paper) !important; }
.badge-warning                 { background: var(--wwsu-gold) !important;  color: var(--ink) !important; }
.badge-danger                  { background: var(--signal-red) !important; color: var(--paper) !important; }
.badge-info                    { background: var(--ink) !important;        color: var(--paper) !important; }
.badge-secondary               { background: var(--ink-200) !important;    color: var(--ink) !important; }

.ribbon-wrapper .ribbon.bg-warning,
.ribbon-wrapper .ribbon.bg-success,
.ribbon-wrapper .ribbon.bg-primary { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--track-marquee); text-transform: uppercase; }
.ribbon-wrapper .ribbon.bg-warning { background: var(--wwsu-gold) !important; color: var(--ink) !important; }
.ribbon-wrapper .ribbon.bg-success { background: var(--wwsu-green) !important; }
.ribbon-wrapper .ribbon.bg-danger  { background: var(--signal-red) !important; }


/* ------------------------------------------------------------
   9. Reserved for retired AdminLTE info-box selectors.
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   10. ALERTS, MODALS, SWAL, IZITOAST
   ------------------------------------------------------------ */
.alert {
  border-radius: var(--radius-2) !important;
  border: 1px solid transparent;
  padding: 12px 16px;
  font-size: var(--fs-14);
}
.alert-success { background: color-mix(in oklab, var(--wwsu-green) 12%, var(--paper)) !important; border-color: var(--wwsu-green) !important; color: var(--wwsu-green-900, #014C24) !important; }
.alert-warning { background: color-mix(in oklab, var(--wwsu-gold)  18%, var(--paper)) !important; border-color: var(--wwsu-gold)  !important; color: var(--ink) !important; }
.alert-danger  { background: color-mix(in oklab, var(--signal-red) 14%, var(--paper)) !important; border-color: var(--signal-red) !important; color: #6B0E13 !important; }
.alert-info    { background: var(--bg-soft) !important; border-color: var(--rule) !important; color: var(--fg) !important; }

.modal-content {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-2) !important;
  box-shadow: var(--shadow-3) !important;
}
.modal-header {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: var(--radius-2) var(--radius-2) 0 0;
}
.modal-header .modal-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  font-size: var(--fs-16);
}
.modal-header .close { color: var(--paper) !important; opacity: .8; text-shadow: none; }

/* SweetAlert2 */
.swal2-popup {
  border-radius: var(--radius-2) !important;
  font-family: var(--font-body) !important;
  border: 1px solid var(--rule);
}
.swal2-title { font-family: var(--font-display) !important; font-weight: 800; letter-spacing: var(--track-tight); text-transform: uppercase; color: var(--fg) !important; }
.swal2-styled.swal2-confirm { background: var(--wwsu-green) !important; }
.swal2-styled.swal2-cancel  { background: var(--ink-200) !important; color: var(--ink) !important; }

/* iziToast */
.iziToast {
  border-radius: var(--radius-2) !important;
  font-family: var(--font-body) !important;
  border-left: 4px solid var(--wwsu-green) !important;
}
.iziToast.iziToast-color-red    { border-left-color: var(--signal-red) !important; }
.iziToast.iziToast-color-yellow { border-left-color: var(--wwsu-gold) !important; }
.iziToast.iziToast-color-green  { border-left-color: var(--wwsu-green) !important; }
.iziToast strong { font-family: var(--font-display); letter-spacing: var(--track-marquee); text-transform: uppercase; }


/* ------------------------------------------------------------
   11. FORMS
   ------------------------------------------------------------ */
.form-control,
.custom-select {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--fg);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-1);
  padding: 8px 12px;
  box-shadow: none;
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--wwsu-green) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wwsu-green) 25%, transparent) !important;
}

label, .col-form-label {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  font-size: var(--fs-12);
  color: var(--fg-muted);
}

.input-group-text {
  background: var(--bg-soft);
  border: 1px solid var(--rule-strong);
  font-family: var(--font-display);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--wwsu-green) !important;
  border-color: var(--wwsu-green) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--wwsu-green) !important;
}


/* ------------------------------------------------------------
   12. TABLES + DATATABLES
   ------------------------------------------------------------ */
.table {
  font-size: var(--fs-14);
  color: var(--fg);
}
.table thead th {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  font-size: var(--fs-12);
  background: var(--bg-soft);
  border-bottom: 2px solid var(--ink) !important;
  color: var(--fg);
}
.table tbody tr { border-bottom: 1px solid var(--rule); }
.table-hover tbody tr:hover { background: color-mix(in oklab, var(--wwsu-green) 6%, transparent) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--bg-soft); }

/* DataTables wrapper bits */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--rule-strong) !important;
  border-radius: var(--radius-1) !important;
  padding: 4px 10px !important;
  font-family: var(--font-body) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  font-size: var(--fs-12);
  border-radius: var(--radius-1) !important;
  padding: 4px 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--wwsu-green) !important;
  border-color: var(--wwsu-green) !important;
  color: var(--paper) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-soft) !important;
  border-color: var(--rule-strong) !important;
  color: var(--fg) !important;
}
.dataTables_wrapper .dt-buttons .btn { /* Copy/CSV/PDF buttons */
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
}


/* ------------------------------------------------------------
   13. NAV PILLS / NAV TABS (sub-page tabs)
   ------------------------------------------------------------ */
.nav-tabs {
  border-bottom: 1px solid var(--rule);
}
.nav-tabs .nav-link {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  font-size: var(--fs-13);
  color: var(--fg-muted);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 10px 14px;
  background: transparent;
}
.nav-tabs .nav-link.active {
  color: var(--fg) !important;
  background: transparent !important;
  border-bottom-color: var(--wwsu-green) !important;
}
.nav-tabs .nav-link:hover {
  border-bottom-color: var(--rule-strong);
}

.nav-pills .nav-link.active {
  background: var(--wwsu-green) !important;
  color: var(--paper) !important;
  border-radius: var(--radius-1) !important;
}


/* ------------------------------------------------------------
   14. PACE PROGRESS BAR — green not red
   ------------------------------------------------------------ */
.pace .pace-progress {
  background: var(--wwsu-green) !important;
}
.pace .pace-activity {
  border-top-color: var(--wwsu-green) !important;
  border-left-color: var(--wwsu-green) !important;
}


/* ------------------------------------------------------------
   15. AMPLITUDE JS PLAYER — restyle the existing red player
   ------------------------------------------------------------ */
[id*="amplitude"], .amplitude-player,
.am-container, .amplitude-mini-player, .player {
  font-family: var(--font-display) !important;
}

/* The current player uses rgb(211,30,56) for the controls bg.
   Override by targeting the common AmplitudeJS DOM. */
.amplitude-play, .amplitude-pause, .amplitude-play-pause,
.amplitude-prev, .amplitude-next,
.amplitude-shuffle, .amplitude-repeat {
  background-color: var(--wwsu-green) !important;
  color: var(--paper) !important;
  border-radius: 50% !important;
  border: 0 !important;
}
.amplitude-play:hover, .amplitude-pause:hover, .amplitude-play-pause:hover {
  background-color: var(--wwsu-green-700) !important;
}
.amplitude-song-played-progress,
[class*="amplitude-progress"] [class*="filled"],
input[type="range"].amplitude-song-slider::-webkit-slider-runnable-track {
  background: var(--wwsu-green) !important;
}
.amplitude-time-played, .amplitude-time-remaining,
.amplitude-current-time, .amplitude-duration-time {
  font-family: var(--font-mono) !important;
  font-size: var(--fs-12);
  color: var(--ink-300);
}


/* ------------------------------------------------------------
   16. Timeline component used by admin log modals.
   ------------------------------------------------------------ */

/* Base layout: vertical rule with stacked log items. */
.timeline {
  position: relative;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 31px;
  width: 4px;
  margin-right: -2px;
  background: var(--rule-soft);
  border-radius: 2px;
}
.timeline > div {
  position: relative;
  margin-bottom: 15px;
}
.timeline > div::before,
.timeline > div::after {
  content: "";
  display: table;
}
.timeline > div::after { clear: both; }
.timeline > div > .fa,
.timeline > div > .fas,
.timeline > div > .fab,
.timeline > div > .far,
.timeline > div > .glyphicon,
.timeline > div > .ion {
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 30px;
  position: absolute;
  color: var(--paper) !important;
  background: var(--wwsu-green) !important;
  border-radius: 50%;
  text-align: center;
  left: 18px;
  top: 0;
}
.timeline > div > .timeline-item {
  box-shadow: var(--shadow-1);
  border-radius: var(--radius-2);
  margin-top: 0;
  background: var(--paper);
  color: var(--ink);
  margin-left: 60px;
  margin-right: 15px;
  padding: 0;
  position: relative;
  border: 1px solid var(--rule-soft);
}
.timeline > div > .timeline-item > .time {
  color: var(--fg-muted);
  float: right;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}
.timeline > div > .timeline-item > .timeline-header {
  margin: 0;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  padding: 10px;
  font-size: 16px;
  line-height: 1.1;
  font-family: var(--font-display);
  font-weight: 700;
}
.timeline > div > .timeline-item > .timeline-body,
.timeline > div > .timeline-item > .timeline-footer {
  padding: 10px;
}
.timeline-inverse > div > .timeline-item {
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  box-shadow: none;
}
.timeline .time-label > span {
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-family: var(--font-display);
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  font-size: var(--fs-12);
  border-radius: var(--radius-1);
  padding: 4px 10px;
}
.timeline > div > .timeline-item .time {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-muted);
}


/* ------------------------------------------------------------
   16b. ADMIN-MODAL COMPATIBILITY SHIM
   --------------------------------------------------------------
   `wwsu-calendar-class.js` (showClickedEvent → generateFullEventCard)
   and `wwsu-analytics.js` still emit AdminLTE-style cards into
   admin modals: `.card.card-{color}.card-outline.position-relative`,
   `.ribbon-wrapper.ribbon-{lg,xl}`, `.ribbon`,
   `.card-body.box-profile`, `.profile-user-img.img-fluid.img-circle`,
   `.profile-username`, `.list-group.list-group-unbordered`,
   `.card.card-widget.widget-user-2`. These are admin-only paths
   (visible inside iziModals when a director clicks a calendar
   event). This shim gives them reasonable styling without
   needing to ship full AdminLTE — until the JS plugins migrate
   to .wwsu-info-card / .d-* BEM in a follow-up.
   ------------------------------------------------------------ */
.box-profile {
  text-align: center;
}
.profile-user-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  background: var(--bg-soft);
}
i.profile-user-img {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
}
.profile-username {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-18);
  margin: 12px 0 4px;
  color: var(--ink);
}
.list-group-unbordered {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-2);
  overflow: hidden;
}
.list-group-unbordered .list-group-item {
  padding: 8px 12px;
  border-top: 1px solid var(--rule-soft);
  margin: 0;
}
.list-group-unbordered .list-group-item:first-child {
  border-top: 0;
}

/* Ribbon — corner badge on cards. */
.ribbon-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.ribbon-wrapper.ribbon-lg { width: 90px; height: 90px; }
.ribbon-wrapper.ribbon-xl { width: 110px; height: 110px; }
.ribbon {
  position: absolute;
  top: 12px;
  right: -32px;
  width: 120px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-12);
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 4px 0;
  transform: rotate(35deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.ribbon-wrapper.ribbon-lg .ribbon { width: 140px; right: -36px; padding: 6px 0; font-size: var(--fs-13); }
.ribbon-wrapper.ribbon-xl .ribbon { width: 160px; right: -40px; padding: 8px 0; font-size: var(--fs-14); }

/* Calendar / analytics card body padding parity. Most card-* base
   styling is already provided by Section 5 above; these are the
   structural primitives that legacy templates assume. */
.card.position-relative { position: relative; }
.card-widget { display: flex; flex-direction: column; }
.widget-user-2 .widget-user-header {
  padding: var(--space-3);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-2) var(--radius-2) 0 0;
}


/* ------------------------------------------------------------
   17. UTILITY OVERRIDES — Bootstrap text/bg colors
   ------------------------------------------------------------ */
.text-primary, .text-success { color: var(--wwsu-green-700) !important; }
.text-warning                { color: var(--wwsu-gold) !important; }
.text-danger                 { color: var(--signal-red) !important; }
.text-info                   { color: var(--ink) !important; }
.text-muted                  { color: var(--fg-muted) !important; }

.bg-primary, .bg-success     { background: var(--wwsu-green) !important; color: var(--paper) !important; }
.bg-warning                  { background: var(--wwsu-gold) !important;  color: var(--ink) !important; }
.bg-danger                   { background: var(--signal-red) !important; color: var(--paper) !important; }
.bg-info, .bg-dark           { background: var(--ink) !important;        color: var(--paper) !important; }
.bg-secondary                { background: var(--bg-soft) !important;    color: var(--fg) !important; }

/* Retired Bootstrap utility colors → ink fallback so anything that
   slipped through doesn't break. */
.bg-orange, .bg-purple, .bg-blue, .bg-pink, .bg-teal,
.text-orange, .text-purple, .text-blue, .text-pink, .text-teal {
  color: inherit !important;
}
.bg-orange, .bg-purple, .bg-blue, .bg-pink, .bg-teal {
  background: var(--bg-soft) !important;
  color: var(--fg) !important;
}


/* ------------------------------------------------------------
   18. FOOTER
   ------------------------------------------------------------ */
.main-footer {
  background: var(--ink) !important;
  color: var(--ink-100) !important;
  border-top: 4px solid var(--wwsu-green);
  font-family: var(--font-body);
  font-size: var(--fs-13);
}
.main-footer a { color: var(--wwsu-green-400) !important; border-bottom: 0; }
.main-footer strong { color: var(--paper); }


/* ------------------------------------------------------------
   19. PRINT — shut off chrome, keep brand type
   ------------------------------------------------------------ */
@media print {
  .main-sidebar, .main-header, .main-footer { display: none !important; }
  .content-wrapper { margin-left: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ============================================================
   END — restyle everything that carries identity weight,
   leave AdminLTE's structural CSS to do its job.
   ============================================================ */