/* =============================================
   PanenSela — Main Stylesheet
   ============================================= */

:root {
  --green-50:  #f0faf4;
  --green-100: #d1f0de;
  --green-200: #a3e0be;
  --green-400: #4caf7d;
  --green-600: #2d6a4f;
  --green-700: #1e4d38;
  --green-800: #123322;
  --cream:     #f8f5ef;
  --cream-d:   #ede9e0;
  --amber-100: #fef3c7;
  --amber-400: #e9c46a;
  --amber-600: #c98a00;
  --red-100:   #fee2e2;
  --red-400:   #f87171;
  --red-600:   #dc2626;
  --blue-100:  #dbeafe;
  --blue-600:  #2563eb;
  --purple-100:#ede9fe;
  --purple-600:#7c3aed;
  --sl-50:     #f8fafc;
  --sl-100:    #f1f5f9;
  --sl-200:    #e2e8f0;
  --sl-300:    #cbd5e1;
  --sl-400:    #94a3b8;
  --sl-500:    #64748b;
  --sl-600:    #475569;
  --sl-700:    #334155;
  --sl-800:    #1e293b;
  --sl-900:    #0f172a;
  --white:     #ffffff;
  --sidebar-w: 220px;
  --topbar-h:  56px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);

  /* Bridge vars — used by newer components */
  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-tertiary:  #64748b;
  --text-disabled:  #94a3b8;
  --text-inverse:   #ffffff;
  --text-brand:     #047857;

  --surface-0: #ffffff;
  --surface-1: #f8fafc;
  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;

  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.12);
  --border-brand:   rgba(5,150,105,0.3);

  --brand-50:  #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;
  --brand-400: #34d399;
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-800: #065f46;
  --brand-900: #064e3b;

  --teal-400: #2dd4bf;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  --font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;

  --r-xs:   4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --r-xl:   20px; --r-2xl: 24px; --r-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-brand: 0 4px 20px rgba(5,150,105,0.25);
  --shadow-glow:  0 0 0 3px rgba(16,185,129,0.2);

  --grad-brand: linear-gradient(135deg,#059669 0%,#047857 50%,#065f46 100%);
  --grad-hero:  linear-gradient(135deg,#064e3b 0%,#047857 40%,#059669 70%,#10b981 100%);
  --grad-brand-soft: linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);

  --tr-fast:   all 0.12s ease;
  --tr-normal: all 0.2s cubic-bezier(0.4,0,0.2,1);
  --tr-slow:   all 0.35s cubic-bezier(0.4,0,0.2,1);
  --tr-spring: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

/* DARK MODE */
[data-theme="dark"] {
  --cream:    #0f172a;
  --cream-d:  #1e293b;
  --white:    #1e293b;
  --sl-50:    #0f172a;
  --sl-100:   #1e293b;
  --sl-200:   #334155;
  --sl-300:   #475569;
  --sl-400:   #64748b;
  --sl-500:   #94a3b8;
  --sl-600:   #cbd5e1;
  --sl-700:   #e2e8f0;
  --sl-800:   #f1f5f9;
  --sl-900:   #f8fafc;
  --shadow:   0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 4px 6px rgba(0,0,0,.3);

  /* Bridge vars dark mode */
  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary:  #94a3b8;
  --text-disabled:  #64748b;
  --text-inverse:   #0f172a;
  --text-brand:     #34d399;

  --surface-0: #0f172a;
  --surface-1: #1e293b;
  --surface-2: #293548;
  --surface-3: #334155;

  --border-subtle:  rgba(255,255,255,0.05);
  --border-default: rgba(255,255,255,0.09);
  --border-brand:   rgba(16,185,129,0.28);

  --grad-brand-soft: linear-gradient(135deg,#022c22 0%,#064e3b 100%);
  --shadow-brand: 0 4px 20px rgba(5,150,105,0.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; }
body {
  font-family: var(--font-body, 'Inter', -apple-system, sans-serif);
  background: var(--surface-1, var(--cream));
  color: var(--text-primary, var(--sl-800));
  line-height: 1.6;
  min-height: 100vh;
  transition: background 0.25s ease, color 0.25s ease;
}

a { color: var(--green-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* LAYOUT */
.app-wrapper { display: flex; min-height: 100vh; }

/* SIDEBAR */
.sidebar {
  width: var(--sidebar-w);
  background: var(--green-800);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  transition: transform .25s ease;
}
.sidebar-logo {
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.logo-mark { display: flex; align-items: center; gap: 10px; }
.logo-icon {
  width: 34px; height: 34px;
  background: var(--green-400);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.logo-text { font-size: 15px; font-weight: 700; color: white; letter-spacing: -.02em; }
.logo-sub  { font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .08em; text-transform: uppercase; }

.sidebar-nav { padding: 12px 8px; flex: 1; overflow-y: auto; }
.nav-section  { margin-bottom: 18px; }
.nav-section-label {
  font-size: 10px; color: rgba(255,255,255,.35);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 0 12px; margin-bottom: 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius);
  cursor: pointer; color: rgba(255,255,255,.65);
  font-size: 13px; transition: all .15s;
  margin-bottom: 2px; text-decoration: none;
}
.nav-item:hover { background: rgba(255,255,255,.08); color: white; text-decoration: none; }
.nav-item.active { background: var(--green-600); color: white; }
.nav-item i { font-size: 17px; width: 20px; flex-shrink: 0; }
.nav-badge {
  margin-left: auto;
  background: var(--amber-400); color: var(--green-800);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
}

.sidebar-user {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; gap: 10px;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green-400);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white; flex-shrink: 0;
}
.user-name  { font-size: 12px; font-weight: 500; color: white; }
.user-role  { font-size: 10px; color: rgba(255,255,255,.4); }

/* MAIN */
.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(--white);
  border-bottom: 1px solid var(--sl-200);
  display: flex; align-items: center;
  padding: 0 24px; gap: 12px;
  position: sticky; top: 0; z-index: 50;
}
.topbar-title { font-size: 16px; font-weight: 600; color: var(--sl-800); letter-spacing: -.02em; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* PAGE CONTENT */
.page-content { padding: 24px; flex: 1; }

/* CARDS */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--sl-200);
  box-shadow: var(--shadow);
}
.card-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--sl-100);
  display: flex; align-items: center; gap: 10px;
}
.card-title { font-size: 14px; font-weight: 600; color: var(--sl-700); }
.card-body  { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--sl-100); }

