:root{--brand-primary:#c60000;--brand-secondary:#ffd700;--brand-dark:#1a1a1a;--brand-soft:#fff6f6;--bg-color:#f4f6f9;--line:rgba(33,37,41,.1);--shadow:0 20px 50px rgba(33,37,41,.09)}body{font-family:Poppins,sans-serif;background:#fffaf9;color:#222}.navbar-brand,h1,h2,h3,h4,h5,h6,.display-5{font-family:Oswald,sans-serif;text-transform:uppercase}#mainNav{background:rgba(26,26,26,.88);backdrop-filter:blur(8px)}.public-shell{min-height:100vh;padding-top:6rem;padding-bottom:3rem;background:radial-gradient(circle at top left,rgba(198,0,0,.12),transparent 28rem),var(--bg-color)}.complaint-card{border:0;border-radius:28px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}.complaint-card-header{padding:1.65rem 2rem 1.35rem;background:linear-gradient(135deg,rgba(198,0,0,.92) 0%,rgba(122,13,20,.98) 55%,rgba(26,26,26,.98) 100%);color:#fff}.complaint-hero{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.navbar-logo{height:42px;width:auto}.navbar .nav-link{font-weight:600;color:rgba(255,255,255,.82)}.navbar .nav-link:hover,.navbar .nav-link:focus{color:#fff}.complaint-title{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.04em}.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.72);font-weight:700}.hero-badge{display:flex;align-items:center;gap:.65rem;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.75rem 1rem;font-weight:600;white-space:nowrap}.form-control,.form-select{border-radius:16px;padding:.85rem 1rem}.form-control:focus,.form-select:focus{border-color:var(--brand-primary);box-shadow:0 0 0 .2rem rgba(198,0,0,.12)}.btn-dps{border-radius:999px;background:var(--brand-primary);border:2px solid var(--brand-primary);color:#fff;font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.06em}.btn-dps:hover{background:#a00000;border-color:#a00000;color:#fff}.section-box,.form-step-card{border:1px solid var(--line);border-radius:22px;background:#fff;padding:1.25rem}.form-step-card{display:flex;gap:1rem}.step-marker{width:2.3rem;height:2.3rem;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--brand-primary);color:#fff;font-family:Oswald,sans-serif;flex:0 0 auto}.complaint-items{display:grid;gap:1rem}.complaint-item{border:1px solid rgba(198,0,0,.12);border-radius:20px;background:linear-gradient(180deg,#fff,#fffafa);padding:1rem}.complaint-item-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.item-count{display:inline-block;color:var(--brand-primary);font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.search-results{display:grid;gap:.5rem}.result-card{width:100%;text-align:left;border:1px solid var(--line);border-radius:14px;background:#fff;padding:.8rem 1rem}.result-card:hover{border-color:var(--brand-primary);background:#fff8f8}.result-card strong,.result-card span{display:block}.result-card span{font-size:.82rem;color:#666}.event-helper,.description-helper{color:#7b2d35;background:#fff4f4;border:1px solid rgba(198,0,0,.1);border-radius:14px;padding:.75rem 1rem}#signatureCanvas{width:100%;height:180px;border:2px dashed rgba(198,0,0,.35);border-radius:18px;background:#fff;touch-action:none}.submit-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:22px;padding:1rem}.ticket-copy-box{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px dashed rgba(198,0,0,.35);border-radius:20px;background:#fff8f8;padding:1rem 1.25rem}.public-footer{background:rgba(26,26,26,.88);color:rgba(255,255,255,.72);backdrop-filter:blur(8px)}

.admin-auth-body {
  min-height: 100vh;
  margin: 0;
  font-family: Poppins, sans-serif;
  background: radial-gradient(circle at top left, rgba(198, 0, 0, 0.16), transparent 28rem), #f4f6f9;
  color: #20161a;
  overflow-x: hidden;
}

.admin-auth-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-login-wrap {
  width: 100%;
  max-width: 420px;
  padding: 1.5rem;
}

.login-card {
  width: 100%;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.logo-img {
  height: 84px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  margin-bottom: 15px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.app-title {
  color: var(--brand-primary);
  font-family: Oswald, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
  margin: 0;
  text-transform: uppercase;
}

.app-subtitle {
  color: #6c757d;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 5px;
}

.card-body-custom {
  padding: 30px 40px 50px;
}

.admin-auth-body .form-control {
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 12px 15px;
  font-size: 0.95rem;
}

.admin-auth-body .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(198, 0, 0, 0.15);
}

.admin-auth-body .input-group-text {
  border-radius: 10px;
  background-color: transparent;
  border: 1px solid #e0e0e0;
  border-right: none;
  color: var(--brand-primary);
}

.admin-auth-body .input-group .form-control {
  border-left: none;
}

.admin-auth-body .input-group .form-control:focus {
  border-color: #e0e0e0;
  box-shadow: none;
}

.admin-auth-body .input-group:focus-within .input-group-text,
.admin-auth-body .input-group:focus-within .form-control {
  border-color: var(--brand-primary);
}

.btn-brand-login {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 50px;
  border: 2px solid var(--brand-primary);
  background-color: var(--brand-primary);
  color: #fff;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s;
}

.btn-brand-login:hover,
.btn-brand-login:focus {
  background-color: #a00000;
  border-color: #a00000;
  color: #fff;
  box-shadow: 0 5px 15px rgba(198, 0, 0, 0.3);
}

.text-admin-brand {
  color: var(--brand-primary);
}

@media (max-width: 575.98px) {
  .admin-login-wrap {
    padding: 1rem;
  }

  .card-body-custom {
    padding: 24px 26px 36px;
  }
}


.complaint-stepper {
  padding: 0.85rem;
  border: 1px solid rgba(198, 0, 0, 0.08);
  border-radius: 20px;
  background: #fffafa;
}

.complaint-stepper-progress {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  color: #7b6d70;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.complaint-step-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 0;
}

.complaint-step-tabs .nav-item {
  flex: 1 1 0;
}

.complaint-step-tabs .nav-link {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 999px;
  color: #7b6d70;
  font-weight: 700;
  background: transparent;
}

.complaint-step-tabs .nav-link.active {
  background: #fff3f3;
  color: var(--brand-primary);
}

.complaint-step-tabs .nav-link.step-complete {
  color: #146c43;
}

.complaint-step-tabs .nav-link.step-locked {
  opacity: 0.55;
}

.step-chip {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(198, 0, 0, 0.08);
  color: var(--brand-primary);
  font-size: 0.78rem;
  flex: 0 0 auto;
}

.complaint-step-tabs .nav-link.active .step-chip {
  background: var(--brand-primary);
  color: #fff;
}

.complaint-step-tabs .nav-link.step-complete .step-chip {
  background: #146c43;
  color: #fff;
}

.complaint-step-content > .tab-pane {
  display: none;
}

.complaint-step-content > .tab-pane.active {
  display: block;
}

.complaint-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.complaint-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.complaint-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-height: 108px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  transition: 0.2s ease;
}

.complaint-mode-card:hover,
.complaint-mode-card.active {
  border-color: rgba(198, 0, 0, 0.35);
  box-shadow: 0 14px 32px rgba(198, 0, 0, 0.08);
}

.complaint-mode-card input {
  margin-top: 0.35rem;
}

.complaint-mode-card .mode-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff6f6;
  flex: 0 0 auto;
}

