/* ============================================================================
   Agroforestry Passport — brand override layer.
   Loaded LAST so it restyles the vendor "Creative" admin theme to the brand:
   rich cocoa brown + warm amber/honey gold on white/cream surfaces.
   Typography: Poppins everywhere (matches the dashboard heading).
   Mirrors the mobile app palette (lib/core/app_theme.dart).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --ap-cocoa: #4e342e;
  --ap-cocoa-dark: #3e2723;
  --ap-cocoa-light: #6d4c41;
  --ap-accent: #5d4037;        /* cocoa brown — primary actions (matches mobile) */
  --ap-accent-dark: #4e342e;
  --ap-accent-soft: #efe3da;   /* soft brown-cream backgrounds */
  --ap-gold: #8d6e63;          /* light brown highlight */
  --ap-cream: #f7f3ee;
  --ap-ink: #241e1c;
  --ap-ink-soft: #7a6e66;
  --bs-primary: #5d4037;
  --bs-primary-rgb: 93, 64, 55;
}

/* ---- Typography: Poppins app-wide --------------------------------------- */
body, h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, input, select,
textarea, button, .btn, .nav-link, .card, .card-title, .page-title,
.dropdown-item, .form-control, table, .navbar-custom {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif !important;
}

/* ---- Canvas ------------------------------------------------------------- */
body {
  background-image: none !important;
  background-color: var(--ap-cream) !important;
  color: var(--ap-ink);
}

/* ---- Top navigation bar ------------------------------------------------- */
.navbar-custom {
  background: linear-gradient(90deg, var(--ap-cocoa-dark) 0%, var(--ap-cocoa) 60%, var(--ap-cocoa-light) 100%) !important;
  /* Clear bottom edge + deeper shadow so the (also-brown) hero card stays
     visually separated when it scrolls up underneath the fixed header.
     The vendor theme already pins this navbar (position:fixed, z-index:1001). */
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 18px rgba(62, 39, 35, 0.32);
}
.navbar-custom .nav-link,
.navbar-custom .topnav-menu .nav-link,
.navbar-custom .pro-user-name {
  color: #fff !important;
  font-weight: 600;
}
.navbar-custom .nav-link:hover { color: var(--ap-gold) !important; }

