/* =========================================================
   Batch System – Dark Glass Theme
   • Frosted panels, soft shadows, modern focus rings
   • Function-colored buttons (primary/success/warning/danger/info/secondary)
   • Works on top of Bootstrap 5 — load AFTER Bootstrap
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-0: #0a0f14;     /* canvas */
  --bg-1: #0f151c;     /* navbar / headers */
  --bg-2: #111a24;     /* cards / panels */
  --bg-3: #162130;     /* hover / active */
  --border: #2a3441;

  /* Ink */
  --ink-0: #f8fbff;    /* primary text */
  --ink-1: #cfd7e3;    /* secondary text */
  --ink-2: #9aa6b2;    /* muted */

  /* Button accents by function */
  --accent-primary:  #60a5fa; /* blue */
  --accent-success:  #34d399; /* green */
  --accent-warning:  #fbbf24; /* amber */
  --accent-danger:   #f87171; /* red */
  --accent-info:     #22d3ee; /* cyan */
  --accent-secondary:#a8b3c7; /* slate */

  /* Effects */
  --ring: rgba(96,165,250,.40);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-1: 0 6px 18px rgba(0,0,0,.28);
  --shadow-2: 0 14px 34px rgba(0,0,0,.38);
}

/* ---------- Global base ---------- */
html, body {
  background:
    radial-gradient(900px 500px at -10% -20%, rgba(96,165,250,.08), transparent 60%),
    radial-gradient(800px 480px at 110% 0%, rgba(34,211,238,.06), transparent 60%),
    var(--bg-0);
  color: var(--ink-0);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.45;
}

body {
  --bs-body-bg: var(--bg-0);
  --bs-body-color: var(--ink-0);
  --bs-heading-color: var(--ink-0);
  --bs-secondary-color: var(--ink-1);
  --bs-border-color: var(--border);
  --bs-link-color: #e6f0ff;
  --bs-link-hover-color: #ffffff;
}

/* Smooth micro-transitions */
*,
*::before,
*::after {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6,
p, small, strong, em, label, span, li, dt, dd, th, td { color: var(--ink-0); }
.text-muted { color: var(--ink-2) !important; }
.text-secondary,.text-body-secondary { color: var(--ink-1) !important; }
.text-dark,.text-black,.text-body { color: var(--ink-0) !important; }

a, a:visited { color: #e6f0ff; }
a:hover, a:focus { color: #fff; text-decoration: underline; }

/* ---------- Shells / Glass surfaces ---------- */
.card,
.offcanvas,
.accordion-item,
.dropdown-menu,
.list-group-item,
.popover,
.modal-content,
.toast,
.nav-tabs .nav-link,
.nav-pills .nav-link {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) , var(--bg-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  color: var(--ink-0);
  box-shadow: var(--shadow-1);
}

@supports (backdrop-filter: blur(8px)) {
  .card,
  .dropdown-menu,
  .modal-content,
  .popover,
  .toast {
    backdrop-filter: blur(8px) saturate(110%);
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.12);
  }
}

/* Navbar */
.navbar {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)) , var(--bg-1) !important;
  color: var(--ink-0);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.navbar * { color: var(--ink-0); }

/* ---------- NEW: Tabbar buttons to match other buttons ---------- */
.tabbar .btn {
  width: 120px;               /* same width as other buttons */
  border-radius: 12px;
  box-shadow: var(--shadow-1);
}
.tabbar .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
}

/* ---------- Tabs ---------- */
.nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,.10);
  gap: .45rem;
  padding-bottom: .35rem;
  margin-bottom: 1rem;
  overflow: visible;
}
.nav-tabs .nav-link {
  position: relative;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--ink-1);
  background: transparent;
  margin-bottom: -1px;
  padding: .55rem .9rem;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  background-color: var(--bg-3);
  color: var(--ink-0);
  border-color: rgba(255,255,255,.10);
  border-bottom-color: transparent;
  z-index: 3;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  background-color: var(--bg-3);
  color: var(--ink-0);
  border-color: rgba(255,255,255,.14) rgba(255,255,255,.14) transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  z-index: 3;
}
.tab-content { margin-top: .25rem; }

/* ---------- Tables ---------- */
.table {
  --bs-table-color: var(--ink-0);
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255,255,255,.10);
  color: var(--ink-0);
  border-color: var(--bs-table-border-color);
}
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) , var(--bg-1);
  color: var(--ink-0);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.table > :not(caption) > * > * {
  background-color: transparent;
  color: inherit;
  border-color: rgba(255,255,255,.10);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,.03); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(96,165,250,.10); }
