/* ============================================================
   Northern Solutions – Admin Panel Stylesheet
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ns-dark:    #1a2330;
  --ns-mid:     #2c3e50;
  --ns-teal:    #6b7280;
  --ns-teal-d:  #4b5563;
  --white:      #ffffff;
  --light:      #f5f7fa;
  --border:     #e0e6ed;
  --text:       #333333;
  --text-light: #666666;
  --danger:     #e53e3e;
  --success:    #38a169;
  --sidebar-w:  230px;
  --font-h:     'Montserrat', sans-serif;
  --font-b:     'Open Sans', sans-serif;
}

body { font-family: var(--font-b); color: var(--text); background: var(--light); }

/* ── Login ─────────────────────────────────────────────────── */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ns-dark);
}

.login-card {
  background: var(--white);
  padding: 48px 44px;
  width: 380px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo span { font-family: var(--font-h); font-size: 1.5rem; font-weight: 800; color: var(--ns-dark); }
.login-logo em   { font-family: var(--font-h); font-size: 1.5rem; font-weight: 800; color: var(--ns-teal); font-style: normal; }
.login-logo small {
  display: block;
  font-size: 0.7rem;
  color: var(--text-light);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}
.login-note { text-align: center; font-size: 0.8rem; color: var(--text-light); margin-top: 18px; }

/* ── Admin layout ──────────────────────────────────────────── */
.admin-body { display: flex; min-height: 100vh; }

.admin-sidebar {
  width: var(--sidebar-w);
  background: var(--ns-dark);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
}

.sidebar-brand {
  display: block;
  padding: 26px 22px 18px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-brand span { font-family: var(--font-h); font-size: 1.05rem; font-weight: 800; color: var(--white); }
.sidebar-brand em   { font-family: var(--font-h); font-size: 1.05rem; font-weight: 800; color: var(--ns-teal); font-style: normal; }
.sidebar-brand small {
  display: block;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}

.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; min-height: 0; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.875rem;
  font-family: var(--font-h);
  font-weight: 500;
  transition: all 0.2s;
  position: relative;
}
.sidebar-nav a svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none; stroke-width: 2;
  flex-shrink: 0;
}
.sidebar-nav a:hover { color: var(--white); background: rgba(255, 255, 255, 0.05); }
.sidebar-nav a.active { color: var(--white); background: rgba(255, 255, 255, 0.1); }
.sidebar-nav a.active::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ns-teal);
}

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}

.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  font-size: 0.8rem;
  font-family: var(--font-h);
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s;
  flex-shrink: 0;  /* never squish — always stays below nav links */
}
.sidebar-logout svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.sidebar-logout:hover { color: var(--white); }

.admin-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

.admin-topbar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.page-title { font-family: var(--font-h); font-size: 1.2rem; font-weight: 700; color: var(--ns-dark); }
.topbar-site a { font-size: 0.82rem; color: var(--ns-teal); text-decoration: none; }
.topbar-site a:hover { text-decoration: underline; }

.admin-main-inner { padding: 28px 32px; }

