/*
 * Farm Ascend — Portal Design System
 * Derived from the DK Portal `p-` design system, with the agri green palette folded
 * in as the DEFAULT accent and Ascend gold (#E2AC4B) as the secondary accent.
 * Dark theme is the default (:root); .theme-light flips the tokens.
 */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Base surfaces */
  --dk-surface-0: #0b0c0f;
  --dk-surface-1: #101218;
  --dk-surface-2: #151826;
  --dk-surface-border: rgba(255, 255, 255, 0.10);
  --dk-surface-border-strong: rgba(255, 255, 255, 0.16);
  --dk-shadow-md: 0 18px 45px -20px rgba(0, 0, 0, 0.75);

  /* Primary accent — Ascend green (folded in from DK's .industry-agri mode) */
  --dk-accent: #22c55e;
  --dk-accent-hover: #4ade80;
  --dk-accent-soft: rgba(34, 197, 94, 0.12);
  --dk-focus-ring: 0 0 0 0.22rem rgba(34, 197, 94, 0.25);

  /* Secondary accent — Ascend gold */
  --dk-gold: #e2ac4b;
  --dk-gold-hover: #f0c26e;
  --dk-gold-soft: rgba(226, 172, 75, 0.12);

  --dk-warning: #ffc107;
  --dk-darker-bg: var(--dk-surface-0);

  /* Text */
  --dk-text-primary: #f4f6fb;
  --dk-text-secondary: rgba(244, 246, 251, 0.88);
  --dk-text-muted: rgba(244, 246, 251, 0.72);
  --dk-text-subtle: rgba(244, 246, 251, 0.60);

  /* Sidebar */
  --sidebar-width: 250px;
  --sidebar-width-collapsed: 78px;
  --sidebar-bg: linear-gradient(135deg, var(--dk-surface-0) 0%, var(--dk-surface-1) 60%, var(--dk-surface-0) 100%);

  /* p- surfaces */
  --p-bg:             #0c0d11;
  --p-surface:        #111318;
  --p-surface-raised: #161920;
  --p-border:         rgba(255, 255, 255, 0.07);
  --p-border-hover:   rgba(255, 255, 255, 0.14);

  /* p- card */
  --p-card-bg:        var(--p-surface);
  --p-card-bg-hover:  var(--p-surface-raised);
  --p-card-border:    var(--p-border);
  --p-card-radius:    0.875rem;
  --p-card-shadow:    0 4px 24px rgba(0, 0, 0, 0.45);

  /* Section label */
  --p-label-color:    rgba(255, 255, 255, 0.45);
  --p-label-size:     0.6rem;

  /* Status palette */
  --p-green:   #2ecc71;  --p-green-rgb:   46,  204, 113;
  --p-red:     #e74c3c;  --p-red-rgb:     231,  76,  60;
  --p-amber:   #f39c12;  --p-amber-rgb:   243, 156,  18;
  --p-blue:    #5b8dee;  --p-blue-rgb:     91, 141, 238;
  --p-teal:    #1abc9c;  --p-teal-rgb:     26, 188, 156;
  --p-purple:  #9b59b6;  --p-purple-rgb:  155,  89, 182;
  --p-gold:    var(--dk-gold);      /* Ascend gold */
  --p-gold-text: var(--p-gold);     /* darkened in light mode for contrast */
  --p-accent:  var(--dk-accent);    /* Ascend green */
  --p-accent-rgb: 34, 197, 94;

  /* Text ramp */
  --p-text-strong: #ffffff;
  --p-text:        rgba(255, 255, 255, 0.82);
  --p-text-muted:  rgba(255, 255, 255, 0.70);
  --p-text-dim:    rgba(255, 255, 255, 0.55);
  --p-text-faint:  rgba(255, 255, 255, 0.42);
  --p-text-quiet:  rgba(255, 255, 255, 0.32);
  --p-text-ghost:  rgba(255, 255, 255, 0.22);
  --p-text-trace:  rgba(255, 255, 255, 0.12);

  /* Hairlines & subtle fills */
  --p-line:        rgba(255, 255, 255, 0.08);
  --p-line-soft:   rgba(255, 255, 255, 0.04);
  --p-fill:        rgba(255, 255, 255, 0.04);
  --p-fill-hover:  rgba(255, 255, 255, 0.08);

  --p-transition: 160ms ease;
}

/* ── Base ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--dk-darker-bg);
  color: var(--dk-text-primary);
  margin: 0;
  overflow-x: hidden;
}

html, body { height: 100%; background: var(--dk-darker-bg); }

.page, #app, .layout-root, .main-fa, .content-fa {
  background: var(--dk-darker-bg);
  color: var(--dk-text-primary);
}

p, span, div, li, td, th, label { color: var(--dk-text-secondary); }

h1, h2, h3, h4, h5, h6 { color: var(--dk-text-primary); font-weight: 600; }

small, .small, .text-muted { color: var(--dk-text-muted) !important; }

a { color: var(--dk-accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--dk-accent-hover); text-decoration: underline; }

/* ── Layout root ────────────────────────────────────────────────────── */
.layout-root {
  display: flex;
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.layout-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: var(--sidebar-width);
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 100vh;
}

.layout-root.sidebar-collapsed .layout-main {
  margin-left: var(--sidebar-width-collapsed);
}

@media (max-width: 991.98px) {
  .layout-main { margin-left: 0 !important; }
}

