/* ==========================================================================
   MyErgoHub — Organization Management page components
   Scoped with meh- prefixed classes to avoid clashing with theme/global CSS.
   Load alongside meh-app-layout.css.
   ========================================================================== */

.meh-page-content{
  --meh-purple-bg:#eee9ff;
  --meh-purple-text:#6d4fe0;
  --meh-green-bg:#e4f8ec;
  --meh-green-text:#178a4c;
  --meh-yellow-bg:#fff6df;
  --meh-yellow-text:#b7791f;
  --meh-red-bg:#fdeaea;
  --meh-red-text:#d0342c;
}

.meh-breadcrumb{ font-size:13px; margin-bottom:14px; }
.meh-breadcrumb a{ color:var(--meh-blue); text-decoration:none; font-weight:500; }
.meh-breadcrumb span{ color:var(--meh-mute); margin:0 6px; }
.meh-breadcrumb .meh-current{ color:var(--meh-mute); }

.meh-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:22px;
  gap:16px;
}
.meh-page-header h1{ font-size:24px; margin:0 0 6px; color:var(--meh-ink); font-weight:700; }
.meh-page-header p{ margin:0; color:var(--meh-mute); font-size:14px; }

.meh-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:600;
  padding:9px 16px;
  border-radius:8px;
  border:1px solid var(--meh-border);
  background:#fff;
  color:var(--meh-blue);
  cursor:pointer;
  white-space:nowrap;
  font-family:inherit;
}
.meh-btn-primary{ background:var(--meh-blue); color:#fff; border-color:var(--meh-blue); }
.meh-btn-primary:hover{ background:var(--meh-blue-dark); }
.meh-btn-outline-danger{ background:#fff; color:var(--meh-red-text); border-color:#f6c8c6; }
.meh-btn-sm{ font-size:12.5px; padding:7px 12px; }

.meh-card{
  background:#fff;
  border:1px solid var(--meh-border);
  border-radius:14px;
  padding:26px 28px;
  margin-bottom:22px;
}
.meh-card h2{ font-size:17px; margin:0 0 20px; color:var(--meh-ink); }
.meh-card > .meh-desc{ margin:0 0 20px; color:var(--meh-mute); font-size:13px; }

.meh-field{ margin-bottom:18px; }
.meh-field label{ display:block; font-size:13px; font-weight:600; color:var(--meh-ink); margin-bottom:6px; }
.meh-field label .meh-req{ color:#e04747; }
.meh-field label .meh-opt{ color:var(--meh-mute); font-weight:500; }
.meh-field input[type="text"],
.meh-field input[type="email"],
.meh-field select{
  width:100%;
  padding:10px 12px;
  font-size:14px;
  border:1px solid #aeb1b8;
  border-radius:8px;
  color:var(--meh-ink);
  background:#fff;
  font-family:inherit;
}
.meh-field input:focus, .meh-field select:focus{
  outline:none;
  border-color:var(--meh-blue);
  box-shadow:0 0 0 3px rgba(47,95,224,0.12);
}
.meh-hint{ margin-top:6px; font-size:12px; color:var(--meh-mute); }

.meh-org-grid{ margin-top:18px; }
.meh-col{ display:flex; flex-direction:column; }

.meh-checkbox-list{ display:flex; flex-direction:column; gap:10px; margin:6px 0 8px; }
.meh-checkbox-row{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--meh-ink); }
.meh-checkbox-row input{ width:16px; height:16px; accent-color:var(--meh-blue); }

.meh-users-layout{ display:grid; grid-template-columns:1fr 300px; gap:28px; }

.meh-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.meh-table thead th{
  text-align:left;
  color:var(--meh-ink);
  font-weight:600;
  font-size:12.5px;
  padding:0 10px 10px 10px;
  border-bottom:1px solid var(--meh-border);
}
.meh-table tbody td{
  padding:14px 10px;
  border-bottom:1px solid #f0f2f6;
  vertical-align:middle;
  color:var(--meh-ink);
}
.meh-table tbody tr:last-child td{ border-bottom:none; }
.meh-email{ color:var(--meh-mute); }

.meh-badge{ display:inline-block; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; }
.meh-badge-role{ background:var(--meh-purple-bg); color:var(--meh-purple-text); }
.meh-badge-active{ background:var(--meh-green-bg); color:var(--meh-green-text); }
.meh-badge-invited{ background:var(--meh-yellow-bg); color:var(--meh-yellow-text); }
.meh-badge-inactive{ background:var(--meh-red-bg); color:var(--meh-red-text); }

.meh-actions{ display:flex; gap:14px; align-items:center; color:var(--meh-mute); }
.meh-actions i{ cursor:pointer; font-size:13px; }

.meh-table-footer{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:16px; font-size:13px; color:var(--meh-mute);
}
.meh-pagination{ display:flex; align-items:center; gap:6px; }
.meh-pagination button{
  width:26px; height:26px; border:1px solid var(--meh-border); background:#fff;
  border-radius:6px; color:var(--meh-mute); cursor:pointer; font-size:11px;
}
.meh-page-num{
  width:26px; height:26px; border:1.5px solid var(--meh-blue); color:var(--meh-blue);
  border-radius:6px; display:flex; align-items:center; justify-content:center; font-weight:600;
}

.meh-user-form{ border-left:1px solid var(--meh-border); padding-left:26px; }
.meh-user-form-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.meh-user-form-head h3{ font-size:14px; margin:0; color:var(--meh-ink); }
.meh-user-form .meh-field{ margin-bottom:14px; }
.meh-checkbox-inline{
  display:flex; gap:8px; font-size:12.5px; color:var(--meh-ink); margin-bottom:18px; align-items:flex-start;
}
.meh-checkbox-inline input{ margin-top:2px; width:15px; height:15px; accent-color:var(--meh-blue); flex-shrink:0; }
.meh-form-actions{ display:flex; gap:10px; }
.meh-form-actions .meh-btn{ flex:1; justify-content:center; }

.meh-page-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:18px; border-top:1px solid var(--meh-border);
}
.meh-page-footer-right{ display:flex; gap:10px; }

@media (max-width: 980px){
  .meh-org-grid{ grid-template-columns:1fr; }
  .meh-users-layout{ grid-template-columns:1fr; }
  .meh-user-form{ border-left:none; border-top:1px solid var(--meh-border); padding-left:0; padding-top:20px; }
}


/* ==========================================================================
   MyErgoHub — App Shell Layout (header.php + sidebar.php + main)
   Matches the real markup:
     .meh-app > header.meh-header, aside.meh-sidebar, main.meh-main

   DESIGN TOKENS
   --meh-navy   : #0b1440   sidebar background
   --meh-blue   : #2f5fe0   primary accent / active states / logo "My" "Hub"
   --meh-green  : #16a34a   logo "Ergo" / positive states
   --meh-ink    : #0f172a   headings
   --meh-mute   : #64748b   secondary text
   --meh-border : #e6e9f0
   --meh-bg     : #f4f6fb   main content background
   Assumes Font Awesome is already enqueued (used in header.php/sidebar.php).
   Assumes Inter is enqueued; falls back to system sans-serif if not.
   ========================================================================== */

:root{
  --meh-navy:#0b1440;
  --meh-navy-soft:#141d4f;
  --meh-blue:#2f5fe0;
  --meh-blue-dark:#1e3fae;
  --meh-green:#16a34a;
  --meh-ink:#0f172a;
  --meh-mute:#64748b;
  --meh-border:#e6e9f0;
  --meh-bg:#f4f6fb;
  --meh-header-h:70px;
  --meh-sidebar-w:260px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--meh-ink);
  background:var(--meh-bg);
}

