/* ============================================================
   DefectTracker — AMSuite-inspired theme
   Sidebar + topbar layout layered on Bootstrap 4/5.
   ============================================================ */

/* ── Bootstrap grid/utility stubs (needed by datatablesbootstrap.js layout) */
.row                      { display: flex; flex-wrap: wrap; align-items: center; }
.col-md-auto              { flex: 0 0 auto; width: auto; }
.me-auto                  { margin-right: auto !important; }
.ms-auto                  { margin-left: auto !important; }
.mt-2                     { margin-top: .5rem !important; }
.d-md-flex                { display: flex !important; }
.justify-content-between  { justify-content: space-between !important; }
.align-items-center       { align-items: center !important; }

/* ── Roboto font-face (all pages) ───────────────────────────── */
@font-face { font-family:'Roboto'; font-style:normal; font-weight:300; src:url('../Roboto/static/Roboto-Light.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; src:url('../Roboto/static/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:500; src:url('../Roboto/static/Roboto-Medium.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:600; src:url('../Roboto/static/Roboto-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; src:url('../Roboto/static/Roboto-Bold.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:800; src:url('../Roboto/static/Roboto-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:900; src:url('../Roboto/static/Roboto-Black.ttf') format('truetype'); }

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --dt-bg:             #f0f4f8;
  --dt-surface:        #ffffff;
  --dt-border:         #e2e8f0;
  --dt-primary:        #3b82f6;
  --dt-primary-dark:   #2563eb;
  --dt-text:           #1e293b;
  --dt-muted:          #64748b;
  --dt-radius:         8px;
  --dt-radius-sm:      7px;
  --dt-shadow:         0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05);
  --dt-sidebar-w:      240px;
  --dt-topbar-h:       56px;
  --dt-card-head-bg:   #4051b5;
}

/* ── Reset / base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--dt-bg);
  color: var(--dt-text);
  font-family: 'Roboto', sans-serif;
  font-size: .9375rem;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--dt-primary); text-decoration: none; }
a:hover { color: var(--dt-primary-dark); text-decoration: none; }
a.btn:hover, a.btn:focus { text-decoration: none; }

/* ── BS4/BS5 bridge ─────────────────────────────────────────── */
.font-weight-semibold { font-weight: 600 !important; }

/* ── Layout ─────────────────────────────────────────────────── */
.dt-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.dt-sidebar {
  width: var(--dt-sidebar-w);
  min-height: 100vh;
  background: var(--dt-surface);
  border-right: 1px solid var(--dt-border);
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
  overflow-y: auto;
}

.dt-sidebar.collapsed {
  transform: translateX(calc(-1 * var(--dt-sidebar-w)));
}

/* Brand */
.dt-brand {
  height: var(--dt-topbar-h);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--dt-border);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dt-text);
  flex-shrink: 0;
}

.dt-brand .bi-bug-fill { color: #f87171; margin-right: .5rem; font-size: 1.15rem; }

/* Nav */
.dt-nav { padding: .75rem 0; flex: 1; }

.dt-nav-section { margin-bottom: .25rem; }

.dt-nav-label {
  display: flex;
  align-items: center;
  padding: .55rem 1.25rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dt-muted);
  user-select: none;
}

.dt-nav-label .bi {
  margin-right: .5rem;
  font-size: .95rem;
}

