/* ================== Base layout ================== */
:root { color-scheme: light dark; }
body{font-family:system-ui,Segoe UI,Arial,sans-serif;margin:0}
.container{max-width:1100px;margin:2rem auto;padding:0 1rem}

/* ================== Tables ================== */
table.table{border-collapse:separate;border-spacing:0}
table thead th{position:sticky;top:0;background:var(--bs-body-bg);z-index:1}
th[data-sort-key]{cursor:pointer}
th[data-sort-key].text-primary{font-weight:600}

/* ================== Actions (unified) ================== */
.actions{display:flex;gap:.5rem;justify-content:flex-end;white-space:nowrap}
.actions .action-btn,.btn-action{min-width:96px}
@media (max-width: 576px){ .actions{flex-direction:column; align-items:stretch} }

/* Home cards */
.card h5{margin-bottom:.25rem}

/* Misc */
#sentinel .spinner-border{vertical-align:middle}

/* ================== Theme tokens ================== */
:root {
  /* Brand/Accent – light */
  --sb-primary: #3b82f6;           /* blue-500 */
  --sb-primary-rgb: 59,130,246;
  --sb-bg: #f8fafc;                /* slate-50 */
  --sb-surface: #ffffff;
  --sb-text: #0f172a;              /* slate-900 */
  --sb-muted: #64748b;             /* slate-500 */
  --sb-link: #2563eb;              /* blue-600 */
  --sb-nav-bg: #ffffff;

  /* Solid button palette + rgb for focus rings */
  --sb-blue-600:#2563eb; --sb-blue-700:#1e40af; --sb-blue-rgb:37,99,235;
  --sb-grey-600:#64748b; --sb-grey-700:#475569; --sb-grey-rgb:100,116,139;
  --sb-red-600:#dc2626;  --sb-red-700:#991b1b;  --sb-red-rgb:220,38,38;
}

[data-bs-theme="dark"] {
  /* Brand/Accent – dark */
  --sb-primary: #60a5fa;           /* blue-400 */
  --sb-primary-rgb: 96,165,250;
  --sb-bg: #0b1220;                /* deep slate/indigo */
  --sb-surface: #0f172a;
  --sb-text: #e5e7eb;              /* zinc-200 */
  --sb-muted: #94a3b8;             /* slate-400 */
  --sb-link: #93c5fd;              /* blue-300 */
  --sb-nav-bg: #0f172a;
}

/* Wire tokens into Bootstrap (attribute-driven theming) */
:root,[data-bs-theme="light"]{
  --bs-body-bg: var(--sb-bg);
  --bs-body-color: var(--sb-text);
  --bs-primary: var(--sb-primary);
  --bs-link-color: var(--sb-link);
}
[data-bs-theme="dark"]{
  --bs-body-bg: var(--sb-bg);
  --bs-body-color: var(--sb-text);
  --bs-primary: var(--sb-primary);
  --bs-link-color: var(--sb-link);
}

