/* ----------------------------------------------------------
   THEME VARIABLES - Light Mode Only
---------------------------------------------------------- */
:root {
  /* Layout Variables */
  --sidebar-width: 250px;

  /* Base Colors  */
  --color-background: #F3F4F6;
  --color-header-bg: #ffffff;
  --color-border: #e6e9ec;
  --color-footer-bg: #f8f9fa;
  --color-muted-text: #3a3f43;
  --color-notification-hover-bg: #D2D5D4;

  /* Text Colors */
  --color-text: #272323;
  --color-text-hover: #000000;

  /* Button & Focus Colors */
  --color-btn-close: #000000;
  --color-focus-outline: #000000;

/* sidebar Colors */
    --sidebar-width: 250px;
  --sidebar-link-radius: 0.5rem;
  --sidebar-bg: #004B8B;           /* solid blue */
  --sidebar-bg-active: #02325c;    /* darker blue for hover / active */

}

/* ----------------------------------------------------------
   LAYOUT VARIABLES (responsiveness)
---------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 10rem;
  }
}
/* ----------------------------------------------------------
   TR selected
---------------------------------------------------------- */
/* Apply this class to any <tr> to give it a #f5edd3 background
   and keep text/links/icons readable (works with Bootstrap striped/hover tables). */
.table tbody tr.bg-remediation > * {
  background-color: #f5edd3 !important;
  color: #000 !important; /* better contrast on #f5edd3 */
}

/* Prevent .table-hover from overriding the color on hover */
.table-hover > tbody > tr.bg-remediation:hover > * {
  background-color: #f5edd3 !important;
}

/* Neutralize Bootstrap striped accent so the custom color wins */
.table-striped > tbody > tr.bg-remediation:nth-of-type(odd) > * {
  --bs-table-accent-bg: #f5edd3;
}

/* Ensure links, buttons, and icons are readable on the blue background */
.table tbody tr.bg-remediation a,
.table tbody tr.bg-remediation .btn-link,
.table tbody tr.bg-remediation i {
  color: #000 !important;
}




/* ----------------------------------------------------------
   HTML & BODY
---------------------------------------------------------- */
/* ensure html and body stretch full height */
html,
body {
  height: 100%;
}

