/* ============================================================
   AGC PANEL — Modern "Command Center" Theme
   Drop this file next to your .php files (same folder).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg-0:#0b1020;
  --bg-1:#0f152b;
  --panel:rgba(255,255,255,.04);
  --panel-2:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.09);
  --stroke-2:rgba(255,255,255,.14);
  --txt:#e8ecf6;
  --txt-dim:#97a2bd;
  --txt-faint:#6b7693;
  --brand:#7c5cff;
  --brand-2:#22d3ee;
  --accent:#f472b6;
  --ok:#34d399;
  --warn:#fbbf24;
  --bad:#fb7185;
  --info:#38bdf8;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.65);
  --grad:linear-gradient(135deg,#7c5cff 0%,#9d5cff 40%,#22d3ee 100%);
  --grad-pink:linear-gradient(135deg,#f472b6,#a855f7);
}

*{box-sizing:border-box}

html,body{min-height:100%}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif!important;
  color:var(--txt)!important;
  background:
    radial-gradient(1200px 600px at 110% -10%,rgba(124,92,255,.20),transparent 55%),
    radial-gradient(900px 500px at -10% 110%,rgba(34,211,238,.16),transparent 55%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1))!important;
  background-attachment:fixed!important;
  letter-spacing:.1px;
}

/* Scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:20px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);background-clip:content-box}

/* ===================== SIDEBAR ===================== */

.sidebar h4{
  font-weight:800!important;
  letter-spacing:.5px;
  font-size:1.15rem;
  margin:0 0 18px!important;
  padding:26px 10px 22px!important;
  border:0!important;
  display:flex;align-items:center;gap:12px;justify-content:flex-start!important;
  text-align:left!important;
}
.sidebar h4::before{
  content:"";
  width:34px;height:34px;border-radius:10px;
  background:var(--grad);
  box-shadow:0 8px 20px -6px rgba(124,92,255,.8);
  flex:0 0 auto;
}
.sidebar h4 .brand-sub{display:block;font-size:.62rem;font-weight:600;letter-spacing:2px;color:var(--txt-faint);text-transform:uppercase}
.sidebar a{
  color:var(--txt-dim)!important;
  text-decoration:none!important;
  padding:12px 14px!important;
  display:flex!important;align-items:center;gap:12px;
  border-radius:var(--radius-sm)!important;
  margin-bottom:4px;
  font-weight:600;font-size:.92rem;
  position:relative;
  transition:all .18s ease;
}
.sidebar a i{width:20px;text-align:center;font-size:.98rem;opacity:.85}
.sidebar a:hover{
  background:var(--panel-2)!important;
  color:#fff!important;
  transform:translateX(3px);
}
.sidebar a.active{
  background:var(--grad)!important;
  color:#fff!important;
  box-shadow:0 12px 26px -10px rgba(124,92,255,.85);
}
.sidebar a.active i{opacity:1}

/* ===================== MAIN AREA ===================== */

