/* ============================================================
   ScerboMail — custom CSS (Bootstrap 5.3 extension)
   Primary: #007E41 | Dark: #005C2F | BG: #F9FAFB | Navbar: #000
   ============================================================ */

:root {
  --primary:      #007E41;
  --primary-dark: #005C2F;
  --primary-50:   #f0fdf4;
  --app-bg:       #F9FAFB;
}

body { background: var(--app-bg); font-family: 'Figtree', sans-serif; }

/* ---- Buttons ---- */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         8px 18px;
  background:      var(--primary);
  color:           #fff;
  border:          none;
  border-radius:   8px;
  font-weight:     600;
  font-size:       14px;
  text-decoration: none;
  cursor:          pointer;
  transition:      background .15s, transform .1s;
  line-height:     1.4;
}
.btn-primary:hover  { background: var(--primary-dark); color: #fff; }
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; }

/* ---- Badges ---- */
.badge-high,
.badge-medium,
.badge-low,
.badge-spam,
.badge-ok,
.badge-error {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-high   { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }
.badge-medium { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
.badge-low    { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }
.badge-spam   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.badge-ok     { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.badge-error  { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }

/* ---- Email card feed ---- */
.email-card {
  background:    #fff;
  border:        1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 6px;
  cursor:        pointer;
  transition:    box-shadow .15s, border-color .15s;
}
.email-card:hover {
  box-shadow:   0 4px 14px rgba(0,0,0,.07);
  border-color: #d1d5db;
}
.email-card.unread { border-left: 3px solid var(--primary); }
.email-card.unread .fw-semibold { color: #111827; }

/* ---- Navbar ---- */
.navbar { background: #000 !important; }
.navbar-brand { font-weight: 800; font-size: 18px; letter-spacing: -.3px; }
.nav-link      { color: #9ca3af !important; font-size: 14px; font-weight: 500; border-radius: 6px; transition: background .15s, color .15s; }
.nav-link:hover { color: #e5e7eb !important; background: rgba(255,255,255,.06); }
.nav-link.active { background: rgba(0,126,65,.2) !important; color: #4ade80 !important; }

/* ---- Page header ---- */
.page-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             10px;
  margin-bottom:   20px;
}
.page-header h1 { font-size:20px; font-weight:700; color:#111827; margin:0; }

/* ---- Forms ---- */
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(0,126,65,.15);
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

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

/* ---- Table hover ---- */
.table-hover tbody tr:hover { background: var(--primary-50); }

/* ---- Utility ---- */
.min-w-0 { min-width: 0; }

/* ---- Mobile tweaks ---- */
@media (max-width: 576px) {
  .page-header h1 { font-size: 16px; }
  .email-card .d-flex.align-items-center.justify-content-between { flex-direction: column; align-items: flex-start; }
}