.table td, .table th { padding: .75rem .9rem; }
.table .table-row-hover:hover { background-color: rgba(96,165,250,.10) !important; cursor: pointer; }

/* ---------- Forms (frosted inputs) ---------- */
.form-label,.form-text { color: var(--ink-0); }
.form-control,
.form-select,
.input-group-text {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  color: var(--ink-0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.form-control::placeholder { color: var(--ink-2); }
.form-control:focus, .form-select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px var(--ring);
  outline: none;
}
.form-check-label { color: var(--ink-0); }
.form-check-input {
  background-color: var(--bg-0);
  border-color: rgba(255,255,255,.18);
}
.form-check-input:checked {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  color: var(--ink-1);
  border-color: rgba(255,255,255,.08);
}

/* ---------- Buttons: glass + function accent ---------- */
.btn {
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  color: var(--ink-0);
  width: 120px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: var(--btn-bg);
  backdrop-filter: blur(6px);
  padding: .55rem 1rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(0,0,0,.36) inset; }

/* Primary (blue) */
.btn-primary {
  background: linear-gradient(180deg, rgba(96,165,250,.35), rgba(96,165,250,.18));
  border-color: rgba(96,165,250,.55);
  color: #f5f9ff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.btn-primary:hover {
  background: linear-gradient(180deg, rgba(96,165,250,.45), rgba(96,165,250,.22));
  border-color: rgba(96,165,250,.72);
  box-shadow: 0 8px 26px rgba(96,165,250,.35);
}

/* Success (green) */
.btn-success {
  background: linear-gradient(180deg, rgba(52,211,153,.34), rgba(52,211,153,.18));
  border-color: rgba(52,211,153,.55);
  color: #edfff8;
}
.btn-success:hover {
  background: linear-gradient(180deg, rgba(52,211,153,.45), rgba(52,211,153,.22));
  border-color: rgba(52,211,153,.72);
  box-shadow: 0 8px 26px rgba(52,211,153,.35);
}

/* Warning (amber) */
.btn-warning {
  background: linear-gradient(180deg, rgba(251,191,36,.40), rgba(251,191,36,.20));
  border-color: rgba(251,191,36,.62);
  color: #0a0f14;
}
.btn-warning:hover {
  background: linear-gradient(180deg, rgba(251,191,36,.50), rgba(251,191,36,.26));
  border-color: rgba(251,191,36,.80);
  box-shadow: 0 8px 26px rgba(251,191,36,.35);
}

/* Danger (red) */
.btn-danger {
  background: linear-gradient(180deg, rgba(248,113,113,.38), rgba(248,113,113,.20));
  border-color: rgba(248,113,113,.60);
  color: #fff5f5;
}
.btn-danger:hover {
  background: linear-gradient(180deg, rgba(248,113,113,.48), rgba(248,113,113,.24));
  border-color: rgba(248,113,113,.78);
  box-shadow: 0 8px 26px rgba(248,113,113,.35);
}

/* Info (cyan) */
.btn-info {
  background: linear-gradient(180deg, rgba(34,211,238,.36), rgba(34,211,238,.18));
  border-color: rgba(34,211,238,.58);
  color: #e8fdff;
}
.btn-info:hover {
  background: linear-gradient(180deg, rgba(34,211,238,.46), rgba(34,211,238,.22));
  border-color: rgba(34,211,238,.78);
  box-shadow: 0 8px 26px rgba(34,211,238,.35);
}

/* Secondary (slate) */
.btn-secondary {
  background: linear-gradient(180deg, rgba(168,179,199,.28), rgba(168,179,199,.12));
  border-color: rgba(168,179,199,.46);
  color: #f7f9fc;
}
.btn-secondary:hover {
  background: linear-gradient(180deg, rgba(168,179,199,.36), rgba(168,179,199,.16));
  border-color: rgba(168,179,199,.64);
  box-shadow: 0 8px 26px rgba(168,179,199,.30);
}

/* Outline variants */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-secondary {
  background: transparent;
  color: var(--ink-0);
  backdrop-filter: blur(4px);
}
.btn-outline-primary { border-color: var(--accent-primary); }
.btn-outline-success { border-color: var(--accent-success); }
.btn-outline-warning { border-color: var(--accent-warning); color: #f8e8b0; }
.btn-outline-danger  { border-color: var(--accent-danger); }
.btn-outline-info    { border-color: var(--accent-info); }
.btn-outline-secondary { border-color: var(--accent-secondary); }
.btn-outline-primary:hover { box-shadow: 0 0 0 6px rgba(96,165,250,.18); background: rgba(96,165,250,.14); }
.btn-outline-success:hover { box-shadow: 0 0 0 6px rgba(52,211,153,.18); background: rgba(52,211,153,.14); }
.btn-outline-warning:hover { box-shadow: 0 0 0 6px rgba(251,191,36,.18); background: rgba(251,191,36,.12); color:#0a0f14; }
.btn-outline-danger:hover  { box-shadow: 0 0 0 6px rgba(248,113,113,.18); background: rgba(248,113,113,.14); }
.btn-outline-info:hover    { box-shadow: 0 0 0 6px rgba(34,211,238,.18); background: rgba(34,211,238,.14); }
.btn-outline-secondary:hover { box-shadow: 0 0 0 6px rgba(168,179,199,.18); background: rgba(168,179,199,.12); }

/* ---------- Modals ---------- */
.modal-content { border-radius: 18px; box-shadow: var(--shadow-2); }
.modal-header, .modal-footer { border-color: rgba(255,255,255,.10); }
.btn-close { filter: invert(1) grayscale(1); opacity: .9; }
.btn-close:hover { opacity: 1; }
@keyframes modal-pop { 0% { transform: translateY(8px) scale(.98); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.modal.show .modal-dialog { animation: modal-pop .18s ease-out; }

/* ---------- Dropdowns / Popovers / Tooltips ---------- */
.dropdown-menu { border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.dropdown-item { color: var(--ink-0); border-radius: 8px; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-3); color: var(--ink-0); }
.popover { color: var(--ink-0); border-radius: var(--radius-md); }
.tooltip .tooltip-inner { background: var(--bg-3); color: var(--ink-0); }
.tooltip .tooltip-arrow::before { border-top-color: var(--bg-3) !important; }

/* ---------- Code / Logs ---------- */
pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius: 14px;
  padding: .9rem 1rem;
  max-height: 46vh;
  overflow: auto;
  color: var(--ink-0);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height: 1.35;
}

/* ---------- HR / KBD / Misc ---------- */
hr { border-color: rgba(255,255,255,.12); opacity: 1; margin: 1.25rem 0; }
kbd {
  background-color: var(--bg-1);
  color: var(--ink-0);
  border: 1px solid rgba(255,255,255,.18);
  padding: .15rem .35rem;
  border-radius: 6px;
}

/* ---------- Scrollbars (webkit) ---------- */
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12)); }

/* ---------- Accessibility & focus ---------- */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), 0 0 0 1px rgba(255,255,255,.18) inset;
  border-color: var(--accent-primary);
}

