/* Gold Rush Portal Shell — top bar + left sidebar
   Palette: plum #722B87 · gold #A9976B · teal #6EBCB9 · bar #1c1410 */

.gr-portal {
  --gr-p:#722B87; --gr-pd:#4e1d5d; --gr-pl:#f4edf8;
  --gr-g:#A9976B; --gr-gm:#c9b882; --gr-gd:#7a6c48; --gr-gl:#f7f2e8;
  --gr-t:#6EBCB9; --gr-tl:#e6f6f5; --gr-td:#3a8c89;
  --gr-ink:#181818; --gr-mu:#555; --gr-sub:#888;
  --gr-warm:#f8f6f2; --gr-rule:#e8e4e0;
  --gr-top:64px; --gr-side:238px; --gr-admin:0px;
  /* usable viewport height below the fixed bar — use this, not 100vh */
  --gr-vh:calc(100vh - var(--gr-top) - var(--gr-admin));
  background:var(--gr-warm);
}

/* Full-height section helpers. In Elementor: Advanced → CSS Classes.
   Leave the section's own Min Height UNSET — a section set to 100vh always
   overflows by the height of the fixed bar.

   gr-fullheight — fills the screen below the bar. The footer sits below the
                   fold, so the page still scrolls. Right for most pages.
   gr-fit        — fills the screen below the bar MINUS the footer, so the
                   whole page is exactly one screen with no scrollbar. */
.gr-portal .gr-fullheight { min-height:var(--gr-vh) !important; }
.gr-portal .gr-fullheight > .elementor-container { min-height:inherit; }

/* gr-fit measures nothing — the body is already a flex column between the
   fixed bar and the footer, so the section just takes the leftover space.
   Works whatever the bar, admin bar, or footer end up being. */
/* Whatever wrapper the page template happens to use, it has to stretch and
   pass the stretch down. Elementor Canvas / Full Width put
   div[data-elementor-type="wp-page"] straight on body with no .site-main. */
body.gr-portal.gr-sticky-footer > main,
body.gr-portal.gr-sticky-footer > .site-main,
body.gr-portal.gr-sticky-footer > #content,
body.gr-portal.gr-sticky-footer > .elementor,
body.gr-portal.gr-sticky-footer > [data-elementor-type="wp-page"],
body.gr-portal.gr-sticky-footer > .elementor-location-single,
body.gr-portal.gr-sticky-footer > .elementor-location-archive,
body.gr-portal.gr-sticky-footer .site-main,
body.gr-portal.gr-sticky-footer .site-content,
body.gr-portal.gr-sticky-footer #content,
body.gr-portal.gr-sticky-footer .elementor-location-single,
body.gr-portal.gr-sticky-footer .site-main > .elementor,
body.gr-portal.gr-sticky-footer #content > .elementor,
body.gr-portal.gr-sticky-footer .elementor-location-single > .elementor {
  display:flex; flex-direction:column;
}
body.gr-portal.gr-sticky-footer > [data-elementor-type="wp-page"],
body.gr-portal.gr-sticky-footer > .elementor,
body.gr-portal.gr-sticky-footer > main,
body.gr-portal.gr-sticky-footer > .site-main,
body.gr-portal.gr-sticky-footer > #content { flex:1 0 auto; min-width:0; }

/* Hello wraps the Elementor doc in .site-main on the default template; that
   wrapper has to stretch AND pass the stretch to the doc inside it. */
body.gr-portal.gr-sticky-footer .site-main > .elementor,
body.gr-portal.gr-sticky-footer #content > .elementor,
body.gr-portal.gr-sticky-footer main > .elementor,
body.gr-portal.gr-sticky-footer .site-main > [data-elementor-type="wp-page"],
body.gr-portal.gr-sticky-footer #content > [data-elementor-type="wp-page"] { flex:1 0 auto; }
/* A page whose Elementor content is a SINGLE top-level container is a
   one-screen page by definition — stretch it, so no dead space can open up
   between it and the footer whether or not gr-fit was added. */
body.gr-portal.gr-sticky-footer [data-elementor-type="wp-page"] > .e-con:only-child,
body.gr-portal.gr-sticky-footer [data-elementor-type="wp-page"] > .elementor-section:only-child,
body.gr-portal.gr-sticky-footer .elementor > .e-con:only-child,
body.gr-portal.gr-sticky-footer .elementor > .elementor-section:only-child {
  flex:1 0 auto;
}

/* gr-fit: exactly one screen — viewport minus the fixed bar minus the real
   footer height (measured, published as --gr-footer-h). Content sits at the
   top by default; centre it in Elementro if you want it middle-aligned. */
.gr-portal .gr-fit {
  min-height:calc(var(--gr-vh) - var(--gr-footer-h, 0px)) !important;
  margin-block:0 !important;
}
body.gr-portal.gr-sticky-footer .gr-fit { flex:1 0 auto; }

/* Elementor containers carry their own block margins; the last one on a
   page shows up as a gap above the footer. */
body.gr-portal.gr-sticky-footer [data-elementor-type="wp-page"] > .e-con:last-child,
body.gr-portal.gr-sticky-footer [data-elementor-type="wp-page"] > .elementor-section:last-child,
body.gr-portal.gr-sticky-footer .site-main > .elementor > .e-con:last-child,
body.gr-portal.gr-sticky-footer #content > .elementor > .e-con:last-child,
body.gr-portal.gr-sticky-footer .elementor-location-single > .elementor > .e-con:last-child {
  margin-block-end:0 !important;
}

/* Theme wrappers add their own padding, which shows as a gap between the
   last section and the footer. */
body.gr-portal .site-main,
body.gr-portal .site-content,
body.gr-portal #content { margin-bottom:0; padding-bottom:0; }
body.gr-portal.gr-sticky-footer .site-main > .elementor:last-child,
body.gr-portal.gr-sticky-footer #content > .elementor:last-child { margin-bottom:0; }

/* WordPress admin bar: push the whole shell down so nothing hides behind it */
.gr-portal.admin-bar { --gr-admin:32px; }
@media screen and (max-width:782px) {
  .gr-portal.admin-bar { --gr-admin:46px; }
}

/* Hello Elementor's own header/footer are replaced by ours. Hello renders
   its footer as #site-footer.dynamic-footer even when "empty", which leaves
   a copyright line and blank space under the page. */
.gr-portal .site-header,
.gr-portal header#site-header,
.gr-portal .site-footer,
.gr-portal footer#site-footer,
.gr-portal .dynamic-footer { display:none !important; }

/* ── top stripe ─────────────────────────────────────────── */
.gr-portal .gr-stripe {
  position:fixed; top:var(--gr-admin); left:0; right:0; height:4px; z-index:210; display:flex;
}
.gr-portal .gr-stripe i { display:block; height:100%; }
.gr-portal .gr-stripe i:nth-child(1){ flex:2;   background:var(--gr-p); }
.gr-portal .gr-stripe i:nth-child(2){ flex:1.5; background:var(--gr-g); }
.gr-portal .gr-stripe i:nth-child(3){ flex:1;   background:var(--gr-t); }

/* ── top bar ────────────────────────────────────────────── */
.gr-portal .gr-topbar {
  position:fixed; top:calc(var(--gr-admin) + 4px); left:0; right:0; height:60px; z-index:200;
  background:#1c1410; display:flex; align-items:center; gap:16px;
  padding:0 24px 0 20px;
}
.gr-portal .gr-brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.gr-portal .gr-brand-mark {
  width:34px; height:34px; border-radius:50%; background:var(--gr-g);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden;
}
/* When a real site logo is set: no gold disc, just the image */
.gr-portal .gr-brand--img .gr-brand-mark {
  width:auto; height:42px; border-radius:0; background:none;
}
.gr-portal .gr-brand-mark img { height:100%; width:auto; display:block; object-fit:contain; }
.gr-portal .gr-brand-txt b {
  display:block; font-size:14px; font-weight:700; color:#fff; letter-spacing:-.1px;
}
.gr-portal .gr-brand-txt em {
  display:block; font-style:normal; font-size:8.5px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--gr-gm); margin-top:1px;
}
.gr-portal .gr-topbar-right { margin-left:auto; display:flex; align-items:center; gap:16px; }