/* ---------------- App shell grid ---------------- */
.meh-app{
  display:grid;
  grid-template-columns: var(--meh-sidebar-w) 1fr;
  grid-template-rows: var(--meh-header-h) 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  min-height:100vh;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.meh-header{
  grid-area:header;
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 24px;
  background:#ffffff;
  border-bottom:1px solid var(--meh-border);
}

.meh-header-left{
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0;
}

.meh-menu-toggle{
  display:none;
  width:36px; height:36px;
  align-items:center; justify-content:center;
  border:1px solid var(--meh-border);
  background:#fff;
  border-radius:8px;
  color:var(--meh-ink);
  cursor:pointer;
}

.meh-logo{ display:flex; align-items:center; gap:10px; }
.meh-logo-icon{
  width:34px; height:34px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--meh-blue),var(--meh-green));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  flex-shrink:0;
}
.meh-logo-text h2{
  margin:0;
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.01em;
}
.meh-logo-text .blue{ color:var(--meh-blue); }
.meh-logo-text .green{ color:var(--meh-green); }

.meh-header-center{ flex:1; min-width:0; }
.meh-header-center h3{
  margin:0;
  font-size:15px;
  font-weight:600;
  color:var(--meh-ink);
}
.meh-header-center p{
  margin:2px 0 0;
  font-size:12.5px;
  color:var(--meh-mute);
}

.meh-header-right{
  display:flex;
  align-items:center;
  gap:22px;
  flex-shrink:0;
}

.meh-progress{ display:flex; flex-direction:column; gap:5px; width:150px; }
.meh-progress-text{ display:flex; justify-content:space-between; align-items:baseline; }
.meh-progress-text small{ font-size:11.5px; color:var(--meh-mute); }
.meh-progress-text strong{ font-size:12.5px; color:var(--meh-ink); }
.meh-progress-bar{
  height:6px;
  border-radius:4px;
  background:#eef1f8;
  overflow:hidden;
}
.meh-progress-fill{
  height:100%;
  width:56%;
  background:linear-gradient(90deg,var(--meh-blue),var(--meh-green));
  border-radius:4px;
}

