/* BSP-1000 <- BACsync FE design bridge.
 *
 * Lands the FE component aesthetic on the dashboard's EXISTING Bootstrap
 * markup. We mostly drive Bootstrap's own `--bs-*` component variables so
 * there are no specificity fights and no markup changes. Loaded LAST in
 * <head> (after Bootstrap + the inline <style>) so it wins the cascade.
 *
 * All values come from brand.css / dark-mode.css / elevation.css tokens,
 * so everything tracks the light/dark toggle automatically.
 */

/* ---- Base typography: sharper, system UI font, antialiased ---------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.005em;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
.text-muted, .text-secondary { color: var(--fg-muted) !important; }
.small, small { font-size: var(--fs-sm); }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

/* Visible, consistent keyboard focus ring everywhere */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Cards: layered elevation + refined radius, hover lift ---------- */
.card {
  --bs-card-bg: var(--bg-surface);
  --bs-card-color: var(--fg-default);
  --bs-card-border-color: var(--border-light);
  --bs-card-border-radius: var(--r-lg);
  --bs-card-inner-border-radius: var(--r-lg);
  --bs-card-cap-bg: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--motion-fast) var(--motion-ease-out),
              border-color var(--motion-fast) var(--motion-ease-out);
}
.card:hover { box-shadow: var(--elev-2); }
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-light);
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--fg-strong);
  letter-spacing: -0.005em;
}
.card-body { padding: var(--sp-4); }
.card-footer {
  background: var(--bg-sunken);
  border-top: 1px solid var(--border-light);
  color: var(--fg-muted);
}

/* ---- Tables: FE data-grid look (sticky muted caps headers) --------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--fg-default);
  --bs-table-border-color: var(--border-light);
  --bs-table-hover-bg: var(--bg-hover);
  --bs-table-hover-color: var(--fg-strong);
  --bs-table-striped-bg: var(--bg-sunken);
  --bs-table-striped-color: var(--fg-default);
  font-size: var(--fs-13);
  border-color: var(--border-light);
  border-collapse: separate;   /* override Bootstrap Reboot's collapse so corners can round */
  border-spacing: 0;
}
/* Rounded outer corners so the Bootstrap tables match the rounded panes they sit in. */
.table > thead th:first-child { border-top-left-radius: var(--r-md); }
.table > thead th:last-child  { border-top-right-radius: var(--r-md); }
.table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--r-md); }
.table > tbody > tr:last-child > td:last-child  { border-bottom-right-radius: var(--r-md); }
.table > thead th,
.table.table-dark > thead th {
  background: var(--bg-sunken);
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-medium);
  padding: var(--sp-2) var(--sp-3);
  white-space: nowrap;
}
.table > tbody td,
.table.table-dark > tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-color: var(--border-light);
  vertical-align: middle;
  color: var(--fg-default);
}
/* Neutralize Bootstrap's dark-table own palette so it tracks our tokens */
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--fg-default);
  --bs-table-border-color: var(--border-light);
}

/* ---- Buttons: consistent system, themed via --bs vars -------------- */
.btn {
  --bs-btn-border-radius: var(--r-md);
  --bs-btn-font-size: var(--fs-13);
  --bs-btn-font-weight: var(--fw-medium);
  --bs-btn-padding-y: 0.45rem;
  --bs-btn-padding-x: 0.85rem;
  transition: background var(--motion-fast) var(--motion-ease-out),
              border-color var(--motion-fast) var(--motion-ease-out),
              box-shadow var(--motion-fast) var(--motion-ease-out),
              transform var(--motion-fast) var(--motion-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-font-size: var(--fs-xs); --bs-btn-padding-y: 0.3rem; --bs-btn-padding-x: 0.6rem; }
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-hover); --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-color: var(--brand-fg); --bs-btn-hover-color: var(--brand-fg);
}
.btn-danger {
  --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
}
.btn-success {
  --bs-btn-bg: var(--success); --bs-btn-border-color: var(--success);
  --bs-btn-color: #06210f; --bs-btn-hover-color: #06210f;
}
.btn-warning {
  --bs-btn-bg: var(--warning); --bs-btn-border-color: var(--warning);
  --bs-btn-color: #2a1c00; --bs-btn-hover-color: #2a1c00;
}
.btn-secondary {
  --bs-btn-bg: var(--bg-hover); --bs-btn-border-color: var(--border-medium);
  --bs-btn-hover-bg: var(--bg-sunken); --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-color: var(--fg-default); --bs-btn-hover-color: var(--fg-strong);
}
.btn-outline-secondary {
  --bs-btn-color: var(--fg-muted); --bs-btn-border-color: var(--border-medium);
  --bs-btn-hover-bg: var(--bg-hover); --bs-btn-hover-color: var(--fg-strong);
  --bs-btn-hover-border-color: var(--border-strong);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand); --bs-btn-hover-color: var(--brand-fg);
}

/* ---- Badges: pill, semibold; keep the vivid status fills as-is ------ */
.badge {
  border-radius: var(--r-pill);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  padding: 0.3em 0.6em;
}
.badge.bg-secondary {
  background-color: var(--bg-sunken) !important;
  color: var(--fg-muted) !important;
  border: 1px solid var(--border-light);
}

/* ---- Alerts: themed soft surfaces ---------------------------------- */
.alert { border-radius: var(--r-md); border-width: 1px; }
.alert-danger  { --bs-alert-bg: var(--danger-soft);  --bs-alert-color: var(--danger);  --bs-alert-border-color: var(--danger); }
.alert-warning { --bs-alert-bg: var(--warning-soft); --bs-alert-color: var(--warning); --bs-alert-border-color: var(--warning); }
.alert-success { --bs-alert-bg: var(--success-soft); --bs-alert-color: var(--success); --bs-alert-border-color: var(--success); }
.alert-info    { --bs-alert-bg: var(--info-soft);    --bs-alert-color: var(--info);    --bs-alert-border-color: var(--info); }

/* ---- Form controls -------------------------------------------------- */
.form-control, .form-select {
  background-color: var(--bg-surface);
  color: var(--fg-default);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-md);
}
.form-control::placeholder { color: var(--fg-faint); }
.form-control:focus, .form-select:focus {
  background-color: var(--bg-surface);
  color: var(--fg-default);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* (Topbar / nav chrome now lives in nav.css — the shared shell.) */

/* ---- Search inputs: sleek, token-driven (replaces ugly .table-search) */
.table-search,
input[type="search"] {
  background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l3.2 3.2'/%3E%3C/svg%3E") no-repeat;
  background-position: var(--sp-3) center;
  color: var(--fg-default);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 22px);
  font-size: var(--fs-13);
  min-height: 36px;
  min-width: 220px;
  transition: border-color var(--motion-fast) var(--motion-ease-out),
              box-shadow var(--motion-fast) var(--motion-ease-out);
}
.table-search::placeholder,
input[type="search"]::placeholder { color: var(--fg-faint); }
.table-search:focus,
input[type="search"]:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ---- Modern, subtle scrollbars ------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }

/* Spinners + muted meta inherit token ink */
.spinner-border { color: var(--brand); }