.main-fa { flex: 1; width: 100%; padding: 0; }

.content-fa {
  width: 100%;
  max-width: 100%;
  padding: 1.5rem;
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.topbar-fa {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 56px;
  padding: 0 1.25rem;
  background: var(--dk-surface-1);
  border-bottom: 1px solid var(--dk-surface-border);
}

.topbar-crumb { display: flex; align-items: center; gap: .5rem; min-width: 0; color: var(--dk-text-primary); font-weight: 600; font-size: .95rem; }
.topbar-crumb-icon { color: var(--dk-accent); font-size: 1.05rem; flex-shrink: 0; }
.topbar-crumb-group { color: var(--dk-text-muted); font-weight: 500; white-space: nowrap; }
.topbar-crumb-sep { color: var(--dk-text-subtle); font-size: .7rem; }
.topbar-crumb-page { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

.topbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,.05); border: 1px solid var(--dk-surface-border); border-radius: .5rem; color: var(--dk-text-muted); cursor: pointer; transition: background .15s, color .15s; }
.topbar-icon-btn:hover { color: var(--dk-gold); background: rgba(255,255,255,.08); }

.topbar-user { position: relative; }
.topbar-user-btn { display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.05); border: 1px solid var(--dk-surface-border); border-radius: .6rem; color: var(--dk-text-primary); padding: .3rem .6rem; cursor: pointer; }
.topbar-user-btn .bi-person-circle { font-size: 1.3rem; color: var(--dk-accent); }
.topbar-user-info { flex-direction: column; line-height: 1.1; text-align: left; }
.topbar-user-info strong { font-size: .78rem; }
.topbar-user-info small { font-size: .68rem; color: var(--dk-text-muted); }
.topbar-user-menu { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 200px; background: var(--dk-surface-2); border: 1px solid var(--dk-surface-border); border-radius: .6rem; box-shadow: var(--dk-shadow-md); padding: .35rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 1040; }
.topbar-user.open .topbar-user-menu { opacity: 1; visibility: visible; transform: none; }
.topbar-user.open { z-index: 1051; }
.topbar-user-item { display: flex; align-items: center; gap: .6rem; width: 100%; background: transparent; border: 0; color: var(--dk-text-secondary); text-decoration: none; padding: .5rem .6rem; border-radius: .45rem; font-size: .85rem; cursor: pointer; }
.topbar-user-item:hover { background: rgba(255,255,255,.06); color: var(--dk-text-primary); }

.topbar-backdrop { position: fixed; inset: 0; z-index: 1030; background: transparent; }

/* ── Top-bar dropdown menus (Reports / Configure) — ported from DK .topbar-config ── */
.topbar-config { position: relative; }
.topbar-config-btn { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.05); border: 1px solid var(--dk-surface-border); border-radius: .6rem; color: var(--dk-text-secondary); padding: .35rem .7rem; font-size: .85rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.topbar-config-btn:hover { color: var(--dk-text-primary); background: rgba(255,255,255,.08); }
.topbar-config.open .topbar-config-btn { color: var(--dk-accent); border-color: var(--dk-accent); background: var(--dk-accent-soft); }
.topbar-config-caret { font-size: .7rem; transition: transform .15s; }
.topbar-config.open .topbar-config-caret { transform: rotate(180deg); }

.topbar-config-menu { position: absolute; left: 0; top: calc(100% + .4rem); display: grid; grid-template-columns: repeat(3, minmax(158px, 1fr)); gap: .35rem 1.5rem; min-width: 560px; max-width: min(720px, calc(100vw - 2.5rem)); background: var(--dk-surface-2); border: 1px solid var(--dk-surface-border); border-radius: .6rem; box-shadow: var(--dk-shadow-md); padding: .85rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 1040; }
.topbar-config.open { z-index: 1051; }
.topbar-config.open .topbar-config-menu { opacity: 1; visibility: visible; transform: none; }

