/* ============================
   styles.css — FarmersOpry UI Pack (by ChatGPT)
   - Modern purple theme
   - Sticky header, responsive
   - Scrollable table viewport
   - Works with app.js
============================= */

/* ===== Theme Vars ===== */
:root{
  --bg: #0f1220;
  --surface: #171a2a;
  --surface-2: #1e2235;
  --text: #e8ebf6;
  --muted: #aab0c2;
  --primary: #7c5cff;
  --primary-600:#6b4bee;
  --ring: rgba(124,92,255,.55);
  --accent: #ffd166;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius-lg: 16px;
  --radius-md: 12px;
}

/* Light mode */
:root.light{
  --bg: #f7f8fc;
  --surface: #ffffff;
  --surface-2: #f2f4fb;
  --text: #0f1220;
  --muted: #55607a;
  --primary: #6b4bee;
  --primary-600:#5a3cdd;
  --ring: rgba(90,75,238,.35);
  --accent: #b58500;
  --shadow: 0 10px 25px rgba(23, 31, 67, .08);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 600px at 120% 10%, rgba(255,209,102,.12), transparent 60%),
    var(--bg);
  color:var(--text);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
a{color:var(--primary)}

.container{width:min(1100px, 94vw); margin-inline:auto; padding: 16px}

/* ===== Toolbar (GREEN AREA) ===== */
.searchbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  padding:12px; border-radius: var(--radius-md);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.searchbar .input, .searchbar .select{
  height:40px; padding:0 10px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); background:var(--surface);
  color:var(--text); outline:none; transition:.2s ease;
}
.searchbar .input:focus, .searchbar .select:focus{
  border-color: var(--ring); box-shadow:0 0 0 6px var(--ring);
}
.searchbar .btn{
  height:40px; padding:0 14px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  color:#fff; box-shadow: 0 6px 16px rgba(124,92,255,.35);
}

/* ===== Table (BLUE AREA scrollable) ===== */
.table-viewport{
  margin-top:14px;
  max-height: 72vh;        /* << scroll tinggi */
  overflow: auto;          /* << scroll aktif */
  border-radius: var(--radius-lg);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
}
/* nice scrollbar */
.table-viewport::-webkit-scrollbar{height:10px;width:10px}
.table-viewport::-webkit-scrollbar-thumb{background:rgba(124,92,255,.5); border-radius:999px}
.table-viewport::-webkit-scrollbar-track{background:transparent}

table{width:100%; border-collapse:separate; border-spacing:0; min-width:700px}
thead th{
  position: sticky; top:0; z-index:2;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--muted);
  text-align:left; font-weight:700; letter-spacing:.25px; font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:12px 12px;
}
tbody td{padding:12px 12px; border-bottom:1px dashed rgba(255,255,255,.06)}
tbody tr{transition:.15s ease}
tbody tr:hover{background: rgba(124,92,255,.08)}

th.sortable{cursor:pointer; user-select:none}
th.sortable .arrow{opacity:.5; margin-left:.35rem; font-size:.9em}
th.sortable.active{color:var(--text)}

td .pill{
  display:inline-block; padding:6px 10px; border-radius:999px; font-weight:600;
  background: rgba(124,92,255,.12); color: var(--primary);
  border:1px solid rgba(124,92,255,.25);
}

mark.highlight{background: rgba(255,209,102,.25); box-shadow:0 0 0 3px rgba(255,209,102,.25) inset}

/* ===== Mobile stacked table ===== */
@media (max-width: 640px){
  table{min-width:0}
  thead{display:none}
  tbody tr{display:grid; grid-template-columns: 1fr 1fr; gap:10px; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:12px; margin:10px}
  tbody td{border:0; padding:2px 4px}
  tbody td::before{
    content: attr(data-label);
    display:block; font-size:12px; color:var(--muted); margin-bottom:2px
  }
}

/* Utilities */
.hidden{display:none !important}
.footer{color:var(--muted); text-align:center; padding:20px 0 40px}