/* ── Flash messages ─────────────────────────────────────────── */
.flash {
  padding: 12px 18px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0;
}
.flash-success { background: #f0fff4; color: #276749; border-left: 4px solid var(--success); }
.flash-error   { background: #fff5f5; color: #9b2c2c; border-left: 4px solid var(--danger);  }

/* ── Stat cards ─────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.stat-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.stat-card {
  background: var(--white);
  padding: 24px;
  border-top: 3px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.stat-card.accent { border-top-color: var(--ns-teal); }

.stat-number { font-family: var(--font-h); font-size: 2.6rem; font-weight: 800; color: var(--ns-dark); line-height: 1; }
.stat-label  { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); margin-bottom: 8px; font-weight: 700; }
.stat-sub    { font-size: 0.78rem; color: var(--text-light); margin-top: 6px; }

/* ── Section header ─────────────────────────────────────────── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-header h2 { font-family: var(--font-h); font-size: 1rem; font-weight: 700; color: var(--ns-dark); }
.link-more { font-size: 0.85rem; color: var(--ns-teal); text-decoration: none; }
.link-more:hover { text-decoration: underline; }

/* ── Table ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; background: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.admin-table thead th {
  text-align: left;
  padding: 11px 16px;
  font-family: var(--font-h);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  background: var(--light);
  border-bottom: 1px solid var(--border);
}
.admin-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-table tbody tr:hover td { background: #fafbfc; }
.admin-table tbody tr:last-child td { border-bottom: none; }

.row-unread td { background: #fffdf0; }
.row-unread:hover td { background: #fff8e0; }

.nowrap { white-space: nowrap; }
.msg-cell { max-width: 280px; }
.msg-preview { color: var(--text-light); font-size: 0.82rem; line-height: 1.5; word-break: break-word; }
.text-muted { color: var(--text-light); font-size: 0.8rem; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge-new  {
  display: inline-block;
  background: var(--danger);
  color: var(--white);
  font-size: 0.62rem; font-weight: 700;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 6px;
}
.badge-read {
  display: inline-block;
  background: #e2e8f0;
  color: #718096;
  font-size: 0.62rem; font-weight: 700;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.tab-row {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.tab-row a {
  padding: 10px 20px;
  font-family: var(--font-h);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab-row a:hover { color: var(--ns-dark); }
.tab-row a.tab-active { color: var(--ns-dark); border-bottom-color: var(--ns-dark); }

/* ── Action buttons ─────────────────────────────────────────── */
.actions-cell { white-space: nowrap; }

.btn-action {
  display: inline-block;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-h);
  border: none;
  cursor: pointer;
  margin-right: 4px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}
.btn-action:hover { opacity: 0.75; }
.btn-read    { background: #ebf8ff; color: #2b6cb0; }
.btn-archive { background: #f0fff4; color: #276749; }
.btn-delete  { background: #fff5f5; color: #9b2c2c; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-h);
  color: var(--ns-dark);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-field small { text-transform: none; font-weight: 400; color: var(--text-light); }
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: var(--font-b);
  font-size: 0.9rem;
  color: var(--text);
  transition: border-color 0.2s;
  outline: none;
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--ns-teal); }
.form-field textarea { resize: vertical; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  background: var(--ns-dark);
  color: var(--white);
  border: none;
  padding: 13px 28px;
  font-family: var(--font-h);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-full { width: 100%; }

.btn-save {
  background: var(--ns-teal);
  color: var(--white);
  border: none;
  padding: 10px 22px;
  font-family: var(--font-h);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}
.btn-save:hover { background: var(--ns-teal-d); }

/* ── Price cards ─────────────────────────────────────────────── */
.price-category { margin-bottom: 40px; }

.category-title {
  font-family: var(--font-h);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ns-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}

.price-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }

.price-card {
  background: var(--white);
  padding: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border-top: 3px solid var(--border);
  position: relative;
}
.price-card-featured  { border-top-color: var(--ns-teal); }
.price-card-inactive  { opacity: 0.5; }
.price-badge {
  position: absolute; top: 0; right: 22px;
  background: var(--ns-teal);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-h);
  padding: 3px 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pf-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.input-price { font-weight: 700; }

.pf-checks { display: flex; gap: 20px; margin-bottom: 10px; flex-wrap: wrap; }
.check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-family: var(--font-h);
  color: var(--text);
  cursor: pointer;
}
.check-label input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--ns-teal); }

/* ── Services grid ──────────────────────────────────────────── */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

.service-item {
  background: var(--white);
  padding: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border-top: 3px solid var(--border);
}
.service-inactive { opacity: 0.5; }

.service-slug {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--text-light);
  font-family: monospace;
  background: var(--light);
  padding: 3px 8px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}

/* ── Add / delete controls ───────────────────────────────────── */
.item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.delete-form { margin-top: 10px; }

