/* Qibris Ops — lapisan tema di atas Bootstrap 5.3.
   Palet dari dokumen kepabeanan: tinta biru tua (primary), segel tembaga (acuan),
   cap merah (bahaya). Elemen khas: pita segel di sisi kiri kartu klien. */

:root,
[data-bs-theme=light] {
  --ops-ink: #12324a;
  --ops-ink-2: #1d4a6b;
  --ops-seal: #c98a12;
  --ops-side-bg: #12324a;
  --ops-side-fg: #d9e6f0;
  --ops-side-muted: #8fb0c8;
  --bs-body-bg: #eef1f4;
  --bs-body-color: #16232d;
  --bs-secondary-bg: #ffffff;
  --bs-tertiary-bg: #f5f7f9;
  --bs-border-color: #d6dde3;
  --bs-primary: #12324a;
  --bs-primary-rgb: 18, 50, 74;
  --bs-primary-text-emphasis: #0b2233;
  --bs-primary-bg-subtle: #dbe6ef;
  --bs-primary-border-subtle: #b3c8d9;
  --bs-success: #2f7a4f;
  --bs-success-rgb: 47, 122, 79;
  --bs-danger: #b3261e;
  --bs-danger-rgb: 179, 38, 30;
  --bs-link-color: #1f5f8b;
  --bs-link-color-rgb: 31, 95, 139;
  --bs-link-hover-color: #12324a;
  --bs-code-color: #1f5f8b;
  --ops-console-bg: #0e1820;
  --ops-console-fg: #d6e4ee;
}

[data-bs-theme=dark] {
  --ops-ink: #9cc3e0;
  --ops-ink-2: #c3dbee;
  --ops-side-bg: #0a141b;
  --ops-side-fg: #cfdde8;
  --ops-side-muted: #7c95a8;
  --bs-body-bg: #0f1a22;
  --bs-body-color: #e3eaef;
  --bs-secondary-bg: #16232d;
  --bs-tertiary-bg: #1b2a35;
  --bs-border-color: #2a3b48;
  --bs-primary: #7fb3da;
  --bs-primary-rgb: 127, 179, 218;
  --bs-primary-text-emphasis: #b9d6ec;
  --bs-primary-bg-subtle: #142c40;
  --bs-primary-border-subtle: #24455f;
  --bs-link-color: #8cc0e6;
  --bs-link-color-rgb: 140, 192, 230;
  --bs-link-hover-color: #b9d6ec;
  --bs-code-color: #9cc3e0;
}

body { background: var(--bs-body-bg); }
code, .font-monospace { font-size: .85em; }
h1, .h1 { font-size: 1.55rem; font-weight: 650; letter-spacing: -.01em; color: var(--ops-ink); }
h2, .h2 { font-size: 1.12rem; font-weight: 650; }
.lead-sm { color: var(--bs-secondary-color); max-width: 80ch; }

/* Tombol primary memakai tinta */
.btn-primary {
  --bs-btn-bg: var(--ops-ink); --bs-btn-border-color: var(--ops-ink);
  --bs-btn-hover-bg: var(--ops-ink-2); --bs-btn-hover-border-color: var(--ops-ink-2);
  --bs-btn-active-bg: var(--ops-ink-2); --bs-btn-active-border-color: var(--ops-ink-2);
  --bs-btn-disabled-bg: var(--ops-ink); --bs-btn-disabled-border-color: var(--ops-ink);
}
[data-bs-theme=dark] .btn-primary { --bs-btn-color: #0f1a22; --bs-btn-hover-color: #0f1a22; --bs-btn-active-color: #0f1a22; }
.btn-outline-primary {
  --bs-btn-color: var(--ops-ink); --bs-btn-border-color: var(--ops-ink);
  --bs-btn-hover-bg: var(--ops-ink); --bs-btn-hover-border-color: var(--ops-ink);
  --bs-btn-active-bg: var(--ops-ink); --bs-btn-active-border-color: var(--ops-ink);
}
[data-bs-theme=dark] .btn-outline-primary { --bs-btn-hover-color: #0f1a22; --bs-btn-active-color: #0f1a22; }

/* Kerangka */
.ops-shell { display: flex; min-height: 100vh; }
.ops-side { --bs-offcanvas-width: 248px; --bs-offcanvas-bg: var(--ops-side-bg); --bs-offcanvas-color: var(--ops-side-fg); background: var(--ops-side-bg); color: var(--ops-side-fg); }
@media (min-width: 992px) {
  .ops-shell { background: linear-gradient(to right, var(--ops-side-bg) 248px, transparent 248px); }
  .ops-side.offcanvas-lg { width: 248px; flex: 0 0 248px; position: sticky; top: 0; height: 100vh; overflow-y: auto; background-color: var(--ops-side-bg) !important; }
}
.ops-side .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.1); }
.ops-brand { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; padding: .25rem .5rem 1rem; }
.ops-brand .mark { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--ops-seal); color: #12324a; font-weight: 800; }
.ops-brand .name { font-weight: 700; line-height: 1.1; }
.ops-brand small { display: block; color: var(--ops-side-muted); font-weight: 400; font-size: .75rem; }
.ops-nav .nav-link { color: var(--ops-side-fg); border-radius: .5rem; padding: .45rem .7rem; display: flex; align-items: center; gap: .6rem; }
.ops-nav .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.ops-nav .nav-link.active { background: rgba(255,255,255,.14); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--ops-seal); }
.ops-nav .nav-link .bi { width: 1.1rem; text-align: center; opacity: .9; }
.ops-nav .grp { color: var(--ops-side-muted); font-size: .75rem; margin: 1rem .7rem .3rem; }
.ops-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ops-top { background: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color); padding: .5rem 1rem; }
.ops-content { padding: 1.5rem 1.75rem 3rem; }
@media (max-width: 575.98px) { .ops-content { padding: 1rem 1rem 2.5rem; } }

