/* ============================================================
   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;
}

/* 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-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; }
}

.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;
}
.ta-nav__link--group {
    width: 100%; border: 0; background: transparent; text-align: left;
    cursor: pointer; font-family: inherit;
}
.ta-nav__link--group .ta-nav__chevron {
    margin-left: auto; transition: transform .15s ease;
}
.ta-nav__link--group.is-collapsed .ta-nav__chevron { transform: rotate(-90deg); }
/* Icon-less sidebar — hide any residual nav icons. */
.ta-nav__link svg, .ta-nav__link i { display: none; }
.ta-nav__link .ta-nav__chevron { display: block; }
.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; }

/* Nested navigation sits on the dark sidebar, so do not use Bootstrap's
   text-muted colour (it is intended for light page backgrounds). */
.ta-nav__sub-menu { padding: 0 0 .35rem 1.7rem; font-size: .78rem; }
.ta-nav__sub-menu.is-collapsed { display: none; }
.ta-nav__sub-link {
    display: block;
    padding: .26rem .7rem;
    color: #B9C5D5;
    text-decoration: none;
    line-height: 1.35;
    border-radius: .35rem;
}
.ta-nav__sub-link:hover, .ta-nav__sub-link:focus { color: #fff; background: rgba(255,255,255,.08); }
.ta-nav__sub-link.active { color: #fff; font-weight: 700; }

.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, serif title */
.ta-topbar {
    background: var(--ta-app-bg); border-bottom: none; box-shadow: none;
    display: flex; align-items: center; gap: 1rem;
    padding: 1.6rem 1.6rem .3rem; position: static;
}
.ta-topbar__title { display: flex; align-items: center; gap: .65rem; }
.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; justify-content: flex-end; }
.ta-topbar__search {
    flex: 0 0 auto; width: 300px; max-width: 34vw; margin: 0 0 0 auto; position: relative;
}
.ta-topbar__search input {
    width: 100%; border: 1px solid var(--ta-grey-200); background: #fff;
    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: .6rem 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.6rem; }

/* 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 {
    display: flex; 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; }
.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-suspend { background: #ef6c2f; color: #fff; border: none; }
.btn-suspend:hover { background: #d95c24; color: #fff; }
.btn-archive { background: #0878e8; color: #fff; border: none; }
.btn-archive:hover { background: #0566c7; color: #fff; }
.btn-delete { background: var(--ta-error); color: #fff; border: none; }
.btn-delete:hover { background: #c93636; color: #fff; }

.ta-suspend-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff0e8;
    color: #ef6c2f;
    font-size: 1.05rem;
    font-weight: 800;
}

.ta-archive-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f0ff;
    color: #0878e8;
    font-size: 1.15rem;
    font-weight: 800;
}

.ta-delete-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffe8e8;
    color: var(--ta-error);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
}

.ta-selected-partner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    border-radius: .55rem;
    background: #f6f9fc;
    border: 1px solid var(--ta-grey-200);
}
.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--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--orange  { background: #EF6C2F; 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; }
/* Keep the Offers grid fluid with the page content. At the same responsive
   breakpoint used by the Redemptions table, retain a readable table width and
   let the wrapper scroll horizontally instead of changing the page width. */
.ta-offers-table { width: 100%; min-width: 0; max-width: 100%; }
@media (max-width: 991px) {
    .ta-offers-table { min-width: 640px; max-width: none; }
}
/* Club Members has more columns than the redemption list. Keep each column
   readable at browser zoom levels and let its .table-responsive parent scroll. */
.ta-members-table { min-width: 1200px; }
.ta-members-table thead th { font-size:.72rem; padding:.9rem 1rem; }
.ta-members-table .ta-table-sort, .ta-referrals-table .ta-table-sort, .ta-offers-table .ta-table-sort {
    color: inherit !important; font: inherit; letter-spacing: inherit; text-transform: uppercase;
    text-decoration: none; white-space: nowrap; display:inline-flex; align-items:center; gap:.3rem;
}
.ta-members-table .ta-sort-icon, .ta-referrals-table .ta-sort-icon { font-size:.78rem; font-weight:800; line-height:1; letter-spacing:0; }
.ta-members-table tbody td { font-size:.9rem; padding:.9rem 1rem; }
.ta-members-table .ta-cell-user strong { font-size:.92rem; }
.ta-members-table .ta-cell-user small { font-size:.78rem; }
.ta-members-table .ta-pill { font-size:.68rem; padding:.2rem .5rem; }
.ta-member-detail-status .ta-pill { font-size:.86rem; padding:.34rem .78rem; min-height:30px; }
.ta-members-table th:nth-child(2), .ta-members-table td:nth-child(2) { min-width:220px; }
.ta-members-table th:nth-child(3), .ta-members-table td:nth-child(3) { min-width:120px; }
.ta-members-table th:nth-child(4), .ta-members-table td:nth-child(4) { min-width:100px; }
.ta-members-table th:nth-child(5), .ta-members-table td:nth-child(5) { min-width:220px; }
.ta-members-table th:nth-child(6), .ta-members-table td:nth-child(6) { min-width:150px; }
.ta-members-table th:nth-child(7), .ta-members-table td:nth-child(7) { min-width:130px; }
.ta-members-table th:nth-child(8), .ta-members-table td:nth-child(8) { min-width:125px; }
.ta-members-table th:nth-child(9), .ta-members-table td:nth-child(9) { min-width:115px; }
.ta-members-table th:nth-child(10), .ta-members-table td:nth-child(10) { min-width:115px; }
.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;
}
/* Keep every table header in view while its table is being scrolled. The
   background and stacking context prevent body rows from showing through. */
