/* ============================================================
   Canoa Theme — Design System
   ──────────────────────────────────────────────────────────
   Centralised styles for all canoa/ blade views.
   --canoa-primary / --canoa-secondary are injected by
   canoa/layouts/app.blade.php from AppSetting.

   Class namespace: ct- (Canoa Theme)
   ============================================================ */

/* ── Content spacing ──────────────────────────────────────── */
/* Vertical padding for content containers (Bootstrap py-0 removes it) */
.main-content .container-fluid.content-inner {
    padding-top:    1.25rem !important;
    padding-bottom: 1.5rem  !important;
}

.main-content .ct-warning-layer {
    position: relative;
    z-index: 30;
    margin-bottom: 1rem;
}

.main-content .ct-page-content-layer {
    position: relative;
    z-index: 1;
}

.main-content .ct-flash-layer {
    position: relative;
    z-index: 2;
}

.main-content .ct-page-content-aligned {
    margin-top: 0 !important;
}

/* Row-to-row vertical gap inside content areas */
.main-content .container-fluid > .row + .row,
.main-content .container-fluid.content-inner > .row + .row {
    margin-top: 1.25rem;
}

/* Warnings bar spacing */
.main-content .container-fluid.px-4 .block-warning,
.main-content .container-fluid.px-4 .penalty-warning {
    margin-bottom: 0;
}

/* ── Static colour tokens ─────────────────────────────────── */
:root {
    --ct-success:      #22c55e;
    --ct-warning:      #f59e0b;
    --ct-danger:       #ef4444;
    --ct-info:         #06b6d4;
    --ct-text:         #1e293b;
    --ct-body:         #374151;
    --ct-muted:        #64748b;
    --ct-hint:         #94a3b8;
    --ct-subtle:       #f8fafc;
    --ct-divider:      #f1f5f9;
    --ct-border:       #e8edf2;
    --ct-bg:           #ffffff;
    --ct-shadow:       0 2px 8px rgba(0, 0, 0, .06);
    --ct-shadow-hover: 0 6px 24px rgba(0, 0, 0, .12);
    --ct-radius:       16px;
    --ct-radius-sm:    10px;
    --ct-radius-xs:    8px;
}

/* ── Base card ────────────────────────────────────────────── */
.ct-card {
    background:    var(--ct-bg);
    border-radius: var(--ct-radius);
    border:        1px solid var(--ct-border);
    box-shadow:    var(--ct-shadow);
    overflow:      hidden;
    transition:    transform .2s, box-shadow .2s;
}

.ct-card:hover {
    transform:  translateY(-2px);
    box-shadow: var(--ct-shadow-hover);
}

/* Disable hover lift for non-interactive containers */
.ct-card.no-hover:hover {
    transform:  none;
    box-shadow: var(--ct-shadow);
}

/* Top gradient accent stripe — used as a standalone child element OR as a modifier on .ct-card */
.ct-card-stripe {
    height:     5px;
    background: linear-gradient(90deg, var(--canoa-primary), var(--canoa-secondary));
    flex-shrink: 0;
}

/* When ct-card-stripe is applied directly to ct-card, render it via ::before so the card itself keeps its full height */
.ct-card.ct-card-stripe {
    height:     auto;
    background: var(--ct-bg);
}
.ct-card.ct-card-stripe::before {
    content:    '';
    display:    block;
    height:     5px;
    background: linear-gradient(90deg, var(--canoa-primary), var(--canoa-secondary));
    flex-shrink: 0;
}

/* ── Hero / welcome banner ────────────────────────────────── */
.ct-hero {
    border-radius: var(--ct-radius);
    background:    linear-gradient(135deg, var(--canoa-primary), var(--canoa-secondary));
    color:         #fff;
    padding:       1.75rem 2rem;
    box-shadow:    0 4px 20px rgba(0, 119, 190, .28);
}

.ct-hero h2 { font-weight: 700; margin-bottom: .35rem; }
.ct-hero p  { margin-bottom: 0;  opacity: .93; }
.ct-hero a  { color: #fff; text-decoration: underline; font-weight: 600; }

/* ── Stat / metric tile ───────────────────────────────────── */
.ct-stat {
    background:    var(--ct-bg);
    border-radius: var(--ct-radius);
    border:        1px solid var(--ct-border);
    box-shadow:    var(--ct-shadow);
    padding:       1.25rem 1.5rem;
    display:       flex;
    align-items:   center;
    gap:           1rem;
    transition:    transform .2s, box-shadow .2s;
    height:        100%;
}

.ct-stat:hover {
    transform:  translateY(-2px);
    box-shadow: var(--ct-shadow-hover);
}

/* Coloured icon container inside a stat tile */
.ct-stat-icon {
    width:        52px;
    height:       52px;
    border-radius: 14px;
    display:      grid;
    place-items:  center;
    flex-shrink:  0;
    font-size:    1.25rem;
}

.ct-stat-icon.primary  { background: rgba(0, 119, 190, .10); color: var(--canoa-primary); }
.ct-stat-icon.success  { background: rgba(34, 197, 94, .12);  color: var(--ct-success); }
.ct-stat-icon.warning  { background: rgba(245, 158, 11, .12); color: var(--ct-warning); }
.ct-stat-icon.danger   { background: rgba(239, 68, 68, .12);  color: var(--ct-danger); }
.ct-stat-icon.info     { background: rgba(6, 182, 212, .12);  color: var(--ct-info); }

.ct-stat-value {
    font-size:    clamp(1rem, 2.5vw, 1.75rem);
    font-weight:  700;
    color:        var(--ct-text);
    line-height:  1.2;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
    min-width:    0;
}

.ct-stat-label {
    font-size:  .78rem;
    color:      var(--ct-muted);
    margin-top: .2rem;
}

/* ── Page header ──────────────────────────────────────────── */
.ct-page-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1.5rem;
    flex-wrap:       wrap;
    gap:             .75rem;
}

.ct-page-title {
    font-size:   1.35rem;
    font-weight: 700;
    color:       var(--ct-text);
    margin:      0 0 .2rem;
}

.ct-page-subtitle {
    font-size: .85rem;
    color:     var(--ct-muted);
    margin:    0;
}

/* ── Filter panel ─────────────────────────────────────────── */
.ct-filter {
    background:    var(--ct-bg);
    border-radius: 14px;
    border:        1px solid var(--ct-border);
    box-shadow:    var(--ct-shadow);
    padding:       1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* ── Section heading inside a card ───────────────────────── */
.ct-section-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 1.5rem;
    border-bottom:   1px solid var(--ct-divider);
}

.ct-section-head h5,
.ct-section-head h6 {
    margin:      0;
    font-size:   .95rem;
    font-weight: 700;
    color:       var(--ct-text);
}

/* ── Gradient date pill ───────────────────────────────────── */
.ct-date-pill {
    background:  linear-gradient(135deg, var(--canoa-primary), var(--canoa-secondary));
    color:       #fff;
    border-radius: 12px;
    padding:     .55rem .9rem;
    min-width:   54px;
    text-align:  center;
    line-height: 1.1;
    flex-shrink: 0;
}

.ct-date-pill .day { font-size: 1.4rem; font-weight: 700; }
.ct-date-pill .mon { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .88; }

/* ── Modality / type badge pill ───────────────────────────── */
.ct-modality-badge {
    display:      inline-flex;
    align-items:  center;
    gap:          .35rem;
    background:   #f0f7ff;
    color:        var(--canoa-primary);
    border:       1px solid #c8e0ff;
    font-size:    .75rem;
    font-weight:  600;
    padding:      .3rem .7rem;
    border-radius: 20px;
}

/* ── 30-px icon box ───────────────────────────────────────── */
.ct-icon-box {
    width:         30px;
    height:        30px;
    border-radius: var(--ct-radius-xs);
    background:    var(--ct-subtle);
    display:       grid;
    place-items:   center;
    flex-shrink:   0;
    color:         var(--ct-muted);
    font-size:     .75rem;
}

/* ── Semantic status badges ───────────────────────────────── */
.ct-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    font-size:     .73rem;
    font-weight:   600;
    padding:       .28rem .65rem;
    border-radius: 20px;
    white-space:   nowrap;
}

