/* ============================================================
   Harvest Console — shared site theme (loaded after style.css).
   Organic agri-tech: field-night base, harvest-gold + crop-green
   accents, Fraunces display serif + Manrope body. Enhances common
   building blocks (page headers, cards, tables, forms, buttons,
   pill tabs) app-wide. Deliberately does NOT touch the top navbar,
   slide-out sidebars, or footer — those are styled in style.css.
   ============================================================ */
:root{
  /* Accent = the site's existing sky-blue link colour (#5bc0de) + a deeper
     blue, so pages match the navbar/panels. Green kept only for semantic
     success (buttons, focus ring). Panels use the site navy #16213e/#0f3460. */
  --hc-gold:#5bc0de; --hc-gold-soft:#85d3e8; --hc-blue-2:#679fff; --hc-blue-deep:#337ab7;
  --hc-crop:#7cc98f; --hc-crop-deep:#3f9e63;
  --hc-panel:#16213e; --hc-panel-2:#1b2a4a; --hc-line:rgba(91,192,222,.16);
  --hc-ink:#e6edf6; --hc-ink-dim:#9fb0c9; --hc-ink-mute:#6d7f9c;
  --hc-radius:16px;
}

/* ---- Type ---- */
body, .form-control, .btn, .table, p, li, td, th, label, input, select, textarea{
  font-family:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#page-content h1, #page-content h2,
.hc-page-head h1, .hc-title{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:600; letter-spacing:-.01em; color:var(--hc-ink);
}
/* Page title: a refined header with a gold rule under it */
#page-content > .container > h1:first-child,
#page-content h1[align="center"]{
  position:relative; display:inline-block; left:50%; transform:translateX(-50%);
  padding-bottom:14px; margin:26px 0 22px;
}
#page-content h1[align="center"]::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:64px; height:3px; border-radius:3px;
  background:linear-gradient(92deg,var(--hc-gold),var(--hc-crop));
}

/* ---- Atmosphere on content pages ---- */
#page-content{
  background:
    radial-gradient(1000px 480px at 85% -6%, rgba(91,192,222,.07), transparent 60%),
    radial-gradient(820px 560px at 6% 6%, rgba(103,159,255,.06), transparent 55%);
}

/* ---- Cards / panels ---- */
.panel, .well, .card, .hc-card{
  background:linear-gradient(180deg,var(--hc-panel-2),var(--hc-panel)) !important;
  border:1px solid var(--hc-line) !important;
  border-radius:var(--hc-radius) !important;
  box-shadow:0 22px 55px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
  color:var(--hc-ink);
}
.panel-heading, .card-header{
  background:transparent !important; border-bottom:1px solid var(--hc-line) !important;
  font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--hc-ink);
}

/* ---- Tables (list pages) ---- */
.table{ color:var(--hc-ink-dim); border-collapse:separate; border-spacing:0; }
.table thead > tr > th, .table > thead > tr > th, .table thead th{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--hc-gold) !important;
  border-bottom:1px solid var(--hc-line) !important; border-top:0 !important;
  padding:14px 16px;
  /* !important to beat style.css `table thead th{background-color:white!important}`,
     which otherwise leaks a white header band into every plain .table on the
     dark theme (e.g. the Dynamic Units Threshold table). */
  background:transparent !important;
}
.table > tbody > tr > td{
  padding:13px 16px; border-color:var(--hc-line) !important; color:var(--hc-ink) !important;
  vertical-align:middle;
}
.table > tbody > tr{ transition:background .15s ease; }
.table > tbody > tr:hover{ background:rgba(91,192,222,.06); }
.table-striped > tbody > tr:nth-of-type(odd){ background:rgba(255,255,255,.02); }
/* DataTables stripes its `.even` rows SOLID WHITE via the CDN css (which loads
   after this theme), so light theme text became invisible on them. Force dark
   rows + light cells; keep a faint alternation. Also darken its header. */
