:root{
  --green-900:#1b3a2b;
  --green-700:#2d6a4f;
  --green-500:#40916c;
  --green-100:#e8f4ec;
  --amber:#c98a1c;
  --red:#b3352c;
  --ink:#20241f;
  --muted:#66766a;
  --border:#dfe6e1;
  --bg:#f6f8f5;
  --card:#ffffff;
  --radius:10px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:14.5px;
}
a{color:var(--green-700); text-decoration:none;}
a:hover{text-decoration:underline;}

.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:230px; background:var(--green-900); color:#dff0e6; flex-shrink:0;
  padding:18px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;
  z-index:210;
}
.brand{font-weight:700; font-size:16px; line-height:1.3; margin-bottom:18px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.brand span{font-weight:400; font-size:12px; color:#a9cdb8;}
.nav-group-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#87ab95; margin:16px 4px 6px;}
.sidebar a{
  display:block; padding:7px 10px; border-radius:8px; color:#dff0e6; font-size:13.5px; margin-bottom:2px;
}
.sidebar a:hover{background:#264c39; text-decoration:none;}
.sidebar a.active{background:var(--green-500); color:#fff; font-weight:600;}

.content{flex:1; min-width:0;}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--card); border-bottom:1px solid var(--border); padding:12px 24px;
  gap:10px; position:sticky; top:0; z-index:120;
}
.topbar-left{display:flex; align-items:center; gap:10px; min-width:0;}
.farm-name{font-weight:600;}
.role-badge{background:var(--green-100); color:var(--green-700); padding:2px 8px; border-radius:20px; font-size:11px; text-transform:uppercase;}
.page-body{padding:22px 26px 60px;}

/* Mobile off-canvas menu: hidden by default, shown via header.php + JS */
.menu-toggle{
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px; border:1px solid var(--border);
  background:#fff; cursor:pointer; flex-shrink:0; padding:0;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:''; display:block; width:18px; height:2px; background:var(--ink); border-radius:2px;
  position:relative; transition:.15s;
}
.menu-toggle span::before{position:absolute; top:-6px;}
.menu-toggle span::after{position:absolute; top:6px;}
.sidebar-close{
  display:block; margin-left:auto; background:none; border:none; color:#dff0e6;
  font-size:20px; line-height:1; cursor:pointer; padding:4px 8px;
}
.sidebar-overlay{display:none;}

/* Desktop sidebar collapse (toggled by the ✕ / hamburger buttons via JS) */
.app-shell.sidebar-collapsed .sidebar{display:none;}
.app-shell.sidebar-collapsed .menu-toggle{display:inline-flex;}

h1{font-size:21px; margin:0 0 4px;}
h2{font-size:16px; margin:24px 0 10px;}
.subtitle{color:var(--muted); margin-bottom:18px; font-size:13px;}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px;}
.grid{display:grid; gap:14px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:700px){.grid-2{grid-template-columns:1fr;}}
@media (max-width:600px){.grid-3,.grid-4{grid-template-columns:1fr;}}

/* Grid items default to min-width:auto, which ignores a descendant's
   overflow-x:auto (e.g. .table-responsive) and forces the whole grid — and
   the page — wider than the screen on mobile. This lets every grid item
   shrink below its content's natural width so internal scrolling actually
   contains wide tables instead of blowing out the layout. Affects every
   .grid usage: master-detail layouts (crops.php, blends.php, customers.php),
   inline 2-column grids (environment.php), and .grid-2 (market_analysis.php). */
.grid > *{min-width:0;}

.kpi{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px;}
.kpi .label{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.kpi .value{font-size:24px; font-weight:700; color:var(--green-900); margin-top:4px;}
.kpi .sub{font-size:12px; color:var(--muted); margin-top:2px;}

table{width:100%; border-collapse:collapse; background:var(--card);}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); font-size:13.5px;}
th{background:var(--green-100); color:var(--green-900); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.02em;}
tr:hover td{background:#fafcf9;}

/* Tables scroll horizontally on small screens instead of squashing/breaking (wrapper added by responsive.js) */
.table-responsive{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:16px;}
.table-responsive table{margin-bottom:0;}
@media (max-width:640px){
  .table-responsive table{min-width:560px;}
  th,td{white-space:nowrap;}
}

/* Box/card display for data tables on phones (responsive.js adds
   .table-cards + data-label to every table that has a header row — same
   process on every page: Crop Library, Blends/Mixes, Customers/CRM,
   Environment & Alerts, Market Analysis, Farm Settings, Batches, etc.).
   Replaces sideways-scroll-and-hunt with one self-contained box per row —
   nothing (status, actions, flags) stays hidden off-screen. */
@media (max-width:640px){
  table.table-cards{min-width:0 !important; width:100%;}
  table.table-cards, table.table-cards tbody{display:block;}
  table.table-cards tr:first-child{display:none;} /* header row — replaced by inline labels below */
  table.table-cards tr{
    display:block; border:1px solid var(--border); border-radius:var(--radius);
    padding:4px 12px; margin-bottom:10px; background:var(--card);
  }
  table.table-cards tr:hover td{background:none;}
  table.table-cards td{
    display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
    gap:4px 12px; border-bottom:1px solid var(--bg); padding:8px 0;
    white-space:normal !important; text-align:right;
  }
  table.table-cards td:last-child{border-bottom:none;}
  table.table-cards td[data-label]::before{
    content:attr(data-label); font-weight:600; color:var(--muted); font-size:11px;
    text-transform:uppercase; letter-spacing:.03em; text-align:left; flex-shrink:0;
  }
  table.table-cards td:not([data-label]){justify-content:flex-start; text-align:left;}
  table.table-cards td > form.inline{margin-left:auto;}
}

.btn{
  display:inline-block; background:var(--green-700); color:#fff; border:none; border-radius:7px;
  padding:8px 14px; font-size:13.5px; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--green-500); text-decoration:none;}
