/* ABO shared UI — loaded by head.php on every page. Light default, dark optional. */

:root,
[data-bs-theme="light"] {
  --ui-bg: #f4f6fa;
  --ui-surface: #ffffff;
  --ui-surface-2: #f8f9fc;
  --ui-border: #e4e7ee;
  --ui-text: #1f2937;
  --ui-muted: #6b7280;
  --ui-primary: #2563eb;
  --ui-primary-rgb: 37, 99, 235;
  --ui-primary-hover: #1d4ed8;
  --ui-primary-soft: #eaf1ff;
  --ui-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --ui-sidebar-w: 232px;
  --ui-sidebar-mini: 64px;
  --ui-gutter: 12px;

  --bs-body-bg: var(--ui-bg);
  --bs-body-color: var(--ui-text);
  --bs-secondary-color: var(--ui-muted);
  --bs-border-color: var(--ui-border);
  --bs-tertiary-bg: var(--ui-surface-2);
  --bs-primary: var(--ui-primary);
  --bs-primary-rgb: var(--ui-primary-rgb);
  --bs-link-color: var(--ui-primary);
  --bs-link-color-rgb: var(--ui-primary-rgb);
  --bs-link-hover-color: var(--ui-primary-hover);
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .75rem;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size: .875rem;
}

[data-bs-theme="dark"] {
  --ui-bg: #0f1218;
  --ui-surface: #171b23;
  --ui-surface-2: #1d222c;
  --ui-border: #2a303c;
  --ui-text: #e5e7eb;
  --ui-muted: #9aa3b2;
  --ui-primary: #5b8cff;
  --ui-primary-rgb: 91, 140, 255;
  --ui-primary-hover: #7aa2ff;
  --ui-primary-soft: rgba(91, 140, 255, .14);
  --ui-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

body {
  background-color: var(--ui-bg) !important;
  color: var(--ui-text);
  font-family: var(--bs-body-font-family) !important;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout: fixed sidebar + content ---------- */
.ui-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--ui-sidebar-w);
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-border);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  transition: width .18s ease, transform .2s ease;
}
/* Small gutter so content outside .container never touches the edge or the sidebar. */
body { padding-left: var(--ui-gutter); padding-right: var(--ui-gutter); }
.ui-topbar { margin: 0 calc(-1 * var(--ui-gutter)); }
@media (min-width: 992px) {
  body { padding-left: calc(var(--ui-sidebar-w) + var(--ui-gutter)); transition: padding-left .18s ease; }
  body.ui-mini { padding-left: calc(var(--ui-sidebar-mini) + var(--ui-gutter)); }
  body.ui-mini .ui-sidebar { width: var(--ui-sidebar-mini); }
  body.ui-mini .ui-label,
  body.ui-mini .ui-nav-group,
  body.ui-mini .ui-user-meta { display: none; }
  body.ui-mini .ui-nav a,
  body.ui-mini .ui-side-btn { justify-content: center; padding-left: 0; padding-right: 0; }
  .ui-topbar { display: none !important; }
}
@media (max-width: 991.98px) {
  .ui-sidebar { transform: translateX(-100%); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
  body.ui-nav-open .ui-sidebar { transform: none; }
  body.ui-nav-open .ui-backdrop { display: block; }
  .ui-collapse-btn { display: none !important; }
}
.ui-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 24, .45);
  z-index: 1035;
}

.ui-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 56px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text);
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  flex-shrink: 0;
}
.ui-brand:hover { color: var(--ui-text); }
.ui-logo {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--ui-primary);
  color: #fff;
  font-size: .62rem;
  letter-spacing: -.02em;
  flex-shrink: 0;
}

.ui-nav { flex: 1; overflow-y: auto; padding: .5rem .6rem 1rem; }
.ui-nav-group {
  margin: .9rem .6rem .35rem;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ui-muted);
}
.ui-nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .4rem .65rem;
  margin: 1px 0;
  border-radius: .45rem;
  color: var(--ui-text);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.ui-nav a i { width: 18px; text-align: center; color: var(--ui-muted); font-size: .95rem; }
.ui-nav a:hover { background: var(--ui-surface-2); }
.ui-nav a.active { background: var(--ui-primary-soft); color: var(--ui-primary); }
.ui-nav a.active i { color: var(--ui-primary); }

.ui-side-foot { border-top: 1px solid var(--ui-border); padding: .5rem .6rem; }
.ui-user { display: flex; align-items: center; gap: .6rem; padding: .4rem .65rem .5rem; }
.ui-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ui-primary-soft); color: var(--ui-primary);
  display: grid; place-items: center; font-weight: 700; font-size: .8rem; flex-shrink: 0;
}
.ui-user-meta { line-height: 1.15; min-width: 0; }
.ui-user-meta small { color: var(--ui-muted); font-size: .72rem; }
.ui-side-btn {
  display: flex; align-items: center; gap: .7rem;
  width: 100%;
  padding: .45rem .65rem;
  border: 0; border-radius: .45rem;
  background: none;
  color: var(--ui-muted);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
}
.ui-side-btn i { width: 18px; text-align: center; }
.ui-side-btn:hover { background: var(--ui-surface-2); color: var(--ui-text); }

