/* ============================================================
   TA Club — Admin Theme
   Premium membership design system (navy + gold)
   Built on Bootstrap 5. Zero-build (no Sass/Vite).
   ============================================================ */

/* ---- Avenir (self-hosted, extracted from Avenir.ttc) ---- */
@font-face { font-family:'Avenir'; font-style:normal; font-weight:300; font-display:swap; src:url('/assets/fonts/avenir-light.woff2') format('woff2'); }
@font-face { font-family:'Avenir'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/avenir-roman.woff2') format('woff2'); }
@font-face { font-family:'Avenir'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/avenir-medium.woff2') format('woff2'); }
@font-face { font-family:'Avenir'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/avenir-medium.woff2') format('woff2'); }
@font-face { font-family:'Avenir'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/avenir-heavy.woff2') format('woff2'); }
@font-face { font-family:'Avenir'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/avenir-black.woff2') format('woff2'); }
/* ---- Tex Gyre Termes (self-hosted) — headings ---- */
@font-face { font-family:'Tex Gyre Termes'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/tgt-regular.woff2') format('woff2'); }
@font-face { font-family:'Tex Gyre Termes'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/tgt-bold.woff2') format('woff2'); }
@font-face { font-family:'Tex Gyre Termes'; font-style:italic; font-weight:400; font-display:swap; src:url('/assets/fonts/tgt-italic.woff2') format('woff2'); }

:root {
    /* Brand palette (from TA Club Brand Foundations) */
    --ta-navy:        #15263E;  /* Dark Blue — primary */
    --ta-navy-deep:   #0E1A2B;  /* Deeper navy for gradients */
    --ta-navy-soft:   #1E3354;
    --ta-sidebar-bg:  #162131;  /* Sidebar background */
    --ta-app-bg:      #F0EFED;  /* Content / page background */
    --ta-gold:        #C8A24C;  /* Gold Highlight — accent */
    --ta-gold-soft:   #DDBE7A;
    --ta-gold-dark:   #A9853A;
    --ta-charcoal:    #2B2B2B;
    --ta-grey-50:     #F6F7F9;  /* app background */
    --ta-grey-100:    #EEF0F3;
    --ta-grey-200:    #E4E7EC;
    --ta-grey-300:    #D5DAE1;
    --ta-grey-500:    #8A94A6;
    --ta-grey-600:    #5F6B7E;
    --ta-grey-700:    #3E4858;
    --ta-success:     #2E9E5B;
    --ta-success-bg:  #E6F4EC;
    --ta-warning:     #D9A328;
    --ta-warning-bg:  #FBF1DA;
    --ta-error:       #D64545;
    --ta-error-bg:    #FBE7E7;
    --ta-info:        #3B7DD8;
    --ta-info-bg:     #E6EEFA;

    /* Bootstrap overrides */
    --bs-primary: var(--ta-navy);
    --bs-body-bg: var(--ta-app-bg);
    --bs-body-color: var(--ta-grey-700);
    --bs-body-font-family: 'Avenir', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
    --bs-border-color: var(--ta-grey-200);

    --ta-sidebar-w: 248px;
    --ta-radius: .65rem;
    --ta-shadow-sm: 0 1px 2px rgba(16,28,48,.06), 0 1px 3px rgba(16,28,48,.05);
    --ta-shadow: 0 2px 8px rgba(16,28,48,.06), 0 6px 24px rgba(16,28,48,.05);
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--bs-body-font-family);
    background: var(--ta-app-bg);
    color: var(--ta-grey-700);
    font-size: .9rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .ta-display {
    font-family: 'Tex Gyre Termes', Georgia, serif;
    color: var(--ta-navy);
    font-weight: 400;
    letter-spacing: 0;
}

.text-navy   { color: var(--ta-navy) !important; }
.text-gold   { color: var(--ta-gold-dark) !important; }
.text-muted-2{ color: var(--ta-grey-500) !important; }
.bg-navy     { background: var(--ta-navy) !important; }
.bg-gold     { background: var(--ta-gold) !important; }
.fw-medium   { font-weight: 600 !important; }

/* Eyebrow label (e.g. "WEB ADMIN PANEL") */
.ta-eyebrow {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ta-gold-dark);
    font-weight: 700;
}

/* ============================================================
   App shell — sidebar + topbar
   ============================================================ */
.ta-shell { display: flex; min-height: 100vh; }

.ta-sidebar {
    width: var(--ta-sidebar-w);
    min-width: var(--ta-sidebar-w);
    background: #162131 url('/assets/tac-sidebar-bg.png') center center / 100% 100% no-repeat;
    color: #C7D0DE;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.ta-sidebar__brand {
    display: flex; align-items: center; gap: .6rem;
    padding: 1.35rem 1.35rem 1rem;
}
.ta-sidebar__brand img { max-width: 100%; height: auto; display: block; }

.ta-nav {
    padding: .5rem .75rem 1.5rem; overflow-y: auto; overflow-x: hidden; flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}
.ta-nav::-webkit-scrollbar { width: 6px; }
.ta-nav::-webkit-scrollbar-track { background: transparent; }
.ta-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.ta-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }
.ta-nav__section {
    font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
    color: #6A7791; padding: 1rem .65rem .4rem; font-weight: 700;
}
.ta-nav__link {
    display: flex; align-items: center;
    padding: .55rem .7rem; margin-bottom: .1rem;
    border-radius: .5rem; color: #8C98A9; text-decoration: none;
    font-size: .92rem; font-weight: 400; transition: color .15s;
}
/* Icon-less sidebar — hide any residual nav icons. */
.ta-nav__link svg, .ta-nav__link i { display: none; }
.ta-nav__link:hover { background: transparent; color: #fff; }
.ta-nav__link.active {
    background: transparent;
    color: #fff;
    font-weight: 500;
    box-shadow: none;
}
.ta-nav__badge { margin-left: auto; font-size: .65rem; background: var(--ta-error); color:#fff; border-radius: 999px; padding: .05rem .4rem; }

.ta-sidebar__user {
    display: flex; align-items: center; gap: .6rem;
    margin: 1.1rem .75rem 1.1rem; padding: .7rem .8rem;
    background: rgba(255,255,255,.10); border-radius: .6rem;
}
.ta-sidebar__user .ta-avatar { background: var(--ta-gold); color: var(--ta-navy-deep); }
.ta-sidebar__user small { color: #97A1B4; font-size: .68rem; }
.ta-sidebar__user span { color: #fff; font-size: .82rem; font-weight: 700; }

.ta-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Topbar blends into the content (dashboard style): app-bg, no border, utility bar */
.ta-topbar {
    background: var(--ta-app-bg); border-bottom: none; box-shadow: none;
    display: flex; align-items: center; gap: 1rem; justify-content: flex-end;
    /* Extra top space so the page title doesn't sit flush against the window. */
    padding: 1.1rem 1.6rem 0; position: static;
}
.ta-topbar .ta-icon-btn.d-lg-none { margin-right: auto; }
.ta-topbar__title { display: flex; align-items: center; gap: .65rem; min-width: 200px; }
.ta-topbar__title h1 { font-family: 'Tex Gyre Termes', Georgia, serif; font-size: 1.9rem; margin: 0; font-weight: 400; line-height: 1.1; color: var(--ta-navy); }
.ta-topbar__group { display: flex; align-items: center; gap: .6rem; min-width: 200px; justify-content: flex-end; }
.ta-topbar--utility-only { min-height: 72px; }
.ta-topbar--utility-only .ta-menu-btn { display: none; }
.ta-topbar--utility-only .ta-topbar__group { margin-left: auto; }
.ta-topbar__search {
    flex: 1; max-width: 460px; margin: 0 auto; position: relative;
}
.ta-topbar__search input {
    width: 100%; border: 1px solid var(--ta-grey-200); background: var(--ta-app-bg);
    border-radius: 8px; padding: .5rem 1rem .5rem 2.4rem; font-size: .85rem;
}
.ta-topbar__search input:focus { outline: none; border-color: var(--ta-gold); box-shadow: 0 0 0 3px rgba(200,162,76,.15); }
.ta-topbar__search svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--ta-grey-500); }
.ta-icon-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ta-grey-200);
    background:#fff; display: grid; place-items: center; color: var(--ta-grey-600); position: relative;
    cursor: pointer;
}
.ta-icon-btn:hover { background: var(--ta-grey-50); color: var(--ta-navy); }
.ta-icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; background: var(--ta-error); border-radius: 50%; border: 2px solid #fff; }

.ta-clock {
    display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
    padding: .35rem .85rem; border-radius: .55rem; background: var(--ta-grey-50); border: 1px solid var(--ta-grey-200);
    white-space: nowrap;
}
.ta-clock .time { font-weight: 700; color: var(--ta-navy); font-size: .92rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ta-clock .date { font-size: .66rem; color: var(--ta-grey-500); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.ta-content { padding: 1.1rem 1.6rem 1.6rem; flex: 1; background: var(--ta-app-bg); }
/* The dashboard has no topbar, so it supplies its own top padding. */
.ta-main > .ta-content:first-child { padding-top: 1.4rem; }

/* Notification dropdown (navbar bell) */
.ta-notif { position: relative; }
.ta-notif__panel {
    position: absolute; right: 0; top: calc(100% + 12px); width: 374px; max-width: 92vw;
    background:#fff; border:1px solid var(--ta-grey-200); border-radius: var(--ta-radius);
    box-shadow: var(--ta-shadow); z-index: 60; overflow: hidden;
    opacity:0; visibility:hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s;
}
.ta-notif__panel.show { opacity:1; visibility:visible; transform: translateY(0); }
.ta-notif__head { display:flex; align-items:center; justify-content:space-between; padding: .95rem 1rem .55rem; }
.ta-notif__head h4 { margin:0; font-size:1rem; }
.ta-notif__head a { font-size:.74rem; font-weight:700; color:var(--ta-gold-dark); text-decoration:none; }
.ta-notif__tabs { display:flex; gap:1.1rem; padding: 0 1rem; border-bottom:1px solid var(--ta-grey-100); }
.ta-notif__tabs a { padding:.5rem 0; font-size:.8rem; font-weight:600; color:var(--ta-grey-500); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:.35rem; }
.ta-notif__tabs a.active { color:var(--ta-navy); border-bottom-color: var(--ta-gold); }
.ta-notif__tabs .cnt { background:var(--ta-grey-100); color:var(--ta-grey-600); font-size:.62rem; border-radius:999px; padding:.05rem .4rem; font-weight:700; }
.ta-notif__tabs a.active .cnt { background:var(--ta-gold); color:var(--ta-navy-deep); }
.ta-notif__sec { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ta-grey-500); font-weight:700; padding:.65rem 1rem .25rem; }
.ta-notif__list { max-height: 60vh; overflow-y:auto; }
.ta-notif__item { display:flex; gap:.7rem; align-items:flex-start; padding:.65rem 1rem; border-top:1px solid var(--ta-grey-100); text-decoration:none; }
.ta-notif__item:first-child { border-top:none; }
.ta-notif__item:hover { background: var(--ta-grey-50); }
.ta-notif__ic { width:38px; height:38px; border-radius:50%; flex:0 0 38px; display:grid; place-items:center; }
.ta-notif__bd { flex:1; min-width:0; }
.ta-notif__bd strong { display:block; color:var(--ta-navy); font-size:.83rem; font-weight:700; }
.ta-notif__bd p { margin:0; color:var(--ta-grey-600); font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ta-notif__bd .t { color:var(--ta-grey-500); font-size:.68rem; }
.ta-notif__udot { width:8px; height:8px; border-radius:50%; background:var(--ta-gold); margin-top:.45rem; flex:0 0 8px; }
.ta-notif__foot { padding:.75rem 1rem; text-align:center; border-top:1px solid var(--ta-grey-100); }
.ta-notif__foot a { color:var(--ta-gold-dark); font-weight:700; font-size:.82rem; text-decoration:none; }
.ic-gold  { background:rgba(200,162,76,.15); color:var(--ta-gold-dark); }
.ic-green { background:var(--ta-success-bg); color:var(--ta-success); }
.ic-red   { background:var(--ta-error-bg); color:var(--ta-error); }
.ic-navy  { background:var(--ta-grey-100); color:var(--ta-navy); }
.ic-info  { background:var(--ta-info-bg); color:var(--ta-info); }

/* ============================================================
   Avatars
   ============================================================ */
.ta-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: .8rem;
    background: var(--ta-grey-200); color: var(--ta-grey-700); flex: 0 0 auto;
    font-family: 'Avenir'; overflow: hidden;
}
.ta-avatar--sm { width: 30px; height: 30px; font-size: .7rem; }
.ta-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Cards / panels
   ============================================================ */
.ta-card {
    background: #fff; border: 1px solid var(--ta-grey-200);
    border-radius: var(--ta-radius); box-shadow: var(--ta-shadow-sm);
}
.ta-card__head {
    /* Wrap: the Reports card head holds a title plus two 180px filters (368px of
       them), which cannot fit beside it on a phone — the "All Types" filter was
       sliced in half and unreachable. */
    display: flex; flex-wrap: wrap; row-gap: .6rem; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.25rem .25rem;
}
.ta-card__head h3, .ta-card__head h2 { font-family: 'Avenir', var(--bs-body-font-family); font-weight: 700; font-size: 1rem; margin: 0; letter-spacing: -.01em; }
[x-cloak] { display: none !important; }

/* Keep the Top Offers and Top Outlets headers visually consistent: title and
   analysis link stay on one line on desktop. */
.report-top-card__head { flex-wrap: nowrap !important; gap: .75rem; }
.report-top-card__head h3 { white-space: nowrap; min-width: 0; }
.report-top-card__head a { flex: 0 0 auto; white-space: nowrap; }
.report-ranked-row { display: flex; align-items: flex-start; gap: .55rem; }
.report-ranked-row__number { flex: 0 0 1.35rem; color: var(--ta-grey-600); font-size: .72rem; font-weight: 700; line-height: 1.4rem; text-align: center; }
.report-ranked-row__content { flex: 1 1 auto; min-width: 0; }
@media (max-width: 575px) {
    .report-top-card__head { flex-wrap: wrap !important; }
}

/* Dashboard greeting — serif display with italic name (Tex Gyre / Avenir pairing) */
.ta-greeting { font-family: 'Tex Gyre Termes', Georgia, serif; font-weight: 400; font-size: 1.85rem; line-height: 1.05; color: var(--ta-navy); }
.ta-greeting em { font-style: italic; font-size: 2.65rem; }
/* Mobile "open sidebar" button — a clean rounded-square menu control shown on
   its own line above the greeting (hidden on desktop via d-lg-none). */
.ta-menu-btn {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px; background: #fff;
    border: 1px solid var(--ta-grey-200); color: var(--ta-navy);
    box-shadow: 0 2px 8px rgba(16,28,48,.06); cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.ta-menu-btn:hover { background: var(--ta-grey-50); border-color: var(--ta-grey-300); }
.ta-menu-btn:active { transform: translateY(1px); }
/* Dashboard header: greeting left + search & actions right on desktop; on mobile
   it becomes an app-bar (menu + actions), then greeting, then full-width search. */
.ta-dash-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .6rem; margin-bottom: .9rem; }
.ta-dash-head__actions { display: flex; align-items: center; gap: .5rem; }
.ta-dash-head > .ta-greeting { order: 1; flex: 1 1 auto; }
.ta-dash-head > .ta-dash-search { order: 2; margin-left: auto; }
.ta-dash-head > .ta-dash-head__actions { order: 3; }
@media (max-width: 991px) {
    .ta-dash-head > .ta-dash-head__actions { order: 1; margin-left: auto; }
    .ta-dash-head > .ta-greeting { order: 2; flex: 1 0 100%; }
    .ta-dash-head > .ta-dash-search { order: 3; flex: 1 0 100%; max-width: 100%; margin-left: 0; }
}
@media (max-width: 575px) {
    .ta-greeting { font-size: 1.5rem; }
    .ta-greeting em { font-size: 1.95rem; }
}

/* Dashboard header search (reuses .ta-topbar__search visuals, fixed width, white) */
.ta-dash-search { flex: 0 0 auto; width: 300px; max-width: 42vw; margin: 0; }
.ta-dash-search input { background: #fff; }
.ta-card__body { padding: 1.25rem; }

/* Stat / KPI card */
.ta-stat {
    background: #fff; border: 1px solid var(--ta-grey-200); border-radius: var(--ta-radius);
    padding: 1.15rem 1.25rem; box-shadow: var(--ta-shadow-sm); height: 100%;
    position: relative; overflow: hidden;
}
.ta-stat__label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ta-grey-500); font-weight: 700; }
.ta-stat__value { font-family: 'Avenir'; font-size: 1.85rem; font-weight: 700; color: var(--ta-navy); line-height: 1.1; margin-top: .35rem; }
.ta-stat__icon {
    position: absolute; top: 1.1rem; right: 1.1rem; width: 40px; height: 40px;
    border-radius: 10px; display: grid; place-items: center; background: var(--ta-grey-100); color: var(--ta-navy);
}
.ta-stat__icon.is-gold  { background: rgba(200,162,76,.14); color: var(--ta-gold-dark); }
.ta-stat__icon.is-green { background: var(--ta-success-bg); color: var(--ta-success); }
.ta-stat__icon.is-red   { background: var(--ta-error-bg); color: var(--ta-error); }
.ta-stat__delta { font-size: .76rem; font-weight: 700; margin-top: .45rem; display: inline-flex; align-items: center; gap: .25rem; }
.ta-stat__delta.up   { color: var(--ta-success); }
.ta-stat__delta.down { color: var(--ta-error); }

/* ============================================================
   Buttons (extends Bootstrap)
   ============================================================ */
.btn { font-weight: 600; border-radius: .5rem; font-size: .85rem; padding: .5rem 1rem; }
.btn-primary { background: var(--ta-navy); border-color: var(--ta-navy); }
.btn-primary:hover, .btn-primary:focus { background: var(--ta-navy-deep); border-color: var(--ta-navy-deep); }
.btn-gold { background: var(--ta-gold); border-color: var(--ta-gold); color: var(--ta-navy-deep); }
.btn-gold:hover { background: var(--ta-gold-dark); border-color: var(--ta-gold-dark); color: #fff; }
.btn-outline-navy { border: 1px solid var(--ta-grey-300); color: var(--ta-grey-700); background:#fff; }
.btn-outline-navy:hover { border-color: var(--ta-navy); color: var(--ta-navy); background:#F5F5F3; }
.btn-danger-soft { background: var(--ta-error); color: #fff; border: none; }
.btn-danger-soft:hover { background: var(--ta-error); color: #fff; }
.btn-sm { padding: .35rem .7rem; font-size: .78rem; }

/* ============================================================
   Badges — tiers & statuses
   ============================================================ */
.ta-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .56rem; font-weight: 600; padding: .11rem .36rem; border-radius: 999px;
    letter-spacing: .02em; white-space: nowrap;
}
.ta-pill::before { display: none; }
.ta-pill--success { background: #22C55E; color: #FFFFFF; }
.ta-pill--warning { background: #F59E0B; color: #FFFFFF; }
.ta-pill--orange  { background: #F97316; color: #FFFFFF; }
.ta-pill--yellow  { background: #EAB308; color: #FFFFFF; }
.ta-pill--error   { background: var(--ta-error); color: #fff; }
.ta-pill--info    { background: var(--ta-info); color: #fff; }
.ta-pill--muted   { background: var(--ta-grey-600); color: #fff; }
.ta-pill--gold    { background: #B6985D; color: #FFFFFF; }
.ta-pill--new     { background: #818D97; color: #FFFFFF; }
.ta-pill--plain::before { display: none; }

/* Tier chips */
.ta-tier {
    display: inline-flex; align-items: center;
    font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: .28rem .7rem; border-radius: 14px; border: 1px solid transparent;
}
.ta-tier--classic   { background: #F0EFED; color: #1A1A1A; border-color: rgba(26,26,26,.12); }
.ta-tier--silver    { background: #818D97; color: #FFFFFF; border-color:#818D97; }
.ta-tier--gold      { background: #B6985D; color: #1A1A1A; border-color:#B6985D; }
.ta-tier--platinum  { background: #162131; color: #E2C29A; border-color:#162131; }
.ta-tier--black     { background: #1A1A1A; color: #B6985D; border-color:#1A1A1A; }
.ta-tier-badge { height: 17px; width: auto; display: inline-block; vertical-align: middle; }

/* ============================================================
   Tables
   ============================================================ */
.ta-table-wrap { background: #fff; border: 1px solid var(--ta-grey-200); border-radius: var(--ta-radius); box-shadow: var(--ta-shadow-sm); overflow: hidden; }
/* Mobile/tablet: admin tables scroll horizontally instead of squishing or being
   clipped off-screen — a min-width forces the .table-responsive / .ta-table-wrap
   container to scroll rather than the whole page. */
@media (max-width: 991px) {
    .ta-table-wrap { overflow-x: auto; }
    .ta-table-wrap .ta-table, .table-responsive .ta-table { min-width: 640px; }
}
.ta-table { width: 100%; margin: 0; border-collapse: collapse; }
.ta-table thead th {
    background: var(--ta-grey-50); color: var(--ta-grey-500);
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
    padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--ta-grey-200); white-space: nowrap;
}
.ta-table tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--ta-grey-100); vertical-align: middle; font-size: .84rem; color: var(--ta-grey-700); }
.ta-table tbody tr:last-child td { border-bottom: none; }
.ta-table tbody tr:hover { background: var(--ta-grey-50); }
.ta-table .ta-cell-user { display: flex; align-items: center; gap: .65rem; }
.ta-table .ta-cell-user strong { color: var(--ta-navy); font-weight: 700; font-size: .85rem; display:block; }
.ta-table .ta-cell-user small { color: var(--ta-grey-500); font-size: .72rem; }

/* --- Global request loading overlay (toggled by the layout's Livewire commit hook). --- */
.ta-loading-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(20,32,51,.30); }
.ta-loading-card { background:#fff; border-radius:16px; padding:24px 32px; display:flex; flex-direction:column; align-items:center; gap:12px; box-shadow:0 18px 50px rgba(16,28,48,.22); }
.ta-loading-card__text { font-size:.82rem; font-weight:700; letter-spacing:.02em; color: var(--ta-navy); }
.ta-spinner { width:40px; height:40px; border:3.5px solid rgba(182,152,93,.25); border-top-color: var(--ta-gold); border-radius:50%; animation: ta-spin .7s linear infinite; }
@keyframes ta-spin { to { transform: rotate(360deg); } }

/* Skeleton loading — reserved for structured data refreshes (cards, charts,
   tables and lists). Short actions keep their existing inline loading text. */
.ta-skel {
    display: block;
    border-radius: 7px;
    background: linear-gradient(90deg, #EEF0F3 0%, #F8F9FB 42%, #E5E8EE 74%);
    background-size: 220% 100%;
    animation: ta-skel-shimmer 1.05s ease-in-out infinite;
}
@keyframes ta-skel-shimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}
.ta-skel-card { min-height: 108px; display:flex; flex-direction:column; gap:.65rem; padding:1.1rem 1.25rem; }
.ta-skel-card--tall { min-height: 220px; }
.ta-skel--label { width:46%; height:10px; border-radius:999px; }
.ta-skel--value { width:58%; height:30px; }
.ta-skel--text { width:38%; height:11px; border-radius:999px; }
.ta-skel-panel { background:#fff; border:1px solid var(--ta-grey-200); border-radius: var(--ta-radius); padding:1.1rem 1.25rem; box-shadow:var(--ta-shadow-sm); min-height:260px; }
.ta-skel-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.ta-skel--title { width:150px; height:18px; }
.ta-skel--chip { width:82px; height:18px; border-radius:999px; }
.ta-skel--chart { width:100%; height:150px; border-radius:10px; opacity:.86; }
.ta-skel-bars { height:92px; display:flex; align-items:flex-end; gap:.5rem; margin-top:-100px; padding:0 1rem 1rem; opacity:.55; }
.ta-skel-bars .ta-skel { flex:1; min-height:14px; border-radius:6px 6px 0 0; }
/* Livewire shows a wire:loading <tbody> as inline-block by default, which breaks the
   table column grid — skeleton cells collapse and slide out from under the header.
   Force a proper table row group whenever Livewire is showing it. */
.ta-table tbody[wire\:loading][style*="display: inline"],
.ta-table tbody[wire\:loading][style*="display:inline"] { display: table-row-group !important; }
/* Bare wire:loading shows an element as inline-block (Livewire default), collapsing
   these skeleton containers to content width. Force each back to its real display
   whenever Livewire is showing it (matched via the inline display it sets). */
.ta-skel-list[style*="display: inline"], .ta-skel-list[style*="display:inline"] { display: flex !important; }
.ta-skel-form[style*="display: inline"], .ta-skel-form[style*="display:inline"] { display: block !important; }
.row[data-ta-skeleton][style*="display: inline"], .row[data-ta-skeleton][style*="display:inline"] { display: flex !important; }
.ta-skel-row td { background:#fff; padding:.9rem 1rem !important; border-bottom:1px solid var(--ta-grey-100); vertical-align:middle; }
.ta-skel-row td .ta-skel--cell { height:14px; min-width:20px; border-radius:999px; }
.ta-skel-table-line { display:flex; align-items:center; gap:1rem; }
.ta-skel-table-line .ta-skel { height:14px; flex:0 0 auto; border-radius:999px; }
.ta-skel-list { display:flex; flex-direction:column; gap:.85rem; }
.ta-skel-list__row { display:grid; grid-template-columns:40px 1fr 86px; gap:.8rem; align-items:center; }
.ta-skel--avatar { width:40px; height:40px; border-radius:50%; }
.ta-skel--line { width:100%; height:14px; border-radius:999px; }
.ta-skel--line.short { width:86px; }

/* --- Branded confirm dialog (replaces native wire:confirm; reuses .ta-modal). --- */
.ta-confirm-overlay { position: fixed; inset: 0; z-index: 3100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(20,32,51,.55); }
.ta-confirm { width: 100%; max-width: 440px; }
.ta-confirm__msg { font-size:.95rem; line-height:1.55; color: var(--ta-navy); margin:0; }
/* Confirm-dialog action button — keep it branded regardless of cascade/cache.
   ID specificity beats any .btn base rule; the destructive variant goes red. */
#taConfirmOk { background: var(--ta-gold); border-color: var(--ta-gold); color: var(--ta-navy-deep); }
#taConfirmOk:hover, #taConfirmOk:focus { background: var(--ta-gold-dark); border-color: var(--ta-gold-dark); color: #fff; }
#taConfirmOk.btn-danger { background: var(--ta-error); border-color: var(--ta-error); color: #fff; }
#taConfirmOk.btn-danger:hover, #taConfirmOk.btn-danger:focus { filter: brightness(.95); }
/* Cap tall account modals so the body scrolls instead of overflowing. */
.ta-modal__body { max-height: 62vh; overflow-y: auto; }

/* Date-range chip (Reports) — a bordered pill with the range label + an invisible
   native <select> overlaid so clicking the chip opens the dropdown. */
.ta-daterange {
    position: relative; display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--ta-grey-200); border-radius: 8px; padding: .45rem .85rem;
    background: #fff; color: var(--ta-grey-700); font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.ta-daterange > svg { color: var(--ta-grey-500); flex: 0 0 auto; }
.ta-daterange__select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; }

/* Custom date-range inputs — revealed when the "Custom" report range is picked. */
.ta-daterange-custom { display: inline-flex; align-items: center; gap: .4rem; }
.ta-daterange-custom__sep { color: var(--ta-grey-500); font-weight: 700; }
.ta-date-input {
    border: 1px solid var(--ta-grey-200); border-radius: 8px; padding: .38rem .55rem;
    background: #fff; color: var(--ta-grey-700); font-size: .8rem; font-weight: 600;
    font-family: inherit; line-height: 1.2; cursor: pointer;
}
.ta-date-input:focus { outline: none; border-color: var(--ta-gold, #C8A24C); box-shadow: 0 0 0 3px rgba(200,162,76,.15); }

/* Redeem-a-Code two-card grid — CSS grid (no negative margins, so alerts above
   never bleed behind the cards). */
.redeem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 991px) { .redeem-grid { grid-template-columns: 1fr; } }
/* The cards' titles use .pg-h, which triggers the global
   `div:has(> .pg-h){margin-top:-2.5rem}` rule and pulled the cards up behind the
   alert. Neutralise that negative margin for the redeem cards. */
.redeem-grid > .ta-table-wrap { margin-top: 0 !important; }

/* position:relative contains Select2's hidden original <select> (position:absolute).
   Static, its offsetParent was <body>, so it escaped this scroller and stretched the
   Redemptions page to 571px on a 390px screen. */
.ta-toolbar { position: relative; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--ta-grey-100); }
.redemptions-filter-toolbar { flex-wrap:wrap; overflow:visible; align-items:flex-start; }
.redemptions-filter-toolbar > .select2-container,
.redemptions-filter-toolbar > .filter-multi-select { flex:0 0 auto; }
.ta-input, .ta-select {
    border: 1px solid var(--ta-grey-200); border-radius: .5rem; padding: .5rem .8rem; font-size: .83rem;
    background: #fff; color: var(--ta-grey-700);
    height: 40px; line-height: 1.4; box-sizing: border-box;
}
.ta-input:focus, .ta-select:focus { outline:none; border-color: var(--ta-gold); box-shadow: 0 0 0 3px rgba(200,162,76,.15); }
.ta-search-inline { position: relative; }
.ta-search-inline input { padding-left: 2.2rem; }
.ta-search-inline svg { position:absolute; left:.7rem; top:50%; transform: translateY(-50%); color: var(--ta-grey-500); }

.ta-pagination { display:flex; align-items:center; justify-content: space-between; padding: .9rem 1.1rem; border-top: 1px solid var(--ta-grey-100); }
.ta-pagination .pages { display:flex; gap:.25rem; }
.ta-pagination .pages a, .ta-pagination .pages span {
    min-width: 32px; height: 32px; display:grid; place-items:center; border-radius:.45rem;
    border:1px solid var(--ta-grey-200); color: var(--ta-grey-600); text-decoration:none; font-size:.8rem; font-weight:600;
}
.ta-pagination .pages .active { background: var(--ta-navy); color:#fff; border-color: var(--ta-navy); }

/* Row action buttons */
.ta-row-actions { display:flex; gap:.35rem; justify-content:flex-end; }
.ta-row-btn {
    font-size: .72rem; font-weight: 600; padding: .28rem .6rem; border-radius: .4rem; border: 1px solid var(--ta-grey-200);
    background:#fff; color: var(--ta-grey-600); cursor:pointer; text-decoration:none;
}
.ta-row-btn:hover { border-color: var(--ta-navy); color: var(--ta-navy); }
.ta-row-btn--gold { background: var(--ta-gold); border-color: var(--ta-gold); color: var(--ta-navy-deep); }
.ta-row-btn--danger { background: var(--ta-error); border-color: transparent; color: #fff; }
.ta-row-btn--danger:hover { background: var(--ta-error); border-color: transparent; color: #fff; filter: brightness(0.92); }
.ta-row-btn--gold:hover { background: var(--ta-gold); border-color: var(--ta-gold); color: var(--ta-navy-deep); filter: brightness(0.96); }

/* Row-actions dropdown (Bootstrap-driven) */
.ta-row-btn.dropdown-toggle { display: inline-flex; align-items: center; gap: .4rem; }
.ta-action-menu { min-width: 190px; border: 1px solid var(--ta-grey-200); border-radius: .7rem; box-shadow: 0 12px 32px rgba(16,28,48,.16); padding: .3rem; }
.ta-action-menu .dropdown-item { border-radius: .45rem; font-size: .84rem; font-weight: 600; padding: .5rem .7rem; color: var(--ta-navy); }
.ta-action-menu .dropdown-item:hover, .ta-action-menu .dropdown-item:focus { background: #f2f4f7; color: var(--ta-navy); }
.ta-action-menu .dropdown-item.text-danger:hover, .ta-action-menu .dropdown-item.text-danger:focus { background: rgba(214,69,69,.08); color: var(--ta-error) !important; }
.ta-action-menu .dropdown-divider { margin: .3rem .25rem; border-color: var(--ta-grey-200); }

/* ============================================================
   Forms
   ============================================================ */
.ta-label { font-size: .75rem; font-weight: 700; color: var(--ta-grey-600); margin-bottom: .3rem; display:block; }
.ta-field { margin-bottom: 1rem; }
.form-control, .form-select { border-radius: .5rem; border-color: var(--ta-grey-200); font-size: .85rem; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--ta-gold); box-shadow: 0 0 0 3px rgba(200,162,76,.15); }
.form-check-input:checked { background-color: var(--ta-gold); border-color: var(--ta-gold); }
.form-check-input:focus { border-color: var(--ta-gold); box-shadow: 0 0 0 .2rem rgba(200,162,76,.25); }
.form-switch .form-check-input:checked { background-color: var(--ta-success); border-color: var(--ta-success); }
/* Native checkboxes/radios (e.g. Outlet Access) take the brand gold instead of
   the browser's default blue accent. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ta-gold); }

/* ============================================================
   Settings tabs
   ============================================================ */
.ta-tabs { display:flex; gap: .25rem; border-bottom: 1px solid var(--ta-grey-200); margin-bottom: 1.5rem; }
.ta-tabs a {
    padding: .65rem 1rem; font-size: .85rem; font-weight: 600; color: var(--ta-grey-500);
    text-decoration:none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ta-tabs a:hover { color: var(--ta-navy); }
.ta-tabs a.active { color: var(--ta-navy); border-bottom-color: var(--ta-gold); }
.ta-tabs button { border:0; background:transparent; color:var(--ta-muted); padding:.65rem 1rem; border-bottom:2px solid transparent; font-size:.85rem; }
.ta-tabs button:hover { color:var(--ta-navy); }
.ta-tabs button.active { color:var(--ta-navy); border-bottom-color:var(--ta-gold); }
.ta-line-chart { height:180px; width:100%; padding:.5rem 0 0; }
.ta-line-chart svg { display:block; width:100%; height:100%; overflow:visible; }
.peak-summary-row { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:.6rem; }
.peak-summary-row > div { display:flex; flex-direction:column; gap:.1rem; }
.peak-summary-row small { display:block; color:var(--ta-grey-500); font-size:.62rem; letter-spacing:.05em; }
.peak-summary-row strong { color:var(--ta-navy); font-size:.9rem; }
.peak-summary-row b { color:var(--ta-navy); font-size:1.05rem; text-align:right; }
.peak-summary-row b small { font-size:.62rem; font-weight:400; letter-spacing:0; }
.peak-summary-icon { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:1rem; }
.peak-summary-icon svg { width:17px; height:17px; display:block; }
.peak-summary-icon--day { color:#6758c7; background:#eeeaff; }
.peak-summary-icon--time { color:#d77452; background:#fff0e8; }
.peak-summary-icon--month { color:#269866; background:#e3f7ec; }
.ta-info-dot { display:inline-grid; place-items:center; width:14px; height:14px; margin-left:.2rem; border:1px solid var(--ta-grey-400); border-radius:50%; color:var(--ta-grey-500); font-size:.58rem; font-weight:700; line-height:1; vertical-align:1px; cursor:help; }
.peak-engagement-card { min-height:320px; }
.peak-engagement-card__head { flex-wrap:nowrap !important; align-items:center; }
.peak-engagement-card__head h3 { white-space:nowrap; }
.peak-engagement-tabs { display:flex; align-items:center; gap:.25rem; }
.peak-engagement-tabs button { border:1px solid var(--ta-grey-200); border-radius:5px; padding:.38rem .72rem; background:#fff; color:var(--ta-grey-600); font-size:.68rem; font-weight:600; line-height:1.1; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.peak-engagement-tabs button:hover { border-color:#0d9faf; color:#0d8d9c; }
.peak-engagement-tabs button.is-active { border-color:#0d9faf; background:#0d9faf; color:#fff; }
.peak-engagement-card__body { position:relative; min-height:245px; }
.peak-engagement-loading { min-height:230px; align-items:center; justify-content:center; gap:.55rem; color:var(--ta-grey-600); font-size:.78rem; }
.peak-engagement-spinner { width:16px; height:16px; border:2px solid #cfe5e8; border-top-color:#0d9faf; border-radius:50%; animation:peak-engagement-spin .7s linear infinite; }
@keyframes peak-engagement-spin { to { transform:rotate(360deg); } }
.peak-chart-subtitle { color:var(--ta-grey-600); font-size:.72rem; margin-bottom:.65rem; }
.peak-chart { height:218px; display:flex; align-items:flex-end; gap:clamp(2px,.7vw,8px); border-bottom:1px solid var(--ta-grey-200); padding:0 .25rem; background:repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), rgba(219,226,234,.55) calc(25% - 1px), rgba(219,226,234,.55) 25%); }
.peak-chart-bar-wrap { position:relative; flex:1 1 0; min-width:0; height:calc(100% - 28px); display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:.4rem; }
.peak-chart-bar { width:min(22px,72%); min-height:3px; background:#168bd0; border-radius:3px 3px 0 0; transition:height .2s ease, opacity .15s ease; }
.peak-chart-bar-wrap:hover .peak-chart-bar { background:#0d9faf; }
.peak-chart-label { color:var(--ta-grey-500); font-size:.58rem; line-height:1; white-space:nowrap; overflow:visible; text-overflow:clip; max-width:none; }
.peak-chart-tooltip { position:absolute; left:50%; z-index:3; min-width:max-content; transform:translateX(-50%) translateY(.2rem); padding:.45rem .6rem; border:1px solid var(--ta-grey-200); border-radius:6px; background:#fff; box-shadow:0 5px 15px rgba(21,38,62,.14); color:var(--ta-navy); font-size:.64rem; line-height:1.25; text-align:left; opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; }
.peak-chart-tooltip::after { content:''; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; border-right:1px solid var(--ta-grey-200); border-bottom:1px solid var(--ta-grey-200); background:#fff; transform:translateX(-50%) rotate(45deg); }
.peak-chart-tooltip span, .peak-chart-tooltip strong { display:block; }
.peak-chart-tooltip span { color:var(--ta-grey-600); }
.peak-chart-tooltip strong { margin-top:.15rem; font-weight:700; }
.peak-chart-bar-wrap:hover .peak-chart-tooltip { opacity:1; transform:translateX(-50%) translateY(0); }
.peak-chart--hour .peak-chart-label { visibility:hidden; font-size:.54rem; letter-spacing:-.02em; }
.peak-chart--hour .peak-chart-bar-wrap:nth-child(4n + 1) .peak-chart-label,
.peak-chart--hour .peak-chart-bar-wrap:last-child .peak-chart-label { visibility:visible; }
@media (max-width: 575px) {
    .peak-engagement-card__head { align-items:flex-start; flex-wrap:wrap !important; }
    .peak-engagement-tabs { width:100%; }
    .peak-engagement-tabs button { flex:1; }
    .peak-chart { gap:2px; }
    .peak-chart-bar { width:70%; }
}
.save-performance-card { min-height:142px; border:1px solid var(--ta-grey-200); border-radius:10px; padding:1rem 1.1rem; background:#fff; display:flex; align-items:flex-start; gap:.85rem; }
.save-performance-card--blue { border-left:3px solid #168bd0; }
.save-performance-card--navy { border-left:3px solid var(--ta-navy); }
.save-performance-card--gold { border-left:3px solid #e5a52f; }
.save-performance-card__icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:50%; font-size:1.8rem; line-height:1; }
.save-performance-card--blue .save-performance-card__icon { color:#168bd0; background:#e8f2fc; }
.save-performance-card--navy .save-performance-card__icon { color:var(--ta-navy); background:#edf0f4; }
.save-performance-card--gold .save-performance-card__icon { color:#d99222; background:#fff2dc; }
.save-performance-card__icon svg { width:27px; height:27px; }
.save-performance-card__icon span { font-size:2rem; font-weight:400; }
.save-performance-card__content { min-width:0; }
.save-performance-card__label { color:var(--ta-grey-500); font-size:.64rem; letter-spacing:.07em; font-weight:700; }
.save-performance-card__value { color:var(--ta-navy); font-size:1.65rem; line-height:1.15; font-weight:700; margin:.28rem 0 .35rem; }
.save-performance-card__delta { font-size:.78rem; font-weight:700; }
.save-performance-card__delta.is-up { color:var(--ta-success); }
.save-performance-card__delta.is-down { color:#d94b56; }
.save-performance-card__compare { color:var(--ta-grey-500); font-size:.68rem; margin-top:.2rem; }
.analysis-chart-panel { padding:1rem 1.25rem; border-bottom:1px solid var(--ta-grey-200); }
.analysis-chart-panel__title { color:var(--ta-grey-600); font-size:.72rem; font-weight:700; margin-bottom:.75rem; }
.analysis-section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem .7rem; }
.analysis-section-heading strong { color:var(--ta-navy); font-size:.8rem; }
.analysis-section-heading span { color:var(--ta-grey-500); font-size:.68rem; }
.report-analysis-heading { padding-bottom:.45rem; }
.report-analysis-heading h3 { margin:0; text-transform:uppercase; letter-spacing:.04em; }
.report-analysis-heading p { margin:.12rem 0 .28rem; color:var(--ta-grey-500); font-size:.72rem; }
.report-analysis-nav { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.45rem; padding:0 1.25rem .55rem; }
.report-analysis-nav__card { min-height:74px; display:flex; align-items:flex-start; gap:.6rem; padding:.6rem .65rem; text-align:left; border:1px solid var(--ta-grey-200); border-radius:8px; background:#fff; color:var(--ta-navy); cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s; }
.report-analysis-nav__card:hover { border-color:var(--ta-gold); background:#fffdf8; box-shadow:0 2px 8px rgba(21,38,62,.06); }
.report-analysis-nav__icon { display:grid; place-items:center; flex:0 0 23px; width:23px; height:23px; color:var(--ta-navy); }
.report-analysis-nav__icon svg { width:21px; height:21px; }
.report-analysis-nav__card strong, .report-analysis-nav__card small { display:block; }
.report-analysis-nav__card strong { font-size:.72rem; line-height:1.2; }
.report-analysis-nav__card small { margin-top:.35rem; color:var(--ta-grey-500); font-size:.59rem; line-height:1.25; }
.report-analysis-nav__link { grid-column:1 / -1; justify-self:start; display:inline-block; border:0; padding:0; background:transparent; color:var(--ta-info); font-size:.68rem; font-weight:700; cursor:pointer; text-decoration:none; }
.report-analysis-nav__link span { margin-left:.3rem; font-size:1rem; vertical-align:-.08rem; }
.detailed-report-page { color:var(--ta-navy); }
.detailed-report-topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.detailed-report-breadcrumb { font-size:.68rem; color:var(--ta-grey-600); font-weight:600; }.detailed-report-breadcrumb a { color:var(--ta-info); text-decoration:none; }.detailed-report-breadcrumb span { margin:0 .35rem; color:var(--ta-grey-400); }
.detailed-report-range-select,.detailed-report-date { border:1px solid var(--ta-grey-200); border-radius:6px; padding:.42rem .55rem; color:var(--ta-grey-600); background:#fff; font-size:.63rem; }
.detailed-report-actions { display:flex; align-items:center; gap:.6rem; }.detailed-report-range { border:1px solid var(--ta-grey-200); border-radius:6px; padding:.45rem .65rem; color:var(--ta-grey-600); font-size:.63rem; background:#fff; }
.detailed-report-tabs { display:flex; gap:1.4rem; border-bottom:1px solid var(--ta-grey-200); margin-bottom:1rem; }.detailed-report-tabs a { padding:.45rem .15rem; color:var(--ta-grey-600); font-size:.68rem; font-weight:700; text-decoration:none; border-bottom:2px solid transparent; }.detailed-report-tabs a.is-active { color:var(--ta-info); border-color:var(--ta-info); }
.detailed-kpi { min-height:100px; display:flex; align-items:center; gap:.7rem; padding:.8rem; border:1px solid var(--ta-grey-200); border-radius:8px; background:#fff; }.detailed-kpi__icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:50%; background:#eef7f7; color:#2b9ac2; font-size:1.35rem; }.detailed-kpi small,.detailed-kpi strong,.detailed-kpi span,.detailed-kpi em { display:block; }.detailed-kpi small { color:var(--ta-grey-600); font-size:.58rem; font-weight:700; }.detailed-kpi strong { margin:.15rem 0; font-size:1.2rem; }.detailed-kpi span { font-size:.6rem; font-weight:700; }.detailed-kpi span.up { color:var(--ta-success); }.detailed-kpi span.down { color:var(--ta-error); }.detailed-kpi em { margin-top:.2rem; color:var(--ta-grey-500); font-size:.55rem; font-style:normal; }.detailed-panel { border:1px solid var(--ta-grey-200); border-radius:8px; background:#fff; overflow:hidden; }.detailed-grid-top,.detailed-grid-bottom { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }.detailed-panel__filters { display:flex; gap:.6rem; padding:.8rem; border-bottom:1px solid var(--ta-grey-200); }.detailed-panel__filters span { min-width:115px; padding:.45rem .6rem; border:1px solid var(--ta-grey-200); border-radius:5px; color:var(--ta-grey-500); font-size:.56rem; }.detailed-panel__filters b { color:var(--ta-navy); font-size:.66rem; }.detailed-panel__title { display:flex; justify-content:space-between; gap:1rem; padding:.85rem .9rem .55rem; }.detailed-panel__title strong { font-size:.72rem; }.detailed-panel__title small { color:var(--ta-grey-500); font-size:.58rem; }.detailed-table th,.detailed-table td { padding:.55rem .75rem; font-size:.65rem; }.detailed-mini-chart { height:190px; display:flex; align-items:flex-end; gap:7px; padding:1rem; border-top:1px solid var(--ta-grey-100); }.detailed-mini-chart i { flex:1; min-width:3px; background:#2b9ac2; border-radius:3px 3px 0 0; }
/* Performance tables can be swiped horizontally on smaller screens. Keep the
   dimension/name column visible while the metric columns move underneath it. */
.table-responsive .detailed-table th:first-child,
.table-responsive .detailed-table td:first-child,
.table-responsive .detailed-cross-table th:first-child,
.table-responsive .detailed-cross-table td:first-child,
.detailed-grid-bottom .detailed-panel > .detailed-table th:first-child,
.detailed-grid-bottom .detailed-panel > .detailed-table td:first-child,
.detailed-grid-bottom .detailed-table-scroll > .detailed-table th:first-child,
.detailed-grid-bottom .detailed-table-scroll > .detailed-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 4px 0 8px rgba(21, 38, 62, .08);
    white-space: nowrap;
}
.table-responsive .detailed-table thead th:first-child,
.table-responsive .detailed-cross-table thead th:first-child,
.detailed-grid-bottom .detailed-panel > .detailed-table thead th:first-child,
.detailed-grid-bottom .detailed-table-scroll > .detailed-table thead th:first-child {
    z-index: 4;
    background: var(--ta-grey-50);
}
.detailed-grid-bottom > .detailed-panel { min-width: 0; }
.detailed-grid-bottom .detailed-panel { overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.detailed-grid-bottom .detailed-panel > .detailed-table { width: max-content; min-width: 680px; max-width: none; table-layout: auto; }
.detailed-grid-bottom .detailed-panel > .detailed-table th,
.detailed-grid-bottom .detailed-panel > .detailed-table td { white-space: nowrap; }
.detailed-table-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.detailed-table-scroll > .detailed-table { width: max-content; min-width: 680px; max-width: none; table-layout: auto; }
.detailed-table-scroll > .detailed-table th,
.detailed-table-scroll > .detailed-table td { white-space: nowrap; }

/* Keep the first dimension readable while horizontal table metrics are scrolled.
   The scroll container must be the direct parent of the table; Bootstrap's
   responsive wrapper applies offsets in some layouts and makes sticky cells
   slide beyond the panel edge. */
.detailed-table-scroll {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100%;
    isolation: isolate;
    /* Always reserve a visible horizontal track. This makes it clear that
       additional metrics are available to the right on every detailed report. */
    overflow-x: scroll !important;
    overflow-y: hidden;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.detailed-table-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.detailed-table-scroll::-webkit-scrollbar-track { margin: 0 .65rem; border-radius: 99px; background: #eef1f5; }
.detailed-table-scroll::-webkit-scrollbar-thumb { border: 3px solid #eef1f5; border-radius: 99px; background: #8796a9; }
.detailed-table-scroll::-webkit-scrollbar-thumb:hover { background: #52647a; }
.detailed-table-scroll__proxy {
    display: block;
    width: 100%;
    height: 14px;
    margin-top: 2px;
    padding: 3px 0;
    border-radius: 99px;
    background: #eef1f5;
    cursor: grab;
    user-select: none;
    touch-action: pan-x;
}
.detailed-table-scroll__proxy.is-dragging { cursor: grabbing; }
.detailed-table-scroll__proxy-thumb {
    display: block;
    height: 8px;
    min-width: 34px;
    border-radius: 99px;
    background: #8796a9;
    transform: translateX(0);
    will-change: transform, width;
}
.detailed-table-scroll__proxy:hover .detailed-table-scroll__proxy-thumb { background: #52647a; }
.detailed-table-scroll > .detailed-table {
    width: max-content;
    min-width: 680px;
    max-width: none;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}
.detailed-table-scroll > .detailed-table th:first-child,
.detailed-table-scroll > .detailed-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: 240px;
    background: #fff;
    background-clip: padding-box;
    box-shadow: 5px 0 10px rgba(21, 38, 62, .10);
}
.detailed-table-scroll > .detailed-table thead th:first-child {
    z-index: 5;
    background: var(--ta-grey-50);
}
.detailed-table-scroll > .detailed-table tbody tr:hover td:first-child {
    background: var(--ta-grey-50);
}
@media (max-width: 991px) {
    .table-responsive .detailed-table,
    .table-responsive .detailed-cross-table,
    .detailed-grid-bottom .detailed-panel > .detailed-table,
    .detailed-table-scroll > .detailed-table { min-width: 680px; }
}
@media(max-width:767px){.detailed-report-topbar,.detailed-grid-top,.detailed-grid-bottom{display:block}.detailed-report-actions{margin-top:.6rem}.detailed-grid-top>*+*,.detailed-grid-bottom>*+*{margin-top:1rem}.detailed-panel__filters{overflow-x:auto}.detailed-report-tabs{gap:.7rem;overflow-x:auto;white-space:nowrap}}
@media (max-width: 767px) { .report-analysis-nav { grid-template-columns:repeat(2, minmax(0,1fr)); padding-left:.9rem; padding-right:.9rem; } .report-analysis-nav__link { grid-column:1 / -1; } }
.analysis-two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; padding:1rem 1.25rem; }
.detailed-grid-top .detailed-table th:not(:first-child), .detailed-grid-top .detailed-table td:not(:first-child) { text-align:center !important; }
.detailed-grid-bottom .detailed-table th:not(:first-child), .detailed-grid-bottom .detailed-table td:not(:first-child), .detailed-cross-table th:not(:first-child), .detailed-cross-table td:not(:first-child) { text-align:center !important; }
.detailed-cross-table th:first-child, .detailed-cross-table td:first-child { white-space:nowrap !important; }
.detailed-cross-table-scroll { overflow-x:scroll; }
.detailed-cross-table-scroll > .detailed-cross-table {
    width:100%;
    min-width:840px;
    table-layout:fixed;
}
.detailed-cross-table th,
.detailed-cross-table td { min-width:0; }
.detailed-cross-table th:first-child,
.detailed-cross-table td:first-child { width:22%; min-width:240px; }
.detailed-cross-table th:last-child,
.detailed-cross-table td:last-child { width:7%; min-width:72px; }
.detailed-cross-table thead th { white-space:normal !important; line-height:1.25; }
.detailed-cross-column-name,
.detailed-cross-row-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detailed-cross-row-name { padding:.1rem .25rem; color:var(--ta-navy); font-weight:700; }
.detailed-table th:nth-child(2), .detailed-table td:nth-child(2) { white-space:nowrap !important; }
.analysis-two-col .analysis-chart-panel { min-width:0; padding:0; border:1px solid var(--ta-grey-200); border-radius:.5rem; overflow:hidden; }
.offer-line-chart { height:250px; margin:.15rem 1.25rem .5rem; padding:.2rem 0; overflow:visible; }
.ta-report-chartjs { position:relative; width:100%; height:250px; max-height:250px; overflow:hidden; }
.ta-chartjs-canvas { display:block; width:100% !important; height:250px !important; max-height:250px; min-height:0; }
.ta-chartjs-canvas + svg, .ta-chartjs-canvas + .ta-line-chart { display:none !important; }
.offer-line-chart svg { width:100%; height:100%; display:block; overflow:visible; }
.analysis-line-legend { display:flex; flex-wrap:wrap; gap:.35rem .8rem; padding:0 1.25rem 1rem; color:var(--ta-grey-600); font-size:.67rem; }
.analysis-line-legend span { display:inline-flex; align-items:center; gap:.3rem; max-width:14rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.analysis-line-legend i { width:.45rem; height:.45rem; border-radius:50%; flex:0 0 auto; }
.feedback-page { width:100%; max-width:none; margin:0; color:#223247; }
.feedback-page__header { margin:0 0 .7rem; }
.feedback-page__header h2 { margin:0; font-family:'Tex Gyre Termes',Georgia,serif; font-size:1.38rem; font-weight:600; color:#1a2b40; }
.feedback-page__header p { margin:.15rem 0 0; color:#8491a0; font-size:.68rem; }
.feedback-page__grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(260px,1fr); gap:1.25rem; align-items:start; }
.feedback-form-card,.feedback-aside-card { background:#fff; border:1px solid #e5eaf0; border-radius:.18rem; box-shadow:0 1px 2px rgba(18,36,55,.03); }
.feedback-form-card__body { padding:1.2rem 1.3rem 1rem; }
.feedback-number-label { display:block; margin:0 0 .55rem; color:#435268; font-size:.84rem; font-weight:700; }
.feedback-number-label small { font-weight:400; color:#9aa5b2; }
.feedback-type-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-bottom:1.15rem; }
.feedback-type-card { display:flex; align-items:center; gap:.75rem; min-height:5.2rem; padding:.75rem .8rem; text-align:left; background:#fff; border:1px solid #e8e1d4; border-radius:.18rem; color:#1f3045; transition:.15s; }
.feedback-type-card:hover,.feedback-type-card.is-selected { border-color:#d7a447; box-shadow:0 0 0 1px rgba(215,164,71,.18); background:#fffdfa; }
.feedback-type-card__icon { width:2.25rem; height:2.25rem; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#fbf4e5; color:#c79a44; }
.feedback-type-card__icon svg { width:1.2rem; height:1.2rem; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.feedback-type-card strong,.feedback-type-card small { display:block; }
.feedback-type-card strong { font-size:.79rem; font-weight:700; }
.feedback-type-card small { margin-top:.17rem; color:#8a96a5; font-size:.67rem; line-height:1.32; }
.feedback-two-col { display:grid; grid-template-columns:1.12fr .88fr; gap:1rem; align-items:end; margin-bottom:1rem; }
.feedback-two-col .select2-container .select2-selection--single,.feedback-two-col .form-select { min-height:2.6rem; }
.feedback-two-col .select2-selection__rendered { line-height:2.5rem !important; font-size:.82rem; }
.feedback-two-col .select2-selection__arrow { height:2.5rem !important; }
.feedback-tip { display:flex; align-items:flex-start; gap:.6rem; min-height:2.65rem; padding:.6rem .7rem; border:1px solid #dce8ee; border-radius:.16rem; background:#f7fafb; }
.feedback-tip > i { display:grid; place-items:center; width:1.05rem; height:1.05rem; border:1px solid #8eabb9; border-radius:50%; color:#7599aa; font-family:Georgia,serif; font-size:.74rem; font-style:normal; font-weight:700; }
.feedback-tip strong,.feedback-tip span { display:block; font-size:.69rem; line-height:1.32; }
.feedback-tip strong { color:#53677a; font-weight:700; }
.feedback-tip span { color:#8995a2; margin-top:.12rem; }
.feedback-details { margin-bottom:.95rem; }
.feedback-details textarea { min-height:6rem; resize:vertical; font-size:.8rem; border-color:#e2e7ed; border-radius:.16rem; }
.feedback-details > small { display:block; color:#9ca7b3; font-size:.67rem; text-align:right; margin-top:.2rem; }
.feedback-bottom-row { margin-bottom:1rem; }
.feedback-upload { min-height:5.85rem; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #c9d8e3; border-radius:.16rem; background:#f7fbfe; color:#637889; cursor:pointer; transition:.15s; }
.feedback-upload:hover,.feedback-upload.is-dragging { border-color:var(--ta-gold); background:#fffaf0; }
.feedback-upload svg { width:1.45rem; height:1.45rem; fill:none; stroke:#658397; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.16rem; }
.feedback-upload b { font-size:.75rem; color:#526575; }.feedback-upload small { margin-top:.1rem; font-size:.64rem; color:#96a4af; }
.feedback-upload .feedback-attachment-limit-error { color:#c84b4b; }
.feedback-attachment-list { display:flex; flex-direction:column; gap:.35rem; margin-top:.45rem; color:#718294; font-size:.65rem; }
.feedback-attachment-item { display:flex; align-items:center; justify-content:space-between; gap:.7rem; min-width:0; padding:.3rem .45rem; border:1px solid #e1e7ee; border-radius:.35rem; background:#fbfcfd; }
.feedback-attachment-item > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feedback-attachment-actions { display:flex; align-items:center; flex:0 0 auto; gap:.45rem; }
.feedback-attachment-action { border:0; padding:0; color:#1d6fd1; background:transparent; font:inherit; font-size:.64rem; cursor:pointer; text-decoration:none; }
.feedback-attachment-action.is-danger { color:#c84b4b; }
.feedback-stars { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:min(100%,18rem); gap:.2rem; padding-top:.1rem; }
.feedback-stars button { display:flex; width:100%; min-width:0; flex-direction:column; align-items:center; justify-content:flex-start; border:0; padding:0; background:none; }
.feedback-stars svg { display:block; width:1.65rem; height:1.65rem; overflow:visible; }
.feedback-stars small { display:block; color:#8c97a3; font-size:.64rem; line-height:1.1; margin-top:.28rem; }
.feedback-scale { display:flex; justify-content:space-between; width:min(100%,18rem); max-width:none; color:#9da7b0; font-size:.64rem; line-height:1.2; margin-top:.2rem; }
.feedback-consent { display:flex; align-items:flex-start; gap:.55rem; padding-top:.7rem; border-top:1px solid #edf0f3; color:#657586; font-size:.72rem; }.feedback-consent input { accent-color:#cfa04a; margin-top:.1rem; }.feedback-consent small { display:block; margin-top:.12rem; color:#9aa6b1; font-size:.63rem; }
.feedback-information-list { gap:.45rem; line-height:1.42; }
.feedback-information-list > i { display:grid; place-items:center; width:1.05rem; height:1.05rem; flex:0 0 auto; border:1px solid #90a2b4; border-radius:50%; color:#71869b; font-style:normal; font-size:.68rem; font-weight:700; }
.feedback-form-card__footer { display:flex; justify-content:space-between; padding:.85rem 1.3rem; border-top:1px solid #edf0f3; }.feedback-form-card__footer .btn { min-width:5.4rem; font-size:.76rem; padding:.45rem .9rem; }
.feedback-page__aside { display:flex; flex-direction:column; gap:1.1rem; }.feedback-aside-card { padding:1.3rem 1.2rem; }.feedback-aside-card h3 { margin:0 0 1rem; font-size:1rem; font-weight:700; color:#304155; }
.feedback-side-list { display:flex; flex-direction:column; gap:1.1rem; }.feedback-side-list > div { display:flex; align-items:flex-start; gap:.8rem; }.feedback-side-list section { min-width:0; }.feedback-side-list b,.feedback-side-list span { display:block; }.feedback-side-list b { color:#4d5e70; font-size:.86rem; font-weight:700; }.feedback-side-list span { margin-top:.18rem; color:#929eaa; font-size:.76rem; line-height:1.4; }
.feedback-aside-icon { display:grid; place-items:center; width:2.1rem; height:2.1rem; flex:0 0 auto; border-radius:50%; font-style:normal; font-size:1rem; }.feedback-aside-icon.is-gold { color:#be9449; background:#fbf2dc; }.feedback-aside-icon.is-amber { color:#bf8e3f; background:#fdf0db; }.feedback-aside-icon.is-green { color:#4d9e76; background:#e7f5ec; }.feedback-aside-card--safe { background:#fffdfa; }
.ta-topbar__title small { display:block; margin-top:.15rem; color:var(--ta-grey-500); font-size:.78rem; font-weight:400; line-height:1.2; }
.ta-topbar__title--with-subtitle { flex-direction:column; align-items:flex-start; gap:0; }
@media (max-width:800px) { .feedback-page__grid { grid-template-columns:1fr; }.feedback-page__aside { display:grid; grid-template-columns:1fr 1fr; }.feedback-type-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .feedback-two-col,.feedback-page__aside { grid-template-columns:1fr; } }
.cross-breakdown-toolbar { display:flex; flex-wrap:wrap; gap:.65rem; padding:1rem 1.25rem .75rem; border-bottom:1px solid var(--ta-grey-200); }
.cross-breakdown-toolbar > div { min-width:8rem; padding:.45rem .65rem; border:1px solid var(--ta-grey-200); border-radius:.35rem; background:#fff; }
.cross-breakdown-toolbar small { display:block; color:var(--ta-grey-500); font-size:.62rem; }
.cross-breakdown-toolbar strong { display:block; color:var(--ta-navy); font-size:.72rem; margin-top:.15rem; }
.cross-matrix-wrap { padding:0 1.25rem; }
.cross-matrix th, .cross-matrix td { white-space:nowrap; }
.cross-chart { padding:0 1.25rem 1.25rem; }
.cross-chart-row { display:flex; align-items:flex-end; gap:.75rem; min-height:5rem; border-bottom:1px solid var(--ta-grey-100); padding:.55rem 0; }
.cross-chart-label { width:10rem; flex:0 0 10rem; color:var(--ta-navy); font-size:.7rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cross-chart-bars { align-self:stretch; display:flex; align-items:flex-end; gap:.45rem; min-width:0; flex:1; }
.cross-chart-bar-group { position:relative; display:flex; align-items:center; flex-direction:column; justify-content:flex-end; height:4rem; min-width:2rem; flex:1; }
.cross-chart-bar-group i { display:block; width:1rem; min-height:2px; border-radius:.15rem .15rem 0 0; }
.cross-chart-bar-group small { position:absolute; bottom:-.9rem; color:var(--ta-grey-500); font-size:.55rem; }
@media (max-width: 900px) { .analysis-two-col { grid-template-columns:1fr; } }
.analysis-bar-row { display:grid; grid-template-columns:minmax(120px, .8fr) minmax(120px, 2fr) 45px; align-items:center; gap:.7rem; margin:.55rem 0; }
.analysis-bar-row > span { color:var(--ta-navy); font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.analysis-bar-row > b { color:var(--ta-navy); font-size:.74rem; text-align:right; }
.analysis-bar-track { height:8px; background:#f0f2f5; border-radius:99px; overflow:hidden; }
.analysis-bar-track i { display:block; height:100%; background:var(--ta-gold); border-radius:99px; }
.analysis-bar-track--navy i { background:var(--ta-navy); }
.analysis-stacked-track { height:18px; display:flex; overflow:hidden; border-radius:99px; background:#f0f2f5; }
.analysis-stacked-track i { display:block; min-width:2px; background:var(--ta-gold); border-right:2px solid #fff; }
.analysis-stacked-track i:nth-child(2n) { background:#3c8bb0; }
.analysis-stacked-track i:nth-child(3n) { background:#8a78be; }
.analysis-legend { display:flex; flex-wrap:wrap; gap:.55rem 1rem; margin-top:.65rem; }
.analysis-legend span { color:var(--ta-grey-600); font-size:.68rem; }
.analysis-legend i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ta-gold); margin-right:.25rem; }

/* ============================================================
   Tier cards (membership cards)
   ============================================================ */
.ta-tier-card {
    border-radius: 14px; padding: 1.1rem 1.2rem; color:#fff; min-height: 130px;
    display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
    box-shadow: var(--ta-shadow);
}
.ta-tier-card small { font-size: .58rem; letter-spacing: .2em; opacity: .8; }
.ta-tier-card .name { font-family:'Avenir'; font-weight:700; font-size:1.15rem; letter-spacing:.05em; }
.ta-tier-card .meta { font-size:.7rem; opacity:.85; }
.ta-tier-card .chip { width:26px; height:18px; border-radius:4px; background: rgba(255,255,255,.35); }
.ta-tier-card--classic  { background: linear-gradient(135deg,#EFE6D2,#D9C9A6); color:#5A4413; }
.ta-tier-card--silver   { background: linear-gradient(135deg,#D7DBE0,#AEB6C0); color:#33373D; }
.ta-tier-card--gold     { background: linear-gradient(135deg,#E7C76B,#B98E32); color:#43320C; }
.ta-tier-card--platinum { background: linear-gradient(135deg,#233A5E,#15263E); }
.ta-tier-card--black    { background: linear-gradient(135deg,#2A2A2A,#000); color:#D9C48E; }

/* ============================================================
   Misc helpers
   ============================================================ */
.ta-divider { height:1px; background: var(--ta-grey-200); margin: 1.25rem 0; border:0; }
.ta-progress { height: 7px; background: var(--ta-grey-100); border-radius: 999px; overflow:hidden; }
.ta-progress > span { display:block; height:100%; background: var(--ta-gold); border-radius:999px; }
.ta-bar-track { background: var(--ta-grey-100); border-radius: 6px; height: 8px; overflow: hidden; }
.ta-bar-track > span { display:block; height:100%; border-radius:6px; }

/* Vertical bar chart (CSS-only, mock data) */
.ta-chart { display:flex; align-items:flex-end; gap:.55rem; height:170px; padding-top:.5rem; }
.ta-chart .bar { flex:1; background: linear-gradient(180deg, var(--ta-navy-soft), var(--ta-navy)); border-radius: 5px 5px 0 0; min-height:4px; position:relative; }
.ta-chart .bar.is-gold { background: linear-gradient(180deg, var(--ta-gold-soft), var(--ta-gold)); }
.ta-chart .bar .ta-bar-val { position:absolute; top:-1.05rem; left:50%; transform:translateX(-50%); font-size:.6rem; font-weight:700; color: var(--ta-navy); white-space:nowrap; pointer-events:none; }
.ta-chart-labels { display:flex; gap:.55rem; margin-top:.4rem; }
.ta-chart-labels span { flex:1; text-align:center; font-size:.66rem; color: var(--ta-grey-500); }

/* Grouped bar chart (e.g. New vs Active members) */
.ta-chart-group { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100%; }
.ta-chart-group .bar { flex:0 0 9px; border-radius:4px 4px 0 0; min-height:4px; }
.ta-legend { display:flex; gap:1.1rem; align-items:center; }
.ta-legend span { display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; color:var(--ta-grey-600); font-weight:600; }
.ta-legend span::before { content:''; width:11px; height:11px; border-radius:3px; background:var(--lg, #ccc); }

/* Donut (conic gradient) */
.ta-donut { width: 150px; height: 150px; border-radius: 50%; position: relative; margin: 0 auto; }
.ta-donut::after { content:''; position:absolute; inset: 26px; background:#fff; border-radius:50%; }
.ta-donut__center { position:absolute; inset:0; display:grid; place-items:center; z-index:1; text-align:center; }
.report-member-donut-layout { display:flex; align-items:center; justify-content:center; gap:2rem; min-height:170px; }
.report-member-donut { width:150px; height:150px; flex:0 0 150px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#168bd0 0 var(--new-pct), #3eaa70 var(--new-pct) 100%); position:relative; }
.report-member-donut::after { content:''; position:absolute; inset:27px; border-radius:50%; background:#fff; }
.report-member-donut__center { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; line-height:1.1; color:var(--ta-navy); }
.report-member-donut__center strong { font-size:1.15rem; }
.report-member-donut__center small { margin-top:.2rem; color:var(--ta-grey-600); font-size:.62rem; }
.report-member-legend { display:flex; flex-direction:column; gap:1rem; }
.report-member-legend > div { display:flex; align-items:flex-start; gap:.55rem; }
.report-member-legend__dot { width:12px; height:12px; flex:0 0 12px; margin-top:.15rem; border-radius:50%; }
.report-member-legend__dot--new { background:#168bd0; }
.report-member-legend__dot--returning { background:#3eaa70; }
.report-member-legend strong, .report-member-legend small { display:block; }
.report-member-legend strong { color:var(--ta-navy); font-size:.7rem; }
.report-member-legend small { color:var(--ta-grey-600); font-size:.65rem; margin-top:.12rem; }
@media (max-width: 767px) { .report-member-donut-layout { gap:1rem; } .report-member-donut { width:125px; height:125px; flex-basis:125px; } .report-member-donut::after { inset:23px; } }

/* Detailed Analysis line chart and KPI icon treatment. */
.detailed-kpi__icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.detailed-line-chart { height:190px; padding:.7rem .9rem 0; border-top:1px solid var(--ta-grey-100); }
.detailed-line-chart svg { width:100%; height:100%; display:block; }
.detailed-line-legend { display:flex; flex-wrap:wrap; gap:.35rem .8rem; padding:.25rem .9rem .8rem; color:var(--ta-grey-600); font-size:.58rem; }
.detailed-line-legend span { display:inline-flex; align-items:center; gap:.3rem; }
.detailed-line-legend i { width:7px; height:7px; border-radius:50%; }
.detailed-tier-legend { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .75rem; padding:.2rem .9rem .45rem; color:var(--ta-grey-600); font-size:.58rem; }
.detailed-tier-legend__item { display:inline-flex; align-items:center; gap:.3rem; padding:0; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.detailed-tier-legend__item:hover { color:var(--ta-navy); }
.detailed-tier-legend__item.is-hidden { opacity:.42; }
.detailed-tier-legend__item .ta-tier-badge { height:15px; }
.detailed-tier-legend__item .ta-tier { font-size:.52rem; padding:.12rem .3rem; }
.detailed-tier-legend--cross { justify-content:center; padding-bottom:.25rem; }
.detailed-grid-top { grid-template-columns:repeat(2,minmax(0,1fr)); }
.detailed-line-legend--top { padding:.05rem .9rem .35rem; }
.detailed-line-chart { height:250px; border-top:0; padding:.35rem .9rem 0; overflow:visible; }
.detailed-time-series-table { border-top:1px solid var(--ta-grey-100); padding:0 .9rem .9rem; }
.detailed-time-series-table__heading { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.8rem 0 .45rem; }
.detailed-time-series-table__heading strong { color:var(--ta-navy); font-size:.68rem; }
.detailed-time-series-table__heading small { color:var(--ta-grey-500); font-size:.58rem; }
.detailed-time-series-table__grid { width:max-content; min-width:100%; table-layout:auto; }
.detailed-time-series-table__grid th, .detailed-time-series-table__grid td { white-space:nowrap; text-align:center !important; }
.detailed-time-series-table__grid th:first-child, .detailed-time-series-table__grid td:first-child { text-align:left !important; min-width:105px; }
.detailed-time-series-table__grid th { max-width:145px; width:145px; white-space:normal !important; line-height:1.2; vertical-align:middle; overflow-wrap:anywhere; }
.detailed-time-series-table__grid th:first-child { width:auto; max-width:none; }
.detailed-time-series-table__label { display:inline; white-space:normal; overflow-wrap:anywhere; }
.detailed-time-series-table__dot { display:inline-block; width:7px; height:7px; margin-right:.25rem; border-radius:50%; background:var(--series-color); }
.detailed-chart-viewby { display:flex; align-items:center; gap:.25rem; }.detailed-chart-viewby span { color:var(--ta-grey-500); font-size:.58rem; }.detailed-chart-viewby button,.detailed-peak-filters button { border:1px solid var(--ta-grey-200); border-radius:5px; padding:.25rem .45rem; background:#fff; color:var(--ta-grey-600); font-size:.56rem; }.detailed-chart-viewby button.is-active,.detailed-peak-filters button.is-active { background:var(--ta-navy); border-color:var(--ta-navy); color:#fff; }.detailed-peak-filters { display:flex; align-items:center; gap:.25rem; }.detailed-peak-filters span { color:var(--ta-grey-500); font-size:.58rem; }
.detailed-chart-controls { display:flex; align-items:center; justify-content:flex-end; gap:.3rem; margin:-.35rem 0 .55rem; }.detailed-chart-controls span { color:var(--ta-grey-500); font-size:.62rem; }.detailed-chart-controls button { border:1px solid var(--ta-grey-200); border-radius:5px; padding:.28rem .55rem; background:#fff; color:var(--ta-grey-600); font-size:.6rem; cursor:pointer; }.detailed-chart-controls button.is-active { background:var(--ta-navy); border-color:var(--ta-navy); color:#fff; }
.detailed-chart-viewby { display:flex; align-items:center; gap:.25rem; }
.detailed-chart-controls { display:none; }
.detailed-grid-bottom .detailed-panel__title small { display:none; }
.detailed-grid-top > .detailed-panel:nth-child(2) .detailed-panel__title small { display:none; }
.detailed-kpi { min-height:108px; padding:.85rem .9rem; box-shadow:0 1px 3px rgba(21,38,62,.035); }
.detailed-kpi__icon { width:42px; height:42px; flex-basis:42px; }
.detailed-kpi__icon svg { width:23px; height:23px; }
.detailed-kpi:nth-child(1) .detailed-kpi__icon { color:#36a5a4; background:#e4f5f2; }
.detailed-kpi:nth-child(2) .detailed-kpi__icon { color:#438bc5; background:#e7f1fb; }
.detailed-kpi:nth-child(3) .detailed-kpi__icon { color:#8d72c5; background:#f0eafa; }
.detailed-kpi:nth-child(4) .detailed-kpi__icon { color:#d89b43; background:#fff1dc; }
.detailed-kpi strong { font-size:1.35rem; line-height:1.1; }
.detailed-grid-top { align-items:start; }
.detailed-grid-bottom { align-items:start; }
.detailed-grid-top > .detailed-panel:nth-child(2) { display:block; min-height:0; }
.detailed-grid-top > .detailed-panel:nth-child(2) .detailed-line-chart { height:350px; min-height:0; padding:1rem 1.2rem 1.1rem; box-sizing:border-box; }
.detailed-grid-top > .detailed-panel:nth-child(2) .ta-chartjs-canvas { height:100% !important; max-height:none; }
.detailed-kpi small { font-size:.59rem; letter-spacing:.01em; }
.detailed-kpi em { font-size:.57rem; }
.detailed-kpi { position:relative; overflow:visible; }
.detailed-kpi__info { position:absolute; top:.65rem; right:.65rem; z-index:31; width:12px; height:12px; font-size:.5rem; }
.detailed-kpi__tooltip { position:absolute; z-index:30; top:1.9rem; right:0; width:220px; padding:.65rem .7rem; border:1px solid var(--ta-grey-200); border-radius:6px; background:#fff; box-shadow:0 8px 22px rgba(21,38,62,.16); color:var(--ta-grey-700); font-size:.62rem; font-weight:400; letter-spacing:0; line-height:1.35; text-align:left; text-transform:none; opacity:0; pointer-events:none; visibility:hidden; transform:translateY(-3px); transition:opacity .15s ease, transform .15s ease, visibility .15s ease; }
.detailed-kpi__tooltip::before { content:''; position:absolute; top:-5px; right:9px; width:8px; height:8px; border-top:1px solid var(--ta-grey-200); border-left:1px solid var(--ta-grey-200); background:#fff; transform:rotate(45deg); }
.detailed-kpi__tooltip strong, .detailed-kpi__tooltip b, .detailed-kpi__tooltip span { display:block; }
.detailed-kpi__tooltip strong { margin-bottom:.3rem; color:var(--ta-navy); font-size:.64rem; }
.detailed-kpi__tooltip b { margin-top:.45rem; color:var(--ta-navy); font-size:.59rem; }
.detailed-kpi__info:hover + .detailed-kpi__tooltip, .detailed-kpi__info:focus + .detailed-kpi__tooltip, .detailed-kpi__tooltip:hover { opacity:1; pointer-events:auto; visibility:visible; transform:translateY(0); }
.detailed-cross-panel { overflow:visible; }
.detailed-cross-toolbar { position:relative; z-index:20; display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem; padding:.8rem .9rem .65rem; border-bottom:1px solid var(--ta-grey-200); overflow:visible; }
.detailed-cross-toolbar label { display:flex; flex-direction:column; gap:.25rem; min-width:125px; color:var(--ta-grey-500); font-size:.56rem; font-weight:600; }
.detailed-cross-toolbar select { min-height:32px; padding:.35rem 1.8rem .35rem .55rem; border:1px solid var(--ta-grey-200); border-radius:5px; background:#fff; color:var(--ta-navy); font-size:.65rem; }
.detailed-cross-toolbar .detailed-cross-select { width:100%; }
.detailed-cross-toolbar .detailed-cross-select .select2-container { width:100% !important; }
.detailed-cross-toolbar .detailed-cross-select .select2-selection--single { min-height:32px; padding:.35rem .55rem; border-radius:5px; }
.detailed-cross-toolbar .detailed-cross-select .select2-selection__rendered { color:var(--ta-navy); font-size:.65rem; line-height:1.35; }
.detailed-cross-toolbar .select2-container--open { z-index:4000 !important; }
.detailed-cross-panel > .detailed-table-scroll { position:relative; z-index:1; }
.detailed-cross-table-heading { padding:.7rem .9rem .2rem; color:var(--ta-navy); font-size:.68rem; font-weight:700; }
.detailed-cross-table-heading--percentage { margin-top:.8rem; border-top:1px solid var(--ta-grey-200); padding-top:.9rem; }
.detailed-cross-toolbar__outlet { min-width:145px; }
.detailed-cross-reset { align-self:flex-end; min-height:32px; padding:.35rem .4rem; border:0; background:transparent; color:#159b9b; font-size:.62rem; font-weight:700; }
.detailed-cross-subtoolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; padding:.55rem .9rem; border-bottom:1px solid var(--ta-grey-200); color:var(--ta-grey-600); font-size:.58rem; }
.detailed-cross-subtoolbar > span:first-child { color:var(--ta-navy); font-weight:700; }
.detailed-cross-toggle,.detailed-cross-chart-toggle { display:flex; align-items:center; gap:.25rem; margin-left:auto; }
.detailed-cross-toggle button,.detailed-cross-chart-toggle button { padding:.25rem .5rem; border:1px solid var(--ta-grey-200); border-radius:4px; background:#fff; color:var(--ta-navy); font-size:.57rem; }
.detailed-cross-toggle button.is-active,.detailed-cross-chart-toggle button.is-active { border-color:#159b9b; background:#159b9b; color:#fff; }
.detailed-cross-scale { display:flex; align-items:center; gap:.3rem; }
.detailed-cross-scale i { display:block; width:58px; height:7px; border-radius:5px; background:linear-gradient(90deg,#e8f7f6,#159b9b); }
.detailed-cross-chart-toggle { margin-left:0; }
.detailed-cross-chart-toggle > span { color:var(--ta-grey-500); font-size:.58rem; }
.detailed-cross-cell { background:rgba(48,174,187,var(--cell,.05)); }
.detailed-cross-cell--0 { background:#f7fafb; }
.detailed-cross-cell--1 { background:#e3f3f3; }
.detailed-cross-cell--2 { background:#c1e6e5; }
.detailed-cross-cell--3 { background:#8ed1d0; }
.detailed-cross-cell--4 { background:#58b9bb; }
.detailed-cross-total td { background:#f7f9fb; border-top:2px solid var(--ta-grey-200); }
.detailed-cross-chart-panel { margin-top:1rem; }
.detailed-cross-chartjs { height:300px; padding:.2rem .8rem .8rem; }
.detailed-cross-chartjs canvas { width:100% !important; height:100% !important; }
.detailed-cross-bottom-grid { display:grid; grid-template-columns:minmax(0, 2.2fr) minmax(220px, .8fr); gap:1rem; margin-top:1rem; }
.detailed-cross-bottom-grid .detailed-cross-chart-panel { margin-top:0; }
.detailed-analysis-help__body { padding:.85rem .9rem; color:var(--ta-grey-600); font-size:.62rem; line-height:1.45; }
.detailed-analysis-help h3 { margin:0 0 .6rem; color:var(--ta-navy); font-size:.72rem; }
.detailed-analysis-help h3 .ta-info-dot { display:inline-grid; margin-left:.2rem; vertical-align:1px; }
.detailed-analysis-help p { margin:0 0 .65rem; }
.detailed-analysis-help dl { margin:0; }
.detailed-analysis-help dt { color:var(--ta-navy); font-weight:700; }
.detailed-analysis-help dd { margin:0 0 .35rem; }
.detailed-analysis-tip { margin-top:.75rem; padding:.65rem .7rem; border-radius:5px; background:#e8f7f6; color:var(--ta-navy); }
.detailed-analysis-tip strong { display:block; margin-bottom:.35rem; }
.detailed-analysis-tip strong span { color:#159b9b; }
.detailed-analysis-tip p { margin-bottom:.25rem; }
.detailed-analysis-tip ul { margin:0; padding-left:1rem; }
@media(max-width:767px){.detailed-cross-bottom-grid{display:block}.detailed-cross-bottom-grid .detailed-analysis-help{margin-top:1rem}}
.detailed-cross-legacy { display:none; }
.detailed-cross-chart { display:flex; align-items:flex-end; gap:1rem; min-height:220px; padding:1rem 1.2rem 1.8rem; overflow-x:auto; }
.detailed-cross-chart__group { display:flex; flex-direction:column; align-items:center; min-width:105px; height:180px; justify-content:flex-end; }
.detailed-cross-bars { display:flex; align-items:flex-end; gap:4px; height:150px; }
.detailed-cross-bars i { display:block; width:10px; min-height:3px; border-radius:3px 3px 0 0; }
.detailed-cross-chart__group > span { max-width:105px; margin-top:.45rem; color:var(--ta-grey-600); font-size:.56rem; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.detailed-name-cell { display:table-cell; white-space:nowrap !important; vertical-align:middle !important; }
.detailed-name-cell * { white-space:nowrap !important; vertical-align:middle; }
.detailed-name-cell .detailed-offer-icon { display:inline-block; margin-right:.4rem; }
.detailed-nowrap-name-cell { white-space:nowrap; }
.detailed-offer-icon { display:inline-grid; place-items:center; width:16px; height:16px; flex:0 0 16px; color:var(--offer-color); font-size:.62rem; }
.detailed-view-all { display:inline-flex; align-items:center; gap:.35rem; margin:.05rem .9rem .7rem; color:var(--ta-info); font-size:.62rem; font-weight:700; text-decoration:none; }
.detailed-view-all:hover { color:var(--ta-navy); text-decoration:underline; }
.detailed-peak-filters { display:flex; gap:.25rem; align-items:center; }
.detailed-peak-filters button { border:1px solid var(--ta-grey-200); border-radius:999px; padding:.28rem .5rem; background:#fff; color:var(--ta-grey-600); font-size:.55rem; font-weight:700; }
.detailed-peak-filters button.is-active { border-color:var(--ta-info); background:var(--ta-info); color:#fff; }
.detailed-peak-filters > span { display:none; }
.detailed-peak-filters button:first-of-type { display:inline-block; }
.detailed-peak-filters::before { content:'View by:'; color:var(--ta-grey-500); font-size:.55rem; font-weight:700; margin-right:.15rem; }
.detailed-grid-bottom .detailed-panel__title:has(> strong + small) { flex-direction:column; align-items:flex-start; gap:.2rem; }
.detailed-grid-bottom .detailed-panel__title:has(> div:first-child) > div:first-child small { display:none !important; }
.detailed-grid-bottom .detailed-panel__title > div:first-child > strong::after { content:none; }
.detailed-peak-note { display:flex; gap:.45rem; padding:.65rem .85rem .8rem; border-top:1px solid var(--ta-grey-100); color:var(--ta-grey-500); font-size:.56rem; line-height:1.45; }
.detailed-peak-note span { color:var(--ta-grey-500); font-size:.7rem; }
.detailed-peak-panel { margin-bottom:1rem; }
.detailed-peak-tables { display:grid; gap:.7rem; padding:0 .9rem .9rem; }
.detailed-peak-tables--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.detailed-peak-tables--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.detailed-peak-table { min-width:0; overflow:hidden; border:1px solid var(--ta-grey-200); border-radius:6px; }
.detailed-peak-table__heading { display:flex; align-items:center; gap:.35rem; padding:.55rem .6rem; border-bottom:1px solid var(--ta-grey-200); color:var(--ta-navy); font-size:.62rem; }
.detailed-peak-table__icon { display:inline-grid; place-items:center; width:16px; height:16px; color:var(--ta-info); font-size:.8rem; line-height:1; }
.detailed-peak-table__icon--time { color:#159b9b; }
.detailed-peak-table__icon--month { color:#e5a13a; }
.detailed-peak-table .detailed-table { width:100%; table-layout:fixed; }
.detailed-peak-table .detailed-table th,.detailed-peak-table .detailed-table td { padding:.45rem .5rem; font-size:.58rem; }
.detailed-peak-table .detailed-table th:first-child,.detailed-peak-table .detailed-table td:first-child { width:46%; }
.detailed-peak-table .detailed-table th:nth-child(2),.detailed-peak-table .detailed-table td:nth-child(2) { width:31%; }
.detailed-peak-table .detailed-table th { white-space:normal; line-height:1.2; }
.detailed-grid-bottom .detailed-panel:only-child { grid-column:1/-1; }
.detailed-save-note { display:flex; align-items:center; gap:.45rem; padding:.65rem .85rem .8rem; border-top:1px solid var(--ta-grey-100); background:#f5faff; color:var(--ta-grey-600); font-size:.58rem; }
.detailed-save-note span { color:var(--ta-info); font-size:.75rem; }
.detailed-save-note strong { color:var(--ta-navy); }

/* Save Performance is a four-column full-width table; it does not need the
   horizontal scrollbar used by the wider analysis tables. */
.detailed-save-panel .detailed-table-scroll {
    overflow-x:hidden !important;
    overflow-y:visible;
    scrollbar-width:none;
}
.detailed-save-panel .detailed-table-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
.detailed-save-panel > .detailed-table-scroll__proxy { display:none !important; }
.detailed-save-panel .detailed-table-scroll > .detailed-table {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
}
.detailed-save-panel .detailed-table-scroll > .detailed-table th,
.detailed-save-panel .detailed-table-scroll > .detailed-table td { white-space:normal; }
.detailed-save-panel .detailed-table-scroll > .detailed-table th:first-child,
.detailed-save-panel .detailed-table-scroll > .detailed-table td:first-child {
    position:static !important;
    width:42% !important;
    min-width:0 !important;
    box-shadow:none !important;
}
.detailed-save-panel .detailed-table-scroll > .detailed-table th:nth-child(2),
.detailed-save-panel .detailed-table-scroll > .detailed-table td:nth-child(2) { width:17% !important; }
.detailed-save-panel .detailed-table-scroll > .detailed-table th:nth-child(3),
.detailed-save-panel .detailed-table-scroll > .detailed-table td:nth-child(3) { width:20% !important; }
.detailed-save-panel .detailed-table-scroll > .detailed-table th:nth-child(4),
.detailed-save-panel .detailed-table-scroll > .detailed-table td:nth-child(4) { width:21% !important; }

/* Cross-Breakdown fits all of its dimensions on desktop. Keep the table at
   the card width and remove the forced proxy scrollbar; narrow screens retain
   the existing horizontal scroll behaviour through the media-query rules. */
@media (min-width:768px) {
    .detailed-cross-panel > .detailed-cross-table-scroll {
        overflow-x:hidden !important;
        overflow-y:visible;
    }
    .detailed-cross-panel > .detailed-table-scroll__proxy { display:none !important; }
    .detailed-cross-panel > .detailed-cross-table-scroll > .detailed-cross-table {
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        table-layout:fixed;
    }
    .detailed-cross-panel > .detailed-cross-table-scroll > .detailed-cross-table th:first-child,
    .detailed-cross-panel > .detailed-cross-table-scroll > .detailed-cross-table td:first-child {
        min-width:0 !important;
        width:22% !important;
    }
}
@media(max-width:767px){.detailed-peak-tables--2,.detailed-peak-tables--3{grid-template-columns:1fr}.detailed-peak-table .detailed-table{table-layout:auto}.detailed-peak-table .detailed-table th:first-child,.detailed-peak-table .detailed-table td:first-child{width:auto}}

/* Peak tables fit all metrics inside their cards; they do not need the
   horizontal table scrollbar used by the wider analysis tables. */
.detailed-peak-table .detailed-table-scroll {
    overflow-x: hidden !important;
    overflow-y: visible;
    scrollbar-width: none;
}
.detailed-peak-table .detailed-table-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
.detailed-peak-table > .detailed-table-scroll__proxy { display:none !important; }
.detailed-peak-table .detailed-table-scroll > .detailed-table {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
}
.detailed-peak-table .detailed-table-scroll > .detailed-table th,
.detailed-peak-table .detailed-table-scroll > .detailed-table td {
    white-space:normal;
}
.detailed-peak-table .detailed-table-scroll > .detailed-table th:first-child,
.detailed-peak-table .detailed-table-scroll > .detailed-table td:first-child {
    position:static !important;
    width:55% !important;
    min-width:0 !important;
    box-shadow:none !important;
}
.detailed-peak-table .detailed-table-scroll > .detailed-table th:nth-child(2),
.detailed-peak-table .detailed-table-scroll > .detailed-table td:nth-child(2) { width:25% !important; }
.detailed-peak-table .detailed-table-scroll > .detailed-table th:nth-child(3),
.detailed-peak-table .detailed-table-scroll > .detailed-table td:nth-child(3) { width:20% !important; }

.ta-sidebar-backdrop { display: none; }
@media (max-width: 991px) {
    .ta-sidebar { position: fixed; left: 0; z-index: 1050; transform: translateX(-100%); transition: transform .2s; }
    .ta-sidebar.show { transform: translateX(0); }
    /* Dim backdrop shown only while the drawer is open; tap it to close. */
    .ta-sidebar.show ~ .ta-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(10,15,23,.5); z-index: 1040; }
    .ta-content { padding: 1rem; }
    /* Topbar wraps on mobile so the toggle + actions + search never overflow to
       the right; the clock is hidden to save space. */
    .ta-topbar { flex-wrap: wrap; padding: 1.1rem 1rem .3rem; row-gap: .7rem; column-gap: .6rem; }
    .ta-topbar__title { flex: 1 1 auto; min-width: 0; }
    .ta-topbar__title h1 { font-size: 1.45rem; }
    .ta-topbar__group { order: 2; margin-left: auto; }
    .ta-topbar__search { order: 3; flex: 1 0 100%; width: 100%; max-width: 100%; margin: 0; }
    .ta-clock { display: none; }
    .ta-topbar--utility-only { min-height: 58px; padding-top: .75rem; }
    .ta-topbar--utility-only .ta-clock { display: flex; }
}

/* ============================================================
   MODALS (Figma) — form / confirm / failed-redemption / detail
   ============================================================ */
.ta-modal { border: none; border-radius: 16px; box-shadow: 0 24px 70px rgba(16,28,48,.25); overflow: hidden; background: #fff; color: var(--ta-grey-700); }
.ta-modal .form-label, .ta-modal label { color: var(--ta-grey-700); }
.ta-modal__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding: 1.35rem 1.6rem 1rem; border-bottom: 1px solid var(--ta-grey-200); }
.ta-modal__head h3 { font-size:1.4rem; margin:0; font-weight:800; }
.ta-modal__head p { margin:.1rem 0 0; color: var(--ta-grey-500); font-size:.84rem; }
.ta-modal__x { width:34px; height:34px; border-radius:50%; border:none; background: var(--ta-grey-100); color: var(--ta-grey-600); display:grid; place-items:center; cursor:pointer; flex:0 0 34px; }
.ta-modal__x:hover { background: var(--ta-grey-200); color: var(--ta-navy); }
.ta-modal__body { padding: 1.3rem 1.6rem; }
.ta-modal__foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1.1rem 1.6rem 1.35rem; border-top: 1px solid var(--ta-grey-200); }
.ta-modal__foot .btn { min-width: 120px; padding:.6rem 1.2rem; }
.ta-modal .ta-label { font-size:.78rem; margin-bottom:.35rem; }
.ta-modal .form-control, .ta-modal .form-select, .ta-modal textarea.form-control { padding:.6rem .85rem; border-color: var(--ta-grey-300); background-color: #fff; }
.ta-modal .form-control:focus, .ta-modal .form-select:focus { background-color: #fff; }
.ta-modal .ta-input, .ta-modal .ta-select { background-color: #fff; }
.req { color: var(--ta-error); }

/* auto-generated / locked field */
.ta-field-locked { background: var(--ta-grey-100); border:1px solid var(--ta-grey-200); border-radius:.5rem; padding:.6rem .85rem; color: var(--ta-grey-500); letter-spacing:.18em; font-weight:700; font-size:.9rem; }

/* tier select field (badge + text + chevron) */
.ta-tierselect { display:flex; align-items:center; gap:.6rem; border:1px solid var(--ta-grey-300); border-radius:.5rem; padding:.45rem .85rem; background:#fff; cursor:pointer; }
.ta-tierselect .txt { color: var(--ta-navy); font-size:.85rem; font-weight:600; }
.ta-tierselect > svg { margin-left:auto; color: var(--ta-grey-500); }

/* gold toggle switch */
.form-switch.gold .form-check-input:checked { background-color: #B6985D; border-color: #B6985D; }

/* confirm / delete modal */
.ta-confirm__body { padding: 1.9rem 1.9rem 1.6rem; text-align:center; }
.ta-confirm__body h3 { font-size:1.35rem; margin:0 0 .55rem; font-weight:800; }
.ta-confirm__body p { color: var(--ta-grey-500); font-size:.85rem; margin:0 auto 1.5rem; max-width:400px; line-height:1.5; }
.ta-confirm__actions { display:flex; gap:.8rem; justify-content:center; }
.ta-confirm__actions .btn { min-width:140px; padding:.6rem 1.2rem; }

/* failed-redemption modal */
.fr-head { background: var(--ta-error); color:#fff; padding:1.1rem 1.4rem; display:flex; align-items:center; gap:.9rem; }
.fr-head__ic { width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ta-error);display:grid;place-items:center;flex:0 0 38px;}
.fr-head .eyebrow { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; }
.fr-head .meta { font-size:.82rem; opacity:.95; }
.fr-head__x { margin-left:auto; background:none;border:none;color:#fff;cursor:pointer; display:grid; place-items:center; }
.fr-body { padding: 1.2rem 1.4rem 1.4rem; }
.fr-sec { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ta-grey-500); font-weight:800; margin-bottom:.5rem; }
.fr-entity { display:flex; align-items:center; gap:.85rem; background:var(--ta-grey-100); border-radius:12px; padding:.85rem 1rem; }
.fr-entity__ic { width:42px;height:42px;border-radius:10px; display:grid;place-items:center;flex:0 0 42px; font-weight:800; }
.fr-entity strong { color: var(--ta-navy); font-size:.92rem; }
.fr-entity .sub { color: var(--ta-grey-500); font-size:.78rem; }
.fr-check { display:flex; align-items:flex-start; gap:.7rem; border:1px solid var(--ta-grey-200); border-radius:10px; padding:.6rem .85rem; margin-bottom:.5rem; }
.fr-check--fail { border-color: var(--ta-error); background: #FBEDED; }
.fr-check__ic { width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 22px;color:#fff; margin-top:1px; }
.fr-check__ic.pass { background: #22C55E; }
.fr-check__ic.fail { background: var(--ta-error); }
.fr-check strong { font-size:.82rem; color:var(--ta-navy); display:block; line-height:1.2; }
.fr-check small { font-size:.74rem; color:var(--ta-grey-500); }
.fr-check--fail strong, .fr-check--fail small { color: var(--ta-error); }

/* merchant detail modal */
.md-head { display:flex; align-items:center; gap:.85rem; padding:1.1rem 1.4rem; border-bottom:1px solid var(--ta-grey-200); }
.md-head__logo { width:44px;height:44px;border-radius:10px; background:var(--ta-navy); color:#fff; display:grid;place-items:center;font-weight:800; flex:0 0 44px; }
.md-head h3 { font-size:1.25rem; margin:0; }
.md-head .meta { font-size:.76rem; color:var(--ta-grey-500); display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.md-tabs { display:flex; gap:.3rem; padding:.5rem 1.4rem 0; border-bottom:1px solid var(--ta-grey-200); }
.md-tabs a { padding:.55rem .9rem; font-size:.83rem; font-weight:700; color:var(--ta-grey-500); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:.4rem .4rem 0 0; }
.md-tabs a.active { color:var(--ta-navy); border-bottom-color: var(--ta-gold); background: var(--ta-grey-50); }
.md-body { padding:1.2rem 1.4rem; max-height:70vh; overflow-y:auto; background:#fff; }
.md-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.4rem; border-top:1px solid var(--ta-grey-200); background:#fff; }
.md-foot .note { font-size:.76rem; color:var(--ta-grey-500); }
.md-kpi { background:#fff; border:1px solid var(--ta-grey-200); border-radius:10px; padding:1rem 1.1rem; }
.md-kpi .l { font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ta-grey-500); font-weight:700; }
.md-kpi .v { font-size:1.4rem; font-weight:800; color:var(--ta-navy); font-family:'Avenir'; line-height:1.1; margin:.4rem 0 .35rem; }
.md-kpi .d { font-size:.72rem; color:#1F7A45; font-weight:400; }
.md-kpi .d.down { color: var(--ta-error); }
.md-tabs a { cursor: pointer; }

/* force white inputs inside every modal (override cream --bs-body-bg) */
.modal .form-control, .modal .form-select, .modal textarea, .modal .ta-input, .modal .ta-select { background-color: #fff; }
.modal .form-control:focus, .modal .form-select:focus { background-color: #fff; }

/* KPI card with colored left accent (redemptions, etc.) */
.kpi-accent { background:#fff; border:1px solid var(--ta-grey-200); border-radius:12px; box-shadow:var(--ta-shadow-sm); padding:1.1rem 1.25rem; border-left:4px solid var(--ta-grey-300); height:100%; }
.kpi-accent.gold  { border-left-color: #B6985D; }
.kpi-accent.green { border-left-color: var(--ta-success); }
.kpi-accent.navy  { border-left-color: var(--ta-navy); }
.kpi-accent.red   { border-left-color: var(--ta-error); }
.kpi-accent .l { position:relative; display:flex; align-items:center; gap:.35rem; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ta-grey-500); font-weight:700; }
.kpi-info { position:relative; display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border:1px solid var(--ta-grey-500); border-radius:50%; color:var(--ta-grey-500); font-size:9px; font-weight:800; letter-spacing:0; line-height:1; cursor:help; text-transform:none; }
.kpi-info__tip { position:absolute; z-index:20; top:calc(100% + 8px); left:-6px; width:190px; padding:.55rem .65rem; border:1px solid var(--ta-grey-200); border-radius:6px; background:#fff; box-shadow:0 6px 16px rgba(11,24,42,.14); color:var(--ta-grey-700); font-size:.68rem; font-weight:400; letter-spacing:0; line-height:1.35; opacity:0; pointer-events:none; transform:translateY(-3px); transition:opacity .15s ease, transform .15s ease; text-transform:none; }
.kpi-info__tip::before { content:""; position:absolute; top:-5px; left:9px; width:8px; height:8px; border-top:1px solid var(--ta-grey-200); border-left:1px solid var(--ta-grey-200); background:#fff; transform:rotate(45deg); }
.kpi-info:hover .kpi-info__tip, .kpi-info:focus .kpi-info__tip { opacity:1; transform:translateY(0); }
.staff-role-info { flex:0 0 auto; vertical-align:middle; }
.staff-role-info__tip { width:320px; max-width:calc(100vw - 48px); }
.staff-access-summary { padding:.65rem .75rem; border:1px solid #d9e5f0; border-radius:6px; background:#f5f9fc; color:var(--ta-grey-700); line-height:1.4; }
.staff-access-summary__title { display:flex; align-items:center; gap:.35rem; color:var(--ta-navy); font-size:.72rem; font-weight:700; }
.staff-access-summary__title span { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border:1px solid #8eabc4; border-radius:50%; color:#547895; font-size:9px; font-weight:800; }
.staff-access-summary__text { margin-top:.25rem; font-size:.72rem; }
.table-status-info { position:relative; display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; margin-left:.2rem; border:1px solid var(--ta-grey-500); border-radius:50%; color:var(--ta-grey-500); font-size:9px; font-weight:800; line-height:1; cursor:help; text-transform:none; }
.table-status-info__tip { position:absolute; z-index:9999; top:calc(100% + 8px); right:-5px; width:210px; max-width:calc(100vw - 32px); padding:.55rem .65rem; border:1px solid var(--ta-grey-200); border-radius:6px; background:#fff !important; box-shadow:0 7px 18px rgba(11,24,42,.16); color:var(--ta-grey-700); font-size:.66rem; font-weight:400; line-height:1.3; letter-spacing:0; text-align:left; white-space:normal !important; overflow-wrap:break-word; word-break:normal; opacity:0; pointer-events:none; transform:translateY(-3px); transition:opacity .15s ease, transform .15s ease; text-transform:none; }
.table-status-info__tip::before { content:""; position:absolute; top:-5px; right:8px; width:8px; height:8px; border-top:1px solid var(--ta-grey-200); border-left:1px solid var(--ta-grey-200); background:#fff; transform:rotate(45deg); }
.table-status-info:hover .table-status-info__tip, .table-status-info:focus .table-status-info__tip { opacity:1; transform:translateY(0); }
.status-help { display:block; padding:.17rem 0; color:var(--ta-grey-800); font-weight:700; }
.status-help b { margin-right:.3rem; }
.status-help small { display:block; padding-left:.85rem; color:var(--ta-grey-500); font-size:.61rem; font-weight:400; line-height:1.25; }
.status-help--success b { color:var(--ta-success); }
.status-help--draft b { color:var(--ta-info); }
.status-help--paused b { color:var(--ta-warning); }
.status-help--expired b, .status-help--cancelled b { color:var(--ta-error); }
.status-help--deactivated b { color:var(--ta-grey-500); }
.status-help--unsuccessful b { color:var(--ta-gold-dark, #9a7b3f); }
.status-help--voided b { color:var(--ta-grey-500); }
.redemption-history-box { padding:.7rem .8rem; border:1px solid var(--ta-grey-200); border-radius:8px; background:#fafbfc; }
.redemption-history-icon { position:relative; display:inline-flex; align-items:center; justify-content:center; margin-left:.25rem; vertical-align:-.2rem; color:var(--ta-grey-600); cursor:help; }
.redemption-history-icon__tip { position:absolute; z-index:50; left:0; bottom:calc(100% + 8px); display:block; width:250px; padding:.65rem .75rem; border:1px solid #d9e7f4; border-radius:6px; background:#fff; box-shadow:0 4px 14px rgba(16,24,40,.14); color:#667085; font-size:.7rem; font-weight:400; line-height:1.45; text-align:left; opacity:0; pointer-events:none; transform:translateY(3px); transition:opacity .15s ease, transform .15s ease; }
.redemption-history-icon__tip::after { content:""; position:absolute; left:10px; bottom:-5px; width:8px; height:8px; border-right:1px solid #d9e7f4; border-bottom:1px solid #d9e7f4; background:#fff; transform:rotate(45deg); }
.redemption-history-icon:hover .redemption-history-icon__tip, .redemption-history-icon:focus .redemption-history-icon__tip { opacity:1; transform:translateY(0); }
.redemption-detail-info { position:relative; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:.25rem; border:1px solid #8ab7e5; border-radius:50%; color:#4b91d1; font-size:.62rem; font-weight:800; cursor:help; }
.redemption-detail-info__tip { position:absolute; z-index:40; left:0; top:calc(100% + 7px); display:none; width:250px; padding:.65rem .75rem; border:1px solid #d9e7f4; border-radius:6px; background:#fff; box-shadow:0 4px 14px rgba(16,24,40,.14); color:#667085; font-size:.7rem; font-weight:400; line-height:1.45; }
.redemption-detail-info:hover .redemption-detail-info__tip, .redemption-detail-info:focus .redemption-detail-info__tip { display:block; }
.history-change { display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem; margin-top:.25rem; color:var(--ta-grey-700); }
.history-change > span:first-child { min-width:88px; color:var(--ta-grey-500); font-weight:600; }
.history-change__value { max-width:170px; overflow-wrap:anywhere; }
.history-change__value--new { color:var(--ta-navy); font-weight:600; }
.history-change__arrow { color:var(--ta-grey-500); font-weight:700; }
.outlet-code-feedback { display:flex; align-items:center; gap:.35rem; margin-top:.35rem; font-size:.72rem; line-height:1.25; font-weight:600; }
.outlet-code-feedback > span { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; flex:0 0 14px; border-radius:50%; font-size:.62rem; font-weight:800; }
.outlet-code-feedback--error { color:var(--ta-error); }
.outlet-code-feedback--error > span { background:var(--ta-error); color:#fff; }
.outlet-code-feedback--success { color:var(--ta-success); }
.outlet-code-feedback--success > span { background:var(--ta-success); color:#fff; }
.kpi-accent .v { font-size:1.85rem; font-weight:800; color:var(--ta-navy); font-family:'Avenir'; line-height:1.1; margin-top:.2rem; }
.kpi-accent .s { font-size:.74rem; color:var(--ta-grey-500); margin-top:.2rem; }

/* dark "Detail" pill button (pending/failed rows) */
.ta-detail-btn { background: var(--ta-navy); color:#fff; border:none; border-radius:999px; font-size:.74rem; font-weight:600; padding:.32rem .9rem; text-decoration:none; }
.ta-detail-btn:hover { background: var(--ta-navy-deep); color:#fff; }

/* solid Edit/Delete action pills (offers table) */
.ta-act { display:inline-flex; gap:.4rem; justify-content:flex-end; }
.ta-act-btn { border:none; border-radius:7px; font-size:.76rem; font-weight:600; padding:.34rem .85rem; text-decoration:none; cursor:pointer; }
.ta-act-btn--edit { background: var(--ta-navy); color:#fff; }
.ta-act-btn--edit:hover { background: var(--ta-navy-deep); color:#fff; }
.ta-act-btn--del { background: var(--ta-error); color:#fff; }
.ta-act-btn--del:hover { background:#B23333; color:#fff; }
/* offer gift icon */
.ofr-ico { width:30px; height:30px; border-radius:8px; flex:0 0 30px; display:grid; place-items:center; background:rgba(182,152,93,.16); color:#8A6E3B; }

/* Reports — date range toggle */
.ta-range { display:inline-flex; gap:.4rem; }
.ta-range button { border:1px solid var(--ta-grey-300); background:#fff; color:var(--ta-grey-600); border-radius:8px; font-size:.8rem; font-weight:600; padding:.38rem .9rem; cursor:pointer; }
.ta-range button:hover { border-color:var(--ta-navy); color:var(--ta-navy); }
.ta-range button.active { background:var(--ta-navy); border-color:var(--ta-navy); color:#fff; }

/* KPI accent delta (up/down) */
.kpi-accent .d { font-size:.74rem; font-weight:400; margin-top:.2rem; display:inline-flex; align-items:center; gap:.25rem; }
.kpi-accent .d.up { color:#1F7A45; }
.kpi-accent .d.down { color: var(--ta-error); }

/* line chart */
.ta-linechart { width:100%; }
.ta-linechart svg { width:100%; height:auto; display:block; }
.ta-linechart .grid { stroke: var(--ta-grey-200); stroke-width:1; }
.ta-linechart .axis-lbl { fill: var(--ta-grey-500); font-size:11px; }

/* ============================================================
   SETTINGS / USERS / LOGS (Figma)
   ============================================================ */
/* role badges (Users) */
.ta-rolepill { display:inline-block; font-size:.72rem; font-weight:600; padding:.28rem .8rem; border-radius:7px; color:#fff; }
.ta-rolepill--super   { background:#B6985D; }
.ta-rolepill--admin   { background:#162131; }
.ta-rolepill--reviewer{ background:#818D97; }
.ta-rolepill--support { background:#22C55E; }
.ta-rolepill--ops     { background:#3B7DD8; }

/* big page section heading (no navbar dup) */
.set-h { font-size:1.4rem; font-weight:800; color:var(--ta-navy); margin:0; }
.set-sub { color:var(--ta-grey-500); font-size:.85rem; margin:.15rem 0 0; }

/* settings tab bar — wider, gold underline */
.set-tabs { display:flex; flex-wrap:wrap; gap:2rem; border-bottom:1px solid var(--ta-grey-200); margin-bottom:1.5rem; }
.set-tabs a { padding:.7rem 0; font-size:.9rem; font-weight:600; color:var(--ta-grey-500); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; }
.set-tabs a:hover { color:var(--ta-navy); }
.set-tabs a.active { color:var(--ta-navy); border-bottom-color:var(--ta-gold); }

/* settings form rows */
.set-card { background:#fff; border:1px solid var(--ta-grey-200); border-radius:14px; box-shadow:var(--ta-shadow-sm); padding:1.5rem 1.6rem; }
.set-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0; }
.set-row + .set-row { border-top:1px solid var(--ta-grey-100); }
.set-row .lbl { font-size:.85rem; color:var(--ta-grey-700); }
.set-mini { width:150px; }

/* gold toggle (settings) */
.form-switch .form-check-input { cursor:pointer; }
.form-switch.gold .form-check-input { width:2.4rem; height:1.3rem; }
.form-switch.gold .form-check-input:checked { background-color:#B6985D; border-color:#B6985D; }

/* sub-tab pills (eligibility) */
.ta-subtabs { display:inline-flex; gap:.5rem; }
.ta-subtabs button { border:1px solid var(--ta-grey-300); background:#fff; color:var(--ta-grey-600); border-radius:9px; font-size:.82rem; font-weight:600; padding:.45rem 1rem; cursor:pointer; }
.ta-subtabs button.active { background:var(--ta-navy); border-color:var(--ta-navy); color:#fff; }

/* permission pills (roles) */
.perm { display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:600; padding:.3rem .65rem; border-radius:7px; background:var(--ta-success-bg); color:#1F7A45; }
.perm svg { width:13px; height:13px; }
.perm.off { background:var(--ta-grey-100); color:var(--ta-grey-500); }

/* roles list (left panel) */
.role-item { padding:.8rem .9rem; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.role-item:hover { background:var(--ta-grey-50); }
.role-item.active { background:rgba(182,152,93,.14); }
.role-item .nm { font-weight:700; color:var(--ta-navy); font-size:.88rem; }
.role-item .ds { font-size:.74rem; color:var(--ta-grey-500); }
.role-item .ct { font-size:.72rem; color:var(--ta-grey-600); background:#fff; border:1px solid var(--ta-grey-200); border-radius:999px; padding:.1rem .55rem; white-space:nowrap; }

/* tier rule cards (top strip) */
.trc { border-radius:14px; padding:1rem 1.1rem; min-height:130px; box-shadow:var(--ta-shadow-sm); }
.trc .ey { font-size:.58rem; letter-spacing:.18em; opacity:.7; font-weight:700; }
.trc .nm { font-family:'Avenir'; font-weight:800; font-size:1.3rem; letter-spacing:.04em; margin:.2rem 0 .6rem; }
.trc .rq { font-size:.64rem; opacity:.8; }
.trc .rv { font-size:1rem; font-weight:800; }
.trc--classic  { background:#F0EFED; color:#1A1A1A; }
.trc--silver   { background:#818D97; color:#fff; }
.trc--gold     { background:#B6985D; color:#1A1A1A; }
.trc--platinum { background:#162131; color:#E2C29A; }
.trc--black    { background:#1A1A1A; color:#B6985D; }

/* tier radio cards (eligibility floor) */
.tier-radio { border:1px solid var(--ta-grey-200); border-radius:12px; padding:.9rem 1rem; cursor:pointer; background:#fff; height:100%; }
.tier-radio.sel { border-color:var(--ta-gold); background:rgba(182,152,93,.06); box-shadow:0 0 0 1px var(--ta-gold); }
.tier-radio.locked { background:var(--ta-grey-50); opacity:.85; }
.tier-radio .hd { display:flex; align-items:center; gap:.5rem; font-weight:700; color:var(--ta-navy); font-size:.9rem; }
.tier-radio .hd .dot { width:11px; height:11px; border-radius:50%; }
.tier-radio .tx { font-size:.72rem; color:var(--ta-grey-500); margin-top:.4rem; }
.tier-radio.sel .tx { color:var(--ta-gold-dark); }

/* gold info box */
.info-box-gold { background:rgba(182,152,93,.12); border:1px solid rgba(182,152,93,.3); border-radius:12px; padding:.9rem 1rem; display:flex; gap:.7rem; }
.info-box-gold__ic { width:26px;height:26px;border-radius:7px;background:var(--ta-gold);color:#fff;display:grid;place-items:center;flex:0 0 26px; }
.info-box-gold strong { color:var(--ta-navy); font-size:.82rem; }
.info-box-gold p { color:var(--ta-grey-600); font-size:.78rem; margin:.15rem 0 0; }

/* dashed add button */
.btn-dashed { border:1.5px dashed var(--ta-grey-300); background:#fff; color:var(--ta-gold-dark); font-weight:600; font-size:.82rem; border-radius:9px; padding:.55rem 1rem; width:100%; cursor:pointer; }
.btn-dashed:hover { border-color:var(--ta-gold); }

/* perks list */
.perk-item { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ta-grey-700); padding:.25rem 0; }
.perk-item .dot { width:6px;height:6px;border-radius:50%;background:var(--ta-gold); flex:0 0 6px; }

/* settings save bar */
.save-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid var(--ta-grey-200); padding:1rem 1.5rem; }
.btn-navy { background:var(--ta-navy); color:#fff; border:none; border-radius:8px; font-weight:600; font-size:.85rem; padding:.55rem 1.3rem; }
.btn-navy:hover { background:var(--ta-navy-deep); color:#fff; }

/* ============================================================
   MERCHANT-SPECIFIC
   ============================================================ */
/* active merchant context block (sidebar) */
.ta-merchant-ctx { display:block; margin:.25rem .75rem 1rem; padding:1rem 1.1rem; background:transparent; border:1px solid rgba(255,255,255,.4); border-radius:14px; }
.ta-merchant-ctx small { display:block; color:#8A94A6; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.ta-merchant-ctx__name { display:block; font-family:'Tex Gyre Termes', Georgia, serif; font-weight:400; color:#fff; font-size:1.5rem; line-height:1.15; margin:.4rem 0 .2rem; }
.ta-merchant-ctx__type { display:block; font-style:italic; color:#8A94A6; font-size:.82rem; }

/* page heading (no navbar dup) */
.pg-h { font-family:'Tex Gyre Termes', Georgia, serif; font-size:1.9rem; font-weight:400; color:var(--ta-navy); margin:0; line-height:1.1; }
/* Raise the page title/subtitle toward the top (≈ the dashboard greeting level).
   The action buttons (sibling) stay put and get breathing room top + bottom. */
.ta-content div:has(> .pg-h) { margin-top:-2.5rem; position:relative; z-index:1; }
.ta-content div:has(> .pg-h) ~ * { margin-top:.7rem; margin-bottom:.8rem; }
.pg-sub { color:var(--ta-grey-500); font-size:.85rem; margin:.05rem 0 0; }
/* The page title lives in the topbar (beside the hamburger). Hide the in-content
   duplicate so the subtitle sits directly under the topbar title as one block. */
.ta-topbar__group { margin-left: auto; }
.ta-content .pg-h { display: none; }
.ta-content div:has(> .pg-h) { margin-top: 0; }
/* Utility (Bootstrap doesn't ship it): lets text-truncate work inside flex. */
.min-width-0 { min-width: 0; }
@media (max-width: 991px) {
    /* The page title pulls up -2.5rem to blend into the desktop topbar; on mobile
       that overlaps the ☰ menu button — reset so the title sits below the bar. */
    .ta-content div:has(> .pg-h) { margin-top: 0; }
    /* Topbar title stays compact beside the hamburger on small screens. */
    .ta-topbar__title { min-width: 0; }
    .ta-topbar__title h1 { font-size: 1.15rem; }
}

/* dark Quick Actions card (dashboard) */
/* Quick Actions — 2×2 image cards */
.qa2-title { font-family:'Avenir', sans-serif; font-weight:700; font-size:1rem; color:var(--ta-navy); letter-spacing:-.01em; margin:.3rem 0 .6rem; }
.qa2-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.qa2-card {
    position:relative; overflow:hidden; border-radius:14px; min-height:132px;
    padding:1rem; display:flex; flex-direction:column; justify-content:space-between;
    text-decoration:none; background-size:cover; background-position:center;
    box-shadow:var(--ta-shadow-sm); background-color:var(--ta-navy);
}
.qa2-card__ov { position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,38,62,.3) 0%, rgba(11,17,26,.85) 100%); }
.qa2-card > :not(.qa2-card__ov) { position:relative; z-index:1; }
.qa2-card__ic { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.22); color:#fff; display:grid; place-items:center; }
.qa2-card__t { display:block; color:#fff; font-weight:500; font-size:.92rem; line-height:1.2; }
.qa2-card__s { display:block; color:rgba(255,255,255,.72); font-size:.72rem; margin-top:.15rem; }
.qa2-card:hover .qa2-card__ov { background:linear-gradient(180deg, rgba(21,38,62,.42) 0%, rgba(11,17,26,.92) 100%); }

.qa-card { background:var(--ta-sidebar-bg); border-radius:14px; padding:1.2rem; color:#fff; height:100%; }
.qa-card h3 { color:#fff; font-size:1rem; margin:0; }
.qa-card .sub { color:#8A94A6; font-size:.76rem; margin:.1rem 0 1rem; }
.qa-item { display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; border:1px solid rgba(255,255,255,.08); border-radius:10px; text-decoration:none; margin-bottom:.6rem; background:rgba(255,255,255,.03); }
.qa-item:hover { background:rgba(255,255,255,.07); }
.qa-item__ic { width:34px; height:34px; border-radius:9px; flex:0 0 34px; display:grid; place-items:center; background:rgba(182,152,93,.18); color:var(--ta-gold-soft); }
.qa-item.is-primary .qa-item__ic { background:var(--ta-gold); color:var(--ta-navy-deep); }
.qa-item strong { color:#fff; font-size:.86rem; display:block; }
.qa-item small { color:#8A94A6; font-size:.72rem; }
.qa-item .chev { margin-left:auto; color:#6A7791; }

/* dashboard active-offer row status pill (OK/LOW) */
/* Active-offers grid — header labels + rows share the same columns */
.mdash-offers-head,
.offer-row { display:grid; grid-template-columns:minmax(150px,1fr) 110px 96px 72px; align-items:center; gap:.75rem; }
.mdash-offers-head { padding:0 1.25rem; margin:.3rem 0 .6rem; }

@media (max-width: 767px) {
    /* Dashboard "Active Offers" widget: drop the "Active until" column so the grid
       (name / quota / status) fits instead of overflowing to the right.

       This block used to sit ~35 lines ABOVE the base rule it overrides. A media
       query adds no specificity, so the later base rule won and this was dead code:
       the four fixed tracks (464px) stayed put on a phone, the dashboard rendered
       417px wide on a 390px screen, and "Manage all" was cut off. Order matters. */
    .mdash-offers-head, .offer-row { grid-template-columns: minmax(0,1fr) auto auto; gap: .6rem; }
    .offer-row__until, .mdash-offers-head > :nth-child(2) { display: none; }
    .mdash-offers-head { padding: 0 1rem; }
}
.mdash-col-h { color:var(--ta-grey-500); font-size:.78rem; font-weight:600; }
.mdash-col-h--link { justify-self:end; color:var(--ta-gold-dark); font-weight:700; text-decoration:none; }
.mdash-col-h--link:hover { color:var(--ta-gold); }

.offer-row { padding:.7rem 0; border-top:1px solid var(--ta-grey-100); }
.offer-row:first-child { border-top:none; }
.offer-row__main { display:flex; align-items:center; gap:.8rem; min-width:0; }
.offer-row__name { min-width:0; }
.offer-row__until, .offer-row__quota { color:var(--ta-grey-500); font-size:.82rem; }
.offer-row .ic { width:36px;height:36px;border-radius:50%;flex:0 0 36px;display:grid;place-items:center;background:var(--ta-grey-100);color:var(--ta-navy); }
/* Status shown as an icon (check = OK, triangle = low) */
.offer-row__status { justify-self:end; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; }
.offer-row__status.is-ok { color:var(--ta-success); }
.offer-row__status.is-warning { color:#E0A800; }

/* Active-offers card matches the Quick Actions grid height; scrolls if longer */
.mdash-offers-scroll { max-height:278px; overflow-y:auto; scrollbar-width:thin; }
.mdash-offers-scroll::-webkit-scrollbar { width:6px; }
.mdash-offers-scroll::-webkit-scrollbar-thumb { background:var(--ta-grey-300); border-radius:999px; }

/* onboarding steps */
.ob-progress { height:8px; background:var(--ta-grey-200); border-radius:999px; overflow:hidden; }
.ob-progress > span { display:block; height:100%; background:var(--ta-gold); border-radius:999px; }
.onboarding-steps { width:100%; max-width:none; }
.ob-verification-card { display:flex; align-items:center; gap:1rem; background:#f3fbf5; border:1px solid #bfe5cb; border-radius:14px; box-shadow:var(--ta-shadow-sm); padding:1.05rem 1.5rem; min-height:86px; }
.ob-verification-card.is-pending { background:#fffaf0; border-color:#f0d49c; }
.ob-verification-card__icon { width:36px;height:36px;border-radius:50%;flex:0 0 36px;display:grid;place-items:center;font-weight:800;font-size:.9rem; }
.ob-verification-card__icon.done { background:#22C55E;color:#fff; }
.ob-verification-card__icon.todo { background:#F59E0B;color:#fff; }
.ob-verification-card__title { color:var(--ta-navy); font-family:Georgia, 'Times New Roman', serif; font-size:1rem; font-weight:500; line-height:1.25; }
.ob-verification-card__description { color:var(--ta-grey-500); font-size:.84rem; line-height:1.4; }
.ob-step { background:#fff; border:1px solid var(--ta-grey-200); border-radius:14px; box-shadow:var(--ta-shadow-sm); padding:1.25rem 1.5rem; min-height:86px; }
.ob-step__title { color:var(--ta-navy); font-family:Georgia, 'Times New Roman', serif; font-size:1rem; font-weight:500; line-height:1.25; }
.ob-step__description { color:var(--ta-grey-500); font-size:.84rem; line-height:1.4; }
.ob-step__action { flex:0 0 auto; min-width:150px; }
.ob-step__completed { width:24px;height:24px;border-radius:50%;flex:0 0 24px;display:grid;place-items:center;background:#22C55E;color:#fff;font-size:.75rem;font-weight:800;line-height:1; }
.ob-step.active { border:1.5px solid var(--ta-gold); }
.ob-step__num { width:36px;height:36px;border-radius:50%;flex:0 0 36px;display:grid;place-items:center;font-weight:800;font-size:.9rem; }
.ob-step__num.done { background:#22C55E;color:#fff; }
.ob-step__num.cur { background:var(--ta-gold);color:#fff; }
.ob-step__num.todo { background:var(--ta-grey-200);color:var(--ta-grey-500); }
@media (max-width: 640px) {
    .ob-verification-card { padding:1rem; align-items:flex-start; flex-wrap:wrap; }
    .ob-verification-card__copy { min-width:calc(100% - 52px); }
    .ob-verification-card .btn { margin-left:52px; }
    .ob-step { padding:1rem; }
    .ob-step__inner { align-items:flex-start !important; flex-wrap:wrap; }
    .ob-step__copy { min-width:calc(100% - 52px); }
    .ob-step__action { margin-left:52px; }
}
.ob-check { display:flex; align-items:center; gap:.6rem; padding:.4rem 0; font-size:.85rem; }
.ob-check .tick { width:18px;height:18px;border-radius:50%;flex:0 0 18px;display:grid;place-items:center;color:#fff; }
.ob-check .tick.ok { background:#22C55E; }
.ob-check .tick.warn { background:#F59E0B; }

/* notification full-page list */
.ntf-item { display:flex; gap:.85rem; align-items:flex-start; padding:.85rem 1rem; border-radius:12px; }
.ntf-item.unread { background:var(--ta-grey-50); }
.ntf-item__ic { width:40px;height:40px;border-radius:50%;flex:0 0 40px;display:grid;place-items:center;color:#fff;font-weight:700; }
.ntf-item strong { color:var(--ta-navy); font-size:.88rem; display:block; }
.ntf-item p { color:var(--ta-grey-600); font-size:.8rem; margin:.1rem 0 0; }
.ntf-item .t { color:var(--ta-grey-500); font-size:.72rem; }
.ntf-dot { width:8px;height:8px;border-radius:50%;background:var(--ta-gold);margin-left:auto;margin-top:.4rem;flex:0 0 8px; }

/* profile dark header band */
/* Keep the account action reachable on narrow screens. */
.mp-head { background:var(--ta-sidebar-bg); border-radius:16px; padding:1.4rem 1.6rem; color:#fff; display:flex; flex-wrap:wrap; row-gap:.8rem; align-items:center; gap:1.1rem; }
.mp-head h2 { color:#fff; margin:0; font-size:1.4rem; }
.mp-head .role { color:#9FB0C7; font-size:.82rem; }
.mp-head .profile-company-pill { white-space:nowrap; flex:0 0 auto; }
.mp-info-row { display:flex; flex-direction:column; gap:.15rem; padding:.5rem 0; }
.mp-info-row .k { font-size:.72rem; color:var(--ta-grey-500); }
.mp-info-row .v { font-size:.88rem; color:var(--ta-navy); font-weight:600; }
.profile-assigned-outlet { display:flex; align-items:center; gap:.8rem; padding:.8rem 0; }
.profile-assigned-outlet__icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; border-radius:8px; background:#eef7ff; color:#258bd0; font-size:1.25rem; }
.profile-assigned-outlet strong { display:block; font-size:.82rem; }
.profile-assigned-outlet .btn { margin-left:auto; flex:0 0 auto; }
.profile-staff-app-card { border:1px solid #cfd9e7; }
.profile-staff-app-detail { display:flex; align-items:center; gap:.8rem; }
.profile-staff-app-detail__icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border-radius:8px; background:#f2effa; color:#7d6bb6; font-size:1.2rem; }
@media(max-width:575px){.profile-assigned-outlet{align-items:flex-start;flex-wrap:wrap}.profile-assigned-outlet .btn{margin-left:42px}}
.danger-card { border:1px solid var(--ta-error); border-radius:14px; padding:1.2rem; }

/* filter chips (offers/staff) */
.member-chips { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.member-chip { border:1px solid var(--ta-grey-300); background:#fff; color:var(--ta-grey-600); font-weight:700; font-size:.8rem; padding:.4rem .9rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.member-chip.active { background:var(--ta-navy); border-color:var(--ta-navy); color:#fff; }
.member-chip .cnt { background:rgba(0,0,0,.12); border-radius:999px; font-size:.66rem; padding:.02rem .4rem; }
.member-chip.active .cnt { background:rgba(255,255,255,.2); }

/* form inputs always white */
.form-control, .form-select, textarea.form-control { background-color: #fff; }
.form-control:focus, .form-select:focus { background-color: #fff; }

/* ===== Select2 (bootstrap-5 theme) — added for the offer outlet multi-select ===== */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 40px; border: 1px solid var(--ta-grey-200); border-radius: .5rem;
    background: #fff; color: var(--ta-grey-700); font-size: .83rem;
}
.select2-container--bootstrap-5 .select2-selection--single { display: flex; align-items: center; padding: .25rem .8rem; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { padding: 0; color: var(--ta-grey-700); line-height: 1.4; }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--ta-grey-500); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--ta-gold); box-shadow: 0 0 0 3px rgba(200,162,76,.15); }
.select2-container--bootstrap-5 .select2-dropdown { border-color: var(--ta-gold); border-radius: .5rem; }
.select2-container--bootstrap-5 .select2-results__option { font-size: .83rem; padding: .5rem .8rem; }
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap-5 .select2-results__option[data-selected="true"]:hover { background-color: var(--ta-gold) !important; color: #fff !important; }
.select2-container--bootstrap-5 .select2-results__option--selected { background-color: rgba(200,162,76,.16) !important; color: var(--ta-grey-800) !important; }
.select2-container--bootstrap-5 .select2-search__field:focus { border-color: var(--ta-gold); box-shadow: 0 0 0 3px rgba(200,162,76,.15); }
/* Dropdown is appended to <body>; keep it above BOTH the Bootstrap .modal overlay
   (z-index 1055) and the .ta-confirm-overlay used by the feedback modal + confirm
   dialogs (z-index 3100) — otherwise an open dropdown renders behind them and looks
   empty (the feedback category picker showed no options at all). */
.select2-container--open { z-index: 3200; }
/* Multi-select: one compact chip system for every Select2 multi field. */
.select2-container--bootstrap-5 .select2-selection--multiple { height: 40px; min-height: 40px; padding: 7px 5px; box-sizing:border-box; overflow:hidden; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0 !important; overflow:hidden; white-space:nowrap; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered > .select2-search--inline { display:inline-flex !important; flex:0 0 32px !important; min-width:32px !important; width:32px !important; max-width:32px !important; align-items:center; height:21px; margin:0 !important; padding:0 !important; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered > .select2-search--inline .select2-search__field { display:block !important; width:32px !important; max-width:32px !important; height:21px !important; min-width:32px !important; margin:0 !important; padding:0 !important; font-size:.74rem; line-height:21px; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; flex:0 0 auto; min-height: 21px; margin: 0 !important; padding: 2px 6px; background: var(--ta-gold); border: none; border-radius: 3px; color: #fff; font-size: .66rem !important; line-height: 17px; white-space: nowrap; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove { position: static; order: -1; margin: 0 3px 0 0; padding: 0; border: 0; background: transparent; color: #fff; font-size: .78rem; line-height: 1; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover { background: transparent; color: #fff; }

/* Filter multi-selects keep a stable two-line surface: selected chips stay at
   the top and the unused lower area remains empty, matching the reference UI. */
.filter-multi-select .select2-selection--multiple { height:40px !important; min-height:40px !important; padding:7px 5px; align-items:center; box-sizing:border-box; }
.filter-multi-select .select2-selection--multiple .select2-selection__rendered { flex-wrap:wrap; align-content:flex-start; align-items:flex-start; white-space:normal; }
.filter-multi-select .select2-selection--multiple .select2-search--inline { display:none !important; }
.filter-multi-select .select2-selection--multiple .select2-selection__rendered:not(:has(.select2-selection__choice))::before { color:var(--ta-grey-500); font-size:.83rem; line-height:21px; white-space:nowrap; }
.filter-multi-select.filter-tier .select2-selection__rendered:not(:has(.select2-selection__choice))::before { content:'All tiers'; }
.filter-multi-select.filter-type .select2-selection__rendered:not(:has(.select2-selection__choice))::before { content:'All types'; }
.filter-multi-select.filter-status .select2-selection__rendered:not(:has(.select2-selection__choice))::before { content:'All statuses'; }
.filter-multi-select.filter-outlet .select2-selection__rendered:not(:has(.select2-selection__choice))::before { content:'All outlets'; }

/* Clickable count (Outlets → Offers/Staff open a list popup). */
.ta-count-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ta-count-link:hover { color: var(--ta-gold-dark, #9a7b3f) !important; }

/* Date-range pill, rendered by Select2.
   These three controls were the last plain <select> elements in the platform: a
   styled pill with an invisible native <select> laid over it (opacity:0), which is
   why they were skipped when everything else was converted. They are real <select>s,
   so the rule applies — this styles Select2 to keep exactly the pill it replaces. */
.ta-daterange-s2 .select2-container--bootstrap-5 .select2-selection--single {
    border: 1px solid var(--ta-grey-200); border-radius: 8px; background-color: #fff;
    padding: .45rem .85rem .45rem 2.1rem; height: auto; min-height: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: .7rem center;
}
.ta-daterange-s2 .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--ta-grey-700); font-size: .82rem; font-weight: 600; line-height: 1.3; padding: 0;
}
.feedback-tip > i{flex:0 0 1.05rem;min-width:1.05rem;aspect-ratio:1/1}
.feedback-consent input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:0 0 18px;margin:.08rem 0 0;border:1px solid var(--ta-gold);border-radius:4px;background:#fff;display:grid;place-content:center;cursor:pointer}
.feedback-consent input[type=checkbox]::before{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .12s ease}
.feedback-consent input[type=checkbox]:checked{background:var(--ta-gold);border-color:var(--ta-gold)}
.feedback-consent input[type=checkbox]:checked::before{transform:rotate(-45deg) scale(1)}