.ct-badge.success   { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.ct-badge.warning   { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.ct-badge.danger    { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.ct-badge.info      { background: #f0f9ff; color: #0c4a6e; border: 1px solid #bae6fd; }
.ct-badge.secondary { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.ct-badge.primary   { background: #f0f7ff; color: #1e40af; border: 1px solid #bfdbfe; }

.ct-class-list-item .ct-badge {
    min-width:       6.5rem;
    justify-content: center;
}

/* ── Buttons ──────────────────────────────────────────────── */
.ct-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .4rem;
    border-radius:   var(--ct-radius-sm);
    padding:         .55rem 1.1rem;
    font-weight:     600;
    font-size:       .88rem;
    border:          none;
    cursor:          pointer;
    transition:      opacity .15s, transform .1s;
    text-decoration: none !important;
    line-height:     1.4;
    white-space:     nowrap;
}

.ct-btn:hover { opacity: .88; text-decoration: none; }

.ct-btn-primary {
    background: linear-gradient(135deg, var(--canoa-primary), var(--canoa-secondary));
    color: #fff !important;
}

.ct-btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff !important;
}

.ct-btn-outline {
    background: transparent;
    border:     1px solid var(--ct-border);
    color:      var(--ct-muted) !important;
}

.ct-btn-outline:hover { background: var(--ct-subtle); }

.ct-btn-danger-outline {
    background: transparent;
    border:     1px solid #fecaca;
    color:      #ef4444 !important;
}

.ct-btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color:      #fff !important;
}

.ct-btn-danger-outline:hover { background: #fef2f2; }

.ct-btn-warning-outline {
    background: transparent;
    border:     1px solid #fde68a;
    color:      #92400e !important;
}

.ct-btn-sm {
    padding:       .32rem .75rem;
    font-size:     .8rem;
    border-radius: var(--ct-radius-xs);
}

.ct-btn-lg {
    padding:  .75rem 1.5rem;
    font-size: 1rem;
}

/* ── List row ─────────────────────────────────────────────── */
.ct-row-item {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    padding:       .85rem 0;
    border-bottom: 1px solid var(--ct-divider);
}

.ct-row-item:last-child { border-bottom: none; }

/* ── Capacity progress bar ────────────────────────────────── */
.ct-progress-track {
    height:        6px;
    border-radius: 99px;
    background:    var(--ct-divider);
    overflow:      hidden;
}

.ct-progress-fill {
    height:        100%;
    border-radius: 99px;
    transition:    width .4s;
}

/* ── Confirmed booking strip ──────────────────────────────── */
.ct-confirmed-strip {
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    background:    #ecfdf5;
    border:        1px solid #bbf7d0;
    border-radius: var(--ct-radius-sm);
    padding:       .55rem .85rem;
    font-size:     .82rem;
    color:         #166534;
    font-weight:   600;
}

/* ── Inline alert ─────────────────────────────────────────── */
.ct-alert {
    border-radius: var(--ct-radius-sm);
    padding:       .9rem 1.1rem;
    font-size:     .88rem;
    display:       flex;
    gap:           .75rem;
    align-items:   flex-start;
    margin-bottom: 1rem;
}

.ct-alert.info    { background: #f0f9ff; border: 1px solid #bae6fd; color: #0c4a6e; }
.ct-alert.warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.ct-alert.danger  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ct-alert.success { background: #ecfdf5; border: 1px solid #bbf7d0; color: #166534; }

/* ── Empty state ──────────────────────────────────────────── */
.ct-empty {
    text-align: center;
    padding:    3rem 2rem;
    color:      var(--ct-muted);
}

.ct-empty i  { font-size: 2.75rem; opacity: .3; margin-bottom: .75rem; display: block; }
.ct-empty h5 { font-size: 1rem; color: var(--ct-hint); margin-bottom: .35rem; }
.ct-empty p  { font-size: .85rem; margin-bottom: 1.1rem; }

/* ── Detail row (label + value) ───────────────────────────── */
.ct-detail-row {
    display:       flex;
    padding:       .7rem 0;
    border-bottom: 1px solid var(--ct-divider);
    gap:           1rem;
    font-size:     .88rem;
}

.ct-detail-row:last-child { border-bottom: none; }
.ct-detail-label { color: var(--ct-muted); min-width: 140px; flex-shrink: 0; }
.ct-detail-value { color: var(--ct-body); font-weight: 600; }

/* ── Nav tabs override ────────────────────────────────────── */
.ct-tabs .nav-link {
    color:         var(--ct-muted);
    border-radius: var(--ct-radius-sm) var(--ct-radius-sm) 0 0;
    padding:       .55rem 1.1rem;
    font-weight:   600;
    font-size:     .88rem;
}

.ct-tabs .nav-link.active {
    color:            var(--canoa-primary);
    border-bottom-color: transparent;
}

/* ── Plan / pricing card ──────────────────────────────────── */
.ct-plan-card {
    background:    var(--ct-bg);
    border-radius: var(--ct-radius);
    border:        1px solid var(--ct-border);
    box-shadow:    var(--ct-shadow);
    overflow:      hidden;
    transition:    transform .2s, box-shadow .2s;
    display:       flex;
    flex-direction: column;
    height:        100%;
}

.ct-plan-card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .1);
}

.ct-plan-card.featured {
    border-color: var(--canoa-primary);
    box-shadow:   0 4px 20px rgba(0, 119, 190, .18);
}

.ct-plan-card.featured .ct-card-stripe {
    height: 8px;
}

.ct-plan-price {
    font-size:   2.5rem;
    font-weight: 800;
    color:       var(--ct-text);
    line-height: 1;
}

.ct-plan-period {
    font-size: .82rem;
    color:     var(--ct-muted);
}

/* ── Quick action link wrapper ────────────────────────────── */
a.ct-action-link {
    text-decoration: none;
    color:           inherit;
    display:         block;
}

a.ct-action-link:hover { text-decoration: none; }

/* ═══════════════════════════════════════════════════════════
   Sidebar — Deep Ocean Redesign
   ═══════════════════════════════════════════════════════════ */

/* ── Shell ────────────────────────────────────────────────── */
.sidebar {
    background: linear-gradient(180deg, #0d1f35 0%, #091524 60%, #07101c 100%) !important;
    border-right: none !important;
    box-shadow:   4px 0 40px rgba(0,0,0,.35) !important;
}

/* ── Header ───────────────────────────────────────────────── */
.sidebar .sidebar-header {
    background:   rgba(255,255,255,.025) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.sidebar .logo-title {
    color:          #fff !important;
    font-weight:    700 !important;
    font-size:      .97rem !important;
    letter-spacing: -.01em !important;
}

.sidebar .navbar-brand svg {
    color: var(--canoa-secondary) !important;
}

/* Navbar (top bar) sidebar-toggle color */
.iq-navbar .sidebar-toggle       { color: var(--canoa-primary) !important; }
.iq-navbar .sidebar-toggle i      { color: var(--canoa-primary) !important; }

/* Sidebar collapse toggle pill — keep fully inside the sidebar */
.sidebar .sidebar-toggle {
    right:         10px !important;   /* was -12px (half outside); now fully inside */
    background:    rgba(255,255,255,.1) !important;
    box-shadow:    none !important;
    border-radius: 8px !important;
    transition:    background .18s !important;
}
.sidebar .sidebar-toggle:hover {
    background: rgba(255,255,255,.2) !important;
    box-shadow: none !important;
}

/* ── Section group labels ─────────────────────────────────── */
.sidebar .nav-item.static-item .nav-link.disabled {
    padding-top:    1.1rem !important;
    padding-bottom: .2rem !important;
}
.sidebar .nav-item.static-item .default-icon {
    font-size:      .62rem !important;
    font-weight:    700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color:          rgba(255,255,255,.28) !important;
}

/* ── Nav links ────────────────────────────────────────────── */
.sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled) {
    color:        rgba(255,255,255,.6) !important;
    border-radius: 10px !important;
    margin:       2px 10px !important;
    padding:      .58rem .85rem !important;
    transition:   background .18s, color .18s, box-shadow .18s !important;
    display:      flex !important;
    align-items:  center !important;
    gap:          .7rem !important;
}

.sidebar-default .navbar-nav .nav-item .nav-link .icon {
    display:      flex !important;
    align-items:  center !important;
    line-height:  1 !important;
    flex-shrink:  0 !important;
    opacity:      .65;
    transition:   opacity .18s !important;
}

/* Font Awesome icons used as sidebar nav icons */
.sidebar-default .navbar-nav .nav-item .nav-link .icon.fas,
.sidebar-default .navbar-nav .nav-item .nav-link .icon.far,
.sidebar-default .navbar-nav .nav-item .nav-link .icon.fab {
    font-size:       1rem !important;
    width:           1.25rem !important;
    justify-content: center !important;
}

.sidebar-default .navbar-nav .nav-item .nav-link .item-name {
    font-size:   .87rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color:       inherit !important;
    flex:        1 !important;
}

/* Badge (pending count) */
.sidebar-default .navbar-nav .nav-item .nav-link .badge {
    margin-left:   auto !important;
    font-size:     .65rem !important;
    padding:       .18rem .45rem !important;
    border-radius: 20px !important;
    background:    rgba(255,255,255,.15) !important;
    color:         #fff !important;
}

/* Hover */
.sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled):hover:not(.active):not([aria-expanded=true]) {
    background-color: rgba(255,255,255,.08) !important;
    color:            #fff !important;
}
.sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled):hover .icon {
    opacity: 1 !important;
}

/* Active / expanded */
.sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled).active,
.sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled)[aria-expanded=true] {
    background: linear-gradient(90deg, var(--canoa-primary), var(--canoa-secondary)) !important;
    color:      #fff !important;
    box-shadow: 0 4px 18px rgba(0,119,190,.38) !important;
}
.sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled).active .icon,
.sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled)[aria-expanded=true] .icon {
    opacity: 1 !important;
}
.sidebar-default .navbar-nav .nav-item .nav-link:not(.disabled).active .badge {
    background: rgba(255,255,255,.25) !important;
}