body {
  background: var(--color-background);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ----------------------------------------------------------
   SIDEBAR NAVIGATION
---------------------------------------------------------- */
.collapse.collapse-horizontal {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 1030;
  overflow: hidden;
  width: 0;                             /* collapsed by default */
}
.collapse.collapse-horizontal.show {
  width: var(--sidebar-width);          /* expanded width */
}

/* Shift header, breadcrumb, main, footer when expanded (unchanged) */
.collapse.collapse-horizontal.show + .flex-grow-1 .custom-header-bg {
  left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
}
.collapse.collapse-horizontal.show + .flex-grow-1 nav[aria-label="breadcrumb"],
.collapse.collapse-horizontal.show + .flex-grow-1 main[role="main"],
.collapse.collapse-horizontal.show + .flex-grow-1 footer {
  margin-left: var(--sidebar-width);
}

/* -----------------------------------------------------------------
   Sidebar container
   ----------------------------------------------------------------- */
.sidebar-nav {
  width: var(--sidebar-width);
  height: 100%;
  overflow-y: auto;
  background: var(--sidebar-bg) !important;
  color: #ffffff;
}
.sidebar-nav .close-nav-btn i,
.sidebar-nav .close-nav-btn:hover i,
.sidebar-nav .close-nav-btn:focus i {
  color: #ffffff !important;          /* white X icon */
}

.sidebar-nav .nav-link:focus,
.sidebar-nav .close-nav-btn:focus {
  outline: 2px dotted #ffffff !important;  /* white focus ring */
  outline-offset: 2px;
}
/* -----------------------------------------------------------------
   Links
   ----------------------------------------------------------------- */
.nav-link {
  color: #ffffff !important;
  text-decoration: none;
  border-radius: var(--sidebar-link-radius);
  padding: 0.5rem 0.75rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.nav-link i { margin-right: 0.75rem; }

.nav-link:hover,
.nav-link:focus {
  background: var(--sidebar-bg-active);
  color: #ffffff !important;
  outline: 2px dotted var(--color-focus-outline) !important;
  outline-offset: 2px;
}
.nav-link.active,
.nav-link[aria-current="page"] {
  background: var(--sidebar-bg-active);
}

/* -----------------------------------------------------------------
   Close button (same behaviour, colours inherit from your tokens)
   ----------------------------------------------------------------- */
.close-nav-btn {
  background: none;
  border: none;
  padding: 0;
}
.close-nav-btn i {
  color: var(--color-btn-close);
  font-size: 1.5rem;
}
.close-nav-btn:hover,
.close-nav-btn:focus {
  outline: 2px dotted var(--color-focus-outline) !important;
  outline-offset: 2px;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.close-nav-btn:hover i,
.close-nav-btn:focus i {
  color: var(--color-btn-close);
}



/* ----------------------------------------------------------
   BREADCRUMB STYLES
---------------------------------------------------------- */
/* By default, no top margin */
nav[aria-label="breadcrumb"] {
  margin-left: 0;
  padding-left: 1rem;
  border-bottom: 1px solid var(--color-border);
}

/* Apply margin-top:7rem only on desktop (≥768px) when breadcrumb is visible */
@media (min-width: 768px) {
  nav[aria-label="breadcrumb"] {
    margin-top: 7rem; /* ensures breadcrumb appears below the fixed header */
  }
}

/* Style the breadcrumb items */
.breadcrumb .breadcrumb-item a {
  text-decoration: none;
  color: var(--color-text);
}
.breadcrumb .breadcrumb-item a:hover,
.breadcrumb .breadcrumb-item a:focus {
  color: var(--color-text-hover);
  outline: 2px dotted var(--color-focus-outline);
  outline-offset: 2px;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-hover); 
}
.breadcrumb-item.active {
  color: var(--color-text); 
}






/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */
/* header bar */
.custom-header-bg {
  background: var(--color-header-bg);
  position: fixed;
  top: 0;
  z-index: 1031;
  width: 100%;
  -webkit-transition: left 0.3s ease;
  transition: left 0.3s ease;      /* smooth shift when sidebar opens */
}

/* header buttons (default state) */
.custom-header-bg .btn-light {
  background: transparent;
  color: #004B8B;                  /* blue icon colour */
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* default icon colour */
.custom-header-bg .btn-light i {
  color: #004B8B;                  /* blue icon colour */
}

/* ------------ dropdown caret (arrow) colour ------------- */
.custom-header-bg .btn-light.dropdown-toggle::after {
  border-top-color: #004B8B;       /* blue arrow in default state */
}

/* hover + keyboard focus */
.custom-header-bg .btn-light:hover,
.custom-header-bg .btn-light:focus {
  background: #004B8B;             /* ✓ blue background */
  outline: 2px dotted #004B8B;     /* blue focus ring */
  outline-offset: 2px;
}
.custom-header-bg .btn-light:hover i,
.custom-header-bg .btn-light:focus i {
  color: #ffffff;                  /* ✓ white icon on hover / focus */
}

/* arrow turns white on hover / focus */
.custom-header-bg .btn-light.dropdown-toggle:hover::after,
.custom-header-bg .btn-light.dropdown-toggle:focus::after {
  border-top-color: #ffffff;       /* ✓ white arrow on hover / focus */
}

/* yellow notification dot (unchanged) */
.notification-dot {
  z-index: 1;
  top: 5px !important;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* ----------------------------------------------------------
   MAIN CONTENT & SECTIONS
---------------------------------------------------------- */
/* On mobile/tablet (<768px), breadcrumb is hidden, so give main top margin */
@media (max-width: 767.98px) {
  main[role="main"] {
    margin-top: 5rem !important; /* Ensure content isn't hidden by the fixed header */
  }
}

/* ----------------------------------------------------------
   FOOTER STYLES
---------------------------------------------------------- */
.custom-footer-bg {
  background: var(--color-footer-bg);
  border-top: 1px solid var(--color-border);
  -webkit-transition: margin-left 0.3s ease;
  transition: margin-left 0.3s ease;
}
.custom-footer-bg p {
  font-size: 0.9rem;
  color: #6c757d;
  margin: 0;
}

/* ----------------------------------------------------------
   UTILITY CLASSES
---------------------------------------------------------- */
/* card styling */
.card-auth {
  border-radius: 0.75rem;
  max-width: 420px;
  width: 100%;
}

/* split‑screen backgrounds */
.left-bg {
  background: linear-gradient(135deg, #eef1f5 0%, #dfe3e8 100%);
}

.right-bg {
  background: linear-gradient(135deg, #004B8B 0%, #14348e 100%);
}

/* password eye button tidier */
.password-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* callout */
.bs-callout {
  padding: 20px;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 4px;
  margin: 20px 0 20px 50px;
}
.bs-callout-xl {
  margin-left: 0px;
}
.bs-callout-lg {
  margin-left: 50px;
}
.bs-callout-md {
  margin-left: 100px;
}
.bs-callout-sm {
  margin-left: 150px;
}
.bs-callout-xs {
  margin-left: 200px;
}
.bs-callout h2 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code {
  border-radius: 4px;
}
.bs-callout+.bs-callout {
  margin-top: -5px;
}
.bs-callout-default {
  border-left-color: rgb(31, 30, 30);
  background-color: #f7f7f9;
}
.bs-callout-default h2 {
  color: rgb(31, 30, 30);
}
.bs-callout-primary {
  border-left-color: #24446e;
}
.bs-callout-primary h2 {
  color: #24446e;
}
.bs-callout-success {
  border-left-color: #286b28;
}
.bs-callout-success h2 {
  color: #286b28;
}
.bs-callout-danger {
  border-left-color: #a0261f;
}
.bs-callout-danger h2 {
  color: #a0261f;
}
.bs-callout-warning {
  border-left-color: #976928 !important; 
}
.bs-callout-warning h2 {
  color: #976928 !important;
}
.bs-callout-info {
  border-left-color: #238295;
}
.bs-callout-info h2 {
  color: #238295;
}
.bs-callout-disabled {
  border-left-color: #a0a2a5;
}
.bs-callout-disabled h2 {
  color: #32373d;
}
/* bg transparency and disabled effects for Bootstrap callout */
.bs-callout-default.transparent {
  background-color: rgb(247, 247, 249, 0.7); /*#f7f7f9*/
}
.bs-callout-success.transparent {
  background-color: rgb(239, 255, 232, 0.7); /*#efffe8*/
}
.bs-callout-warning.transparent {
  background-color: rgb(254, 251, 237, 0.7); /*#fefbed*/
}
.bs-callout-danger.transparent {
  background-color: rgb(252, 242, 242, 0.7); /*#fcf2f2*/
}
.bs-callout-info.transparent {
  background-color: rgb(240, 247, 253, 0.7); /*#f0f7fd*/
}
.bs-callout.disabled {
  opacity: 0.4;
}

/* Muted text color */
.text-muted {
  color: var(--color-muted-text) !important;
}
/* ----------------------------------------------------------
   .icon-strip  –  darker background behind leading icon
   Works on any Bootstrap 5 .btn variant
   ---------------------------------------------------------- */
.icon-strip {
  position: relative;
  padding-left: 3rem;                 /* room for icon zone */
}
.icon-strip::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;                  /* full height on the left */
  width: 3rem;
  background: rgba(0,0,0,.25);        /* overlay tint */
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  pointer-events: none;
}
.icon-strip i {
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}
/* strip uses outline color at 15 % opacity */
.btn-outline-primary.icon-strip::before,
.btn-outline-success.icon-strip::before,
.btn-outline-danger.icon-strip::before {       /* add more variants if needed */
  background: currentColor;
  opacity: .15;                                /* adjust darkness here */
}

/* ------------ phones (< 576 px) ------------ */
@media (max-width: 575.98px) {
  .btn-icon-only {
    width: 3rem;                 /* square side          */
    height: 3rem;
    padding: 0;                  /* keep icon centred    */
    border-radius: .375rem;      /* Bootstrap’s default 6 px-ish rounding */
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

/* ------------ tablet / desktop (≥ 576 px) ------------ */
@media (min-width: 576px) {
  .btn-icon-only {               /* not shown ≥ sm, but keep defaults */
    width: auto;
    height: auto;
    padding: .5rem .75rem;
    border-radius: .375rem;
  }
}


/* Only affects buttons that have BOTH classes:
   btn-outline-info and btn-outline-info-hover-solid  */
.btn-outline-info.btn-outline-info-hover-solid:hover,
.btn-outline-info.btn-outline-info-hover-solid:focus {
  background-color: var(--bs-info);   /* same teal as btn-info */
  border-color:     var(--bs-info);
  color: #fff;                        /* text + icon become white */
}
/* force the table to always fit 100% of its container */
#datatables-responsive {
  table-layout: fixed !important;
  width: 100%        !important;
}

/* allow long text to wrap instead of pushing the width */
#datatables-responsive th,
#datatables-responsive td {
  white-space: normal    !important;
  word-wrap: break-word  !important;
}
/* ----------------------------------------------------------
   App launcher
   ---------------------------------------------------------- */

 /* --- App-launcher tiles --- */
.launcher-tile{
  /* layout */
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
      -ms-flex-direction:column;
          flex-direction:column;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;

  /* spacing */
  gap:.75rem;                 /* space between icon & label            */
  padding:1.5rem;             /* internal padding for hover box        */
  margin:0 .75rem 1.5rem;     /* horizontal gap between tiles + row gap*/

  /* visual */
  border:1px solid transparent;
  border-radius:.75rem;
  background:transparent;
  text-decoration:none;
  color:inherit;
  text-align:center;          /* keeps multi-line labels centred       */
  -webkit-transition:border-color .15s, -webkit-box-shadow .15s;
  transition:border-color .15s, -webkit-box-shadow .15s;
  transition:border-color .15s, box-shadow .15s;
  transition:border-color .15s, box-shadow .15s, -webkit-box-shadow .15s;

  /* minimum width so two-line labels fit neatly                       */
  min-width:8rem;             /* ≈128 px                                */
}

.launcher-tile:hover,
.launcher-tile:focus{
  border-color:#ced4da;       /* light outline                          */
  -webkit-box-shadow:0 .5rem 1rem rgba(0,0,0,.08);
          box-shadow:0 .5rem 1rem rgba(0,0,0,.08);
  background:#fff;
  outline:0;
}

.launcher-icon{
  font-size:2rem;
}

/* wider horizontal gap on small-and-up screens */
@media (min-width:576px){
  .launcher-tile{margin:0 1rem 2rem;}
}
/* ----------------------------------------------------------
  Account panel layout
   ---------------------------------------------------------- */

/* Dropdown sizing */
.account-menu{
  --account-width: 380px;
  width: var(--account-width);
  max-width: calc(100vw - 2rem);
  padding: 1rem 1.25rem;
}

/* Panel */
.account-panel{ max-width:none; margin:0; }

/* Company block (always show name, badge below it) */
.company-block{ margin-top:.25rem; }
.company-name{
  font-weight:600;
  font-size:1.5rem;
  color: var(--bs-gray-800, #343a40);
  letter-spacing:.2px;
  margin-bottom:.25rem;
}
.badge-sp{
  font-size:1rem; line-height:1;
  color:#004B8B; background:#e9f2ff;
  border:1px solid #d6e6ff;
  padding:.25rem .6rem; border-radius:999px;
}

/* Initials avatar */
.avatar-initials{
  width:72px; height:72px; border-radius:50%;
  background:#e9f2ff; color:#004B8B;
  font-weight:700; font-size:1.5rem;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;
  text-transform:uppercase;
}

/* Buttons */
.account-panel .btn.btn-primary{
  border-radius:999px;
  padding:.9rem 1.1rem;
  font-weight:600;
}
.account-panel .btn.btn-outline-secondary,
.account-panel .btn.btn-outline-danger{
  border-radius:12px;
  padding:.8rem 1rem;
  font-weight:600;
}
.account-panel .btn i{ font-size:1rem; }

/* Link */
.account-link{ text-decoration:none; }
.account-link:hover{ text-decoration:underline; }

/* Buttons */
.btn-outline-link:focus,
.btn-outline-link:focus-visible {
  outline: 2px solid #0d6efd !important;   /* Bootstrap’s primary blue */
  outline-offset: 2px !important;
}
/* ----------------------------------------------------------
  Timeline

   ---------------------------------------------------------- */

/* Layout */
.timeline {
  --line-width: 4px;
  --gap: 1.5rem;
  --node-size: 44px;
  --marker-size: 60px;

  display: grid;
  row-gap: 2.5rem;
}

/* 3-column grid: left | center(line) | right */
.tl-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

/* Vertical line in center column */
.tl-center {
  position: relative;
}
.tl-center::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2rem;
  bottom: -2rem;
  width: var(--line-width);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #dee2e6;
  z-index: 0;
}

/* Nodes (dots with icons) */
.tl-node {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  width: var(--node-size);
  height: var(--node-size);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.08);
          box-shadow: 0 2px 6px rgba(0,0,0,.08);
  border: 2px solid #fff;
  outline: 3px solid rgba(0,0,0,.03);
  font-size: 1rem;
}

/* Cards */
.tl-card {
  border: 1px solid #e9ecef;
  border-radius: .75rem;
}
.tl-left .tl-card { margin-right: calc(var(--gap)); }
.tl-right .tl-card { margin-left: calc(var(--gap)); }

/* Horizontal connectors from node to card */
.tl-left   { position: relative; }
.tl-right  { position: relative; }
.tl-left::after,
.tl-right::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(80px/2 - var(--node-size)/2); /* half center col minus half node */
  height: 2px;
  background: #dee2e6;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
}
.tl-left::after  { right: 0; }
.tl-right::after { left: 0; }

/* Start/End markers */
.tl-marker {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  background: #6c757d;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 600;
  letter-spacing: .5px;
  -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.08);
          box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.tl-start { }
.tl-end   { }

/* Responsive: stack on small screens */
@media (max-width: 768px) {
  .tl-row {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }
  .tl-center::before {
    left: 50%;
    top: 0;
    bottom: 0;
  }
  .tl-left::after,
  .tl-right::after {
    display: none;
  }
  .tl-left .tl-card,
  .tl-right .tl-card {
    margin: 0 auto;
  }
}

 /* Indentation utility for definition lists */
  .dl-indent { margin: 0; }
  .dl-indent dt { margin: 0 0 .25rem 1rem; }     /* dt indented */
  .dl-indent dd { margin: 0 0 .5rem 2rem; }      /* dd indented more */

  /* Optional: tighten spacing when stacked closely in forms */
  .dl-tight dt { margin-bottom: .125rem; }
  .dl-tight dd { margin-bottom: .375rem; }

  /* Optional: slightly reduce indents on very small screens */
  @media (max-width: 576px) {
    .dl-indent dt { margin-left: .75rem; }
    .dl-indent dd { margin-left: 1.5rem; }
  }

/* ----------------------------------------------------------
 Messaging

   ---------------------------------------------------------- */

/* left column: messages always left aligned and responsive */
#channelArea .messages-container { text-align: left; }
#channelArea .msg { display: block; margin: 0; }
#channelArea .msg-bubble {
  float: left;
  clear: both;
  display: inline-block;
  margin: .25rem 0;
  padding: .625rem .75rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;              /* fill available width when long */
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-300);
  border-radius: .75rem;
  overflow-wrap: anywhere;      /* wrap very long tokens */
  word-break: break-word;
}
#channelArea .msg-own .msg-bubble {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-border-subtle);
  margin-left: 20px;            /* base indent for replies */
}

/* responsive indentation for replies */
@media (min-width: 576px) {
  #channelArea .msg-own .msg-bubble { margin-left: 24px; }
}
@media (min-width: 768px) {
  #channelArea .msg-own .msg-bubble { margin-left: 28px; }
}
@media (min-width: 992px) {
  #channelArea .msg-own .msg-bubble { margin-left: 32px; }
}
@media (min-width: 1200px) {
  #channelArea .msg-own .msg-bubble { margin-left: 36px; }
}

#channelArea .msg-bubble img,
#channelArea .msg-bubble figure { display:block; max-width:100%; margin:0; border-radius:.5rem; }
#channelArea .msg-meta { font-size:.8rem; margin-top:.25rem; }
#channelArea .messages-container::after { content:""; display:block; clear:both; }

/* right column: normal responsive card */
#channelArea .card { height: auto; }
#channelArea .people-list,
#channelArea .attachments-list { margin-bottom: 0; }

/* responsive behavior: stack on smaller screens */
@media (max-width: 1199.98px) {
  #channelArea .card { margin-top: 1rem; }
}