/* ── PLDT Telepreneur App – Blue & Green Theme ──────────── */
:root {
  --primary:       #1d4ed8;   /* Blue  */
  --primary-dark:  #1e3a8a;
  --primary-light: #eff6ff;
  --accent:        #16a34a;   /* Green */
  --accent-dark:   #166534;
  --accent-light:  #f0fdf4;

  /* Override Bootstrap danger → blue */
  --bs-danger:          #1d4ed8;
  --bs-danger-rgb:      29, 78, 216;
  --bs-danger-bg-subtle:#eff6ff;
  --bs-danger-border-subtle:#bfdbfe;
}

/* Auth pages */
body.auth-body {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 50%, #16a34a 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.auth-wrap { width: 100%; max-width: 420px; }
.auth-card { border: none; border-radius: 16px; overflow: hidden; }

.pldt-logo-box {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  box-shadow: 0 4px 16px rgba(29,78,216,.3);
}

/* OTP boxes */
.otp-box {
  width: 44px !important; height: 56px;
  padding: 0; border-radius: 10px;
  font-size: 1.5rem;
  border: 2px solid #dee2e6;
  transition: border-color .2s;
}
.otp-box:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,.15);
}

/* Dashboard */
body:not(.auth-body) {
  background: #f4f6fb;
  padding-bottom: 60px;
}

/* Stat cards */
.stat-card { border-radius: 12px; transition: transform .2s; }
.stat-card:hover { transform: translateY(-2px); }
.stat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
}
.bg-primary-soft { background: #eff6ff; }
.bg-warning-soft { background: #fff8e1; }
.bg-success-soft { background: #f0fdf4; }
.bg-danger-soft  { background: #eff6ff; }
.stat-num { font-size: 2rem; font-weight: 700; line-height: 1; color: #1a1a2e; }
.stat-lbl { font-size: .75rem; color: #6c757d; text-transform: uppercase; letter-spacing: .5px; }

/* Tables */
.table { font-size: .875rem; }
.table th { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .3px; }

/* Badges */
.badge { font-size: .72rem; font-weight: 600; }

/* ── Bootstrap danger override (buttons, badges, alerts) ── */
.btn-danger {
  background-color: var(--primary) !important;
  border-color:     var(--primary) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background-color: var(--primary-dark) !important;
  border-color:     var(--primary-dark) !important;
}
.btn-danger:focus {
  box-shadow: 0 0 0 .25rem rgba(29,78,216,.35) !important;
}
.btn-outline-danger {
  color:        var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-outline-danger:hover {
  background-color: var(--primary) !important;
  color: #fff !important;
}
.text-danger  { color: var(--primary) !important; }
.bg-danger    { background-color: var(--primary) !important; }
.border-danger{ border-color: var(--primary) !important; }
.alert-danger {
  color: #1e3a8a;
  background-color: #eff6ff;
  border-color: #bfdbfe;
}
.badge.bg-danger { background-color: var(--primary) !important; }

/* Green accents for success / approved */
.btn-success, .bg-success { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.btn-success:hover  { background-color: var(--accent-dark) !important; }
.badge.bg-success   { background-color: var(--accent) !important; }
.text-success       { color: var(--accent) !important; }
.alert-success      { background-color: var(--accent-light); border-color: #bbf7d0; color: #166534; }

/* Forms */
.required-label::after { content: ' *'; color: var(--primary); }
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}

/* Step nav */
.step-nav { gap: 8px; }
.step-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  background: #e9ecef; font-size: .8rem; color: #6c757d;
  transition: all .2s; cursor: default;
}
.step-pill.active { background: var(--primary); color: #fff; font-weight: 600; }
.step-pill.done   { background: var(--accent);  color: #fff; }
.step-num {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700;
}

/* Plan card */
.plan-card {
  border: 2px solid #dee2e6; border-radius: 12px;
  padding: 16px; cursor: pointer; transition: all .2s; margin-bottom: 8px;
}
.plan-card.selected { border-color: var(--primary); background: var(--primary-light); }
.plan-card:hover    { border-color: var(--primary); }

/* Camera area */
.camera-capture-area {
  border: 2px dashed #dee2e6; border-radius: 12px;
  padding: 20px; text-align: center; background: #f8f9fa;
  transition: border-color .2s;
}
.camera-capture-area:hover { border-color: var(--primary); }
.capture-preview { text-align: center; }
.capture-preview img { max-height: 200px; border-radius: 8px; margin-bottom: 8px; }

/* Chat bubbles */
.chat-bubble {
  max-width: 80%; padding: 10px 14px;
  border-radius: 16px; font-size: .875rem;
}
.admin-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.agent-bubble { background: #e9ecef; color: #333; border-bottom-left-radius: 4px; }
.chat-time { font-size: .7rem; opacity: .7; margin-top: 4px; text-align: right; }
.admin-bubble .chat-time { color: rgba(255,255,255,.8); }

/* Card header override */
.card-header.bg-danger { background: var(--primary) !important; }
.bg-danger.text-white  { background: var(--primary) !important; }

/* Navbar */
.navbar {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary)) !important;
}

/* Footer */
.footer { z-index: 100; }

/* Cards */
.card { border-radius: 12px; border: none; }
.card-header {
  border-radius: 12px 12px 0 0 !important;
  background: #fff; border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Pagination */
.page-link { color: var(--primary); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* ── Message bubble slide-in ─────────────────────────────── */
.msg-animate {
  animation: msgSlideIn .25s ease-out;
}
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Bell ring on new message */
.bell-ring { animation: bellRingOnce .5s ease !important; }
@keyframes bellRingOnce {
  0%,100% { transform: rotate(0); }
  20%     { transform: rotate(-20deg); }
  40%     { transform: rotate(20deg); }
  60%     { transform: rotate(-12deg); }
  80%     { transform: rotate(12deg); }
}

/* ── Notification Bell ───────────────────────────────────── */
.notif-bell { position: relative; }

.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: #16a34a;
  color: #fff;
  border-radius: 9px;
  font-size: .65rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid #1d4ed8;
  animation: pulse-badge 2s infinite;
  pointer-events: none;
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}

.notif-dropdown {
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  border-radius: 12px;
  border: none;
  padding: 0;
}

.notif-header {
  background: #f8fafc;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #e2e8f0;
}

.notif-item {
  color: #1e293b;
  border-bottom: 1px solid #f1f5f9;
  transition: background .15s;
}
.notif-item:hover { background: #eff6ff; }
.notif-item:last-child { border-bottom: none; }

.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
  margin-top: 5px;
}

.notif-sender { color: #1e293b; }
.notif-msg    { line-height: 1.3; }

/* Bell shake when unread */
.notif-bell:has(.notif-badge) i {
  animation: bell-shake 3s 1s infinite;
}
@keyframes bell-shake {
  0%,90%,100% { transform: rotate(0); }
  92%  { transform: rotate(-15deg); }
  94%  { transform: rotate(15deg); }
  96%  { transform: rotate(-10deg); }
  98%  { transform: rotate(10deg); }
}

/* QR */
#qrCode img, #qrContainer img { border-radius: 8px; image-rendering: pixelated; }

/* Responsive */
@media (max-width: 576px) {
  .step-lbl { display: none !important; }
  .stat-num { font-size: 1.5rem; }
  .container-fluid { padding-left: 12px; padding-right: 12px; }
  .otp-box { width: 40px !important; height: 50px; font-size: 1.3rem; }
}