/* ==========================================================
   LOEMS Smart Agriculture Platform — Design System
   Clean, modern dashboard UI
   ========================================================== */
:root {
  --primary:        #1a5c38;
  --primary-light:  #2d8c56;
  --primary-dark:   #0f3d25;
  --accent:         #4caf6e;
  --accent-bright:  #78d49a;

  --bg-base:        #f0f4f2;
  --bg-card:        #ffffff;
  --bg-sidebar:     #0d1f15;
  --bg-sidebar-2:   #132a1c;
  --bg-hover:       rgba(26,92,56,.07);

  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #6b7280;
  --text-light:     #9ca3af;
  --text-sidebar:   #d1d5db;

  --border:         rgba(0,0,0,.09);
  --border-light:   rgba(0,0,0,.05);

  --shadow-sm:  0 1px 3px rgba(0,0,0,.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,.1);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.14);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.18);

  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;

  --sidebar-w:  260px;
  --topbar-h:   64px;
  --transition: .25s cubic-bezier(.4,0,.2,1);

  /* Status colours */
  --green:  #16a34a; --green-bg:  #f0fdf4; --green-border: #bbf7d0;
  --yellow: #ca8a04; --yellow-bg: #fefce8; --yellow-border:#fde68a;
  --red:    #dc2626; --red-bg:    #fff5f5; --red-border:   #fecaca;
  --blue:   #2563eb; --blue-bg:   #eff6ff; --blue-border:  #bfdbfe;
  --purple: #7c3aed; --purple-bg: #f5f3ff; --purple-border:#ddd6fe;
  --orange: #ea580c; --orange-bg: #fff7ed; --orange-border:#fed7aa;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',system-ui,sans-serif; font-size:15px; color:var(--text-primary); background:var(--bg-base); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; }
button { font-family:inherit; }

/* ── Layout ── */
.platform-layout { display:flex; min-height:100vh; }

/* ── SIDEBAR ── */
.sidebar {
  width:var(--sidebar-w);
  background:var(--bg-sidebar);
  position:fixed; top:0; left:0; bottom:0;
  display:flex; flex-direction:column;
  z-index:200; overflow-y:auto;
  transition:transform var(--transition);
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
}
.sidebar-brand {
  padding:1.25rem 1.5rem;
  display:flex; align-items:center; gap:.75rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebar-brand img { height:32px; width:auto; }
.sidebar-brand-text { font-size:.88rem; font-weight:700; color:#fff; line-height:1.3; }
.sidebar-brand-text small { font-size:.7rem; color:var(--accent-bright); font-weight:500; display:block; }
.sidebar-section { padding:.75rem 1rem .25rem; }
.sidebar-section-label { font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); padding:0 .5rem; margin-bottom:.25rem; }
.sidebar-nav-item {
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem .9rem; border-radius:10px; margin-bottom:2px;
  color:var(--text-sidebar); font-size:.87rem; font-weight:500;
  cursor:pointer; transition:all var(--transition); position:relative;
}
.sidebar-nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar-nav-item.active { background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; box-shadow:0 4px 16px rgba(26,92,56,.4); }
.sidebar-nav-item i { width:18px; text-align:center; font-size:.9rem; }
.sidebar-nav-item .badge { margin-left:auto; background:var(--accent); color:#fff; font-size:.65rem; font-weight:700; padding:2px 7px; border-radius:20px; }
.sidebar-footer { margin-top:auto; padding:1rem; border-top:1px solid rgba(255,255,255,.07); }
.sidebar-user { display:flex; align-items:center; gap:.75rem; }
.sidebar-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--primary-light),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:#fff; flex-shrink:0; }
.sidebar-user-name { font-size:.82rem; font-weight:600; color:#fff; }
.sidebar-user-role { font-size:.72rem; color:rgba(255,255,255,.45); text-transform:capitalize; }
.sidebar-logout { margin-left:auto; background:none; border:none; color:rgba(255,255,255,.4); cursor:pointer; transition:color var(--transition); padding:4px; }
.sidebar-logout:hover { color:#fc8181; }

/* Mobile overlay */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:199; }

/* ── MAIN CONTENT ── */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }

/* ── TOPBAR ── */
.topbar {
  height:var(--topbar-h); background:var(--bg-card);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 1.75rem;
  position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow-sm);
}
.topbar-menu-btn { display:none; background:none; border:none; color:var(--text-secondary); font-size:1.2rem; cursor:pointer; margin-right:1rem; }
.topbar-title { font-size:1.1rem; font-weight:700; color:var(--text-primary); }
.topbar-title small { font-size:.78rem; font-weight:400; color:var(--text-muted); margin-left:.5rem; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:1rem; }
.topbar-icon-btn { background:none; border:none; color:var(--text-muted); font-size:1rem; cursor:pointer; position:relative; padding:6px; border-radius:8px; transition:all var(--transition); }
.topbar-icon-btn:hover { background:var(--bg-hover); color:var(--primary); }
.topbar-notif-dot { position:absolute; top:4px; right:4px; width:8px; height:8px; background:var(--red); border-radius:50%; border:2px solid var(--bg-card); }
.topbar-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--primary-light),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; color:#fff; cursor:pointer; }

