/* SIMLAB Mobile Theme — navy–teal */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --m-navy: #0b3a5c;
  --m-navy-deep: #06283f;
  --m-teal: #0d8f7f;
  --m-teal-bright: #16a892;
  --m-soft: #e7f4f2;
  --m-sand: #f5f8f7;
  --m-ink: #1a2b33;
  --m-muted: #5c6d75;
  --m-line: #d7e4e1;
  --m-radius: 16px;
  --m-shadow: 0 10px 28px rgba(6, 40, 63, 0.16);
  --m-grad: linear-gradient(135deg, #06283f 0%, #0b3a5c 48%, #0d8f7f 100%);
}

html, body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
}

body {
  background: var(--m-grad) !important;
  background-attachment: fixed !important;
  color: var(--m-ink);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 520px;
}

.header,
.page-header,
.mobile-header {
  color: #fff !important;
}

.header h1,
.header h2,
.page-header h1 {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

.header p,
.header-subtitle {
  opacity: 0.92 !important;
}

.header-icon,
.icon-circle {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 20px rgba(6, 40, 63, 0.2) !important;
  color: var(--m-navy) !important;
}

.card,
.menu-card,
.form-card,
.content-card,
.info-card {
  background: #fff !important;
  border-radius: var(--m-radius) !important;
  box-shadow: var(--m-shadow) !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.permohonan-info,
.info-box,
.detail-box {
  background: var(--m-soft) !important;
  border-left: 4px solid var(--m-teal) !important;
  border-radius: 12px !important;
}

.permohonan-info h3,
.info-box h3,
.section-title {
  color: var(--m-navy) !important;
  font-weight: 800 !important;
}

.form-control,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
  border: 2px solid var(--m-line) !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--m-teal) !important;
  box-shadow: 0 0 0 3px rgba(13, 143, 127, 0.18) !important;
  outline: none !important;
}

.btn,
.btn-primary,
.btn-submit,
button[type="submit"],
.option-btn.active {
  background: var(--m-grad) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(11, 58, 92, 0.22) !important;
}

.btn:hover,
.btn-primary:hover,
button[type="submit"]:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-secondary,
.btn-outline,
.btn-cancel {
  background: #fff !important;
  color: var(--m-navy) !important;
  border: 2px solid var(--m-navy) !important;
  box-shadow: none !important;
}

.option-btn {
  border: 2px solid var(--m-line) !important;
  border-radius: 12px !important;
  color: var(--m-muted) !important;
  font-weight: 600 !important;
  background: #fff !important;
}

.option-btn:hover {
  border-color: var(--m-teal) !important;
  color: var(--m-navy) !important;
  box-shadow: 0 4px 12px rgba(11, 58, 92, 0.12) !important;
}

.option-btn.active {
  border-color: transparent !important;
}

.menu-item {
  background: var(--m-sand) !important;
  border-radius: 12px !important;
  border-left: 4px solid transparent !important;
  color: var(--m-ink) !important;
  font-weight: 600 !important;
}

.menu-item:hover,
.menu-item:active {
  background: var(--m-soft) !important;
  border-left-color: var(--m-teal) !important;
  color: var(--m-navy) !important;
}

.menu-title {
  color: var(--m-navy-deep) !important;
  font-weight: 800 !important;
}

a {
  color: var(--m-teal);
}

.alert-danger {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
  border-radius: 12px !important;
}

.alert-success {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
  border-radius: 12px !important;
}

.badge,
.status-badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.list-item,
.sample-card,
.step-card {
  border-radius: 14px !important;
  border: 1px solid var(--m-line) !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(6, 40, 63, 0.06) !important;
}

.footer,
.mobile-footer {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Soft vignette atmosphere without flat single color */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(22, 168, 146, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(11, 58, 92, 0.35), transparent 50%);
}

body > * {
  position: relative;
  z-index: 1;
}