/* ==========================================================================
   ACXPA — Membership Dashboard stylesheet
   File:      /wp-content/themes/kleo-child/css/membership-dashboard.css
   Loads on:  the Membership Dashboard page only (page-id 75812), after
              custom.css (dependency: acxpa-custom-style), so it is the single
              source of truth for this page and cleanly overrides legacy rules.
   Scope:     every rule is prefixed with .page-id-75812 so nothing can leak
              to the rest of the site.
   Brand:     Deep Teal #0F4F5C · Gold #F9B02E · Ink #14252A · Cloud #F4F7F7
   Build:     section by section. FOUNDATION + WELCOME are live; later sections
              (summary, tables, ticks, tooltips) will be added below as we go.
   Version:   0.7.4  (modal submit loaders wired to css/images/sub-loader-wait.gif
                       — they were pointing at a missing gif so nothing showed)
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
.page-id-75812{
  --md-teal:#0F4F5C;
  --md-teal-deep:#0A3A44;
  --md-teal-tint:#DBE5E7;
  --md-gold:#F9B02E;
  --md-gold-tint:#FDEBCB;
  --md-ink:#14252A;
  --md-slate:#5E7075;
  --md-cloud:#F4F7F7;
  --md-white:#ffffff;
  --md-danger:#C0392B;
  --md-danger-tint:#FBEAE8;
  /* Purple — kept intentionally for the "Allocate yourself" CTA to match
     existing EDMs that refer to "the purple button". Off the core brand
     palette but a deliberate, isolated exception. */
  --md-purple:#6C3F9E;
  --md-purple-deep:#54307B;
  --md-radius:12px;
  --md-radius-sm:8px;
  --md-shadow:0 2px 10px rgba(10,58,68,.06);
  --md-maxw:1200px;
}

/* Single source of width for EVERY section, forced with !important so no legacy
   rule can make one block (e.g. Fully Activated) wider than the rest. Same
   box-sizing + max-width + centering everywhere = perfectly aligned columns. */