.meh-notification{
  position:relative;
  width:38px; height:38px;
  border:1px solid var(--meh-border);
  background:#fff;
  border-radius:9px;
  color:var(--meh-ink);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
}
.meh-notification .badge{
  position:absolute;
  top:-5px; right:-5px;
  min-width:16px; height:16px;
  padding:0 3px;
  border-radius:50%;
  background:#e0342f;
  color:#fff;
  font-size:10px;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.meh-user{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  padding:4px 6px;
  border-radius:9px;
}
.meh-user:hover{ background:#f4f6fb; }
.meh-user img{ border-radius:50%; width:38px; height:38px; }
.meh-user-info{ line-height:1.3; }
.meh-user-info strong{ display:block; font-size:13px; color:var(--meh-ink); }
.meh-user-info small{ font-size:11.5px; color:var(--meh-mute); }
.meh-user > .fa-chevron-down{ font-size:11px; color:var(--meh-mute); }

/* ==========================================================================
   MAIN
   ========================================================================== */
.meh-main{
  grid-area:main;
  min-width:0;
  background:var(--meh-bg);
}
.meh-page-content{
  padding:28px 32px 60px;
}

/* ==========================================================================
   RESPONSIVE — sidebar becomes an off-canvas overlay under 900px
   ========================================================================== */
@media (max-width: 900px){
  .meh-app{
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }
  .meh-menu-toggle{ display:flex; }
  .meh-header-center{ display:none; }

  .meh-sidebar{
    position:fixed;
    top:var(--meh-header-h);
    left:0;
    width:var(--meh-sidebar-w);
    height:calc(100vh - var(--meh-header-h));
    transform:translateX(-100%);
    transition:transform .2s ease;
    z-index:50;
    box-shadow:0 0 0 9999px rgba(0,0,0,0);
  }
  .meh-app.meh-sidebar-open .meh-sidebar{
    transform:translateX(0);
    box-shadow:0 0 0 9999px rgba(9,13,35,0.45);
  }
}






/* ==========================================================================
   MyErgoHub — Gravity Forms "Orbital" theme override
   The Orbital theme drives its look almost entirely through CSS custom
   properties (--gf-color-primary, --gf-radius, etc.), scoped to
   .gform-theme on the wrapper. Overriding those here is far more robust
   than fighting individual selectors, since it survives GF plugin updates.
   Load this AFTER Gravity Forms' own theme CSS.
   ========================================================================== */

.gform-theme--orbital{
  /* ---- Brand tokens ---- */
  --gf-color-primary: #2f5fe0;
  --gf-color-primary-contrast: #ffffff;
  --gf-color-primary-darker: #1e3fae;
  --gf-color-primary-lighter: #6f8bef;

  --gf-color-in-ctrl-primary: #2f5fe0;
  --gf-color-in-ctrl-primary-contrast: #ffffff;
  --gf-color-in-ctrl-primary-darker: #1e3fae;

  --gf-color-in-ctrl: #ffffff;
  --gf-color-in-ctrl-contrast: #0f172a;

  --gf-ctrl-border-color: #e6e9f0;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-label-color-secondary: #0f172a;

  --gf-color-out-ctrl-dark: #64748b;
  --gf-color-out-ctrl-dark-lighter: #64748b;

  /* ---- Shape / type ---- */
  --gf-radius: 8px;
  --gf-font-size-secondary: 13px;
  --gf-font-size-tertiary: 12px;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Field grid spacing — Orbital lays fields out on a grid via width
   classes (gfield--width-half / gfield--width-full); this just tunes
   the gaps to match the rest of the page's card spacing. */
.gform-theme--orbital .gform_fields{
  column-gap: 32px;
  row-gap: 18px;
}

.gform-theme--orbital .gfield{
  margin: 0;
}

/* Labels */
.gform-theme--orbital .gfield_label{
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--meh-ink, #0f172a) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Required marker — Gravity Forms' own Orbital theme already renders
   this correctly out of the box; no override needed here. (An earlier
   version of this file added a second asterisk on top of GF's native
   one — that's what was causing the double-star artifact.) */

/* Text / select inputs — !important is used here because Gravity Forms'
   core CSS (not just the Orbital theme variables) applies its own
   border/shadow/height rules directly on input.large / select.large,
   which the CSS variables above don't fully override on their own. */
.gform-theme--orbital input.large[type="text"],
.gform-theme--orbital input.large[type="email"],
.gform-theme--orbital select.large,
.gform-theme--orbital input[type="text"],
.gform-theme--orbital input[type="email"],
.gform-theme--orbital select{
  box-sizing: border-box !important;
  width: 100% !important;
  border: 1px solid #aeb1b8 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--meh-ink, #0f172a) !important;
  box-shadow: none !important;
  height: auto !important;
  font-family: inherit !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.gform-theme--orbital input.large[type="text"]:focus,
.gform-theme--orbital input.large[type="email"]:focus,
.gform-theme--orbital select.large:focus,
.gform-theme--orbital input[type="text"]:focus,
.gform-theme--orbital input[type="email"]:focus,
.gform-theme--orbital select:focus{
  outline: none !important;
  border-color: #2f5fe0 !important;
  box-shadow: 0 0 0 3px rgba(47, 95, 224, 0.12) !important;
}

/* Description / rules / validation text */
.gform-theme--orbital .gfield_description,
.gform-theme--orbital .instruction {
  font-size: 12px;
  color: var(--meh-mute, #64748b);
  margin-top: 6px;
}

.gform-theme--orbital .gfield_validation_message{
  font-size: 12px;
  color: #d0342c;
  margin-top: 6px;
}

/* Footer / submit button */
.gform-theme--orbital .gform_footer{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--meh-border, #e6e9f0);
}

.gform-theme--orbital .gform_button{
  background: #2f5fe0;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.gform-theme--orbital .gform_button:hover{
  background: #1e3fae;
}

/* If this form is embedded inside the S01 Organization Management page
   (which already has its own "Save Organization" button in the page
   footer), uncomment the rule below to avoid a duplicate submit button:

.gform-theme--orbital .gform_footer{ display: none; }

*/

.gform-theme--orbital .gfield_label .gfield_required {
    display: inline-block;
    margin-left: 2px;
    color: #ef4444;
}




/* ==========================================================================
   MyErgoHub — View Organizations page (v2, restyled)
   Self-contained: includes page-header/card/table/badge/pagination/button
   styling for this page, so it no longer depends on meh-org-page.css.
   Uses the same design tokens as the rest of the app.
   ========================================================================== */

.meh-page-content{
  --meh-blue:#2f5fe0;
  --meh-blue-dark:#1e3fae;
  --meh-ink:#0f172a;
  --meh-mute:#64748b;
  --meh-border:#e6e9f0;
  --meh-bg:#f6f8fc;
  --meh-green-bg:#e4f8ec;
  --meh-green-text:#178a4c;
  --meh-yellow-bg:#fff6df;
  --meh-yellow-text:#b7791f;
  --meh-red-bg:#fdeaea;
  --meh-red-text:#d0342c;
  --meh-gray-bg:#eef1f5;
  --meh-gray-text:#5b6472;
}

/* ---------------- Page header ---------------- */
.meh-breadcrumb{ font-size:13px; margin-bottom:14px; }
.meh-breadcrumb a{ color:var(--meh-blue); text-decoration:none; font-weight:500; }
.meh-breadcrumb span{ color:var(--meh-mute); margin:0 6px; }
.meh-breadcrumb .meh-current{ color:var(--meh-mute); }

.meh-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.meh-page-header h1{ font-size:25px; margin:0 0 6px; color:var(--meh-ink); font-weight:700; letter-spacing:-0.01em; }
.meh-page-header p{ margin:0; color:var(--meh-mute); font-size:14px; }

.meh-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  padding:10px 18px;
  border-radius:10px;
  border:1px solid var(--meh-border);
  background:#fff;
  color:var(--meh-ink);
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.meh-btn:hover{ transform:translateY(-1px); }
.meh-btn-primary{
  background:linear-gradient(135deg,#2f5fe0,#4d76f0);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 20px rgba(47,95,224,0.28);
}
.meh-btn-primary:hover{ box-shadow:0 10px 24px rgba(47,95,224,0.36); }

/* ---------------- Stat chips ---------------- */
.meh-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:22px;
}
.meh-stat-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--meh-border);
  border-radius:14px;
  padding:18px 20px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.meh-stat-card:hover{
  box-shadow:0 10px 24px rgba(15,23,42,0.06);
  transform:translateY(-2px);
}
.meh-stat-card strong{
  display:block;
  font-size:22px;
  font-weight:700;
  color:var(--meh-ink);
  line-height:1.1;
}
.meh-stat-card span{
  font-size:12.5px;
  color:var(--meh-mute);
  font-weight:500;
}
.meh-stat-icon{
  width:44px; height:44px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.meh-stat-icon--total{ background:#d3fbff; color: #008792; }
.meh-stat-icon--active{ background:var(--meh-green-bg); color:var(--meh-green-text); }
.meh-stat-icon--invited{ background:var(--meh-yellow-bg); color:var(--meh-yellow-text); }
.meh-stat-icon--inactive{ background:var(--meh-gray-bg); color:var(--meh-gray-text); }

@media (max-width: 900px){
  .meh-stats{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 520px){
  .meh-stats{ grid-template-columns:1fr; }
}

/* ---------------- Card ---------------- */
.meh-card{
  background:#fff;
  border:1px solid var(--meh-border);
  border-radius:16px;
  padding:24px 26px 18px;
  box-shadow:0 1px 2px rgba(15,23,42,0.04);
}

/* ---------------- Toolbar ---------------- */
.meh-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.meh-search{
  position:relative;
  flex:1;
  min-width:220px;
  max-width:340px;
}
.meh-search i{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  color:var(--meh-mute);
}
.meh-search input{
  width:100%;
  padding:10px 14px 10px 36px;
  font-size:13.5px;
  border:1px solid var(--meh-border);
  border-radius:10px;
  color:var(--meh-ink);
  background:var(--meh-bg);
  font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.meh-search input:focus{
  outline:none;
  border-color:var(--meh-blue);
  background:#fff;
  box-shadow:0 0 0 3px rgba(47,95,224,0.12);
}

.meh-filter-select{
  padding:10px 34px 10px 14px;
  font-size:13.5px;
  border:1px solid var(--meh-border);
  border-radius:10px;
  color:var(--meh-ink);
  background:var(--meh-bg);
  font-family:inherit;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.meh-filter-select:focus{
  outline:none;
  border-color:var(--meh-blue);
  background:#fff;
  box-shadow:0 0 0 3px rgba(47,95,224,0.12);
}

/* ---------------- Table ---------------- */
.meh-table-scroll{
  overflow-x:auto;
  margin:0 -2px;
}

.meh-table{
  width:100%;
  min-width:640px;
  border-collapse:separate;
  border-spacing:0;
  font-size:13.5px;
}
.meh-table thead th{
  text-align:left;
  color:var(--meh-mute);
  font-weight:600;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:0 14px 12px;
  border-bottom:1px solid var(--meh-border);
  white-space:nowrap;
}
.meh-th-actions{ text-align:right; }

.meh-table tbody tr{
  transition:background .12s ease;
}
.meh-table tbody tr:hover{
  background:var(--meh-bg);
}
.meh-table tbody td{
  padding:16px 14px;
  border-bottom:1px solid #f0f2f6;
  vertical-align:middle;
  color:var(--meh-ink);
}
.meh-table tbody tr:last-child td{ border-bottom:none; }

/* Organization cell */
.meh-org-cell{ display:flex; align-items:center; gap:12px; }
.meh-org-logo{
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid var(--meh-border);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.meh-org-logo--fallback{
  background:#d3fbff;
  color:#008792;
  font-size:15px;
}
.meh-org-name-block{ display:flex; flex-direction:column; line-height:1.35; }
.meh-org-name-block strong{ font-size:14px; font-weight:600; color:var(--meh-ink); }
.meh-org-name-block span{ font-size:12px; color:var(--meh-mute); }

/* Badges — dot + label */
.meh-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  padding:5px 11px 5px 9px;
  border-radius:20px;
}
.meh-badge i{ font-size:6px; }
.meh-badge-active{ background:var(--meh-green-bg); color:var(--meh-green-text); }
.meh-badge-invited{ background:var(--meh-yellow-bg); color:var(--meh-yellow-text); }
.meh-badge-inactive{ background:var(--meh-red-bg); color:var(--meh-red-text); }
.meh-badge-archived{ background:var(--meh-gray-bg); color:var(--meh-gray-text); }

/* Action icon-buttons */
.meh-actions{ display:flex; gap:8px; }
.meh-icon-btn{
  width:32px; height:32px;
  border-radius:9px;
  border:1px solid var(--meh-border);
  background:#fff;
  color:var(--meh-mute);
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.meh-icon-btn:hover{ transform:translateY(-1px); }
.meh-icon-btn--view:hover{ background:#eef4ff; border-color:#c7d7fb; color:var(--meh-blue); }
.meh-icon-btn--edit:hover{ background:var(--meh-yellow-bg); border-color:#fbe3ad; color:var(--meh-yellow-text); }
.meh-icon-btn--delete:hover{ background:var(--meh-red-bg); border-color:#f6c8c6; color:var(--meh-red-text); }

/* ---------------- Footer / pagination ---------------- */
.meh-table-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--meh-border);
  font-size:13px;
  color:var(--meh-mute);
  flex-wrap:wrap;
  gap:10px;
}
.meh-pagination{ display:flex; align-items:center; gap:6px; }
.meh-page-numbers{ display:flex; align-items:center; gap:6px; }
.meh-pagination button{
  width:28px; height:28px;
  border:1px solid var(--meh-border);
  background:#fff;
  border-radius:8px;
  color:var(--meh-mute);
  cursor:pointer;
  font-size:11px;
  transition:background .15s ease, color .15s ease;
}
.meh-pagination button:hover:not(:disabled){ background:var(--meh-bg); color:var(--meh-ink); }
.meh-pagination button:disabled{ opacity:.4; cursor:not-allowed; }
.meh-page-num{
  width:28px; height:28px;
  background:#fff;
  color:var(--meh-mute);
  border:1px solid var(--meh-border);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:600;
  font-size:12.5px;
  cursor:pointer;
}
.meh-page-num:hover{ background:var(--meh-bg); color:var(--meh-ink); }
.meh-page-num.is-active{
  background:#008792;
  color:#fff;
  border-color:var(--meh-blue);
}

/* ==========================================================================
   RESPONSIVE — the table becomes stacked cards below 700px, using the
   data-label attributes on each <td> to reintroduce column context.
   ========================================================================== */
@media (max-width: 700px){

  .meh-card{ padding:18px 16px 14px; }

  .meh-table-scroll{ overflow-x:visible; }

  .meh-table{ min-width:0; }
  .meh-table thead{ display:none; }

  .meh-table tbody tr{
    display:block;
    border:1px solid var(--meh-border);
    border-radius:12px;
    margin-bottom:12px;
    padding:14px;
  }
  .meh-table tbody tr:hover{ background:#fff; }

  .meh-table tbody td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border-bottom:none;
    text-align:right;
  }

  .meh-table tbody td::before{
    content: attr(data-label);
    font-size:11.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--meh-mute);
    flex-shrink:0;
  }

  /* Organization cell spans full width above its own row, not inline */
  .meh-table tbody td[data-label="Organization"]{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    padding-bottom:12px;
    border-bottom:1px solid #f0f2f6;
    margin-bottom:6px;
  }
  .meh-table tbody td[data-label="Organization"]::before{ display:none; }

  .meh-table tbody td[data-label="Actions"]{
    justify-content:flex-end;
    padding-top:10px;
  }
  .meh-table tbody td[data-label="Actions"]::before{ display:none; }

  .meh-toolbar{ flex-direction:column; align-items:stretch; }
  .meh-search{ max-width:none; }

  .meh-table-footer{ justify-content:center; text-align:center; }
}


/* ==========================================================================
popup CSS
========================================================================== */

/* Success Popup - Bottom Right Toast Notification */
.meh-success-popup {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #008792 0%, #00a3b0 100%);
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 12px 48px rgba(0, 135, 146, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
  min-width: 280px;
  max-width: 340px;
  animation: mehPopupSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

/* Animated background shimmer effect */
.meh-success-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%);
  animation: mehPopupShimmer 2s infinite;
}

@keyframes mehPopupSlideIn {
  0% {
    opacity: 0;
    transform: translateX(120px) scale(0.9);
  }
  60% {
    transform: translateX(-10px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes mehPopupShimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

.meh-success-popup .meh-popup-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: #ffffff;
  position: relative;
  z-index: 1;
  animation: mehPopupIconPulse 2s ease-in-out infinite;
}

@keyframes mehPopupIconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.meh-success-popup .meh-popup-message {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.01em;
}

/* Responsive - adjust position on smaller screens */
@media (max-width: 600px) {
  .meh-success-popup {
    bottom: 16px;
    right: 16px;
    left: 16px;
    min-width: auto;
    max-width: none;
  }
}

/* ==========================================================================
   Error Popup - Bottom Right Toast Notification
   ========================================================================== */

.meh-error-popup {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  max-width: 340px;
  animation: mehPopupSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

/* Animated background shimmer effect */
.meh-error-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    transparent 100%);
  animation: mehPopupShimmer 2s infinite;
}

.meh-error-popup .meh-popup-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: #ffffff;
  position: relative;
  z-index: 1;
  animation: mehPopupIconPulse 2s ease-in-out infinite;
}

.meh-error-popup .meh-popup-message {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.01em;
}

/* Responsive - adjust position on smaller screens */
@media (max-width: 600px) {
  .meh-error-popup {
    bottom: 16px;
    right: 16px;
    left: 16px;
    min-width: auto;
    max-width: none;
  }
}

.delete-popup{
  border-radius:16px;
  padding:30px;
  width:420px;
}

.delete-popup .swal2-title{
  font-size:28px;
  font-weight:700;
  color:#222;
}

.btn-delete{
  background:#dc3545;
  color:#fff;
  border:none;
  padding:10px 26px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  margin-left:10px;
  transition:.2s;
}

.btn-delete:hover{
  background:#bb2d3b;
  transform:translateY(-1px);
}

.btn-cancel{
  background:#f8f9fa;
  color:#444;
  border:1px solid #dee2e6;
  padding:10px 26px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  transition:.2s;
}

.btn-cancel:hover{
  background:#e9ecef;
}

.notify-popup{
  width:500px;
  border-radius:16px;
  padding:28px;
}

.notify-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-size:28px;
}

.notify-success{
  background:#ECFDF3;
  color:#16A34A;
}

.notify-error{
  background:#FEF2F2;
  color:#DC2626;
}

.notify-warning{
  background:#FFF7ED;
  color:#F59E0B;
}

.notify-info{
  background:#EFF6FF;
  color:#2563EB;
}

.notify-title{
  font-size:20px;
  font-weight:600;
  text-align:center;
  color:#222;
}

.meh-userform-heading{
  font-size:24px;
  font-weight:600;
  color:#222;
}

.meh-user-error{
  font-size: 15px;
  background: #ffd9d9;
  border: 1px solid #f62c2c;
  border-radius: 8px;
  padding: 5px;
  border-left: 3px solid #b00000;
  margin-bottom: 10px;
  color: #4c2c2c;
}

.meh-user-success{
  font-size: 15px;
  background: #d9ffd9;
  border: 1px solid #2cf62c;
  border-radius: 8px;
  padding: 5px;
  border-left: 3px solid #00b000;
  margin-bottom: 10px;
  color: #4c2c2c;
}


/* ==========================================================================
   User Management — Inline Notice
   Displayed at the top of the Add/Edit User form.
   ========================================================================== */

.meh-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 16px;
  animation: mehNoticeIn 0.2s ease;
}

@keyframes mehNoticeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Success variant */
.meh-notice--success {
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  color: #065f46;
}

.meh-notice--success .meh-notice__icon {
  color: #059669;
}

/* Error variant */
.meh-notice--error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #7f1d1d;
}

.meh-notice--error .meh-notice__icon {
  color: #dc2626;
}

.meh-notice__icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.meh-notice__text {
  flex: 1;
}

.meh-notice__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.55;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
  margin-top: 1px;
  transition: opacity 0.15s ease;
}

.meh-notice__close:hover {
  opacity: 1;
}

/* ==========================================================================
   User Management — Form header (title + cancel button)
   ========================================================================== */

.meh-user-form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.meh-form-reset-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--meh-border);
  background: #fff;
  color: var(--meh-mute);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.meh-form-reset-btn:hover {
  background: var(--meh-red-bg);
  border-color: #fca5a5;
  color: var(--meh-red-text);
}

/* ==========================================================================
   User Management — Submit button loading & edit states
   ========================================================================== */

#mehUserSubmitBtn {
  width: 100%;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

#mehUserSubmitBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

#mehUserSubmitBtn .fa-spinner {
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   User Management — Table row states
   ========================================================================== */

/* Row currently being edited — subtle left-border highlight */
tr.meh-user-row.is-editing {
  background: #f0f5ff !important;
}

tr.meh-user-row.is-editing td:first-child {
  border-left: 3px solid var(--meh-blue);
  padding-left: 7px;
}

/* Empty-state cell */
.meh-empty-state {
  text-align: center;
  color: var(--meh-mute);
  font-size: 13.5px;
  padding: 32px 10px !important;
}

/* ==========================================================================
   User Management — Action icon buttons (scoped to users table)
   These mirror the org-table icon buttons but ensure they work
   in the narrower users layout panel too.
   ========================================================================== */

.meh-users-table-wrap .meh-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--meh-border);
  background: #fff;
  color: var(--meh-mute);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.12s ease;
}

.meh-users-table-wrap .meh-icon-btn:hover {
  transform: translateY(-1px);
}

.meh-users-table-wrap .meh-icon-btn--edit:hover {
  background: var(--meh-yellow-bg);
  border-color: #fbe3ad;
  color: var(--meh-yellow-text);
}

.meh-users-table-wrap .meh-icon-btn--invite:hover {
  background: var(--meh-purple-bg);
  border-color: #2b24ea;
  color: #6d4fe0;
}

.meh-users-table-wrap .meh-icon-btn--delete:hover {
  background: var(--meh-red-bg);
  border-color: #fca5a5;
  color: var(--meh-red-text);
}

.meh-users-table-wrap .meh-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   User Management — Form panel responsive
   ========================================================================== */

@media (max-width: 980px) {
  .meh-users-layout {
    grid-template-columns: 1fr;
  }

  .meh-user-form {
    border-left: none;
    border-top: 1px solid var(--meh-border);
    padding-left: 0;
    padding-top: 22px;
    margin-top: 4px;
  }
}

/* ==========================================================================
   Card header — title + action button side by side
   ========================================================================== */

.meh-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.meh-card-header h2 {
  margin: 0;
}

/* ==========================================================================
   User form header — title + Add User button alignment
   ========================================================================== */

.meh-user-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.meh-user-form-head .meh-userform-heading {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--meh-ink);
}

.meh-user-form-head .meh-btn-sm {
  flex-shrink: 0;
}


/* ==========================================================================
   Add / Edit Organization page — layout refinements
   Matches the S01 Organization Management design.
   ========================================================================== */

/* ── Page header ─────────────────────────────────────────────────────────── */

.meh-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.meh-page-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--meh-ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.meh-page-header p {
  margin: 0;
  font-size: 14px;
  color: var(--meh-mute);
}

/* Back to Organizations button */
.meh-btn-back {
  background: #008792;
  color: #ffffff;
  border: none;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(47, 95, 224, 0.28);
  transition: box-shadow 0.15s ease, transform 0.12s ease;
  letter-spacing: 0.01em;
}

.meh-btn-back:hover {
  box-shadow: 0 10px 26px rgba(47, 95, 224, 0.38);
  transform: translateY(-1px);
  color: #ffffff;
}

.meh-btn-back:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(47, 95, 224, 0.22);
}

/* ── Card section title ───────────────────────────────────────────────────── */

.meh-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--meh-ink);
  margin: 0 0 18px;
}

.meh-section-desc {
  font-size: 13.5px;
  color: var(--meh-mute);
  margin: -10px 0 20px;
}

/* ── Organization Information card ───────────────────────────────────────── */

.meh-org-grid {
  /* GF handles its own column layout via gfield--width-* classes */
  margin-top: 0;
}

/* ── Organization Users card ─────────────────────────────────────────────── */

.meh-users-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: flex-start;
}