.topbar-config-col { min-width: 0; }
.topbar-config-heading { padding: .3rem .5rem .25rem; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-text-subtle); }
.topbar-config-item { display: flex; align-items: center; gap: .55rem; padding: .38rem .5rem; border-radius: .45rem; color: var(--dk-text-secondary); text-decoration: none; font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-config-item:hover { background: rgba(255,255,255,.06); color: var(--dk-text-primary); text-decoration: none; }
.topbar-config-item.active { background: var(--dk-accent-soft); color: var(--dk-accent); }
.topbar-config-item .bi { font-size: .9rem; flex-shrink: 0; }

.theme-light .topbar-config-btn { background: #fff; border-color: var(--dk-surface-border); color: var(--dk-text-secondary); }
.theme-light .topbar-config-btn:hover { color: var(--dk-text-primary); }
.theme-light .topbar-config.open .topbar-config-btn { background: var(--dk-accent-soft); color: var(--dk-accent); }
.theme-light .topbar-config-menu { background: #fff; border-color: var(--dk-surface-border); }
.theme-light .topbar-config-heading { color: var(--dk-text-muted); }
.theme-light .topbar-config-item { color: var(--dk-text-secondary); }
.theme-light .topbar-config-item:hover { background: rgba(0,0,0,.05); color: var(--dk-text-primary); }

@media (max-width: 991.98px) {
  .topbar-config-menu { grid-template-columns: repeat(2, minmax(140px, 1fr)) !important; min-width: 320px !important; }
}
@media (max-width: 575.98px) {
  .topbar-config-menu { grid-template-columns: 1fr !important; min-width: 220px !important; }
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.sidebar-fa {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--dk-surface-border);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  transition: width .25s cubic-bezier(.4, 0, .2, 1);
}

.sidebar-fa.collapsed { width: var(--sidebar-width-collapsed); }

.sidebar-fa .sidebar-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Brand */
.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: .85rem .85rem .7rem .85rem; position: relative; }
.sidebar-brand::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 0; height: 1px; background: rgba(255,255,255,.06); }
.brand-link { display: flex; align-items: center; gap: .5rem; color: var(--dk-text-primary); text-decoration: none; font-weight: 600; font-size: .95rem; letter-spacing: .3px; }
.brand-link:hover { color: var(--dk-accent); text-decoration: none; }
.brand-mark { font-size: 1.3rem; color: var(--dk-accent); }
.sidebar-fa.collapsed .brand-mark { font-size: 1.15rem; }
.brand-mark-img { width: 24px; height: 24px; }
.sidebar-fa.collapsed .brand-mark-img { width: 21px; height: 21px; }
.sidebar-collapse-toggle { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--dk-text-muted); padding: .35rem .45rem; border-radius: .4rem; cursor: pointer; transition: background .15s, color .15s; margin-left: auto; }
.sidebar-collapse-toggle:hover { background: rgba(255,255,255,.08); color: var(--dk-accent); }
.sidebar-close { background: transparent; border: none; color: var(--dk-text-muted); margin-left: auto; font-size: 1rem; display: none; }
.sidebar-close:hover { color: var(--dk-accent); }

/* Nav */
.sidebar-nav { padding: .65rem .6rem 0 .6rem; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.sidebar-link { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; font-size: .82rem; font-weight: 500; color: rgba(248,249,250,.75); background: transparent; border: 0; border-radius: .5rem; text-decoration: none; cursor: pointer; transition: background .15s, color .15s; position: relative; }
.sidebar-link i { font-size: 1rem; width: 20px; text-align: center; opacity: .7; }
.sidebar-link:hover { background: rgba(255,255,255,.05); color: var(--dk-text-primary); text-decoration: none; }
.sidebar-link:hover i { opacity: 1; color: var(--dk-accent); }
.sidebar-link.active { background: var(--dk-accent-soft); color: var(--dk-accent); font-weight: 600; }
.sidebar-link.active i { opacity: 1; color: var(--dk-accent); }
.sidebar-link.has-children { justify-content: flex-start; }
.sidebar-link .caret { margin-left: auto; font-size: .6rem; transition: transform .2s ease; opacity: .4; }
.sidebar-group.open > .sidebar-link .caret { transform: rotate(180deg); opacity: .7; }
.sidebar-group { margin-bottom: .15rem; }

.sidebar-cat { padding: .85rem .75rem .3rem; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-text-subtle); user-select: none; }
.sidebar-fa.collapsed .sidebar-cat { height: 1px; padding: 0; margin: .5rem .6rem; overflow: hidden; color: transparent; background: var(--dk-surface-border); }

.sidebar-empty-section { padding: .35rem .85rem .5rem; }

.sidebar-sub { max-height: 0; overflow: hidden; padding: 0 0 0 .2rem; transition: max-height .25s ease-out, opacity .2s ease-out, padding .2s ease-out; opacity: 0; }
.sidebar-group.open > .sidebar-sub { max-height: 600px; opacity: 1; padding: .15rem 0 .3rem .2rem; transition: max-height .3s ease-in, opacity .2s ease-in, padding .2s ease-in; }
.sidebar-sublink { display: flex; align-items: center; gap: .5rem; padding: .35rem .7rem .35rem 2rem; font-size: .78rem; color: rgba(248,249,250,.6); border-radius: .45rem; text-decoration: none; position: relative; transition: background .15s, color .15s; }
.sidebar-sublink i { font-size: .8rem; width: 16px; text-align: center; opacity: .6; }
.sidebar-sublink:hover { background: rgba(255,255,255,.05); color: var(--dk-text-primary); text-decoration: none; }
.sidebar-sublink:hover i { opacity: 1; color: var(--dk-accent); }
.sidebar-sublink.active { background: var(--dk-accent-soft); color: var(--dk-accent); font-weight: 600; }
.sidebar-sublink.active i { opacity: 1; color: var(--dk-accent); }

.sidebar-spacer { margin-top: .5rem; }