.ui-topbar {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; gap: .75rem;
  height: 52px; padding: 0 1rem;
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
}
.ui-topbar .ui-title { font-weight: 600; flex: 1; }
.ui-icon-btn {
  border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text);
  width: 34px; height: 34px; border-radius: .45rem;
  display: grid; place-items: center;
}

/* ---------- Bootstrap component polish ---------- */
.card {
  --bs-card-bg: var(--ui-surface);
  --bs-card-border-color: var(--ui-border);
  --bs-card-cap-bg: var(--ui-surface-2);
  border-radius: .75rem;
  box-shadow: var(--ui-shadow);
}
.card-header { font-weight: 600; }
.card-header.bg-primary { background-color: var(--ui-primary) !important; }
.modal-content { --bs-modal-bg: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: .75rem; }
.dropdown-menu { --bs-dropdown-bg: var(--ui-surface); --bs-dropdown-border-color: var(--ui-border); box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
.list-group { --bs-list-group-bg: var(--ui-surface); --bs-list-group-border-color: var(--ui-border); }

.btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: .45rem; }
.btn-primary {
  --bs-btn-bg: var(--ui-primary); --bs-btn-border-color: var(--ui-primary);
  --bs-btn-hover-bg: var(--ui-primary-hover); --bs-btn-hover-border-color: var(--ui-primary-hover);
  --bs-btn-active-bg: var(--ui-primary-hover); --bs-btn-active-border-color: var(--ui-primary-hover);
  --bs-btn-disabled-bg: var(--ui-primary); --bs-btn-disabled-border-color: var(--ui-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--ui-primary); --bs-btn-border-color: var(--ui-primary);
  --bs-btn-hover-bg: var(--ui-primary); --bs-btn-hover-border-color: var(--ui-primary);
  --bs-btn-active-bg: var(--ui-primary); --bs-btn-active-border-color: var(--ui-primary);
}
.bg-primary { background-color: var(--ui-primary) !important; }
.text-primary { color: var(--ui-primary) !important; }
.page-link { --bs-pagination-active-bg: var(--ui-primary); --bs-pagination-active-border-color: var(--ui-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--ui-primary); }

.form-control, .form-select {
  --bs-border-color: var(--ui-border);
  background-color: var(--ui-surface);
  border-radius: .45rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px rgba(var(--ui-primary-rgb), .15);
}
.form-label { font-weight: 500; font-size: .8rem; color: var(--ui-muted); }

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ui-border);
  --bs-table-hover-bg: rgba(var(--ui-primary-rgb), .04);
  --bs-table-striped-bg: var(--ui-surface-2);
}
.table > thead th {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ui-muted);
  background: var(--ui-surface-2);
  white-space: nowrap;
}
.table > :not(caption) > * > * { padding: .55rem .7rem; }
.table-responsive { border-radius: .6rem; }
.badge { font-weight: 600; letter-spacing: .01em; }
.alert { border-radius: .6rem; }
h1, h2, h3, h4, h5 { letter-spacing: -.015em; font-weight: 650; }

/* DataTables 1.x and 2.x controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dt-container .dt-search input,
.dt-container .dt-length select { border-radius: .45rem; border-color: var(--ui-border); }
.dataTables_wrapper .dataTables_info,
.dt-container .dt-info { color: var(--ui-muted); font-size: .8rem; }

/* Legacy utility classes used across pages -> theme-aware */
.bg-light { background-color: var(--ui-surface-2) !important; }
.bg-white { background-color: var(--ui-surface) !important; }
.table-light { --bs-table-bg: var(--ui-surface-2); --bs-table-color: var(--ui-text); --bs-table-border-color: var(--ui-border); }

/* Old dark table headers -> same header style as other tables */
thead.table-dark, .table-dark > thead {
  --bs-table-bg: var(--ui-surface-2);
  --bs-table-color: var(--ui-muted);
  --bs-table-border-color: var(--ui-border);
}
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--ui-text); --bs-btn-border-color: var(--ui-border);
  --bs-btn-hover-bg: var(--ui-surface-2); --bs-btn-hover-color: var(--ui-text); --bs-btn-hover-border-color: var(--ui-border);
  --bs-btn-active-bg: var(--ui-surface-2); --bs-btn-active-color: var(--ui-text);
}

/* Small screens */
.ui-side-icons { display: flex; gap: .25rem; padding: 0 .25rem; }
.ui-side-icons .ui-side-btn { justify-content: center; padding: .45rem 0; }
body.ui-mini .ui-side-icons { flex-direction: column; }
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.4rem; }
  h2, .h2 { font-size: 1.25rem; }
  .dataTables_wrapper .dataTables_filter input,
  .dt-container .dt-search input { max-width: 60vw; }
  .dataTables_wrapper .row, .dt-container .row { row-gap: .5rem; }
  /* Long button rows (date ranges, quick filters) wrap instead of running off-screen. */
  .btn-group:not(.btn-group-vertical) { flex-wrap: wrap; max-width: 100%; }
  td .btn-group, th .btn-group { flex-wrap: nowrap; }
}

/* Footer */
.ui-footer { color: var(--ui-muted); font-size: .78rem; text-align: center; padding: 1.25rem 0 1.5rem; }
.ui-footer a { color: inherit; }
body.ui-mini .ui-collapse-btn i { transform: rotate(180deg); }