/* ================================================================
   AgriPlaner – Designsprache v2 „Agri-Tech"
   Nur Optik. Navigation & Struktur des Interfaces bleiben unverändert.
   Schrift Manrope wird in index.php <head> geladen.
   ================================================================ */
:root{
  --forest-900:#17301a; --forest-700:#2e6b2f; --forest-600:#3c7d34;
  --sprout:#7bbf3f;
  --ink:#1c2418; --ink-soft:#5f6853; --ink-faint:#97a084;
  --paper:#eef1e9; --surface:#ffffff;
  --line:#e4e7db; --line-strong:#d4d9c7;
  --ok:#2f9e44; --warn:#cf8a1c; --danger:#cf4038; --info:#3a72b0;
  --radius:16px;
  --shadow-sm:0 1px 2px rgba(23,48,26,.05);
  --shadow:0 1px 2px rgba(23,48,26,.04), 0 8px 24px rgba(23,48,26,.07);
  --shadow-lg:0 12px 32px rgba(23,48,26,.12);
}

/* ── Grundfläche + Basistypo ──────────────────────────────────── */
body, .app-content, .content-wrapper, .horizontal-layout{
  background-color:var(--paper) !important; color:var(--ink);
}
h1,h2,h3,h4,h5,.card-title,.fw-bolder{ letter-spacing:-.01em; }

/* ── Obere Navbar ─────────────────────────────────────────────── */
.header-navbar.navbar-brand-center{
  background:var(--surface) !important;
  box-shadow:0 1px 0 var(--line) !important;
}
.header-navbar .navbar-brand span{ color:var(--forest-700) !important; }

/* ── Horizontales Menü ────────────────────────────────────────── */
.horizontal-menu-wrapper .navbar-horizontal{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
}
.header-navbar .nav-link, .horizontal-menu-wrapper .nav-link{
  transition:background .15s ease, color .15s ease !important; border-radius:11px !important;
}
#main-menu-navigation > li > a.nav-link{
  color:var(--ink-soft) !important; font-weight:600 !important; border-radius:11px !important;
}
#main-menu-navigation > li > a.nav-link:hover{ background:#e9f1e0 !important; color:var(--forest-700) !important; }
#main-menu-navigation > li.active > a.nav-link, #main-menu-navigation > li > a.nav-link.active{
  background:linear-gradient(135deg,var(--forest-700),var(--sprout)) !important;
  color:#fff !important; box-shadow:0 6px 16px rgba(46,107,47,.35) !important;
}
/* Icon-Platz vor/nach feather.replace() konstant → kein Layout-Shift */
#main-menu-navigation > li > .nav-link i[data-feather]{ display:inline-block; width:16px; height:16px; flex-shrink:0; }
#main-menu-navigation > li > .nav-link svg{ width:16px !important; height:16px !important; flex-shrink:0; }

/* Mobile "Site Navigation": Vuexys eigenes JS entfernt beim Umschalten in die
   mobile Off-Canvas-Navigation die Klassen .nav-link/.dropdown-toggle von den
   <a>-Elementen der Punkte mit Untermenü (li wird zu "has-sub" statt
   "dropdown") - dadurch griffen die obigen, an .nav-link gebundenen Farb-/
   Schriftregeln dort nicht mehr, und genau diese Punkte (Stammdaten/Tanken/
   Baumpflege/Werkstatt/Sub) blieben in Vuexys unbrandeter Standardfarbe
   stehen, während die übrigen ohne Untermenü korrekt grün-markig erschienen
   ("Buttons haben unterschiedliche Farben"). Eigene, strukturelle Regel ohne
   .nav-link-Abhängigkeit für alle Top-Level-Punkte gleichermaßen. */
#main-menu-navigation > li.nav-item > a,
#main-menu-navigation > li.has-sub > a{
  color:var(--ink-soft) !important; font-weight:600 !important; border-radius:11px !important;
}
#main-menu-navigation > li.has-sub > a:hover{ background:#e9f1e0 !important; color:var(--forest-700) !important; }