/* ---------- Utilities to keep light text ---------- */
.bg-white, .bg-light {
  background-color: var(--bg-2) !important;
  color: var(--ink-0) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.text-body,.text-dark,.text-black,.link-dark,.link-body-emphasis { color: var(--ink-0) !important; }
*[style*="color: black"] { color: var(--ink-0) !important; }

/* ---------- Optional: compact tables ---------- */
.table.table-compact td, .table.table-compact th { padding: .55rem .7rem; }

/* ---- Scroll only rows; keep headers + top UI fixed ---- */
.data-area {
  overflow: auto;
  overflow-y: scroll;
  max-height: 60vh;
  border-radius: 12px;
  scrollbar-width: none;
}
@media (min-height: 1080px) {
  .data-area { max-height: 72vh; }
}
.data-area .table thead th { position: sticky; top: 0; z-index: 2; }

/* Prevent overall page scroll */
html, body {
  height: 100%;
  overflow: hidden; /* Stop the page itself from scrolling */
}
.main-content { height: 100%; display: flex; flex-direction: column; }

/* Force dark theme on select menus */
select.form-select {
  background-color: var(--bg-2) !important;
  color: var(--ink-0) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* ===== Job Modal (compact, scroll-light) ===== */
.job-modal .modal-dialog { max-width: 1000px; }

/* Sticky pills header inside modal for quick jumping */
.job-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

/* Scrollable modal body */
.job-body {
  max-height: 60vh;
  overflow: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Sticky footer with actions */
.job-footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.05));
  z-index: 10;
}
:root {
  color-scheme: dark;
}