/* SUMMARY CARDS */
.summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }
.summary-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--sl-200);
  padding: 18px;
  position: relative; overflow: hidden;
}
.summary-card::before { content:''; position:absolute; top:0;left:0;right:0;height:3px; }
.summary-card.c-green::before  { background:var(--green-400); }
.summary-card.c-amber::before  { background:var(--amber-400); }
.summary-card.c-blue::before   { background:#60a5fa; }
.summary-card.c-purple::before { background:#a78bfa; }
.sc-label { font-size:11px;color:var(--sl-400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px; }
.sc-value { font-size:26px;font-weight:700;color:var(--sl-800);letter-spacing:-.03em;line-height:1; }
.sc-unit  { font-size:12px;color:var(--sl-400);margin-left:3px;font-weight:400; }
.sc-change {
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;margin-top:8px;
  padding:2px 8px;border-radius:20px;
}
.sc-change.up   { background:var(--green-100);color:var(--green-700); }
.sc-change.down { background:var(--red-100);color:var(--red-600); }
.sc-change.neutral { background:var(--sl-100);color:var(--sl-500); }
.sc-icon { position:absolute;right:16px;top:18px;font-size:28px;opacity:.1;color:var(--sl-800); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  cursor: pointer; border: none;
  transition: all .15s; text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary  { background:var(--green-600);color:white; }
.btn-primary:hover { background:var(--green-700); }
.btn-secondary { background:var(--sl-100);color:var(--sl-700);border:1px solid var(--sl-200); }
.btn-secondary:hover { background:var(--sl-200); }
.btn-danger   { background:var(--red-600);color:white; }
.btn-danger:hover { background:#b91c1c; }
.btn-ghost    { background:transparent;color:var(--sl-500);border:1px solid var(--sl-200); }
.btn-ghost:hover { background:var(--sl-100); }
.btn-sm { padding:5px 10px;font-size:12px; }
.btn-icon { width:34px;height:34px;padding:0;justify-content:center; }

/* FORMS */
.form-group { margin-bottom:16px; }
.form-label { display:block;font-size:12px;font-weight:500;color:var(--sl-600);margin-bottom:5px; }
.form-label .req { color:var(--red-600); }
.form-control {
  width:100%;padding:9px 12px;
  border-radius:var(--radius);
  border:1px solid var(--sl-200);
  background:var(--sl-50);
  font-size:13px;color:var(--sl-800);
  outline:none;transition:border-color .15s,background .15s;
  font-family:inherit;
}
.form-control:focus { border-color:var(--green-400);background:var(--white);box-shadow:0 0 0 3px rgba(76,175,125,.12); }
textarea.form-control { resize:vertical;min-height:80px; }
select.form-control { -webkit-appearance:none;appearance:none;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='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px; }
.form-hint { font-size:11px;color:var(--sl-400);margin-top:4px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }

/* RADIO QUALITY */
.radio-group { display:flex;gap:8px; }
.radio-btn input[type="radio"] { display:none; }
.radio-label {
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 14px;border-radius:var(--radius);
  border:1.5px solid var(--sl-200);cursor:pointer;
  font-size:13px;font-weight:500;color:var(--sl-500);
  background:var(--sl-100);transition:all .15s;
}
.radio-btn input:checked + .radio-label.baik   { background:var(--green-100);border-color:var(--green-400);color:var(--green-700); }
.radio-btn input:checked + .radio-label.sedang { background:var(--amber-100);border-color:var(--amber-400);color:var(--amber-600); }
.radio-btn input:checked + .radio-label.kurang { background:var(--red-100);border-color:var(--red-400);color:var(--red-600); }

/* TABLE */
.table-wrapper { overflow-x:auto; }
table { width:100%;border-collapse:collapse; }
thead th {
  font-size:11px;color:var(--sl-400);
  text-transform:uppercase;letter-spacing:.06em;
  padding:0 14px 10px;text-align:left;
  border-bottom:1px solid var(--sl-200);
  white-space:nowrap;
}
tbody td { padding:11px 14px;border-bottom:1px solid var(--sl-100);font-size:13px;color:var(--sl-700);vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--cream); }
.td-right { text-align:right; }
.td-center { text-align:center; }

/* BADGES */
.badge {
  display:inline-block;padding:3px 10px;
  border-radius:20px;font-size:11px;font-weight:600;
}
.badge-baik     { background:var(--green-100);color:var(--green-700); }
.badge-sedang   { background:var(--amber-100);color:var(--amber-600); }
.badge-kurang   { background:var(--red-100);color:var(--red-600); }
.badge-putra    { background:var(--blue-100);color:var(--blue-600); }
.badge-putri    { background:var(--purple-100);color:var(--purple-600); }
.badge-customer { background:#fce7f3;color:#9d174d; }
.badge-aktif    { background:var(--green-100);color:var(--green-700); }
.badge-nonaktif { background:var(--sl-100);color:var(--sl-500); }
.badge-berlangsung { background:var(--green-100);color:var(--green-700); }
.badge-selesai  { background:var(--sl-100);color:var(--sl-500); }
.badge-admin    { background:var(--amber-100);color:var(--amber-600); }
.badge-anggota  { background:var(--sl-100);color:var(--sl-600); }

/* PAGINATION */
.pagination { display:flex;gap:4px;justify-content:center;padding:16px 0; }
.btn-page {
  padding:6px 12px;border-radius:var(--radius);
  font-size:12px;color:var(--sl-600);
  border:1px solid var(--sl-200);background:var(--white);
  text-decoration:none;transition:all .15s;
}
.btn-page:hover { background:var(--sl-100);text-decoration:none; }
.btn-page.active { background:var(--green-600);color:white;border-color:var(--green-600); }

/* ALERTS / FLASH */
.alert { padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:13px;display:flex;align-items:center;gap:8px; }
.alert-success { background:var(--green-100);color:var(--green-800);border:1px solid var(--green-200); }
.alert-error   { background:var(--red-100);color:var(--red-600);border:1px solid #fca5a5; }
.alert-warning { background:var(--amber-100);color:var(--amber-600);border:1px solid #fde68a; }

/* UPLOAD */
.upload-area {
  border:2px dashed var(--sl-200);border-radius:var(--radius-lg);
  padding:28px 16px;text-align:center;cursor:pointer;
  background:var(--sl-50);transition:all .15s;
}
.upload-area:hover { border-color:var(--green-400);background:var(--green-50); }

/* TOTAL HARGA */
.total-box {
  background:var(--green-50);border:1px solid var(--green-200);
  border-radius:var(--radius-lg);padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;
  margin-top:12px;
}
.total-box-label { font-size:12px;color:var(--green-700);font-weight:500; }
.total-box-value { font-size:22px;font-weight:700;color:var(--green-700);letter-spacing:-.03em; }

/* LAHAN CARDS */
.lahan-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px; }
.lahan-card {
  background:var(--white);border-radius:var(--radius-lg);
  border:1px solid var(--sl-200);overflow:hidden;
  transition:box-shadow .15s;
}
.lahan-card:hover { box-shadow:var(--shadow-md); }
.lahan-card-img  { height:140px;object-fit:cover;width:100%;background:var(--green-100);display:flex;align-items:center;justify-content:center;font-size:48px; }
.lahan-card-body { padding:16px; }
.komoditas-strip-h { height:4px;border-radius:0 0 2px 2px;margin-bottom:12px; }

/* NOTIF ITEMS */
.notif-item {
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 16px;border-radius:var(--radius);
  background:var(--cream);border-left:3px solid;
  margin-bottom:8px;
}
.notif-item.h7 { border-left-color:var(--amber-400); }
.notif-item.h1 { border-left-color:var(--red-400); }
.notif-item.done { border-left-color:var(--green-400); }

/* DARK TOGGLE */
.dark-toggle {
  width:34px;height:34px;border-radius:50%;
  background:var(--sl-100);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--sl-500);font-size:16px;
}
.dark-toggle:hover { background:var(--sl-200); }

/* FILTER BAR */
.filter-bar { display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px; }
.filter-bar .form-group { margin-bottom:0; }

/* SECTION FORM PANEN */
.form-section { background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--sl-200);margin-bottom:16px;overflow:hidden; }
.form-section-header {
  padding:14px 20px;border-bottom:1px solid var(--sl-100);
  display:flex;align-items:center;gap:12px;
}
.form-section-icon { width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px; }
.form-section-body { padding:20px; }

/* EMPTY STATE */
.empty-state { text-align:center;padding:48px 24px; }
.empty-state-icon { font-size:48px;margin-bottom:12px;color:var(--sl-300); }
.empty-state-title { font-size:15px;font-weight:600;color:var(--sl-600);margin-bottom:6px; }
.empty-state-sub { font-size:13px;color:var(--sl-400);margin-bottom:18px; }

/* COUNTDOWN */
.countdown { display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600; }
.countdown.danger { color:var(--red-600); }
.countdown.warning { color:var(--amber-600); }
.countdown.ok { color:var(--green-600); }

/* MODAL */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s; }
.modal-overlay.open { opacity:1;pointer-events:auto; }
.modal { background:var(--white);border-radius:var(--radius-lg);padding:24px;width:90%;max-width:440px;box-shadow:var(--shadow-md); }
.modal-title { font-size:15px;font-weight:700;color:var(--sl-800);margin-bottom:8px; }
.modal-body  { font-size:13px;color:var(--sl-600);margin-bottom:20px; }
.modal-actions { display:flex;gap:8px;justify-content:flex-end; }

/* CHART CONTAINER */
.chart-container { position:relative;height:200px; }

/* Responsive styles di-handle oleh public/css/mobile.css */

/* ============================================================
   INNER TOPBAR — dipakai bersama sidebar kiri
   ============================================================ */

/* Bottom-nav tidak dipakai (navigasi mobile pakai sidebar slide-in) */
.bottom-nav { display: none !important; }

/* ── INNER TOPBAR ──────────────────────────────────────────── */
.inner-topbar {
  height: 58px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 12px rgba(0,0,0,0.05);
}

[data-theme="dark"] .inner-topbar {
  background: rgba(15,23,42,0.88);
  box-shadow: 0 1px 12px rgba(0,0,0,0.3);
}

/* Tombol Beranda */
.itb-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(5,150,105,0.3);
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1);
  font-family: var(--font-body);
}
.itb-home-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 5px 18px rgba(5,150,105,0.4);
  color: white;
  text-decoration: none;
}
.itb-home-btn:active { transform: scale(0.97); }
.itb-home-btn i { font-size: 16px; }
.itb-home-label { letter-spacing: 0.01em; }

/* Breadcrumb judul */
.itb-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.itb-app-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
.itb-page-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kanan */
.itb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.itb-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
  font-family: var(--font-body);
}
.itb-btn-green {
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-800);
  border: 1.5px solid var(--brand-200);
}
.itb-btn-green:hover {
  background: linear-gradient(135deg, var(--brand-100), var(--brand-200));
  border-color: var(--brand-400);
  color: var(--brand-900);
  text-decoration: none;
  transform: translateY(-1px);
}