/* logged-out bar */
.gr-portal .gr-bar-label {
  font-size:10px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--gr-gm);
}
.gr-portal .gr-bar-btn {
  background:var(--gr-g); color:#1c1410; text-decoration:none;
  font-size:13px; font-weight:700; padding:9px 22px; border-radius:20px;
  transition:background .15s;
}
.gr-portal .gr-bar-btn:hover { background:var(--gr-gm); color:#1c1410; }

.gr-portal .gr-search {
  display:flex; align-items:center; gap:8px; width:230px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:7px 14px; color:rgba(255,255,255,.5);
}
.gr-portal .gr-search svg { width:14px; height:14px; flex-shrink:0; stroke-width:2; }
.gr-portal .gr-search input {
  flex:1; min-width:0; background:none; border:0; outline:none; padding:0;
  font:inherit; font-size:12.5px; color:#fff;
}
.gr-portal .gr-search input::placeholder { color:rgba(255,255,255,.45); }

.gr-portal .gr-iconbtn {
  position:relative; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background .15s;
}
.gr-portal .gr-iconbtn:hover { background:rgba(255,255,255,.16); }
.gr-portal .gr-iconbtn svg { width:16px; height:16px; }
.gr-portal .gr-dot {
  position:absolute; top:5px; right:6px; width:7px; height:7px; border-radius:50%;
  background:var(--gr-gm); border:1.5px solid #1c1410;
}

.gr-portal .gr-user { position:relative; padding-left:4px; }
.gr-portal .gr-user-btn {
  display:flex; align-items:center; gap:9px; background:none; border:0;
  padding:4px 6px 4px 4px; border-radius:22px; cursor:pointer;
  color:rgba(255,255,255,.55); transition:background .15s;
}
.gr-portal .gr-user-btn:hover { background:rgba(255,255,255,.08); }
.gr-portal .gr-user-btn[aria-expanded="true"] { background:rgba(255,255,255,.13); }
.gr-portal .gr-caret { transition:transform .18s; }
.gr-portal .gr-user-btn[aria-expanded="true"] .gr-caret { transform:rotate(180deg); }

.gr-portal .gr-menu {
  position:absolute; top:calc(100% + 10px); right:0; z-index:220;
  min-width:236px; background:#fff; border:1px solid var(--gr-rule);
  border-radius:14px; padding:6px; box-shadow:0 18px 44px rgba(24,16,10,.22);
  animation:gr-pop .14s ease both;
}
@keyframes gr-pop { from { opacity:0; transform:translateY(-6px); } }
.gr-portal .gr-menu-head {
  padding:11px 12px 12px; border-bottom:1px solid var(--gr-rule); margin-bottom:6px;
}
.gr-portal .gr-menu-head b { display:block; font-size:13.5px; font-weight:700; color:var(--gr-ink); }
.gr-portal .gr-menu-head em {
  display:block; font-style:normal; font-size:11.5px; color:var(--gr-sub);
  margin:2px 0 8px; word-break:break-all;
}
.gr-portal .gr-menu a {
  display:block; padding:9px 12px; border-radius:9px; text-decoration:none;
  font-size:13px; font-weight:600; color:var(--gr-mu);
}
.gr-portal .gr-menu a:hover { background:var(--gr-warm); color:var(--gr-ink); }
.gr-portal .gr-menu-out {
  margin-top:6px; border-top:1px solid var(--gr-rule); border-radius:0 0 9px 9px;
  color:var(--gr-p) !important; font-weight:700 !important;
}
.gr-portal .gr-menu-out:hover { background:var(--gr-pl) !important; }
.gr-portal .gr-avatar {
  width:36px; height:36px; border-radius:50%; background:var(--gr-p);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff;
}
.gr-portal .gr-user-txt b {
  display:block; font-size:12.5px; font-weight:600; color:#fff; line-height:1.2;
}
.gr-portal .gr-user-txt em {
  display:block; font-style:normal; font-size:10px; color:rgba(255,255,255,.5);
}

/* ── sidebar ────────────────────────────────────────────── */
.gr-portal .gr-sidebar {
  position:fixed; top:calc(var(--gr-admin) + var(--gr-top)); left:0; z-index:190;
  width:var(--gr-side); height:calc(100vh - var(--gr-top) - var(--gr-admin));
  background:#fff; border-right:1px solid var(--gr-rule);
  display:flex; flex-direction:column;
  padding:16px 14px; overflow-y:auto; overscroll-behavior:contain;
}
.gr-portal .gr-sidebar::-webkit-scrollbar { width:7px; }
.gr-portal .gr-sidebar::-webkit-scrollbar-thumb { background:#ddd; border-radius:4px; }

.gr-portal .gr-nav { display:flex; flex-direction:column; gap:2px; }
.gr-portal .gr-navhead {
  display:flex; align-items:center; gap:8px;
  font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--gr-sub); padding:22px 12px 10px;
}
.gr-portal .gr-nav > .gr-navhead:first-child { padding-top:0; }
.gr-portal .gr-tag {
  font-size:8.5px; letter-spacing:.5px; padding:2px 7px; border-radius:8px;
  text-transform:none; font-weight:700;
}
.gr-portal .gr-tag--teal { background:var(--gr-tl); color:var(--gr-td); }
.gr-portal .gr-tag--plum { background:var(--gr-pl); color:var(--gr-p); }

.gr-portal .gr-navitem {
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  font-size:13.5px; font-weight:600; color:var(--gr-mu);
  text-decoration:none; transition:background .13s, color .13s;
}
.gr-portal .gr-navitem svg { flex-shrink:0; }
.gr-portal .gr-navitem-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-portal .gr-navitem:hover { background:var(--gr-warm); color:var(--gr-ink); }
.gr-portal .gr-navitem.is-active { background:var(--gr-pl); color:var(--gr-p); font-weight:700; }

.gr-portal .gr-badge {
  margin-left:auto; font-size:11.5px; font-weight:700;
  border-radius:12px; padding:4px 11px; white-space:nowrap;
}
.gr-portal .gr-badge--gold { background:var(--gr-gl); color:var(--gr-gd); }
.gr-portal .gr-badge--plum { background:var(--gr-p); color:#fff; }

.gr-portal .gr-notify-form { display:flex; flex-direction:column; gap:14px; max-width:520px; }
.gr-portal .gr-notify-form label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--gr-mu); }
.gr-portal .gr-notify-form input[type=text], .gr-portal .gr-notify-form textarea {
  font-family:inherit; font-size:14px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--gr-rule); color:var(--gr-ink); resize:vertical;
}
.gr-portal .gr-notify-form input[type=text]:focus, .gr-portal .gr-notify-form textarea:focus {
  outline:none; border-color:var(--gr-p);
}
.gr-portal .gr-notify-tolabel { margin:0; font-size:13px; color:var(--gr-mu); }

.gr-portal .gr-notify-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.gr-portal .gr-notify {
  border:1px solid var(--gr-rule); border-radius:10px; padding:14px 16px;
  background:#fff;
}
.gr-portal .gr-notify--unread { border-color:var(--gr-p); background:var(--gr-pl); }
.gr-portal .gr-notify-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.gr-portal .gr-notify-head strong { font-size:14.5px; color:var(--gr-ink); }
.gr-portal .gr-notify-meta { font-size:12px; color:var(--gr-sub); white-space:nowrap; }
.gr-portal .gr-notify-body { margin:8px 0 0; font-size:13.5px; color:var(--gr-mu); line-height:1.5; }
.gr-portal .gr-notify-markread { margin-top:8px; }

/* ── Enterprise page components (roster, and future data pages) ─── */

.gr-portal .gr-page-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; }
.gr-portal .gr-filter-active {
  background:var(--gr-pl); border:1px solid #e0cdea; border-radius:10px;
  padding:10px 16px; font-size:13.5px; color:var(--gr-pd); margin-bottom:18px;
}
.gr-portal .gr-filter-active a { color:var(--gr-p); font-weight:700; text-decoration:underline; margin-left:4px; }