/* Table */
.meh-users-table-wrap .meh-table thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--meh-mute);
  text-transform: none;
  letter-spacing: 0;
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--meh-border);
}

.meh-users-table-wrap .meh-table tbody td {
  padding: 13px 12px;
  font-size: 13.5px;
  border-bottom: 1px solid #f3f4f8;
}

.meh-users-table-wrap .meh-table tbody tr:last-child td {
  border-bottom: none;
}

.meh-muted {
  color: var(--meh-mute);
}

/* Table footer with pagination */
.meh-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--meh-border);
  font-size: 13px;
  color: var(--meh-mute);
  gap: 10px;
  flex-wrap: wrap;
}

/* ── User form panel ─────────────────────────────────────────────────────── */

.meh-user-form {
  background: #fff;
  border: 1.5px solid var(--meh-border);
  border-radius: 12px;
  padding: 20px 20px 22px;
}

.meh-user-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--meh-border);
}

.meh-userform-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--meh-ink);
  margin: 0;
}

/* Form fields inside the panel */
.meh-user-form .meh-field {
  margin-bottom: 14px;
}

.meh-user-form .meh-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--meh-ink);
  margin-bottom: 5px;
  display: block;
}

.meh-user-form .meh-field input,
.meh-user-form .meh-field select {
  width: 100%;
  padding: 9px 11px;
  font-size: 13.5px;
  border: 1px solid #aeb1b8;
  border-radius: 8px;
  color: var(--meh-ink);
  background: #fff;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.meh-user-form .meh-field input:focus,
.meh-user-form .meh-field select:focus {
  outline: none;
  border-color: var(--meh-blue);
  box-shadow: 0 0 0 3px rgba(47, 95, 224, 0.1);
}

/* Checkbox row */
.meh-checkbox-inline {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--meh-ink);
  margin-bottom: 18px;
  cursor: pointer;
}

