/* Toolbox Mailer custom responsive tweaks */

/* Base font smoothing + legibility */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Typography scale adjustments for small screens */
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.55rem; line-height: 1.25; }
  h2, .h2 { font-size: 1.35rem; line-height: 1.3; }
  h3, .h3 { font-size: 1.2rem; }
  .page-header h1 { margin-bottom: .35rem; }
  .page-header p { font-size: .85rem; }
  .card-header { padding: 0.65rem 1rem; font-size: .9rem; }
  .card-body { padding: 0.9rem 1rem; }
  .btn { padding: 0.55rem 0.95rem; font-size: .8rem; }
  .form-control, .form-select { font-size: .85rem; padding: .45rem .7rem; }
  .navbar-brand span { font-size: 1rem; }
}

/* Medium screens tighten spacing slightly */
@media (min-width: 576px) and (max-width: 991.98px) {
  h1, .h1 { font-size: 1.75rem; }
  .card-body { padding: 1rem 1.15rem; }
}

/* Improve vertical rhythm */
.page-header { margin-top: .5rem; }

/* Utility: truncate overly long inline text blocks */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Make alerts slightly denser on mobile */
@media (max-width: 575.98px) {
  .alert { padding: .6rem .75rem; font-size: .75rem; }
}

/* Spacing tweaks for stacked buttons */
.btn + .btn { margin-left: .5rem; }
@media (max-width: 575.98px) { .btn + .btn { margin-left: .4rem; } }

/* Narrow screens: reduce gap in worker status columns to stack cleanly */
@media (max-width: 575.98px) {
  #queueStatus div, #workerLock div { font-size: .75rem; }
}

/* --- UI Polish Additions --- */
body { background-color: #f5f7fa; }

.page-header h1 { font-size: 1.65rem; }
.page-header { position: relative; }
.page-header::after { content:""; position:absolute; left:20px; right:20px; bottom:0; height:3px; background:linear-gradient(90deg,#0d6efd,#6f42c1 60%,#0d6efd); opacity:0.08; border-radius:3px; }

.card { transition: box-shadow .15s ease, transform .15s ease; }
.card:hover { box-shadow:0 6px 18px -6px rgba(0,0,0,.12); }
.card-header { background: #ffffff; }

.table-hover tbody tr:hover { background:#f0f6ff; }
.table thead th { font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; }

.progress { background:#e9edf2; }
.progress-bar { transition: width .4s ease; }

.badge.bg-info { background:#0dcaf0 !important; color:#084c61; }
.badge.bg-secondary { background:#6c757d !important; }
.badge.bg-warning { background:#ffc107 !important; color:#4d3e00; }

.table td .btn { margin:2px 2px; }

#workerStatusBox, #workerQueueCard { border:1px dashed #ced4da; padding:.5rem .75rem; border-radius:8px; background:#ffffff; }
#workerStatusBox .badge, #dashWorkerStatus { font-size:.65rem; }

.alert { animation: fadeHold 5s forwards; }
@keyframes fadeHold { 0% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; } }

#emailPreview { border:1px solid #dee2e6; box-shadow: inset 0 0 8px rgba(0,0,0,.03); }

#composeForm .form-label { font-weight:500; }
#composeForm small.text-muted { font-size:.7rem; }

.pagination .page-link { border-radius:4px; }

.dashboard-metric { position:relative; }
.dashboard-metric h3 { font-weight:600; }
.dashboard-metric .metric-shadow { position:absolute; inset:4px; border-radius:8px; background:radial-gradient(circle at 30% 30%, rgba(13,110,253,.15), transparent 70%); opacity:.4; pointer-events:none; }

.btn-outline-primary:hover { background:#0d6efd; color:#fff; }
.btn-outline-secondary:hover { background:#6c757d; color:#fff; }
.btn-outline-warning:hover { background:#ffc107; color:#212529; }

.badge-count { background:#0d6efd; color:#fff; padding:2px 6px; border-radius:10px; font-size:.65rem; font-weight:500; }

.spinner-overlay { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

#logsTable tbody tr.failed-row { background:#ffe5e5; }

.fade-in { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }