/* ═══════════════════════════════════════════════════════════════
   GNB Organisation Admin — Shared Layout & Components
   Version: 1.0
   Loaded by: common/new_styles.php
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
.org-admin {
  --green: #5BA04A;
  --green-deep: #447C37;
  --green-pale: #EAF4E7;
  --ink: #1F1F1C;
  --text: #3F3F3A;
  --muted: #77766F;
  --faint: #9A9892;
  --surface: #F7F7F5;
  --line: rgba(0,0,0,.08);
  --line-strong: rgba(0,0,0,.14);
  --shadow-card: 0 6px 18px rgba(0,0,0,.035);
  --shadow-soft: 0 8px 28px rgba(0,0,0,.06);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  font-family: var(--font);
}

/* ── Content Grid ── */
.org-content {
  top: -60px;
  position: relative;
}

/* ── Page Wrapper ── */
.org-page {
  /* Base page wrapper — used alongside page-specific classes */
}

/* ── Shared Navigation ── */
.org-nav {
  display: flex;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.03);
}
.org-nav::-webkit-scrollbar { display: none; }
.org-nav li { margin: 0; }
.org-nav a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.org-nav a:hover {
  color: var(--ink);
  background: #F7F7F5;
}
.org-nav a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.org-nav a.active {
  background: var(--green-pale);
  color: var(--green-deep);
  font-weight: 600;
}

