/* ==========================================================================
   Holistik App – Light Green Theme (emerald) + White
   - Modern SaaS look, rounded, soft shadows
   - Compatible with Bootstrap forms & tables
   - Utilities ala Tailwind ringan
   ========================================================================== */

:root{
  /* Palette */
  --bg: #f8fafb;               /* body background */
  --card: #ffffff;             /* card surface */
  --muted: #64748b;            /* subdued text */
  --text: #0f172a;             /* main text (slate-900) */
  --border: rgba(2, 6, 23, .08);

  /* Emerald / Green accents */
  --accent: #10b981;           /* emerald-500 */
  --accent-600: #059669;       /* hover */
  --accent-100: #d1fae5;       /* subtle bg */
  --accent-50: #ecfdf5;

  /* States */
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;
  --success: #10b981;

  /* Elevation */
  --shadow: 0 8px 24px rgba(2,6,23,.08);
  --shadow-soft: 0 4px 12px rgba(2,6,23,.06);
  --bg:#f8fafb; --card:#fff; --muted:#64748b; --text:#0f172a; --border:rgba(2,6,23,.08);
  --accent:#10b981; --accent-600:#059669; --accent-100:#d1fae5; --accent-50:#ecfdf5;
  --shadow:0 8px 24px rgba(2,6,23,.08);

  /* Radius */
  --radius: 16px;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

/* Base */
*{ box-sizing: border-box }
html, body{ height:100% }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
  font-size: 16px;
}

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

img{ max-width:100%; height:auto; }

/* Layout helpers */
.container-narrow{ max-width: 980px; margin: 0 auto; padding: 20px }
.header{
  display:flex; align-items:center; justify-content:space-between;
  margin: 14px 0;
}
.brand{ display:flex; align-items:center; gap:10px }
.brand img{ height:40px; width:auto; border-radius: 10px }

/* Cards */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}
.card:hover{ box-shadow: var(--shadow-soft); }

/* Badges / Pills */
.badge{
  display:inline-block;
  padding: .35rem .6rem;
  border-radius: 9999px;
  background: var(--accent-50);
  color: var(--accent-600);
  font-weight: 600;
  font-size: .8rem;
  border: 1px solid rgba(16,185,129,.25);
}

/* Buttons (utility + align with Bootstrap) */
.btn{
  display:inline-block;
  padding: .65rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:active{ transform: translateY(1px) }

.btn-primary{
  background: var(--accent);
  color: #ffffff;
  border-color: transparent;
}
.btn-primary:hover{ background: var(--accent-600); color:#fff }
.btn-outline{
  background: transparent;
  color: var(--accent-600);
  border: 1px solid rgba(16,185,129,.35);
}
.btn-outline:hover{ background: var(--accent-50) }

/* Form controls (custom + Bootstrap interop) */
.input,
.form-control,
.form-select,
textarea,
select{
  width:100%;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .6rem .8rem;
  box-shadow: inset 0 1px 0 rgba(2,6,23,.02);
}
.input:focus,
.form-control:focus,
.form-select:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: rgba(16,185,129,.55);
  box-shadow: 0 0 0 4px rgba(16,185,129,.15);
}

label{ font-size: .92rem; color: var(--muted); margin-bottom: 6px; display:block }

/* Radios & checkboxes (keep Bootstrap defaults but adjust accent) */
.form-check-input{
  border-radius: .35rem;
  border: 1px solid var(--border);
}
.form-check-input:checked{
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-label{ color: var(--text) }

/* Tables */
.table{
  width:100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.table th, .table td{
  border-bottom: 1px solid var(--border);
  padding: .75rem .75rem;
  vertical-align: top;
}
.table thead th{
  background: var(--accent-50);
  color: #065f46;
  font-weight: 700;
  border-bottom: 1px solid rgba(16,185,129,.25);
}

/* Grid utilities */
.grid{ display: grid; gap: 12px }
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 768px){
  .grid-2{ grid-template-columns: 1fr }
}

/* Alerts quick tone (when not using Bootstrap alerts) */
.alert{
  border-radius: 12px;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  background: #fff;
}
.alert-success{ border-color: rgba(16,185,129,.3); background: var(--accent-50); color:#064e3b }
.alert-warning{ border-color: rgba(245,158,11,.35); background: #fffbeb; color:#78350f }
.alert-danger{ border-color: rgba(239,68,68,.35); background: #fef2f2; color:#7f1d1d }

/* Muted text, helpers */
.text-muted, .muted{ color: var(--muted) !important }
.text-success{ color: var(--success) !important }
.text-danger{ color: var(--danger) !important }

/* Links-as-buttons alignment in headers */
.header .btn{ margin-left: 6px }

/* Focus-visible for better a11y */
:focus-visible{
  outline: 3px solid rgba(16,185,129,.35);
  outline-offset: 2px;
}

/* Small utility spacing + radius */
.rounded-2xl{ border-radius: 1rem }
.p-2{ padding: .5rem } .p-3{ padding: .75rem } .p-4{ padding: 1rem }
.mb-0{ margin-bottom:0 } .mb-1{ margin-bottom:.25rem } .mb-2{ margin-bottom:.5rem } .mb-3{ margin-bottom:.75rem }
.mt-1{ margin-top:.25rem } .mt-2{ margin-top:.5rem } .mt-3{ margin-top:.75rem }

/* Buttons – small variants */
.btn-sm{ padding: .45rem .7rem; border-radius: 10px; font-size: .92rem }
.btn-lg{ padding: .8rem 1.1rem; border-radius: 14px; font-size: 1rem }

/* Code tags for field names preview */
code{
  background: #f1f5f9;
  padding: .15rem .35rem;
  border-radius: 6px;
  border: 1px solid rgba(2,6,23,.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .85em;
}

/* Hover rows */
.table tr:hover td{ background: #fafafa }

/* Footer-like small notes */
.small, small{ color: var(--muted) }

/* Print styles for PDF preview pages (optional) */
@media print{
  body{ background: #fff }
  .card, .header, .container-narrow{ box-shadow:none }
  .btn, .header a{ display:none !important }
}