.btn-delete-item {
  background: none;
  border: 1px solid #e53e3e;
  color: #e53e3e;
  font-family: var(--font-h);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.btn-delete-item:hover { background: #e53e3e; color: #fff; }

.btn-add {
  background: var(--ns-teal);
  color: var(--white);
  border: none;
  font-family: var(--font-h);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 18px;
  cursor: pointer;
  margin-top: 6px;
  transition: background 0.18s;
}
.btn-add:hover { background: var(--ns-teal-d, #0e8a7a); }

.price-card-new,
.service-item-new {
  border-top-color: var(--ns-teal);
  background: #f4fdfb;
  border-style: dashed;
}
.new-card-title {
  font-family: var(--font-h);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ns-teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.new-service-slug { background: #e6f7f4; border-color: var(--ns-teal); color: var(--ns-teal); }

.new-category-section { margin-top: 36px; }
.new-category-title { color: var(--ns-teal); }

.page-desc { font-size: 0.9rem; color: var(--text-light); margin-bottom: 24px; }

/* ── Settings ────────────────────────────────────────────────── */
.settings-card {
  background: var(--white);
  padding: 32px;
  max-width: 480px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.settings-card h2 { font-family: var(--font-h); font-size: 1.1rem; font-weight: 700; color: var(--ns-dark); margin-bottom: 24px; }
.settings-divider  { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.settings-info h3  { font-family: var(--font-h); font-size: 0.85rem; font-weight: 700; color: var(--ns-dark); margin-bottom: 12px; }
.settings-info p   { font-size: 0.875rem; color: var(--text); margin-bottom: 6px; }
.settings-info code { background: var(--light); padding: 2px 8px; font-family: monospace; font-size: 0.8rem; border: 1px solid var(--border); }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 52px;
  color: var(--text-light);
  font-size: 0.9rem;
  background: var(--white);
}

/* ── Contact cards (mobile stacked layout) ───────────────────── */
.contact-cards { display: none; }   /* shown only in @media via override */

.contact-card {
  background: var(--white);
  border-left: 3px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  font-size: 0.875rem;
}
.contact-card.card-unread { border-left-color: var(--danger); background: #fffdf0; }
.contact-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.contact-card-name { font-weight: 700; color: var(--ns-dark); font-size: 0.9rem; }
.contact-card-meta { font-size: 0.75rem; color: var(--text-light); margin-bottom: 6px; }
.contact-card-meta a { color: var(--ns-teal); }
.contact-card-service {
  display: inline-block;
  font-size: 0.7rem;
  font-family: var(--font-h);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  background: var(--light);
  padding: 2px 8px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}
.contact-card-msg {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 10px;
  word-break: break-word;
}
.contact-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.contact-card-actions .btn-action { margin: 0; }


/* -- Analytics page --------------------------------------------------------- */
.analytics-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 180px;
  padding: 0 4px 8px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 8px;
  background: var(--white);
  border-radius: 10px;
  padding: 16px 16px 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.chart-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
  cursor: default;
}
.chart-bar-val {
  font-size: 0.65rem;
  color: var(--text-light);
  min-height: 14px;
}
.chart-bar {
  width: 100%;
  max-width: 36px;
  background: var(--ns-teal, #10a599);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: background .2s;
}
.chart-bar-wrap:hover .chart-bar { background: var(--ns-teal-d, #0e8a7a); }
.chart-bar-label {
  font-size: 0.62rem;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.inline-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inline-bar {
  height: 8px;
  background: var(--ns-teal, #10a599);
  border-radius: 4px;
  min-width: 2px;
}
.inline-bar-wrap span {
  font-size: 0.78rem;
  color: var(--text-light);
  white-space: nowrap;
}

.btn-back-home {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-light);
  text-decoration: none;
  transition: color .2s;
}
.btn-back-home:hover { color: var(--ns-teal, #10a599); }

/* ── Sidebar hamburger toggle (hidden on desktop) ───────────── */
.sidebar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.sidebar-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ns-dark);
  border-radius: 1px;
}

/* ── Overlay for mobile sidebar ─────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 199;
}
.sidebar-overlay.open { display: block; }

/* ── Responsive — Mobile ────────────────────────────────────── */
@media (max-width: 768px) {

  /* Sidebar: off-canvas, slides in from left */
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 200;
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }

  /* Content: full viewport width, clip internal overflow so tables don't widen the page */
  .admin-content {
    margin-left: 0;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Topbar: tighter padding, show hamburger, prevent title overflow */
  .admin-topbar {
    padding: 12px 16px;
    gap: 12px;
  }
  .sidebar-toggle {
    display: flex;
  }
  .page-title {
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-site a {
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* Main area: less padding */
  .admin-main-inner {
    padding: 16px 14px;
  }

  /* Flash messages */
  .flash { font-size: 0.82rem; padding: 10px 14px; }

  /* ── Stat grid: 2 columns ── */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-number { font-size: 1.9rem; }
  .stat-card   { padding: 16px 14px; }
  .stat-label  { font-size: 0.65rem; }

  /* ── Section header ── */
  .section-header { margin-bottom: 10px; }
  .section-header h2 { font-size: 0.9rem; }

  /* ── Tables: horizontal scroll wrapper ── */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table { min-width: 540px; font-size: 0.8rem; }
  .admin-table thead th { padding: 9px 12px; font-size: 0.65rem; }
  .admin-table tbody td { padding: 10px 12px; }

  /* ── Contact cards (stacked layout, replaces table on mobile) ── */
  .contacts-table { display: none; }       /* hide table */
  .contact-cards  { display: block; }      /* show card list */

  /* ── Dashboard recent table ── */
  .dashboard-table { min-width: 420px; }

  /* ── Tabs ── */
  .tab-row { gap: 0; }
  .tab-row a { padding: 9px 14px; font-size: 0.8rem; }

  /* ── Actions cell: stack buttons vertically ── */
  .actions-cell { display: flex; flex-direction: column; gap: 4px; min-width: 80px; }
  .btn-action { margin-right: 0; margin-bottom: 0; width: 100%; text-align: center; }

  /* ── Price cards ── */
  .price-cards { grid-template-columns: 1fr; }
  .pf-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .price-card { padding: 18px; }

  /* ── Services grid ── */
  .services-grid { grid-template-columns: 1fr; }

  /* ── Settings cards: full width ── */
  .settings-card { max-width: 100%; padding: 20px 16px; }
  .settings-card h2 { font-size: 1rem; }
  code { word-break: break-all; }

  /* ── Login card ── */
  .login-card  { width: calc(100% - 32px); min-width: 0; padding: 36px 20px; }
  .login-logo span, .login-logo em { font-size: 1.25rem; }

  /* ── Analytics chart: shorter bars on small screens ── */
  .analytics-chart { height: 140px; }
  .chart-bar-label { font-size: 0.55rem; }
  .chart-bar-val   { font-size: 0.6rem; }

  /* ── Page description ── */
  .page-desc { font-size: 0.82rem; }
}

@media (max-width: 480px) {
  /* Single-column stats */
  .stat-grid, .stat-grid-4 { grid-template-columns: 1fr; gap: 8px; }

  /* Price inputs: fully stacked */
  .pf-row { grid-template-columns: 1fr; }

  /* Tighter main padding */
  .admin-main-inner { padding: 12px 10px; }

  /* Analytics chart: minimal */
  .analytics-chart { height: 110px; padding: 10px 8px 6px; }

  /* Prices: full-width save button */
  .btn-save { width: 100%; }

  /* Settings info code blocks */
  .settings-info code { display: block; overflow-x: auto; }
}

/* ── AWS SES preset box ─────────────────────────────────────── */
.ses-preset-box {
  background: #fffbf5;
  border: 1px solid #f6d860;
  border-left: 4px solid #e67e22;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.ses-preset-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 0.88rem;
  font-weight: 700;
  color: #b45309;
  margin-bottom: 6px;
}
.ses-preset-desc { font-size: 0.82rem; color: var(--text-light); margin-bottom: 12px; }
.ses-region-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ses-region-select {
  flex: 1;
  min-width: 200px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  font-family: var(--font-b);
  font-size: 0.85rem;
  background: var(--white);
  color: var(--text);
  outline: none;
}
.ses-region-select:focus { border-color: #e67e22; }
.btn-ses-fill {
  background: #e67e22;
  color: #fff;
  border: none;
  font-family: var(--font-h);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.btn-ses-fill:hover { background: #c96a15; }
.ses-hint {
  font-size: 0.75rem;
  color: #92400e;
  line-height: 1.5;
}

/* ── Route 53 DNS records card ──────────────────────────────── */
.r53-card { max-width: 640px; }

.r53-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.r53-header h2 { font-family: var(--font-h); font-size: 1.1rem; font-weight: 700; color: var(--ns-dark); }

.r53-domain-hint {
  font-size: 0.8rem;
  color: var(--text-light);
  background: var(--light);
  padding: 7px 12px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
  font-family: monospace;
}

.r53-section-title {
  font-family: var(--font-h);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ns-dark);
  margin-bottom: 6px;
}
.r53-section-desc { font-size: 0.8rem; color: var(--text-light); margin-bottom: 8px; line-height: 1.5; }
.r53-optional { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.75rem; color: var(--text-light); }

.r53-record {
  background: var(--light);
  border: 1px solid var(--border);
  border-left: 3px solid #e67e22;
  padding: 10px 14px;
  margin-bottom: 4px;
  font-size: 0.82rem;
}
.r53-record-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.r53-value-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.r53-badge {
  font-family: var(--font-h);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.r53-txt   { background: #ebf8ff; color: #2b6cb0; border: 1px solid #bee3f8; }
.r53-cname { background: #f0fff4; color: #276749; border: 1px solid #c6f6d5; }
.r53-mx    { background: #faf5ff; color: #6b46c1; border: 1px solid #e9d8fd; }
.r53-ttl   { background: #f7fafc; color: #718096; border: 1px solid #e2e8f0; font-weight: 400; }

.r53-name {
  font-family: monospace;
  font-size: 0.82rem;
  color: var(--ns-dark);
  word-break: break-all;
}
.r53-value {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--text);
  word-break: break-all;
  flex: 1;
}
.r53-placeholder { color: var(--text-light); font-style: italic; }

.r53-copy {
  background: var(--ns-teal);
  color: var(--white);
  border: none;
  font-family: var(--font-h);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.r53-copy:hover { background: var(--ns-teal-d); }

.r53-checklist {
  background: #f0fff4;
  border: 1px solid #c6f6d5;
  padding: 16px 18px;
  margin-top: 22px;
}
.r53-checklist-title {
  font-family: var(--font-h);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #276749;
  margin-bottom: 10px;
}
.r53-steps {
  list-style: decimal;
  padding-left: 20px;
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.8;
}
.r53-steps li strong { color: var(--ns-dark); }
.r53-steps li em    { color: var(--text-light); font-style: normal; }

/* ── Route 53 card mobile ───────────────────────────────────── */
@media (max-width: 768px) {
  .ses-region-row { flex-direction: column; align-items: stretch; }
  .ses-region-select { min-width: 0; }
  .btn-ses-fill { width: 100%; text-align: center; }
  .r53-record { padding: 8px 10px; }
  .r53-value-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .r53-copy { width: 100%; text-align: center; padding: 7px; }
  .r53-header { flex-direction: column; gap: 8px; }
}

/* ── Reply / send button ─────────────────────────────────────── */
.btn-reply {
  background: #ebf4ff;
  color: #2b6cb0;
  text-decoration: none;
  display: inline-block;
}
.btn-reply:hover { opacity: 0.75; }

/* ── Sent email badges ───────────────────────────────────────── */
.badge-sent {
  display: inline-block;
  background: #f0fff4;
  color: #276749;
  border: 1px solid #c6f6d5;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-h);
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.badge-fail {
  display: inline-block;
  background: #fff5f5;
  color: #9b2c2c;
  border: 1px solid #fed7d7;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-h);
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Contact detail layout ───────────────────────────────────── */
.detail-back { margin-bottom: 16px; }
.btn-back-link {
  color: var(--ns-teal);
  text-decoration: none;
  font-size: 0.85rem;
  font-family: var(--font-h);
  font-weight: 600;
}
.btn-back-link:hover { text-decoration: underline; }

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: start;
}

.detail-card {
  background: var(--white);
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin-bottom: 18px;
}

.detail-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.detail-name {
  font-family: var(--font-h);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ns-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.detail-ts { font-size: 0.8rem; white-space: nowrap; }

.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.detail-meta-item { display: flex; flex-direction: column; gap: 3px; }
.detail-meta-label {
  font-size: 0.65rem;
  font-family: var(--font-h);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
}
.detail-meta-value {
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
  word-break: break-word;
}
a.detail-meta-value { color: var(--ns-teal); }
a.detail-meta-value:hover { text-decoration: underline; }

.detail-message { margin-bottom: 18px; }
.detail-message-body {
  background: var(--light);
  border-left: 3px solid var(--border);
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-footer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.detail-section-title {
  font-family: var(--font-h);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ns-dark);
  margin-bottom: 12px;
}

/* ── Email history items ─────────────────────────────────────── */
.detail-history { margin-bottom: 18px; }

.history-item {
  background: var(--white);
  border-left: 3px solid var(--border);
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.history-item.history-ok   { border-left-color: var(--success); }
.history-item.history-fail { border-left-color: var(--danger);  }

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.history-subject {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ns-dark);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-meta { font-size: 0.75rem; margin-bottom: 8px; }
.history-error { margin-bottom: 6px; }
.history-body {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow: hidden;
  position: relative;
}

/* ── Email compose ───────────────────────────────────────────── */
.compose-wrap { max-width: 680px; }
.compose-form { background: var(--white); padding: 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }

/* ── Sent emails table / cards ───────────────────────────────── */
.sent-subject-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sent-cards { display: none; }

.sent-card {
  background: var(--white);
  border-left: 3px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  font-size: 0.875rem;
}
.sent-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.sent-card-subject {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ns-dark);
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

/* ── Responsive additions ────────────────────────────────────── */
@media (max-width: 768px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .detail-reply { order: -1; }   /* show reply form first on mobile */
  .detail-card  { padding: 16px 14px; }
  .detail-name  { font-size: 1rem; }
  .compose-form { padding: 16px 14px; }
  .compose-wrap { max-width: 100%; }

  /* 2-col compose grid → 1 col */
  .compose-form > div[style*="grid-template-columns"] {
    display: block !important;
  }
  .compose-form > div[style*="grid-template-columns"] .form-field {
    margin-bottom: 14px;
  }

  /* sent-table → hide, show cards */
  .sent-table { display: none; }
  .sent-cards { display: block; }
}

@media (max-width: 480px) {
  .detail-meta-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* ================================================================
   Mailbox management — account cards, create panel, inbox rows
   ================================================================ */

/* Account grid -------------------------------------------------- */
.mb-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}

.mb-account-card {
  background: var(--white);
  border-top: 3px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.mb-account-card:hover        { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.mb-account-card.has-unread   { border-top-color: var(--danger); }

.mb-card-body {
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex: 1;
}

.mb-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ns-dark);
  color: var(--white);
  font-family: var(--font-h);
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0;
}
.mb-avatar-sm {
  width: 36px; height: 36px;
  font-size: 0.85rem;
  border-radius: 50%;
  background: var(--light);
  border: 1px solid var(--border);
  color: var(--text-light);
  font-family: var(--font-h);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

.mb-card-info { flex: 1; min-width: 0; }

.mb-card-address {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ns-dark);
  text-decoration: none;
  word-break: break-all;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.mb-card-address:hover { color: var(--ns-teal); }

.mb-card-name { font-size: 0.78rem; color: var(--text-light); margin-top: 3px; }

.mb-card-fwd {
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mb-fwd-arrow { color: var(--ns-teal); font-weight: 700; font-size: 0.9rem; }

.mb-card-footer {
  border-top: 1px solid var(--border);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--light);
}
.mb-card-meta { font-size: 0.72rem; color: var(--text-light); }

/* Create panel -------------------------------------------------- */
.mb-create-panel {
  background: var(--white);
  border-top: 3px solid var(--ns-teal);
  padding: 22px 26px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mb-create-panel.is-hidden { display: none; }

.mb-create-title {
  font-family: var(--font-h);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ns-dark);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mb-create-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 4px;
  transition: color 0.15s;
}
.mb-create-close:hover { color: var(--danger); }

/* Inbox rows ---------------------------------------------------- */
.mb-inbox-wrap {
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
}
.mb-inbox-toolbar {
  background: var(--light);
  border-bottom: 1px solid var(--border);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mb-inbox-toolbar-label {
  font-family: var(--font-h);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
}

/* ── Gmail-style message rows ───────────────────────────────── */
.mb-inbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  min-height: 56px;
  height: auto;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  transition: background 0.12s;
  position: relative;
  cursor: pointer;
}
.mb-inbox-row:last-child { border-bottom: none; }
.mb-inbox-row:hover { background: #f8f9fb; }
.mb-inbox-row.is-unread { background: #f0f4ff; }
.mb-inbox-row.is-unread::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ns-teal);
}

.mb-inbox-row.is-unread .mb-avatar-sm {
  background: var(--ns-dark);
  color: var(--white);
  border-color: var(--ns-dark);
}

/* Fixed-width sender name column */
.mb-inbox-sender {
  flex: 0 0 185px;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mb-inbox-row.is-unread .mb-inbox-sender { font-weight: 700; color: var(--ns-dark); }

.mb-sent-indicator {
  font-size: 0.72rem;
  color: var(--ns-teal);
  font-weight: 600;
  margin-right: 5px;
}

/* Body — fills remaining space with subject + snippet */
.mb-inbox-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  gap: 1px;
}

.mb-inbox-subject-link {
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--ns-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  flex-shrink: 0;
  max-width: 50%;
  display: inline-block;
}
a.mb-inbox-subject-link:hover { text-decoration: underline; color: var(--ns-teal); }
.mb-inbox-row.is-unread .mb-inbox-subject-link { font-weight: 700; }

.mb-inbox-sep {
  flex-shrink: 0;
  font-size: 0.84rem;
  color: var(--text-light);
  padding: 0 4px;
}

.mb-inbox-snippet {
  font-size: 0.81rem;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  font-weight: 400;
}

/* Right meta: date + status + delete */
.mb-inbox-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mb-inbox-date {
  font-size: 0.72rem;
  color: var(--text-light);
  white-space: nowrap;
  min-width: 68px;
  text-align: right;
}

/* Multi-line row layout (inbox + sent redesign) */
.mb-inbox-row-top {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
}

.mb-inbox-sender-name {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.mb-inbox-row.is-unread .mb-inbox-sender-name { font-weight: 700; color: var(--ns-dark); }

.mb-inbox-subject-line {
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--ns-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.mb-inbox-row.is-unread .mb-inbox-subject-line { font-weight: 700; }

.mb-inbox-preview {
  font-size: 0.76rem;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Per-row conversation delete button */
.mb-row-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 0.7rem;
  padding: 2px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.12s;
  line-height: 1;
}
.mb-inbox-row:hover .mb-row-del,
.mb-inbox-row:focus .mb-row-del { opacity: 1; }
.mb-row-del:hover { color: var(--danger); }
.mb-inbox-row.is-unread .mb-inbox-date { color: var(--ns-dark); font-weight: 600; }

.mb-sent-ok  { font-size: 0.72rem; color: var(--success); }
.mb-sent-err { font-size: 0.72rem; color: var(--danger); }

/* .mb-inbox-del removed — replaced by .mb-row-del */

/* Email header metadata grid ------------------------------------ */
.mb-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.mb-meta-label {
  font-size: 0.63rem;
  font-family: var(--font-h);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
  margin-bottom: 3px;
}
.mb-meta-value { font-size: 0.86rem; color: var(--text); word-break: break-word; }

/* Attachment chip ----------------------------------------------- */
.mb-attach-chip {
  display: inline-block;
  background: var(--light);
  border: 1px solid var(--border);
  padding: 2px 8px;
  font-size: 0.78rem;
  margin-right: 4px;
  margin-bottom: 2px;
}

/* ── Gmail split-pane layout ─────────────────────────────────── */
.gmail-wrap {
  display: flex;
  align-items: stretch;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
  min-height: 520px;
  height: calc(100vh - 220px);
}

.gmail-list {
  flex: 0 0 320px;
  width: 320px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.gmail-pane {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--white);
}

.gmail-pane-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 340px;
  color: var(--text-light);
  font-size: 0.86rem;
  gap: 12px;
  font-family: var(--font-h);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.pane-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 40px;
  color: var(--text-light);
  font-size: 0.84rem;
}
.pane-loading-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--ns-teal);
  border-radius: 50%;
  animation: pane-spin 0.7s linear infinite;
}
@keyframes pane-spin { to { transform: rotate(360deg); } }

/* Row selected state */
.mb-inbox-row.row-selected {
  background: #eef1ff !important;
  position: relative;
}
.mb-inbox-row.row-selected::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--ns-teal);
}

/* ── Pane email view ─────────────────────────────────────────── */
.pane-email {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.pane-email-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}

.pane-email-subject {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ns-dark);
  margin-bottom: 5px;
  word-break: break-word;
  line-height: 1.4;
}

.pane-email-from {
  font-size: 0.80rem;
  color: var(--text-light);
  word-break: break-all;
  margin-bottom: 3px;
}

.pane-email-date {
  font-size: 0.73rem;
  color: var(--text-light);
}

.pane-email-body {
  padding: 22px 22px;
  flex: 1;
}

.pane-body-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.7;
  color: var(--text);
}

.pane-attachments {
  padding: 10px 22px;
  border-top: 1px solid var(--border);
}

/* ── Inline reply ────────────────────────────────────────────── */
.pane-reply-box {
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.pane-reply-toggle {
  display: flex;
  align-items: center;
  padding: 13px 22px;
  cursor: pointer;
  font-family: var(--font-h);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ns-dark);
  user-select: none;
  transition: background 0.12s;
}
.pane-reply-toggle:hover { background: var(--light); }

.pane-reply-form {
  padding: 4px 22px 22px;
}

.pane-reply-error {
  color: var(--danger);
  font-size: 0.80rem;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(220,50,50,0.06);
  border-left: 3px solid var(--danger);
}

.pane-reply-input,
.pane-reply-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s;
}
.pane-reply-input:focus,
.pane-reply-textarea:focus {
  outline: none;
  border-color: var(--ns-teal);
}
.pane-reply-input  { margin-bottom: 8px; }
.pane-reply-textarea { resize: vertical; line-height: 1.6; }

.pane-reply-success {
  padding: 16px 22px;
  color: var(--success);
  font-size: 0.88rem;
  font-weight: 600;
}

.mb-thread-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ns-mid);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-h);
  min-width: 18px;
  height: 16px;
  border-radius: 8px;
  padding: 0 5px;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1;
}

/* ── Conversation thread view ────────────────────────────────── */
.conv-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.conv-hdr {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.conv-hdr-subject {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--ns-dark);
  word-break: break-word;
  line-height: 1.4;
  margin-bottom: 3px;
}

.conv-hdr-meta {
  font-size: 0.76rem;
  color: var(--text-light);
}

.conv-hdr-left {
  flex: 1;
  min-width: 0;
}

.conv-del-thread {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--text-light);
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 5px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.conv-del-thread:hover {
  background: rgba(220,50,50,0.08);
  color: var(--danger);
  border-color: rgba(220,50,50,0.25);
}

.conv-list {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Individual message bubble */
.conv-msg {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--white);
}

.conv-msg:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.07); }

.conv-sent { background: #f0faf9; border-left: 3px solid var(--ns-teal); }

/* Header row (always visible) */
.conv-msg-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
}

.conv-active .conv-msg-hdr {
  border-bottom: 1px solid var(--border);
}

/* Avatar circle */
.conv-circle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ns-mid);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-h);
  font-size: 0.80rem;
  font-weight: 700;
}

.conv-circle-out { background: var(--ns-teal); }

.conv-msg-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.conv-msg-from {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-msg-time {
  font-size: 0.71rem;
  color: var(--text-light);
}

.conv-msg-to {
  font-size: 0.72rem;
  color: var(--ns-teal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  flex-shrink: 0;
}

/* Delete button inside bubble */
.conv-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 0.76rem;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
}
.conv-del:hover { background: rgba(220,50,50,0.08); color: var(--danger); }

/* Snippet shown when collapsed */
.conv-preview {
  padding: 0 12px 10px 54px;
  font-size: 0.78rem;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Full body — hidden until expanded */
.conv-body { display: none; padding: 12px 14px; }

.conv-active .conv-preview { display: none; }
.conv-active .conv-body    { display: block; }

.conv-iframe {
  width: 100%;
  min-height: 140px;
  border: none;
  display: block;
}

.conv-plain {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

/* Reply box */
.conv-reply-box { border-top: 1px solid var(--border); }

.conv-reply-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 13px 16px;
  cursor: pointer;
  font-family: var(--font-h);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ns-dark);
  transition: background 0.1s;
}
.conv-reply-btn:hover { background: var(--light); }

.conv-rform { padding: 2px 16px 18px; }

.conv-reply-err {
  color: var(--danger);
  font-size: 0.80rem;
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(220,50,50,0.06);
  border-left: 3px solid var(--danger);
}

.conv-reply-subject,
.conv-reply-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  border: 1px solid var(--border);
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s;
}
.conv-reply-subject:focus,
.conv-reply-textarea:focus { outline: none; border-color: var(--ns-teal); }
.conv-reply-subject  { margin-bottom: 8px; }
.conv-reply-textarea { resize: vertical; line-height: 1.6; }

.conv-reply-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.conv-reply-ok {
  padding: 14px 16px;
  color: var(--success);
  font-size: 0.88rem;
  font-weight: 600;
}

/* Responsive ---------------------------------------------------- */
@media (max-width: 768px) {
  .mb-account-grid { grid-template-columns: 1fr; gap: 12px; }
  .mb-create-panel { padding: 16px 14px; }
  .mb-inbox-row { padding: 8px 12px; }
  .mb-row-del { opacity: 1; }
  .mb-inbox-del { opacity: 1; }
  .mb-meta-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gmail-wrap { flex-direction: column; height: auto; min-height: auto; }
  .gmail-list { flex: none; width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 45vh; }
  .gmail-pane { min-height: 350px; }
}
@media (max-width: 480px) {
  .mb-meta-grid { grid-template-columns: 1fr; }
}