.gr-portal .gr-btn {
  display:inline-block; font-size:14px; font-weight:700; padding:12px 22px;
  border-radius:24px; text-decoration:none; cursor:pointer; border:none;
}
.gr-portal .gr-btn--primary { background:var(--gr-p); color:#fff; }
.gr-portal .gr-btn--primary:hover { background:var(--gr-pd); color:#fff; }
.gr-portal .gr-btn--secondary { background:#fff; border:1.5px solid #e0cdea; color:var(--gr-p); }
.gr-portal .gr-btn--secondary:hover { background:var(--gr-pl); color:var(--gr-p); }
.gr-portal .gr-btn--danger { background:#fff; border:1.5px solid #e8b4b4; color:#a94442; }
.gr-portal .gr-btn--danger:hover { background:#fbeaea; color:#a94442; }

.gr-portal .gr-stats {
  display:flex; background:#fff; border:1px solid var(--gr-rule);
  border-radius:14px; overflow:hidden; margin-bottom:22px;
}
.gr-portal .gr-stat { flex:1; padding:18px 22px; border-right:1px solid #f1efec; }
.gr-portal .gr-stat:last-child { border-right:none; }
.gr-portal .gr-stat-num { font-size:27px; font-weight:800; letter-spacing:-.02em; color:var(--gr-ink); line-height:1; }
.gr-portal .gr-stat-label { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gr-sub); margin-top:6px; }

.gr-portal .gr-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.gr-portal .gr-filter-search {
  flex:1; min-width:220px; display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid #ddd8d2; border-radius:22px; padding:11px 18px;
}
.gr-portal .gr-filter-search input {
  flex:1; border:none; outline:none; font-size:14px; color:var(--gr-ink); font-family:inherit; background:transparent;
}
.gr-portal .gr-filter-select {
  background:#fff; border:1px solid #ddd8d2; border-radius:22px; padding:11px 18px;
  font-size:13.5px; font-weight:600; color:var(--gr-mu); font-family:inherit;
}
.gr-portal .gr-filter-clear { font-size:13px; color:var(--gr-sub); text-decoration:underline; }

.gr-portal .gr-datatable { background:#fff; border:1px solid var(--gr-rule); border-radius:16px; overflow:hidden; }
.gr-portal .gr-dt-row {
  display:grid; grid-template-columns:2.2fr 1.6fr 1.4fr; gap:18px;
  padding:15px 24px; border-bottom:1px solid #f1efec; align-items:center;
}
.gr-portal .gr-dt-row:last-of-type { border-bottom:none; }
.gr-portal .gr-dt-head {
  background:#faf9f7; border-bottom:1px solid var(--gr-rule); padding:13px 24px;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gr-sub);
}
.gr-portal .gr-dt-who { display:flex; align-items:center; gap:12px; min-width:0; }
.gr-portal .gr-dt-avatar {
  width:36px; height:36px; flex:none; border-radius:50%; background:var(--gr-pl); color:var(--gr-p);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
}
.gr-portal .gr-dt-avatar--photo { object-fit:cover; display:block; }
.gr-portal .gr-dt-who-text { min-width:0; }
.gr-portal .gr-dt-name { font-size:14.5px; font-weight:600; color:var(--gr-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-portal .gr-dt-email { font-size:12.5px; color:var(--gr-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-portal .gr-dt-teams { font-size:13.5px; color:var(--gr-mu); }
.gr-portal .gr-dt-teams a { color:var(--gr-p); font-weight:600; text-decoration:none; }
.gr-portal .gr-dt-teams a:hover { text-decoration:underline; }
.gr-portal .gr-dt-badge {
  display:inline-block; font-size:11.5px; font-weight:700; padding:4px 11px;
  border-radius:12px; background:var(--gr-tl); color:var(--gr-td); white-space:nowrap; width:fit-content;
}
.gr-portal .gr-dt-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 24px; flex-wrap:wrap; }
.gr-portal .gr-dt-showing { font-size:13px; color:var(--gr-sub); }
.gr-portal .gr-pagination { display:flex; gap:7px; }
.gr-portal .gr-page-num {
  min-width:34px; text-align:center; padding:7px 0; border-radius:9px;
  font-size:13px; font-weight:600; color:var(--gr-mu); text-decoration:none;
}
.gr-portal .gr-page-num.is-active { background:var(--gr-p); color:#fff; font-weight:700; }

/* Compact 2-column variant of the datatable row, for lists like team
   rosters that only need "who" + one action, reusing the exact same
   avatar/name/typography as the full data table. */
.gr-portal .gr-dt-row--person { grid-template-columns:1fr auto; }
.gr-portal .gr-dt-row--delivery { grid-template-columns:1.6fr 1fr 1.2fr; }

/* Roster table — wider variant for Managers (adds phone/address/actions
   columns), narrower for Team Leaders (contact details stay hidden). */
.gr-portal .gr-dt-row--roster { grid-template-columns:2fr 1.2fr 1.4fr 1.2fr; align-items:start; }
.gr-portal .gr-dt-row--roster.gr-dt-row--roster-full { grid-template-columns:1.8fr 1fr 1.6fr 1fr 1.3fr 1.1fr .6fr; }
.gr-portal .gr-dt-badge--inactive { background:#f1f0ee; color:var(--gr-sub); }
.gr-portal .gr-roster-reactivate-form { margin:0 0 6px; }
.gr-portal .gr-roster-welcome-form { margin:0 0 6px; }
.gr-portal .gr-roster-welcome-form:last-child { margin-bottom:0; }
.gr-portal .gr-btn--small { padding:6px 14px; font-size:12.5px; }
.gr-portal .gr-dt-mail { font-size:13px; color:var(--gr-p); text-decoration:none; }
.gr-portal .gr-dt-mail:hover { text-decoration:underline; }

.gr-portal .gr-team-new {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:20px;
}
.gr-portal .gr-team-new input[type=text] {
  font-family:inherit; font-size:14px; padding:11px 16px; border-radius:22px;
  border:1px solid #ddd8d2; color:var(--gr-ink); min-width:220px;
}
.gr-portal .gr-team-new select {
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--gr-mu);
  padding:11px 16px; border-radius:22px; border:1px solid #ddd8d2;
}

.gr-portal .gr-team-edit-form { margin-top:14px; }
.gr-portal .gr-field-hint { font-size:12px; color:var(--gr-sub); font-weight:500; margin-left:8px; }
.gr-portal .gr-leader-select {
  font-family:inherit; font-size:14px; padding:10px 14px; border-radius:8px;
  border:1px solid var(--gr-rule); color:var(--gr-ink); min-width:280px; margin:8px 0 18px;
}

.gr-portal .gr-transfer { display:flex; align-items:center; gap:14px; margin:8px 0 18px; flex-wrap:wrap; }
.gr-portal .gr-transfer-col { flex:1; min-width:200px; }
.gr-portal .gr-transfer-col label { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gr-sub); margin-bottom:6px; }
.gr-portal .gr-transfer-list {
  width:100%; border:1px solid var(--gr-rule); border-radius:10px; padding:6px;
  font-family:inherit; font-size:13.5px; color:var(--gr-ink); background:#fff;
}
.gr-portal .gr-transfer-list option { padding:6px 8px; border-radius:6px; }
.gr-portal .gr-transfer-list option:checked { background:var(--gr-pl); color:var(--gr-p); }
.gr-portal .gr-transfer-arrows { display:flex; flex-direction:column; gap:8px; flex:none; }
.gr-portal .gr-transfer-btn {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--gr-rule); background:#fff;
  color:var(--gr-p); font-size:16px; font-weight:700; cursor:pointer; line-height:1;
}
.gr-portal .gr-transfer-btn:hover { background:var(--gr-pl); border-color:#e0cdea; }

.gr-portal .gr-team-delete-form { margin-top:14px; padding-top:14px; border-top:1px solid var(--gr-rule); }

/* Assignment single view */
.gr-portal .gr-assignment-layout { display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:start; }
@media (max-width:780px) { .gr-portal .gr-assignment-layout { grid-template-columns:1fr; } }
.gr-portal .gr-assignment-delivery-panel { /* plain layout container now — gr-profile-hero and gr-section-card provide the actual card treatment inside it */ }
.gr-portal .gr-assignment-main h2 { margin:0 0 16px; font-size:22px; color:var(--gr-ink); }
.gr-portal .gr-assignment-main h4 { margin:20px 0 8px; font-size:14px; color:var(--gr-pd); }
.gr-portal .gr-def-list { display:grid; grid-template-columns:160px 1fr; gap:6px 14px; margin:0; }
.gr-portal .gr-def-list dt { font-size:12.5px; font-weight:700; color:var(--gr-sub); text-transform:uppercase; letter-spacing:.04em; }
.gr-portal .gr-def-list dd { margin:0; font-size:14px; color:var(--gr-ink); }
.gr-portal .gr-plain-table { width:100%; border-collapse:collapse; margin-top:8px; }
.gr-portal .gr-plain-table td { border:1px solid var(--gr-rule); padding:8px 10px; font-size:13.5px; }
.gr-portal .gr-plain-table--headed th {
  background:#faf9f7; border:1px solid var(--gr-rule); padding:8px 10px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gr-sub); text-align:left;
}

.gr-portal .gr-assignment-notify {
  background:var(--gr-pl); border:1px solid #e0cdea; border-radius:14px; padding:20px 22px; margin-bottom:24px;
}
.gr-portal .gr-assignment-notify h3 { margin:0 0 12px; font-size:15px; color:var(--gr-pd); }

/* ===== Profile/detail view system — used by gr_delivery_view and
   gr_assignment_view's Delivery panel. Distinguishes three kinds of
   content instead of treating every field identically: a hero summary,
   quick scannable facts, and narrative text worth actually reading. ===== */

.gr-portal .gr-profile-hero {
  display:flex; align-items:center; gap:20px; background:#fff; border:1px solid var(--gr-rule);
  border-radius:16px; padding:24px 28px; margin-bottom:20px;
}
.gr-portal .gr-profile-hero-avatar {
  flex:0 0 auto; width:64px; height:64px; border-radius:50%; background:var(--gr-pl);
  color:var(--gr-p); font-size:24px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.gr-portal .gr-profile-hero-name { margin:0 0 6px; font-size:24px; font-weight:800; color:var(--gr-ink); letter-spacing:-.01em; }
.gr-portal .gr-profile-hero-chips { display:flex; flex-wrap:wrap; gap:8px; }
.gr-portal .gr-profile-chip {
  font-size:12.5px; font-weight:700; color:var(--gr-pd); background:var(--gr-pl);
  border-radius:20px; padding:4px 12px; white-space:nowrap;
}

.gr-portal .gr-section-card {
  background:#fff; border:1px solid var(--gr-rule); border-radius:16px; padding:22px 26px; margin-bottom:18px;
}
.gr-portal .gr-section-card h4 {
  margin:0 0 16px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gr-pd);
  padding-bottom:10px; border-bottom:1px solid var(--gr-rule);
}

.gr-portal .gr-fact-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px; margin-bottom:6px; }
.gr-portal .gr-fact { background:var(--gr-warm); border-radius:10px; padding:12px 14px; }
.gr-portal .gr-fact-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gr-sub); margin-bottom:4px; }
.gr-portal .gr-fact-value { font-size:14px; font-weight:600; color:var(--gr-ink); line-height:1.4; }

.gr-portal .gr-story-block { margin-top:18px; padding-left:16px; border-left:3px solid var(--gr-gl); }
.gr-portal .gr-story-block:first-of-type { margin-top:0; }
.gr-portal .gr-story-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gr-gd); margin-bottom:6px; }
.gr-portal .gr-story-text { font-size:14.5px; line-height:1.65; color:var(--gr-ink); }

/* Narrower variant for the two-column Assignment view's side panel,
   where a full-width hero/section layout would feel cramped. */
.gr-portal .gr-profile-hero--compact { padding:18px 20px; gap:14px; }
.gr-portal .gr-profile-hero--compact .gr-profile-hero-avatar { width:48px; height:48px; font-size:18px; }
.gr-portal .gr-profile-hero--compact .gr-profile-hero-name { font-size:19px; }
.gr-portal .gr-profile-hero--compact .gr-fact-grid { grid-template-columns:1fr 1fr; }

/* Who's assigned — deliberately more prominent than a plain chip, since
   this is the single most important fact on an assignment's page, not
   just another attribute alongside Type/Status/Location. */
.gr-portal .gr-who-assigned {
  display:flex; gap:24px; flex-wrap:wrap; background:var(--gr-pl); border:1px solid #e0cdea;
  border-radius:12px; padding:16px 20px; margin-bottom:20px;
}
.gr-portal .gr-who-assigned-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gr-pd); margin-bottom:6px; }
.gr-portal .gr-who-assigned-person { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--gr-ink); }
.gr-portal .gr-who-assigned-person .gr-dt-avatar { width:28px; height:28px; font-size:12px; }

/* ===== Dashboard tiles ===== */
.gr-portal .gr-dash-section { margin-bottom:32px; }
.gr-portal .gr-dash-section h3 { margin:0 0 14px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gr-sub); }
.gr-portal .gr-tile-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:16px; }
.gr-portal .gr-tile {
  display:block; background:#fff; border:1px solid var(--gr-rule); border-left:4px solid var(--gr-p);
  border-radius:12px; padding:20px 22px; text-decoration:none; transition:box-shadow .15s, transform .15s;
}
.gr-portal a.gr-tile:hover { box-shadow:0 4px 14px rgba(0,0,0,.06); transform:translateY(-1px); }
.gr-portal .gr-tile--purple { border-left-color:var(--gr-p); }
.gr-portal .gr-tile--teal { border-left-color:var(--gr-t); }
.gr-portal .gr-tile--gold { border-left-color:var(--gr-gd); }
.gr-portal .gr-tile-num { font-size:32px; font-weight:800; color:var(--gr-ink); line-height:1; margin-bottom:8px; }
.gr-portal .gr-tile-label { font-size:13.5px; font-weight:600; color:var(--gr-mu); }
.gr-portal .gr-ping-recipients { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; font-size:13.5px; }
.gr-portal .gr-assignment-ping-form textarea {
  width:100%; max-width:480px; font-family:inherit; font-size:14px; padding:10px 12px;
  border-radius:8px; border:1px solid var(--gr-rule); margin-bottom:10px; resize:vertical;
}