/* ── Footer ───────────────────────────────────────────────── */
.sidebar .sidebar-footer {
    background:   rgba(0,0,0,.2) !important;
    border-color: rgba(255,255,255,.07) !important;
    padding:      .85rem 1rem !important;
}

.sidebar .sidebar-footer .ct-sb-name {
    color:       #fff;
    font-weight: 600;
    font-size:   .86rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.sidebar .sidebar-footer .ct-sb-role {
    display:       inline-block;
    font-size:     .68rem;
    font-weight:   600;
    letter-spacing: .03em;
    padding:       .1rem .55rem;
    border-radius: 20px;
    background:    rgba(255,255,255,.1);
    color:         rgba(255,255,255,.65);
    margin-top:    .2rem;
    white-space:   nowrap;
}

.sidebar .sidebar-footer .avatar {
    border:     2px solid rgba(255,255,255,.2) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}

.sidebar .sidebar-footer .btn-outline-secondary {
    border-color: rgba(255,255,255,.15) !important;
    color:        rgba(255,255,255,.5) !important;
    background:   transparent !important;
    border-radius: 8px !important;
    transition:   background .18s, color .18s, border-color .18s !important;
}
.sidebar .sidebar-footer .btn-outline-secondary:hover {
    background:   rgba(239,68,68,.18) !important;
    border-color: rgba(239,68,68,.4) !important;
    color:        #f87171 !important;
}

/* ── Mobile Bottom Navigation ─────────────────────────────── */
/*
 * On mobile (< 992px):
 *  - The sidebar is hidden; the bottom nav replaces it.
 *  - The bottom nav is fixed to the bottom of the viewport.
 *  - Safe-area inset ensures it doesn't overlap the home indicator on iOS.
 */

.ct-bottom-nav {
    display:          none; /* hidden on desktop; shown via media query below */
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    height:           66px;
    background:       rgba(255, 255, 255, .92);
    backdrop-filter:  blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top:       1px solid rgba(0,0,0,.07);
    box-shadow:       0 -1px 0 rgba(0,0,0,.04), 0 -8px 32px rgba(0,0,0,.08);
    z-index:          1040;
    padding-bottom:   env(safe-area-inset-bottom, 0);
}

.ct-bottom-nav__item {
    flex:             1;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    justify-content:  center;
    gap:              .18rem;
    padding:          .5rem .25rem .35rem;
    color:            var(--ct-hint);
    text-decoration:  none !important;
    font-size:        .6rem;
    font-weight:      500;
    letter-spacing:   -.01em;
    transition:       color .18s;
    -webkit-tap-highlight-color: transparent;
    outline:          none;
    position:         relative;
}

/* Icon wrapper — pill capsule on active */
.ct-bottom-nav__item i {
    font-size:     1.2rem;
    line-height:   1;
    width:         40px;
    height:        28px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border-radius: 14px;
    transition:    background .18s, color .18s, transform .18s;
}

.ct-bottom-nav__label {
    font-size:   .62rem;
    line-height: 1;
}

/* Remove old ::before dot */
.ct-bottom-nav__item.active::before {
    display: none;
}

.ct-bottom-nav__item.active i {
    background: rgba(0, 119, 190, .13);
    color:      var(--canoa-primary);
    transform:  translateY(-1px);
}

.ct-bottom-nav__item.active,
.ct-bottom-nav__item.active .ct-bottom-nav__label {
    color:       var(--canoa-primary);
    font-weight: 600;
}

.ct-bottom-nav__item:hover i {
    background: rgba(0, 119, 190, .07);
}

.ct-bottom-nav__item:hover {
    color:           var(--canoa-primary);
    text-decoration: none !important;
}

/* "Mais" button — <button> element, needs reset */
.ct-bottom-nav__item[type="button"] {
    background: none;
    border:     none;
    cursor:     pointer;
    width:      100%;
    padding:    .5rem 0 .35rem;
}

/* ── Slide-up "Mais" sheet ────────────────────────────────── */

.ct-bottom-nav__backdrop {
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, .4);
    z-index:    1038;
}

.ct-bottom-nav__sheet {
    position:      fixed;
    bottom:        66px;
    left:          0;
    right:         0;
    max-height:    calc(80vh - 66px);
    overflow-y:    auto;
    background:    var(--ct-bg);
    border-radius: 24px 24px 0 0;
    box-shadow:    0 -4px 40px rgba(0, 0, 0, .15);
    z-index:       1039;
    padding:       .5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0));
}

.ct-bottom-nav__sheet-handle {
    width:         36px;
    height:        4px;
    border-radius: 99px;
    background:    var(--ct-border);
    margin:        .6rem auto .85rem;
}

.ct-bottom-nav__sheet-user {
    display:     flex;
    align-items: center;
    gap:         .85rem;
    padding:     .25rem 0 .9rem;
}

.ct-bottom-nav__sheet-avatar {
    width:         46px;
    height:        46px;
    border-radius: 50%;
    flex-shrink:   0;
    box-shadow:    0 2px 8px rgba(0,0,0,.12);
}

.ct-bottom-nav__sheet-name {
    font-weight: 700;
    font-size:   .97rem;
    color:       var(--ct-text);
    line-height: 1.2;
}

.ct-bottom-nav__sheet-role {
    font-size:  .76rem;
    color:      var(--ct-muted);
    margin-top: .15rem;
}

.ct-bottom-nav__sheet-divider {
    height:     1px;
    background: var(--ct-divider);
    margin:     .3rem 0 .5rem;
}

.ct-bottom-nav__sheet-section-label {
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--ct-muted);
    padding:        .35rem .1rem .1rem;
}

/* Sheet menu items */
.ct-bottom-nav__sheet-item {
    display:     flex;
    align-items: center;
    gap:         .9rem;
    width:       100%;
    padding:     .72rem .1rem;
    border:      none;
    background:  none;
    cursor:      pointer;
    font-size:   .93rem;
    font-weight: 500;
    color:       var(--ct-body);
    text-decoration: none !important;
    border-bottom:   1px solid var(--ct-divider);
    -webkit-tap-highlight-color: transparent;
    transition:  color .15s;
}

.ct-bottom-nav__sheet-item:last-child {
    border-bottom: none;
}

/* Icon bubble on sheet items */
.ct-bottom-nav__sheet-item i {
    width:         36px;
    height:        36px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border-radius: 10px;
    background:    var(--ct-subtle);
    color:         var(--ct-muted);
    font-size:     .9rem;
    flex-shrink:   0;
    transition:    background .15s, color .15s;
}

.ct-bottom-nav__sheet-item:hover {
    color:           var(--canoa-primary);
    text-decoration: none !important;
}

.ct-bottom-nav__sheet-item:hover i {
    background: rgba(0, 119, 190, .1);
    color:      var(--canoa-primary);
}

.ct-bottom-nav__sheet-item--danger {
    color: #ef4444;
}
.ct-bottom-nav__sheet-item--danger i {
    background: #fef2f2;
    color:      #ef4444;
}

.ct-bottom-nav__sheet-item--danger:hover,
.ct-bottom-nav__sheet-item--danger:hover i {
    color:      #b91c1c;
    background: #fee2e2;
}

/* Alpine transition helpers */
.ct-fade-enter    { transition: opacity .2s ease; }
.ct-fade-start    { opacity: 0; }
.ct-fade-end      { opacity: 1; }
.ct-sheet-enter   { transition: transform .28s cubic-bezier(.32,.72,0,1); }
.ct-sheet-start   { transform: translateY(100%); }
.ct-sheet-end     { transform: translateY(0); }

/* Public bottom nav — cart badge on icon */
.ct-bottom-nav__public-badge {
    position:      absolute;
    top:           2px;
    right:         calc(50% - 22px);
    min-width:     16px;
    height:        16px;
    padding:       0 4px;
    border-radius: 99px;
    background:    #ef4444;
    color:         #fff;
    font-size:     .6rem;
    font-weight:   700;
    line-height:   16px;
    text-align:    center;
    box-shadow:    0 1px 4px rgba(0,0,0,.2);
}