.meh-checkbox-inline input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--meh-blue);
  flex-shrink: 0;
  margin-top: 2px;
}

.meh-hint {
  font-size: 12px;
  color: var(--meh-mute);
  margin-top: 3px;
  font-weight: 400;
}

/* User form action buttons — Cancel + Save side by side */
.meh-user-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.meh-user-form-actions .meh-btn {
  flex: 1;
  justify-content: center;
}

/* ── Button variants ──────────────────────────────────────────────────────── */

.meh-btn-outline {
  background: #fff;
  color: var(--meh-ink);
  border: 1.5px solid var(--meh-border);
}

.meh-btn-outline:hover {
  background: #f4f6fb;
  border-color: #c8cfe0;
}

.meh-btn-danger-outline {
  background: #fff;
  color: var(--meh-red-text, #d0342c);
  border: 1.5px solid #fca5a5;
  font-size: 13.5px;
  font-weight: 600;
}

.meh-btn-danger-outline:hover {
  background: var(--meh-red-bg, #fdeaea);
  border-color: #f87171;
}

/* ── Page footer bar ──────────────────────────────────────────────────────── */

.meh-page-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 8px;
  border-top: 1px solid var(--meh-border);
  margin-top: 4px;
  flex-wrap: wrap;
}

.meh-page-footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meh-page-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meh-btn-save-org {
  font-size: 14px;
  padding: 10px 22px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .meh-users-layout {
    grid-template-columns: 1fr;
  }

  .meh-user-form {
    border: none;
    border-top: 1px solid var(--meh-border);
    border-radius: 0;
    padding: 20px 0 0;
  }
}

@media (max-width: 640px) {
  .meh-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .meh-btn-back {
    align-self: flex-start;
  }

  .meh-page-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .meh-page-footer-left,
  .meh-page-footer-right {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Add / Edit Organization — Gravity Forms 3-column field grid
   Scoped to form ID 1 rendered inside .meh-org-grid so it doesn't
   affect other GF forms on the site.
   ========================================================================== */

/* Force the GF fields list into a strict 3-column grid */
.meh-org-grid .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px 24px !important;
}

/* Every field occupies exactly one column by default */
.meh-org-grid .gfield {
  grid-column: span 1 !important;
  width: 100% !important;        /* override any inline width GF sets */
  max-width: 100% !important;
  margin: 0 !important;
}

/* Hidden fields (edit entry ID) must not take up grid space */
.meh-org-grid .gfield--type-hidden,
.meh-org-grid .gfield_visibility_hidden {
  display: none !important;
}

/* File upload (logo) — single column, same as other fields */
.meh-org-grid #field_1_4 {
  grid-column: span 1 !important;
}

/* GF Orbital uses inline width on the <li>; override so grid works */
.meh-org-grid .gform_fields > li {
  max-width: 100% !important;
}

/* GF footer / submit button — always full-width below the grid */
.meh-org-grid .gform_footer,
.meh-org-grid .gform_page_footer {
  grid-column: 1 / -1 !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* 2 columns on medium screens */
@media (max-width: 900px) {
  .meh-org-grid .gform_fields {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Single column on small screens */
@media (max-width: 540px) {
  .meh-org-grid .gform_fields {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   Hide "* indicates required fields" text from Gravity Forms
   ========================================================================== */

.gform-theme--orbital .gform_required_legend {
  display: none !important;
}

/* ==========================================================================
   Gravity Forms — Organization form submit button
   ========================================================================== */

.meh-org-grid .gform_button,
.meh-org-grid input[type="submit"].gform_button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #008792 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 11px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(47, 95, 224, 0.28) !important;
  transition: box-shadow 0.15s ease, transform 0.12s ease !important;
  letter-spacing: 0.01em !important;
}

.meh-org-grid .gform_button:hover,
.meh-org-grid input[type="submit"].gform_button:hover {
  box-shadow: 0 10px 26px rgba(47, 95, 224, 0.38) !important;
  transform: translateY(-1px) !important;
}

.meh-org-grid .gform_button:active,
.meh-org-grid input[type="submit"].gform_button:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(47, 95, 224, 0.22) !important;
}

.meh-org-grid .gform_button:disabled,
.meh-org-grid input[type="submit"].gform_button:disabled {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ==========================================================================
   Organization Users — table footer & pagination
   ========================================================================== */

/* Scoped footer inside the users table wrap */
.meh-users-table-wrap .meh-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--meh-border);
  font-size: 13px;
  color: var(--meh-mute);
  flex-wrap: wrap;
}

/* Pagination wrapper */
.meh-users-table-wrap .meh-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Page number buttons */
.meh-users-table-wrap .meh-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meh-users-table-wrap .meh-page-num {
  width: 28px;
  height: 28px;
  border: 1px solid var(--meh-border);
  background: #fff;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--meh-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.meh-users-table-wrap .meh-page-num:hover {
  background: #f0f4ff;
  color: var(--meh-blue);
  border-color: #c7d7fb;
}

.meh-users-table-wrap .meh-page-num.is-active {
  background: #008792;
  color: #fff;
  border-color: var(--meh-blue);
}

/* Prev / Next arrow buttons */
.meh-users-table-wrap .meh-page-prev,
.meh-users-table-wrap .meh-page-next {
  width: 28px;
  height: 28px;
  border: 1px solid var(--meh-border);
  background: #fff;
  border-radius: 7px;
  color: var(--meh-mute);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.meh-users-table-wrap .meh-page-prev:hover:not(:disabled),
.meh-users-table-wrap .meh-page-next:hover:not(:disabled) {
  background: #f0f4ff;
  color: var(--meh-blue);
  border-color: #c7d7fb;
}

.meh-users-table-wrap .meh-page-prev:disabled,
.meh-users-table-wrap .meh-page-next:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ==========================================================================
   Gravity Forms — Placeholder text styling
   Makes placeholders lighter/more subtle so they don't look like real text
   ========================================================================== */

.gform-theme--orbital input::placeholder,
.gform-theme--orbital select::placeholder,
.gform-theme--orbital textarea::placeholder {
  color: var(--meh-mute, #64748b);
  opacity: 0.5;
  font-weight: 400;
}

.gform-theme--orbital input::-webkit-input-placeholder,
.gform-theme--orbital select::-webkit-input-placeholder,
.gform-theme--orbital textarea::-webkit-input-placeholder {
  color: var(--meh-mute, #64748b);
  opacity: 0.5;
  font-weight: 400;
}

.gform-theme--orbital input::-moz-placeholder,
.gform-theme--orbital select::-moz-placeholder,
.gform-theme--orbital textarea::-moz-placeholder {
  color: var(--meh-mute, #64748b);
  opacity: 0.5;
  font-weight: 400;
}

.gform-theme--orbital input:-ms-input-placeholder,
.gform-theme--orbital select:-ms-input-placeholder,
.gform-theme--orbital textarea:-ms-input-placeholder {
  color: var(--meh-mute, #64748b);
  opacity: 0.5;
  font-weight: 400;
}

/* ==========================================================================
   Gravity Forms — Dropdown arrow icon
   Ensures the dropdown chevron is visible on select fields
   ========================================================================== */

.gform-theme--orbital select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.5L2 4.5h8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  padding-right: 36px !important;
}

.gform-theme--orbital select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232f5fe0' d='M6 8.5L2 4.5h8z'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   Organization Users — Locked state (no organization saved yet)
   ========================================================================== */

.meh-org-users-locked{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 24px;
}

.meh-locked-state{
  max-width:420px;
  text-align:center;
}

.meh-locked-icon{
  width:56px;
  height:56px;
  margin:0 auto 16px;
  border-radius:14px;
  background:var(--meh-yellow-bg, #fff6df);
  color:var(--meh-yellow-text, #b7791f);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

.meh-org-users-locked .meh-section-title{
  margin:0 0 8px;
}

.meh-locked-text{
  margin:0;
  font-size:13.5px;
  line-height:1.55;
  color:var(--meh-mute);
}

.gform-theme--foundation .gform_footer{
  /* justify-content: flex-end; */
}

#gform_2 .gfield_list_icons button{
 background-color: #008792;
}
#gform_2 .gfield_list_icons button:focus{
  outline: none;
  border: none;
}

#gform_2 .ginput_container_fileupload{
  display: flex;
  gap: 10px;
  position: relative;
  flex: 1;
}
#gform_wrapper_2 .gform_validation_errors{
  display: none;

}
#gform_2 .gfield_description.gform_fileupload_rules{
  position: absolute;
  bottom: -22px;
}
#gform_2 .meh-existing-image-preview + .ginput_container_fileupload .gfield_description.gform_fileupload_rules{
  bottom: -8px;
}
#gform_2 .gfield--type-fileupload .gfield_validation_message{
  flex: 100%;
  margin-top: 22px;
}
#gform_2 .ginput_preview_list{
  flex: 0 0 50px;
  margin-top: 0px;
  border: 1px solid #aeb1b8;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gform_2 .ginput_preview img{
  width: 30px !important;
  margin-bottom: 0px !important;
}
#gform_2 .gfield_fileupload_progress.gfield_fileupload_progress_complete,
#gform_2 .gform_delete_file{
  display: none;
}

.meh-admin-note {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px solid #e1e5e8;
  border-left: 4px solid #008792;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-size: 13px;
  line-height: 1.6;
  color: #3c434a;
}

.meh-admin-note h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: #1d2327;
}