table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--ta-grey-50);
    background-clip: padding-box;
    box-shadow: 0 1px 0 var(--ta-grey-200);
}
.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; }
.ta-change-history { border: 1px solid var(--ta-grey-200); border-radius: 10px; overflow: hidden; }
.ta-change-history__item + .ta-change-history__item { border-top: 1px solid var(--ta-grey-100); }
.ta-change-history__summary { display:grid; grid-template-columns:1.15fr 1fr 1.15fr auto; align-items:center; gap:.75rem; padding:.75rem .85rem; color:var(--ta-grey-700); cursor:pointer; list-style:none; font-size:.78rem; }
.ta-change-history__summary::-webkit-details-marker { display:none; }
.ta-change-history__summary:hover { background:var(--ta-grey-50); }
.ta-change-history__chevron { display:inline-block; margin-left:.25rem; transition:transform .16s ease; color:var(--ta-navy); font-weight:700; }
.ta-change-history__item[open] .ta-change-history__chevron { transform:rotate(180deg); }
.ta-change-history__details { padding:.75rem .85rem .9rem; border-top:1px solid var(--ta-grey-100); background:var(--ta-grey-50); }
@media (max-width: 767px) {
    .ta-change-history__summary { grid-template-columns:1fr auto; }
    .ta-change-history__summary > :nth-child(2), .ta-change-history__summary > :nth-child(3) { display:none; }
}