/* Assignments list */
.gr-portal .gr-dt-row--assignments { grid-template-columns:1.6fr 1fr 1fr 0.9fr 0.9fr 0.9fr; }
.gr-portal .gr-dt-row--manage-assignments { grid-template-columns:1.8fr 1fr 1fr auto; }
.gr-portal .gr-dt-name { color:var(--gr-p); text-decoration:none; font-weight:600; }
.gr-portal .gr-dt-name:hover { text-decoration:underline; }

/* ACF front-end form (Manage Assignments) — light structural styling only;
   ACF renders its own field markup, this just keeps spacing/typography
   consistent with the rest of the portal rather than ACF's raw default. */
/* ACF front-end form (Create/Edit Assignment) — a real styling pass, not
   a light touch. ACF's own front-end form CSS is genuinely bare-bones
   outside wp-admin (none of wp-admin's polish carries over), so this
   covers the actual DOM/classes ACF renders: field rows, repeater
   tables, Select2 dropdowns for Relationship/User fields, and the
   true/false toggle — not just plain text inputs. */
.gr-portal .gr-acf-form-wrap {
  background:#fff; border:1px solid var(--gr-rule); border-radius:16px; padding:28px 32px;
}
.gr-portal .gr-acf-form-wrap .acf-form { max-width:100%; }
.gr-portal .gr-acf-form-wrap .acf-field { padding:18px 0; border-bottom:1px solid var(--gr-rule); }
.gr-portal .gr-acf-form-wrap .acf-field:last-of-type { border-bottom:none; }
.gr-portal .gr-acf-form-wrap .acf-label label {
  font-weight:700; font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--gr-mu); margin-bottom:8px; display:block;
}
.gr-portal .gr-acf-form-wrap .acf-required { color:#a94442; }
.gr-portal .gr-acf-form-wrap .acf-input { margin-top:4px; }

.gr-portal .gr-acf-form-wrap input[type=text], .gr-portal .gr-acf-form-wrap input[type=number],
.gr-portal .gr-acf-form-wrap input[type=date], .gr-portal .gr-acf-form-wrap input[type=time],
.gr-portal .gr-acf-form-wrap textarea, .gr-portal .gr-acf-form-wrap select {
  font-family:inherit; font-size:14px; color:var(--gr-ink); width:100%; max-width:420px;
  padding:10px 14px; border-radius:8px; border:1px solid var(--gr-rule); background:#fff;
}
.gr-portal .gr-acf-form-wrap textarea { max-width:100%; min-height:90px; resize:vertical; }
.gr-portal .gr-acf-form-wrap input:focus, .gr-portal .gr-acf-form-wrap textarea:focus, .gr-portal .gr-acf-form-wrap select:focus {
  outline:none; border-color:var(--gr-p);
}

/* True/False toggle field */
/* True/False toggle — targets the actual checkbox input directly rather
   than ACF's nested switch markup (which varies enough between versions
   that styling it precisely isn't reliable); this works regardless. */
.gr-portal .gr-acf-form-wrap input[type=checkbox] {
  width:20px; height:20px; accent-color:var(--gr-p); cursor:pointer; vertical-align:middle; margin:0;
}

/* Select2's dropdown (Relationship/User field results) renders with a
   modest default z-index that sits BELOW our fixed topbar (z-index:200) —
   this is why fields near the top of a form can appear to have their
   open dropdown hidden or overlapping the header. Not a field bug;
   purely a stacking-order fix. */
.select2-dropdown { z-index:9999 !important; }

/* Repeater tables — same headed-table language as the rest of the portal */
.gr-portal .gr-acf-form-wrap table.acf-table {
  width:100%; border-collapse:collapse; margin-top:8px; border:1px solid var(--gr-rule); border-radius:10px; overflow:hidden;
}
.gr-portal .gr-acf-form-wrap table.acf-table > thead th {
  background:#faf9f7; border-bottom:1px solid var(--gr-rule); padding:10px 12px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--gr-sub); text-align:left;
}
.gr-portal .gr-acf-form-wrap table.acf-table > tbody td {
  border-top:1px solid var(--gr-rule); padding:10px 12px; vertical-align:top;
}
.gr-portal .gr-acf-form-wrap table.acf-table input, .gr-portal .gr-acf-form-wrap table.acf-table select {
  max-width:none; min-width:110px; padding:10px 12px; font-size:13.5px;
}
.gr-portal .gr-acf-form-wrap .acf-row-handle { background:#faf9f7 !important; width:32px !important; text-align:center; }

/* Select2 (Relationship / User fields) — ACF's own JS widget, so this
   only polishes appearance, never touches its behavior. Select2 sets its
   own computed width as an INLINE style via JS, which beats a normal CSS
   rule regardless of selector specificity — !important on the container
   itself is the only thing that reliably overrides that, and is why the
   previous pass (which only styled a child element) didn't actually fix
   the oversized/overlapping rendering. */
.gr-portal .gr-acf-form-wrap .select2-container {
  width:100% !important; max-width:420px !important;
}
.gr-portal .gr-acf-form-wrap .select2-container .select2-selection {
  border-radius:8px; border:1px solid var(--gr-rule); min-height:42px; padding:4px 6px;
}
.gr-portal .gr-acf-form-wrap .select2-container--focus .select2-selection { border-color:var(--gr-p); }
.gr-portal .gr-acf-form-wrap .acf-relationship .select2-container,
.gr-portal .gr-acf-form-wrap table.acf-table .select2-container {
  max-width:none !important; /* Relationship field and repeater-cell dropdowns need their own container's full room, not the 420px cap meant for standalone fields */
}
.gr-portal .gr-acf-form-wrap .acf-relationship .list { border-radius:8px; border:1px solid var(--gr-rule); }
.gr-portal .gr-acf-form-wrap .acf-relationship .filters input[type=text] { max-width:none; }

/* ===== Gravity Forms / GravityView — matches the portal design system.
   Targets GF's stable, well-documented core classes (.gform_wrapper,
   .gfield, .gform_button, etc.) rather than anything version-specific.

   IMPORTANT: Gravity Forms ships its own default theme CSS, which loads
   as a real stylesheet with its own specificity — not just an inline
   style. A previous pass here used !important inconsistently, which
   meant GF's own CSS was winning on several properties (width, padding,
   background) even though the rules LOOKED correct on paper. Every
   layout-affecting property below now uses !important deliberately, so
   there's no ambiguity about which stylesheet wins regardless of GF's
   own enqueue order. This is the actual fix, not a restyle. ===== */

.gr-portal .gform_wrapper, .gr-portal .gform_wrapper * { box-sizing:border-box !important; }
.gr-portal .gform_wrapper { font-family:inherit !important; max-width:100% !important; }
.gr-portal .gform_wrapper .gfield { margin-bottom:18px !important; width:100% !important; max-width:100% !important; }
.gr-portal .gform_wrapper .ginput_container,
.gr-portal .gform_wrapper .ginput_container_select,
.gr-portal .gform_wrapper .ginput_container_text,
.gr-portal .gform_wrapper .ginput_container_textarea,
.gr-portal .gform_wrapper .ginput_container_email,
.gr-portal .gform_wrapper .ginput_container_phone,
.gr-portal .gform_wrapper .ginput_complex,
.gr-portal .gform_wrapper .ginput_container_address {
  width:100% !important; max-width:100% !important;
}
.gr-portal .gform_wrapper label.gfield_label, .gr-portal .gform_wrapper legend.gfield_label {
  font-weight:700 !important; font-size:13px !important; letter-spacing:.02em !important;
  text-transform:uppercase !important; color:var(--gr-mu) !important; margin-bottom:6px !important;
}
.gr-portal .gform_wrapper input[type=text], .gr-portal .gform_wrapper input[type=email],
.gr-portal .gform_wrapper input[type=tel], .gr-portal .gform_wrapper input[type=number],
.gr-portal .gform_wrapper input[type=date], .gr-portal .gform_wrapper textarea,
.gr-portal .gform_wrapper select {
  font-family:inherit !important; font-size:14px !important; color:var(--gr-ink) !important;
  width:100% !important; max-width:100% !important; min-width:0 !important;
  padding:10px 14px !important; border-radius:8px !important; border:1px solid var(--gr-rule) !important; background:#fff !important;
}
/* Select specifically — Gravity Forms' own theme sets a fixed height on
   selects (block-size, its logical-property name), which can end up
   shorter than what this padding + font-size combination actually needs
   — the box clips the option text vertically rather than resizing to
   fit it. Forcing height:auto with an explicit line-height is what
   actually stops that clipping; the earlier width fix alone wasn't the
   whole story. */
.gr-portal .gform_wrapper select {
  height:auto !important; line-height:1.4 !important; padding-top:9px !important; padding-bottom:9px !important;
}
/* Deliberately left as the browser's native select rendering — a
   previous pass tried a custom appearance:none arrow here, which is
   very likely what caused the option text to visually overlap the box.
   Native select behavior is simpler and safer; not worth the risk for
   a purely cosmetic arrow. */
.gr-portal .gform_wrapper textarea { min-height:90px !important; resize:vertical !important; }
.gr-portal .gform_wrapper input:focus, .gr-portal .gform_wrapper textarea:focus, .gr-portal .gform_wrapper select:focus {
  outline:none !important; border-color:var(--gr-p) !important;
}
.gr-portal .gform_wrapper .gform_footer, .gr-portal .gform_wrapper .gform_page_footer { margin-top:16px !important; padding-top:0 !important; border-top:none !important; }
.gr-portal .gform_wrapper .gform_button, .gr-portal .gform_wrapper input[type=submit] {
  font-family:inherit !important; background:var(--gr-p) !important; color:#fff !important; border:none !important;
  border-radius:24px !important; padding:12px 28px !important; font-weight:700 !important; font-size:14px !important; cursor:pointer !important;
}
.gr-portal .gform_wrapper .gform_button:hover { background:var(--gr-pd) !important; }
.gr-portal .gform_wrapper .validation_error {
  background:#fdecea !important; border:1px solid #f0b8b4 !important; color:#a94442 !important;
  border-radius:8px !important; padding:12px 16px !important; font-size:13px !important; margin-bottom:16px !important;
}
.gr-portal .gform_wrapper .gfield_description, .gr-portal .gform_wrapper .gfield_validation_message {
  font-size:12.5px !important; color:var(--gr-sub) !important; margin-top:4px !important;
}
.gr-portal .gform_wrapper .gfield_checkbox li, .gr-portal .gform_wrapper .gfield_radio li { font-size:14px !important; color:var(--gr-ink) !important; }
/* Gravity Forms' List field (repeater-style table, e.g. expense line
   items) — its own table markup, separate from plain inputs above. */
.gr-portal .gform_wrapper table.gfield_list {
  width:100% !important; border-collapse:collapse !important; box-sizing:border-box !important;
}
.gr-portal .gform_wrapper table.gfield_list th {
  background:#faf9f7 !important; border:1px solid var(--gr-rule) !important; padding:10px 12px !important;
  font-size:11px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.04em !important; color:var(--gr-sub) !important;
}
.gr-portal .gform_wrapper table.gfield_list td { border:1px solid var(--gr-rule) !important; padding:8px 10px !important; }
.gr-portal .gform_wrapper table.gfield_list input, .gr-portal .gform_wrapper table.gfield_list select { width:100% !important; max-width:none !important; }
/* The List field's own "Add Row" control (e.g. "Add Expense Item") —
   a genuinely different element than .gform_button above, which is why
   it was still rendering as plain browser-default blue. Covers both the
   older icon-link markup (.add_list_item) and newer button-style
   variants some GF versions/configurations use. */
.gr-portal .gform_wrapper .add_list_item,
.gr-portal .gform_wrapper .gfield_list_icons a,
.gr-portal .gform_wrapper button.add-icon,
.gr-portal .gform_wrapper input.add_list_item {
  font-family:inherit !important; background:var(--gr-p) !important; color:#fff !important; border:none !important;
  border-radius:8px !important; padding:8px 16px !important; font-weight:600 !important; font-size:13px !important; cursor:pointer !important;
  text-decoration:none !important; display:inline-block !important;
}
.gr-portal .gform_wrapper .add_list_item:hover, .gr-portal .gform_wrapper .gfield_list_icons a:hover { background:var(--gr-pd) !important; }

/* GP Nested Forms (Gravity Perks) — a different add-on than the plain
   List field above, confirmed via its actual class name (gpnf-add-entry
   on the button; the modal itself uses jQuery UI Dialog under the hood,
   confirmed as .gpnf-dialog.ui-dialog in Gravity Perks' own docs).
   Deliberately NOT scoped under .gr-portal: jQuery UI Dialog typically
   appends its modal to the end of <body>, detaching it from wherever it
   started in the DOM — if .gr-portal lives on a wrapper div rather than
   body itself, a .gr-portal-scoped rule would never match content that's
   been moved outside that wrapper. gpnf-dialog is distinctive enough not
   to need that scoping safety net anyway. */
.gpnf-add-entry {
  font-family:inherit !important; background:var(--gr-p) !important; color:#fff !important; border:none !important;
  border-radius:24px !important; padding:10px 22px !important; font-weight:700 !important; font-size:14px !important; cursor:pointer !important;
}
.gpnf-add-entry:hover { background:var(--gr-pd) !important; }

.gpnf-dialog.ui-dialog {
  border-radius:16px !important; border:1px solid var(--gr-rule) !important; box-shadow:0 8px 30px rgba(0,0,0,.15) !important;
  font-family:inherit !important; padding:0 !important; overflow:hidden !important;
}
.gpnf-dialog .ui-dialog-titlebar {
  background:var(--gr-pl) !important; border-bottom:1px solid #e0cdea !important; padding:16px 20px !important;
}
.gpnf-dialog .ui-dialog-title { color:var(--gr-pd) !important; font-weight:700 !important; font-size:16px !important; }
.gpnf-dialog .ui-dialog-titlebar-close {
  background:transparent !important; border:none !important; color:var(--gr-pd) !important;
}
.gpnf-dialog .ui-dialog-content { padding:20px !important; }
.gpnf-dialog .ui-dialog-buttonpane {
  background:var(--gr-warm) !important; border-top:1px solid var(--gr-rule) !important; padding:14px 20px !important;
}
.gpnf-dialog .ui-dialog-buttonpane button {
  font-family:inherit !important; border-radius:24px !important; padding:10px 24px !important; font-weight:700 !important; font-size:14px !important; cursor:pointer !important;
  background:var(--gr-p) !important; color:#fff !important; border:none !important;
}
.gpnf-dialog .ui-dialog-buttonpane button:hover { background:var(--gr-pd) !important; }
/* The nested form INSIDE the modal is still a real Gravity Form — repeat
   the essential field styling here too, in case the modal really is
   outside .gr-portal's reach and those rules never apply to it. */
.gpnf-dialog .gform_wrapper input[type=text], .gpnf-dialog .gform_wrapper input[type=email],
.gpnf-dialog .gform_wrapper input[type=tel], .gpnf-dialog .gform_wrapper input[type=number],
.gpnf-dialog .gform_wrapper textarea, .gpnf-dialog .gform_wrapper select {
  font-family:inherit !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important;
  padding:10px 14px !important; border-radius:8px !important; border:1px solid var(--gr-rule) !important; height:auto !important; line-height:1.4 !important;
}
.gr-portal .gform_confirmation_message {
  background:var(--gr-pl) !important; border:1px solid #e0cdea !important; border-radius:12px !important; padding:20px 24px !important; color:var(--gr-pd) !important; font-weight:600 !important;
}

/* GravityView — Table layout specifically. table-layout:auto lets each
   column size to its actual content instead of forcing equal widths. */
.gr-portal .gv-table-view, .gr-portal table.gv-table-view {
  width:100% !important; border-collapse:collapse !important; table-layout:auto !important; font-family:inherit !important; box-sizing:border-box !important;
}
.gr-portal .gv-table-view th, .gr-portal .gv-table-view td { box-sizing:border-box !important; }
.gr-portal .gv-table-view th {
  background:#faf9f7 !important; border-bottom:1px solid var(--gr-rule) !important; padding:10px 12px !important;
  font-size:11px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.04em !important; color:var(--gr-sub) !important; text-align:left !important; white-space:nowrap !important;
}
.gr-portal .gv-table-view td { border-top:1px solid var(--gr-rule) !important; padding:10px 12px !important; font-size:13.5px !important; color:var(--gr-ink) !important; }
.gr-portal .gv-list-view { border:1px solid var(--gr-rule) !important; border-radius:12px !important; padding:18px 20px !important; margin-bottom:14px !important; box-sizing:border-box !important; }
.gr-portal .gv-container { overflow-x:auto; max-width:100%; }

/* GravityView's search widget — the "Search Entries" box + button shown
   above a View. Previously unstyled entirely, which is why the button
   rendered as plain browser-default blue rather than brand purple. */
.gr-portal .gv-search-box, .gr-portal .gv-widget-search {
  background:var(--gr-warm) !important; border:1px solid var(--gr-rule) !important; border-radius:12px !important; padding:18px 20px !important; margin-bottom:16px !important;
}
.gr-portal .gv-search-box label, .gr-portal .gv-widget-search label {
  font-weight:700 !important; font-size:13px !important; color:var(--gr-mu) !important; margin-bottom:6px !important; display:block !important;
}
.gr-portal .gv-search-box input[type=text], .gr-portal .gv-widget-search input[type=text],
.gr-portal .gv-search-box input[type=search], .gr-portal .gv-widget-search input[type=search] {
  border:1px solid var(--gr-rule) !important; border-radius:8px !important; padding:10px 14px !important;
  font-family:inherit !important; font-size:14px !important; width:100% !important; box-sizing:border-box !important;
}
.gr-portal .gv-search-box input[type=submit], .gr-portal .gv-widget-search input[type=submit],
.gr-portal .gv-search-box button, .gr-portal .gv-widget-search button {
  font-family:inherit !important; background:var(--gr-p) !important; color:#fff !important; border:none !important;
  border-radius:24px !important; padding:10px 24px !important; font-weight:700 !important; font-size:14px !important; cursor:pointer !important;
}
.gr-portal .gv-search-box input[type=submit]:hover, .gr-portal .gv-widget-search button:hover { background:var(--gr-pd) !important; }

/* GravityView's DataTables layout — a genuinely different thing from the
   plain Table layout above. It brings its own JS-driven search/sort/
   pagination UI (jQuery DataTables), with its own separate class names.
   Every rule here is deliberately cosmetic only — color, font, border,
   spacing — nothing that touches display, position, or width, since
   those are exactly what DataTables' own JS relies on for its layout
   and column-width calculations. Sort/search/pagination behavior is
   completely untouched. */
.gr-portal .dataTables_wrapper { font-family:inherit !important; color:var(--gr-ink) !important; }
.gr-portal .dataTables_wrapper .dataTables_length,
.gr-portal .dataTables_wrapper .dataTables_filter,
.gr-portal .dataTables_wrapper .dataTables_info {
  font-size:13px !important; color:var(--gr-mu) !important;
}
.gr-portal .dataTables_wrapper .dataTables_filter input,
.gr-portal .dataTables_wrapper .dataTables_length select {
  border:1px solid var(--gr-rule) !important; border-radius:8px !important; padding:6px 10px !important; font-family:inherit !important; font-size:13px !important; color:var(--gr-ink) !important;
}
.gr-portal .dataTables_wrapper .dataTables_filter input:focus,
.gr-portal .dataTables_wrapper .dataTables_length select:focus { outline:none !important; border-color:var(--gr-p) !important; }

.gr-portal table.dataTable { border-collapse:collapse !important; }
.gr-portal table.dataTable thead th {
  background:#faf9f7 !important; border-bottom:1px solid var(--gr-rule) !important; color:var(--gr-sub) !important;
  font-size:11px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.04em !important; padding:10px 12px !important;
}
.gr-portal table.dataTable tbody td { border-top:1px solid var(--gr-rule) !important; color:var(--gr-ink) !important; font-size:13.5px !important; padding:10px 12px !important; }
.gr-portal table.dataTable tbody tr.odd, .gr-portal table.dataTable tbody tr.even { background:#fff !important; }
.gr-portal table.dataTable tbody tr:hover { background:var(--gr-warm) !important; }

.gr-portal .dataTables_wrapper .dataTables_paginate .paginate_button {
  font-family:inherit; font-size:13px; color:var(--gr-mu) !important; border:1px solid transparent !important;
  border-radius:8px; padding:5px 11px; margin-left:2px; background:transparent !important;
}
.gr-portal .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color:#fff !important; background:var(--gr-p) !important; border-color:var(--gr-p) !important;
}
.gr-portal .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
  color:var(--gr-p) !important; background:var(--gr-pl) !important; border-color:var(--gr-pl) !important;
}
.gr-portal .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color:#ccc !important; }

.gr-portal .gr-acf-form-wrap a.button, .gr-portal .gr-acf-form-wrap a.acf-button {
  display:inline-block; font-size:13px; font-weight:700; color:var(--gr-p); text-decoration:none;
  padding:6px 14px; border:1.5px solid #e0cdea; border-radius:16px; background:#fff; margin-top:10px;
}
.gr-portal .gr-acf-form-wrap a.button:hover, .gr-portal .gr-acf-form-wrap a.acf-button:hover { background:var(--gr-pl); }

/* Validation errors */
.gr-portal .gr-acf-form-wrap .acf-error-message {
  background:#fdecea; border:1px solid #f0b8b4; color:#a94442; border-radius:8px; padding:10px 14px; font-size:13px; margin-bottom:16px;
}
.gr-portal .gr-acf-form-wrap .acf-field.acf-error .acf-label label { color:#a94442; }

.gr-portal .gr-acf-form-wrap .acf-form-submit { margin-top:24px; }

/* Profile form */
.gr-portal .gr-profile-form { display:flex; flex-direction:column; gap:16px; max-width:520px; }
.gr-portal .gr-profile-form label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--gr-mu); }
.gr-portal .gr-profile-form input[type=text], .gr-portal .gr-profile-form input[type=email], .gr-portal .gr-profile-form select {
  font-family:inherit; font-size:14px; padding:10px 12px; border-radius:8px; border:1px solid var(--gr-rule); color:var(--gr-ink);
}
.gr-portal .gr-profile-preview { width:72px; height:72px; border-radius:50%; object-fit:cover; margin-bottom:8px; }
.gr-portal .gr-profile-cover-preview { width:100%; max-width:400px; height:120px; object-fit:cover; border-radius:10px; margin-bottom:8px; }

