/* =======================================================
   HAKI Client Hub — GREEN TWO-TONE THEME v11
   Palet: Emerald (brand) + Moss (accent)
   ======================================================= */

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
img,svg,video,canvas,iframe{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{text-decoration:none;color:inherit}

/* ---------- TOKENS (LIGHT GREEN) ---------- */
:root{
  /* Brand emerald */
  --brand-50:#ecfdf5;
  --brand-100:#d1fae5;
  --brand-200:#a7f3d0;
  --brand-300:#6ee7b7;
  --brand-400:#34d399;
  --brand-500:#10b981;   /* primary */
  --brand-600:#059669;   /* hover */
  --brand-700:#047857;   /* active */

  /* Moss accent */
  --moss-50:#f3faf3;
  --moss-100:#e5f3e7;
  --moss-200:#cce7cf;
  --moss-300:#a6d5ad;
  --moss-700:#2f6b3c;

  /* Base & text */
  --bg: linear-gradient(180deg, var(--moss-50) 0%, #f6fff9 100%);
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --subtle:#64748b;

  /* Lines & shadow */
  --line:#dbe7de; /* lembut hijau */
  --line-strong:#bfd7c4;
  --shadow-1:0 6px 24px rgba(2,8,23,.06);
  --shadow-2:0 10px 30px rgba(2,8,23,.08);

  /* Feedback */
  --success:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
  --info:#16a34a; /* green info */

  /* Radii & ring */
  --radius-lg:16px; --radius-md:12px; --radius-sm:10px; --radius-pill:9999px;
  --ring:0 0 0 3px var(--brand-100);
}

/* ---------- BASE ---------- */
body{
  background: var(--bg) fixed;
  color:var(--text);
  font:14px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{max-width:1140px;margin:24px auto;padding:0 18px}
a{color:var(--brand-600)} a:hover{text-decoration:underline}

/* ---------- NAVBAR ---------- */
.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(130%) blur(6px);
  background: rgba(236, 253, 245, .9); /* brand-50 translucent */
  border-bottom:1px solid var(--line);
}
.navbar-inner{
  max-width:1140px;margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:28px;height:28px}
.brand .title{font-weight:800;letter-spacing:.1px;color:var(--moss-700)}

/* ---------- HEADER BAR ---------- */
.pagebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 14px}
.pagebar h1{font-size:22px;font-weight:900;color:#0b2e1a}
.breadcrumb{display:flex;gap:6px;align-items:center;color:#3f6e4c;font-size:12px}
.breadcrumb a{color:#2f6b3c}

/* ---------- UTIL ---------- */
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.grid{display:grid}.grid-2{grid-template-columns:1fr 1fr;gap:16px}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px}
.bold{font-weight:700}.muted{color:var(--muted)}.subtle{color:var(--subtle)}
.hidden{display:none!important}

/* ---------- CARDS & KPI ---------- */
.card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding:16px;
}
.card + .card{margin-top:14px}
.card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card header h2{font-size:16px;font-weight:800}

.kpi{
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:14px; box-shadow:var(--shadow-1);
}
.kpi .muted{font-size:12px}
.kpi .value{font-size:28px;font-weight:900;color:#0b2e1a}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:var(--radius-md);
  border:1px solid var(--line); background:#fff; color:var(--text);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, border .2s ease;
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-1)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}

.btn.primary{background:var(--brand-500); border-color:var(--brand-500); color:#fff}
.btn.primary:hover{background:var(--brand-600); border-color:var(--brand-600)}
.btn.light{background:#fafffb; border-color:var(--line); color:#123827}
.btn.ghost{background:transparent; border-color:transparent; color:#2f6b3c}
.btn.success{background:var(--success); border-color:var(--success); color:#fff}
.btn.warn{background:var(--warn); border-color:var(--warn); color:#111827}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff}
.btn.sm{padding:8px 10px;border-radius:10px;font-size:12px}
.btn.lg{padding:12px 16px;border-radius:14px;font-weight:700}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- FORMS ---------- */
.form .label, label{display:block;font-weight:800;margin:8px 0 6px;color:#0b2e1a}
.input,.select,.textarea{
  width:100%; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-md);
  padding:10px 12px; outline:none; transition:border .2s ease, box-shadow .2s ease, background .2s ease;
}
.textarea{min-height:110px; resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand-400); box-shadow:var(--ring); background:#fbfffd}
.help{font-size:12px;color:#3f6e4c;margin-top:4px}

/* ---------- TABLES ---------- */
.table-wrap{width:100%;overflow:auto}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{
  position:sticky; top:0; z-index:1;
  background: linear-gradient(180deg, var(--moss-100) 0%, #eefbf4 100%);
  color:#245a34;
  font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; white-space:nowrap;
}
.table tbody td{
  border-bottom:1px solid var(--line); padding:12px; white-space:nowrap; vertical-align:middle;
  background:#fff;
}
.table tbody tr:hover td{background:#f2fbf7}
.table .actions{display:flex;gap:8px;align-items:center}

/* ---------- BADGES ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--radius-pill);
  font:600 12px/1.2 Inter, system-ui; border:1px solid transparent;
}
.badge::before{content:""; width:8px; height:8px; border-radius:9999px; display:inline-block}

.badge--neutral{background:#ebf5ee; color:#0b2e1a; border-color:#d7eadc}
.badge--neutral::before{background:#9dc7a7}

.badge--pending{background:#fff7ed; color:#7c2d12; border-color:#fed7aa}
.badge--pending::before{background:#fb923c}

.badge--active{background:#ecfdf5; color:#065f46; border-color:#a7f3d0}
.badge--active::before{background:#10b981}

.badge--done{background:#e9fbef; color:#14532d; border-color:#bfeccf}
.badge--done::before{background:#22c55e}

.badge--cancelled{background:#fef2f2; color:#7f1d1d; border-color:#fecaca}
.badge--cancelled::before{background:#ef4444}

.badge--expired{background:#fff1f2; color:#881337; border-color:#fecdd3}
.badge--expired::before{background:#f43f5e}

.badge--draft{background:#f6f9f7; color:#2f3e33; border-color:#e3efe6}
.badge--draft::before{background:#94a3a0}

.badge--archived{background:#f0f8f3; color:#2d4737; border-color:#d4e7da}
.badge--archived::before{background:#86b49a}

/* ---------- PROGRESS ---------- */
.progress{height:10px;background:#dfeee5;border-radius:var(--radius-pill);overflow:hidden}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--brand-500), var(--brand-600));transition:width .2s ease}

/* ---------- ALERTS ---------- */
.alert{border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;background:#fff}
.alert.success{border-color:#bbf7d0;background:#ecfdf5;color:#065f46}
.alert.warn{border-color:#fde68a;background:#fffbeb;color:#713f12}
.alert.danger{border-color:#fecaca;background:#fef2f2;color:#7f1d1d}
.alert.info{border-color:#bbf7d0;background:#f0fdf4;color:#14532d}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:10px}
.tab{padding:10px 12px;border-radius:10px 10px 0 0;background:transparent;color:#2f6b3c}
.tab.active{background:#fff;border:1px solid var(--line);border-bottom-color:#fff;color:#0b2e1a}

/* ---------- PAGINATION ---------- */
.pager{display:flex;gap:6px;align-items:center}
.pager .page{min-width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:#fff;display:inline-flex;align-items:center;justify-content:center}
.pager .page.is-active{border-color:var(--brand-400);box-shadow:var(--ring);color:var(--brand-700);font-weight:800}

/* ---------- DROPDOWN ---------- */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{
  position:absolute;right:0;top:calc(100% + 6px);
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);
  min-width:200px;padding:6px;z-index:40;display:none;
}
.dropdown.open .dropdown-menu{display:block}
.dropdown-item{padding:10px 12px;border-radius:10px;color:#0b2e1a}
.dropdown-item:hover{background:#f0fbf5}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(6,95,70,.28)} /* brand-700 overlay */
.modal-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-2);padding:16px;max-width:560px;width:92%}

/* ---------- TOOLTIP ---------- */
.tooltip{position:relative}
.tooltip:hover::after{
  content: attr(data-tip);
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:#064e3b;color:#ecfdf5;border-radius:8px;padding:6px 8px;font-size:12px;white-space:nowrap;pointer-events:none;
}
.tooltip:hover::before{
  content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#064e3b;
}

/* ---------- TOAST ---------- */
.toast{position:fixed;right:14px;bottom:14px;z-index:70;display:flex;flex-direction:column;gap:8px}
.toast .item{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-2);padding:10px 12px}

/* ---------- AUTH ---------- */
.auth-wrap{max-width:1140px;margin:24px auto;padding:0 18px}
.auth-card{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
@media (max-width:900px){.auth-card{grid-template-columns:1fr}}
.title{font-size:26px;font-weight:900;color:#0b2e1a}
.subtitle{color:#2f6b3c;margin-top:6px}

/* --- FIX: Mobile FAB only on small screens, compact icons --- */
.mobile-fab{
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  padding: 6px;
  gap: 6px;
  z-index: 55;
  display: none !important;   /* force hidden by default (desktop) */
  max-width: 520px;           /* prevent too wide */
}

/* child buttons: compact */
.mobile-fab .btn{
  padding: 10px 10px;
  border-radius: 12px;
  min-width: 52px;
  height: 46px;
  line-height: 1;
  border: 1px solid var(--line);
}

/* icon size inside (Font Awesome / <svg>) */
.mobile-fab .btn i,
.mobile-fab .btn .icon,
.mobile-fab .btn svg{
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* optional tiny label under icon (if any) */
.mobile-fab .btn span{
  font-size: 10px;
  display: block;
  margin-top: 2px;
}

/* Show FAB only on mobile */
@media (max-width: 768px){
  .mobile-fab{ display: flex !important; justify-content: space-between; }
}

/* Guard: never show on print or large modals */
@media print{
  .mobile-fab{ display:none !important; }
}
/* ==== Responsive utilities (tables, cards, grids) ==== */

/* Table wrapper: bikin tabel bisa horizontal-scroll di layar sempit */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table {
  min-width: 720px; /* biar kolom tetap terbaca; scroll muncul di layar kecil */
}

/* Pecah text panjang agar gak bikin layout melebar */
.break-words { word-wrap: break-word; overflow-wrap: anywhere; }

/* Grid kartu responsif */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

/* Form & grid responsif */
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Pastikan input/select full width di mobile */
.input, .select, .textarea { width: 100%; max-width: 100%; }

/* Card responsif */
.card { overflow: hidden; }