/* ================== Buttons (solid → invert on hover) ================== */
.btn{
  border-width:1px;
  border-radius:12px;
  padding:.65rem 1rem;
  font-weight:700;
  cursor:pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:focus{ outline: none; }
.btn:focus-visible{ box-shadow: 0 0 0 .2rem rgba(var(--sb-primary-rgb), .25); }

/* --- Custom BLUE --- */
.btn-blue{ color:#fff; background-color:var(--sb-blue-600); border:1px solid var(--sb-blue-600); }
.btn-blue:hover, .btn-blue:focus-visible{ color:var(--sb-blue-600); background-color:transparent; border-color:var(--sb-blue-600); }
.btn-blue:active{ color:var(--sb-blue-700); background-color:transparent; border-color:var(--sb-blue-700); }
.btn-blue:disabled, .btn-blue.disabled{ color:#fff; background-color:var(--sb-blue-600); border-color:var(--sb-blue-600); opacity:.65; }
.btn-blue:focus-visible{ box-shadow:0 0 0 .2rem rgba(var(--sb-blue-rgb), .28); }

/* --- Custom GREY --- */
.btn-grey{ color:#fff; background-color:var(--sb-grey-600); border:1px solid var(--sb-grey-600); }
.btn-grey:hover, .btn-grey:focus-visible{ color:var(--sb-grey-600); background-color:transparent; border-color:var(--sb-grey-600); }
.btn-grey:active{ color:var(--sb-grey-700); background-color:transparent; border-color:var(--sb-grey-700); }
.btn-grey:disabled, .btn-grey.disabled{ color:#fff; background-color:var(--sb-grey-600); border-color:var(--sb-grey-600); opacity:.65; }
.btn-grey:focus-visible{ box-shadow:0 0 0 .2rem rgba(var(--sb-grey-rgb), .28); }

/* --- Custom RED --- */
.btn-red{ color:#fff; background-color:var(--sb-red-600); border:1px solid var(--sb-red-600); }
.btn-red:hover, .btn-red:focus-visible{ color:var(--sb-red-600); background-color:transparent; border-color:var(--sb-red-600); }
.btn-red:active{ color:var(--sb-red-700); background-color:transparent; border-color:var(--sb-red-700); }
.btn-red:disabled, .btn-red.disabled{ color:#fff; background-color:var(--sb-red-600); border-color:var(--sb-red-600); opacity:.65; }
.btn-red:focus-visible{ box-shadow:0 0 0 .2rem rgba(var(--sb-red-rgb), .28); }

/* --- Invert hover for Bootstrap solid variants too --- */
.btn-primary{ box-shadow: 0 2px 8px rgba(var(--sb-primary-rgb), .25); }
.btn-primary:hover, .btn-primary:focus-visible{ background-color:transparent; color:var(--bs-primary); border-color:var(--bs-primary); }
.btn-primary:hover{ box-shadow: 0 4px 14px rgba(var(--sb-primary-rgb), .35); }

.btn-secondary{ background-color:var(--bs-secondary); color:#fff; border-color:var(--bs-secondary); }
.btn-secondary:hover, .btn-secondary:focus-visible{ background-color:transparent; color:var(--bs-secondary); border-color:var(--bs-secondary); }

.btn-success:hover, .btn-success:focus-visible{ background-color:transparent; color:var(--bs-success); border-color:var(--bs-success); }
.btn-danger:hover, .btn-danger:focus-visible{ background-color:transparent; color:var(--bs-danger); border-color:var(--bs-danger); }
.btn-warning{ color:#111; }
.btn-warning:hover, .btn-warning:focus-visible{ background-color:transparent; color:var(--bs-warning); border-color:var(--bs-warning); }
.btn-info:hover, .btn-info:focus-visible{ background-color:transparent; color:var(--bs-info); border-color:var(--bs-info); }
.btn-dark:hover, .btn-dark:focus-visible{ background-color:transparent; color:var(--bs-dark); border-color:var(--bs-dark); }
.btn-light{ color:#111; }
.btn-light:hover, .btn-light:focus-visible{ background-color:transparent; color:var(--bs-light); border-color:var(--bs-light); }

/* ================== Navbar accent ================== */
.navbar-accent {
  background: var(--sb-nav-bg);
  border-bottom: 1px solid rgba(var(--sb-primary-rgb), 0.15);
}
.navbar-accent .navbar-brand { font-weight: 600; }
.navbar-accent .nav-link.active,
.navbar-accent .nav-link:hover { color: var(--sb-primary); }

/* Navbar toggler icon visibility (light & dark) */
.navbar-accent .navbar-toggler-icon{
  background-image:var(--bs-navbar-toggler-icon-bg,
    url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(33,37,41,.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"));
}
[data-bs-theme="dark"] .navbar-accent .navbar-toggler-icon{
  background-image:var(--bs-navbar-toggler-icon-bg,
    url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(229,231,235,.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"));
}

/* ================== Page width + tables ================== */
main.container-xxl { max-width: 1440px; }
.table-responsive { overflow-x: auto; }

/* ================== Cards ================== */
.entity-card {
  background: var(--sb-surface);
  border: 1px solid rgba(var(--sb-primary-rgb), 0.1);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.entity-card:hover {
  border-color: rgba(var(--sb-primary-rgb), 0.25);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* _Layout */
.theme-icon{width:1.25rem;height:1.25rem}

/* === Fancy Confirm Modal (glass + subtle gradient + motion) === */
.c-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}
.c-modal[aria-hidden="false"]{display:flex}

/* Backdrop: soft vignette + blur */
.c-modal__backdrop{
  position:absolute;inset:0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,.35) 100%);
  backdrop-filter:saturate(140%) blur(6px);
}

/* Dialog: glass card */
.c-modal__dialog{
  position:relative;max-width:560px;width:min(92vw,560px);
  border-radius:16px;overflow:hidden;
  color:var(--bs-body-color);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) padding-box,
    radial-gradient(120% 150% at 0% 0%, rgba(255,255,255,.15), rgba(255,255,255,0)) border-box;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform: translateY(8px) scale(.985);
  opacity:0;
}
[data-bs-theme="light"] .c-modal__dialog{
  color:#0f172a;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75)) padding-box,
    radial-gradient(120% 150% at 0% 0%, rgba(17,24,39,.06), rgba(17,24,39,0)) border-box;
  border-color:rgba(17,24,39,.08);
}

.c-modal__header{
  display:flex;align-items:center;gap:.75rem;justify-content:space-between;
  padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08)
}
[data-bs-theme="light"] .c-modal__header{border-bottom-color:rgba(17,24,39,.06)}

.c-modal__title{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:.5rem}
.c-modal__icon{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(135deg,#ef4444,#dc2626);color:white;
  box-shadow:0 6px 16px rgba(220,38,38,.35);
}

.c-modal__body{padding:1rem 1.25rem;font-size:.975rem}
.c-modal__desc{margin:.25rem 0 0;color:#94a3b8}
[data-bs-theme="light"] .c-modal__desc{color:#475569}
.c-modal__item{margin:.5rem 0 0;color:#cbd5e1}
[data-bs-theme="light"] .c-modal__item{color:#334155}

.c-modal__footer{
  display:flex;gap:.75rem;justify-content:flex-end;align-items:center;
  padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.08)
}
[data-bs-theme="light"] .c-modal__footer{border-top-color:rgba(17,24,39,.06)}

/* Modal button styles (scoped) */
.c-modal .btn--ghost{background:transparent;border:1px solid currentColor;color:inherit;opacity:.9}
.c-modal .btn--ghost:hover{opacity:1}
.c-modal .btn--danger{color:white;background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 8px 18px rgba(239,68,68,.35), inset 0 1px 0 rgba(255,255,255,.15)}
.c-modal .btn--danger:hover{filter:brightness(.97)}
.c-modal .btn--danger:active{transform:translateY(1px)}

/* Animations */
@keyframes cmodal-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cmodal-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.985)}}
.c-modal__dialog.is-enter{animation:cmodal-in .18s ease-out forwards}
.c-modal__dialog.is-exit{animation:cmodal-out .14s ease-in forwards}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .c-modal__dialog{animation:none !important;opacity:1 !important;transform:none !important}
}

/* Busy/status */
#busy-mask{position:sticky;bottom:0;left:0;right:0;display:none;align-items:center;justify-content:center;padding:.5rem;background:rgba(0,0,0,.05);z-index:5}
#busy-mask .spinner{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin 0.7s linear infinite;margin-right:.5rem}
@keyframes spin{to{transform:rotate(360deg)}}

#pb .card.is-selected { outline: 2px solid var(--bs-primary); }
#pb .card { cursor: pointer; }

/* IMPORTANT: fixed height for virtualized scroll */
#grid-wrapper{max-width:min(1600px,95vw); height:70vh; overflow:auto}

/* Hidden overlays/backdrops must not intercept clicks */
.modal:not(.show){pointer-events:none!important}
.modal-backdrop:not(.show){display:none!important;pointer-events:none!important}
#busy-mask{pointer-events:none}