.itb-icon-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 15px;
  transition: all 0.15s ease;
}
.itb-icon-btn:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-700);
}
.itb-logout:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

.itb-user {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 4px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--border-default);
}
.itb-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--teal-400));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; color: white;
  flex-shrink: 0;
}
.itb-uname {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

/* ── PAGE CONTENT: full width tanpa sidebar ────────────────── */
/* page-content base — overridden by responsive.css */
.page-content { padding: 22px; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .inner-topbar { padding: 0 12px; gap: 8px; height: 54px; }
  .itb-home-label { display: none; }
  .itb-home-btn { padding: 7px 10px; }
  .itb-app-name { display: none; }
  .itb-title-wrap .ti-chevron-right { display: none; }
  .itb-action-label { display: none; }
  .itb-action-btn { padding: 7px 10px; }
  .itb-uname { display: none; }
  .page-content { padding: 14px 14px 32px; }
}

@media (max-width: 480px) {
  .itb-user { display: none; }
  .inner-topbar { gap: 6px; }
}


/* ── RESPONSIVE UTILITIES (complement responsive.css) ──────── */

/* Table scroll indicator */
.table-wrapper {
  position: relative;
  border-radius: var(--r-xl);
}

/* Touch-friendly form controls */
input[type="date"],
input[type="time"],
input[type="number"] {
  min-height: 42px;
}

/* Responsive images */
img { max-width: 100%; height: auto; }

/* Prevent text overflow */
.card-title, .sc-label, .stat-lbl { word-break: break-word; }

/* Horizontal scroll for filter rows */
.filter-row-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.filter-row-scroll::-webkit-scrollbar { display: none; }

/* Responsive table: add min-width to prevent collapse */
.table-wrapper table { width: 100%; }

/* Fix: card hover should not break layout on mobile */
@media (max-width: 767px) {
  .summary-card:hover,
  .lahan-card:hover,
  .stat-card:hover { transform: none !important; }

  /* Ensure form sections are not too cramped */
  .form-section { margin-bottom: 12px; }

  /* Chart legend smaller */
  .chart-card-legend { padding: 8px 12px 12px; gap: 8px; }
  .legend-item { font-size: 10px; }

  /* Laporan tab bar — horizontal scroll */
  .laporan-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding-bottom: 2px;
  }
  .laporan-tabs .tab-btn { white-space: nowrap; flex-shrink: 0; }

  /* Modal full-width on small screens */
  .modal { width: 96% !important; max-width: none; }
}