table.dataTable tbody tr.odd,
table.dataTable tbody tr.odd > .sorting_1{ background-color:rgba(255,255,255,.02) !important; }
table.dataTable tbody tr.even,
table.dataTable tbody tr.even > .sorting_1{ background-color:transparent !important; }
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover > *{ background-color:rgba(91,192,222,.08) !important; }
table.dataTable tbody td, table.dataTable tbody th{ color:var(--hc-ink) !important; }
table.dataTable thead th, table.dataTable thead td{
  background:#1b2a4a !important; color:#e6edf6 !important; border-color:var(--hc-line) !important;
}
.dataTables_wrapper{ color:var(--hc-ink-dim); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:linear-gradient(92deg,var(--hc-gold),var(--hc-gold-soft)) !important;
  color:#04121e !important; border:0 !important; border-radius:8px;
}

/* ---- Forms ---- */
.form-control, .form-horizontal .form-control, select.form-control, textarea.form-control{
  background:#0f1728 !important; border:1px solid var(--hc-line) !important;
  color:var(--hc-ink) !important; border-radius:12px !important;
  padding:11px 14px; height:auto; box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{
  border-color:var(--hc-gold) !important;
  box-shadow:0 0 0 3px rgba(91,192,222,.18) !important;
}
.form-control::placeholder{ color:var(--hc-ink-mute); }
.control-label, label{ color:var(--hc-ink-dim); font-weight:600; }

/* ---- Buttons ---- */
.btn{
  font-family:'Manrope',sans-serif; font-weight:600; border-radius:12px;
  padding:9px 18px; border:1px solid transparent; transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-lg{ padding:12px 22px; border-radius:14px; }
.btn-primary{
  background:linear-gradient(180deg,var(--hc-gold),var(--hc-blue-deep)) !important; border:0 !important; color:#04121e !important;
  box-shadow:0 10px 24px -12px rgba(91,192,222,.6);
}
.btn-primary:hover, .btn-primary:focus{ filter:brightness(1.06); color:#04121e !important; }
.btn-success{
  background:linear-gradient(180deg,var(--hc-crop),var(--hc-crop-deep)) !important; border:0 !important; color:#05230f !important;
  box-shadow:0 10px 24px -12px rgba(124,201,143,.6);
}
.btn-info{ background:linear-gradient(180deg,#5fa8d6,#3f7fb0) !important; border:0 !important; color:#04121e !important; }
.btn-danger{ background:linear-gradient(180deg,#e06a6a,#b23f3f) !important; border:0 !important; color:#2a0808 !important; }
.btn-default, .btn-secondary{
  background:rgba(255,255,255,.05) !important; border:1px solid var(--hc-line) !important; color:var(--hc-ink) !important;
}

/* ---- Pill tabs (nav-pills / nav-tabs) app-wide ---- */
.nav-pills, .nav-tabs{ border-bottom:1px solid var(--hc-line); gap:8px; }
.nav-pills > li > a, .nav-tabs > li > a, .nav-pills .nav-link, .nav-tabs .nav-link{
  font-family:'Manrope',sans-serif; font-weight:600; font-size:13.5px; color:var(--hc-ink-dim) !important;
  border:1px solid transparent !important; border-radius:100px !important; padding:9px 16px;
}
.nav-pills > li.active > a, .nav-tabs > li.active > a,
.nav-pills .nav-link.active, .nav-tabs .nav-link.active{
  color:#04121e !important;
  background:linear-gradient(92deg,var(--hc-gold),var(--hc-gold-soft)) !important;
  box-shadow:0 6px 18px -8px rgba(91,192,222,.6);
}
.nav-pills > li > a:hover, .nav-tabs > li > a:hover{ background:rgba(255,255,255,.04) !important; }

/* ---- Links & misc ---- */
/* Exclude tab/pill/dropdown toggles ([data-toggle]) and .dash-tabs links:
   otherwise this link colour (ID specificity) overrode the tab text colour and
   an active pill rendered light-blue-on-light-blue = invisible. */
#page-content a:not(.btn):not(.nav-link):not([data-toggle]){ color:var(--hc-gold-soft); }
#page-content a:not(.btn):not(.nav-link):not([data-toggle]):hover{ color:var(--hc-gold); }
hr{ border-color:var(--hc-line); }

/* ---- Inline label+input+button form. Replacement for the BS3
        `form-horizontal` col grid, which collapses inputs to a sliver under
        BS4 when the form lacks `.form-horizontal`. Used on eBCard invite and
        rotation seed picker. ---- */
.hc-inline-form{ max-width:560px; }
.hc-inline-form__label{ display:block; text-align:center; margin-bottom:10px; }
.hc-inline-form__row{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
.hc-inline-form__row .form-control{ flex:1 1 240px; min-width:0; margin:0; }
.hc-inline-form__row .btn{ flex:0 0 auto; white-space:nowrap; }

/* ---- Name bar (top navbar brand) ----------------------------------
   The legacy .navbar-brand had padding-top:20px + margin-top:-6px that
   pushed "AgProAnalytics" out of vertical centre; and BS4 auto-adds a
   .dropdown-toggle::after caret on top of the manual fa-caret-down in the
   markup (double arrow). Fix both, and give the brand the theme serif. */
.navbar .navbar-brand.navbar-brand-fa-fix{
  display:inline-flex !important; align-items:center; height:56px;
  margin-top:0 !important; padding:0 12px !important;
  font-family:'Fraunces', Georgia, serif; font-weight:600;
  font-size:18px !important; letter-spacing:.2px; line-height:1;
  color:#e6edf6 !important; white-space:nowrap;
}
.navbar .navbar-brand.navbar-brand-fa-fix:hover{ color:#5bc0de !important; text-decoration:none; }
/* remove Bootstrap 4's duplicate caret on the main module dropdowns
   (Financials / Actions / GPS App already render their own fa-caret-down) */
.navbar .nav.navbar-nav .dropdown-toggle::after{ display:none !important; }

/* ---- Navbar dropdowns must FLOAT, not expand the bar --------------
   The navbar has no .navbar-expand-* class, so BS4 leaves .navbar-nav
   .dropdown-menu at position:static → opening a menu pushes the whole
   bar open inline. Force absolute positioning so menus float below the
   toggle like normal dropdowns. */
.navbar .nav.navbar-nav > li.dropdown{ position: relative; }
.navbar .nav.navbar-nav .dropdown-menu{
  position: absolute !important;
  top: 100% !important;
  left: 0;
  min-width: 210px;
  z-index: 1050;
}
/* The app loads Bootstrap 3 JS (adds `.open` to the <li>) but Bootstrap 4 CSS
   (shows menus via `.show`, dropped the `.open` rule). Bridge them so the
   toggled menu actually displays — cover both class conventions. */
.navbar .nav.navbar-nav .open > .dropdown-menu,
.navbar .nav.navbar-nav .show > .dropdown-menu,
.navbar .nav.navbar-nav .dropdown-menu.show{ display: block !important; }
.navbar .nav.navbar-nav .dropdown-menu{ display: none; }

/* navbar dropdown menu item text — right-sized (was oversized/inherited large) */
.navbar .nav.navbar-nav .dropdown-menu > li > a{
  font-family:'Manrope', sans-serif !important;
  font-size:13.5px !important;
  line-height:1.3 !important;
  padding:8px 16px !important;
}
.navbar .nav.navbar-nav .dropdown-menu > li > a i{ font-size:13px; }

/* ---- Bootstrap `.bg-light` = a LIGHT box on the dark theme -------------
   Several pages (fields list/update/delete data readouts, promote, gpsCoords)
   wrap content in `.bg-light p-3 rounded`. On the dark base that renders as a
   pale box, and any inherited light body text on it is near-invisible. Convert
   them site-wide into the same navy gradient card the theme uses everywhere.
   Page-scoped rules (e.g. .soil-create) are more specific and still win. */
#page-content .bg-light{
  background:linear-gradient(180deg,#1b2a4a,#16213e) !important;
  border:1px solid rgba(91,192,222,.16);
  color:#e6edf6 !important;
  box-shadow:0 20px 50px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
}
#page-content .bg-light.rounded{ border-radius:14px !important; }

/* ---- Shared "hero" page header ----------------------------------------
   Reusable eyebrow + serif title + subtitle, included via
   views/partials/pageHero.ejs. Replaces the plain `<h1 align="center">`
   on interior pages so every page opens with the same Harvest Console
   language (left-aligned, matching profile/settings/fields-create). */
.page-hero{ padding:30px 2px 8px; }
.page-hero__eyebrow{
  font-family:'Manrope',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:#5bc0de;
  display:flex; align-items:center; gap:8px; margin:0 0 10px;
}
#page-content h1.page-hero__title{
  font-family:'Fraunces',Georgia,serif !important; font-weight:600;
  font-size:clamp(24px,3.2vw,34px); color:#e6edf6 !important;
  margin:0; display:block; left:auto; transform:none; padding:0;
}
#page-content h1.page-hero__title::after{ display:none !important; }
.page-hero__sub{
  font-family:'Manrope',sans-serif; color:#9fb0c9;
  margin:10px 0 4px; font-size:14px; max-width:70ch;
}

/* ============================================================
   Off-canvas side menus.
   LEFT hamburger menu = position:absolute so it scrolls WITH the (unpinned)
   navbar — `left:0` is always the viewport-left, so it still hides off-canvas
   correctly. `top` is set per-open by navigation.js setTopOffset() to the
   navbar's bottom in document coords, so header + panel move together. */
#sidebar-wrapper{
  position: absolute !important;
  height: auto !important;
  min-height: 100vh;
  z-index: 1000 !important;        /* below the modal backdrop (1040) so dialogs win */
}
/* RIGHT panels (User menu + Create New) = position:absolute, SAME as the left
   hamburger and consistent with the position:relative navbar, so all three
   scroll WITH the page together (the navbar is unpinned — see below). This also
   makes navigation.js setTopOffset()'s document-coordinate `top` correct here,
   exactly as it is for the left panel; a position:fixed panel would instead pin
   to the viewport and detach from the scrolled-away navbar.
   `right:0` = the initial containing block's right edge = the viewport's right
   edge (no positioned ancestor), and the panel is hidden off-canvas purely by
   the transform below (margin-right is neutralised to 0). Absolute elements DO
   contribute to horizontal scroll overflow (fixed ones don't), so the hidden,
   translated-right panel is kept from adding a scrollbar by `overflow-x:clip`
   on <html> (see the html rule below). `.active` reveals via transform, so
   style.css's `#sidebar-wrapper-user.active{right:310px}` is intentionally dead. */
#sidebar-wrapper-user,
#sidebar-wrapper-create{
  position: absolute !important;
  right: 0 !important;
  margin-right: 0 !important;
  height: auto !important;
  min-height: 100vh;   /* the nav inside is position:absolute (out of flow), so
                          without this the wrapper collapses to 0 height and the
                          menu, though positioned, renders nothing */
  z-index: 1000 !important;
  transform: translateX(calc(100% + 24px));  /* hide off the viewport's right
                                    edge, by the panel's own width + a buffer that
                                    clears the desktop scrollbar gutter */
  transition: transform 0.15s ease-in-out;
}
#sidebar-wrapper-user.active,
#sidebar-wrapper-create.active{
  transform: translateX(0) !important;   /* slide in */
}
/* Navbar in normal flow (relative, not fixed) so it scrolls with the page and
   its profile/+ toggles stay above the panels. z-index below the modal backdrop. */
.navbar{ position: relative !important; z-index: 1030 !important; }
/* Clip the off-canvas panels' horizontal overflow so the hidden (translated-
   right) User/Create panels never add a horizontal scrollbar. All three pieces
   are required (verified empirically): `body{position:relative}` makes <body>
   the panels' containing block (they have no other positioned ancestor, so
   without this their containing block is the initial containing block and they
   escape the clip); `overflow-x:clip` on BOTH <body> and <html> is needed for
   the document's scrollWidth to actually drop — clip on either one alone leaves
   the overflow. `clip` (not `hidden`) does NOT create a scroll container, so it
   leaves vertical page scroll and any position:sticky (e.g. the guide TOC)
   untouched, and it keeps overflow-y at its default `visible`. */
html{ overflow-x: clip; }
body{ position: relative; overflow-x: clip; }

/* ============================================================
   Logged-out Login / Sign Up nav buttons
   They reuse `.navbar-brand-fa-fix` (the site-brand class), so they
   rendered as bare stacked brand-style icons. Re-style just these two
   (by href) into proper labelled pills — ghost Login, filled Sign Up. */
.navbar .navbar-brand-fa-fix[href="/login"],
.navbar .navbar-brand-fa-fix[href="/signup"]{
  display:inline-flex !important; align-items:center; gap:7px; float:none !important;
  width:auto !important; height:auto !important; min-height:0 !important;
  font-family:'Manrope',sans-serif !important; font-weight:600; line-height:1 !important;
  padding:8px 15px !important; margin:11px 5px !important; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.navbar .navbar-brand-fa-fix[href="/login"]{
  color:#cfe6f2 !important; border:1px solid rgba(91,192,222,.35);
}
.navbar .navbar-brand-fa-fix[href="/signup"]{
  background:linear-gradient(92deg,#5bc0de,#85d3e8) !important; color:#04121e !important;
  box-shadow:0 8px 20px -10px rgba(91,192,222,.7);
}
.navbar .navbar-brand-fa-fix[href="/login"]:hover,
.navbar .navbar-brand-fa-fix[href="/signup"]:hover{ transform:translateY(-1px); }
.navbar .navbar-brand-fa-fix[href="/login"] i,
.navbar .navbar-brand-fa-fix[href="/signup"] i{ font-size:15px !important; margin:0 !important; }
.navbar .navbar-brand-fa-fix[href="/login"] small,
.navbar .navbar-brand-fa-fix[href="/signup"] small{
  display:inline-block !important; font-size:14px !important; font-weight:600; margin:0 !important;
}

/* ============================================================
   Auth pages (login / signup / forgot / reset) — centered card.
   The forms use Bootstrap `form-horizontal` with col-split labels that
   left big empty gutters. Collapse to a compact, centered, stacked card. */
.auth-page .container{ max-width:520px; }
.auth-page h1, .auth-page h1.center{
  text-align:center !important; left:auto; transform:none; display:block;
}
.auth-page .row{ margin-left:0; margin-right:0; }
.auth-page [class*="col-md-"], .auth-page [class*="col-sm-"]{
  width:100%; max-width:100%; flex:0 0 100%; margin-left:0 !important; padding-left:0; padding-right:0;
}
.auth-page form.form-horizontal{
  background:linear-gradient(180deg,#1b2a4a,#16213e); border:1px solid rgba(91,192,222,.16);
  border-radius:18px; padding:24px 26px; max-width:420px; margin:6px auto 0;
  box-shadow:0 30px 70px -42px rgba(0,0,0,.85);
}
.auth-page form.form-horizontal .form-group{ display:block !important; margin-bottom:15px; }
.auth-page form.form-horizontal .control-label{
  display:block; text-align:left !important; width:100%; float:none; margin:0 0 6px; color:#9fb0c9;
}
.auth-page form.form-horizontal .form-group > div[class*="col-"]{
  width:100%; max-width:100%; flex:0 0 100%; padding:0;
}
.auth-page form.form-horizontal .form-control{ width:100%; }
.auth-page form.form-horizontal .login__btn,
.auth-page form.form-horizontal button[type="submit"]{ width:100% !important; max-width:none; margin-top:6px; }
.auth-page hr{ border-color:rgba(91,192,222,.14); max-width:420px; margin:16px auto; }

/* ============================================================
   Mobile responsive layer (the theme previously had NO @media rules).
   Below the tablet breakpoint: tighten page padding, stack horizontal
   form rows, let wide tables scroll, and size hero headers down. */
@media (max-width: 768px){
  #page-content .container{ padding-left:14px !important; padding-right:14px !important; }
  .page-hero{ padding:18px 2px 6px; }
  #page-content h1.page-hero__title{ font-size:clamp(20px,6.4vw,27px); }
  #page-content h1, #page-content h2{ word-break:break-word; }

  /* form-horizontal: label above input, both full width */
  .form-horizontal .form-group{ display:block !important; }
  .form-horizontal .control-label{
    text-align:left !important; width:100% !important; float:none !important; margin:0 0 6px !important;
  }
  .form-horizontal .form-group > div[class*="col-"]{
    width:100% !important; max-width:100% !important; flex:0 0 100% !important; margin-left:0 !important;
  }
  .form-control, select.form-control, textarea.form-control{ font-size:16px !important; } /* avoids iOS zoom */

  /* wide tables scroll rather than overflow the page */
  .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.dataTable, .table{ min-width:0; }

  /* cards / panels: comfortable padding on small screens */
  .panel-body, .well, .card, .dash-card, .dash-section-card{ padding:16px !important; }

  /* The top inline dropdowns (Financials / Actions / GPS App) are fully
     mirrored in the hamburger sidebar on mobile — hide them so the navbar
     isn't crowded (brand + hamburger + auth/user controls only). */
  .navbar .nav.navbar-nav{ display:none !important; }

  /* auth card fills the small screen nicely */
  .auth-page .container{ max-width:100%; }
  .auth-page form.form-horizontal{ padding:20px 18px; }
}

/* ============================================================
   Mobile / rendering fixes from device screenshots (2026-07-18)
   ============================================================ */

/* (A) Pricing cards are WHITE islands on the dark theme, so their text was
   inheriting the theme's light #page-content colour and washing out (the €49,
   "/year incl. VAT", "7-Day Free Trial" and button label were barely legible).
   Force dark, readable text on the card and a solid white button label.
   ALSO neutralise the card's `:hover` state (style.css turns the whole card
   ORANGE with a white-on-white button on hover) — on touch devices that hover
   sticks after a tap, so the card flickered white↔orange and the button text
   vanished. Pin hover === normal: white card, blue signature, orange button. */
.c-price-packages__item,
.c-price-packages__item:hover{ background-color:#fff !important; color:#16213e !important; }
.c-price-packages__item .c-price-packages__month,
.c-price-packages__item .c-price-packages__month-size,
.c-price-packages__item .c-price-packages__month-text,
.c-price-packages__item .c-price-packages__period,
.c-price-packages__item li:not(.text-muted),
.c-price-packages__item:hover .c-price-packages__month,
.c-price-packages__item:hover .c-price-packages__month-size,
.c-price-packages__item:hover .c-price-packages__month-text,
.c-price-packages__item:hover .c-price-packages__period,
.c-price-packages__item:hover li:not(.text-muted){ color:#16213e !important; }
.c-price-packages__item .c-price-packages__signature,
.c-price-packages__item:hover .c-price-packages__signature{ color:#02b3f5 !important; }
.c-price-packages__btn,
.c-price-packages__item:hover .c-price-packages__btn{ background-color:#FF550B !important; color:#fff !important; }
/* Other descendants whose :hover rule assumed an orange card (would go
   white-on-white now that the card is pinned white): green ticks + price. */
.c-price-packages__item:hover i.fa.fa-check-circle{ color:#00CC6F !important; }
.c-price-packages__item:hover .price_per{ color:#373a3c !important; }

@media (max-width: 768px){
  /* (B) Login / Sign Up nav pills overflowed off the right edge on phones. */
  .navbar .navbar-brand-fa-fix[href="/login"],
  .navbar .navbar-brand-fa-fix[href="/signup"]{
    padding:6px 11px !important; margin:9px 3px !important; gap:5px;
  }
  .navbar .navbar-brand-fa-fix[href="/login"] small,
  .navbar .navbar-brand-fa-fix[href="/signup"] small{ font-size:13px !important; }
  .navbar .navbar-brand-fa-fix[href="/login"] i,
  .navbar .navbar-brand-fa-fix[href="/signup"] i{ font-size:13px !important; }

  /* (C) Cookie bar text + buttons ran off the right edge — let it wrap/stack. */
  #cookie-bar{ line-height:1.45 !important; padding:8px 10px !important; white-space:normal !important; }
  #cookie-bar p{ white-space:normal !important; }
  #cookie-bar a{ display:inline-block; margin:6px 4px 0 !important; white-space:nowrap; }
}

@media (max-width: 480px){
  /* Very narrow phones: shrink brand and drop the "Login" word (icon only) so
     the Sign Up pill fits fully on screen. */
  .navbar .navbar-brand.navbar-brand-fa-fix{ font-size:15.5px !important; }
  .navbar .navbar-brand-fa-fix[href="/login"] small{ display:none !important; }
  .navbar .navbar-brand-fa-fix[href="/login"],
  .navbar .navbar-brand-fa-fix[href="/signup"]{ padding:6px 9px !important; margin:8px 2px !important; }

  /* (D) Homepage hero overlay text (— Web & Mobile) was clipped: the vertically
     centred overlay is taller than the short mobile banner. Shrink + tighten so
     the full tagline shows above the Login / Sign Up Free buttons. */
  .overlay-center h1.text-lg, .overlay-center h1{ font-size:1.35em !important; margin:0 0 4px !important; }
  .overlay-center h2, .overlay-center h3{ font-size:0.8em !important; line-height:1.25 !important; margin:2px 0 !important; }
  .overlay-center br{ display:none !important; }
  .overlay-center .btn-overlay{ font-size:0.85em !important; padding:5px 14px !important; margin:8px 6px 0 !important; }
}

/* ============================================================
   Read-only grace banner — shown (via res.locals.readOnly from guard.js)
   when an owner's trial/subscription has lapsed. They keep read access;
   writes are blocked server-side and this prompts them to subscribe.
   ============================================================ */
.hc-readonly-banner{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
  background:linear-gradient(92deg, rgba(229,83,75,.18), rgba(229,83,75,.08));
  border-bottom:1px solid rgba(229,83,75,.4);
  color:#f4dad7; font-family:'Manrope',sans-serif; font-size:14px;
  padding:11px 20px; position:relative; z-index:900;
}
.hc-readonly-banner i.fa-lock{ color:#e5534b; font-size:15px; }
.hc-readonly-banner strong{ color:#fff; }
.hc-readonly-banner .hc-readonly-cta{
  margin-left:auto; background:linear-gradient(92deg,#5bc0de,#85d3e8);
  color:#04121e !important; font-weight:700; font-size:13px;
  padding:7px 16px; border-radius:999px; text-decoration:none; white-space:nowrap;
}
.hc-readonly-banner .hc-readonly-cta:hover{ filter:brightness(1.06); }
@media (max-width:600px){
  .hc-readonly-banner{ font-size:12.5px; padding:10px 14px; }
  .hc-readonly-banner .hc-readonly-cta{ margin-left:0; }
}

/* ============================================================
   Date-range picker (bootstrap-daterangepicker) — dark theme.
   The plugin ships a white popup; the app's dark body text colour
   (#e0e0e0) then leaked onto it, leaving faint grey dates on white
   (unreadable — see Scheduler create). This themes the popup navy to
   match the app. Loaded globally in header.ejs, so it fixes every
   page that uses the picker (scheduler, soilanalysis, fields, gps…).
   ============================================================ */
.daterangepicker{
  background-color:var(--hc-panel) !important;
  border:1px solid var(--hc-panel-2) !important;
  color:var(--hc-ink) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.5);
}
/* the little caret that points at the input */
.daterangepicker:after{ border-bottom-color:var(--hc-panel) !important; }
.daterangepicker:before{ border-bottom-color:var(--hc-panel-2) !important; }
.daterangepicker.drop-up:after{ border-top-color:var(--hc-panel) !important; border-bottom-color:transparent !important; }
.daterangepicker.drop-up:before{ border-top-color:var(--hc-panel-2) !important; border-bottom-color:transparent !important; }

.daterangepicker .calendar-table{
  background-color:var(--hc-panel) !important;
  border:1px solid var(--hc-panel) !important;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td,
.daterangepicker .month,
.daterangepicker td.available{
  color:var(--hc-ink) !important;
}
/* the header cells (month title, weekday row, prev/next arrows) inherited a
   global `table thead th{background:white}` rule — force them navy so the
   header band isn't a white stripe across the dark calendar. */
.daterangepicker .calendar-table th{ background-color:var(--hc-panel) !important; }
/* weekday header row + month label a touch dimmer */
.daterangepicker th.month,
.daterangepicker .calendar-table thead th{ color:var(--hc-ink-dim) !important; }
/* prev / next chevrons (CSS-border arrows) */
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span{ border-color:var(--hc-ink) !important; }

/* days from the adjacent month */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date{
  background-color:var(--hc-panel) !important;
  color:var(--hc-ink-mute) !important;
}
/* hover on a selectable day / weekday */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover{
  background-color:#28406b !important;
  color:#fff !important;
}
/* disabled days */
.daterangepicker td.disabled,
.daterangepicker option.disabled{ color:var(--hc-ink-mute) !important; }

/* the highlighted span between start and end */
.daterangepicker td.in-range{
  background-color:#22406e !important;
  color:var(--hc-ink) !important;
}
/* selected start / end / active day */
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.start-date,
.daterangepicker td.end-date{
  background-color:var(--hc-gold) !important;
  color:#0b1220 !important;
}
/* month / year (and time) dropdowns inside the header */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect{
  background-color:#0f1830 !important;
  color:var(--hc-ink) !important;
  border:1px solid var(--hc-panel-2) !important;
}
/* predefined ranges list (left column, when shown) */
.daterangepicker .ranges li{ color:var(--hc-ink) !important; }
.daterangepicker .ranges li:hover{ background-color:#28406b !important; }
.daterangepicker .ranges li.active{ background-color:var(--hc-gold) !important; color:#0b1220 !important; }
/* footer: selected-range text + button bar separator */
.daterangepicker .drp-selected{ color:var(--hc-ink-dim) !important; }
.daterangepicker .drp-buttons{ border-top:1px solid var(--hc-panel-2) !important; }
.daterangepicker .drp-buttons .btn.btn-default{ background:transparent !important; color:var(--hc-ink) !important; border:1px solid var(--hc-panel-2) !important; }

/* ============================================================
   Form-row alignment. style.css sets `.form-horizontal .form-group
   {justify-content:center}`, which centres EACH row independently — so rows
   with different column counts (a trailing unit label like "kg/ha", the VAT
   "@ %" cells, or an "Add Another" button) placed their fields at different
   x positions, giving the ragged label/field columns and misaligned buttons
   flagged across the create forms. Pack rows from the start so the label and
   field columns line up consistently down every form (the .container stays
   centred on the page, so only the internal columns change). ============ */
.form-horizontal .form-group{ justify-content:flex-start; }
/* …but rows explicitly marked text-center (action/button rows like the
   projection "Add a Projected Purchase/Sale" pair) stay centred. */
.form-horizontal .form-group.text-center{ justify-content:center; }

/* ============================================================
   Bootstrap alerts — dark theme. They shipped with light pastel
   backgrounds (alert-danger #f8d7da etc.) that clashed with the dark
   UI, and links inside them (the app's light-blue link colour) were
   unreadable on the pastel. These are used app-wide for flash messages
   and empty-state notices ("No sales are present…"), so theming them
   globally fixes every page. Semantic tint + light readable text.
   ============================================================ */
.alert{
  background-color:rgba(255,255,255,.045) !important;
  border:1px solid var(--hc-line);
  color:var(--hc-ink);
  border-radius:12px;
}
.alert a, .alert .alert-link{ color:var(--hc-gold-soft); font-weight:600; text-decoration:underline; }
.alert-danger{  background-color:rgba(224,74,74,.13) !important;  border-color:rgba(224,74,74,.42);  color:#f2b6b6; }
.alert-success{ background-color:rgba(63,158,99,.15) !important; border-color:rgba(63,158,99,.42);  color:#a7e0ba; }
.alert-warning{ background-color:rgba(214,158,46,.15) !important; border-color:rgba(214,158,46,.44); color:#f0d08a; }
.alert-info{    background-color:rgba(91,192,222,.13) !important; border-color:rgba(91,192,222,.42);  color:#bfe6f2; }
.alert-danger a,  .alert-danger .alert-link{  color:#ffd2d2 !important; }
.alert-success a, .alert-success .alert-link{ color:#c6f0d3 !important; }
.alert-warning a, .alert-warning .alert-link{ color:#ffe3a6 !important; }
.alert-info a,    .alert-info .alert-link{    color:#dcf1f8 !important; }