/* Ausgeklapptes Untermenü ("Stammdaten" etc.) auf dem Handy: Die vom Theme
   vorgesehene Einrückung/Abgrenzung (vertical-overlay-menu.scss) setzt einen
   zusätzlichen ".main-menu"-Wrapper voraus, den diese horizontale
   Menüvariante beim Umschalten in die mobile Navigation nicht bekommt -
   ohne eigene Regeln wirken die Kind-Einträge wie eine bloße Fortsetzung der
   Hauptliste statt einer erkennbaren Gruppe unter ihrem Elternpunkt. */
#main-menu-navigation > li.has-sub > ul{
  margin:2px 0 8px 20px; padding-left:14px; border-left:2px solid var(--line);
}
#main-menu-navigation > li.has-sub > ul > li > a{
  font-size:13px; font-weight:500; color:#6e6b7b; padding-block:8px !important; border-radius:9px !important;
}
#main-menu-navigation > li.has-sub > ul > li > a:hover{ background:#e9f1e0 !important; color:var(--forest-700) !important; }
/* Icons ohne flex-shrink:0 wurden von der Flexbox auf 0px zusammengedrückt,
   sobald der Text daneben (samt Einrückung + Chevron-Platz) nicht mehr in
   die schmale Spalte passte - je nach Länge des Menütexts mal komplett
   unsichtbar ("keine Icons"), mal nur teilweise ("Icons zu klein"). Text
   kürzt jetzt stattdessen mit Ellipsis, statt das Icon zu verdrängen. */
#main-menu-navigation > li.has-sub > ul > li > a i,
#main-menu-navigation > li.has-sub > ul > li > a svg,
#main-menu-navigation > li.has-sub > ul > li > a img{
  flex-shrink:0 !important; width:16px !important; height:16px !important;
}
#main-menu-navigation > li.has-sub > ul > li > a span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}

/* ── Karten ───────────────────────────────────────────────────── */
.card{
  border:1px solid var(--line) !important; border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
}
.card[style*="gradient"], .card[style*="linear-gradient"]{ border:none !important; }