.main-content {
  min-height: 100vh;
}

/* ── GLOBAL TEXT CONTRAST FIX — Light & Dark Mode ──────────── */

/* Form labels selalu jelas */
.form-label,
.dh-fl,
.filter-card .form-label,
.nav-section-label { color: var(--text-secondary) !important; }

/* Table header teks lebih gelap */
thead th { color: var(--text-secondary) !important; }

/* Semua teks dalam card jelas */
.card-title, .stat-val, .sc-value { color: var(--text-primary) !important; }
.stat-lbl, .sc-label { color: var(--text-secondary) !important; }

/* Badge & chip teks kontas */
.badge, .dh-chip, .filter-chip { font-weight: 700; }

/* Empty state */
.empty-state-title, .dh-empty-title, .dok-empty-title { color: var(--text-primary) !important; }
.empty-state-sub, .dh-empty-sub, .dok-empty-sub { color: var(--text-secondary) !important; }

/* Form control warna teks jelas */
.form-control,
select.form-control,
input[type="date"],
input[type="time"],
input[type="number"],
input[type="text"],
textarea { color: var(--text-primary); background-color: var(--surface-0); }

/* Dark mode: date input icon jelas */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  opacity: 0.7;
}

/* Inner topbar teks selalu jelas */
.itb-page-title { color: var(--text-primary) !important; }
.itb-app-name   { color: var(--text-secondary) !important; }