/* ── PAGE CONTENT ── */
.page-content { flex:1; padding:2rem 1.75rem; max-width:1400px; width:100%; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.75rem; flex-wrap:wrap; gap:1rem; }
.page-header-left h1 { font-size:1.5rem; font-weight:800; color:var(--text-primary); }
.page-header-left p  { font-size:.88rem; color:var(--text-muted); margin-top:.2rem; }
.page-header-right { display:flex; gap:.75rem; flex-wrap:wrap; }

/* ── CARDS ── */
.card { background:var(--bg-card); border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.card-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.card-header h3 { font-size:.95rem; font-weight:700; color:var(--text-primary); }
.card-body { padding:1.5rem; }
.card-footer { padding:1rem 1.5rem; border-top:1px solid var(--border-light); }

/* ── STAT CARDS ── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.25rem; margin-bottom:1.75rem; }
.stat-card { padding:1.5rem; border-radius:var(--radius-lg); background:var(--bg-card); border:1px solid var(--border); display:flex; align-items:flex-start; gap:1rem; transition:transform var(--transition), box-shadow var(--transition); }
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.stat-icon--green  { background:var(--green-bg);  color:var(--green);  }
.stat-icon--blue   { background:var(--blue-bg);   color:var(--blue);   }
.stat-icon--yellow { background:var(--yellow-bg); color:var(--yellow); }
.stat-icon--purple { background:var(--purple-bg); color:var(--purple); }
.stat-icon--red    { background:var(--red-bg);    color:var(--red);    }
.stat-icon--orange { background:var(--orange-bg); color:var(--orange); }
.stat-value { font-size:1.7rem; font-weight:800; color:var(--text-primary); line-height:1.1; }
.stat-label { font-size:.8rem; color:var(--text-muted); margin-top:.2rem; }
.stat-trend { font-size:.75rem; font-weight:600; margin-top:.35rem; }
.stat-trend.up   { color:var(--green);  }
.stat-trend.down { color:var(--red);    }

/* ── GRID LAYOUTS ── */
.grid-2   { display:grid; grid-template-columns:1fr 1fr;      gap:1.25rem; }
.grid-3   { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.grid-2-1 { display:grid; grid-template-columns:2fr 1fr;      gap:1.25rem; }
.grid-1-2 { display:grid; grid-template-columns:1fr 2fr;      gap:1.25rem; }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem; border-radius:10px; font-size:.85rem; font-weight:600; cursor:pointer; border:none; transition:all var(--transition); font-family:inherit; }
.btn-sm  { padding:.45rem .9rem; font-size:.8rem; border-radius:8px; }
.btn-lg  { padding:.8rem 1.6rem; font-size:.95rem; border-radius:12px; }
.btn-full{ width:100%; justify-content:center; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; box-shadow:0 3px 12px rgba(26,92,56,.25); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(26,92,56,.35); }
.btn-secondary { background:var(--bg-base); color:var(--text-secondary); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--primary); color:var(--primary); }
.btn-danger { background:var(--red-bg); color:var(--red); border:1px solid var(--red-border); }
.btn-danger:hover { background:var(--red); color:#fff; }
.btn-icon { padding:.5rem; border-radius:8px; background:var(--bg-base); border:1px solid var(--border); color:var(--text-muted); }
.btn-icon:hover { border-color:var(--primary); color:var(--primary); }

/* ── BADGES / STATUS ── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:600; }
.badge-green  { background:var(--green-bg);  color:var(--green);  border:1px solid var(--green-border);  }
.badge-yellow { background:var(--yellow-bg); color:var(--yellow); border:1px solid var(--yellow-border); }
.badge-red    { background:var(--red-bg);    color:var(--red);    border:1px solid var(--red-border);    }
.badge-blue   { background:var(--blue-bg);   color:var(--blue);   border:1px solid var(--blue-border);   }
.badge-purple { background:var(--purple-bg); color:var(--purple); border:1px solid var(--purple-border); }
.badge-dot::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ── FORM ELEMENTS ── */
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block; font-size:.82rem; font-weight:600; color:var(--text-secondary); margin-bottom:.4rem; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:.7rem 1rem; background:var(--bg-base);
  border:1.5px solid var(--border); border-radius:10px;
  font-size:.88rem; color:var(--text-primary); outline:none;
  transition:border-color .2s, box-shadow .2s; font-family:inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(26,92,56,.1);
}
.form-group textarea { resize:vertical; min-height:90px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.form-hint { font-size:.75rem; color:var(--text-muted); margin-top:.3rem; }

/* ── TABLE ── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:.75rem 1rem; text-align:left; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); border-bottom:2px solid var(--border); white-space:nowrap; }
.data-table td { padding:.85rem 1rem; font-size:.87rem; color:var(--text-secondary); border-bottom:1px solid var(--border-light); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--bg-hover); }
.table-wrap { overflow-x:auto; }

/* ── MAP ── */
#farm-map, #ndvi-map, #sensor-map { border-radius:var(--radius-lg); overflow:hidden; }
.leaflet-container { font-family:inherit !important; }

/* ── PROGRESS / GAUGE ── */
.progress-bar { height:8px; background:var(--bg-base); border-radius:20px; overflow:hidden; }
.progress-fill { height:100%; border-radius:20px; transition:width .6s ease; }
.progress-fill--green  { background:linear-gradient(90deg,var(--green),var(--accent)); }
.progress-fill--yellow { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.progress-fill--red    { background:linear-gradient(90deg,var(--red),#f87171); }
.progress-fill--blue   { background:linear-gradient(90deg,var(--blue),#60a5fa); }

/* ── NDVI SCALE ── */
.ndvi-scale { display:flex; height:16px; border-radius:8px; overflow:hidden; width:100%; }
.ndvi-scale-segment { flex:1; }

/* ── SENSOR GAUGE ── */
.sensor-gauge-wrap { position:relative; text-align:center; }
.sensor-gauge-label { position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-size:.75rem; color:var(--text-muted); white-space:nowrap; }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:500; display:flex; align-items:center; justify-content:center; padding:1rem; backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity var(--transition); }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:var(--bg-card); border-radius:var(--radius-xl); padding:2rem; max-width:560px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-xl); transform:translateY(20px) scale(.97); transition:transform var(--transition); }
.modal-overlay.open .modal { transform:none; }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.modal-header h3 { font-size:1.1rem; font-weight:700; }
.modal-close { background:none; border:none; color:var(--text-muted); font-size:1.2rem; cursor:pointer; padding:4px; border-radius:6px; transition:all var(--transition); }
.modal-close:hover { color:var(--red); background:var(--red-bg); }
.modal-footer { display:flex; gap:.75rem; justify-content:flex-end; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--border-light); }

/* ── ALERTS ── */
.alert { padding:.85rem 1.1rem; border-radius:10px; font-size:.85rem; margin-bottom:1rem; display:flex; align-items:flex-start; gap:.75rem; }
.alert i { flex-shrink:0; margin-top:2px; }
.alert-success { background:var(--green-bg); color:#166534; border:1px solid var(--green-border); }
.alert-warning { background:var(--yellow-bg); color:#92400e; border:1px solid var(--yellow-border); }
.alert-danger  { background:var(--red-bg);   color:#991b1b; border:1px solid var(--red-border);   }
.alert-info    { background:var(--blue-bg);  color:#1e40af; border:1px solid var(--blue-border);  }

/* ── EMPTY STATE ── */
.empty-state { text-align:center; padding:3rem 1.5rem; }
.empty-state i { font-size:3rem; color:var(--text-light); margin-bottom:1rem; display:block; }
.empty-state h3 { font-size:1rem; font-weight:600; color:var(--text-secondary); margin-bottom:.4rem; }
.empty-state p  { font-size:.85rem; color:var(--text-muted); }

/* ── LOADING ── */
.spinner { display:inline-block; width:20px; height:20px; border:2.5px solid rgba(26,92,56,.15); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-overlay { display:flex; align-items:center; justify-content:center; padding:3rem; flex-direction:column; gap:1rem; color:var(--text-muted); font-size:.88rem; }

/* ── TOAST ── */
.toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; }
.toast { background:#111827; color:#fff; padding:.8rem 1.25rem; border-radius:12px; font-size:.85rem; display:flex; align-items:center; gap:.75rem; box-shadow:var(--shadow-lg); animation:toastIn .3s ease; min-width:250px; max-width:360px; }
.toast.success { border-left:3px solid var(--green); }
.toast.error   { border-left:3px solid var(--red);   }
.toast.warning { border-left:3px solid #f59e0b;       }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:none; } }

/* ── CHART CONTAINERS ── */
.chart-container { position:relative; }

/* ── NDVI COLORS ── */
.ndvi-excellent { color:#166534; } .ndvi-good { color:#15803d; } .ndvi-moderate { color:#ca8a04; } .ndvi-poor { color:#ea580c; } .ndvi-critical { color:#dc2626; }

/* ──────────────────────────────
   RESPONSIVE
────────────────────────────── */
@media(max-width:1100px) {
  .grid-2-1, .grid-1-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:none; }
  .sidebar-overlay { display:block; }
  .main-content { margin-left:0; }
  .topbar-menu-btn { display:block; }
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
  .page-content { padding:1.25rem; }
}
@media(max-width:600px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .page-header { flex-direction:column; }
}
@media(max-width:380px) {
  .stats-grid { grid-template-columns:1fr; }
}

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,.15); border-radius:10px; }