/* On public pages, ensure footer doesn't overlap bottom nav on mobile */
@media (max-width: 991.98px) {
    .public-footer {
        padding-bottom: calc(2rem + 66px + env(safe-area-inset-bottom, 0)) !important;
    }
}

@media (max-width: 991.98px) {

    /* Show the bottom nav */
    .ct-bottom-nav {
        display: flex;
    }

    /* Hide the sidebar — bottom nav is the primary navigation on mobile */
    .sidebar {
        display: none !important;
    }

    /* Full-width content (no left margin from sidebar) */
    .main-content {
        margin-left:    0 !important;
        padding-bottom: 70px !important;
    }

    /* Hide the sidebar-toggle button inside the top navbar on mobile
       since the sidebar is not available */
    .iq-navbar .sidebar-toggle {
        display: none !important;
    }
}

/* Notification dropdown header background */
.sub-drop .card-header.bg-primary,
.iq-navbar .card-header.bg-primary,
.dropdown-menu .card-header.bg-primary {
    background-color: var(--canoa-primary) !important;
    border-color:     var(--canoa-primary) !important;
}

/* ── Mobile responsive overrides ─────────────────────────── */
.ct-detail-value {
    overflow-wrap: break-word;
    word-break:    break-word;
    min-width:     0;
}

.ct-page-title {
    overflow-wrap: break-word;
    word-break:    break-word;
}

@media (max-width: 480px) {
    .ct-detail-row {
        flex-direction: column;
        gap:            .25rem;
    }

    .ct-detail-label {
        min-width: unset;
        font-size: .78rem;
    }

    .ct-section-head {
        flex-wrap: wrap;
        gap:       .5rem;
    }

    .ct-page-header {
        gap: .5rem;
    }

    .ct-stat {
        padding:    .75rem;
        gap:        .6rem;
        flex-wrap:  wrap;
    }

    .ct-stat-icon {
        width:  40px;
        height: 40px;
        font-size: 1rem;
    }

    .ct-stat-value {
        font-size:  1.1rem;
        white-space: normal;
        word-break:  break-word;
    }

    .ct-stat-label {
        font-size: .7rem;
    }
}

/* ============================================================
   Dashboard UX Redesign — Onboarding & App States
   ============================================================ */

/* ── Page entrance stagger animations ─────────────────────── */
@keyframes ct-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ct-enter   { animation: ct-fade-up .38s ease both; }
.ct-enter-1 { animation-delay: .04s; }
.ct-enter-2 { animation-delay: .09s; }
.ct-enter-3 { animation-delay: .14s; }
.ct-enter-4 { animation-delay: .19s; }
.ct-enter-5 { animation-delay: .24s; }
.ct-enter-6 { animation-delay: .29s; }

/* ── Onboarding hero (user has no plan) ───────────────────── */
@keyframes ct-rock {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50%       { transform: rotate(6deg)  translateY(-6px); }
}