/* ── Dashboard Header-Banner: tiefes Forest, mehr Präsenz ──────── */
.card[style*="linear-gradient(118deg"]{
  background:linear-gradient(120deg,#2d6a1a 0%,#5c9233 55%,#76a13b 100%) !important;
  box-shadow:0 12px 30px rgba(45,106,26,.28) !important;
  position:relative; overflow:hidden;
}
.card[style*="linear-gradient(118deg"] h3,
.card[style*="linear-gradient(118deg"] h4{ color:#fff !important; font-weight:800 !important; letter-spacing:-.02em; }

/* ── KPI-Kacheln: Zahl in Ink (Manrope), Chip trägt Farbe ─────── */
.row.match-height .card-body h2.fw-bolder{
  color:var(--ink) !important;
  font-family:'Manrope',system-ui,sans-serif !important;
  font-weight:800 !important; font-size:30px !important;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.05 !important;
}
.row.match-height .card-body .card-text{
  text-transform:uppercase; letter-spacing:.6px; font-size:11px !important;
  font-weight:700 !important; color:var(--ink-soft) !important; margin-top:2px !important;
}
.row.match-height .card-body small{ color:var(--ink-faint) !important; }
.card .avatar{
  border-radius:13px !important; width:46px !important; height:46px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}
.card .avatar > span{ display:flex; align-items:center; justify-content:center; line-height:0; }
.card .avatar svg{ width:22px; height:22px; display:block; }

/* Dashboard-Zeitraum-Selects: frosted Look auf dem grünen Header */
.period-select{
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background-color:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  border-radius:10px !important;
  color:#fff !important; font-weight:600 !important;
  padding:6px 32px 6px 12px !important; height:auto !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:12px !important;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease; cursor:pointer;
}
.period-select:hover{ background-color:rgba(255,255,255,.26) !important; border-color:rgba(255,255,255,.55) !important; }
.period-select:focus{ outline:none !important; border-color:rgba(255,255,255,.75) !important; box-shadow:0 0 0 3px rgba(255,255,255,.22) !important; }
.period-select option{ color:#2b2b2b !important; background:#fff !important; }
.row.match-height .card-body .fw-bold[style*="font-size:20px"]{
  color:var(--ink) !important; font-family:'Manrope',sans-serif !important;
  font-weight:800 !important; font-variant-numeric:tabular-nums;
}
.row.match-height .card-body div[style*="color:#b9b9c3"]{
  color:var(--ink-soft) !important; text-transform:uppercase; letter-spacing:.5px; font-weight:600;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn{ border-radius:11px !important; font-weight:600 !important;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease !important; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-primary, .btn-success{
  background:linear-gradient(135deg,var(--forest-700),var(--sprout)) !important;
  border:none !important; color:#fff !important;
}
.btn-primary:hover, .btn-success:hover{ filter:brightness(1.05);
  box-shadow:0 8px 18px rgba(46,107,47,.35) !important; }
.btn-outline-secondary, .btn-secondary, .btn-light{
  background:var(--surface) !important; border:1px solid var(--line-strong) !important; color:var(--ink-soft) !important;
}
.btn-outline-secondary:hover, .btn-light:hover, .btn-secondary:hover{
  background:#e9f1e0 !important; border-color:var(--sprout) !important; color:var(--forest-700) !important;
}

/* ── Tabellen ─────────────────────────────────────────────────── */
/* Header-Reihe nimmt die Card-Farbe an (transparent); Abhebung nur über
   Uppercase-Text + kräftigere Trennlinie unten. */
.table thead, thead{ background:transparent !important; }
.table thead th, thead th{
  background:transparent !important; color:var(--ink) !important; font-weight:700 !important;
  text-transform:uppercase; letter-spacing:.5px; font-size:11px !important;
  border-bottom:2px solid var(--line-strong) !important; padding-top:14px !important; padding-bottom:14px !important;
}
/* Sticky-Kopfzeilen (in Modals) brauchen einen deckenden Hintergrund,
   sonst scrollt Inhalt sichtbar darunter durch. */
thead[style*="sticky"], thead[style*="sticky"] th{ background:var(--surface) !important; }
.table tbody tr td{ border-color:var(--line) !important; color:var(--ink) !important; vertical-align:middle; }
.table-hover tbody tr:hover td, tbody tr[onclick]:hover td{ background:#f0f5e8 !important; }
tbody tr[onclick]{ cursor:pointer !important; }
/* DataTables Scroll-Modus: die versteckte Maß-Kopfzeile im Scroll-Body darf
   NICHT die thead-Optik erben (sonst leeres grünes Band unter dem echten Kopf). */
.dataTables_scrollBody thead th, .dataTables_scrollBody thead td{
  padding-top:0 !important; padding-bottom:0 !important;
  background:transparent !important; border-top:0 !important; border-bottom:0 !important;
  height:0 !important; line-height:0 !important;
}
/* DataTables erst nach vollständiger Initialisierung sanft einblenden
   (verhindert FOUC/Springen: rohe Tabelle wird bis dahin ausgeblendet). */
#invoiceTable:not(.dataTable), #jobsTable:not(.dataTable){ visibility:hidden; }
.dataTables_wrapper{ opacity:0; transition:opacity .2s ease; }
.dataTables_wrapper.dt-ready{ opacity:1; }
td .fw-bold, td strong{ font-variant-numeric:tabular-nums; }

/* ── Status-Badges ────────────────────────────────────────────── */
.badge{ border-radius:8px !important; font-weight:700 !important; letter-spacing:.2px; padding:.42em .7em !important; }
.badge.bg-success,.badge-light-success{ background:#e6f4e9 !important; color:var(--ok) !important; }
.badge.bg-warning,.badge-light-warning{ background:#f8efd8 !important; color:var(--warn) !important; }
.badge.bg-danger, .badge-light-danger { background:#f9e3e2 !important; color:var(--danger) !important; }
.badge.bg-primary,.badge-light-primary{ background:#e7eede !important; color:var(--forest-700) !important; }

/* ── Formularfelder ───────────────────────────────────────────── */
/* input,select,textarea OHNE Checkbox/Radio - die runde 11px-Ecke ist fuer
   Text-/Auswahlfelder gedacht, traf über den nackten "input"-Selektor aber
   auch type=checkbox/radio und verzerrte deren Bootstrap-Form (3px eckig /
   50% rund) zu einem naeherungsweisen Kreis (18px Box + 11px Radius). */
.form-control,.form-select,input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  border-color:var(--line-strong) !important; border-radius:11px !important; color:var(--ink) !important;
}
.form-control:focus,.form-select:focus,
input:focus:not([type="checkbox"]):not([type="radio"]),select:focus,textarea:focus{
  border-color:var(--sprout) !important; box-shadow:0 0 0 3px rgba(123,191,63,.18) !important;
}
::placeholder{ color:#b3bba4 !important; opacity:1 !important; }
label,.col-form-label,.form-label{ color:var(--ink-soft) !important; }

/* ── Seitentitel / Breadcrumb ─────────────────────────────────── */
.content-header-title, h2.content-header-title{ color:var(--ink) !important; font-weight:800 !important; }
.breadcrumb, .content-header-title{ color:var(--ink) !important; }
.breadcrumb a, .content-header a{ color:var(--forest-700) !important; }
.ag-sec-line{ color:var(--ink-soft) !important; border-bottom-color:var(--line-strong) !important; }

/* ── Modal / Sheet Close-Button (Theme-Fix beibehalten) ───────── */
.modal-header .btn-close, .sheet-header .btn-close{
  background-color:transparent !important; box-shadow:none !important;
  filter:invert(1) grayscale(1) brightness(3); opacity:.8; padding:10px !important;
  border-radius:6px !important; width:2rem !important; height:2rem !important;
  transform:none !important; transition:opacity .15s, background-color .15s !important;
}
.modal-header .btn-close:hover, .modal-header .btn-close:focus, .modal-header .btn-close:active,
.sheet-header .btn-close:hover, .sheet-header .btn-close:focus, .sheet-header .btn-close:active{
  opacity:1; background-color:rgba(255,255,255,.15) !important; transform:none !important;
  box-shadow:none !important; outline:none !important;
}

/* ── Dropdown-Items ───────────────────────────────────────────── */
.dropdown-item{ transition:background .12s ease, padding-left .12s ease !important; }
.dropdown-item:hover{ padding-left:1.4rem !important; background:#e9f1e0 !important; color:var(--forest-700) !important; }

/* ── Seitenbreite (Navbar + Content gleich breit) ─────────────── */
@media (min-width: 1200px){
  .header-navbar.floating-nav.container-xxl,
  .content-wrapper.container-xxl,
  .app-content .container-xxl:not(.header-navbar){ max-width:calc(100% - 0.5rem) !important; }
}
@media (min-width: 1400px){
  .header-navbar.floating-nav.container-xxl,
  .content-wrapper.container-xxl,
  .app-content .container-xxl:not(.header-navbar){ max-width:1600px !important; }
}

/* ── Scrollbar dezenter ───────────────────────────────────────── */
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-track{ background:#e7ebe0; }
::-webkit-scrollbar-thumb{ background:#bcc7a8; border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:#95a97e; }

/* ================================================================
   Mobile-Optimierung (additiv, nicht-brechend) – nur <=767px
   ================================================================ */
html, body { max-width:100%; }
@media (max-width:767px){
  body{ overflow-x:hidden; }
  .card-body > .table, .table-sm, table.table{
    display:block; width:100%; max-width:100%;
    overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;
  }
  .dataTables_wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .btn.btn-sm{ min-height:34px; }
  .header-navbar .nav-link, .horizontal-menu-wrapper .nav-link{ padding-top:.6rem; padding-bottom:.6rem; }
  .card{ border-radius:14px !important; }
  .content-wrapper, .app-content{ padding-left:.5rem; padding-right:.5rem; }
  .modal-dialog{ margin:.5rem; max-width:calc(100% - 1rem); }
  input, select, textarea, .form-control, .form-select{ font-size:16px !important; }
  /* Datums-/Zeitfelder in Modals dürfen ihre Zelle nicht sprengen */
  .modal input[type="date"], .modal input[type="datetime-local"], .modal input[type="time"],
  .modal .ag-inp, .modal select{ width:100% !important; min-width:0 !important; box-sizing:border-box; }
}