.complaint-mode-card strong,
.complaint-mode-card small {
  display: block;
}

.complaint-mode-card strong {
  color: #241f21;
  font-family: Oswald, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.complaint-mode-card small {
  margin-top: 0.25rem;
  color: #6c757d;
}

.confirmation-panel {
  border: 1px solid rgba(20, 108, 67, 0.16);
  border-radius: 20px;
  padding: 1rem;
  background: linear-gradient(180deg, #fbfffd, #f5fff9);
}

.confirmation-statement {
  border: 1px solid rgba(20, 108, 67, 0.15);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  background: #ecfff4;
  color: #146c43;
  font-weight: 700;
}

.confirmation-review-item {
  border-color: rgba(20, 108, 67, 0.18);
  background: #fbfffd;
}

.confirmation-status-message {
  min-height: 1.2rem;
  font-weight: 600;
}

.complaint-review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.complaint-review-card {
  min-height: 112px;
  padding: 1rem;
  border: 1px solid rgba(198, 0, 0, 0.09);
  border-radius: 18px;
  background: #fffafa;
}

.complaint-review-card span,
.complaint-review-item span {
  display: block;
  margin-bottom: 0.35rem;
  color: #7b6d70;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.complaint-review-card strong,
.complaint-review-item strong {
  display: block;
  color: #241f21;
  font-family: Oswald, sans-serif;
  font-size: 1.05rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.complaint-review-card small,
.complaint-review-item small {
  display: block;
  margin-top: 0.25rem;
  color: #6c757d;
}

.complaint-review-list {
  display: grid;
  gap: 0.85rem;
}

.complaint-review-item {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.complaint-review-item p {
  margin: 0.6rem 0 0;
  color: #555;
}

.submit-bar-note {
  flex: 1 1 260px;
}

@media (max-width: 991.98px) {
  .complaint-step-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }

  .complaint-step-tabs .nav-item {
    flex: 0 0 auto;
  }

  .complaint-step-tabs .nav-link {
    min-width: 11rem;
    justify-content: flex-start;
    padding-inline: 0.85rem;
  }

  .complaint-review-grid,
  .complaint-mode-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .complaint-stepper-progress,
  .complaint-step-actions,
  .submit-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .complaint-review-grid,
  .complaint-mode-options {
    grid-template-columns: 1fr;
  }
}


/* Public complaint page typography tuning */
.public-shell {
  font-size: 0.94rem;
}

.complaint-title {
  font-size: clamp(1.55rem, 2.6vw, 2.25rem);
  line-height: 1.1;
}

.complaint-card-header p,
.form-step-card p,
.event-helper,
.description-helper {
  font-size: 0.88rem;
}

.form-step-card h3,
.form-step-card .h5 {
  font-size: 1.05rem;
}

.form-step-card h4,
.form-step-card .h6 {
  font-size: 0.95rem;
}

.form-label {
  font-size: 0.9rem;
  font-weight: 600;
}

.form-control,
.form-select {
  font-size: 0.92rem;
}

.form-select-lg {
  font-size: 1rem;
}

.complaint-step-tabs .nav-link {
  font-size: 0.9rem;
}

.item-count,
.complaint-review-card span,
.complaint-review-item span {
  font-size: 0.7rem;
}

.complaint-review-card strong,
.complaint-review-item strong {
  font-size: 0.96rem;
}

.result-card {
  font-size: 0.88rem;
}

.submit-bar strong,
.submit-bar-note strong {
  font-size: 0.95rem;
}

@media (max-width: 575.98px) {
  .public-shell {
    font-size: 0.9rem;
    padding-top: 5rem;
  }

  .complaint-card {
    border-radius: 22px;
  }

  .complaint-card-header {
    padding: 1.25rem 1.2rem 1.1rem;
  }

  .complaint-hero {
    display: block;
  }

  .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }

  .complaint-title {
    font-size: 1.34rem;
    letter-spacing: 0.03em;
  }

  .complaint-card-header p {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .complaint-step-tabs .nav-link {
    min-width: 9.5rem;
    font-size: 0.84rem;
  }
}