/* Stat cards di laporan */
.stat-card .stat-val { color: var(--text-primary) !important; }
.stat-card .stat-lbl { color: var(--text-secondary) !important; }

/* Panel titles */
.hm-panel-title, .chart-card-title, .chart-box-title, .card-title {
  color: var(--text-primary) !important;
}

/* Recent row text */
.hm-ri-name, .hm-si-lahan { color: var(--text-primary) !important; }
.hm-ri-meta, .hm-si-pj, .hm-rd-mon { color: var(--text-secondary) !important; }

/* Filter labels */
.filter-card-header { color: var(--text-primary); }


/* ══════════════════════════════════════════════════════════════
   LIGHT MODE CONTRAST OVERRIDES
   Semua teks harus jelas terbaca di mode terang
   ══════════════════════════════════════════════════════════════ */

/* Labels & form text */
label, .form-label, .dh-fl, .itb-title-wrap,
.filter-card-header span, .nav-section-label {
  color: var(--text-secondary);
}

/* Headings & titles */
h1, h2, h3, h4, h5, h6,
.card-title, .chart-box-title, .chart-card .card-title,
.hm-panel-title, .modal-title, .page-header h2,
.form-section-header div:first-child, .dh-hero-title {
  color: var(--text-primary);
}

/* Body text & descriptions */
p, .card-desc, .dh-card-desc, .hm-mc-desc,
.empty-state-sub, .dh-empty-sub,
.form-hint, .hm-hero-sub, .hm-greeting-sub {
  color: var(--text-secondary);
}

