:root {
  --brand-blue:   #1b4b8f;
  --brand-green:  #3fa15e;
  --brand-orange: #e8703a;
  --brand-yellow: #f2b632;
  --ink:          #1f2a37;
  --paper:        #f6f8fb;
  --card-border:  #e6e9ef;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.auth-page { background: linear-gradient(160deg, #eef3fb 0%, #f6f8fb 60%); min-height: 100vh; }

.brand-mark {
  width: 56px; height: 56px; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--brand-blue), var(--brand-green), var(--brand-yellow), var(--brand-orange));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.4rem;
  box-shadow: 0 6px 18px rgba(27,75,143,0.25);
}

.brand-logo {
  width: 84px; height: 84px; object-fit: contain;
}

.navbar-logo { height: 32px; width: auto; }

.brand-heading { color: var(--brand-blue); font-weight: 700; }

.btn-brand {
  background: var(--brand-blue); border-color: var(--brand-blue); color: #fff;
}
.btn-brand:hover { background: #163d73; border-color: #163d73; color: #fff; }

.btn-brand-outline {
  background: #fff; border: 1px solid var(--brand-blue); color: var(--brand-blue);
}
.btn-brand-outline:hover { background: var(--brand-blue); color: #fff; }

/* App shell */
.app-navbar {
  background: var(--brand-blue);
}
.app-navbar .navbar-brand, .app-navbar .nav-link { color: #fff !important; }
.app-navbar .nav-link.active { font-weight: 600; text-decoration: underline; }

.app-sidebar {
  background: #fff;
  border-right: 1px solid var(--card-border);
  min-height: calc(100vh - 56px);
}
.app-sidebar .nav-link {
  color: var(--ink); border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 2px;
}
.app-sidebar .nav-link.active { background: #eaf1fc; color: var(--brand-blue); font-weight: 600; }
.app-sidebar .nav-link:hover { background: #f2f5fa; }

/* KPI cards */
.kpi-card {
  border: 1px solid var(--card-border); border-radius: 12px; background: #fff;
  padding: 1.1rem 1.3rem;
}
.kpi-value { font-size: 1.9rem; font-weight: 700; color: var(--brand-blue); }
.kpi-label { color: #6b7685; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .04em; }

.card { border: 1px solid var(--card-border); border-radius: 12px; }
.section-title { font-weight: 700; color: var(--ink); }

/* Survey form */
.survey-section {
  border: 1px solid var(--card-border); border-radius: 12px; background: #fff;
  padding: 1.4rem; margin-bottom: 1.2rem;
}
.survey-section h5 { color: var(--brand-blue); font-weight: 700; }

.likert-group { display: flex; gap: .4rem; flex-wrap: wrap; }
.likert-option { flex: 1; min-width: 78px; }
.likert-option input { display: none; }
.likert-option label {
  display: block; text-align: center; padding: .5rem .3rem; border: 1px solid var(--card-border);
  border-radius: 8px; cursor: pointer; font-size: .82rem; color: #555; transition: all .15s;
}
.likert-option input:checked + label {
  background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; font-weight: 600;
}
.likert-option small { display: block; font-weight: 700; font-size: 1rem; }

.score-badge { display:inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

.scan-drop {
  border: 2px dashed var(--card-border); border-radius: 12px; padding: 2rem; text-align: center;
  background: #fbfcfe; cursor: pointer;
}
.scan-drop.dragover { border-color: var(--brand-blue); background: #eef4fc; }

@media print {
  .no-print { display: none !important; }
}