/* Indikator worker */
.worker-chip { font-size: .82rem; }
.pulse { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; background: var(--bs-secondary-color); }
.pulse.ok { background: var(--bs-success); }
.pulse.busy { background: var(--bs-warning); animation: ops-pulse 1.2s ease-in-out infinite; }
.pulse.bad { background: var(--bs-danger); }
@keyframes ops-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pulse.busy { animation: none; } }

/* Kartu */
.card { --bs-card-bg: var(--bs-secondary-bg); --bs-card-border-color: var(--bs-border-color); --bs-card-cap-bg: transparent; }
.dropdown-menu, .modal-content, .accordion { --bs-dropdown-bg: var(--bs-secondary-bg); --bs-modal-bg: var(--bs-secondary-bg); --bs-accordion-bg: transparent; }
.card-header { font-weight: 650; }

/* Kartu klien + pita segel */
.tenant-card { border-left: 0; overflow: hidden; }
.tenant-card .seal { position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--bs-secondary-color); }
.tenant-card.s-ok .seal { background: var(--bs-success); }
.tenant-card.s-warn .seal { background: var(--bs-warning); }
.tenant-card.s-bad .seal { background: var(--bs-danger); }
.tenant-card .card-body { padding-left: 1.5rem; }
.tenant-card .title { font-size: 1.3rem; font-weight: 750; color: var(--ops-ink); text-decoration: none; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: grid; grid-template-columns: 1.4rem 8.5rem 1fr; gap: .25rem; padding: .32rem 0; border-top: 1px dashed var(--bs-border-color); font-size: .9rem; align-items: start; }
.check-list li:first-child { border-top: 0; }
.check-list .lbl { color: var(--bs-secondary-color); }
.badge-ref { background: var(--ops-seal); color: #12324a; }

/* Pipeline deploy */
.pipeline { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.pipeline .step { flex: 1 1 160px; position: relative; padding: .75rem 1rem .75rem 1.25rem; background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); margin-right: -1px; }
.pipeline .step:first-child { border-radius: .5rem 0 0 .5rem; }
.pipeline .step:last-child { border-radius: 0 .5rem .5rem 0; }
.pipeline .step .n { font-size: .75rem; color: var(--bs-secondary-color); }
.pipeline .step .t { font-weight: 650; }
.pipeline .step.done { box-shadow: inset 0 -3px 0 var(--bs-success); }
.pipeline .step.wait { box-shadow: inset 0 -3px 0 var(--bs-warning); }
.pipeline .step.block { box-shadow: inset 0 -3px 0 var(--bs-secondary-color); }
.pipeline .step.now { box-shadow: inset 0 -3px 0 var(--bs-primary); }
@media (max-width: 767.98px) { .pipeline .step { flex-basis: 100%; margin: 0 0 -1px; border-radius: 0 !important; } }

/* Tabel */
.table { --bs-table-bg: transparent; font-size: .9rem; }
.table > :not(caption) > * > * { padding: .55rem .65rem; }
.table thead th { color: var(--bs-secondary-color); font-weight: 600; white-space: nowrap; background: var(--bs-tertiary-bg); }
.table td .sub { display: block; color: var(--bs-secondary-color); font-size: .8rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Output & daftar file */
.console { background: var(--ops-console-bg); color: var(--ops-console-fg); border-radius: .5rem; padding: .9rem 1rem; font-family: var(--bs-font-monospace); font-size: .8rem; max-height: 68vh; min-height: 12rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.filelist { font-family: var(--bs-font-monospace); font-size: .8rem; max-height: 18rem; overflow: auto; white-space: pre-wrap; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .6rem .8rem; margin: 0; }
pre.sql { font-size: .78rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .6rem .8rem; max-height: 22rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Item laporan sinkron */
.sync-item { border-top: 1px solid var(--bs-border-color); padding: .65rem 0; }
.sync-item:first-child { border-top: 0; }
.sync-item.blocked .form-check-label { color: var(--bs-secondary-color); text-decoration: line-through; }
.apply-bar { position: sticky; bottom: 0; z-index: 5; background: var(--bs-secondary-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -6px 16px rgba(0,0,0,.06); padding: .75rem 1rem; margin: 0 -1.75rem -3rem; }

/* Halaman login */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(1200px 600px at 20% -10%, #1d4a6b 0%, transparent 60%), #12324a; }
[data-bs-theme=dark] .auth-wrap { background: #0a141b; }
.auth-card { width: 100%; max-width: 26rem; border: 0; border-top: 6px solid var(--ops-seal); }
.qr { background: #fff; display: inline-block; padding: .5rem; border-radius: .5rem; border: 1px solid var(--bs-border-color); }
.qr img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.secret { font-family: var(--bs-font-monospace); letter-spacing: .08em; overflow-wrap: anywhere; }

/* Modal 2FA */
.otp-input { font-family: var(--bs-font-monospace); font-size: 1.6rem; letter-spacing: .5em; text-align: center; padding-left: .5em; }
.modal-danger .modal-header { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

.toast-container { z-index: 1090; }

.mw-page { max-width: 56rem; }
.mw-form { max-width: 34rem; }

/* Kontrol form memakai warna tinta */
.form-check-input:checked { background-color: var(--ops-ink); border-color: var(--ops-ink); }
.form-check-input:focus, .form-control:focus, .form-select:focus { border-color: var(--ops-ink-2); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231d4a6b'/%3e%3c/svg%3e"); }
.btn-outline-secondary { --bs-btn-color: var(--bs-body-color); }
[data-bs-theme=dark] .console { border: 1px solid var(--bs-border-color); }