/* ===== Dark Theme Base ===== */
body.bg-dark {
  --bs-body-bg: #1f1f25;
  --bs-body-color: #eee;
  --bs-heading-color: #fff;
  --bs-border-color: #3b3b47;

  /* Link colors */
  --bs-link-color: #a7c7ff;
  --bs-link-hover-color: #d5e6ff;

  /* Muted/secondary tones */
  --bs-secondary-color: #b8b8c6;
}

/* Keep page header + tabbar spacing tidy */
.main-content { max-width: 1200px; }

/* Make tables’ data areas scroll independently if needed */
.data-area { max-height: calc(100vh - 340px); overflow: auto; }

/* Job modal sticky parts */
.job-modal .job-tabs { position: sticky; top: 0; background: rgba(0,0,0,.2); z-index: 2; }
.job-modal .job-body { max-height: calc(100vh - 260px); overflow: auto; }
.job-modal .job-footer { position: sticky; bottom: 0; background: rgba(0,0,0,.2); z-index: 2; }

/* Buttons — consistent height (40px) */
.btn, .btn-sm, .btn-lg { min-height: 40px; }

/* Make all primary/secondary buttons look like tabs in the header bar */
.tabbar .tabbtn {
  text-decoration: none !important;     /* no underline by default */
}
.tabbar .tabbtn:hover,
.tabbar .tabbtn:focus,
.tabbar .tabbtn:active {
  text-decoration: none !important;     /* no underline on hover/active/focus */
}

/* Right-align action cells even if the header is blank */
table .actions { text-align: right; white-space: nowrap; }

/* Optional: ensure table headers stick when scrolling long lists */
.table thead th {
  position: sticky;
  top: 0;
  background: #26262f;
  z-index: 1;
}

/* Small utility tweaks */
pre { white-space: pre-wrap; word-wrap: break-word; }

/* === Compact Scripts and Jobs tables === */
#tblScripts.table td,
#tblScripts.table th,
#tblJobs.table td,
#tblJobs.table th {
  padding: 0.6rem 0.7rem; /* reduce row height ~20% */
}

#tblScripts .btn,
#tblJobs .btn {
  padding: 0.35rem 0.65rem; /* smaller buttons inside rows */
  font-size: 0.9rem;
  min-height: 32px; /* slightly shorter than default 40px */
}
#jobScriptId, #jobCategoryId {
  width: 100%;
  min-width: 0;
}

.card-fields {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.field-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  font-size: 0.9rem;
}

.field-row .field-label {
  flex: 0 0 40%;
  font-weight: 600;
  color: #6c757d;
}

.field-row .field-value {
  flex: 0 0 60%;
  text-align: left;
  word-break: break-word;
}

/* 1) Allow the Utilities section to scroll when the 3 panels stack */
@media (max-width: 1399.98px) { /* < xxl where Header/Options/Script stack */
  #section-utilities {
    max-height: calc(100vh - 180px); /* leaves room for header/tabbar */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px; /* breathing room so the last field isn't cramped */
  }
}

/* 2) Make all buttons on the Utilities page 160px wide */
#section-utilities .btn {
  width: 260px;
}

#section-utilities {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#section-utilities .utilities-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-0, #000);
}

#section-utilities .utilities-content {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}
/* ===== Utilities page fixes (override) ===== */

/* Keep the page header sticky, but only the content column should scroll */
#section-utilities {
  display: flex;
  flex-direction: column;
  min-height: 0;                /* allow child to size correctly */
  overflow: visible;            /* do not scroll the wrapper */
}

#section-utilities .utilities-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-0);      /* matches site header colour */
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Single, smooth vertical scroll area; no horizontal scrollbar */
#section-utilities .utilities-content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 16px;
}

/* When the three panels stack on smaller screens, keep the single scroller */
@media (max-width: 1399.98px) {
  #section-utilities {
    max-height: none !important;  /* cancel earlier max-height */
    overflow: visible !important;  /* cancel earlier overflow */
  }
}

/* Button sizing/colours consistent with the rest of the site */
#section-utilities .btn {
  width: 260px;                 /* requested size (was 260px) */
  min-height: 40px;             /* matches global button height */
}

/* Ensure tabbar buttons on Utilities match global button look/feel */
#section-utilities .tabbtn {
  text-decoration: none !important;
}

/* Typography already inherits the site font; keep form controls consistent */
#section-utilities .form-control,
#section-utilities .form-select {
  font: inherit;
}