/* Team header "View roster" link + the collapsible manage panel */
.gr-portal .gr-team-head { position:relative; }
.gr-portal .gr-team-roster-link {
  font-size:12.5px; font-weight:700; color:var(--gr-p); text-decoration:none;
  align-self:flex-start; white-space:nowrap;
}
.gr-portal .gr-team-roster-link:hover { text-decoration:underline; }
.gr-portal .gr-team-head-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.gr-portal .gr-team-manage-panel { margin-top:14px; }
.gr-portal .gr-team-manage-panel summary {
  cursor:pointer; font-size:13.5px; font-weight:700; color:var(--gr-p);
  list-style:none; padding:8px 0;
}
.gr-portal .gr-team-manage-panel summary::-webkit-details-marker { display:none; }
.gr-portal .gr-team-manage-panel summary::before { content:"▸ "; font-size:11px; }
.gr-portal .gr-team-manage-panel[open] summary::before { content:"▾ "; }

/* Deliveries "Assign" panel — same collapsible pattern */
.gr-portal .gr-delivery-actions { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.gr-portal .gr-delivery-edit { margin-top:0; }
.gr-portal .gr-delivery-edit summary {
  cursor:pointer; font-size:12.5px; font-weight:700; color:var(--gr-p);
  list-style:none; padding:4px 0; text-decoration:underline; text-underline-offset:2px;
}
.gr-portal .gr-delivery-edit summary::-webkit-details-marker { display:none; }
.gr-portal .gr-delivery-edit form { display:flex; flex-direction:column; gap:10px; margin-top:8px; max-width:340px; }
.gr-portal .gr-delivery-edit select {
  font-family:inherit; font-size:13.5px; padding:8px 12px; border-radius:8px; border:1px solid var(--gr-rule);
}
.gr-portal .gr-delivery-edit label { font-size:13px; color:var(--gr-mu); display:flex; align-items:center; gap:6px; }

/* Manual "Add New Delivery" form */
.gr-portal .gr-req { color:#a94442; }
.gr-portal .gr-form-note {
  font-size:13px; color:var(--gr-mu); background:var(--gr-warm); border-radius:8px;
  padding:12px 16px; margin:0 0 18px;
}
.gr-portal .gr-new-delivery-form { display:flex; flex-direction:column; gap:16px; max-width:520px; }
.gr-portal .gr-new-delivery-form label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--gr-mu); }
.gr-portal .gr-new-delivery-form input[type=text], .gr-portal .gr-new-delivery-form input[type=date],
.gr-portal .gr-new-delivery-form select, .gr-portal .gr-new-delivery-form textarea {
  font-family:inherit; font-size:14px; padding:10px 12px; border-radius:8px;
  border:1px solid var(--gr-rule); color:var(--gr-ink);
}
.gr-portal .gr-new-delivery-form textarea { min-height:70px; resize:vertical; }