.meh-admin-note h3::before {
  content: "ⓘ";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 14px;
  color: #008792;
}

.meh-admin-note p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
}

.meh-admin-note p:last-child {
  margin-bottom: 0;
}

.meh-admin-note strong {
  font-weight: 600;
  color: #2c3338;
}

/* Organization ID */
.meh-org-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 16px;
  padding: 8px 12px;
  background: #f5f9f9;
  border: 1px solid #cfe4e5;
  border-radius: 5px;
  color: #2c3338;
}

.meh-org-id strong {
  font-size: 13px;
  font-weight: 600;
}

.meh-org-id code {
  margin: 0;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
  color: #008792;
  background: #fff;
  border: 1px solid #d8e7e8;
  border-radius: 3px;
}

/* Link / button */
.meh-admin-note .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1px solid #008792;
  border-radius: 4px;
  background: #008792;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease;
}

.meh-admin-note .button:hover {
  border-color: #006d75;
  background: #006d75;
  color: #fff;
}

.meh-admin-note .button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 135, 146, 0.2);
}

#gform_2 .gfield--type-fileupload{
  display: flex;
  column-gap: 10px;
  flex-wrap: wrap;
} 
#gform_2 .gfield--type-fileupload label{
  flex:100%;
}

#gform_2 .gfield--type-fileupload .meh-existing-image-preview{
  order: 3;
  width: 50px;
  margin-bottom: 0px !important;
  height: 50px;
}
#gform_2 .gfield--type-fileupload .meh-existing-image-preview img{
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  height: 100% !important;
}

#org-filter-form label{
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}
.cs-form-main{
  max-width: 900px;
}
.cs-form-wrap,
.cs-form-btn,
.cs-form-main{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: end;
}
.cs-form-wrap{
  flex:1;
}

.cs-form-wrap .cs-form-group{
  flex: 1;
}

.error-page-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.error-card {
  background-color: #fbeaea;
  border: 1px solid #dc3232;
  border-radius: 3px;
  padding: 15px 20px;
  max-width: 420px;
  width: 100%;
  text-align: left;
}

.error-card p {
  color: #444;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.error-card strong {
  color: #dc3232;
}