/* ---- Sidebar / side menu ------------------------------------------------ */
.left-side-menu, .side-nav { background: #fff; }
.side-nav .side-nav-link, .sidebar a { color: var(--ap-cocoa); }
.side-nav .side-nav-link:hover,
.side-nav li.active > a { color: var(--ap-accent) !important; }

/* ---- Buttons ------------------------------------------------------------ */
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary,
.btn-block.btn-success,
.btn-success {
  background-color: var(--ap-accent) !important;
  border-color: var(--ap-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(181, 120, 12, 0.25);
}
.btn-primary:hover, .btn-success:hover {
  background-color: var(--ap-accent-dark) !important;
  border-color: var(--ap-accent-dark) !important;
}
.btn-outline-primary {
  color: var(--ap-cocoa) !important;
  border-color: var(--ap-cocoa-light) !important;
}
.btn-outline-primary:hover {
  background-color: var(--ap-cocoa) !important;
  color: #fff !important;
}

/* ---- Links & accents ---------------------------------------------------- */
a { color: var(--ap-accent); }
a:hover { color: var(--ap-accent-dark); }
.text-primary { color: var(--ap-accent) !important; }
.bg-primary { background-color: var(--ap-accent) !important; }
.badge.bg-primary, .badge-primary { background-color: var(--ap-accent) !important; }

/* ---- Cards -------------------------------------------------------------- */
.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(62, 39, 35, 0.08);
}
.card .card-header {
  background: transparent;
  border-bottom: 1px solid #efe7dd;
  font-weight: 700;
  color: var(--ap-cocoa);
}
.card.bg-pattern { background: #fff !important; }

/* ---- Headings / page title --------------------------------------------- */
h1, h2, h3, h4, h5, .page-title { color: var(--ap-cocoa); }
.page-title-box .page-title { color: var(--ap-cocoa); font-weight: 700; }

/* ---- Tables ------------------------------------------------------------- */
.table thead th,
table.dataTable thead th {
  background: var(--ap-accent-soft);
  color: var(--ap-cocoa);
  border-bottom: 2px solid var(--ap-accent);
  font-weight: 700;
}
.table-hover tbody tr:hover { background: #faf7f2; }

/* ---- Forms -------------------------------------------------------------- */
.form-control, .custom-select {
  border-radius: 10px;
  border: 1px solid #e3d9cd;
}
.form-control:focus {
  border-color: var(--ap-accent);
  box-shadow: 0 0 0 0.18rem rgba(181, 120, 12, 0.18);
}

/* ---- Stat / widget tiles ------------------------------------------------ */
.widget-icon, .avatar-title { background-color: var(--ap-accent) !important; color: #fff; }

/* ---- Alerts ------------------------------------------------------------- */
.alert-success { background: var(--ap-accent-soft); color: var(--ap-accent-dark); border-color: #f0e0c0; }

/* ========================================================================== */
/* pcoded admin theme (baseNew.html — dashboard, reports, maps).              */
/* These pages use a different layout (green by default); restyle to brown.   */
/* ========================================================================== */
.pcoded-navbar {
  background: linear-gradient(180deg, var(--ap-cocoa-dark) 0%, var(--ap-cocoa) 100%) !important;
}
.pcoded-navbar .pcoded-inner-navbar > li > a,
.pcoded-navbar .pcoded-inner-navbar li > a { color: #efe3da !important; }
.pcoded-navbar .pcoded-inner-navbar > li.active > a,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a,
.pcoded-navbar .pcoded-inner-navbar > li > a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.pcoded-navbar .pcoded-inner-navbar > li.active > a:before,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a:before { background: var(--ap-gold) !important; }
.pcoded-navbar .pcoded-submenu { background: var(--ap-cocoa-light) !important; }
.pcoded-navbar .pcoded-submenu > li > a { color: #f3ece7 !important; }
.pcoded-navbar .pcoded-submenu > li > a:hover,
.pcoded-navbar .pcoded-submenu > li.active > a { color: #fff !important; background: rgba(255,255,255,0.08) !important; }
.pcoded-header, .navbar.pcoded-header, header.pcoded-header { background: #fff !important; }
.pcoded-main-container, body[class] { background: var(--ap-cream) !important; }

/* card accent icons (were teal) + headings + leaf logo */
.text-c-yellow, .text-c-green, .b-brand .fa-leaf { color: var(--ap-accent) !important; }
.flat-card h5, .page-header-title h5 { color: var(--ap-cocoa) !important; }

/* Highcharts titles/axes pick up the brand ink */
.highcharts-title, .highcharts-axis-title { fill: var(--ap-cocoa) !important; }

/* ---- Fixed header + collapsible sidebar (baseNew layout) ---------------- */
/* The pcoded theme ships the header as `relative` and the sidebar as
   `absolute`, so they scroll away with the page. Pin both so only the content
   scrolls, and allow the sidebar to be hidden via the header toggle. */
.pcoded-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1030 !important;
}
.pcoded-navbar {
  position: fixed !important;
  left: 0;
  overflow-y: auto;
  z-index: 1029 !important;
  transition: transform .25s ease !important;
}
.pcoded-main-container {
  padding-top: 56px !important;          /* clear the now-fixed header */
  transition: margin-left .25s ease !important;
}

/* Sidebar hidden state — toggled by the header menu button. */
body.ap-nav-hidden .pcoded-navbar { transform: translateX(-100%); }
body.ap-nav-hidden .pcoded-main-container { margin-left: 0 !important; }

/* Header menu toggle button. */
#ap-nav-toggle {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ap-cocoa); font-size: 22px; line-height: 1;
  padding: 6px 14px; display: inline-flex; align-items: center;
}
#ap-nav-toggle:hover { color: var(--ap-accent); }