.btn-sm{padding:4px 9px; font-size:12px;}
.btn-secondary{background:#eef2ee; color:var(--ink);}
.btn-secondary:hover{background:#e0e6e0;}
.btn-danger{background:var(--red);}

.badge{padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; display:inline-block;}
.badge-green{background:#e3f3e9; color:var(--green-700);}
.badge-amber{background:#fbf0dc; color:var(--amber);}
.badge-red{background:#fbe4e1; color:var(--red);}
.badge-gray{background:#eceeec; color:var(--muted);}

form.inline{display:inline;}
label{display:block; font-size:12.5px; font-weight:600; margin:10px 0 4px; color:#3a4a3f;}
input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], input[type=tel],
select, textarea{
  width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:7px; font-size:13.5px; background:#fff;
}
textarea{min-height:70px;}
.form-row{display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px;}
.form-actions{margin-top:18px;}

/* Mandatory mobile-number field used on every Inquiries form: a country
   code dropdown (defaults to India, +91) next to the number itself.
   Always stays on one line — country selector + number never stack,
   even on narrow phone screens (see the mobile breakpoint below). */
.phone-row{display:flex; flex-wrap:nowrap; gap:6px; align-items:center;}
.phone-row select.phone-country-code{flex:0 0 150px; width:150px; min-width:0;}
.phone-row input[type=tel]{flex:1 1 auto; width:auto; min-width:0;}
.phone-country-flag{flex:0 0 auto;}

@media (max-width:640px){
  /* Stack any multi-column form row (including inline pixel-width variants) to one column */
  .form-row, .form-row[style]{grid-template-columns:1fr !important;}
  /* Prevent iOS auto-zoom on focus by keeping inputs at 16px */
  input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], input[type=tel],
  select, textarea{font-size:16px;}
  /* Country code + number must still fit on one line on a phone screen,
     so shrink the flag and the select instead of letting them wrap. */
  .phone-row{flex-wrap:nowrap; gap:4px;}
  .phone-country-flag{width:18px; height:14px;}
  .phone-row select.phone-country-code{flex:0 0 78px; width:78px; padding-left:4px; padding-right:16px; font-size:13px;}
  .phone-row input[type=tel]{flex:1 1 auto; min-width:0;}
}

.flash{padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:13.5px;}
.flash-success{background:#e3f3e9; color:#1e5d3f;}
.flash-error{background:#fbe4e1; color:var(--red);}

.tabs{display:flex; gap:4px; margin-bottom:14px; border-bottom:1px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tabs a{padding:8px 14px; border-bottom:2px solid transparent; color:var(--muted); font-size:13px; white-space:nowrap; flex-shrink:0;}
.tabs a.active{color:var(--green-700); border-bottom-color:var(--green-700); font-weight:600;}

.login-wrap{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--green-900); padding:16px;}
.login-card{background:#fff; padding:34px 32px; border-radius:14px; width:360px; max-width:100%;}
.login-card h1{text-align:center;}

/* Master-detail two-column layouts (e.g. blends.php, crops.php, customers.php) stack on mobile */
@media (max-width:800px){
  .grid[style*="300px 1fr"],
  .grid[style*="340px 1fr"]{grid-template-columns:1fr !important;}
}
@media (max-width:640px){
  /* Any generic 2-column inline grid (e.g. environment.php) stacks */
  div[style*="grid-template-columns:1fr 1fr;"]{grid-template-columns:1fr !important;}
  /* 3-column inline grid (e.g. trays.php) becomes 2 columns */
  div[style*="repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:420px){
  div[style*="repeat(3,1fr)"]{grid-template-columns:1fr !important;}
  /* Calendar keeps 7 columns (days of week) but tightens spacing */
  div[style*="repeat(7,1fr)"]{gap:3px !important;}
  div[style*="repeat(7,1fr)"] a{padding:3px !important; min-height:42px !important;}
}
.muted{color:var(--muted);}
.small{font-size:12px;}
.text-right{text-align:right;}
/* Long unbroken strings (API endpoint URLs, JSON examples on Settings) have
   no whitespace to wrap on, so they force horizontal overflow on narrow
   screens unless explicitly allowed to break mid-token. */
.mono{font-family:'Courier New',monospace; overflow-wrap:break-word; word-break:break-word;}

/* Added by 006 multi-farm switching + offline queue merge */
.farm-switcher{display:inline-block; max-width:100%;}
.farm-switcher select{font-weight:600;font-size:1em;border:1px solid #ccc;border-radius:4px;padding:2px 6px;background:#fff; max-width:100%;}
.sync-badge{display:none;font-size:.8em;padding:2px 8px;border-radius:10px;background:#f59e0b;color:#fff;margin-left:8px;}
.sync-badge.show{display:inline-block;}

/* ---------- Mobile layout (menu bar / sidebar / boxes) ---------- */
@media (max-width:900px){
  .menu-toggle{display:inline-flex;}
  .sidebar-close{
    display:block; margin-left:auto; background:none; border:none; color:#dff0e6;
    font-size:20px; line-height:1; cursor:pointer; padding:4px 8px;
  }
  .sidebar{
    position:fixed; left:0; top:0; height:100%; width:250px; max-width:82vw;
    transform:translateX(-100%); transition:transform .2s ease; box-shadow:2px 0 18px rgba(0,0,0,.25);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-overlay{
    display:none; position:fixed; inset:0; background:rgba(15,25,18,.45); z-index:200;
  }
  .sidebar-overlay.show{display:block;}

  .topbar{padding:10px 14px; flex-wrap:wrap;}
  .user-box{font-size:12.5px; display:flex; align-items:center; flex-wrap:wrap; gap:4px;}
  .page-body{padding:16px 14px 48px;}

  h1{font-size:19px;}
  .card{padding:14px;}
}

@media (max-width:480px){
  .kpi .value{font-size:20px;}
  .login-card{padding:26px 20px;}
  /* Common inline "title + action" header rows wrap instead of overflowing */
  div[style*="justify-content:space-between;align-items:center"]{
    flex-wrap:wrap; row-gap:8px;
  }
}