/* Collapsed behavior */
.sidebar-fa.collapsed .brand-text,
.sidebar-fa.collapsed .sidebar-link span,
.sidebar-fa.collapsed .sidebar-sublink span,
.sidebar-fa.collapsed .caret { display: none; }
.sidebar-fa.collapsed .sidebar-link { justify-content: center; padding: .65rem .6rem; }
.sidebar-fa.collapsed .sidebar-sublink { padding-left: 1.05rem; justify-content: center; }
.sidebar-fa.collapsed .sidebar-group { position: relative; }
.sidebar-fa.collapsed .sidebar-nav { overflow: visible; }
.sidebar-fa.collapsed .sidebar-group.open > .sidebar-sub,
.sidebar-fa.collapsed .sidebar-group:hover > .sidebar-sub { display: block; position: absolute; left: 100%; top: 0; max-height: none; opacity: 1; overflow: visible; background: #121212; border: 1px solid rgba(255,255,255,.08); padding: .4rem; border-radius: .5rem; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,.55); z-index: 1090; }
.sidebar-fa.collapsed .sidebar-group.open > .sidebar-sub .sidebar-sublink,
.sidebar-fa.collapsed .sidebar-group:hover > .sidebar-sub .sidebar-sublink { justify-content: flex-start; padding: .35rem .7rem; }
.sidebar-fa.collapsed .sidebar-group.open > .sidebar-sub .sidebar-sublink span,
.sidebar-fa.collapsed .sidebar-group:hover > .sidebar-sub .sidebar-sublink span { display: inline; }
.sidebar-fa.collapsed .sidebar-search { display: none; }

/* Mobile floating toggle */
.sidebar-toggle-floating { position: fixed; bottom: 1.25rem; left: 1.25rem; background: linear-gradient(135deg, var(--dk-accent) 0%, var(--dk-accent-hover) 100%); border: 0; color: #04240f; padding: .85rem .95rem; border-radius: 1rem; font-size: 1.15rem; z-index: 1100; box-shadow: 0 10px 25px -5px rgba(34, 197, 94, .4); display: flex; align-items: center; justify-content: center; transition: .3s; }
.sidebar-toggle-floating:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -8px rgba(34, 197, 94, .55); }

/* Sidebar search */
.sidebar-search { padding: .5rem .7rem; position: relative; flex-shrink: 0; }
.sidebar-search-input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: .45rem; color: var(--dk-text-primary); font-size: .75rem; padding: .4rem 1.8rem .4rem 2rem; outline: none; transition: border-color .2s, background .2s; }
.sidebar-search-input:focus { border-color: rgba(34,197,94,.35); background: rgba(255,255,255,.09); box-shadow: var(--dk-focus-ring); }
.sidebar-search-input::placeholder { color: rgba(255,255,255,.3); }
.sidebar-search-icon { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.3); font-size: .78rem; pointer-events: none; }
.sidebar-search-clear { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: rgba(255,255,255,.35); font-size: .85rem; padding: 0; line-height: 1; cursor: pointer; transition: color .15s; }
.sidebar-search-clear:hover { color: var(--dk-accent); }

/* Mobile - sidebar becomes overlay */
@media (max-width: 991.98px) {
  .sidebar-fa {
    transform: translateX(-100%);
    width: var(--sidebar-width);
    box-shadow: 0 0 0 1px rgba(34,197,94,.05), 0 20px 40px rgba(0,0,0,.75);
    transition: transform 0.35s ease;
  }
  .sidebar-fa.open-mobile { transform: translateX(0); }
  .sidebar-close { display: inline-flex; }
}

/* ── Login page ─────────────────────────────────────────────────────── */
.login-page {
  background: radial-gradient(ellipse at center, #14181c 0%, #060807 100%);
  min-height: 100vh;
}

.fa-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  min-height: calc(100vh - 3rem);
}

.fa-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--p-surface-raised);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3);
  padding: 2.5rem 2.25rem 1.75rem;
  animation: faLoginIn 0.4s ease;
}

@keyframes faLoginIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fa-login-head { text-align: center; margin-bottom: 1.75rem; }

.fa-login-mark {
  font-size: 3rem;
  color: var(--dk-accent);
  display: block;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 0 16px rgba(34, 197, 94, 0.35));
}
.fa-login-mark-img { width: 64px; height: 64px; margin: 0 auto 0.5rem auto; }

.fa-login-title {
  color: var(--dk-gold);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 0.25rem;
}

.fa-login-sub { color: rgba(255, 255, 255, 0.5) !important; font-size: 0.9rem; margin: 0; }

.fa-login-field { margin-bottom: 1.1rem; }

.fa-login-field > label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.fa-login-input-wrap { position: relative; display: flex; align-items: center; }

.fa-login-input-icon {
  position: absolute;
  left: 0.85rem;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.95rem;
  pointer-events: none;
}

.fa-login-input {
  width: 100%;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 0.95rem;
  padding: 0.75rem 0.9rem 0.75rem 2.5rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.fa-login-input::placeholder { color: rgba(255, 255, 255, 0.28); }

.fa-login-input:focus {
  outline: none;
  border-color: var(--dk-accent);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.fa-login-eye {
  position: absolute;
  right: 0.4rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.fa-login-eye:hover { color: var(--dk-accent); }

.fa-login-error-text { display: block; color: var(--p-red); font-size: 0.78rem; margin-top: 0.35rem; }

.fa-login-alert {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.fa-login-alert span { color: inherit !important; }
.fa-login-alert--error { background: rgba(231, 76, 60, 0.1); border: 1px solid rgba(231, 76, 60, 0.3); color: var(--p-red); }
.fa-login-alert--info  { background: rgba(91, 141, 238, 0.1); border: 1px solid rgba(91, 141, 238, 0.3); color: var(--p-blue); }

.fa-login-submit { width: 100%; justify-content: center; padding: 0.8rem; font-size: 0.95rem; margin-top: 0.25rem; }

.fa-login-foot {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(34, 197, 94, 0.15);
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.8rem;
}

.fa-login-foot i { color: var(--dk-accent); margin-right: 0.35rem; }

/* ── p-page ─────────────────────────────────────────────────────────── */
.p-page {
  padding-top: 0.25rem;
  padding-bottom: 3rem;
  background-image: radial-gradient(circle, var(--p-line-soft) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Dashboard hero ─────────────────────────────────────────────────── */
.p-dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--p-card-radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(34, 197, 94, 0.10), transparent 55%),
    var(--p-surface);
  border: 1px solid var(--p-border);
  border-left: 3px solid var(--dk-accent);
}

.p-dash-hero-text { min-width: 0; }

.p-dash-greeting {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--p-text-strong);
  margin: 0 0 0.35rem;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.p-dash-greeting-name {
  color: var(--p-gold-text);
  text-shadow: 0 0 28px rgba(226, 172, 75, 0.35);
}

.p-dash-welcome { margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--p-text-dim) !important; }

.p-dash-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--p-text-dim);
}

.p-dash-meta i { opacity: 0.5; }

.p-scope-pill {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.18);
  color: var(--dk-accent);
  font-size: 0.67rem;
  font-weight: 600;
  padding: 0.1rem 0.55rem;
  border-radius: 20px;
  letter-spacing: 0.2px;
}