.ct-onboard-hero {
    position:      relative;
    border-radius: var(--ct-radius);
    background:    linear-gradient(150deg, var(--canoa-primary) 0%, var(--canoa-secondary) 55%, #00d4ff 100%);
    color:         #fff;
    padding:       3rem 2rem 3.5rem;
    text-align:    center;
    overflow:      hidden;
    margin-bottom: 2rem;
    box-shadow:    0 8px 32px rgba(0, 119, 190, .35);
}

/* Decorative circle blobs */
.ct-onboard-hero::before,
.ct-onboard-hero::after {
    content:       '';
    position:      absolute;
    border-radius: 50%;
    background:    rgba(255, 255, 255, .07);
    pointer-events: none;
}
.ct-onboard-hero::before {
    width:  320px; height: 320px;
    top: -80px; right: -60px;
}
.ct-onboard-hero::after {
    width:  200px; height: 200px;
    bottom: -60px; left: -40px;
}

.ct-onboard-wave-icon {
    font-size:    3.25rem;
    display:      inline-block;
    margin-bottom: .75rem;
    animation:    ct-rock 4s ease-in-out infinite;
    position:     relative;
    z-index:      1;
}

.ct-onboard-hero h1 {
    font-size:     clamp(1.6rem, 4vw, 2.4rem);
    font-weight:   800;
    margin-bottom: .5rem;
    position:      relative;
    z-index:       1;
    line-height:   1.15;
}

.ct-onboard-hero p {
    font-size:    1.05rem;
    opacity:      .9;
    margin:       0 auto;
    max-width:    480px;
    position:     relative;
    z-index:      1;
    line-height:  1.55;
}

.ct-onboard-steps {
    display:         flex;
    justify-content: center;
    gap:             1.5rem;
    margin-top:      1.75rem;
    flex-wrap:       wrap;
    position:        relative;
    z-index:         1;
}

.ct-onboard-step {
    background:    rgba(255, 255, 255, .18);
    border:        1px solid rgba(255, 255, 255, .25);
    border-radius: var(--ct-radius-sm);
    padding:       .6rem 1.1rem;
    font-size:     .82rem;
    font-weight:   600;
    display:       flex;
    align-items:   center;
    gap:           .5rem;
    backdrop-filter: blur(6px);
}

/* ── Next class hero (user has an active plan) ────────────── */
.ct-next-hero {
    position:      relative;
    border-radius: var(--ct-radius);
    overflow:      hidden;
    background:    linear-gradient(135deg, var(--canoa-primary) 0%, var(--canoa-secondary) 60%, #00c9ff 100%);
    color:         #fff;
    padding:       1.75rem 2rem 2rem;
    box-shadow:    0 4px 24px rgba(0, 119, 190, .28);
    margin-bottom: 1.25rem;
}

/* Ambient glow orb top-right */
.ct-next-hero::before {
    content:       '';
    position:      absolute;
    width:         260px; height: 260px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, .08);
    top: -70px; right: -50px;
    pointer-events: none;
}

.ct-next-status-label {
    display:      inline-flex;
    align-items:  center;
    gap:          .35rem;
    background:   rgba(255, 255, 255, .2);
    border:       1px solid rgba(255, 255, 255, .3);
    border-radius: 20px;
    padding:      .25rem .75rem;
    font-size:    .73rem;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .65rem;
}

.ct-next-modality {
    font-size:    clamp(1.5rem, 3vw, 2.1rem);
    font-weight:  800;
    line-height:  1.1;
    margin-bottom: .55rem;
}

.ct-next-meta {
    font-size:  .9rem;
    opacity:    .88;
    display:    flex;
    flex-wrap:  wrap;
    gap:        .3rem .75rem;
    align-items: center;
    margin-bottom: .85rem;
}

.ct-next-meta .ct-meta-dot {
    opacity: .5;
}

.ct-next-countdown {
    display:       inline-flex;
    align-items:   center;
    gap:           .35rem;
    background:    rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    border:        1px solid rgba(255, 255, 255, .2);
    border-radius: 20px;
    padding:       .35rem .85rem;
    font-size:     .8rem;
    font-weight:   600;
}

.ct-next-cta {
    display:       inline-flex;
    align-items:   center;
    gap:           .4rem;
    background:    rgba(255, 255, 255, .22);
    border:        1px solid rgba(255, 255, 255, .35);
    border-radius: var(--ct-radius-sm);
    color:         #fff !important;
    padding:       .55rem 1.2rem;
    font-size:     .88rem;
    font-weight:   700;
    text-decoration: none !important;
    transition:    background .15s, transform .1s;
    backdrop-filter: blur(6px);
    margin-top:    .85rem;
}

.ct-next-cta:hover {
    background: rgba(255, 255, 255, .32);
    transform:  translateY(-1px);
}

/* Balance chip — top-right corner of next-hero */
.ct-hero-balance {
    position:    absolute;
    top:         1.1rem;
    right:       1.25rem;
    display:     inline-flex;
    align-items: center;
    gap:         .35rem;
    background:  rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    border:      1px solid rgba(255, 255, 255, .28);
    border-radius: 20px;
    padding:     .3rem .75rem;
    font-size:   .82rem;
    font-weight: 700;
    color:       #fff;
    white-space: nowrap;
    line-height: 1;
}

.ct-hero-balance .ct-balance-count {
    font-size:   1rem;
    font-weight: 800;
}

.ct-hero-balance .ct-balance-label {
    font-size: .72rem;
    opacity:   .85;
}

/* ── Quick action strip ───────────────────────────────────── */
.ct-quick-strip {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   .75rem;
    margin-bottom:         1.25rem;
}

.ct-quick-tile {
    background:     var(--ct-bg);
    border:         1px solid var(--ct-border);
    border-radius:  var(--ct-radius-sm);
    padding:        1.1rem .5rem .9rem;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .45rem;
    text-decoration: none !important;
    transition:     transform .15s, box-shadow .15s;
    box-shadow:     var(--ct-shadow);
    cursor:         pointer;
}

.ct-quick-tile:hover {
    transform:  translateY(-2px);
    box-shadow: var(--ct-shadow-hover);
}

.ct-quick-tile .ct-tile-icon {
    width:         44px;
    height:        44px;
    border-radius: 12px;
    display:       grid;
    place-items:   center;
    font-size:     1.15rem;
    flex-shrink:   0;
}

.ct-quick-tile .ct-tile-icon.primary { background: rgba(0, 119, 190, .1); color: var(--canoa-primary); }
.ct-quick-tile .ct-tile-icon.success { background: rgba(34, 197, 94, .12); color: var(--ct-success); }
.ct-quick-tile .ct-tile-icon.info    { background: rgba(6, 182, 212, .12); color: var(--ct-info); }
.ct-quick-tile .ct-tile-icon.warning { background: rgba(245, 158, 11, .12); color: var(--ct-warning); }

.ct-quick-tile .ct-tile-name {
    font-size:   .8rem;
    font-weight: 700;
    color:       var(--ct-text);
    text-align:  center;
    line-height: 1.2;
}

.ct-quick-tile .ct-tile-sub {
    font-size: .68rem;
    color:     var(--ct-muted);
    text-align: center;
}

@media (max-width: 480px) {
    .ct-quick-strip {
        grid-template-columns: repeat(2, 1fr);
        gap:                   .6rem;
    }

    .ct-next-hero { padding: 1.25rem 1.25rem 1.5rem; }

    .ct-hero-balance {
        top:   .85rem;
        right: .85rem;
        padding: .25rem .6rem;
        font-size: .75rem;
    }

    .ct-hero-balance .ct-balance-count { font-size: .88rem; }

    .ct-onboard-hero { padding: 2rem 1.25rem 2.5rem; }
}

/* ── Plan showcase heading (onboarding) ───────────────────── */
.ct-plan-showcase-heading {
    display:      flex;
    align-items:  center;
    gap:          .75rem;
    margin-bottom: 1.25rem;
}

.ct-plan-showcase-heading h5 {
    margin:      0;
    font-size:   1.05rem;
    font-weight: 700;
    color:       var(--ct-text);
}

.ct-plan-showcase-heading .ct-showcase-line {
    flex:       1;
    height:     2px;
    background: var(--ct-border);
    border-radius: 2px;
}

/* ============================================================
   Payment List — mobile-first card rows
   ============================================================ */

/* Pending card stripe + header */
.ct-pay-pending-card {
    border-color: #fde68a;
    margin-bottom: 1.25rem;
}

.ct-pay-pending-card .ct-card-stripe {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.ct-pay-pending-header {
    display:       flex;
    align-items:   center;
    gap:           .65rem;
    padding:       .85rem 1.25rem;
    border-bottom: 1px solid var(--ct-divider);
    font-size:     .92rem;
}

/* Tabs header row */
.ct-pay-tabs-header {
    padding:       0 1.25rem;
    border-bottom: 1px solid var(--ct-divider);
}

/* Payment list container */
.ct-pay-list {
    padding: 0 1.25rem;
}

/* Individual payment row — entire row is a link on mobile */
.ct-pay-row {
    display:         flex;
    align-items:     center;
    gap:             .85rem;
    padding:         .95rem 0;
    border-bottom:   1px solid var(--ct-divider);
    text-decoration: none !important;
    color:           inherit;
    -webkit-tap-highlight-color: transparent;
    transition:      background .1s;
}

.ct-pay-row:last-of-type {
    border-bottom: none;
}

.ct-pay-row:hover {
    color: inherit;
    text-decoration: none !important;
}

/* Status icon circle */
.ct-pay-icon-wrap {
    width:         44px;
    height:        44px;
    border-radius: 13px;
    display:       grid;
    place-items:   center;
    font-size:     .95rem;
    flex-shrink:   0;
}

.ct-pay-icon-wrap.success { background: #ecfdf5; color: #16a34a; }
.ct-pay-icon-wrap.pending { background: #fffbeb; color: #d97706; }
.ct-pay-icon-wrap.danger  { background: #fef2f2; color: #dc2626; }

/* Middle text block */
.ct-pay-info {
    flex:      1;
    min-width: 0;
}

.ct-pay-name {
    font-size:     .9rem;
    font-weight:   600;
    color:         var(--ct-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.ct-pay-meta {
    font-size:  .75rem;
    color:      var(--ct-muted);
    margin-top: .15rem;
}

/* Right amount + chevron */
.ct-pay-amount-col {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            .2rem;
    flex-shrink:    0;
}

.ct-pay-amount {
    font-size:   1rem;
    font-weight: 700;
    white-space: nowrap;
}

.ct-pay-amount.success { color: var(--ct-success); }
.ct-pay-amount.pending { color: #d97706; }
.ct-pay-amount.danger  { color: var(--ct-danger); }

.ct-pay-chevron {
    font-size: .7rem;
    color:     var(--ct-hint);
}

.ct-pay-chevron.danger {
    color: var(--ct-danger);
    opacity: .6;
}

/* Footer "Ver histórico" row */
.ct-pay-footer {
    padding:    .85rem 1.25rem;
    border-top: 1px solid var(--ct-divider);
    text-align: center;
}

/* ── Mobile: tighter padding ─────────────────────────────── */
@media (max-width: 480px) {
    .ct-pay-pending-header,
    .ct-pay-list,
    .ct-pay-tabs-header,
    .ct-pay-footer {
        padding-left:  1rem;
        padding-right: 1rem;
    }

    .ct-pay-icon-wrap {
        width:  38px;
        height: 38px;
        font-size: .85rem;
    }

    .ct-pay-name    { font-size: .85rem; }
    .ct-pay-amount  { font-size: .92rem; }
}

/* ── Segmented tab control ────────────────────────────────── */

/* Outer wrapper — provides horizontal padding */
.ct-pay-seg-wrap {
    padding:       1rem 1.25rem .75rem;
}

/* Track — the pill container */
.ct-pay-seg {
    position:      relative;
    display:       flex;
    background:    var(--ct-subtle);
    border:        1px solid var(--ct-border);
    border-radius: 12px;
    padding:       4px;
    gap:           2px;
}

/* Animated background pill */
.ct-pay-seg-pill {
    position:      absolute;
    top:           4px;
    height:        calc(100% - 8px);
    border-radius: 9px;
    background:    var(--ct-bg);
    box-shadow:    0 1px 4px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);
    transition:    left .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    z-index:       0;
}

/* Each tab button */
.ct-pay-seg-btn {
    position:        relative;
    z-index:         1;
    flex:            1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             .45rem;
    padding:         .55rem .75rem;
    border:          none;
    background:      transparent;
    border-radius:   9px;
    font-size:       .875rem;
    font-weight:     600;
    color:           var(--ct-muted);
    cursor:          pointer;
    transition:      color .18s;
    white-space:     nowrap;
    -webkit-tap-highlight-color: transparent;
    outline:         none;
}

.ct-pay-seg-btn.is-active {
    color: var(--ct-text);
}

/* Coloured dot icon */
.ct-pay-seg-icon {
    width:         22px;
    height:        22px;
    border-radius: 6px;
    display:       grid;
    place-items:   center;
    font-size:     .7rem;
    flex-shrink:   0;
    transition:    background .18s, color .18s;
}

.ct-pay-seg-btn .ct-pay-seg-icon.success {
    background: #ecfdf5;
    color:      #16a34a;
}
.ct-pay-seg-btn .ct-pay-seg-icon.danger {
    background: #fef2f2;
    color:      #dc2626;
}

/* Inactive: muted icon */
.ct-pay-seg-btn:not(.is-active) .ct-pay-seg-icon {
    background: transparent;
    color:      var(--ct-hint);
}

/* Count bubble */
.ct-pay-seg-count {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     18px;
    height:        18px;
    padding:       0 5px;
    border-radius: 99px;
    font-size:     .68rem;
    font-weight:   700;
    line-height:   1;
}

.ct-pay-seg-count.success {
    background: #dcfce7;
    color:      #15803d;
}
.ct-pay-seg-count.danger {
    background: #fee2e2;
    color:      #b91c1c;
}

.ct-pay-seg-btn:not(.is-active) .ct-pay-seg-count {
    background: var(--ct-border);
    color:      var(--ct-muted);
}

/* ── Remove old unused tab header class (kept for compat) ─── */
.ct-pay-tabs-header { display: none; }

@media (max-width: 480px) {
    .ct-pay-seg-wrap { padding: .75rem 1rem .5rem; }
    .ct-pay-seg-btn  { font-size: .82rem; padding: .5rem .5rem; }
    .ct-pay-seg-icon { display: none; }
}

/* ============================================================
   Receipt / Show view
   ============================================================ */

/* Back link */
.ct-receipt-back {
    display:         inline-flex;
    align-items:     center;
    gap:             .35rem;
    font-size:       .85rem;
    font-weight:     600;
    color:           var(--ct-muted);
    text-decoration: none !important;
    margin-bottom:   1rem;
    padding:         .3rem 0;
    -webkit-tap-highlight-color: transparent;
}
.ct-receipt-back:hover { color: var(--canoa-primary); }

/* Status hero */
.ct-receipt-hero {
    position:      relative;
    border-radius: var(--ct-radius);
    color:         #fff;
    text-align:    center;
    padding:       2.25rem 1.5rem 2rem;
    margin-bottom: 1.25rem;
    overflow:      hidden;
    box-shadow:    0 6px 28px rgba(0,0,0,.15);
}

.ct-receipt-hero__blob {
    position:      absolute;
    border-radius: 50%;
    background:    rgba(255,255,255,.08);
    pointer-events: none;
}
.ct-receipt-hero__blob--tl { width:200px; height:200px; top:-70px; left:-50px; }
.ct-receipt-hero__blob--br { width:160px; height:160px; bottom:-55px; right:-40px; }

.ct-receipt-hero__icon {
    font-size:     2rem;
    margin-bottom: .5rem;
    position:      relative;
    z-index:       1;
    opacity:       .9;
}

.ct-receipt-hero__amount {
    font-size:     2.4rem;
    font-weight:   800;
    line-height:   1;
    margin-bottom: .4rem;
    position:      relative;
    z-index:       1;
    letter-spacing: -.02em;
}

.ct-receipt-hero__plan {
    font-size:   .95rem;
    opacity:     .85;
    margin-bottom: .75rem;
    position:    relative;
    z-index:     1;
}

.ct-receipt-hero__badge {
    display:       inline-flex;
    align-items:   center;
    background:    rgba(255,255,255,.22);
    border:        1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(6px);
    border-radius: 20px;
    padding:       .3rem .9rem;
    font-size:     .78rem;
    font-weight:   700;
    letter-spacing: .05em;
    text-transform: uppercase;
    position:      relative;
    z-index:       1;
}

/* Reference number */
.ct-receipt-ref {
    font-size:    .72rem;
    font-weight:  600;
    color:        var(--ct-hint);
    font-family:  monospace;
    letter-spacing: .04em;
}

/* Proof image block */
.ct-receipt-proof {
    padding:    1rem 1.25rem 1.25rem;
    text-align: center;
}

.ct-receipt-proof__thumb {
    max-width:    100%;
    max-height:   260px;
    border-radius: var(--ct-radius-sm);
    border:       1px solid var(--ct-border);
    cursor:       zoom-in;
    object-fit:   contain;
    transition:   transform .15s;
}
.ct-receipt-proof__thumb:hover { transform: scale(1.01); }

.ct-receipt-proof__hint {
    font-size:  .72rem;
    color:      var(--ct-hint);
    margin-top: .5rem;
    margin-bottom: 0;
}

/* Lightbox */
.ct-lightbox {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.88);
    z-index:    2000;
    display:    flex;
    align-items: center;
    justify-content: center;
    cursor:     zoom-out;
    padding:    1rem;
}

.ct-lightbox__img {
    max-width:    100%;
    max-height:   90vh;
    border-radius: var(--ct-radius-sm);
    box-shadow:   0 8px 40px rgba(0,0,0,.5);
}

.ct-lightbox__close {
    position:   absolute;
    top:        1rem;
    right:      1rem;
    background: rgba(255,255,255,.15);
    border:     1px solid rgba(255,255,255,.2);
    color:      #fff;
    width:      40px;
    height:     40px;
    border-radius: 50%;
    display:    grid;
    place-items: center;
    font-size:  1rem;
    cursor:     pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Timeline */
.ct-timeline {
    padding:    .75rem 1.25rem 1.25rem;
    display:    flex;
    flex-direction: column;
    gap:        0;
}

.ct-timeline-item {
    display:    flex;
    gap:        1rem;
    position:   relative;
    padding-bottom: 1.25rem;
}

/* Vertical connecting line */
.ct-timeline-item:not(:last-child)::after {
    content:    '';
    position:   absolute;
    left:       19px;
    top:        40px;
    bottom:     0;
    width:      2px;
    background: var(--ct-divider);
}

.ct-timeline-dot {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    display:       grid;
    place-items:   center;
    flex-shrink:   0;
    font-size:     .8rem;
    border:        2px solid var(--ct-border);
    background:    var(--ct-bg);
    color:         var(--ct-hint);
    position:      relative;
    z-index:       1;
}

.ct-timeline-item.done .ct-timeline-dot {
    background: var(--ct-subtle);
    border-color: var(--ct-border);
    color:       var(--ct-muted);
}

.ct-timeline-item.done.success .ct-timeline-dot {
    background:   #ecfdf5;
    border-color: #bbf7d0;
    color:        #16a34a;
}

.ct-timeline-item.done.danger .ct-timeline-dot {
    background:   #fef2f2;
    border-color: #fecaca;
    color:        #dc2626;
}

.ct-timeline-item.pending .ct-timeline-dot {
    background:   #fffbeb;
    border-color: #fde68a;
    color:        #d97706;
    animation:    pulse 2s ease-in-out infinite;
}

.ct-timeline-body { padding-top: .5rem; }

.ct-timeline-title {
    font-size:   .88rem;
    font-weight: 600;
    color:       var(--ct-text);
}

.ct-timeline-date {
    font-size:  .75rem;
    color:      var(--ct-muted);
    margin-top: .15rem;
}

/* ct-btn-success */
.ct-btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color:      #fff !important;
}

@media (max-width: 480px) {
    .ct-receipt-hero__amount { font-size: 2rem; }
    .ct-receipt-proof { padding: .75rem 1rem 1rem; }
    .ct-timeline { padding: .5rem 1rem 1rem; }
}

/* ============================================================
   Plans page — Active subscription banner
   ============================================================ */

.ct-sub-banner {
    position:      relative;
    border-radius: var(--ct-radius);
    background:    linear-gradient(135deg, var(--canoa-primary) 0%, var(--canoa-secondary) 100%);
    color:         #fff;
    overflow:      hidden;
    box-shadow:    0 4px 20px rgba(0, 119, 190, .28);
}

/* Decorative circle blob top-right */
.ct-sub-banner__glow {
    position:      absolute;
    width:         220px;
    height:        220px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, .07);
    top:           -70px;
    right:         -50px;
    pointer-events: none;
}

.ct-sub-banner__content {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.35rem 1.5rem;
    position:        relative;
    z-index:         1;
}

.ct-sub-banner__left {
    flex:      1;
    min-width: 0;
}

.ct-sub-banner__label {
    font-size:      .7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity:        .82;
    margin-bottom:  .3rem;
}

.ct-sub-banner__name {
    font-size:     1.15rem;
    font-weight:   800;
    line-height:   1.2;
    margin-bottom: .3rem;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

.ct-sub-banner__expiry {
    font-size: .78rem;
    opacity:   .82;
}

.ct-sub-banner__counter {
    flex-shrink:     0;
    text-align:      center;
    background:      rgba(255, 255, 255, .18);
    border:          1px solid rgba(255, 255, 255, .28);
    border-radius:   var(--ct-radius-sm);
    padding:         .65rem 1.1rem;
    min-width:       76px;
    backdrop-filter: blur(6px);
    margin-left:     1rem;
}

.ct-sub-banner__count {
    font-size:   2rem;
    font-weight: 800;
    line-height: 1;
}

.ct-sub-banner__count-label {
    font-size:  .68rem;
    opacity:    .8;
    margin-top: .1rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Segmented tab icon colour variants ───────────────────── */
/* Add primary/info/warning to the existing success/danger set */
.ct-pay-seg-btn .ct-pay-seg-icon.primary {
    background: rgba(0, 119, 190, .12);
    color:      var(--canoa-primary);
}
.ct-pay-seg-btn .ct-pay-seg-icon.info {
    background: rgba(6, 182, 212, .12);
    color:      var(--ct-info);
}
.ct-pay-seg-btn .ct-pay-seg-icon.warning {
    background: rgba(245, 158, 11, .12);
    color:      var(--ct-warning);
}

/* ── Plans tab content + scroll ───────────────────────────── */

.ct-plans-tab-content {
    padding: 1.25rem 1.25rem 1.5rem;
}

/* Desktop: regular auto-fill grid */
.ct-plans-scroll {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   1rem;
}

/* Featured plan — gradient badge replaces the stripe */
.ct-plan-featured-badge {
    text-align:     center;
    padding:        .42rem 1rem;
    background:     linear-gradient(90deg, var(--canoa-primary), var(--canoa-secondary));
    color:          #fff;
    font-size:      .7rem;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Stronger border + shadow for featured card */
.ct-plan-card.featured {
    border-color: var(--canoa-primary);
    box-shadow:   0 6px 28px rgba(0, 119, 190, .22);
}

/* Mobile: horizontal snap scroll */
@media (max-width: 767.98px) {
    .ct-plans-tab-content {
        padding: 1rem .75rem 1.25rem;
    }

    .ct-plans-scroll {
        display:                 flex;
        overflow-x:              auto;
        scroll-snap-type:        x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width:         none;
        gap:                     .85rem;
        /* Right padding peeks the next card edge */
        padding-right:           1.5rem;
        padding-bottom:          .5rem;
    }

    .ct-plans-scroll::-webkit-scrollbar {
        display: none;
    }

    .ct-plans-scroll-item {
        flex-shrink:      0;
        width:            82%;
        scroll-snap-align: start;
    }

    .ct-sub-banner__content {
        padding: 1rem 1.25rem;
    }

    .ct-sub-banner__name  { font-size: 1rem; }
    .ct-sub-banner__count { font-size: 1.75rem; }
}

/* ── Bookings list & rows ─────────────────────────────────── */
.ct-booking-list { /* full-width list container inside tab card */ }

.ct-booking-item {
    padding:        1rem 1.25rem;
    border-bottom:  1px solid var(--ct-divider);
    display:        flex;
    flex-direction: column;
    gap:            .75rem;
}

.ct-booking-item:last-child { border-bottom: none; }

.ct-booking-main {
    display:     flex;
    align-items: flex-start;
    gap:         1rem;
    flex:        1;
}

.ct-booking-info {
    flex:      1;
    min-width: 0;
}

.ct-booking-meta {
    display:    flex;
    flex-wrap:  wrap;
    gap:        .3rem .75rem;
    font-size:  .82rem;
    color:      var(--ct-muted);
    margin-top: .25rem;
}

.ct-booking-actions {
    display:        flex;
    flex-direction: column;
    gap:            .5rem;
    padding-top:    .625rem;
    border-top:     1px solid var(--ct-divider);
}

.ct-booking-deadline {
    font-size: .77rem;
    color:     var(--ct-muted);
}

.ct-booking-btns {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    flex-wrap:   wrap;
}

/* Count bubble — primary and info variants */
.ct-pay-seg-count.primary {
    background: rgba(0, 119, 190, .12);
    color:      var(--canoa-primary);
}

.ct-pay-seg-count.info {
    background: rgba(6, 182, 212, .12);
    color:      var(--ct-info);
}

/* ── Booking show — status hero ──────────────────────────── */
.ct-booking-hero-body {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
    padding:     1.25rem 1.5rem;
}

.ct-booking-hero-info { flex: 1; }

.ct-booking-hero-title {
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--ct-text);
    margin:      0 0 .3rem;
    line-height: 1.25;
}

.ct-booking-hero-time {
    font-size:     .88rem;
    color:         var(--ct-muted);
    margin-bottom: .5rem;
}

/* Section label inside detail cards */
.ct-section-label {
    font-size:      .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color:          var(--ct-muted);
    font-weight:    700;
    margin-bottom:  .25rem;
}

/* Thin hr divider between sections inside a card */
.ct-detail-divider {
    border:     none;
    border-top: 1px solid var(--ct-divider);
    margin:     .25rem 1.5rem;
}

@media (max-width: 767.98px) {
    .ct-booking-item      { padding: .875rem 1rem; }
    .ct-booking-hero-body { padding: 1rem 1.25rem; }
    .ct-detail-divider    { margin: .25rem 1.25rem; }
}

/* ===== Profile hero & avatar ===== */
.ct-profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.4);
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.ct-profile-avatar-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 3px solid rgba(255,255,255,.3);
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    color: rgba(255,255,255,.85);
    flex-shrink: 0;
}
.ct-profile-hero {
    border-radius: var(--ct-radius);
    background: linear-gradient(135deg, var(--canoa-primary), var(--canoa-secondary));
    color: #fff;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 119, 190, .25);
    overflow: hidden;
    position: relative;
}
.ct-profile-hero::before {
    content: '';
    position: absolute;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    top: -60px; right: -40px;
    pointer-events: none;
}
.ct-profile-hero__name {
    font-size: 1.25rem;
    font-weight: 800;
    margin: .65rem 0 .2rem;
}
.ct-profile-hero__role {
    font-size: .75rem;
    opacity: .8;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1.25rem;
}

/* ============================================================
   Penalties — secondary icon wrap & amount colour variants
   ============================================================ */
.ct-pay-icon-wrap.secondary { background: #f8fafc; color: #475569; }
.ct-pay-amount.secondary    { color: var(--ct-hint); }

/* == Group-pack extra icon-wrap & amount color variants ===== */
.ct-pay-icon-wrap.orange    { background: #fff7ed; color: #ea580c; }
.ct-pay-icon-wrap.secondary { background: #f1f5f9; color: #64748b; }
.ct-pay-amount.orange       { color: #ea580c; }

/* ============================================================
   Admin — Mobile-Responsive Table Cards
   ============================================================ */

.ct-table-responsive {
    display:         block;
    width:           100%;
    max-width:       100%;
    overflow-x:      auto;
    -webkit-overflow-scrolling: touch;
}

.ct-data-table {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0;
}

.ct-data-table thead th {
    font-size:      .75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--ct-muted);
    padding:        .65rem 1rem;
    border-bottom:  2px solid var(--ct-divider);
    white-space:    nowrap;
    background:     var(--ct-subtle);
}

.ct-data-table tbody td {
    padding:         .85rem 1rem;
    border-bottom:   1px solid var(--ct-divider);
    font-size:       .88rem;
    color:           var(--ct-body);
    vertical-align:  middle;
}

.ct-data-table tbody tr:last-child td { border-bottom: none; }

.ct-data-table tbody tr {
    transition: background .12s;
}

.ct-data-table tbody tr:hover {
    background: var(--ct-subtle);
}

/* Centralized accent border styling for first column cells to guarantee alignment */
.ct-data-table tbody tr td:first-child {
    border-left: 4px solid transparent;
}

.ct-data-table tbody tr.row-type-plan td:first-child {
    border-left: 4px solid var(--canoa-primary);
}

.ct-data-table tbody tr.row-type-walk-in td:first-child {
    border-left: 4px solid #0891b2;
}

@media (max-width: 767.98px) {

    .ct-table-responsive table,
    .ct-table-responsive thead,
    .ct-table-responsive tbody,
    .ct-table-responsive th,
    .ct-table-responsive td,
    .ct-table-responsive tr {
        display: block;
    }

    .ct-table-responsive thead tr {
        display: none;
    }

    .ct-table-responsive tbody tr {
        border:        1px solid var(--ct-border);
        border-radius: var(--ct-radius);
        margin:        .85rem 0;
        padding:       0;
        box-shadow:    0 2px 8px rgba(0,0,0,.07);
        background:    var(--ct-bg);
        overflow:      hidden;
    }

    .ct-table-responsive tbody tr:hover {
        background: var(--ct-bg);
    }

    .ct-table-responsive tbody td {
        display:       flex;
        align-items:   flex-start;
        gap:           .5rem;
        padding:       .42rem .85rem;
        border-bottom: 1px solid var(--ct-divider);
        font-size:     .85rem;
    }

    .ct-table-responsive tbody td:last-child {
        border-bottom: none;
        padding-top:   .6rem;
        padding-bottom: .6rem;
    }

    .ct-table-responsive tbody td::before {
        content:        attr(data-label);
        font-size:      .72rem;
        font-weight:    700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color:          var(--ct-muted);
        min-width:      95px;
        flex-shrink:    0;
        padding-top:    .1rem;
    }

    /* Class title: full-width card header, no label */
    .ct-table-responsive tbody td.ct-td-class-title {
        justify-content: flex-start;
        font-size:       .92rem;
        font-weight:     700;
        color:           var(--ct-text);
        padding:         .65rem .85rem .6rem;
        border-bottom:   2px solid var(--ct-divider);
        border-left:     3px solid var(--canoa-primary);
        background:      var(--ct-subtle);
    }
    .ct-table-responsive tbody td.ct-td-class-title::before {
        display: none;
    }

    .ct-table-responsive tbody td[data-label=""] {
        justify-content: flex-end;
        padding-top: .65rem;
    }
    .ct-table-responsive tbody td[data-label=""]::before {
        display: none;
    }
}

/* ============================================================
   Admin — Collapsible Filter Panel
   ============================================================ */

.ct-filter-panel {
    background:    var(--ct-bg);
    border:        1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    box-shadow:    var(--ct-shadow);
    margin-bottom: 1.25rem;
    overflow:      hidden;
}

.ct-filter-toggle {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         .85rem 1.25rem;
    background:      none;
    border:          none;
    width:           100%;
    cursor:          pointer;
    font-size:       .9rem;
    font-weight:     600;
    color:           var(--ct-text);
    -webkit-tap-highlight-color: transparent;
}

.ct-filter-toggle:hover { background: var(--ct-subtle); }

.ct-filter-toggle .ct-filter-toggle-icon {
    font-size:  .8rem;
    color:      var(--ct-muted);
    transition: transform .2s;
}

.ct-filter-toggle[aria-expanded="true"] .ct-filter-toggle-icon {
    transform: rotate(180deg);
}

.ct-filter-body {
    padding:    1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--ct-divider);
}

@media (min-width: 768px) {
    .ct-filter-toggle { display: none; }
    .ct-filter-body {
        padding:    1.25rem 1.5rem;
        border-top: none;
        display:    block !important;
    }
    .ct-filter-panel {
        padding: 0;
    }
}

/* ============================================================
   Admin — Dashboard Hero
   ============================================================ */

.ct-admin-hero {
    position:      relative;
    border-radius: var(--ct-radius);
    background:    linear-gradient(135deg, var(--canoa-primary) 0%, var(--canoa-secondary) 60%, #00c9ff 100%);
    color:         #fff;
    padding:       1.75rem 2rem;
    margin-bottom: 1.5rem;
    box-shadow:    0 6px 28px rgba(0, 119, 190, .3);
    overflow:      hidden;
}

.ct-admin-hero::before {
    content:        '';
    position:       absolute;
    width:          300px;
    height:         300px;
    border-radius:  50%;
    background:     rgba(255, 255, 255, .07);
    top:            -80px;
    right:          -60px;
    pointer-events: none;
}

.ct-admin-hero::after {
    content:        '';
    position:       absolute;
    width:          160px;
    height:         160px;
    border-radius:  50%;
    background:     rgba(255, 255, 255, .05);
    bottom:         -50px;
    left:           30%;
    pointer-events: none;
}

.ct-admin-hero-title {
    font-size:   clamp(1.2rem, 3vw, 1.7rem);
    font-weight: 800;
    margin:      0 0 .25rem;
    position:    relative;
    z-index:     1;
}

.ct-admin-hero-sub {
    font-size: .9rem;
    opacity:   .88;
    margin:    0;
    position:  relative;
    z-index:   1;
}

.ct-admin-hero-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             .35rem;
    background:      rgba(255, 255, 255, .18);
    border:          1px solid rgba(255, 255, 255, .28);
    border-radius:   20px;
    padding:         .3rem .85rem;
    font-size:       .78rem;
    font-weight:     600;
    position:        relative;
    z-index:         1;
    margin-top:      .75rem;
    backdrop-filter: blur(6px);
}

/* ── Today's overview grid ────────────────────────────────── */
.ct-today-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1px;
    background:            var(--ct-divider);
    border-radius:         var(--ct-radius-sm);
    overflow:              hidden;
}

.ct-today-cell {
    background: var(--ct-bg);
    padding:    1.1rem .75rem;
    text-align: center;
}

.ct-today-cell-value {
    font-size:   1.6rem;
    font-weight: 800;
    line-height: 1;
    color:       var(--ct-text);
}

.ct-today-cell-label {
    font-size:   .72rem;
    color:       var(--ct-muted);
    margin-top:  .3rem;
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    .ct-today-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ct-admin-hero { padding: 1.25rem 1.25rem 1.5rem; }
    .ct-today-cell-value { font-size: 1.4rem; }
}

/* ── Pending tasks alert cards ────────────────────────────── */
.ct-task-alert-card {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      #fff;
    border:          1px solid var(--ct-border);
    border-radius:   var(--ct-radius-sm);
    padding:         .85rem 1rem;
    text-decoration: none !important;
    color:           inherit;
    transition:      box-shadow .15s;
    gap:             .75rem;
}

.ct-task-alert-card:hover {
    box-shadow: var(--ct-shadow-hover);
    color:      inherit;
}

.ct-task-num {
    font-size:   1.4rem;
    font-weight: 800;
    line-height: 1;
}

/* ============================================================
   Admin — Quick Action Buttons (mobile-first row)
   ============================================================ */

.ct-admin-quick {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap:                   .75rem;
    margin-bottom:         1.25rem;
}

.ct-admin-quick-btn {
    display:         flex;
    align-items:     center;
    gap:             .6rem;
    background:      var(--ct-bg);
    border:          1px solid var(--ct-border);
    border-radius:   var(--ct-radius-sm);
    padding:         .9rem 1rem;
    font-size:       .88rem;
    font-weight:     600;
    color:           var(--ct-text) !important;
    text-decoration: none !important;
    transition:      transform .15s, box-shadow .15s;
    box-shadow:      var(--ct-shadow);
    cursor:          pointer;
}

.ct-admin-quick-btn:hover {
    transform:  translateY(-2px);
    box-shadow: var(--ct-shadow-hover);
}

.ct-admin-quick-btn .ct-aqb-icon {
    width:         36px;
    height:        36px;
    border-radius: 10px;
    display:       grid;
    place-items:   center;
    font-size:     .95rem;
    flex-shrink:   0;
}

/* ============================================================
   Admin — Upcoming classes list
   ============================================================ */

.ct-class-list-item {
    display:                     flex;
    align-items:                 center;
    gap:                         .9rem;
    padding:                     .85rem 0;
    border-bottom:               1px solid var(--ct-divider);
    text-decoration:             none !important;
    color:                       inherit;
    -webkit-tap-highlight-color: transparent;
}

.ct-class-list-item:last-child { border-bottom: none; }
.ct-class-list-item:hover { color: inherit; }

/* ============================================================
   Admin — User card (mobile user list)
   ============================================================ */

.ct-user-row {
    display:                     flex;
    align-items:                 center;
    gap:                         .85rem;
    padding:                     .85rem 0;
    border-bottom:               1px solid var(--ct-divider);
    text-decoration:             none !important;
    color:                       inherit;
    -webkit-tap-highlight-color: transparent;
}

.ct-user-row:last-child { border-bottom: none; }
.ct-user-row:hover { color: inherit; }

.ct-user-avatar {
    width:         42px;
    height:        42px;
    border-radius: 50%;
    background:    rgba(0, 119, 190, .1);
    color:         var(--canoa-primary);
    display:       grid;
    place-items:   center;
    font-size:     .9rem;
    font-weight:   700;
    flex-shrink:   0;
}

/* ============================================================
   Admin — Reports page
   ============================================================ */
.ct-report-card {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             .5rem;
    background:      var(--ct-bg);
    border:          1px solid var(--ct-border);
    border-radius:   var(--ct-radius);
    padding:         1.5rem;
    box-shadow:      var(--ct-shadow);
    text-decoration: none !important;
    color:           inherit;
    height:          100%;
    transition:      transform .18s, box-shadow .18s;
}

.ct-report-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--ct-shadow-hover);
    color:      inherit;
}

.ct-report-icon {
    width:         52px;
    height:        52px;
    border-radius: 14px;
    display:       grid;
    place-items:   center;
    font-size:     1.35rem;
    flex-shrink:   0;
}

/* ── Report-icon colour variants ─────────────────────────── */
.ct-report-icon.primary   { background: rgba(0, 119, 190, .10);  color: var(--canoa-primary); }
.ct-report-icon.success   { background: rgba(34, 197, 94, .12);  color: var(--ct-success); }
.ct-report-icon.warning   { background: rgba(245, 158, 11, .12); color: var(--ct-warning); }
.ct-report-icon.info      { background: rgba(6, 182, 212, .12);  color: var(--ct-info); }
.ct-report-icon.danger    { background: rgba(239, 68, 68, .12);  color: var(--ct-danger); }
.ct-report-icon.secondary { background: rgba(100, 116, 139, .10); color: var(--ct-muted); }

/* ct-report-card footer strip */
.ct-report-card-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    font-size:       .82rem;
    font-weight:     600;
    color:           var(--canoa-primary);
    padding-top:     .75rem;
    margin-top:      auto;
    border-top:      1px solid var(--ct-divider);
    width:           100%;
}