/* ============================================================
   SiData Puskesmas — Global Stylesheet
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --primary:        #0d6e6e;
  --primary-dark:   #0a5252;
  --primary-light:  #e0f5f5;
  --sidebar-width:  240px;
  --topbar-height:  56px;
  --font-base:      "Segoe UI", system-ui, -apple-system, sans-serif;
  --text-main:      #222;
  --text-muted:     #888;
  --bg-page:        #f4f6f9;
  --border-color:   #e0e0e0;
  --radius:         8px;
  --shadow-card:    0 1px 4px rgba(0,0,0,0.07);
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-base);
  background:  var(--bg-page);
  color:       var(--text-main);
  font-size:   0.92rem;
  margin: 0;
}

a { text-decoration: none; }

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width:      var(--sidebar-width);
  min-height: 100vh;
  background: var(--primary);
  position:   fixed;
  top: 0; left: 0;
  z-index:    200;
  display:    flex;
  flex-direction: column;
  overflow-y: auto;
}

.sidebar-logo {
  padding:     18px 20px;
  font-size:   1.35rem;
  font-weight: 700;
  color:       #fff;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  letter-spacing: 0.5px;
}

.sidebar-logo span { color: #7fffd4; }

.sidebar-meta {
  padding:   8px 20px 12px;
  font-size: 0.75rem;
  color:     rgba(255,255,255,0.5);
}

.sidebar-label {
  padding:        12px 20px 4px;
  font-size:      0.7rem;
  color:          rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight:    600;
}

.sidebar .nav-link {
  color:   rgba(255,255,255,0.82);
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap:     10px;
  font-size: 0.88rem;
  border-radius: 0;
  transition: background 0.15s;
}

.sidebar .nav-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.sidebar .nav-link.active {
  background: var(--primary-dark);
  color: #fff;
  font-weight: 600;
}

.sidebar .nav-link .bi {
  font-size: 1rem;
  width: 18px;
  text-align: center;
}

.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 8px 0;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar {
  height:      var(--topbar-height);
  background:  #fff;
  border-bottom: 1px solid var(--border-color);
  padding:     0 24px;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  position:    sticky;
  top: 0;
  z-index:     100;
}

.topbar-title {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--text-main);
  display:     flex;
  align-items: center;
  gap: 8px;
}

.topbar-user {
  display:     flex;
  align-items: center;
  gap: 10px;
  font-size:   0.85rem;
  color:       #555;
}

.avatar {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  background:    var(--primary);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     0.8rem;
  font-weight:   700;
  flex-shrink:   0;
}

/* ── Main Layout ────────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-width);
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

.page-content {
  padding: 24px;
  flex: 1;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card-base {
  background:    #fff;
  border-radius: var(--radius);
  box-shadow:    var(--shadow-card);
  padding:       20px 24px;
}

.stat-card {
  background:    #fff;
  border-radius: var(--radius);
  box-shadow:    var(--shadow-card);
  padding:       18px 20px;
  display:       flex;
  align-items:   center;
  gap:           16px;
}

.stat-icon {
  width:         48px;
  height:        48px;
  border-radius: var(--radius);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.3rem;
  flex-shrink:   0;
}

.stat-value {
  font-size:   1.75rem;
  font-weight: 700;
  color:       var(--text-main);
  line-height: 1;
}

.stat-label {
  font-size:  0.78rem;
  color:      var(--text-muted);
  margin-top: 3px;
}

/* ── Section Header ─────────────────────────────────────────── */
.section-header {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-title {
  font-size:   0.78rem;
  font-weight: 700;
  color:       var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table-base thead {
  background: var(--primary);
  color: #fff;
}

.table-base thead th {
  font-weight: 500;
  font-size:   0.84rem;
  padding:     10px 14px;
  border: none;
}

.table-base tbody td {
  padding:       9px 14px;
  font-size:     0.85rem;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.table-base tbody tr:hover { background: #f8fffe; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge-submitted { background: #d4edda; color: #155724; font-size: 0.75rem; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.badge-draft     { background: #fff3cd; color: #856404; font-size: 0.75rem; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.badge-empty     { background: #f8d7da; color: #721c24; font-size: 0.75rem; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.badge-active    { background: #d4edda; color: #155724; font-size: 0.75rem; padding: 3px 10px; border-radius: 20px; font-weight: 600; }
.badge-closed    { background: #e2e3e5; color: #383d41; font-size: 0.75rem; padding: 3px 10px; border-radius: 20px; font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary-custom {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary-custom:hover { background: var(--primary-dark); color: #fff; }

/* ── Spreadsheet Grid ────────────────────────────────────────── */
.sp-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }

.sp-table thead tr { background: var(--primary); color: #fff; }

.sp-table thead th {
  padding:    9px 10px;
  font-weight: 500;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.15);
}

.sp-table tbody tr:nth-child(even) { background: #f8fffe; }

.sp-table tbody td {
  padding:       4px 6px;
  border-bottom: 1px solid #e9ecef;
  border-right:  1px solid #f0f0f0;
}

.sp-table td input,
.sp-table td select,
.sp-table td textarea {
  width:         100%;
  border:        1px solid transparent;
  border-radius: 4px;
  padding:       5px 8px;
  font-size:     0.83rem;
  background:    transparent;
  outline:       none;
  font-family:   var(--font-base);
}

.sp-table td input:focus,
.sp-table td select:focus,
.sp-table td textarea:focus {
  border-color: var(--primary);
  background:   #fff;
  box-shadow:   0 0 0 2px rgba(13,110,110,0.12);
}

.sp-table td.row-num {
  text-align: center;
  color:      var(--text-muted);
  font-size:  0.78rem;
  width:      36px;
  background: #f8f9fa;
}

.sp-add-row {
  width:       100%;
  padding:     8px;
  background:  #f0faf4;
  border:      1px dashed var(--primary);
  color:       var(--primary);
  font-size:   0.84rem;
  border-radius: 0 0 6px 6px;
  cursor:      pointer;
  text-align:  center;
  transition:  background 0.15s;
}

.sp-add-row:hover { background: var(--primary-light); }

/* ── Form Builder ────────────────────────────────────────────── */
.col-row {
  background:    #f8f9fa;
  border:        1px solid #e9ecef;
  border-radius: var(--radius);
  padding:       10px 14px;
  margin-bottom: 8px;
  display:       flex;
  align-items:   center;
  gap:           10px;
  transition:    box-shadow 0.15s;
}

.col-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.col-row.sortable-ghost { opacity: 0.4; }

.drag-handle {
  color:  #ccc;
  cursor: grab;
  font-size: 1.1rem;
}

.drag-handle:active { cursor: grabbing; }

.col-num {
  width:         24px;
  height:        24px;
  border-radius: 50%;
  background:    var(--primary);
  color:         #fff;
  font-size:     0.75rem;
  font-weight:   700;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

.type-badge-text     { background: #e3f0ff; color: #1a56db; }
.type-badge-number   { background: #e2f5ea; color: #27ae60; }
.type-badge-date     { background: #fff0e0; color: #d35400; }
.type-badge-select   { background: #fef9e0; color: #b7950b; }
.type-badge-textarea { background: #f3e8ff; color: #6d28d9; }

/* ── Alerts & Flash ──────────────────────────────────────────── */
.flash-wrapper { margin-bottom: 16px; }

/* ── Progress Bar ────────────────────────────────────────────── */
.progress-thin {
  height:        7px;
  border-radius: 4px;
  background:    #e9ecef;
  overflow:      hidden;
}

.progress-thin .fill {
  height:        100%;
  border-radius: 4px;
  transition:    width 0.4s ease;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar       { transform: translateX(-100%); transition: transform 0.25s; }
  .sidebar.open  { transform: translateX(0); }
  .main-content  { margin-left: 0; }
  .page-content  { padding: 16px; }
}

/* ── Cell Grid Editor ────────────────────────────────────────── */
#cellGrid {
  table-layout: auto !important;  /* biarkan kolom menyesuaikan konten */
  width: auto !important;
  min-width: 100%;
}

#cellGrid td {
  word-break: break-word;
  white-space: normal;
  max-width: 200px;
  min-width: 50px;
  padding: 4px 6px !important;
  font-size: 0.78rem;
  vertical-align: middle;
  line-height: 1.3;
}

/* Wrapper tabel bisa di-scroll horizontal */
.cell-grid-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 70vh;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}
/* ── Cell Form Puskesmas ─────────────────────────────────────── */
.cell-grid-wrapper table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  font-size: 0.82rem;
  border-collapse: collapse;
}

.cell-grid-wrapper table td {
  padding: 3px 5px !important;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid #dee2e6 !important;
  min-width: 50px;
}

/* Kolom teks panjang (header/label) boleh wrap */
.cell-grid-wrapper table td:nth-child(2) {
  white-space: normal;
  min-width: 200px;
  max-width: 350px;
  word-break: break-word;
}

/* Input di dalam cell */
.cell-grid-wrapper input.form-control {
  min-width: 70px;
  max-width: 120px;
  width: 100%;
  padding: 2px 6px !important;
  font-size: 0.82rem !important;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #fffef5;
}

.cell-grid-wrapper input.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(13,110,110,0.12);
  background: #fff;
  outline: none;
}

/* Baris header (warna) tetap compact */
.cell-grid-wrapper table td[style*="background"] {
  font-weight: 600;
}