:root {
  --bg-dark:    #0d1117;
  --bg-card:    #161b22;
  --bg-border:  #30363d;
  --text-main:  #e6edf3;
  --text-muted: #8b949e;
  --accent:     #f0a500;
}

* { box-sizing: border-box; }

body {
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  padding-bottom: 70px;
}

.bg-dark-custom { background: #010409 !important; border-bottom: 1px solid var(--bg-border); }

/* Bottom nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #010409;
  border-top: 1px solid var(--bg-border);
  display: flex; z-index: 1000;
}
.bottom-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; padding: 8px 4px;
  color: var(--text-muted); text-decoration: none; font-size: 11px; gap: 2px;
}
.bottom-nav-item i { font-size: 20px; }
.bottom-nav-item.active, .bottom-nav-item:hover { color: var(--accent); }

/* Cards */
.card-dark {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 10px;
}

/* WO list item */
.wo-item {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s;
}
.wo-item:hover { border-color: var(--accent); }
.wo-item .wo-id { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.wo-item .wo-kp { font-weight: 600; font-size: 15px; }
.wo-item .wo-meta { font-size: 12px; color: var(--text-muted); }

/* Status badges */
.badge-status-New         { background: #21262d; color: #8b949e; }
.badge-status-Assigned    { background: #1c3a5e; color: #58a6ff; }
.badge-status-In-Progress { background: #3d2b00; color: #f0a500; }
.badge-status-Done        { background: #1a3a1e; color: #56d364; }
.badge-status-Verified    { background: #0d2818; color: #3fb950; }
.badge-status-Rejected    { background: #3d0c0c; color: #f85149; }

/* Role badge */
.bg-role-mcc      { background: #1c3a5e !important; color: #58a6ff; }
.bg-role-lapangan { background: #1a3a1e !important; color: #56d364; }

/* KPI strip */
.kpi-box {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.kpi-box .kpi-val { font-size: 24px; font-weight: 700; }
.kpi-box .kpi-lbl { font-size: 11px; color: var(--text-muted); }

/* Form */
.form-control, .form-select {
  background: #0d1117 !important;
  border: 1px solid var(--bg-border) !important;
  color: var(--text-main) !important;
  border-radius: 8px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(240,165,0,.15) !important;
}
.form-label { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.form-label .required { color: #f85149; }

/* Section header dalam form */
.form-section {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.form-section-title {
  font-size: 13px; font-weight: 700; letter-spacing: .5px;
  color: var(--accent); text-transform: uppercase; margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--bg-border);
}

/* Foto input */
.foto-input-wrapper {
  position: relative;
  background: #0d1117;
  border: 2px dashed var(--bg-border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
}
.foto-input-wrapper:hover { border-color: var(--accent); }
.foto-input-wrapper input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.foto-preview { max-width: 100%; max-height: 200px; border-radius: 6px; margin-top: 8px; }

/* Buttons */
.btn-primary-custom {
  background: var(--accent); color: #000; border: none; font-weight: 600;
  padding: 12px; border-radius: 8px; width: 100%; font-size: 15px;
}
.btn-primary-custom:active { filter: brightness(.9); }

/* Detail */
.detail-row {
  display: flex; padding: 8px 0;
  border-bottom: 1px solid var(--bg-border); font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--text-muted); min-width: 140px; font-size: 12px; }
.detail-val { flex: 1; word-break: break-word; }

/* Login */
.login-card {
  max-width: 380px; margin: 80px auto; padding: 32px;
  background: var(--bg-card); border: 1px solid var(--bg-border); border-radius: 12px;
}

/* Search */
.search-bar {
  background: var(--bg-card);
  border: 1px solid var(--bg-border);
  border-radius: 10px; padding: 10px 14px;
  margin-bottom: 12px; display: flex; gap: 8px; align-items: center;
}
.search-bar input {
  background: none; border: none; color: var(--text-main);
  flex: 1; outline: none; font-size: 15px;
}

@media (min-width: 768px) {
  .main-content { max-width: 600px; margin: 0 auto; }
  .bottom-nav   { max-width: 600px; left: 50%; transform: translateX(-50%); }
}