.ta-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--ta-grey-100); }
.ta-bulk-review-option { display:flex; align-items:flex-start; gap:.5rem; margin-bottom:1rem; padding:.65rem .75rem; border:1px solid var(--ta-grey-200); border-radius:.55rem; background:var(--ta-grey-50); color:var(--ta-navy); cursor:pointer; }
.ta-bulk-review-option .form-check-input { flex:0 0 1rem; margin-top:.1rem; cursor:pointer; }
.ta-bulk-review-table { min-width:680px; }
.ta-bulk-review-table thead th { padding:.55rem .7rem; font-size:.62rem; }
.ta-bulk-review-table tbody td { padding:.55rem .7rem; font-size:.76rem; }
.ta-nomination-alert { display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; border:1px solid rgba(200,162,76,.48); border-radius:var(--ta-radius); background:linear-gradient(90deg,rgba(200,162,76,.16),rgba(255,255,255,.92)); box-shadow:var(--ta-shadow-sm); }
.ta-nomination-alert__icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:var(--ta-navy); color:var(--ta-gold-soft); font-size:1rem; }
.ta-nomination-alert strong { color:var(--ta-navy); font-size:.88rem; }
.ta-nomination-alert__count { color:var(--ta-navy); font-size:.78rem; font-weight:800; }
.ta-nomination-alert p { color:var(--ta-grey-600); font-size:.78rem; }
.ta-black-reserve-review { padding:1rem; border:1px solid rgba(200,162,76,.48); border-radius:10px; background:linear-gradient(135deg,rgba(255,248,229,.88),#fff); }
.ta-black-reserve-review > .d-flex > strong { color:#b21f2d; font-size:.78rem; letter-spacing:.03em; }
.ta-black-reserve-review__facts { display:grid; gap:.45rem; }
.ta-black-reserve-review__facts > div { display:grid; grid-template-columns:minmax(130px,1fr) minmax(0,1.4fr); align-items:center; gap:.75rem; font-size:.78rem; }
.ta-black-reserve-review__facts span { color:var(--ta-grey-500); }
.ta-black-reserve-review__facts strong { color:var(--ta-navy); font-weight:700; }
.ta-form-section { margin:1.25rem 0 .75rem; padding-top:.95rem; border-top:1px solid var(--ta-grey-200); color:var(--ta-navy); font-size:.82rem; font-weight:800; }
.ta-form-section:first-of-type { margin-top:0; padding-top:0; border-top:0; }
.ta-edit-context-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.ta-edit-context-card { min-height:78px; padding:.72rem .8rem; border:1px solid var(--ta-grey-200); border-radius:9px; background:#fffaf0; }
.ta-edit-context-card__label { margin-bottom:.35rem; color:var(--ta-grey-500); font-size:.62rem; font-weight:800; letter-spacing:.08em; }
.ta-edit-context-card strong, .ta-edit-context-card span { display:block; }
.ta-edit-context-card strong { color:var(--ta-navy); font-size:.78rem; }
.ta-edit-context-card span { margin-top:.18rem; color:var(--ta-grey-500); font-size:.68rem; line-height:1.35; }
.ta-edit-chip-list { display:flex; flex-wrap:wrap; gap:.42rem; align-items:center; min-height:32px; }
.ta-edit-chip { display:inline-flex; align-items:center; gap:.42rem; padding:.32rem .58rem; border-radius:999px; background:#fff0bf; color:var(--ta-navy); font-size:.7rem; font-weight:700; }
.ta-edit-chip button { width:16px; height:16px; padding:0; border:0; border-radius:50%; background:rgba(20,32,51,.12); color:var(--ta-navy); font-size:.8rem; line-height:15px; }
.ta-edit-chip button:hover { background:rgba(20,32,51,.22); }
@media (max-width: 767.98px) { .ta-edit-context-grid { grid-template-columns:1fr; } }
.ta-export-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto auto auto; gap:1rem 1.2rem; }
.ta-export-groups--referrals { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:none; gap:1rem; }
.ta-export-groups--partners { grid-template-rows:none; }
.ta-export-groups--partners .ta-export-group--partner-information { grid-column:1; grid-row:1; }
.ta-export-groups--partners .ta-export-group--account-information { grid-column:1; grid-row:2; }
.ta-export-groups--partners .ta-export-group--business-information { grid-column:2; grid-row:1; }
.ta-export-groups--partners .ta-export-group--registered-address { grid-column:2; grid-row:2; }
.ta-export-groups--partners .ta-export-group--business-representative { grid-column:3; grid-row:1; }
.ta-export-groups--partners .ta-export-group--verification { grid-column:3; grid-row:2; }
.ta-export-groups--partners .ta-export-group--activity { grid-column:3; grid-row:3; }
.ta-export-group--member { grid-column:1; grid-row:1; }
.ta-export-group--association { grid-column:1; grid-row:2; }
.ta-export-group--membership { grid-column:2; grid-row:1; }
.ta-export-group--engagement { grid-column:2; grid-row:2; }
.ta-export-group--connector { grid-column:2; grid-row:3; }
.ta-export-group--passes { grid-column:3; grid-row:1; }
.ta-export-group--additional { grid-column:3; grid-row:2; }
.ta-export-group--addresses { grid-column:3; grid-row:3; }
.ta-export-group { min-width:0; }
.ta-export-group h4 { margin:0 0 .4rem; padding-bottom:.3rem; border-bottom:1px solid var(--ta-grey-200); color:var(--ta-grey-500); font-size:.62rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.ta-export-group label { display:flex; align-items:center; gap:.45rem; padding:.2rem 0; color:var(--ta-navy); font-size:.74rem; }
.ta-export-selection label { color:var(--ta-navy); }
.ta-export-group__note { display:flex; gap:.35rem; margin-top:.55rem; padding:.5rem; border-radius:.35rem; background:#edf7fd; color:var(--ta-grey-600); font-size:.62rem; line-height:1.3; }
.ta-export-group__note span:first-child, .ta-export-info span:first-child { color:var(--ta-navy); font-weight:700; }
.ta-export-info { display:flex; align-items:flex-start; gap:.45rem; padding:.65rem .75rem; border-radius:.4rem; background:#edf7fd; color:var(--ta-grey-600); font-size:.7rem; line-height:1.35; }
.ta-association-reorder { overflow:hidden; }
.ta-association-reorder .ta-card__head { margin-bottom:0; }
.ta-association-reorder__list { display:flex; flex-direction:column; gap:.55rem; padding:1rem 1.1rem 1.1rem; }
.ta-association-reorder__item { display:grid; grid-template-columns:22px 30px minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.75rem .85rem; border:1px solid var(--ta-grey-200); border-radius:.65rem; background:#fff; cursor:grab; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ta-association-reorder__item:hover { border-color:rgba(200,162,76,.65); box-shadow:0 5px 14px rgba(16,28,48,.08); }
.ta-association-reorder__item:active { cursor:grabbing; transform:scale(.995); }
.ta-association-reorder__handle { color:var(--ta-grey-500); font-size:1.15rem; letter-spacing:-.2em; line-height:1; user-select:none; }
.ta-association-reorder__number { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ta-navy-soft); color:var(--ta-navy); font-size:.7rem; font-weight:800; }
.ta-association-reorder__identity { display:flex; align-items:center; min-width:0; gap:.7rem; }
.ta-association-reorder__identity > div { min-width:0; }
.ta-association-reorder__identity strong, .ta-association-reorder__identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ta-association-reorder__identity strong { color:var(--ta-navy); font-size:.82rem; }
.ta-association-reorder__identity small { margin-top:.15rem; color:var(--ta-grey-500); font-size:.68rem; }
.ta-association-reorder__meta { display:flex; align-items:center; gap:.7rem; white-space:nowrap; }
.ta-clickable-row { cursor:pointer; }
.ta-clickable-row:hover td { background:rgba(200,162,76,.07); }
@media (max-width: 767.98px) {
    .ta-association-reorder__item { grid-template-columns:22px 28px minmax(0,1fr); }
    .ta-association-reorder__meta { grid-column:3; justify-content:space-between; }
}
@media (max-width: 767.98px) {
    .ta-export-groups { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:none; }
    .ta-export-groups--referrals { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ta-export-group { grid-column:auto; grid-row:auto; }
    .ta-export-groups--partners .ta-export-group { grid-column:auto; grid-row:auto; }
}
.ta-filter-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .55rem .38rem .7rem; border:1px solid rgba(200,162,76,.55); border-radius:999px; background:rgba(200,162,76,.14); color:var(--ta-navy); font-size:.76rem; font-weight:700; white-space:nowrap; }
.ta-filter-chip button { display:grid; place-items:center; width:17px; height:17px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ta-grey-600); font-size:1rem; line-height:1; cursor:pointer; }
.ta-filter-chip button:hover { background:rgba(22,33,49,.1); color:var(--ta-navy); }
.ta-redemptions-filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
.ta-redemptions-filters > div, .ta-redemptions-filters > .ta-filter-chip, .ta-redemptions-filters > .btn { flex:0 0 auto; }
.ta-redemptions-date { width:135px; }
.ta-redemptions-date-separator { align-self:center; flex:0 0 auto; color:var(--ta-grey-500); font-size:.9rem; font-weight:700; }
.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; }
/* Keep coloured row buttons legible on hover — the generic .ta-row-btn:hover above
   turns the text navy, which looked wrong on the red/gold fills. */
.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) — themed to match the admin, replaces the
   long strip of per-row action buttons. */
.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:disabled { color: var(--ta-grey-400); opacity: .72; cursor: not-allowed; }
.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); }

/* --- Global request loading overlay (toggled by the Livewire commit hook in the
   layout) — shows for any request slower than ~220ms so the UI never looks frozen. */
.ta-loading-overlay { position: fixed; inset: 0; z-index: 3000; 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 — use for structured content refreshes (cards, charts,
   tables and lists). Short button actions keep their 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; }
.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 (its generic show
   value), which breaks the table's column grid — the skeleton cells collapse and slide
   out from under the header. Force a proper table row group whenever Livewire is showing
   it (it does so by setting an inline display style). */
.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; }
/* Legacy single-line variant, kept for any non-table skeleton that still uses it. */
.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; }
.ta-skel-form { background:#fff; border:1px solid var(--ta-grey-200); border-radius:var(--ta-radius); padding:1.25rem; box-shadow:var(--ta-shadow-sm); }
.ta-skel-form__row { display:grid; grid-template-columns:minmax(130px, 28%) 1fr; gap:1rem; align-items:center; padding:.75rem 0; border-top:1px solid var(--ta-grey-100); }
.ta-skel-form__row:first-of-type { border-top:0; }

/* --- Global confirm dialog — replaces the browser's native wire:confirm popup
   with the branded modal (reuses .ta-modal styling). --- */
.ta-confirm-overlay { position: fixed; inset: 0; z-index: 3100; 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; }

/* ============================================================
   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); }

/* ============================================================
   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 button.ta-tab {
    padding: .65rem 1rem; font-size: .85rem; font-weight: 600; color: var(--ta-grey-500);
    border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    background: transparent; cursor: pointer; font-family: inherit;
}
.ta-tabs a:hover { color: var(--ta-navy); }
.ta-tabs button.ta-tab:hover { color: var(--ta-navy); }
.ta-tabs a.active, .ta-tabs button.ta-tab.active { color: var(--ta-navy); border-bottom-color: var(--ta-gold); }
/* Partner Portal-style page tabs: compact labels with generous spacing and a
   clear active underline, used for the Referrals page's top-level views. */
.ta-tabs--portal { gap: 1.4rem; margin-bottom: 1rem; overflow-x: auto; }
.ta-tabs--portal .ta-tab {
    flex: 0 0 auto; padding: .45rem .15rem; color: var(--ta-grey-600);
    font-size: .68rem; font-weight: 700; border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.ta-tabs--portal .ta-tab:hover { color: var(--ta-navy); }
.ta-tabs--portal .ta-tab.active { color: var(--ta-info); border-bottom-color: var(--ta-info); }

/* ============================================================
   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-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); }

/* ============================================================
   EDM / campaign reports
   ============================================================ */
.ta-brevo-strip { display:flex; align-items:center; gap:.45rem; color:var(--ta-grey-600); font-size:.72rem; font-weight:600; }
.ta-brevo-strip__mark { width:18px; height:18px; display:inline-grid; place-items:center; border-radius:50%; background:#0B8F62; color:#fff; font-size:.65rem; font-weight:800; }
.ta-brevo-strip a { margin-left:auto; color:var(--ta-navy); font-weight:700; text-decoration:none; }
.ta-brevo-strip a:hover { color:var(--ta-gold-dark); }
.ta-filter-chip { display:inline-flex; align-items:center; min-height:30px; padding:.35rem .65rem; border:1px solid var(--ta-grey-200); border-radius:7px; background:#fff; color:var(--ta-grey-600); font-size:.72rem; font-weight:600; white-space:nowrap; }
.ta-report-kpi { min-height:112px; padding:1rem 1.05rem; border:1px solid var(--ta-grey-200); border-top:3px solid var(--ta-navy-soft); border-radius:10px; background:#fff; box-shadow:var(--ta-shadow-sm); }
.ta-report-kpi--gold { border-top-color:var(--ta-gold); }
.ta-report-kpi--green { border-top-color:#27AE72; }
.ta-report-kpi--purple { border-top-color:#8265D4; }
.ta-report-kpi--orange { border-top-color:#D49D35; }
.ta-report-kpi--red { border-top-color:#D94D5C; }
.ta-report-kpi__label { color:var(--ta-grey-500); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ta-report-kpi__value { margin-top:.2rem; color:var(--ta-navy); font-size:1.45rem; font-weight:800; line-height:1.1; }
.ta-report-kpi__helper { margin-top:.3rem; color:var(--ta-grey-500); font-size:.66rem; }
.ta-campaign-chart-wrap { min-width:620px; }
.ta-campaign-linechart { width:100%; height:auto; display:block; }
.ta-campaign-chart__grid { stroke:#E8EDF2; stroke-width:1; }
.ta-campaign-line { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ta-campaign-line--delivered { stroke:#27AE72; }
.ta-campaign-line--opened { stroke:#2D8CDA; }
.ta-campaign-line--clicked { stroke:#D49D35; }
.ta-campaign-chart__labels { display:flex; gap:.25rem; color:var(--ta-grey-500); font-size:.62rem; }
.ta-campaign-chart__labels span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:center; white-space:nowrap; }
.ta-ranking-row { display:flex; align-items:center; gap:.65rem; padding:.7rem 0; border-bottom:1px solid var(--ta-grey-100); }
.ta-ranking-row:last-child { border-bottom:0; }
.ta-ranking-row__rank { width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:rgba(200,162,76,.15); color:var(--ta-gold-dark); font-size:.72rem; font-weight:800; flex:0 0 23px; }
.ta-ranking-row__name { flex:1; min-width:0; overflow:hidden; color:var(--ta-navy); font-size:.78rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.ta-ranking-row__value { color:var(--ta-grey-600); font-size:.72rem; font-weight:700; }
.ta-soft-badge { display:inline-flex; align-items:center; padding:.2rem .45rem; border-radius:5px; background:var(--ta-grey-100); color:var(--ta-grey-600); font-size:.65rem; font-weight:700; white-space:nowrap; }
.ta-soft-badge--green { background:rgba(39,174,114,.12); color:#1D8B5A; }
.ta-table--report { min-width:1060px; }
.ta-table--segments { min-width:820px; }
.ta-segment-builder { position:sticky; top:1rem; }
.ta-card__foot { padding:1rem 1.25rem; border-top:1px solid var(--ta-grey-100); }
.ta-estimate-box { display:flex; justify-content:space-between; gap:.75rem; padding:.8rem; margin-bottom:1rem; border:1px solid rgba(200,162,76,.35); border-radius:8px; background:rgba(200,162,76,.08); }
.ta-estimate-box__icon { width:28px; height:28px; display:grid; place-items:center; border-radius:7px; background:rgba(200,162,76,.18); color:var(--ta-gold-dark); font-size:1rem; }
.ta-segment-tabs { display:flex; gap:1.25rem; border-bottom:1px solid var(--ta-grey-200); margin-bottom:.65rem; }
.ta-segment-tabs span { padding:.45rem 0; color:var(--ta-grey-500); font-size:.7rem; font-weight:700; }
.ta-segment-tabs span.active { color:var(--ta-navy); border-bottom:2px solid var(--ta-gold); }
.ta-mini-table { overflow:hidden; border:1px solid var(--ta-grey-200); border-radius:7px; }
.ta-mini-table__head, .ta-mini-table__row { display:grid; grid-template-columns:1fr 1.25fr 1.25fr .8fr; gap:.5rem; padding:.5rem; font-size:.6rem; }
.ta-mini-table__head { background:var(--ta-grey-50); color:var(--ta-grey-500); font-weight:800; }
.ta-mini-table__row { color:var(--ta-grey-500); }
@media (max-width: 767.98px) {
    .ta-brevo-strip a { margin-left:0; }
    .ta-brevo-strip { flex-wrap:wrap; }
    .ta-campaign-chart-wrap { min-width:520px; }
    .ta-segment-builder { position:static; }
}

/* 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); }

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

/* Header date-range chip (styled select overlay) */
.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 "Custom 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); }
.ta-export-link { color: var(--ta-navy); font-size: .82rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ta-export-link:hover { color: var(--ta-gold-dark); }

/* Notifications list — coloured letter-avatar rows (matches the merchant design). */
.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; }

/* In-content page title (e.g. Notifications) — matches the merchant heading. */
.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; }
.pg-sub { color:var(--ta-grey-500); font-size:.85rem; margin:.15rem 0 0; }

/* Line chart (Member Growth) */
.ta-linechart { width: 100%; height: auto; display: block; }
.ta-glegend { display: flex; gap: 1.1rem; align-items: center; }
.ta-glegend span { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--ta-grey-600); font-weight: 600; }
.ta-glegend i { width: 9px; height: 9px; border-radius: 50%; background: #C8A24C; display: inline-block; }
.ta-glegend i.hollow { background: #fff; border: 1.6px solid #162131; }
.ta-growth-controls { display: inline-flex; align-items: center; gap: .2rem; padding: .18rem; border: 1px solid var(--ta-grey-200); border-radius: 7px; background: var(--ta-grey-50); }
.ta-growth-control { border: 0; border-radius: 5px; padding: .28rem .55rem; background: transparent; color: var(--ta-grey-600); font-size: .68rem; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.ta-growth-control:hover { color: var(--ta-navy); background: #fff; }
.ta-growth-control.is-active { background: var(--ta-navy); color: #fff; box-shadow: 0 1px 2px rgba(22,33,49,.14); }
.ta-growth-control:disabled { opacity: .65; cursor: wait; }

/* Tier Distribution — legend list on the left, donut with centre total on the right */
.ta-tierdist { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ta-tierdist__legend { flex: 1 1 190px; min-width: 175px; display: flex; flex-direction: column; }
.ta-tierdist__row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto auto; align-items: center; column-gap: .7rem; padding: .5rem .15rem; font-family: 'Avenir', sans-serif; font-size: .86rem; }
.ta-tierdist__row + .ta-tierdist__row { border-top: 1px solid var(--ta-grey-100, #f0f2f5); }
.ta-tierdist__dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ta-tierdist__name { color: var(--ta-navy, #162131); font-weight: 600; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta-tierdist__badge { width: auto; height: 16px; max-width: 70px; object-fit: contain; justify-self: end; }
.ta-tierdist__count { color: var(--ta-navy, #162131); font-weight: 700; }
.ta-tierdist__pct { color: var(--ta-grey-500, #8b95a3); font-weight: 600; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; }
.ta-tierdist__chart { flex: 0 0 auto; width: 172px; max-width: 100%; margin: 0 auto; }
.ta-tierdist__svg { width: 100%; height: auto; display: block; }
.ta-tierdist__total { font-family: 'Avenir', sans-serif; font-weight: 800; font-size: 28px; fill: var(--ta-navy, #162131); }
.ta-tierdist__cap { font-family: 'Avenir', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; fill: var(--ta-grey-500, #8b95a3); }
img.ta-avatar { object-fit: cover; }

/* 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:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; z-index:1; text-align:center; }

.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 title + actions + search never overflow to
       the right: title (+ toggle) and the notification bell share the first row,
       the search drops to its own full-width row, and the clock is hidden. */
    .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; }
}

/* ============================================================
   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; }
.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-update-timeline { position:relative; }
.ta-update-timeline::before { content:""; position:absolute; left:.28rem; top:.55rem; bottom:.55rem; width:1px; background:var(--ta-grey-200); }
.ta-update-timeline > div { position:relative; }
.ta-update-timeline > div > div:first-child { position:relative; z-index:1; background:#fff; }
.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; }
/* flex-wrap is load-bearing: with three buttons at min-width 120px the footer is
   wider than a phone, and .ta-modal's overflow:hidden CLIPPED the rightmost one —
   so "Approve KYC" (KYC, Merchants) and "Close" (Partnerships) simply could not be
   tapped on mobile. Nothing scrolled them back into reach. */
.ta-modal__foot { display:flex; flex-wrap:wrap; row-gap:.6rem; 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; }
/* Scrollable modals: pin the header + footer and scroll only the body, so the
   Close/action buttons never get pushed off-screen (e.g. when the browser is
   zoomed). Bootstrap's .modal-dialog-scrollable scrolls .modal-body; our body
   is .ta-modal__body / .fr-body, so wire those up explicitly. */
.modal-dialog-scrollable .ta-modal__head,
.modal-dialog-scrollable .ta-modal__foot,
.modal-dialog-scrollable .fr-head { flex-shrink: 0; }
.modal-dialog-scrollable .ta-modal__body,
.modal-dialog-scrollable .fr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.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); }
.ta-reward-modal-icon { color:var(--ta-navy); font-size:1.35rem; line-height:1.2; }
.ta-reward-choice { display:flex; align-items:flex-start; gap:.7rem; padding:.85rem .9rem; margin-bottom:.75rem; border:1px solid var(--ta-grey-200); border-radius:.5rem; background:#fff; cursor:pointer; }
.ta-reward-choice.is-selected { border-color:#b9d5e6; background:#edf7fd; }
.ta-reward-choice .form-check-input { flex:0 0 auto; margin-top:.12rem; }
.ta-reward-choice strong, .ta-reward-choice small { display:block; }
.ta-reward-choice strong { color:var(--ta-navy); font-size:.9rem; }
.ta-reward-choice small { color:var(--ta-grey-500); margin-top:.15rem; }
.ta-current-reward { padding:.8rem .9rem; border:1px solid #d4e7f1; border-radius:.45rem; background:#edf7fd; color:var(--ta-navy); }
.ta-current-reward small { display:block; color:var(--ta-grey-500); margin-top:.4rem; }
.ta-reward-gift { color:var(--ta-gold); font-size:1.25rem; }
.ta-referral-reward-card { border:1px solid var(--ta-grey-200); border-radius:.65rem; overflow:visible; background:#fff; }
.ta-referral-reward-card__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem .95rem; border-bottom:1px solid var(--ta-grey-200); }
.ta-referral-reward-card__head h4 { margin:0; color:var(--ta-navy); font-size:.95rem; }
.ta-referral-reward-card__head p { margin:.15rem 0 0; color:var(--ta-grey-500); font-size:.75rem; }
.ta-referral-reward-table { margin:0; min-width:640px; }
.ta-referral-reward-table th, .ta-referral-reward-table td { padding:.65rem .75rem; vertical-align:middle; }
.ta-reward-information { border:1px solid var(--ta-grey-200); border-radius:.45rem; overflow:hidden; }
.ta-reward-information__head, .ta-reward-information__section-title { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .7rem; background:#f1f7fb; color:var(--ta-navy); font-size:.75rem; }
.ta-reward-information__section-title { justify-content:flex-start; font-weight:700; }
.ta-reward-information__grid { display:grid; grid-template-columns:minmax(90px,.8fr) minmax(0,1.5fr); gap:0; }
.ta-reward-information__grid > div, .ta-reward-information__grid > strong { padding:.45rem .7rem; border-top:1px solid #edf0f3; font-size:.75rem; }
.ta-reward-information__grid > div { color:var(--ta-grey-500); }
.ta-reward-information__grid > strong { color:var(--ta-navy); font-weight:500; }
.ta-level-editor-note { display:flex; flex-direction:column; gap:.2rem; padding:.8rem .95rem; margin-bottom:1rem; border:1px solid #e3d3a7; border-radius:.5rem; background:#fffaf0; color:var(--ta-navy); }
.ta-level-editor-note strong { font-size:.85rem; }
.ta-level-editor-note span { color:var(--ta-grey-500); font-size:.78rem; }
.ta-level-editor { display:grid; gap:.9rem; }
.ta-level-editor__item { padding:1rem; border:1px solid var(--ta-grey-200); border-radius:.65rem; background:#fff; }
.ta-level-editor__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--ta-grey-200); }
.ta-level-editor__head h4 { margin:.15rem 0 0; color:var(--ta-navy); font-size:1rem; }
.ta-level-editor__number { color:var(--ta-grey-500); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.ta-level-editor__system-label { display:inline-block; margin-left:.45rem; padding:.2rem .45rem; border-radius:999px; background:#edf7fd; color:var(--ta-navy); font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }
.ta-level-editor__drag-handle { display:inline-flex; align-items:center; justify-content:center; width:22px; height:30px; color:var(--ta-grey-500); font-size:1.2rem; line-height:1; letter-spacing:-.2em; cursor:grab; user-select:none; }
.ta-level-editor__drag-handle:active { cursor:grabbing; }
.ta-level-editor__status { padding:.25rem .55rem; border-radius:999px; font-size:.68rem; font-weight:700; }
.ta-level-editor__status.is-active { background:#d9f8e7; color:#117746; }
.ta-level-editor__status.is-inactive { background:#edf0f3; color:var(--ta-grey-500); }
.ta-level-editor__flag { padding:.25rem .5rem; border-radius:999px; background:#f1e6c8; color:#74561a; font-size:.68rem; font-weight:700; }
.ta-level-editor__flag--history { background:#fde8e8; color:#a33a3a; }
.ta-level-editor__helper { margin-top:.3rem; color:var(--ta-grey-500); font-size:.7rem; }
.ta-level-badge-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:.45rem; border:1px solid #d8e6ee; border-radius:50%; background:#eef8fb; font-size:1.35rem; line-height:1; }
.ta-level-badge-icon--sm { width:30px; height:30px; margin:0; font-size:1rem; }
.ta-level-editor__locked { display:flex; align-items:center; min-height:38px; padding:.55rem .75rem; border:1px solid var(--ta-grey-200); border-radius:.5rem; background:var(--ta-grey-100); color:var(--ta-grey-500); font-size:.8rem; }
.ta-level-editor__actions { display:flex; justify-content:space-between; gap:.75rem; margin-top:1rem; padding-top:.75rem; border-top:1px solid var(--ta-grey-200); }
.ta-level-rewards { margin-top:1rem; padding:.85rem; border:1px solid var(--ta-grey-200); border-radius:.55rem; background:#fafbfc; }
.ta-level-rewards__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem; }
.ta-level-rewards__head strong, .ta-level-rewards__head span { display:block; }
.ta-level-rewards__head strong { color:var(--ta-navy); font-size:.82rem; }
.ta-level-rewards__head span { color:var(--ta-grey-500); font-size:.7rem; margin-top:.15rem; }
.ta-level-reward-row { display:grid; grid-template-columns:minmax(170px,.8fr) minmax(0,2.2fr) auto; align-items:end; gap:.75rem; padding:.7rem 0; border-top:1px solid var(--ta-grey-200); }
.ta-level-reward-config { min-width:0; }
.ta-level-reward-remove { min-width:auto !important; padding:.25rem .35rem !important; }
.ta-level-rewards__empty { padding:.65rem 0 .1rem; border-top:1px solid var(--ta-grey-200); color:var(--ta-grey-500); font-size:.75rem; }
@media (max-width: 767.98px) {
    .ta-level-editor__head { flex-direction:column; }
    .ta-level-reward-row { grid-template-columns:1fr; align-items:stretch; }
    .ta-level-reward-remove { justify-self:start; }
}

/* 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:center; 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; }
.fr-check__ic.pass { background: #22C55E; }
.fr-check__ic.fail { background: var(--ta-error); }
.ta-validation-checks { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:.5rem; }
.ta-validation-checks .fr-check { min-width:0; margin:0; padding:.5rem .6rem; gap:.45rem; }
.ta-validation-checks .fr-check__ic { width:18px; height:18px; flex-basis:18px; }
.ta-validation-checks .fr-check strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 991px) { .ta-validation-checks { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .ta-validation-checks { grid-template-columns:1fr; } }
.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:9999; 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; text-align:left; }
.redemption-detail-info:hover .redemption-detail-info__tip, .redemption-detail-info:focus .redemption-detail-info__tip { display:block; }
.ta-redemption-history-link { padding:.8rem .9rem; border:1px solid var(--ta-grey-200); border-radius:10px; background:var(--ta-grey-50); }
.ta-redemption-history-link strong { display:block; color:var(--ta-navy); font-size:.82rem; }
.ta-redemption-history-link small { display:block; margin-top:.15rem; color:var(--ta-grey-500); font-size:.7rem; }
.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; }

/* Shared compact summary card (redemptions, members, reports, etc.) */
.kpi-accent { background:#fff; border:1px solid var(--ta-grey-200); border-radius:8px; box-shadow:var(--ta-shadow-sm); padding:.75rem 1rem; border-left:3px 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 { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ta-grey-500); font-weight:700; }
.kpi-accent .v { font-size:1.55rem; font-weight:800; color:var(--ta-navy); font-family:'Avenir'; line-height:1.1; margin-top:.15rem; }
.kpi-accent .s { font-size:.68rem; color:var(--ta-grey-500); margin-top:.12rem; }
.ta-summary-card { cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
.ta-summary-card:hover { transform:translateY(-1px); box-shadow:var(--ta-shadow); }
.ta-summary-card:focus-visible { outline:2px solid var(--ta-info); outline-offset:2px; }
.ta-referral-date-filter { display:flex; align-items:center; gap:.45rem; }
.ta-referral-date-filter label { color:var(--ta-grey-500); font-size:.68rem; font-weight:700; white-space:nowrap; }
.ta-referral-date-filter .ta-input { min-width:135px; padding:.5rem .65rem; }
.ta-referrals-table { min-width:1180px; }
.ta-referrals-table .ta-referral-row { cursor:pointer; }
.ta-referrals-table .ta-action-menu { min-width:150px; }
@media (max-width: 767.98px) {
    .ta-referral-date-filter { width:100%; flex-wrap:wrap; }
    .ta-referral-date-filter .d-flex { width:100%; }
    .ta-referral-date-filter .ta-input { flex:1 1 0; min-width:0; }
}
.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); }
.ta-summary-info { flex:0 0 auto; }
.ta-summary-info .table-status-info__tip { left:0; right:auto; width:245px; }
.ta-referral-status-info .table-status-info__tip { width:285px; }
.ta-referral-column-info .table-status-info__tip { width:245px; }
.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 { color:var(--ta-error); }
.status-help--deactivated b { color:var(--ta-grey-500); }
.status-help--cancelled b { color:var(--ta-grey-500); }
.status-help--unsuccessful b { color:var(--ta-error); }
.status-help--code-expired b { color:var(--ta-warning); }
.status-help--voided b { color:#ef6c2f; }

/* 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; }
/* Direct value labels on the highlighted points. Ink, never the series colour —
   the coloured dot beside the number already carries identity. */
.ta-linechart .val-lbl { fill: var(--ta-navy, #162131); font-size:11.5px; font-weight:700; }
.ta-linechart circle { cursor: default; }

/* ============================================================
   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); }
/* Mobile/tablet: tabs scroll horizontally in a single row instead of wrapping
   into a messy multi-row block. */
@media (max-width: 991px) {
    .set-tabs { flex-wrap: nowrap; gap: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 1.2rem; }
    .set-tabs::-webkit-scrollbar { display: none; }
    .set-tabs a { flex: 0 0 auto; white-space: nowrap; }
}

/* 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; padding:1.25rem 1.5rem 0; }
.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; }

/* 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) tuned to match the app's inputs ── */
.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); }
/* The dropdown is appended to <body>, so keep it above the .modal overlay
   (z-index 1055) whether or not it was opened from within a modal. */
.select2-container--open { z-index: 1060; }
/* Multi-select: one compact chip system for every Select2 multi field. */
.select2-container--bootstrap-5 .select2-selection--multiple { min-height: 35px; padding: 4px 5px; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0 !important; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline { display: flex; align-items: center; height: 21px; margin: 0 !important; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field { height: 21px !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; 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; }

/* 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;
}
.ta-chartjs-canvas { display:block; width:100%; height:280px; min-height:180px; }
.ta-chartjs-canvas--redemptions { height:230px; min-height:180px; }
.ta-chartjs-canvas + svg, .ta-chartjs-canvas + .ta-linechart { display:none !important; }
.ta-chartjs-canvas--donut + .ta-donut { display:none !important; }
.ta-chart-tooltip {
    position: fixed; z-index: 1080; pointer-events: none; opacity: 0;
    display: grid; gap: .35rem; min-width: 148px; padding: .65rem .75rem;
    border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
    background: var(--ta-navy, #162131); color: #fff;
    box-shadow: 0 8px 22px rgba(22,33,49,.22);
    font-size: .72rem; font-weight: 700; white-space: nowrap;
    transition: opacity .12s ease;
}
.ta-chart-tooltip__row { display: flex; align-items: center; gap: .45rem; }
.ta-chart-tooltip__row svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: var(--ta-gold-soft, #E7C76B); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }