/* * {
  outline: 1px solid red;
} */
/* =========================
   GLOBAL
========================= */
body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  background-color: #f5f7fb;
  color: #333;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-top: 5.5rem;
}

/* =========================
   NAVBAR
========================= */
.navbar {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  position: fixed;
  z-index: 10000;
  height: 5.5rem;
  top: 0px;
  width:100%;
}

.navbar-brand {
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* =========================
   CARD
========================= */
.card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.card h4 {
  font-weight: 600;
}

/* =========================
   FORM
========================= */
.form-control,
.form-select,
textarea {
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  padding: 10px;
  transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 6px rgba(13, 110, 253, 0.2);
}

/* =========================
   BUTTON
========================= */
.btn-primary {
  border-radius: 10px;
  padding: 10px;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: #0b5ed7;
}

/* =========================
   ALERT
========================= */
.alert {
  border-radius: 10px;
}

/* =========================
   TABLE (CALL HISTORY)
========================= */
table {
  background: #fff;
  border-radius: 10px;
  /* overflow: hidden; */
}

.table-wrapper {
  border-radius: 10px;
  overflow: hidden;
}

table th {
  background-color: #0d6efd;
  color: white;
  font-weight: 500;
  text-align: center;
}

table td {
  vertical-align: middle;
  text-align: center;
}

table tr:hover {
  background-color: #f1f5ff;
}

/* =========================
   RESPONSE COLORS
========================= */
.response-Agree {
  color: #198754;
  font-weight: bold;
}

.response-Not\ Agree {
  color: #dc3545;
  font-weight: bold;
}

.response-Call\ Back {
  color: #fd7e14;
  font-weight: bold;
}

.response-No\ Response {
  color: #6c757d;
  font-weight: bold;
}

/* =========================
   HISTORY BOX
========================= */
#history {
  max-height: 200px;
  overflow-y: auto;
  border-radius: 10px;
}

/* =========================
   MOBILE INPUT HIGHLIGHT
========================= */
#mobile {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
}

/* =========================
   FOOTER
========================= */
footer {
  font-size: 13px;
}

/* =========================
   SCROLLBAR (modern look)
========================= */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* =========================
   BADGE STYLE (for dashboard)
========================= */
.badge-box {
  padding: 15px;
  border-radius: 12px;
  color: white;
  font-size: 18px;
  text-align: center;
}

.badge-agree {
  background: #198754;
}

.badge-notagree {
  background: #dc3545;
}

.badge-callback {
  background: #fd7e14;
}

.badge-noresponse {
  background: #6c757d;
}

/* =========================
   ANIMATION
========================= */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

sup.mandatory {
  color: red;
}