/* Secondary labels */
.sc-label, .stat-lbl, .dh-stat-lbl,
.badge, .legend-item, .filter-chip,
.chart-box-sub {
  color: var(--text-secondary);
}

/* Table */
thead th { color: var(--text-secondary); font-weight: 700; }
tbody td  { color: var(--text-secondary); }
tbody td strong, tbody td .font-bold { color: var(--text-primary); }

/* Input date & time icon — dark in light mode */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8) brightness(1.2);
  opacity: 0.7;
}

/* Inner topbar */
.itb-page-title { color: var(--text-primary); font-weight: 700; }
.itb-app-name   { color: var(--text-secondary); }

/* Card info areas */
.dh-card-kom strong { color: var(--text-primary); }
.dh-card-lahan,
.dh-chip-count, .dh-chips-count { color: var(--text-secondary); }

/* Filter bar labels */
.dh-fl { color: var(--text-secondary) !important; font-weight: 700; }

/* Stat value numbers */
.sc-value, .stat-val, .dh-stat-val,
.hm-stat-val, .hm-ms-val, .hm-sp-val {
  color: var(--text-primary);
  font-weight: 800;
}

/* Section dividers */
.hm-section-lbl { color: var(--text-tertiary); }

/* ── DARK MODE SPECIFIC ─────────────────────────────────────── */
[data-theme="dark"] body { background: var(--surface-0); }
[data-theme="dark"] .card,
[data-theme="dark"] .hm-panel,
[data-theme="dark"] .chart-box,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .filter-card,
[data-theme="dark"] .form-section {
  background: var(--surface-1);
  border-color: var(--border-subtle);
}
[data-theme="dark"] thead th { background: var(--surface-2); }
[data-theme="dark"] tbody tr:hover td { background: var(--surface-2); }
[data-theme="dark"] .form-control {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-primary);
}
[data-theme="dark"] .form-control:focus {
  background: var(--surface-1);
  border-color: var(--brand-500);
}
[data-theme="dark"] .inner-topbar {
  background: rgba(15,23,42,0.92);
  border-color: var(--border-subtle);
}
[data-theme="dark"] .modal {
  background: var(--surface-1);
  border-color: var(--border-subtle);
}
[data-theme="dark"] .dh-filter-bar {
  background: var(--surface-1);
  border-color: var(--border-subtle);
}
[data-theme="dark"] select.form-control option {
  background: var(--surface-2);
  color: var(--text-primary);
}