/* Advisor Portal layout */
:root {
  --p-bg: #f6f6f4;
  --p-surface: #ffffff;
  --p-surface-2: #fafaf7;
  --p-border: #eeeeee;
  --p-hairline: #f0f0f0;
  --p-text: #1a1a1a;
  --p-muted: #777777;
  --p-faint: #999999;
  --p-appbar: #ffffff;
  --brand-teal: #084563;
  --appbar-h: 60px;
}
html[data-theme="dark"] {
  --p-bg: #0f141a;
  --p-surface: #1a212b;
  --p-surface-2: #151b23;
  --p-border: #2a333f;
  --p-hairline: #232c37;
  --p-text: #e6eaef;
  --p-muted: #9aa6b2;
  --p-faint: #7d8794;
  --p-appbar: #131a22;
}
.portal-body { display: flex; flex-direction: column; min-height: 100vh; margin: 0;
  background: var(--p-bg); color: var(--p-text);
  font-family: 'Inter', 'Noto Sans Khmer', system-ui, sans-serif; }

/* Full-width top bar spans over the sidebar; the row below holds nav + main. */
.portal-shell { display: flex; flex: 1; min-height: 0; }

.portal-sidebar { width: 248px; background: #084563; color: rgba(255,255,255,0.85); padding: 24px 18px;
  display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: var(--appbar-h); align-self: flex-start;
  height: calc(100vh - var(--appbar-h)); overflow-y: auto; }