@media (max-width: 640px) {
  .p-dash-hero { padding: 1.1rem 1.15rem; }
}

/* ── Section label ──────────────────────────────────────────────────── */
.p-section-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--p-label-size);
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--p-label-color);
  margin-bottom: 0.8rem;
  padding-left: 0.6rem;
  border-left: 2px solid rgba(34, 197, 94, 0.4);
  user-select: none;
}

.p-section-label i { opacity: 0.65; }

.p-section-count {
  background: var(--p-fill-hover);
  color: var(--p-text-quiet);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.05rem 0.45rem;
  border-radius: 20px;
}

/* ── Cards ──────────────────────────────────────────────────────────── */
.p-card {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--p-card-shadow);
  overflow: hidden;
}

.p-card-header {
  padding: 0.85rem 1.15rem 0.65rem;
  border-bottom: 1px solid var(--p-card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.p-card-title { font-size: 0.8rem; font-weight: 600; color: var(--p-text-strong); margin: 0; }
.p-card-body { padding: 1rem 1.15rem; }

/* ── Stat cards ─────────────────────────────────────────────────────── */
.p-stat {
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  padding: 1.1rem 1.15rem;
}

.p-stat-value {
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--p-text-strong);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.p-stat-label { font-size: 0.72rem; color: var(--p-text-quiet); }
.p-stat-icon { font-size: 1rem; margin-bottom: 0.35rem; display: block; }

.p-stat--warning .p-stat-value, .p-stat--warning .p-stat-icon { color: var(--dk-warning); }
.p-stat--danger  .p-stat-value, .p-stat--danger  .p-stat-icon { color: var(--p-red); }
.p-stat--success .p-stat-value, .p-stat--success .p-stat-icon { color: var(--p-green); }
.p-stat--info    .p-stat-value, .p-stat--info    .p-stat-icon { color: var(--p-blue); }
.p-stat--gold    .p-stat-value, .p-stat--gold    .p-stat-icon { color: var(--p-gold-text); }
.p-stat--accent  .p-stat-value, .p-stat--accent  .p-stat-icon { color: var(--dk-accent); }

/* ── Stats bar ──────────────────────────────────────────────────────── */
.p-stats-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--p-card-bg);
  border: 1px solid var(--p-card-border);
  border-radius: var(--p-card-radius);
  padding: 0.65rem 1.25rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.p-stats-bar-item { display: flex; flex-direction: column; align-items: center; padding: 0.25rem 1.25rem; gap: 0.15rem; }
.p-stats-bar-sep { width: 1px; height: 2rem; background: var(--p-fill-hover); }
.p-stats-bar-value { font-size: 1.35rem; font-weight: 700; color: var(--p-text-strong); line-height: 1; }
.p-stats-bar-value--green { color: var(--p-green); }
.p-stats-bar-label { font-size: 0.62rem; color: var(--p-text-dim); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; }

/* ── Loading & empty ────────────────────────────────────────────────── */
.p-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0 1.25rem;
  font-size: 0.82rem;
  color: var(--p-text-quiet);
}

.p-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  text-align: center;
}

.p-empty i     { font-size: 2rem; color: var(--p-text-trace); }
.p-empty-icon  { font-size: 3.5rem !important; color: var(--p-text-trace) !important; margin-bottom: 0.25rem; display: block; }
.p-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--p-text-dim); margin: 0 0 0.35rem; }
.p-empty-text  { font-size: 0.82rem; color: var(--p-text-ghost); margin: 0 0 1.1rem; max-width: 320px; line-height: 1.5; }
.p-empty-label { font-size: 0.82rem; color: var(--p-text-ghost); }

@keyframes p-spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: p-spin 0.7s linear infinite; }

/* ── Badges ─────────────────────────────────────────────────────────── */
.p-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
}

.p-badge--success  { background: rgba(var(--p-green-rgb), 0.12); color: var(--p-green); }
.p-badge--warning  { background: rgba(255, 193, 7, 0.12); color: var(--dk-warning); }
.p-badge--danger   { background: rgba(var(--p-red-rgb), 0.12); color: var(--p-red); }
.p-badge--info     { background: rgba(var(--p-blue-rgb), 0.12); color: var(--p-blue); }
.p-badge--gold     { background: rgba(226, 172, 75, 0.12); color: var(--p-gold-text); }
.p-badge--accent   { background: rgba(34, 197, 94, 0.12); color: var(--dk-accent); }
.p-badge--muted    { background: var(--p-fill-hover); color: var(--p-text-quiet); }
.p-badge--active   { background: rgba(var(--p-green-rgb), 0.12); color: var(--p-green); }
.p-badge--inactive { background: var(--p-fill); color: var(--p-text-quiet); }

