/* Falcon Logbook - dark navy + coral red theme */
:root {
  --bg: #0a0e1c;
  --card: #10162a;
  --card-2: #171e36;
  --border: #232b48;
  --accent: #e8503a;
  --accent-hover: #f4634e;
  --accent-soft: rgba(232, 80, 58, 0.12);
  --text: #eef1f8;
  --muted: #8b93a9;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
}

html, body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.falcon-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.falcon-brand {
  font-weight: 800;
  letter-spacing: 0.5px;
}
.falcon-brand .accent { color: var(--accent); }

.falcon-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(232, 80, 58, 0.35));
}
.falcon-logo-sm {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: -6px;
  margin-right: 4px;
}

.falcon-chip {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.8rem;
  border-radius: 8px;
  padding: 2px 10px;
  /* default (belum diketahui / sedang memuat): warna netral aksen Falcon */
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
/* IP cocok dengan OFFICE_IP -> hijau */
.falcon-chip-office {
  color: var(--success);
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid var(--success);
}
/* IP tidak cocok (WFH) -> kuning */
.falcon-chip-off {
  color: var(--warning);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid var(--warning);
}
/* Anggota ALWAYS_REMOTE -> biru */
.falcon-chip-remote {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid #60a5fa;
}
/* Diakses lewat localhost (tes lokal) -> abu-abu netral, bukan kuning */
.falcon-chip-local {
  color: var(--muted);
  background: var(--card-2);
  border: 1px solid var(--border);
}

.text-muted, .form-text { color: var(--muted) !important; }

/* Form controls */
.form-control, .form-select, textarea {
  background: var(--card-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.2rem var(--accent-soft) !important;
}
.form-control::placeholder { color: var(--muted); }
.form-control[readonly] { opacity: 0.7; }
.form-label { color: var(--text); font-weight: 500; }

/* Buttons */
.btn-falcon {
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: 0.65rem 1rem;
}
.btn-falcon:hover, .btn-falcon:focus { background: var(--accent-hover); color: #fff; }
.btn-falcon:disabled { background: var(--accent); opacity: 0.6; }

.btn-outline-falcon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 10px;
}
.btn-outline-falcon:hover { border-color: var(--accent); color: var(--accent-hover); }

/* Badges */
.badge-wfo { background: rgba(52, 211, 153, 0.15); color: var(--success); border: 1px solid var(--success); }
.badge-wfh { background: rgba(251, 191, 36, 0.15); color: var(--warning); border: 1px solid var(--warning); }
.badge-remote { background: rgba(96, 165, 250, 0.15); color: #60a5fa; border: 1px solid #60a5fa; }
.badge-absen { background: rgba(248, 113, 113, 0.15); color: var(--danger); border: 1px solid var(--danger); }
.badge-role { background: var(--accent-soft); color: var(--accent-hover); border: 1px solid var(--accent); }
.badge-team { background: rgba(96, 165, 250, 0.15); color: #60a5fa; border: 1px solid #60a5fa; }
.badge-personal { background: rgba(192, 132, 252, 0.15); color: #c084fc; border: 1px solid #c084fc; }
.badge-wfo, .badge-wfh, .badge-remote, .badge-absen, .badge-role, .badge-team, .badge-personal {
  border-radius: 8px; padding: 3px 10px; font-size: 0.75rem; font-weight: 600;
}

/* Instruksi */
.instruction-card {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.6rem;
}
.instruction-card.scope-team { border-left-color: #60a5fa; }
.instruction-card.scope-personal { border-left-color: #c084fc; }
.instruction-card .msg { white-space: pre-wrap; margin: 0.35rem 0; }
.instruction-card.expired { opacity: 0.55; }

/* Table */
.falcon-table { color: var(--text); }
.falcon-table thead th {
  background: var(--card-2);
  color: var(--muted);
  border-bottom: 1px solid var(--border) !important;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.falcon-table tbody td {
  background: transparent;
  color: var(--text);
  border-bottom: 1px solid var(--border) !important;
  vertical-align: top;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.falcon-table tbody tr:hover td { background: var(--card-2); }

/* Alerts */
.alert-falcon-success {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid var(--success);
  color: var(--success);
  border-radius: 12px;
}
.alert-falcon-danger {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 12px;
}

/* Summary cards */
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
  padding: 1rem 0.5rem;
}
.stat-card .num { font-size: 1.8rem; font-weight: 800; }
.stat-card .label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

a { color: var(--accent-hover); }