.portal-brand { color: #fff; font-size: 18px; font-weight: 700; text-decoration: none;
  letter-spacing: 0.3px; padding: 4px 0 12px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.portal-brand .accent { color: #bfe0f0; }
.portal-me { text-align: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
.portal-me-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  background: rgba(255,255,255,0.1); margin-bottom: 8px; border: 2px solid rgba(255,255,255,0.6); }
.portal-me-name { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.portal-me-availability { margin-top: 6px; }

.portal-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.portal-nav a { color: rgba(255,255,255,0.9); text-decoration: none; padding: 10px 12px;
  font-size: 14px; border-radius: 8px; transition: background 0.15s, color 0.15s; }
.portal-nav a:hover { background: rgba(255,255,255,0.15); color: #fff; }
.portal-nav a.active { background: rgba(255,255,255,0.18); color: #fff; }

.portal-logout button { width: 100%; background: transparent; color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.3); padding: 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; transition: all 0.15s; }
.portal-logout button:hover { color: #fff; border-color: rgba(255,255,255,0.6); }

.portal-main { flex: 1; padding: 32px 40px; max-width: 1120px; }
.portal-flash { background: rgba(29,158,117,0.12); color: #1D9E75;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }

/* Dashboard */
.dash-greeting { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.dash-sub { color: var(--p-muted); margin-bottom: 24px; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 28px; }
.dash-stat { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px; padding: 18px; }
.dash-stat-label { font-size: 11px; color: var(--p-faint); text-transform: uppercase; letter-spacing: 1.2px; }
.dash-stat-value { font-size: 22px; font-weight: 700; margin-top: 6px; color: var(--p-text); }
.dash-stat-value.gold { color: #C9A84C; }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px; padding: 20px; }
.dash-card-title { font-size: 13px; font-weight: 600; color: var(--p-muted);
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; }
.dash-list { list-style: none; padding: 0; margin: 0; }
.dash-list li { padding: 10px 0; border-bottom: 1px solid var(--p-hairline); font-size: 14px; }
.dash-list li:last-child { border-bottom: none; }
.dash-empty { color: var(--p-faint); font-size: 13px; padding: 12px 0; }

/* Forms shared */
.portal-form { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px; padding: 28px; max-width: 720px; }
.portal-form h1 { font-size: 22px; margin: 0 0 4px; }
.portal-form .sub { color: var(--p-muted); font-size: 14px; margin-bottom: 24px; }

/* Library */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px; margin-top: 14px; }
.lib-card { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px;
  padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.lib-icon { font-size: 28px; }
.lib-title { font-size: 15px; font-weight: 600; }
.lib-desc { font-size: 13px; color: var(--p-muted); flex: 1; }
.lib-cta { margin-top: 8px; }
.lib-cta a { color: #C9A84C; text-decoration: none; font-size: 13px; font-weight: 600; }
.lib-cta .pending { color: #999; font-size: 12px; }

/* Messages */
.msg-thread { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px;
  padding: 18px; max-height: 520px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 10px; }
.msg-empty { color: var(--p-faint); text-align: center; padding: 40px 0; font-size: 13px; }
.msg-row { display: flex; }
.msg-row.from-advisor { justify-content: flex-end; }
.msg-bubble { max-width: 70%; padding: 10px 14px; border-radius: 12px; font-size: 14px;
  line-height: 1.5; }
.msg-row.from-advisor .msg-bubble { background: #C9A84C; color: #fff; border-bottom-right-radius: 4px; }
.msg-row.from-admin .msg-bubble { background: #f1f1f1; color: #222; border-bottom-left-radius: 4px; }
.msg-meta { font-size: 11px; color: #999; margin-top: 4px; }

.msg-compose { margin-top: 14px; background: var(--p-surface); border: 1px solid var(--p-border);
  border-radius: 12px; padding: 14px; display: flex; gap: 10px; align-items: flex-end; }
.msg-compose textarea { flex: 1; border: 1px solid var(--p-border); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: inherit; resize: vertical;
  min-height: 44px; background: var(--p-surface); color: var(--p-text); }
.msg-compose button { background: #C9A84C; color: #fff; border: 0; padding: 12px 22px;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; }
.msg-compose button:hover { background: #b8943e; }

/* Login */
.portal-login-wrap { width: 100%; display: flex; align-items: center; justify-content: center;
  padding: 60px 20px; }
.portal-login-card { background: var(--p-surface); border-radius: 16px; padding: 36px;
  max-width: 420px; width: 100%; border: 1px solid var(--p-border);
  box-shadow: 0 6px 24px rgba(0,0,0,0.04); }
.portal-login-card h1 { font-size: 22px; margin: 0 0 4px; }
.portal-login-card .sub { color: var(--p-muted); font-size: 13px; margin-bottom: 24px; }

/* Mobile top bar + off-canvas sidebar */
.portal-topbar { display: none; }
.portal-backdrop { display: none; }

@media (max-width: 768px) {
  .portal-body { flex-direction: column; }

  .portal-topbar {
    display: flex; align-items: center; gap: 12px;
    background: #084563; color: #fff; padding: 10px 16px;
    position: sticky; top: 0; z-index: 40;
  }
  .portal-hamburger {
    background: transparent; border: 0; cursor: pointer; padding: 0;
    width: 42px; height: 42px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px; border-radius: 8px;
    flex: 0 0 auto;
  }
  .portal-hamburger:hover { background: rgba(255,255,255,0.15); }
  .portal-hamburger span { display: block; width: 22px; height: 2px;
    background: #fff; border-radius: 2px; }
  .portal-topbar-title { font-size: 16px; font-weight: 700; color: #fff;
    text-decoration: none; letter-spacing: 0.3px; }
  .portal-topbar-title .accent { color: #bfe0f0; }

  .portal-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 264px; max-width: 84vw; height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .portal-sidebar.open { transform: translateX(0);
    box-shadow: 2px 0 24px rgba(0,0,0,0.4); }

  .portal-backdrop {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .portal-backdrop.open { opacity: 1; visibility: visible; }

  .portal-main { padding: 20px 16px; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   User-portal app bar (top bar) — search · language · account
   Added 2026-07-16. Sits over the main content, sidebar stays.
   ═══════════════════════════════════════════════════════════ */
.portal-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.portal-appbar {
  display: flex; align-items: center; gap: 14px;
  min-height: var(--appbar-h); padding: 8px 20px 8px 0; background: var(--p-appbar);
  border-bottom: 1px solid var(--p-border);
  position: sticky; top: 0; z-index: 50;
}
/* Brand centered over the left-nav column (same width as the sidebar). */
.portal-appbar-brand { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto;
  width: 248px; color: var(--p-text); font-weight: 700; font-size: 17px;
  text-decoration: none; letter-spacing: 0.2px; }
.portal-appbar-brand img { height: 36px; width: auto; display: block; }
.portal-appbar-brand .accent { color: var(--brand-teal); }
@media (max-width: 900px) { .portal-appbar-brand { width: auto; } }
.portal-appbar-ham {
  display: none; background: transparent; border: 0; cursor: pointer;
  width: 40px; height: 40px; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; border-radius: 8px; flex: 0 0 auto;
}
.portal-appbar-ham:hover { background: rgba(127,127,127,0.12); }
.portal-appbar-ham span { display: block; width: 22px; height: 2px; background: var(--p-text); border-radius: 2px; }

/* Public site menu inside the top bar (Home · Services · site_menu groups) */
.portal-appbar-nav { display: flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; }
.portal-appbar-nav > a, .pnav-toggle {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--p-text); text-decoration: none; background: transparent; border: 0;
  cursor: pointer; font-family: inherit; }
.portal-appbar-nav > a:hover, .pnav-toggle:hover { background: rgba(127,127,127,0.12); }
.pnav-dd { position: relative; }
.pnav-caret { width: 10px; height: 10px; opacity: .7; transition: transform .15s; flex: 0 0 auto; }
.pnav-dd[data-open="true"] .pnav-caret { transform: rotate(180deg); }
.pnav-dd[data-open="true"] .pnav-toggle { background: rgba(127,127,127,0.12); }
/* Anchored right so panels never run off the edge (the nav sits on the right). */
.pnav-panel {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 236px;
  background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18); padding: 8px; z-index: 60; }
.pnav-panel a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  color: var(--p-text); text-decoration: none; line-height: 1.3; white-space: nowrap; }
.pnav-panel a:hover { background: rgba(127,127,127,0.1); }
.pnav-group { padding: 6px 12px 2px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--p-faint); }
/* Below this the bar gets crowded — the avatar menu still has "Open Bodhi Center". */
@media (max-width: 1180px) { .portal-appbar-nav { display: none; } }

/* Search (sits on the right, next to the language pill) */
.portal-search { flex: 0 1 200px; max-width: 200px; position: relative; }
.portal-search input {
  width: 100%; padding: 9px 14px 9px 40px; border-radius: 22px;
  border: 1px solid var(--p-border); background: var(--p-surface-2);
  color: var(--p-text); font-size: 14px; font-family: inherit;
  transition: border-color .15s, background .15s;
}
.portal-search input:focus { outline: none; border-color: var(--brand-teal); background: var(--p-surface); }
.portal-search input::placeholder { color: var(--p-faint); }
.portal-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--p-faint); pointer-events: none; }

.portal-appbar-spacer { flex: 1; }
.portal-appbar-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* Green language pill (matches AgriCoop) */
.portal-lang { display: inline-flex; align-items: center; gap: 2px;
  background: #1d9e75; border-radius: 999px; padding: 3px 4px 3px 10px; }
.portal-lang .globe { width: 16px; height: 16px; stroke: #fff; margin-right: 4px; flex: 0 0 auto; }
.portal-lang form { display: inline; margin: 0; }
.portal-lang a, .portal-lang button, .portal-lang .active {
  display: inline-block; border: 0; background: transparent; cursor: pointer; font-family: inherit;
  color: rgba(255,255,255,0.9); font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; line-height: 1; text-decoration: none; }
.portal-lang .active { background: #fff; color: #0c6b4f; cursor: default; }

/* Account avatar + dropdown */
.portal-user { position: relative; }
.portal-user-btn { background: transparent; border: 2px solid transparent; padding: 0; cursor: pointer;
  border-radius: 50%; line-height: 0; }
.portal-user-btn:hover, .portal-user[data-open="true"] .portal-user-btn { border-color: var(--brand-teal); }
.portal-user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block;
  background: linear-gradient(135deg,#0d6a8f 0%,#084563 100%); color: #fff;
  font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.portal-user-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px;
  background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18); padding: 8px; z-index: 60;
}
.portal-user-menu a, .portal-user-menu button.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--p-text);
  background: transparent; border: 0; cursor: pointer; font-family: inherit; text-decoration: none; }
.portal-user-menu a:hover, .portal-user-menu button.menu-item:hover { background: rgba(127,127,127,0.1); }
.portal-user-menu .menu-icon { width: 18px; height: 18px; stroke: var(--p-muted); flex: 0 0 auto; }
.portal-user-divider { height: 1px; background: var(--p-border); margin: 6px 4px; }

/* Theme toggle (segmented) */
.portal-theme { display: flex; gap: 4px; padding: 6px 4px; }
.portal-theme button {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 8px; border-radius: 8px; border: 1px solid var(--p-border);
  background: var(--p-surface-2); cursor: pointer; color: var(--p-muted); }
.portal-theme button svg { width: 18px; height: 18px; stroke: currentColor; }
.portal-theme button:hover { color: var(--p-text); }
.portal-theme button.active { background: rgba(29,158,117,0.12); border-color: #1d9e75; color: #1d9e75; }

@media (max-width: 768px) {
  .portal-appbar-ham { display: flex; }
  .portal-appbar { padding: 8px 14px; gap: 8px; }
  .portal-search { display: none; }
  .portal-search.mobile-show { display: block; }
}

/* ── Dark-mode fallbacks for inline-styled pages ──────────────
   Many dashboard cards use inline light backgrounds; catch the
   common values so they don't stay white on a dark page. Scoped
   to .portal-main so the teal sidebar/appbar are unaffected. */
html[data-theme="dark"] .portal-main [style*="background:#fff"],
html[data-theme="dark"] .portal-main [style*="background: #fff"],
html[data-theme="dark"] .portal-main [style*="background:#FFF"],
html[data-theme="dark"] .portal-main [style*="background:#fafaf7"],
html[data-theme="dark"] .portal-main [style*="background: #fafaf7"],
html[data-theme="dark"] .portal-main [style*="background:#f6f6f4"],
html[data-theme="dark"] .portal-main [style*="background:#f9f9f7"],
html[data-theme="dark"] .portal-main [style*="background:#f1efe6"],
html[data-theme="dark"] .portal-main [style*="background:#fdf9ee"],
html[data-theme="dark"] .portal-main [style*="background:#fffbea"],
html[data-theme="dark"] .portal-main [style*="background:#f7f7f5"],
html[data-theme="dark"] .portal-main [style*="background:#f5f5f3"] {
  background: var(--p-surface) !important;
}
html[data-theme="dark"] .portal-main [style*="border:1px solid #eee"],
html[data-theme="dark"] .portal-main [style*="border: 1px solid #eee"],
html[data-theme="dark"] .portal-main [style*="border:1px solid #f0"],
html[data-theme="dark"] .portal-main [style*="border-color:#eee"] {
  border-color: var(--p-border) !important;
}
html[data-theme="dark"] .portal-main [style*="color:#1a1a1a"],
html[data-theme="dark"] .portal-main [style*="color:#222"],
html[data-theme="dark"] .portal-main [style*="color: #222"],
html[data-theme="dark"] .portal-main [style*="color:#333"],
html[data-theme="dark"] .portal-main [style*="color: #333"],
html[data-theme="dark"] .portal-main [style*="color:#444"],
html[data-theme="dark"] .portal-main [style*="color:#555"] {
  color: var(--p-text) !important;
}
html[data-theme="dark"] .portal-main h1,
html[data-theme="dark"] .portal-main h2,
html[data-theme="dark"] .portal-main h3,
html[data-theme="dark"] .portal-main .dash-greeting { color: var(--p-text); }
html[data-theme="dark"] .portal-search input { background: var(--p-surface); }

/* Light gradient panels (finish-setup nudge, Momentum empty state, …) stay
   bright while their text is forced light — darken the panel instead. */
html[data-theme="dark"] .portal-main [style*="background:linear-gradient(135deg,#fffbea"],
html[data-theme="dark"] .portal-main [style*="background:linear-gradient(135deg,#fffdf6"],
html[data-theme="dark"] .portal-main [style*="background:linear-gradient(135deg,#fff8e6"] {
  background: var(--p-surface) !important;
}
/* Pale-gold borders on those panels read as glowing frames on dark. */
html[data-theme="dark"] .portal-main [style*="border:1px solid #f0e1a8"],
html[data-theme="dark"] .portal-main [style*="border: 1px solid #f0e1a8"] {
  border-color: #3f3a28 !important;
}
/* Mid-grey inline text: too dim against dark surfaces. */
html[data-theme="dark"] .portal-main [style*="color:#666"],
html[data-theme="dark"] .portal-main [style*="color: #666"] {
  color: var(--p-muted) !important;
}
html[data-theme="dark"] .portal-main [style*="color:#888"],
html[data-theme="dark"] .portal-main [style*="color: #888"],
html[data-theme="dark"] .portal-main [style*="color:#999"],
html[data-theme="dark"] .portal-main [style*="color: #999"] {
  color: var(--p-faint) !important;
}
/* Dark accent colors that vanish on dark: lighten them. */
html[data-theme="dark"] .portal-main [style*="color:#8a6d1a"] { color: #d9bc6a !important; } /* dark-gold labels */
html[data-theme="dark"] .portal-main [style*="color:#6a4ca8"] { color: #a78bdb !important; } /* millionaire purple */
html[data-theme="dark"] .portal-main [style*="color:#2e7d32"] { color: #5fbf6f !important; } /* completed green */
html[data-theme="dark"] .portal-main [style*="color:#1f9d55"] { color: #3fbf78 !important; } /* mark-done green */
html[data-theme="dark"] .portal-main [style*="color:#c0392b"] { color: #e57368 !important; } /* at-risk / deadline red */