h2{font-weight:800!important;letter-spacing:-.4px;margin-bottom:6px!important}
h2::after{content:"";display:block;width:56px;height:4px;border-radius:4px;background:var(--grad);margin-top:12px}
h4{font-weight:700!important}
h5,h6{color:var(--txt)}
.text-muted{color:var(--txt-dim)!important}
label,.form-label{color:var(--txt-dim)!important;font-weight:600;font-size:.86rem}
hr{border-color:var(--stroke)!important;opacity:1}
code{color:#c4b5fd!important;font-family:'JetBrains Mono',monospace!important;background:rgba(124,92,255,.12);padding:2px 7px;border-radius:6px;font-size:.82rem}

/* ===================== CARDS ===================== */
.card{
  background:var(--panel)!important;
  border:1px solid var(--stroke)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(10px);
  color:var(--txt)!important;
  overflow:hidden;
}
.card-header{
  background:var(--panel-2)!important;
  border-bottom:1px solid var(--stroke)!important;
  color:var(--txt)!important;
  font-weight:700!important;
  padding:16px 20px!important;
  letter-spacing:.2px;
}
.card-body{padding:20px!important}
.shadow-sm{box-shadow:var(--shadow)!important}

/* Stat cards (dashboard) */
.stat-card{border:1px solid var(--stroke)!important;border-radius:var(--radius)!important;position:relative;transition:transform .2s ease,box-shadow .2s ease}
.stat-card:hover{transform:translateY(-4px)}
.stat-card .card-title{font-size:.72rem!important;letter-spacing:1.4px;font-weight:700!important;opacity:.9}
.stat-card h2,.stat-card h3{font-weight:800!important}
.stat-card .fa-3x{opacity:.9!important}

/* Colored cards -> gradient glass */
.bg-primary{background:linear-gradient(135deg,#6d5cff,#22d3ee)!important;border:0!important;color:#fff!important}
.bg-success{background:linear-gradient(135deg,#10b981,#34d399)!important;border:0!important;color:#04231a!important}
.bg-warning{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;border:0!important;color:#2a1b00!important}
.bg-danger{background:linear-gradient(135deg,#f43f5e,#fb7185)!important;border:0!important;color:#fff!important}
.bg-secondary{background:linear-gradient(135deg,#475569,#64748b)!important;border:0!important;color:#fff!important}
.bg-dark{background:rgba(255,255,255,.10)!important;color:var(--txt)!important}
.bg-white{background:var(--panel-2)!important;color:var(--txt)!important}
.text-white-50{color:rgba(255,255,255,.72)!important}
.text-black-50{color:rgba(0,0,0,.55)!important}
.border-warning{border-color:rgba(251,191,36,.45)!important}
.card-header.bg-warning{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;color:#2a1b00!important}

/* ===================== FORMS ===================== */
.form-control,.form-select,textarea,input[type=text],input[type=number]{
  background:rgba(255,255,255,.05)!important;
  border:1px solid var(--stroke-2)!important;
  color:var(--txt)!important;
  border-radius:var(--radius-sm)!important;
  padding:11px 14px!important;
  font-size:.92rem!important;
  transition:border .16s ease,box-shadow .16s ease,background .16s ease;
}
.form-control::placeholder,textarea::placeholder{color:var(--txt-faint)!important}
.form-control:focus,.form-select:focus,textarea:focus{
  background:rgba(255,255,255,.07)!important;
  border-color:var(--brand)!important;
  box-shadow:0 0 0 4px rgba(124,92,255,.18)!important;
  color:#fff!important;
}
.form-select option,select option{background:#141a30!important;color:var(--txt)!important}
.form-text{color:var(--txt-faint)!important}

/* Switches */
.form-check-input{
  background:rgba(255,255,255,.12)!important;
  border:1px solid var(--stroke-2)!important;
  cursor:pointer;
}
.form-check-input:checked{background:var(--brand)!important;border-color:var(--brand)!important;box-shadow:0 0 12px -2px rgba(124,92,255,.7)}
.form-check-input:focus{box-shadow:0 0 0 4px rgba(124,92,255,.18)!important;border-color:var(--brand)!important}
.form-check-label{color:var(--txt)!important;font-weight:500;cursor:pointer}
.form-switch .form-check-input{width:2.6em;height:1.35em}

/* ===================== BUTTONS ===================== */
.btn{
  border-radius:var(--radius-sm)!important;
  font-weight:700!important;
  letter-spacing:.2px;
  padding:10px 18px!important;
  border:0!important;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:13px 22px!important}
.btn-sm{padding:7px 13px!important;font-size:.82rem!important;border-radius:10px!important}
.btn-primary{background:var(--grad)!important;color:#fff!important;box-shadow:0 12px 26px -12px rgba(124,92,255,.9)!important}
.btn-success{background:linear-gradient(135deg,#10b981,#34d399)!important;color:#04231a!important;box-shadow:0 12px 26px -12px rgba(16,185,129,.85)!important}
.btn-danger{background:linear-gradient(135deg,#f43f5e,#fb7185)!important;color:#fff!important;box-shadow:0 12px 26px -12px rgba(244,63,94,.85)!important}
.btn-warning{background:linear-gradient(135deg,#f59e0b,#fbbf24)!important;color:#2a1b00!important;box-shadow:0 12px 26px -12px rgba(245,158,11,.85)!important}
.btn-secondary{background:linear-gradient(135deg,#4f5b76,#64748b)!important;color:#fff!important}
.btn-outline-warning{background:transparent!important;border:1px solid rgba(251,191,36,.55)!important;color:#fbbf24!important}
.btn-outline-warning:hover{background:rgba(251,191,36,.12)!important}

/* ===================== BADGES ===================== */
.badge{
  font-weight:700!important;
  letter-spacing:.3px;
  padding:6px 11px!important;
  border-radius:999px!important;
  font-size:.72rem!important;
}
.badge.bg-success{background:rgba(52,211,153,.16)!important;color:#6ee7b7!important;border:1px solid rgba(52,211,153,.4)}
.badge.bg-danger{background:rgba(251,113,133,.16)!important;color:#fda4af!important;border:1px solid rgba(251,113,133,.4)}
.badge.bg-primary{background:rgba(124,92,255,.18)!important;color:#c4b5fd!important;border:1px solid rgba(124,92,255,.45)}
.badge.bg-secondary{background:rgba(148,163,184,.16)!important;color:#cbd5e1!important;border:1px solid rgba(148,163,184,.35)}
.badge.bg-warning{background:rgba(251,191,36,.16)!important;color:#fcd34d!important;border:1px solid rgba(251,191,36,.4)}
.badge.bg-dark{background:rgba(255,255,255,.08)!important;color:var(--txt)!important;border:1px solid var(--stroke-2)}

/* ===================== TABLES ===================== */
.table{color:var(--txt)!important;margin-bottom:0!important;--bs-table-bg:transparent}
.table>:not(caption)>*>*{background:transparent!important;color:var(--txt)!important;border-color:var(--stroke)!important;padding:13px 14px!important;vertical-align:middle}
.table thead th,.table-light,.table-light th{
  background:var(--panel-2)!important;
  color:var(--txt-dim)!important;
  text-transform:uppercase;
  font-size:.72rem!important;
  letter-spacing:1px;
  font-weight:700!important;
  border-color:var(--stroke)!important;
}
.table-hover>tbody>tr{transition:background .14s ease}
.table-hover>tbody>tr:hover>*{background:rgba(124,92,255,.08)!important}
.table-responsive{border-radius:var(--radius)!important}
input[type=checkbox]{accent-color:var(--brand);width:16px;height:16px;cursor:pointer}

/* ===================== ALERTS ===================== */
.alert{
  border-radius:var(--radius-sm)!important;
  border:1px solid var(--stroke-2)!important;
  backdrop-filter:blur(8px);
  font-weight:600;
  padding:14px 18px!important;
}
.alert-success{background:rgba(52,211,153,.12)!important;color:#6ee7b7!important;border-color:rgba(52,211,153,.4)!important}
.alert-danger{background:rgba(251,113,133,.12)!important;color:#fda4af!important;border-color:rgba(251,113,133,.4)!important}
.alert-warning{background:rgba(251,191,36,.12)!important;color:#fcd34d!important;border-color:rgba(251,191,36,.4)!important}
.alert-info{background:rgba(56,189,248,.12)!important;color:#7dd3fc!important;border-color:rgba(56,189,248,.4)!important}

/* ===================== PAGINATION ===================== */
.pagination{gap:6px;flex-wrap:wrap}
.page-link{
  background:var(--panel)!important;
  border:1px solid var(--stroke-2)!important;
  color:var(--txt-dim)!important;
  border-radius:10px!important;
  padding:8px 13px!important;
  font-weight:600;
  transition:all .14s ease;
}
.page-link:hover{background:var(--panel-2)!important;color:#fff!important;border-color:var(--brand)!important}
.page-item.active .page-link{background:var(--grad)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 8px 20px -8px rgba(124,92,255,.9)}

/* Troubleshooter raw boxes -> theme them */
[style*="background-color: #f9f9f9"]{background:var(--panel)!important;border:1px solid var(--stroke)!important;border-radius:var(--radius)!important;color:var(--txt)!important}
[style*="#666"]{color:var(--txt-dim)!important}

/* Inline-styled legacy buttons -> normalize */
button[style]{
  border-radius:var(--radius-sm)!important;
  border:0!important;
  font-weight:700!important;
  transition:transform .14s ease,filter .14s ease;
}
button[style]:hover{transform:translateY(-2px);filter:brightness(1.07)}

/* Reveal animation */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card,.alert{animation:rise .4s ease both}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.topbar .crumbs{color:var(--txt-faint);font-size:.8rem;font-weight:600;letter-spacing:.4px}
.topbar .crumbs b{color:var(--txt)}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--stroke);padding:8px 14px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--txt-dim)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ================================================
   RESPONSIVE SIDEBAR - FINAL FIX
   ================================================ */

/* === DESKTOP: sidebar fixed, tidak ikut scroll === */


.hamburger     { display: none !important; }
.sidebar-close { display: none !important; }
.sidebar-overlay { display: none !important; }
.sidebar-header { display: block !important; }

/* Worker Indicator */
.worker-indicator {
  width: 80px; height: 80px;
  margin: 0 auto; border-radius: 50%;
  position: relative; display: flex;
  align-items: center; justify-content: center;
}
.worker-indicator::before {
  content:''; position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
}
.worker-indicator::after {
  content:''; width: 40px; height: 40px;
  border-radius: 50%; position: absolute;
}
.worker-indicator.running::before {
  border-color: rgba(52,211,153,0.35);
  animation: w-ring 2s infinite;
}
.worker-indicator.running::after {
  background: linear-gradient(135deg,#10b981,#34d399);
  box-shadow: 0 0 20px rgba(52,211,153,.6);
  animation: w-dot 2s infinite;
}
.worker-indicator.stopped::before { border-color: rgba(251,113,133,0.3); }
.worker-indicator.stopped::after {
  background: linear-gradient(135deg,#f43f5e,#fb7185);
  box-shadow: 0 0 10px rgba(251,113,133,.4);
}
@keyframes w-ring {
  0%,100% { transform:scale(1); opacity:1; }
  50%      { transform:scale(1.15); opacity:.7; }
}
@keyframes w-dot {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.1); }
}

/* === MOBILE (<= 768px) === */
@media (max-width: 768px) {
  .hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    !important;
    top: 14px; left: 14px;
    width: 42px; height: 42px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    color: #e8ecf6;
    font-size: 1.1rem;
    cursor: pointer;
  }
  
  .sidebar.active {
    !important;
    box-shadow: 4px 0 30px rgba(0,0,0,.7) !important;
  }
  .sidebar-close {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #e8ecf6; cursor: pointer;
  }
  .sidebar-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-right: 4px;
  }
  .sidebar-overlay {
    display: none !important;
    !important;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(3px);
  }
  .sidebar-overlay.active { display: block !important; }
  
  .col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8 {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================
   LAYOUT: Flex Sidebar + Main Content (no fixed)
   ============================================ */

.agc-layout {
    display: flex;
    align-items: flex-start;
    min-}

.sidebar {
  min-height: 100vh;
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
    min-display: flex;
    flex-direction: column;
    padding: 0;
    border-right: 1px solid var(--stroke);
}

.main-content {
    flex: 1;
    padding: 34px 38px;
    min-width: 0;
}

.sidebar-close {
    display: none !important;
}

.sidebar-overlay {
    display: none !important;
}

.hamburger {
    display: none !important;
}