.page-id-75812 .mem-dash,
.page-id-75812 .acxpa-table-wrapper,
.page-id-75812 .acxpa-grid,
.page-id-75812 .acxpa-grid-search,
.page-id-75812 .table-responsive,
.page-id-75812 .acxpa-mem-inv{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:var(--md-maxw)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* --------------------------------------------------------------- TYPOGRAPHY */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

.page-id-75812 .mdash-title,
.page-id-75812 .mem-dash h1,
.page-id-75812 .mem-dash h2{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  color:var(--md-teal)!important;   /* !important: legacy custom.css colours the Pending heading orange with !important */
  line-height:1.2;
  margin:0 0 12px;
}
.page-id-75812 .mdash-title{font-size:30px;font-weight:800;}
.page-id-75812 .mem-dash h2{font-size:22px;font-weight:700;}

.page-id-75812 .mem-dash p,
.page-id-75812 .mem-dash li{
  font-family:'Poppins',system-ui,-apple-system,sans-serif;
  color:var(--md-ink);
  font-size:16px;
  line-height:1.7;
}
.page-id-75812 .mdash-lead{font-size:17px;margin:0 0 18px;}
.page-id-75812 .mem-dash a{color:var(--md-teal);text-decoration:underline;}
.page-id-75812 .mem-dash a:hover{color:var(--md-gold);}
.page-id-75812 .mdash-inline-link{font-weight:600;}
.page-id-75812 .mdash-accent{color:var(--md-teal);}   /* "gold 'Invite Employees'" keyword */
.page-id-75812 .mdash-purple-word{color:var(--md-purple)!important;font-weight:700;}   /* "purple button" keyword */

.page-id-75812 .mdash-list{margin:0;padding-left:22px;}
.page-id-75812 .mdash-list li{margin-bottom:10px;}
.page-id-75812 .mdash-list li:last-child{margin-bottom:0;}

/* ------------------------------------------------- MEM-DASH CALLOUT SYSTEM */
/* Base card used for every intro / message block on the dashboard. Colour
   variants below give each section its status meaning (concept carried over
   from the original, executed on-brand). */
.page-id-75812 .mem-dash{
  max-width:var(--md-maxw);
  margin:0 auto 24px;
  padding:28px 30px;
  background:var(--md-white);
  border:1px solid var(--md-teal-tint);
  border-radius:var(--md-radius);
  box-shadow:var(--md-shadow);
}

/* Hero / welcome */
.page-id-75812 .mem-dash--welcome{
  border-top:4px solid var(--md-teal);
}

/* Status variants — a coloured left edge carries the meaning; heading stays
   teal for readability. (Used by later sections; defined here so the system
   is consistent from the start.) */
/* Softer treatment: alert-type blocks use a light tinted background (no heavy
   coloured left bar), and content blocks are plain white cards — so several
   stacked blocks don't feel busy. !important overrides legacy custom.css.
   (Left bars were removed after feedback that three of them was overwhelming.) */
.page-id-75812 .mem-dash--notice{background:var(--md-teal-tint)!important;border-color:#cdd9dc!important;border-left:1px solid #cdd9dc!important;}
.page-id-75812 .mem-dash--notice strong{color:var(--md-teal)!important;}
.page-id-75812 .mem-dash--info{background:var(--md-gold-tint)!important;border-color:#f0e2c2!important;border-left:1px solid #f0e2c2!important;}
.page-id-75812 .mem-dash--danger{background:var(--md-danger-tint)!important;border-color:#f3d6d2!important;border-left:4px solid var(--md-danger)!important;}
.page-id-75812 .mem-dash--danger .mdash-message-body{color:var(--md-danger);}

/* Data-section intros carry a status colour on the LEFT edge:
   teal = active/healthy · gold = needs action · red = cancelled/closed.
   (The top cluster — welcome / renewal / note / summary — stays calm, per the
   earlier "three stacked bars is too much" feedback.) */
.page-id-75812 .mem-dash--summary{border-left:1px solid var(--md-teal-tint)!important;}
/* Fully Activated intro — teal accent. height:auto + overflow:visible guard
   against any legacy rule that was clipping this card (text was spilling). */
.page-id-75812 .mem-dash--active{
  border-left:6px solid var(--md-teal)!important;background:var(--md-white)!important;
  border-color:var(--md-teal-tint)!important;height:auto!important;overflow:visible!important;float:none!important;
}
.page-id-75812 .mem-dash--active h2{color:var(--md-teal)!important;}
/* clear break between the two intro paragraphs so the block is easy to read */
.page-id-75812 .mem-dash > p{margin:0 0 18px!important;}
.page-id-75812 .mem-dash > p:last-child{margin-bottom:0!important;}
.page-id-75812 .mem-dash--pending,
.page-id-75812 .mem-dash--partial{border-left:4px solid var(--md-gold)!important;background:var(--md-gold-tint)!important;border-color:#f0e2c2!important;}

/* ------------------------------------------------------- RENEWAL / EXPIRY MESSAGES */
/* NB: display of .has-cancelled-message / .has-not-cancelled-message is toggled
   elsewhere — we never set display on those, only on the inner wrapper. */
.page-id-75812 .mdash-message{padding:20px 24px;}
.page-id-75812 .mdash-message .mdash-message-inner{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.page-id-75812 .mdash-message-icon{
  flex:0 0 auto;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--md-white);
  font-size:18px;
  box-shadow:var(--md-shadow);
}
.page-id-75812 .mdash-message-body p{margin:0 0 8px;}
.page-id-75812 .mdash-message-body p:last-child{margin:0;}
.page-id-75812 .mem-dash--danger .mdash-message-body{color:var(--md-danger);}
.page-id-75812 .mem-dash--danger .mdash-message-body a{color:var(--md-danger);font-weight:700;}
.page-id-75812 .mem-dash--info   .mdash-message-body a{color:var(--md-teal);font-weight:700;}
.page-id-75812 .mem-dash--notice .mdash-message-icon{color:var(--md-teal);font-size:18px;}
.page-id-75812 .mem-dash--notice .mdash-message-body strong{color:var(--md-teal)!important;}

/* --------------------------------------------------------------- BUTTONS */
/* Primary CTA — Invite Employees (gold). */
.page-id-75812 .mem-dash-invite-btn{
  background:var(--md-gold);
  color:var(--md-ink);
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:16px;
  line-height:1.1;
  border:none;
  border-radius:10px;
  padding:13px 30px;
  cursor:pointer;
  box-shadow:0 2px 4px rgba(10,58,68,.12);
  transition:background-color .15s ease,color .15s ease;
  white-space:nowrap;
}
.page-id-75812 .mem-dash-invite-btn:hover{background:var(--md-teal);color:#fff;}

/* ==================================================== SUMMARY + ALLOCATE (0.2.0) */

/* Invite / allocate hero row — allocate card / note on the left, Invite button
   on the right. align-items:stretch makes both columns equal height so the
   Invite button matches the height of the left block. */
.page-id-75812 .acxpa-mem-inv{
  display:flex;flex-wrap:wrap;gap:20px;align-items:stretch;
  max-width:var(--md-maxw);margin:0 auto 24px;
}
/* Equal-width columns so the two CTAs form a balanced, matched pair. */
.page-id-75812 .acxpa-mem-l,
.page-id-75812 .acxpa-mem-r{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;}
/* left-column note/card fills the column cleanly (drop the auto-centering it
   has as a standalone block) */
.page-id-75812 .acxpa-mem-l > .mem-dash{margin:0!important;max-width:none;flex:1 1 auto;}
.page-id-75812 .acxpa-mem-l .allocate_yourself{display:flex;flex-direction:column;flex:1 1 auto;}

/* Matched CTA pair — Allocate yourself (purple) + Invite Employees (gold):
   equal height, full width of their column, centred text. */
.page-id-75812 .acxpa-mem-r .mem-dash-invite-btn,
.page-id-75812 .acxpa-mem-l .chnagelvl-toggle{
  width:100%;flex:1 1 auto;min-height:72px;
  display:flex!important;align-items:center;justify-content:center;
  font-size:18px;padding:16px 24px;text-align:center;line-height:1.2;
}
@media (max-width:768px){
  .page-id-75812 .acxpa-mem-l,
  .page-id-75812 .acxpa-mem-r{flex:1 1 100%;}
  .page-id-75812 .acxpa-mem-r .mem-dash-invite-btn,
  .page-id-75812 .acxpa-mem-l .chnagelvl-toggle{min-height:56px;}
}

/* Allocate-yourself area + its collapse card */
.page-id-75812 .allocate_yourself{margin:0;}
.page-id-75812 .card.card-body{
  background:var(--md-cloud);border:1px solid var(--md-teal-tint);
  border-radius:var(--md-radius-sm);padding:18px 20px;margin-top:12px;box-shadow:none;
}
.page-id-75812 .card.card-body p{margin:0 0 10px;}
.page-id-75812 .card.card-body p:last-child{margin:0;}

/* Allocate toggle + submit buttons (teal). The second, higher-specificity
   selector matches the legacy custom.css rule so our padding/size wins. */
.page-id-75812 .chnagelvl-toggle,
.page-id-75812 button.btn.btn-primary.chnagelvl-toggle{
  background:var(--md-purple)!important;color:#fff!important;border:none!important;
  border-radius:var(--md-radius-sm)!important;font-family:'Poppins',sans-serif;
  font-weight:700;font-size:16px!important;padding:12px 24px!important;line-height:1.1;
  cursor:pointer;transition:background-color .15s ease;
}
.page-id-75812 .chnagelvl-toggle:hover,
.page-id-75812 button.btn.btn-primary.chnagelvl-toggle:hover{background:var(--md-purple-deep)!important;}
.page-id-75812 .acxpa-submit-btn,
.page-id-75812 .btn-info.acxpa-submit-btn{
  background:var(--md-teal)!important;color:#fff!important;border:1px solid var(--md-teal)!important;
  border-radius:var(--md-radius-sm)!important;font-family:'Poppins',sans-serif;font-weight:700;
  padding:12px 22px!important;margin-top:12px;cursor:pointer;white-space:normal;
}
.page-id-75812 .acxpa-submit-btn:hover{background:var(--md-teal-deep)!important;border-color:var(--md-teal-deep)!important;}

/* Seats-remaining note + no-seats message */
.page-id-75812 .left_mem{color:var(--md-teal);font-weight:800;}
.page-id-75812 label[for="2"]{display:inline-block;margin:8px 0 0;color:var(--md-slate);font-size:14px;}
.page-id-75812 .no-seat-msg{
  background:var(--md-gold-tint);border-left:4px solid var(--md-gold);
  padding:12px 16px;border-radius:6px;margin-top:12px;color:var(--md-ink);
}
.page-id-75812 .no-seat-link{color:var(--md-teal);font-weight:700;text-decoration:underline;}

/* Summary intro card (neutral overview) */
.page-id-75812 .mem-dash--summary{border-left:4px solid var(--md-teal);}

/* Summary numbers table (single headline row) */
.page-id-75812 .table-responsive{
  max-width:var(--md-maxw);margin:0 auto 24px;overflow-x:auto;
  border:1px solid var(--md-teal-tint);border-radius:var(--md-radius);box-shadow:var(--md-shadow);
}
/* table-layout:fixed + equal columns so all 7 columns fit on desktop without
   horizontal scroll (headers wrap; only very narrow screens will scroll). */
.page-id-75812 .seats_table{
  width:100%;table-layout:fixed!important;border-collapse:collapse;background:var(--md-white);
  font-family:'Poppins',sans-serif;margin:0;
}
/* white-space:normal!important forces the long headers to wrap and stay inside
   their fixed-width cell (legacy custom.css sets nowrap, which caused the
   spill-over). Each header centres over 2–3 lines. */
.page-id-75812 .seats_table th{
  background:var(--md-teal)!important;color:#fff!important;
  padding:10px 6px;font-size:12px;font-weight:600;text-align:center;line-height:1.25;
  border:1px solid var(--md-teal-deep)!important;vertical-align:middle;
  white-space:normal!important;word-break:break-word;overflow-wrap:break-word;hyphens:auto;
}
.page-id-75812 .seats_table td,
.page-id-75812 .seats_table tbody td{
  padding:14px 8px;text-align:center;font-size:19px;font-weight:700;
  color:var(--md-teal)!important;background:var(--md-white);
  border:1px solid var(--md-teal-tint)!important;
}

/* Brand dividers used throughout the dashboard */
.page-id-75812 hr.under_allocate_yourself,
.page-id-75812 hr.under_invitation{
  border:none!important;border-top:2px solid var(--md-teal-tint)!important;
  margin:26px auto!important;max-width:var(--md-maxw);
}

/* ==================================================== DATA TABLES (0.4.0) */
/* Base styling shared by every .acxpa-table (Pending, Cancelled, and later the
   Active / Partially / Fully Activated tables). The wide Fully Activated grid
   gets its extra treatment (sticky name column, tick badges, tooltips) in its
   own pass. */
.page-id-75812 .acxpa-table-wrapper{
  max-width:var(--md-maxw);margin:0 auto 24px;overflow-x:auto;
  background:var(--md-white);
  border:1px solid var(--md-teal-tint);border-radius:var(--md-radius);box-shadow:var(--md-shadow);
}
.page-id-75812 .acxpa-table{
  width:100%;border-collapse:collapse;background:var(--md-white);
  font-family:'Poppins',sans-serif;font-size:14px;margin:0;
}
.page-id-75812 .acxpa-table thead th{
  background:var(--md-teal)!important;color:#fff!important;
  font-weight:600;font-size:13px;text-align:left;padding:12px 14px;
  border:none!important;vertical-align:middle;white-space:normal;line-height:1.3;
}
.page-id-75812 .acxpa-table td{
  padding:11px 14px;border-bottom:1px solid var(--md-teal-tint)!important;
  color:var(--md-ink);vertical-align:middle;
}
.page-id-75812 .acxpa-table tbody tr:last-child td{border-bottom:none!important;}
.page-id-75812 .acxpa-table tbody tr:nth-child(even){background:var(--md-cloud);}
.page-id-75812 .acxpa-table tbody tr:hover{background:var(--md-gold-tint);}
.page-id-75812 .acxpa-table .col-index{width:48px;text-align:center;color:var(--md-slate);}
.page-id-75812 .acxpa-table .col-actions{text-align:right;white-space:nowrap;}

/* Header/data alignment for the FLAT tables (Pending, Cancelled, Partially
   Activated). Legacy custom.css centred the data while the headers stayed left,
   so they didn't line up. Force both to match: text columns left, # centred,
   tick columns centred, action buttons right. Scoped :not(.acxpa-grid) so the
   transposed Fully-Activated grid keeps its own centred cells. */
.page-id-75812 .acxpa-table-wrapper:not(.acxpa-grid) .acxpa-table thead th,
.page-id-75812 .acxpa-table-wrapper:not(.acxpa-grid) .acxpa-table tbody td{text-align:left!important;}
.page-id-75812 .acxpa-table-wrapper:not(.acxpa-grid) .acxpa-table th.col-index,
.page-id-75812 .acxpa-table-wrapper:not(.acxpa-grid) .acxpa-table td.col-index,
.page-id-75812 .acxpa-table-wrapper:not(.acxpa-grid) .acxpa-table th.icon-content,
.page-id-75812 .acxpa-table-wrapper:not(.acxpa-grid) .acxpa-table td.icon-content{text-align:center!important;}
.page-id-75812 .acxpa-table-wrapper:not(.acxpa-grid) .acxpa-table th.col-actions,
.page-id-75812 .acxpa-table-wrapper:not(.acxpa-grid) .acxpa-table td.col-actions{text-align:right!important;}

/* Edit (teal) + Cancel/Withdraw (red) buttons */
.page-id-75812 .acxpa-table .update,
.page-id-75812 .btn-primary.update{
  background:var(--md-teal)!important;color:#fff!important;border:none!important;
  border-radius:6px!important;font-weight:600;padding:6px 16px!important;white-space:nowrap;cursor:pointer;
}
.page-id-75812 .acxpa-table .update:hover,
.page-id-75812 .btn-primary.update:hover{background:var(--md-teal-deep)!important;color:#fff!important;}
.page-id-75812 .mem-cancel,
.page-id-75812 .btn-danger.delete{
  background:var(--md-danger)!important;color:#fff!important;border:none!important;
  border-radius:6px!important;font-weight:600;padding:6px 12px!important;white-space:nowrap;cursor:pointer;
}
.page-id-75812 .mem-cancel:hover{background:#992d22!important;color:#fff!important;}

/* Empty state (e.g. no pending invitations) */
.page-id-75812 .no-data-msg{margin:0;color:var(--md-slate);}
.page-id-75812 .no-data-msg a{color:var(--md-teal);font-weight:600;}

/* ==================================================== STATUS TICKS (0.5.0) */
/* Small round badges replacing the old 20px green/red glyphs */
.page-id-75812 .acxpa-md-tick{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;font-size:12px;line-height:1;font-weight:700;}
.page-id-75812 .acxpa-md-tick.is-yes{background:var(--md-teal);color:#fff;}
.page-id-75812 .acxpa-md-tick.is-no{background:var(--md-danger-tint);color:var(--md-danger);}

/* ============================================= FULLY ACTIVATED GRID (0.6.0) */
/* Transposed grid: employees across the top, features down the side.
   Frozen header row + frozen first column via position:sticky. The table always
   fills the container width via a trailing spacer column; employee columns stay
   a fixed width, so a handful of employees still looks full-width and a hundred
   scroll horizontally with the feature column frozen. */

/* Employee search box above the grid */
.page-id-75812 .acxpa-grid-search{
  max-width:var(--md-maxw);margin:0 auto 10px;display:flex;justify-content:flex-end;
}
.page-id-75812 .acxpa-grid-search input{
  font-family:'Poppins',sans-serif;font-size:14px;color:var(--md-ink)!important;
  padding:9px 14px 9px 34px!important;border:1.5px solid var(--md-slate)!important;border-radius:var(--md-radius-sm)!important;
  width:280px!important;max-width:100%;box-sizing:border-box;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E7075' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 10px center!important;
  background-size:16px 16px!important;
}
.page-id-75812 .acxpa-grid-search input:focus{outline:none;border-color:var(--md-teal)!important;box-shadow:0 0 0 3px rgba(15,79,92,.15);}

.page-id-75812 .acxpa-grid{
  max-height:72vh;overflow:auto;position:relative;
  width:100%;max-width:var(--md-maxw);margin:0 auto 24px;
  border:1px solid var(--md-teal-tint);border-radius:var(--md-radius);box-shadow:var(--md-shadow);
}
.page-id-75812 .acxpa-grid table.acxpa-table{border-collapse:separate;border-spacing:0;width:100%;background:#fff;margin:0;}
.page-id-75812 .acxpa-grid .acxpa-table th,
.page-id-75812 .acxpa-grid .acxpa-table td{border-bottom:1px solid var(--md-teal-tint)!important;border-right:1px solid var(--md-teal-tint);}

/* fixed first column (feature labels) */
.page-id-75812 .acxpa-grid .child-table-first-col,
.page-id-75812 .acxpa-grid thead th:first-child{width:260px;min-width:260px;max-width:260px;}
/* fixed employee columns */
.page-id-75812 .acxpa-grid .acxpa-emp-col{width:148px;min-width:148px;max-width:148px;}
/* trailing spacer soaks up any leftover width so the table is always full-width */
.page-id-75812 .acxpa-grid .acxpa-grid-spacer{width:auto;padding:0;}
.page-id-75812 .acxpa-grid thead th.acxpa-grid-spacer{background:var(--md-teal-deep)!important;border-right:none!important;}
.page-id-75812 .acxpa-grid tbody td.acxpa-grid-spacer{background:#fff;border-right:none!important;}

/* member-name header row — frozen to the top; names stacked (first / last).
   A pale divider between header cells gives the name row visible column borders. */
.page-id-75812 .acxpa-grid thead th{position:sticky;top:0;z-index:2;background:var(--md-teal-deep)!important;color:#fff!important;
  font-weight:600;font-size:12px;text-align:center;padding:10px 8px;white-space:normal;vertical-align:middle;
  border-right:1px solid rgba(255,255,255,.22)!important;}
.page-id-75812 .acxpa-grid thead th .emp-name{display:flex;flex-direction:column;line-height:1.25;}
.page-id-75812 .acxpa-grid thead th .emp-fn{font-weight:600;}
.page-id-75812 .acxpa-grid thead th .emp-ln{font-weight:700;}
/* feature-label first column — frozen to the left */
.page-id-75812 .acxpa-grid .child-table-first-col{position:sticky;left:0;z-index:1;background:var(--md-cloud);
  text-align:left;font-weight:600;color:var(--md-ink);font-size:13px;padding:9px 14px;}
/* top-left corner — frozen both ways, on top */
.page-id-75812 .acxpa-grid thead th:first-child{left:0;z-index:3;text-align:left;}
/* body cells + zebra (kept in sync on the sticky column) */
.page-id-75812 .acxpa-grid tbody td{text-align:center;padding:8px 8px;background:#fff;vertical-align:middle;
  font-size:12.5px;color:var(--md-ink);word-break:break-word;overflow-wrap:anywhere;}
.page-id-75812 .acxpa-grid tbody tr:nth-child(odd) td{background:#fbfdfd;}
.page-id-75812 .acxpa-grid tbody tr:nth-child(odd) .child-table-first-col{background:#eaf1f1;}
/* email cell — force full wrap inside the narrow column; defeat any legacy
   ellipsis/nowrap so the address is never cut off. */
.page-id-75812 .acxpa-grid td.emp-email{font-size:11px;line-height:1.35;color:var(--md-slate);}
.page-id-75812 .acxpa-grid td.emp-email,
.page-id-75812 .acxpa-grid td.emp-email a{
  white-space:normal!important;word-break:break-all!important;overflow-wrap:anywhere!important;
  overflow:visible!important;text-overflow:clip!important;max-width:100%;
}
.page-id-75812 .acxpa-grid td.emp-email a{display:block;color:var(--md-teal)!important;text-decoration:none;}
.page-id-75812 .acxpa-grid td.emp-email a:hover{text-decoration:underline;}

/* group sub-heading rows — a PALE YELLOW band with black text + icon: a clear,
   distinct colour break between sections. */
.page-id-75812 .acxpa-grid-group td{position:sticky;left:0;z-index:1;
  background:var(--md-gold-tint)!important;color:#111!important;
  font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 16px;border:none!important;
  border-top:1px solid #eccf8f!important;border-bottom:1px solid #eccf8f!important;}
.page-id-75812 .acxpa-grid-group td span{position:sticky;left:16px;display:inline-flex;align-items:center;gap:8px;}
/* tooltip trigger icon in feature labels (popup styling lives in the TOOLTIPS
   section below) */
.page-id-75812 .acxpa-grid .memdb-tooltip{color:var(--md-teal);margin-left:5px;cursor:help;}

/* ==================================================== MODALS (0.7.0) */
/* Invite / Edit / Cancel / Withdraw popups. Brought onto the brand: teal
   titles (the old "+" icon and heading were green), branded inputs, and a
   consistent footer button system. Button BACKGROUNDS for the JS-driven
   buttons (#sp-save, #sp-cancel, #sp-edit-save) are set in modal.php's script
   to brand hex values — here we only fix their text colour + shape so the
   enabled/disabled affordance still works. */
/* NOTE: earlier overflow:hidden clipped tall modals and killed scrolling. The
   fix: cap height to the viewport and let the modal scroll INTERNALLY, so the
   footer buttons are always reachable regardless of the theme's outer scroll. */
.page-id-75812 .modal-content{border:none!important;border-radius:var(--md-radius)!important;
  box-shadow:0 14px 44px rgba(10,58,68,.22)!important;font-family:'Poppins',sans-serif;
  max-height:90vh!important;overflow-y:auto!important;}
.page-id-75812 .modal-header{background:var(--md-cloud)!important;border-bottom:1px solid var(--md-teal-tint)!important;
  padding:20px 24px!important;border-radius:var(--md-radius) var(--md-radius) 0 0;}
.page-id-75812 .modal-title{color:var(--md-teal)!important;font-family:'Poppins',sans-serif!important;font-weight:700!important;font-size:20px!important;margin:0;}
.page-id-75812 .modal-title i.fa{color:var(--md-teal)!important;margin-right:5px;}
.page-id-75812 .modal-header p,
.page-id-75812 .modal-header li{color:var(--md-ink)!important;font-size:14px;line-height:1.55;font-weight:400;}
.page-id-75812 .modal-header p{margin:10px 0 0;}
.page-id-75812 .modal-header ul{margin:8px 0 0;padding-left:20px;}
.page-id-75812 .modal-header li{margin-bottom:5px;}
.page-id-75812 .modal-header .close{color:var(--md-slate)!important;opacity:.6;text-shadow:none!important;font-size:26px;font-weight:400;}
.page-id-75812 .modal-header .close:hover{opacity:1;color:var(--md-teal)!important;}

/* Destructive modals (Cancel + Withdraw) get a red-tinted header + red title so
   the intent is unmistakable. */
.page-id-75812 #cancelModal .modal-header,
.page-id-75812 #del_invitation .modal-header{background:var(--md-danger-tint)!important;border-bottom-color:#f0cfca!important;}
.page-id-75812 #cancelModal .modal-title,
.page-id-75812 #cancelModal .modal-title i.fa,
.page-id-75812 #del_invitation .modal-title,
.page-id-75812 #del_invitation .modal-title i.fa{color:var(--md-danger)!important;}

.page-id-75812 .modal-body{padding:22px 24px!important;}
.page-id-75812 .modal-body .form-group{margin-bottom:16px;}
.page-id-75812 .modal-body .control-label{color:var(--md-ink)!important;font-weight:600!important;margin-bottom:6px;font-size:14px;}
.page-id-75812 .modal-body .form-control,
.page-id-75812 .modal-body .sp-input,
.page-id-75812 .modal-body select.cancel_reason{
  border:1px solid var(--md-teal-tint)!important;border-radius:var(--md-radius-sm)!important;
  padding:10px 12px!important;height:auto!important;font-family:'Poppins',sans-serif!important;
  font-size:15px!important;box-shadow:none!important;color:var(--md-ink)!important;background:#fff!important;
}
.page-id-75812 .modal-body .form-control:focus,
.page-id-75812 .modal-body select.cancel_reason:focus{border-color:var(--md-teal)!important;box-shadow:0 0 0 3px rgba(15,79,92,.12)!important;outline:none!important;}
/* resend-invitation row (Edit modal): keep the checkbox and its label on one
   line, top-aligned, instead of the label dropping underneath. */
.page-id-75812 #send_edit_invitation_wraper{display:flex;align-items:flex-start;gap:8px;}
.page-id-75812 #send_edit_invitation_wraper input[type=checkbox]{margin:3px 0 0;flex:0 0 auto;}
.page-id-75812 #send_edit_invitation_wraper label{margin:0;font-weight:600;}
/* the dynamic remaining-count number → a gold pill so it stands out */
.page-id-75812 .modal-body .color-green{display:inline-block;background:var(--md-gold)!important;color:var(--md-ink)!important;
  font-weight:800;padding:1px 10px;border-radius:20px;font-size:1.05em;line-height:1.5;}
.page-id-75812 .modal-body p[style*="red"]{color:var(--md-danger)!important;font-weight:600;}

.page-id-75812 .modal-footer{background:var(--md-cloud)!important;border-top:1px solid var(--md-teal-tint)!important;
  padding:16px 24px!important;border-radius:0 0 var(--md-radius) var(--md-radius);}
.page-id-75812 .modal-footer .btn,
.page-id-75812 .modal-footer input[type=submit]{
  border-radius:var(--md-radius-sm)!important;font-family:'Poppins',sans-serif!important;font-weight:700!important;
  padding:11px 22px!important;font-size:15px!important;border:none!important;box-shadow:none!important;cursor:pointer;
}
/* Kill Bootstrap's btn-info blue inside modals (rest + hover/focus) so no button
   ever flashes blue before its script/inline colour is applied. Default look is
   a neutral disabled grey; specific buttons below claim their brand colour. */
.page-id-75812 .modal-footer .btn-info,
.page-id-75812 .modal-footer .btn-info:hover,
.page-id-75812 .modal-footer .btn-info:focus,
.page-id-75812 .modal-footer .btn-info:active{background-color:#EAEAEA;border-color:#EAEAEA;color:#fff;}
/* Send (Invite) → always gold */
.page-id-75812 #sp-save,
.page-id-75812 #sp-save:focus,
.page-id-75812 #sp-save:active{background-color:var(--md-gold)!important;border-color:var(--md-gold)!important;color:var(--md-ink)!important;}
.page-id-75812 #sp-save:hover{background-color:#e69f1f!important;border-color:#e69f1f!important;color:var(--md-ink)!important;}
/* Save (Edit) → always teal */
.page-id-75812 #sp-edit-save,
.page-id-75812 #sp-edit-save:focus,
.page-id-75812 #sp-edit-save:active{background-color:var(--md-teal)!important;border-color:var(--md-teal)!important;color:#fff!important;}
.page-id-75812 #sp-edit-save:hover{background-color:var(--md-teal-deep)!important;border-color:var(--md-teal-deep)!important;color:#fff!important;}
/* Cancel Membership / Withdraw confirm → grey until enabled (JS/inline turns
   them red); white label. */
.page-id-75812 .modal-footer .sp-cancel-btn{color:#fff!important;}
/* Delete (edit) → red */
.page-id-75812 .modal-footer .btn-danger{background:var(--md-danger)!important;color:#fff!important;}
.page-id-75812 .modal-footer .btn-danger:hover{background:#992d22!important;}
/* Close / No → neutral */
.page-id-75812 .modal-footer .btn-default{background:#e6ebec!important;color:var(--md-ink)!important;border:1px solid #d3dcde!important;}
.page-id-75812 .modal-footer .btn-default:hover{background:#d8e0e1!important;}

/* Submit loaders — the markup already shows these on submit (footer hides,
   loader shows). They were pointing at a missing gif, so nothing appeared.
   Point them at the verified loader gif in /css/images/ (path is relative to
   THIS stylesheet, which lives in /css/). Keeps the default display:none from
   custom.css; the JS still toggles visibility. */
.page-id-75812 .modal .submit-loader,
.page-id-75812 .modal .sp-del-loader{
  background:url("images/sub-loader-wait.gif") no-repeat center !important;
  background-size:auto 46px !important;
  min-height:64px !important;
}

/* ==================================================== TOOLTIPS (0.7.3) */
/* Brings the feature-label tooltips onto the brand. There are two mechanisms:
   (1) the CSS hover popup .tooltip-content, and (2) the JS-built .global-tooltip
   that modal.php appends to <body> so it can escape the grid's scroll clipping
   (this is the one that actually shows inside the grid). Both are styled here to
   look identical and on-brand. These override the legacy .memdb-tooltip block in
   custom.css (this file loads later + scoped + !important); once verified live,
   that legacy block can be safely deleted from custom.css. */
.page-id-75812 .memdb-tooltip{position:relative;display:inline-block;color:var(--md-teal)!important;cursor:help;vertical-align:middle;margin-left:5px;}

/* shared branded tooltip bubble */
.page-id-75812 .memdb-tooltip .tooltip-content,
.page-id-75812 .global-tooltip{
  background:var(--md-teal-deep)!important;color:#fff!important;
  font-family:'Poppins',system-ui,sans-serif!important;font-size:13px!important;line-height:1.45!important;
  text-align:left!important;padding:10px 13px!important;border-radius:var(--md-radius-sm)!important;
  max-width:280px!important;width:max-content!important;box-shadow:0 6px 20px rgba(10,58,68,.28)!important;
  white-space:normal!important;font-weight:400!important;
}
/* CSS hover popup (.tooltip-content) — keep its hover reveal + reposition arrow on brand */
.page-id-75812 .memdb-tooltip .tooltip-content{visibility:hidden;opacity:0;position:absolute;z-index:1000;
  top:-6px;left:120%;transition:opacity .2s ease-in-out;}
.page-id-75812 .memdb-tooltip:hover .tooltip-content{visibility:visible;opacity:1;}
.page-id-75812 .memdb-tooltip .tooltip-content::after{content:"";position:absolute;top:12px;left:-5px;
  border-width:5px;border-style:solid;border-color:transparent var(--md-teal-deep) transparent transparent;}
/* JS popup (.global-tooltip) — position/z-index are set inline by the script;
   we only supply the appearance (shared rule above). */

/* ==========================================================================
   TODO — added one section at a time:
   [x] Summary table (.seats_table) + Allocate/Submit buttons
   [x] Pending invitations table + Edit button
   [x] Cancelled/Withdrawn table
   [x] Fully Activated grid — frozen panes, grouped rows, tick badges
   [x] Partially Activated table
   [x] Invite / Edit / Cancel / Withdraw modals (brand palette, title-bug fix)
   [x] Tooltips brought on-brand here (STEP 2: delete the legacy .memdb-tooltip
       block from custom.css, ~lines 4676-4718, after verifying live)
   ========================================================================== */

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:768px){
  .page-id-75812 .mem-dash{padding:22px 18px;}
  .page-id-75812 .mdash-title{font-size:24px;}
  .page-id-75812 .mem-dash-invite-btn{width:100%;}
}