.gr-portal .gr-help {
  margin-top:auto; padding:15px 15px 16px; border-radius:14px;
  background:var(--gr-gl); border:1px solid #ece3cf;
}
.gr-portal .gr-help b { display:block; font-size:12.5px; font-weight:800; color:var(--gr-gd); margin-bottom:4px; }
.gr-portal .gr-help p { font-size:11.5px; color:var(--gr-mu); line-height:1.5; margin:0 0 11px; }
.gr-portal .gr-help a {
  display:block; text-align:center; background:#fff; border:1px solid #ddd0b3;
  color:var(--gr-gd); font-size:12px; font-weight:700; padding:8px;
  border-radius:9px; text-decoration:none;
}
.gr-portal .gr-help a:hover { background:#fffaf0; }

/* ── page content offset ────────────────────────────────── */
/* Clearance lives on BODY, not on theme wrappers — Elementor Canvas and
   Full Width templates don't output .site-main / #content, and anything
   relying on them slides under the fixed bar. */
body.gr-portal {
  box-sizing:border-box;
  padding-top:var(--gr-top);
}
body.gr-portal.gr-has-sidebar { padding-left:var(--gr-side); }

/* Elementor sticky/fixed sections would otherwise ignore the bar */
.gr-portal .elementor-sticky--effects,
.gr-portal .elementor-sticky--active { top:calc(var(--gr-admin) + var(--gr-top)) !important; }

/* Escape hatch: full-bleed a section inside portal content */
.gr-portal.gr-has-sidebar .gr-bleed { margin-left:calc(var(--gr-side) * -1); width:calc(100% + var(--gr-side)); }
.gr-portal .gr-bleed-top { margin-top:calc(var(--gr-top) * -1); }

/* ── burger (hidden on desktop) ─────────────────────────── */
.gr-portal .gr-burger {
  display:none; width:36px; height:36px; border:0; background:none;
  padding:8px; cursor:pointer; flex-direction:column; justify-content:space-between;
}
.gr-portal .gr-burger span { display:block; height:2px; background:#fff; border-radius:2px; }

/* ── mobile ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  .gr-portal .gr-burger { display:flex; }
  .gr-portal .gr-search, .gr-portal .gr-user-txt { display:none; }
  .gr-portal .gr-bar-label { display:none; }
  .gr-portal .gr-sidebar {
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.18);
  }
  .gr-portal.gr-nav-open .gr-sidebar { transform:none; }
  .gr-portal .gr-scrim {
    position:fixed; inset:calc(var(--gr-admin) + var(--gr-top)) 0 0 0; z-index:180;
    background:rgba(24,24,24,.42); opacity:0; transition:opacity .22s;
  }
  .gr-portal.gr-nav-open .gr-scrim { opacity:1; }
  body.gr-portal.gr-has-sidebar { padding-left:0; }
  .gr-portal .gr-bleed { margin-left:0; width:100%; }
}

@media print {
  .gr-portal .gr-stripe, .gr-portal .gr-topbar,
  .gr-portal .gr-sidebar, .gr-portal .gr-scrim { display:none !important; }
  body.gr-portal { padding:0 !important; }
}


/* ── auth forms (public pages, shell not present) ─────────── */
.gr-auth {
  --gr-p:#722B87; --gr-pd:#4e1d5d; --gr-gd:#7a6c48; --gr-gl:#f7f2e8;
  --gr-ink:#181818; --gr-mu:#555; --gr-sub:#888; --gr-rule:#e8e4e0;
  /* Card width. Override per page with an inline style on the wrapper, or
     set --gr-auth-w in Elementor's Custom CSS for that section. */
  --gr-auth-w:420px;
  width:100%; max-width:var(--gr-auth-w); margin:0 auto;
}
.gr-auth--wide  { --gr-auth-w:520px; }
.gr-auth--wider { --gr-auth-w:600px; }

.gr-auth-form {
  background:#fff; border:1px solid var(--gr-rule); border-radius:18px;
  padding:clamp(26px, 4vw, 44px) clamp(22px, 4vw, 46px) clamp(24px, 3.4vw, 38px);
  display:flex; flex-direction:column; gap:15px;
}
@media (max-width:520px) {
  .gr-auth { --gr-auth-w:100%; }
  .gr-auth-form { border-radius:14px; }
}
.gr-auth-form h2 {
  font-size:25px; font-weight:800; letter-spacing:-.5px; color:var(--gr-ink); margin:0;
}
.gr-auth-sub { font-size:14px; color:var(--gr-mu); line-height:1.55; margin:-8px 0 0; }
.gr-auth-form label {
  display:flex; flex-direction:column; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--gr-sub);
}
.gr-auth-form input[type=text],
.gr-auth-form input[type=password] {
  width:100%; padding:12px 14px; border:1px solid #ddd8d2; border-radius:10px;
  font:inherit; font-size:15px; color:var(--gr-ink); background:#fff;
  text-transform:none; letter-spacing:normal;
}
.gr-auth-form input:focus {
  outline:none; border-color:var(--gr-p); box-shadow:0 0 0 3px rgba(114,43,135,.13);
}
.gr-auth-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.gr-auth-check {
  flex-direction:row !important; align-items:center; gap:7px !important;
  text-transform:none !important; letter-spacing:normal !important;
  font-size:13px !important; font-weight:500 !important; color:var(--gr-mu) !important;
}
.gr-auth-btn {
  display:block; width:100%; text-align:center; background:var(--gr-p); color:#fff;
  border:0; border-radius:24px; padding:13px 22px; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:700; text-decoration:none;
  transition:background .15s;
}
.gr-auth-btn:hover { background:var(--gr-pd); color:#fff; }
.gr-auth-link { font-size:13px; font-weight:600; color:var(--gr-p); text-decoration:none; }
.gr-auth-link:hover { text-decoration:underline; }
.gr-auth-back { text-align:center; margin-top:2px; }
.gr-auth-in { text-align:center; display:flex; flex-direction:column; gap:12px; }

.gr-note {
  border-radius:10px; padding:11px 14px; font-size:13.5px; line-height:1.5;
}
.gr-note--err { background:#fdeeee; border:1px solid #f3c9c9; color:#8f2626; }
.gr-note--ok  { background:var(--gr-gl); border:1px solid #ece3cf; color:var(--gr-gd); }
.gr-locked { font-size:14px; color:#888; font-style:italic; }


/* ── sticky footer — OPT-IN ────────────────────────────────
   Pinning the footer to the bottom of the viewport requires body to be
   min-height:100vh, and on any page shorter than the viewport that leftover
   height appears as a gap above the footer. Not worth it as a default: the
   footer simply follows the content instead.

   Want it pinned on a specific page? Add the class gr-sticky-footer to the
   BODY (Elementor → Page Settings → Advanced → Body CSS Classes, or in
   Site Settings → Custom CSS for a whole section of the site). */
body.gr-portal.gr-sticky-footer {
  display:flex; flex-direction:column;
  min-height:calc(100vh - var(--gr-admin));
}
body.gr-portal.gr-sticky-footer > .gr-stripe,
body.gr-portal.gr-sticky-footer > .gr-topbar,
body.gr-portal.gr-sticky-footer > .gr-sidebar,
body.gr-portal.gr-sticky-footer > .gr-scrim { flex:none; }

body.gr-portal.gr-sticky-footer .site-main,
body.gr-portal.gr-sticky-footer .site-content,
body.gr-portal.gr-sticky-footer #content,
body.gr-portal.gr-sticky-footer .elementor-location-single,
body.gr-portal .elementor-location-archive { flex:1 0 auto; }

body.gr-portal .gr-footer { margin-left:0; }
body.gr-portal.gr-sticky-footer .gr-footer { flex:none; margin-top:auto; }

/* ── global footer ────────────────────────────────────────── */
.gr-portal .gr-footer {
  background:#1c1410; color:rgba(255,255,255,.62);
  padding:52px 40px 0;
  font-size:14px; line-height:1.6;
}
.gr-portal .gr-footer-in {
  display:grid; grid-template-columns:1.4fr repeat(3, 1fr);
  gap:40px; max-width:1180px; margin:0 auto; padding-bottom:44px;
}
.gr-portal .gr-footer-mark { display:block; height:44px; margin-bottom:16px; }
.gr-portal .gr-footer-mark img { height:100%; width:auto; display:block; }
.gr-portal .gr-footer-mark > svg { width:38px; height:38px; }
.gr-portal .gr-footer-brand p {
  margin:0; font-size:13px; line-height:1.65; color:rgba(255,255,255,.5); max-width:30ch;
}
.gr-portal .gr-footer-col { display:flex; flex-direction:column; gap:10px; }
.gr-portal .gr-footer-col h4 {
  margin:0 0 4px; font-size:10px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--gr-gm);
}
.gr-portal .gr-footer-col a {
  color:rgba(255,255,255,.72); text-decoration:none; font-size:13.5px;
  transition:color .13s;
}
.gr-portal .gr-footer-col a:hover { color:#fff; }
.gr-portal .gr-footer-bar {
  border-top:1px solid rgba(255,255,255,.1);
  max-width:1180px; margin:0 auto; padding:20px 0 26px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-size:12.5px; color:rgba(255,255,255,.42);
}
.gr-portal .gr-footer-bar a { color:rgba(255,255,255,.6); text-decoration:none; }
.gr-portal .gr-footer-bar a:hover { color:#fff; }

@media (max-width:900px) {
  .gr-portal .gr-footer { padding:40px 24px 0; }
  .gr-portal .gr-footer-in { grid-template-columns:1fr 1fr; gap:30px; }
  .gr-portal .gr-footer-brand { grid-column:1 / -1; }
}

/* ── public auth pages ────────────────────────────────────── */
/* Give the sign-in page a real background instead of bare white. */
.gr-portal .gr-auth {
  padding:clamp(40px, 8vh, 88px) 20px clamp(40px, 8vh, 88px);
}
.gr-portal .gr-auth-form {
  box-shadow:0 24px 60px -28px rgba(24,16,10,.28);
}
body.gr-portal:has(.gr-auth) {
  background-color:#f8f6f2;
  background-image:
    radial-gradient(60% 55% at 88% 4%, rgba(114,43,135,.10), transparent 62%),
    radial-gradient(52% 48% at 4% 96%, rgba(169,151,107,.16), transparent 60%);
  background-attachment:fixed;
}
body.gr-portal:has(.gr-auth) .site-main,
body.gr-portal:has(.gr-auth) #content { background:transparent; }


/* ── team list ([gr_my_team]) ─────────────────────────────── */
.gr-teams { display:flex; flex-direction:column; gap:22px; }
.gr-team {
  background:#fff; border:1px solid var(--gr-rule, #e8e4e0); border-radius:16px;
  padding:20px 22px 8px;
}
.gr-team-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; padding-bottom:14px;
  border-bottom:1px solid var(--gr-rule, #e8e4e0);
}
.gr-team-head h3 {
  margin:0; font-size:18px; font-weight:800; letter-spacing:-.3px; color:#181818;
}
.gr-team-meta {
  display:block; margin-top:3px; font-size:12px; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase; color:#7a6c48;
}
.gr-team-msg {
  background:#722B87; color:#fff !important; text-decoration:none;
  font-size:12.5px; font-weight:700; padding:9px 18px; border-radius:20px;
  white-space:nowrap;
}
.gr-team-msg:hover { background:#4e1d5d; }
.gr-team-list { list-style:none; margin:0; padding:0; }
.gr-team-list li {
  display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid #f1efec;
}
.gr-team-list li:last-child { border-bottom:0; }
.gr-team-av {
  width:32px; height:32px; border-radius:50%; background:#f4edf8; color:#722B87;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; flex-shrink:0;
}
.gr-team-name { font-size:14.5px; font-weight:600; color:#181818; }
.gr-team-mail {
  margin-left:auto; font-size:13px; color:#555; text-decoration:none; word-break:break-all;
}
.gr-team-mail:hover { color:#722B87; text-decoration:underline; }


/* ── sign-in block ([gr_signin_block]) ────────────────────── */
.gr-auth--block .gr-auth-form { padding-bottom:26px; }
.gr-auth-div {
  display:flex; align-items:center; gap:12px;
  margin:6px 0 -2px; color:#888;
}
.gr-auth-div::before, .gr-auth-div::after {
  content:""; flex:1; height:1px; background:#e8e4e0;
}
.gr-auth-div span {
  font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
}
.gr-auth-btn--alt {
  background:#fff; color:#722B87; border:1.5px solid #e0cdea;
}
.gr-auth-btn--alt:hover { background:#faf5fc; color:#4e1d5d; }
.gr-auth-foot {
  text-align:center; font-size:12.5px; color:#888; line-height:1.6; margin:6px 0 0;
}
.gr-auth-foot a { font-weight:700; color:#722B87; text-decoration:none; }
.gr-auth-foot a:hover { text-decoration:underline; }