/* ── Layout ──────────────────────────────────────────────────────────────── */
#wrapper { min-height: 100vh; }

#sidebar {
  width: 230px;
  min-height: 100vh;
  background: #f8f9fa;
  border-right: 1px solid #e9ecef;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
}

#page-content {
  min-height: 100vh;
  background: #ffffff;
  min-width: 0; /* prevent flex blowout */
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar-brand { color: #212529; }
.sidebar-brand:hover { color: #0d6efd; }

.sidebar-section-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #adb5bd;
  padding: .35rem .75rem 0;
  list-style: none;
}

#sidebar .nav-link {
  color: #495057;
  border-radius: 6px;
  font-size: .855rem;
  padding: .38rem .75rem;
  transition: background .1s, color .1s;
}
#sidebar .nav-link:hover  { background: #e9ecef; color: #212529; }
#sidebar .nav-link.active { background: #e7f0ff; color: #0d6efd; font-weight: 500; }

/* ── Card headers ────────────────────────────────────────────────────────── */
.card-header { background: #f8f9fa; }

/* ── Message thread ──────────────────────────────────────────────────────── */
.message-body {
  font-size: .9rem;
  line-height: 1.65;
  overflow-x: auto;
  word-break: break-word;
}
.message-body img        { max-width: 100%; height: auto; }
.message-body blockquote {
  border-left: 3px solid #dee2e6;
  padding-left: .9rem;
  color: #6c757d;
  margin: .5rem 0;
}
.message-body pre {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: .75rem 1rem;
  font-size: .82rem;
  overflow-x: auto;
}

.note-card     { border-left: 3px solid #ffc107 !important; background: #fffdf0; }
.outbound-card { border-left: 3px solid #198754 !important; background: #f6fdf8; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table th {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c757d;
}
.cursor-pointer { cursor: pointer; }
tr.cursor-pointer:hover td { background-color: #f8f9ff; }

/* ── Monospace ───────────────────────────────────────────────────────────── */
.font-monospace {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* ── Badge colours not in Bootstrap 5.3 dark/light variants ─────────────── */
.bg-dark-subtle   { background-color: #dee2e6 !important; }
.text-dark-emphasis { color: #212529 !important; }

/* ── Bulk action bar ─────────────────────────────────────────────────────── */
#bulkBar {
  background: #e7f0ff;
  border: 1px solid #b8d0f9;
  border-radius: 6px;
  padding: .4rem .75rem;
}

/* ── Toast container ─────────────────────────────────────────────────────── */
.toast-container { z-index: 1090; }

/* ── Responsive sidebar ──────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  #sidebar {
    width: 100%;
    min-height: auto;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
  }
  #wrapper { flex-direction: column; }
  #page-content { min-height: auto; }
}

/* ── Dark mode tweaks ────────────────────────────────────────────────────── */
[data-bs-theme="dark"] #sidebar {
  background: #1a1d21;
  border-right-color: #2d3035;
}
[data-bs-theme="dark"] #page-content { background: #212529; }
[data-bs-theme="dark"] .note-card    { background: #2a2518; }
[data-bs-theme="dark"] .outbound-card{ background: #1a2620; }
[data-bs-theme="dark"] .card-header  { background: #2a2d31; }

/* ── New Ticket button ───────────────────────────────────────────────────── */
.btn-primary-soft {
  background: rgba(13,110,253,.12);
  color: #0d6efd;
  font-weight: 500;
}
.btn-primary-soft:hover { background: rgba(13,110,253,.2); color: #0d6efd; }
[data-bs-theme="dark"] .btn-primary-soft {
  background: rgba(13,110,253,.2); color: #6ea8fe;
}

/* ── Unread notification highlight ──────────────────────────────────────── */
.notif-unread { border-left: 3px solid #0d6efd !important; background: rgba(13,110,253,.05); }
[data-bs-theme="dark"] .notif-unread { background: rgba(13,110,253,.1); }

/* ── Checklist ───────────────────────────────────────────────────────────── */
.checklist-item { display:flex; align-items:center; gap:.5rem; padding:.35rem 0; }
.checklist-item.done label { text-decoration:line-through; opacity:.55; }
.checklist-add-input { border:none; border-bottom:1px dashed #adb5bd;
  background:transparent; outline:none; width:100%; font-size:.875rem; padding:.2rem 0; }

/* ── Mention highlight ───────────────────────────────────────────────────── */
.mention-chip {
  display:inline-block; background:rgba(13,110,253,.12);
  color:#0d6efd; border-radius:4px; padding:0 4px; font-weight:500;
}

/* ── Mailbox sidebar sections ────────────────────────────────────────────── */
.sidebar-mailbox-toggle {
  background: none;
  border: none;
  color: inherit;
  border-radius: 6px;
  transition: background .1s;
  cursor: pointer;
  font-size: .82rem;
}
.sidebar-mailbox-toggle:hover { background: #e9ecef; }
[data-bs-theme="dark"] .sidebar-mailbox-toggle:hover { background: #2a2d31; }
[data-bs-theme="dark"] .sidebar-mailbox-toggle { color: #dee2e6; }

.sidebar-mailbox-links { overflow: hidden; transition: max-height .2s ease; }
.sidebar-mailbox-links.collapsed { max-height: 0 !important; }

/* Indented sub-links */
#sidebar .nav-link.ps-3 {
  padding-left: 1.4rem !important;
  font-size: .82rem;
}
#sidebar .nav-link.ps-3:hover  { background: #e9ecef; }
#sidebar .nav-link.ps-3.active { background: #e7f0ff; color: #0d6efd; font-weight: 500; }

[data-bs-theme="dark"] #sidebar .nav-link.ps-3:hover  { background: #2a2d31; }
[data-bs-theme="dark"] #sidebar .nav-link.ps-3.active { background: rgba(13,110,253,.2); color: #6ea8fe; }

/* Badge pills in sidebar */
#sidebar .badge.rounded-pill { font-size: .68rem; padding: .2em .5em; }

/* Tighten section labels */
.sidebar-section-label { margin-top: .1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — TABLE OVERRIDES
   Bootstrap's table-light thead and table-hover don't respect data-bs-theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base table text and background */
[data-bs-theme="dark"] .table {
  --bs-table-bg: #212529;
  --bs-table-striped-bg: #2a2d31;
  --bs-table-hover-bg: #2e3338;
  --bs-table-border-color: #373b3e;
  --bs-table-color: #dee2e6;
  color: #dee2e6;
}

/* table-light thead — force dark */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table thead.table-light th,
[data-bs-theme="dark"] thead.table-light tr th,
[data-bs-theme="dark"] .table > thead > tr > th {
  background-color: #2a2d31 !important;
  color: #adb5bd !important;
  border-color: #373b3e !important;
}

/* Row hover — the white flash */
[data-bs-theme="dark"] tr.cursor-pointer:hover td,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > th {
  background-color: #2e3338 !important;
  color: #dee2e6 !important;
  --bs-table-accent-bg: #2e3338;
}

/* Table cells and rows */
[data-bs-theme="dark"] .table > tbody > tr > td,
[data-bs-theme="dark"] .table > tbody > tr > th {
  background-color: transparent;
  border-color: #373b3e;
  color: #dee2e6;
}

/* Card headers inside tables */
[data-bs-theme="dark"] .table-responsive {
  background: #212529;
}

/* Make .table-hover rows not flash white */
[data-bs-theme="dark"] .table-hover tbody tr {
  --bs-table-hover-bg: #2e3338;
  --bs-table-hover-color: #dee2e6;
}

/* text-muted in dark mode should still be readable */
[data-bs-theme="dark"] .table .text-muted {
  color: #868e96 !important;
}

/* Font-monospace ticket number in table */
[data-bs-theme="dark"] .table .font-monospace {
  color: #adb5bd;
}

/* ── Dark mode — cards, forms, inputs ──────────────────────────────────────── */

/* Cards */
[data-bs-theme="dark"] .card {
  background-color: #2a2d31;
  border-color: #373b3e !important;
}
[data-bs-theme="dark"] .card-header {
  background-color: #222529 !important;
  border-bottom-color: #373b3e !important;
  color: #dee2e6;
}
[data-bs-theme="dark"] .card-footer {
  background-color: #222529 !important;
  border-top-color: #373b3e !important;
}

/* Shadows soften in dark mode */
[data-bs-theme="dark"] .shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.4) !important;
}

/* Links in tables stay readable */
[data-bs-theme="dark"] .table a.text-reset {
  color: #dee2e6 !important;
}
[data-bs-theme="dark"] .table a.text-reset:hover {
  color: #6ea8fe !important;
}

/* Badge subtle variants in dark mode */
[data-bs-theme="dark"] .bg-success-subtle  { background-color: rgba(25,135,84,.25)  !important; }
[data-bs-theme="dark"] .bg-warning-subtle  { background-color: rgba(255,193,7,.2)   !important; }
[data-bs-theme="dark"] .bg-danger-subtle   { background-color: rgba(220,53,69,.25)  !important; }
[data-bs-theme="dark"] .bg-primary-subtle  { background-color: rgba(13,110,253,.2)  !important; }
[data-bs-theme="dark"] .bg-secondary-subtle{ background-color: rgba(108,117,125,.2) !important; }
[data-bs-theme="dark"] .bg-info-subtle     { background-color: rgba(13,202,240,.2)  !important; }

[data-bs-theme="dark"] .text-success-emphasis { color: #75b798 !important; }
[data-bs-theme="dark"] .text-warning-emphasis { color: #ffda6a !important; }
[data-bs-theme="dark"] .text-danger-emphasis  { color: #ea868f !important; }
[data-bs-theme="dark"] .text-primary-emphasis { color: #6ea8fe !important; }
[data-bs-theme="dark"] .text-secondary-emphasis{ color: #a7acb1 !important; }

/* Note and outbound message cards in dark mode */
[data-bs-theme="dark"] .note-card      { background: #2a2518 !important; border-left-color: #ffc107 !important; }
[data-bs-theme="dark"] .outbound-card  { background: #1a2620 !important; border-left-color: #198754 !important; }

/* Alert secondary (closed ticket banner) */
[data-bs-theme="dark"] .alert-secondary {
  background-color: #2a2d31;
  border-color: #373b3e;
  color: #dee2e6;
}

/* Form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #2a2d31;
  border-color: #4d5154;
  color: #dee2e6;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #2e3338;
  border-color: #6ea8fe;
  color: #dee2e6;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #6c757d; }
[data-bs-theme="dark"] .input-group-text {
  background-color: #2a2d31;
  border-color: #4d5154;
  color: #dee2e6;
}

/* bg-light sections (used in some cards) */
[data-bs-theme="dark"] .bg-light { background-color: #2a2d31 !important; }
[data-bs-theme="dark"] .bg-white { background-color: #212529 !important; }

/* List groups */
[data-bs-theme="dark"] .list-group-item {
  background-color: #2a2d31;
  border-color: #373b3e;
  color: #dee2e6;
}
[data-bs-theme="dark"] .list-group-item:hover {
  background-color: #2e3338;
}

/* Dropdown menus */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #2a2d31;
  border-color: #4d5154;
}
[data-bs-theme="dark"] .dropdown-item { color: #dee2e6; }
[data-bs-theme="dark"] .dropdown-item:hover { background-color: #2e3338; }

/* ── Avatar initials ─────────────────────────────────────────────────────── */
.avatar-initials {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.avatar-xs { width: 20px; height: 20px; font-size: .6rem; }

/* ── Tag badges ──────────────────────────────────────────────────────────── */
.tag-badge { font-size: .68rem; }

/* ── Compact ticket rows ─────────────────────────────────────────────────── */
#ticketTable tbody tr { transition: background .1s; }
#ticketTable tbody td { padding: .45rem .6rem; }

/* ── Draft notice ────────────────────────────────────────────────────────── */
.alert-sm { font-size: .8rem; }