/* ── Divider ────────────────────────────────────────────────────────── */
.p-divider { border: none; border-top: 1px solid var(--p-card-border); margin: 1.25rem 0; }

/* ── Management page header ─────────────────────────────────────────── */
.p-mgmt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 0 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.p-mgmt-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--p-text-strong);
  margin: 0 0 0.2rem;
  line-height: 1.2;
}

.p-mgmt-subtitle { font-size: 0.78rem; color: var(--p-text-faint); margin: 0; }
.p-mgmt-actions { display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; align-items: flex-start; }

/* ── Surface panel ──────────────────────────────────────────────────── */
.p-surface-panel {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-card-radius);
  box-shadow: var(--p-card-shadow);
}

.p-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--p-border);
}

.p-panel-head .p-panel-head-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.p-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--p-transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.p-btn:hover { text-decoration: none; }
.p-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.p-btn--primary { background: var(--dk-accent); color: #04240f; border-color: var(--dk-accent); }
.p-btn--primary:hover:not(:disabled) { background: var(--dk-accent-hover); border-color: var(--dk-accent-hover); color: #04240f; }
.p-btn--gold { background: var(--dk-gold); color: #241804; border-color: var(--dk-gold); }
.p-btn--gold:hover:not(:disabled) { background: var(--dk-gold-hover); color: #241804; }
.p-btn--secondary { background: var(--p-surface-raised); border-color: var(--p-border); color: var(--p-text-muted); }
.p-btn--secondary:hover:not(:disabled) { border-color: var(--p-border-hover); color: var(--p-text-strong); }
.p-btn--danger { background: rgba(231, 76, 60, 0.1); border-color: rgba(231, 76, 60, 0.25); color: var(--p-red); }
.p-btn--danger:hover:not(:disabled) { background: rgba(231, 76, 60, 0.18); color: var(--p-red); }
.p-btn--warning { background: rgba(243, 156, 18, 0.1); border-color: rgba(243, 156, 18, 0.25); color: var(--p-amber); }
.p-btn--warning:hover:not(:disabled) { background: rgba(243, 156, 18, 0.18); color: var(--p-amber); }
.p-btn--success { background: rgba(46, 204, 113, 0.1); border-color: rgba(46, 204, 113, 0.25); color: var(--p-green); }
.p-btn--success:hover:not(:disabled) { background: rgba(46, 204, 113, 0.18); color: var(--p-green); }
.p-btn--icon { padding: 0.42rem 0.6rem; }
.p-btn--sm { padding: 0.28rem 0.65rem; font-size: 0.78rem; }
.p-btn i { font-size: 0.88em; }

/* ── Filter bar ─────────────────────────────────────────────────────── */
.p-filter-bar {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  flex-wrap: wrap;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-card-radius);
  padding: 0.7rem 1rem;
  margin-bottom: 1.5rem;
}

.p-search-wrap { position: relative; flex: 1; min-width: 180px; }
.p-search-icon { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); opacity: 0.35; font-size: 0.82rem; pointer-events: none; }
.p-search-input {
  width: 100%;
  background: var(--p-surface-raised);
  border: 1px solid var(--p-border);
  border-radius: 0.5rem;
  color: var(--p-text-strong);
  padding: 0.38rem 2rem 0.38rem 2rem;
  font-size: 0.82rem;
  outline: none;
  transition: border-color var(--p-transition);
}
.p-search-input:focus { border-color: rgba(34, 197, 94, 0.35); }
.p-search-input::placeholder { color: var(--p-text-ghost); }
.p-search-clear {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--p-text-quiet);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
}
.p-search-clear:hover { color: var(--p-text-muted); }

.p-filter-select {
  background: var(--p-surface-raised);
  border: 1px solid var(--p-border);
  border-radius: 0.5rem;
  color: var(--p-text-muted);
  padding: 0.38rem 0.75rem;
  font-size: 0.82rem;
  outline: none;
  cursor: pointer;
  transition: border-color var(--p-transition);
}
.p-filter-select:focus { border-color: rgba(34, 197, 94, 0.35); }
.p-search-input option,
.p-filter-select option { background-color: #161920; color: var(--p-text-strong); }

.p-filter-pills { display: flex; gap: 0.3rem; }
.p-filter-pill { padding: 0.25rem 0.7rem; border-radius: 20px; font-size: 0.73rem; font-weight: 600; border: 1px solid var(--p-border); background: transparent; color: var(--p-text-faint); cursor: pointer; transition: all var(--p-transition); }
.p-filter-pill:hover { border-color: var(--p-border-hover); color: var(--p-text); }
.p-filter-pill--active { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); color: var(--dk-accent); }
.p-filter-count { font-size: 0.76rem; color: var(--p-text-quiet); margin-left: auto; white-space: nowrap; }
.p-filter-count strong { color: var(--dk-accent); }

/* ── Table ──────────────────────────────────────────────────────────── */
.p-table-wrap {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-card-radius);
  overflow: hidden;
  box-shadow: var(--p-card-shadow);
  margin-bottom: 1.5rem;
}

.p-table-wrap--scrollx { overflow-x: auto; overflow-y: visible; }