.dt-nav-item {
  display: block;
  padding: .4rem 1.25rem .4rem 2.5rem;
  font-size: .875rem;
  color: #475569;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}

.dt-nav-item:hover {
  background: #f1f5f9;
  color: var(--dt-text);
  text-decoration: none;
}

/* Non-clickable username item in sidebar */
.dt-nav-user {
  cursor: default;
  color: var(--dt-muted);
  font-size: .8125rem;
}

.dt-nav-user:hover {
  background: none;
  color: var(--dt-muted);
}

.dt-nav-item.active {
  background: #eff6ff;
  color: var(--dt-primary);
  font-weight: 500;
  border-left-color: var(--dt-primary);
}

/* Sidebar footer */
.dt-sidebar-footer {
  padding: .75rem 1.25rem .75rem 2.5rem;
  border-top: 1px solid var(--dt-border);
  font-size: .8rem;
  color: var(--dt-muted);
}

/* ── Main area ───────────────────────────────────────────────── */
.dt-main {
  margin-left: var(--dt-sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--dt-bg);
  transition: margin-left .25s ease;
}

.dt-main.sidebar-collapsed { margin-left: 0; }

/* ── Topbar ──────────────────────────────────────────────────── */
.dt-topbar {
  height: var(--dt-topbar-h);
  background: var(--dt-surface);
  border-bottom: 1px solid var(--dt-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 999;
  flex-shrink: 0;
}

.dt-hamburger {
  background: none;
  border: none;
  font-size: 1.35rem;
  color: var(--dt-muted);
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: var(--dt-radius-sm);
  line-height: 1;
  transition: background .12s, color .12s;
}

.dt-hamburger:hover { background: #f1f5f9; color: var(--dt-text); }

.dt-topbar-right {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.dt-user {
  font-size: .875rem;
  font-weight: 500;
  color: var(--dt-text);
}

.dt-user .bi { color: var(--dt-muted); margin-right: .3rem; }

.dt-topbar-logout {
  font-size: .875rem;
  color: var(--dt-muted);
  padding: .3rem .6rem;
  border-radius: var(--dt-radius-sm);
  transition: background .12s, color .12s;
}

.dt-topbar-logout:hover {
  background: #fee2e2;
  color: #dc2626;
  text-decoration: none;
}

/* ── Content area ───────────────────────────────────────────── */
.dt-content {
  padding: 1.5rem;
  flex: 1;
}

/* Page top: breadcrumb + date */
.dt-page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.dt-breadcrumb {
  font-size: .875rem;
  color: var(--dt-muted);
}

.dt-breadcrumb a { color: var(--dt-muted); }
.dt-breadcrumb a:hover { color: var(--dt-primary); text-decoration: none; }
.dt-breadcrumb .sep { margin: 0 .4rem; }
.dt-breadcrumb .current { color: var(--dt-text); font-weight: 500; }

.dt-datetime {
  font-size: .8125rem;
  color: var(--dt-muted);
  font-weight: 500;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius) !important;
  box-shadow: var(--dt-shadow);
  background: var(--dt-surface);
  /* overflow: hidden removed — was clipping Summernote dropdowns */
}
/* Keep the rounded corners looking clean without overflow:hidden */
.dt-card-head:first-child {
  border-top-left-radius: calc(var(--dt-radius) - 1px);
  border-top-right-radius: calc(var(--dt-radius) - 1px);
}

/* Colored card header (matches AMSuite audit-trail header) */
.dt-card-head {
  background: var(--dt-card-head-bg);
  color: #fff;
  padding: .8rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--dt-radius) var(--dt-radius) 0 0;
}

.dt-card-title {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.dt-card-title .bi { margin-right: .4rem; opacity: .85; }

.dt-count-badge {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: .25em .75em;
  border-radius: 20px;
  letter-spacing: .02em;
}

/* Standard card header (non-colored, e.g. attachments) */
.card-header {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--dt-border) !important;
  padding: .8rem 1.25rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--dt-text);
}

.card-body { padding: 1.375rem; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  border-radius: var(--dt-radius-sm);
  font-weight: 500;
  font-size: .875rem;
  padding: .42rem .9rem;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.btn-primary { background: var(--dt-primary); border-color: var(--dt-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--dt-primary-dark); border-color: var(--dt-primary-dark); }

.btn-success  { background: #22c55e; border-color: #22c55e; }
.btn-success:hover { background: #16a34a; border-color: #16a34a; }

.btn-danger   { background: #ef4444; border-color: #ef4444; }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }

.btn-secondary { background: #64748b; border-color: #64748b; }
.btn-secondary:hover { background: #475569; border-color: #475569; }

.btn-sm { padding: .27rem .65rem; font-size: .8125rem; }

.btn-outline-secondary { color: var(--dt-muted); border-color: var(--dt-border); }
.btn-outline-secondary:hover { background: #f1f5f9; color: var(--dt-text); border-color: #cbd5e1; }

.btn-outline-info { color: #0284c7; border-color: #bae6fd; }
.btn-outline-info:hover { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; }

.btn-outline-danger { color: #dc2626; border-color: #fecaca; }
.btn-outline-danger:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }

/* ── Form controls ──────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--dt-radius-sm);
  border: 1px solid var(--dt-border);
  font-size: .9rem;
  color: var(--dt-text);
  padding: .45rem .75rem;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s;
}

select.form-control, select.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  background-size: .85em;
  padding-right: 2rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--dt-primary);
  box-shadow: none;
  outline: none;
}

.form-label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--dt-text);
  margin-bottom: .375rem;
}

.form-text { font-size: .8rem; color: var(--dt-muted); }
.input-group .btn { border-color: var(--dt-border); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  font-size: .75rem;
  font-weight: 600;
  padding: .32em .7em;
  border-radius: var(--dt-radius-sm);
  letter-spacing: .01em;
}

.badge-sev-low          { background: #fef9c3; color: #854d0e; }
.badge-sev-medium       { background: #ffedd5; color: #c2410c; }
.badge-sev-high         { background: #fee2e2; color: #991b1b; }
.badge-sev-show-stopper { background: #fee2e2; color: #991b1b; text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }

.badge-pri-low    { background: #fef9c3; color: #854d0e; }
.badge-pri-medium { background: #ffedd5; color: #c2410c; }
.badge-pri-high   { background: #fee2e2; color: #991b1b; }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { border: none; border-radius: var(--dt-radius-sm); font-size: .9rem; }
.alert-success { background: #f0fdf4; color: #166534; }
.alert-danger  { background: #fff1f2; color: #991b1b; }
.alert-info    { background: #eff6ff; color: #1e40af; }

/* ── Tables ─────────────────────────────────────────────────── */
.table {
  font-size: .875rem;
  color: var(--dt-text);
  --bs-table-hover-bg: #eff6ff;
  margin-bottom: 0;
}

.table thead th {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dt-muted);
  background: #f8fafc;
  border-bottom: 1px solid var(--dt-border) !important;
  padding: .65rem .875rem;
  white-space: nowrap;
}

.table td { padding: .6rem .875rem; vertical-align: middle; }
.table > :not(caption) > * > * { border-bottom-color: var(--dt-border); }

/* Column filter row */
.table tfoot td {
  padding: .4rem .5rem;
  background: #f8fafc;
  border-top: 1px solid var(--dt-border);
}

.table tfoot input {
  width: 100%;
  padding: .3rem .5rem;
  font-size: .8rem;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  color: var(--dt-text);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}

.table tfoot input:focus { border-color: var(--dt-primary); }
.table tfoot input::placeholder { color: #94a3b8; font-style: italic; }

/* ── List groups ────────────────────────────────────────────── */
.list-group-item {
  border-color: var(--dt-border);
  font-size: .9rem;
  padding: .65rem 1.25rem;
}

/* ── DataTables overrides ───────────────────────────────────── */
div.dt-container { font-size: .875rem; }

div.dt-container .dt-search input,
div.dt-container .dt-length select {
  border-radius: var(--dt-radius-sm) !important;
  border-color: var(--dt-border) !important;
  font-size: .8125rem !important;
  padding: .3rem .6rem !important;
}

div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus {
  border-color: var(--dt-primary) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
  outline: none;
}

div.dt-container .dt-info,
div.dt-container .dt-paging .dt-paging-button {
  font-size: .8125rem;
}

div.dt-container .dt-info {
  margin-top: 0;
  color: var(--dt-muted);
  font-size: .8125rem;
}

/* Align search box inline with Export button */
div.dt-container .dt-layout-start {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
div.dt-container .dt-search {
  display: flex;
  align-items: center;
  gap: .4rem;
}
div.dt-container .dt-search label {
  margin: 0;
  font-size: .875rem;
  color: var(--dt-muted);
  white-space: nowrap;
}
div.dt-container .dt-search input {
  margin: 0;
}

/* ── Pagination (replaces Bootstrap 5 .pagination styles) ───── */
.pagination {
  display: flex;
  align-items: center;
  padding-left: 0;
  list-style: none;
  gap: 0;
  margin: 0;
}
.page-item {
  margin: 0;
  padding: 0;
}
.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: .3rem .55rem;
  font-size: .8125rem;
  font-family: inherit;
  color: #b1329b;
  background: #fff;
  border: 1px solid #e4a8d8;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s;
}
/* Collapse adjacent borders */
.page-item + .page-item .page-link {
  margin-left: -1px;
}
/* Round the outer corners only */
.page-item:first-child .page-link {
  border-radius: var(--dt-radius-sm) 0 0 var(--dt-radius-sm);
}
.page-item:last-child .page-link {
  border-radius: 0 var(--dt-radius-sm) var(--dt-radius-sm) 0;
}
.page-link:hover {
  color: #8f2880;
  background: #fdf0f9;
  border-color: #d07abb;
  z-index: 1;
  position: relative;
}
.page-item.active .page-link {
  color: #fff;
  background: #b1329b;
  border-color: #b1329b;
  z-index: 2;
  position: relative;
}
.page-item.disabled .page-link,
.page-item.disabled a {
  color: var(--dt-muted);
  background: #fff;
  border-color: var(--dt-border);
  cursor: default;
  pointer-events: none;
}

/* inputPaging widget */
.dt-inputpaging {
  display: flex;
  align-items: center;
  gap: 2px;
}
.dt-inputpaging::before {
  content: "Page";
  font-size: .8125rem;
  color: var(--dt-muted);
  margin-right: .3rem;
  white-space: nowrap;
}
.dt-paging-input {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .8125rem;
  color: var(--dt-muted);
}
.dt-paging-input input {
  width: 2.75rem;
  text-align: center;
  font-size: .8125rem;
  font-family: inherit;
  padding: .3rem .4rem;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  outline: none;
}
.dt-paging-input input:focus { border-color: #b1329b; }

/* Space between inputPaging widget and the page-number buttons */
div.dt-container .dt-inputpaging + .dt-paging { margin-left: 2rem; }

/* Top row: space below Export+Search before the table */
div.dt-container .row:first-child {
  margin-bottom: 1.25rem;
}
/* Bottom row: space above info + pagination */
div.dt-container .dt-layout-row:last-child,
div.dt-container .row:last-child {
  margin-top: 1.25rem !important;
  padding-top: .5rem;
}

/* Zero out the 2px left margin + inline-block that bootstrap5.css injects on each paging li */
div.dt-container .dt-paging .dt-paging-button {
  margin-left: 0 !important;
  padding: 0 !important;
  display: flex !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
/* Kill the -6px top margin datatablesbootstrap.css puts on the ul */
div.dt-container div.dt-paging ul.pagination { margin: 0 !important; }

/* Export to PDF button — fully custom, no Bootstrap btn variables */
.btn-dt-export {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  font-size: .8125rem;
  font-family: inherit;
  font-weight: 500;
  color: #fff;
  background: var(--dt-card-head-bg);
  border: 1px solid var(--dt-card-head-bg);
  border-radius: var(--dt-radius-sm);
  cursor: pointer;
  box-shadow: none;
  outline: none;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  /* kill Bootstrap btn variables at the root */
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
}
.btn-dt-export:hover,
.btn-dt-export:focus,
.btn-dt-export:active,
.btn-dt-export:focus-visible {
  color: #fff;
  background: #3444a0;
  border-color: #3444a0;
  box-shadow: none;
  outline: none;
}

/* ── File input ─────────────────────────────────────────────── */
input[type="file"] {
  font-size: .875rem;
  color: var(--dt-muted);
}

input[type="file"]::file-selector-button {
  padding: .35rem .85rem;
  margin-right: .6rem;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-sm);
  background: #f8fafc;
  color: var(--dt-text);
  font-size: .8125rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

input[type="file"]::file-selector-button:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

/* ── Tooltips (Summernote toolbar) ─────────────────────────── */
.tooltip-inner {
  background-color: var(--dt-card-head-bg) !important;
  font-size: .78rem;
}
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^=top] .arrow::before {
  border-top-color: var(--dt-card-head-bg) !important;
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^=bottom] .arrow::before {
  border-bottom-color: var(--dt-card-head-bg) !important;
}
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^=left] .arrow::before {
  border-left-color: var(--dt-card-head-bg) !important;
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^=right] .arrow::before {
  border-right-color: var(--dt-card-head-bg) !important;
}

/* ── Summernote ─────────────────────────────────────────────── */
.note-editor.note-frame {
  border: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-sm) !important;
  box-shadow: none !important;
}

.note-toolbar {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--dt-border) !important;
  border-radius: var(--dt-radius-sm) var(--dt-radius-sm) 0 0 !important;
}

.note-toolbar .note-btn,
.note-toolbar .note-btn i,
.note-toolbar .note-icon:before,
.note-toolbar [class^="note-icon"]:before,
.note-toolbar [class*=" note-icon"]:before {
  color: var(--dt-card-head-bg) !important;
}

/* ── Meta info (defect view) ────────────────────────────────── */
.meta-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dt-muted);
  margin-bottom: .2rem;
}

.meta-value { font-size: .9375rem; color: var(--dt-text); }

/* ── Page actions bar ───────────────────────────────────────── */
.dt-page-actions {
  display: flex;
  gap: .5rem;
  margin-bottom: 1rem;
}

/* ── Auth pages (login / register) ─────────────────────────── */
.auth-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c8d9f0;
}

.auth-card {
  width: 100%;
  max-width: 340px;
  padding: 2rem 2.25rem;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.10) !important;
}

.auth-logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dt-text);
  text-align: left;
  margin-bottom: 1.75rem;
}

.auth-logo .bi { color: #f87171; margin-right: .4rem; }

/* Login submit — fully custom, no Bootstrap btn */
.btn-login {
  display: block;
  width: 100%;
  padding: .5rem 1rem;
  font-size: .9375rem;
  font-family: inherit;
  font-weight: 600;
  color: #fff;
  background: #4051b5;
  border: 1px solid #4051b5;
  border-radius: var(--dt-radius-sm);
  cursor: pointer;
  box-shadow: none;
  outline: none;
  transition: background .15s, border-color .15s;
}
.btn-login:hover  { background: #3444a0; border-color: #3444a0; }
.btn-login:focus,
.btn-login:active { background: #3444a0; border-color: #3444a0; box-shadow: none; outline: none; }

/* ── Defect metadata table ───────────────────────────────────── */
.meta-table {
  width: 100%;
  margin-bottom: 1rem;
  font-size: .9rem;
  border-collapse: collapse;
}

.meta-table th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dt-muted);
  padding: .4rem 1rem .4rem 0;
  white-space: nowrap;
  width: 1%;
  vertical-align: baseline;
}

.meta-table td {
  padding: .4rem 2rem .4rem 0;
  color: var(--dt-text);
  vertical-align: baseline;
}

.meta-table tr:not(:last-child) th,
.meta-table tr:not(:last-child) td {
  border-bottom: 1px solid var(--dt-border);
  padding-bottom: .65rem;
  padding-top: .65rem;
}

/* ── Toast notification ─────────────────────────────────────── */
.dt-toast-wrap {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(-.5rem);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1.25rem;
  background: #1e293b;
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  border-radius: var(--dt-radius);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  z-index: 9999;
  opacity: 0;
  white-space: nowrap;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.dt-toast-wrap.dt-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dt-toast-wrap.dt-toast-success { background: #16a34a; }
.dt-toast-wrap.dt-toast-error   { background: #dc2626; }
.dt-toast-wrap.dt-toast-info    { background: #2563eb; }
.dt-toast-icon { font-size: 1rem; }

/* ── Auth error (absolutely below card, never shifts card) ───── */
.auth-error {
  position: absolute;
  top: calc(100% + .6rem);
  left: 0;
  right: 0;
  padding: .45rem .75rem;
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
  border-radius: var(--dt-radius-sm);
  font-size: .8125rem;
  text-align: center;
}
.auth-error .bi {
  font-size: .85rem;
  vertical-align: -.05em;
  margin-right: .25rem;
}

/* ── Status badges ──────────────────────────────────────────── */
.badge-status-open     { background: #dbeafe; color: #1e40af; }
.badge-status-resolved { background: #dcfce7; color: #166534; }

/* ── Responsive layout ──────────────────────────────────────── */
@media (max-width: 767px) {
  /* Sidebar: hidden off-screen by default on mobile */
  .dt-sidebar {
    transform: translateX(calc(-1 * var(--dt-sidebar-w)));
    z-index: 1050;
  }
  .dt-sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }
  /* Main: full width on mobile regardless of sidebar state */
  .dt-main,
  .dt-main.sidebar-collapsed {
    margin-left: 0 !important;
  }
  /* Overlay backdrop */
  .dt-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1040;
  }
  .dt-overlay.active { display: block; }
  /* Topbar: tighten padding */
  .dt-topbar { padding: 0 .75rem; }
  /* Content padding */
  .dt-content { padding: 1rem .75rem; }
  /* Card head: allow wrapping */
  .dt-card-head {
    flex-wrap: wrap;
    gap: .5rem;
    padding: .75rem 1rem;
  }
  /* Meta table: stack on narrow screens */
  .meta-table, .meta-table tbody, .meta-table tr,
  .meta-table th, .meta-table td {
    display: block;
    width: 100%;
  }
  .meta-table th { padding-bottom: .1rem; }
  .meta-table td { padding-bottom: .75rem; }
  /* Table: horizontal scroll */
  .card-body.p-0 { overflow-x: auto; }
}

@media (max-width: 479px) {
  .dt-topbar-right { gap: .5rem; }
  .dt-user { display: none; }
}