/* ==========================================================================
   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 4px; 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 var(--meh-border);
  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-logo-row{ display:flex; gap:12px; }
.meh-logo-preview{
  width:82px; height:82px;
  border:1px solid var(--meh-border);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  flex-shrink:0;
}
.meh-upload-box{
  flex:1;
  border:1.5px dashed #c7d1e0;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:10px;
  color:var(--meh-blue);
  font-size:12px;
  font-weight:500;
  text-align:center;
  cursor:pointer;
}
.meh-upload-box i{ font-size:18px; margin-bottom:2px; }
.meh-upload-box .meh-sub{ color:var(--meh-mute); font-weight:400; }

.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 var(--meh-border, #e6e9f0) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--meh-ink, #0f172a) !important;
  background: #ffffff !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 .gform_fileupload_rules,
.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;
}

/* File upload field (Organization Logo) — this field is set to
   single-file mode, so GF renders a plain native file input rather
   than a drag-and-drop dropzone. Styling the native control is the
   most that's possible without switching the field to "Multiple
   Files" in the GF form editor. */
.gform-theme--orbital .ginput_container_fileupload{
  border: 1px solid var(--meh-border, #e6e9f0);
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
}

.gform-theme--orbital input[type="file"]{
  font-size: 13px;
  color: var(--meh-mute, #64748b);
}

.gform-theme--orbital input[type="file"]::file-selector-button{
  background: #2f5fe0;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-right: 12px;
  cursor: pointer;
}
.gform-theme--orbital input[type="file"]::file-selector-button:hover{
  background: #1e3fae;
}

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