.p-table-top { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--p-border); gap: 1rem; }
.p-table-top-title { font-size: 0.82rem; font-weight: 700; color: var(--p-text-muted); display: flex; align-items: center; gap: 0.5rem; }

.p-table { width: 100%; border-collapse: collapse; margin: 0; }
.p-table thead tr { background: var(--p-fill); }
.p-table th {
  padding: 0.62rem 1rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--p-gold-text);
  border-bottom: 1px solid var(--p-border);
  text-align: left;
  white-space: nowrap;
}
.p-table td {
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: var(--p-text-muted);
  border-bottom: 1px solid var(--p-line);
  vertical-align: middle;
}
.p-table tbody tr:last-child td { border-bottom: none; }
.p-table tbody tr:hover td { background: var(--p-fill); }
.p-table .p-col-actions { text-align: right; }
.p-table-actions { display: flex; gap: 0.3rem; justify-content: flex-end; }
.p-table-empty { padding: 3rem 1rem; text-align: center; color: var(--p-text-ghost); font-size: 0.82rem; }
.p-table-empty i { display: block; font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.3; }

/* ── Pagination ─────────────────────────────────────────────────────── */
.p-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--p-border);
  flex-wrap: wrap;
}
.p-page-btn {
  background: transparent;
  border: 1px solid var(--p-border);
  border-radius: 0.45rem;
  color: var(--p-text-faint);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all var(--p-transition);
  padding: 0;
}
.p-page-btn:hover:not(:disabled) { border-color: rgba(34, 197, 94, 0.3); color: var(--dk-accent); }
.p-page-btn--active { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); color: var(--dk-accent); font-weight: 700; }
.p-page-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.p-pagination-info { font-size: 0.73rem; color: var(--p-text-quiet); margin: 0 0.25rem; }

/* ── Forms ──────────────────────────────────────────────────────────── */
.p-form-section {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: rgba(226, 172, 75, 0.75);
  margin: 1.1rem 0 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--p-border);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.p-form-section:first-child { margin-top: 0; }

.p-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--p-text-muted);
  margin-bottom: 0.3rem;
  display: block;
}

.p-field-hint { font-size: 0.7rem; color: var(--p-text-quiet); margin-top: 0.2rem; display: block; }

.p-form-control {
  background: var(--p-surface-raised) !important;
  border: 1px solid var(--p-border) !important;
  color: var(--p-text-strong) !important;
  border-radius: 0.5rem !important;
  font-size: 0.84rem !important;
}
.p-form-control:focus {
  border-color: rgba(34, 197, 94, 0.35) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.08) !important;
}
select.p-form-control option { background-color: #161920; color: var(--p-text-strong); }

.p-form-check-label { font-size: 0.82rem; color: var(--p-text-muted); }

/* ── Inline alerts ──────────────────────────────────────────────────── */
.p-alert-inline {
  padding: 0.55rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.p-alert-inline--success { background: rgba(var(--p-green-rgb), 0.1); color: var(--p-green); border: 1px solid rgba(var(--p-green-rgb), 0.2); }
.p-alert-inline--error   { background: rgba(231, 76, 60, 0.1); color: var(--p-red); border: 1px solid rgba(231, 76, 60, 0.22); }
.p-alert-inline--warning { background: rgba(243, 156, 18, 0.1); color: var(--p-amber); border: 1px solid rgba(243, 156, 18, 0.25); }
.p-alert-inline--info    { background: rgba(59, 130, 246, 0.08); color: #bfdbfe; border: 1px solid rgba(59, 130, 246, 0.35); }

/* ── Progress bar (planting growth) ─────────────────────────────────── */
.p-progress {
  height: 6px;
  background: var(--p-fill-hover);
  border-radius: 999px;
  overflow: hidden;
  min-width: 70px;
}
.p-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.5), var(--dk-accent));
  border-radius: 999px;
  transition: width 0.35s ease;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .p-dash-greeting { font-size: 1.3rem; }
  .p-mgmt-header { flex-direction: column; }
  .content-fa { padding: 1rem; }
}

/* ════════════════════════════════════════════════════════════════════
   LIGHT THEME — token flips (dark stays the default on :root)
   ════════════════════════════════════════════════════════════════════ */