/* ── Shared Card ── */
.org-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ── Shared Buttons ── */
.org-btn {
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font-semibold);
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
}
.org-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.org-btn-primary {
  background: var(--green);
  color: #fff;
}
.org-btn-primary:hover { background: var(--green-deep); }
.org-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.org-btn-outline {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
}
.org-btn-outline:hover { background: var(--surface); }
.org-btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
}
.org-btn-ghost:hover { color: var(--ink); background: var(--surface); }
.org-btn-danger {
  background: #fff;
  color: #A33A3A;
  border: 1px solid rgba(190,64,64,.25);
}
.org-btn-danger:hover { background: #FCECEC; }

/* ── Shared Badges ── */
.org-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.org-badge.green  { background: var(--green-pale); color: var(--green-deep); }
.org-badge.amber  { background: #FFF8E7; color: #B8860B; }
.org-badge.red    { background: #FCECEC; color: #A33A3A; }
.org-badge.blue   { background: #E8F0FE; color: #1A56DB; }
.org-badge.grey   { background: #EFEFEA; color: var(--muted); }

/* ── Shared Alert ── */
.org-alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.org-alert.error {
  background: #FCECEC;
  color: #A33A3A;
  border: 1px solid rgba(190,64,64,.25);
}
.org-alert.success {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #6EE7B7;
}
.org-alert.warning {
  background: #FFF8E7;
  color: #92400E;
  border: 1px solid rgba(230,168,23,.25);
}

/* ── Shared Empty State ── */
.org-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 13px;
}
.org-empty i {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
  color: var(--faint);
}

/* ── Shared Page Header ── */
.org-header {
  background: linear-gradient(135deg, #5BA04A, #447C37);
  color: #fff;
  border-radius: 22px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.org-header h1 { font-size: 22px; font-weight: 600; margin: 0; }
.org-header p { font-size: 13px; opacity: .85; margin: 3px 0 0; }

/* ── Common resets for org-admin pages ── */
.org-admin .new-menu { visibility: hidden; }
.org-admin .left_menu_side { margin-top: 0; }

/* ═══ Responsive ═══ */
@media (max-width: 1023px) {
  .org-content { top: 0; }
  .org-nav {
    gap: 2px;
    padding: 4px;
    border-radius: 12px;
  }
  .org-nav a {
    padding: 6px 12px;
    font-size: 11px;
    border-radius: 8px;
    min-height: 40px;
  }
  .org-header { padding: 18px 20px; border-radius: 16px; }
  .org-header h1 { font-size: 18px; }
}

@media (max-width: 767px) {
  .org-nav a {
    padding: 6px 10px;
    font-size: 11px;
    border-radius: 8px;
    min-height: 38px;
  }
  .org-header { padding: 16px 18px; border-radius: 14px; margin-bottom: 14px; }
  .org-header h1 { font-size: 17px; }
  .org-btn { min-height: 44px; width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .org-nav a {
    padding: 5px 8px;
    font-size: 10px;
    border-radius: 6px;
    min-height: 36px;
  }
  .org-header { padding: 14px 16px; border-radius: 12px; }
  .org-header h1 { font-size: 16px; }
  .org-header p { font-size: 11px; }
}

/* ═══════════════════════════════════════════════
   Mobile (≤768px): Organisation menu as a bottom sheet
   Mirrors the My Notices mobile pattern — the desktop tab bar
   (.org-nav) is replaced by a slide-up sheet with the same
   items, spacing, radius, shadow and overlay behaviour.
   Scoped to .org-admin so other pages using the same
   .top_nav_sticky.right_dropdown container are unaffected.
   ═══════════════════════════════════════════════ */
body.org-sheet-open { overflow: hidden; }

@media (max-width: 768px) {
  .org-admin .top_nav_sticky.right_dropdown {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 74vh;
    overflow-y: auto;
    padding: 0 0 calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .18);
    background-color: #fff;
    display: block;
    visibility: hidden;
    transform: translateY(105%);
    transition: transform .28s ease, visibility 0s linear .28s;
    z-index: 1250; /* above the fixed bottom navigation (z-index 3) */
  }
  .org-admin .top_nav_sticky.right_dropdown.open {
    visibility: visible;
    transform: translateY(0);
    transition: transform .28s ease;
  }
  /* Drag handle */
  .org-admin .top_nav_sticky.right_dropdown .right_col_two::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: #ddd;
    margin: 10px auto 2px;
  }
  /* Sheet heading */
  .org-admin .top_nav_sticky.right_dropdown .right_nav_menu::before {
    content: 'Organisation Menu';
    display: block;
    padding: 10px 20px 8px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
  }
  /* Tab bar becomes a vertical list of full-width rows */
  .org-admin .top_nav_sticky.right_dropdown .org-nav {
    display: block;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
    flex-wrap: wrap;
  }
  .org-admin .top_nav_sticky.right_dropdown .org-nav li { display: block; }
  .org-admin .top_nav_sticky.right_dropdown .org-nav li + li a {
    border-top: 1px solid rgba(0, 0, 0, .06);
  }
  .org-admin .top_nav_sticky.right_dropdown .org-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px; /* touch-friendly */
    padding: 12px 20px;
    border-radius: 0;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    white-space: normal;
    -webkit-tap-highlight-color: transparent;
  }
  .org-admin .top_nav_sticky.right_dropdown .org-nav a:hover { background: #F7F7F5; }
  .org-admin .top_nav_sticky.right_dropdown .org-nav a.active {
    background: var(--green-pale, #e8f5e9);
    color: var(--green-deep, #3E7C3B);
    font-weight: 600;
  }
  /* Menu item icons (hidden on desktop by the partial's own rule) */
  .org-admin .top_nav_sticky.right_dropdown .org-nav a i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
    font-size: 16px;
    color: var(--green, #529B50);
  }
  .org-admin .top_nav_sticky.right_dropdown .org-nav a.active i { color: var(--green-deep, #3E7C3B); }

  /* Dimmed overlay behind the sheet (created by the sheet JS) */
  .org-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1240;
    display: none;
  }
  .org-sheet-overlay.show {
    display: block;
    animation: orgSheetFade .25s ease;
  }
}
@keyframes orgSheetFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════
   Dark Mode
   The .org-admin tokens above are light-only, and the global dark theme
   forces every <a> to white with !important — which made the tab-bar
   labels white-on-white and the outline buttons invisible. These
   overrides re-point the tokens at dark values and fix the
   hard-coded surfaces / pastel chips.
   ═══════════════════════════════════════════════ */
body.dark_mode_theme .org-admin {
  --ink: #FFFFFF;
  --text: #E6E5E1;
  --muted: #A9A79F;
  --faint: #9C9A93; /* #8C8A83 only reached 4.15:1 on the #2A2A2A inner surface */
  --surface: #2A2A2A;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --green-pale: rgba(91,160,74,.22);
  --shadow-card: 0 6px 18px rgba(0,0,0,.35);
  --shadow-soft: 0 8px 28px rgba(0,0,0,.45);
}

/* Hard-coded white surfaces → dark card surface */
body.dark_mode_theme .org-admin .org-nav,
body.dark_mode_theme .org-admin .org-card,
body.dark_mode_theme .org-admin .org-btn-outline,
body.dark_mode_theme .org-admin .org-btn-danger,
body.dark_mode_theme .org-admin .dash-metric,
body.dark_mode_theme .org-admin .dash-card {
  background: var(--dark-secondary, #222222);
}

/* Anchor colours the global !important rule would otherwise flatten to white */
body.dark_mode_theme .org-admin .org-nav a {
  color: var(--text) !important;
}
body.dark_mode_theme .org-admin .org-nav a:hover {
  background: #2A2A2A;
  color: #fff !important;
}
body.dark_mode_theme .org-admin .org-nav a.active {
  background: var(--green-pale);
  color: #8BD07A !important;
}
body.dark_mode_theme .org-admin .org-btn-outline {
  color: var(--text) !important;
  border-color: var(--line);
}
body.dark_mode_theme .org-admin .org-btn-ghost {
  color: var(--muted) !important;
}

/* Dashboard hero (light gradient in light mode) */
body.dark_mode_theme .org-admin .dash-hero {
  background: linear-gradient(145deg, #303030, #262626);
  border-color: var(--line);
}

/* Pastel status chips → translucent dark equivalents */
body.dark_mode_theme .org-admin .dash-tag.enabled,
body.dark_mode_theme .org-admin .org-badge.green { color: #8BD07A; }
body.dark_mode_theme .org-admin .dash-tag.disabled,
body.dark_mode_theme .org-admin .org-badge.grey {
  background: #3A3A3A;
  color: var(--muted);
}
body.dark_mode_theme .org-admin .dash-tag.success,
body.dark_mode_theme .org-admin .org-alert.success {
  background: rgba(16,185,129,.16);
  color: #6EE7B7;
}
body.dark_mode_theme .org-admin .dash-tag.warning,
body.dark_mode_theme .org-admin .org-alert.warning,
body.dark_mode_theme .org-admin .org-badge.amber {
  background: rgba(230,168,23,.16);
  color: #F0C05A;
}
body.dark_mode_theme .org-admin .dash-tag.error,
body.dark_mode_theme .org-admin .org-alert.error,
body.dark_mode_theme .org-admin .org-badge.red {
  background: rgba(190,64,64,.20);
  color: #F19999;
}
body.dark_mode_theme .org-admin .org-badge.blue {
  background: rgba(59,130,246,.20);
  color: #93C5FD;
}

/* ── Shared organisation page components ──
   The per-page sets (crm-*, notif-*, prefs-*, comm-*, cap-*, verify-*,
   event*, audit-*, edit-*) already use the .org-admin tokens for most
   surfaces; these rules mop up the hard-coded whites, light hovers and
   pastel status chips. */

/* White surfaces → dark card surface */
body.dark_mode_theme .org-admin :is(
  .crm-card, .crm-metric,
  .notif-header, .notif-card, .notif-tabs a, .prefs-card,
  .comm-header, .comm-card, .comm-tabs a, .comm-modal,
  .cap-card,
  .verify-card, .verify-input, .verify-select,
  .events-header .btn-create, .event-card, .events-empty,
  .audit-filters, .audit-card,
  .edit-topbar, .edit-card, .edit-section-nav a,
  .edit-input, .edit-select, .edit-textarea, .edit-btn-outline
) {
  background: var(--dark-secondary, #222222);
}

/* Light grey surfaces (neutral buttons, table headers/striping) */
body.dark_mode_theme .org-admin :is(
  .notif-item.unread,
  .verify-table thead th, .audit-table th
) {
  background: #2A2A2A;
}

/* Hover feedback */
body.dark_mode_theme .org-admin :is(
  .notif-item:hover, .notif-item.unread:hover,
  .comm-overview-card:hover, .comm-btn-outline:hover,
  .verify-table tbody tr:hover,
  .events-header .btn-create:hover, .event-btn-secondary:hover,
  .audit-btn-outline:hover, .audit-table tr:hover td, .audit-pages a:hover,
  .edit-btn-outline:hover, .health-modal-close:hover
) {
  background: #333333;
}
/* Danger hovers keep their red tint */
body.dark_mode_theme .org-admin :is(.comm-btn-warn:hover, .cap-btn-retry:hover) {
  background: rgba(190,64,64,.22);
}

/* Neutral chips */
body.dark_mode_theme .org-admin :is(
  .notif-icon.capability, .notif-icon.default, .comm-badge.grey,
  .cap-tag.available, .verify-status.default, .event-tag.past-tag,
  .audit-badge.grey, .edit-publish-badge.draft
) {
  background: #3A3A3A;
  color: var(--muted);
}

/* Green chips */
body.dark_mode_theme .org-admin :is(
  .notif-icon.follower, .notif-success,
  .verify-status.success, .verify-tag.success, .edit-publish-badge.active
) {
  background: rgba(16,185,129,.16);
  color: #6EE7B7;
}

/* Amber chips */
body.dark_mode_theme .org-admin :is(
  .notif-icon.event, .comm-attention, .comm-badge.amber, .cap-tag.pending,
  .cap-alert.warning, .verify-status.warning, .verify-tag.warning,
  .verify-alert.warning, .audit-badge.amber, .health-note,
  .edit-publish-checklist.incomplete
) {
  background: rgba(230,168,23,.16);
  color: #F0C05A;
}

/* Red / pink chips and danger text */
body.dark_mode_theme .org-admin :is(
  .notif-icon.verification, .cap-tag.rejected,
  .verify-status.error, .verify-tag.error, .edit-alert.error
) {
  background: rgba(190,64,64,.20);
  color: #F19999;
}
body.dark_mode_theme .org-admin :is(.comm-btn-warn, .cap-btn-retry, .edit-req) {
  color: #F19999 !important;
}

/* Blue / info chips */
body.dark_mode_theme .org-admin :is(
  .crm-badge-sm.blue, .notif-icon.campaign, .notif-icon.message,
  .comm-badge.blue, .event-tag.online, .audit-badge.blue,
  .edit-publish-badge.pending
) {
  background: rgba(59,130,246,.20);
  color: #93C5FD;
}

/* Inline-styled elements (page markup / JS output) that would otherwise
   keep a light background or a dark-on-dark colour. */
body.dark_mode_theme .org-admin .event-tag[style] {
  background: #3A3A3A !important;
  color: var(--muted) !important;
}
body.dark_mode_theme .org-admin .edit-publish-checklist > strong {
  color: #F0C05A !important;
}
body.dark_mode_theme .org-admin .edit-publish-checklist.ready > strong {
  color: #6EE7B7 !important;
}
body.dark_mode_theme .org-admin .verify-label > span {
  color: #F19999 !important;
}
body.dark_mode_theme .org-admin #invite_status span {
  color: #F19999 !important;
}
/* Community overview tiles set an inline icon colour each; brighten the set
   so the blue/purple/red ones stay legible on the dark tile. */
body.dark_mode_theme .org-admin .comm-overview-card > i {
  filter: brightness(1.7) saturate(1.05);
}

/* ── My Organisations (.orgs-wrap) ──
   That page declares its own token block and is not wrapped in .org-admin,
   so it needs its own scope. */
body.dark_mode_theme .orgs-wrap {
  --ink: #FFFFFF;
  --text: #E6E5E1;
  --muted: #A9A79F;
  --faint: #9C9A93;
  --line: rgba(255,255,255,.10);
  --green-pale: rgba(91,160,74,.22);
  --green-deep: #8BD07A;
  --shadow-card: 0 6px 18px rgba(0,0,0,.35);
  --shadow-soft: 0 8px 28px rgba(0,0,0,.45);
}
body.dark_mode_theme .orgs-wrap :is(.org-card, .orgs-empty) {
  background: #222222;
}
body.dark_mode_theme .orgs-wrap .orgs-header .btn-create {
  background: #2A2A2A;
  color: #8BD07A !important;
}
body.dark_mode_theme .orgs-wrap .orgs-header .btn-create:hover {
  background: #333333;
}
/* Pastel role/status tags */
body.dark_mode_theme .orgs-wrap :is(.org-tag.role, .org-tag.success) {
  background: rgba(16,185,129,.16);
  color: #6EE7B7;
}
body.dark_mode_theme .orgs-wrap .org-tag.warning {
  background: rgba(230,168,23,.16);
  color: #F0C05A;
}
body.dark_mode_theme .orgs-wrap .org-tag.error {
  background: rgba(190,64,64,.20);
  color: #F19999;
}
body.dark_mode_theme .orgs-wrap .org-tag.grey {
  background: #3A3A3A;
  color: var(--muted);
}
/* Brand-green surfaces keep white text */
body.dark_mode_theme .orgs-wrap .org-btn-green {
  background: #447C37;
}
body.dark_mode_theme .orgs-wrap .org-btn-green:hover {
  background: #3B6B2D;
}
body.dark_mode_theme .orgs-wrap :is(.org-logo-placeholder, .orgs-empty-icon) {
  background: rgba(91,160,74,.22);
  color: #8BD07A;
}

/* Mobile bottom sheet (same breakpoint as its layout rules) */
@media (max-width: 768px) {
  body.dark_mode_theme .org-admin .top_nav_sticky.right_dropdown {
    background-color: var(--dark-secondary, #222222);
    box-shadow: 0 -8px 30px rgba(0,0,0,.55);
  }
  body.dark_mode_theme .org-admin .top_nav_sticky.right_dropdown .right_col_two::before {
    background: #4A4A4A;
  }
  body.dark_mode_theme .org-admin .top_nav_sticky.right_dropdown .right_nav_menu::before {
    color: #FFFFFF;
  }
  body.dark_mode_theme .org-admin .top_nav_sticky.right_dropdown .org-nav li + li a {
    border-top-color: rgba(255,255,255,.08);
  }
  body.dark_mode_theme .org-admin .top_nav_sticky.right_dropdown .org-nav a {
    color: var(--text) !important;
  }
  body.dark_mode_theme .org-admin .top_nav_sticky.right_dropdown .org-nav a:hover {
    background: #2A2A2A;
    color: #fff !important;
  }
  body.dark_mode_theme .org-admin .top_nav_sticky.right_dropdown .org-nav a.active {
    background: var(--green-pale);
    color: #8BD07A !important;
  }
}