/* ===== Jan Mitra — Custom CSS ===== */

/* --- Input Fields --- */
.input {
  border: 1.5px solid #E5E9F0;
  background: #F4F6FB;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 10px;
  color: #1A1A2E;
  width: 100%;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.input:focus {
  border-color: #1B4FFF;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27, 79, 255, 0.10);
}
.input.error {
  border-color: #EF4444;
  background: #FEF2F2;
}
.input.verified {
  border-color: #00C896;
}

/* --- OTP Boxes --- */
.otp-box {
  width: 52px;
  height: 56px;
  border: 2px solid #E5E9F0;
  background: #F4F6FB;
  border-radius: 14px;
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1B4FFF;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.otp-box:focus,
.otp-box.filled {
  border-color: #1B4FFF;
  background: #EEF2FF;
}
.otp-box.error {
  border-color: #EF4444;
}

/* --- Section Divider --- */
.section-divider {
  background: #EEF2FF;
  border-radius: 10px;
  padding: 8px 12px;
  color: #1B4FFF;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
}

/* --- Ticket Card left-border-by-status --- */
.ticket-card { border-left: 4px solid #64748B; }
.ticket-card.status-draft       { border-left-color: #64748B; }
.ticket-card.status-assigned    { border-left-color: #1A3A6B; }
.ticket-card.status-in_progress { border-left-color: #00796B; }
.ticket-card.status-on_hold     { border-left-color: #F57C00; }
.ticket-card.status-resolved    { border-left-color: #2E7D32; }
.ticket-card.status-closed      { border-left-color: #1A3A6B; }
.ticket-card.status-rejected    { border-left-color: #C62828; }
.ticket-card.status-reopened    { border-left-color: #6A1B9A; }

/* --- Buttons --- */
.btn-primary {
  background: #1B4FFF;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-primary:hover {
  background: #0D2080;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(27, 79, 255, 0.30);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid #1B4FFF;
  color: #1B4FFF;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-outline:hover {
  background: #EEF2FF;
}

.btn-ghost {
  background: #fff;
  border: 1.5px solid #E5E9F0;
  color: #1A1A2E;
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.btn-ghost:hover {
  border-color: #1B4FFF;
}