:root.theme-light,
.theme-light {
  --dk-darker-bg: #f6f4ee;
  --dk-surface-0: #fffdf8;
  --dk-surface-1: #f6f4ee;
  --dk-surface-2: #fffdf8;
  --dk-surface-border: rgba(38, 33, 23, 0.10);
  --dk-surface-border-strong: rgba(38, 33, 23, 0.18);
  --sidebar-bg: #f1ede4;

  --dk-text-primary: #262117;
  --dk-text-secondary: #524d40;
  --dk-text-muted: #6e675b;
  --dk-text-subtle: #938a76;

  /* Accents darkened so text/icons stay legible on cream */
  --dk-accent: #15803d;
  --dk-accent-hover: #166534;
  --dk-accent-soft: rgba(21, 128, 61, 0.12);
  --dk-gold: #a8760a;
  --dk-gold-hover: #8a6108;

  /* p- surfaces */
  --p-bg:             #f6f4ee;
  --p-surface:        #fffdf8;
  --p-surface-raised: #fffdf8;
  --p-border:         rgba(38, 33, 23, 0.10);
  --p-border-hover:   rgba(38, 33, 23, 0.18);
  --p-card-bg:        #fffdf8;
  --p-card-bg-hover:  #f7f2e9;
  --p-card-border:    rgba(38, 33, 23, 0.08);
  --p-card-shadow:    0 1px 2px rgba(38, 33, 23, 0.05);
  --p-label-color:    rgba(38, 33, 23, 0.52);
  --p-gold-text:      #a8760a;

  --p-text-strong:    #262117;
  --p-text:           #3b3524;
  --p-text-muted:     #5c5545;
  --p-text-dim:       #7a7160;
  --p-text-faint:     #938a76;
  --p-text-quiet:     #aba28d;
  --p-text-ghost:     rgba(38, 33, 23, 0.42);
  --p-text-trace:     rgba(38, 33, 23, 0.18);

  --p-line:           rgba(38, 33, 23, 0.08);
  --p-line-soft:      rgba(38, 33, 23, 0.04);
  --p-fill:           rgba(38, 33, 23, 0.035);
  --p-fill-hover:     rgba(38, 33, 23, 0.06);

  /* Status palette darkened for white surfaces (the rgb tints stay bright) */
  --p-green:          #15803d;
  --p-red:            #dc2626;
  --p-amber:          #b45309;
  --p-blue:           #2563eb;
  --p-teal:           #0f766e;
  --p-purple:         #7e22ce;
}

/* Calmer light mode — no dot-grid, flat hero */
.theme-light .p-page { background-image: none; }
.theme-light .p-dash-hero { background: var(--p-surface); }

/* Native option menus would otherwise paint the hardcoded dark bg */
.theme-light .p-search-input option,
.theme-light .p-filter-select option,
.theme-light select.p-form-control option { background-color: #ffffff; color: var(--p-text-strong); }

/* Layout chrome */
.theme-light .topbar-fa { background: var(--dk-surface-1); border-bottom-color: var(--dk-surface-border); }
.theme-light .topbar-icon-btn,
.theme-light .topbar-user-btn { background: #fff; border-color: var(--dk-surface-border); }
.theme-light .topbar-user-menu { background: #fff; border-color: var(--dk-surface-border); }
.theme-light .topbar-user-item:hover { background: rgba(0, 0, 0, .05); }

.theme-light .sidebar-fa { background: var(--sidebar-bg); border-right: 1px solid #e5ded0; }
.theme-light .sidebar-brand::after { background: #e5ded0; }
.theme-light .sidebar-link { color: var(--dk-text-secondary); }
.theme-light .sidebar-link:hover { background: rgba(38, 33, 23, .05); color: var(--dk-text-primary); }
.theme-light .sidebar-link.active { background: rgba(34, 197, 94, .16); color: #157f3c; }
.theme-light .sidebar-link.active i { color: #157f3c; }
.theme-light .sidebar-link:hover i { color: #157f3c; }
.theme-light .sidebar-sublink { color: var(--dk-text-secondary); }
.theme-light .sidebar-sublink:hover { background: rgba(38, 33, 23, .05); color: var(--dk-text-primary); }
.theme-light .sidebar-sublink.active { background: rgba(34, 197, 94, .16); color: #157f3c; }
.theme-light .sidebar-sublink.active i { color: #157f3c; }
.theme-light .sidebar-search-input { background: #fff; border-color: #e5ded0; color: var(--dk-text-primary); }
.theme-light .sidebar-search-input::placeholder { color: var(--dk-text-muted); }
.theme-light .sidebar-search-icon,
.theme-light .sidebar-search-clear { color: var(--dk-text-muted); }
.theme-light .sidebar-collapse-toggle,
.theme-light .sidebar-close { color: var(--dk-text-muted); background: rgba(38, 33, 23, .04); border-color: rgba(38, 33, 23, .08); }
.theme-light .sidebar-cat { color: var(--dk-text-subtle); }
.theme-light .sidebar-fa.collapsed .sidebar-cat { background: var(--dk-surface-border); }
.theme-light .sidebar-fa.collapsed .sidebar-group.open > .sidebar-sub,
.theme-light .sidebar-fa.collapsed .sidebar-group:hover > .sidebar-sub {
  background: #fff;
  border-color: #e5ded0;
  box-shadow: 0 8px 24px rgba(38, 33, 23, .16);
}

/* Light login */
.theme-light .login-page { background: var(--dk-darker-bg); }
.theme-light .fa-login-sub { color: var(--dk-text-muted) !important; }
.theme-light .fa-login-field > label { color: var(--dk-text-secondary) !important; }
.theme-light .fa-login-input-icon { color: var(--dk-text-muted); }
.theme-light .fa-login-input { background: #fff; border-color: #e5ded0; color: var(--dk-text-primary); }
.theme-light .fa-login-input::placeholder { color: var(--dk-text-muted); }
.theme-light .fa-login-eye { color: var(--dk-text-muted); }
.theme-light .fa-login-card { border-color: #e5ded0; }
.theme-light .fa-login-foot { border-top-color: #e5ded0; color: var(--dk-text-muted) !important; }
.theme-light .p-alert-inline--info { color: #1d4ed8; }

/* p-btn primary keeps a solid green fill in light mode; text goes white for contrast */
.theme-light .p-btn--primary { color: #ffffff; }
.theme-light .p-btn--primary:hover:not(:disabled) { color: #ffffff; }
.theme-light .p-btn--gold { color: #ffffff; }
.theme-light .p-btn--gold:hover:not(:disabled) { color: #ffffff; }