/* ==========================================================================
   Monitoring Amandemen Pekerjaan
   Daftar isi:
     1. Variabel dan dasar
     2. Utilitas
     3. Latar belakang
     4. Header
     5. Footer
     6. Kartu pekerjaan dan statistik
     7. Garis waktu proses
     8. Kotak kode (OTP)
     9. Responsif
    10. Kurangi gerakan (harus paling bawah)
   ========================================================================== */


/* ========== 1. VARIABEL DAN DASAR ========== */
:root {
    --mon-border: var(--bs-border-color-translucent);
    --mon-radius: 1rem;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body,
.form-control{
    font-size: 14px;
}

.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-container {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
}


/* ========== 2. UTILITAS ========== */
.min-w-0 { min-width: 0; }


/* ========== 3. LATAR BELAKANG ========== */
.bg-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(var(--bs-primary-rgb), .14), transparent 60%),
        radial-gradient(900px 500px at -5% 105%, rgba(var(--bs-info-rgb), .12), transparent 60%),
        linear-gradient(180deg, var(--bs-body-bg), var(--bs-tertiary-bg));
}

/* grid tipis seperti kertas teknik, memudar ke tepi */
.bg-scene .grid-layer {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--bs-primary-rgb), .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--bs-primary-rgb), .06) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

.bg-scene .glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .35;
}
.bg-scene .glow-1 { width: 320px; height: 320px; top: -80px; right: 8%;  background: rgba(var(--bs-primary-rgb), .35); }
.bg-scene .glow-2 { width: 280px; height: 280px; bottom: 6%; left: -60px; background: rgba(var(--bs-info-rgb), .30); }

/* ikon dokumen melayang */
.bg-scene .doc {
    position: absolute;
    fill: none;
    stroke: rgb(var(--bs-primary-rgb));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .16;
    animation: docFloat 14s ease-in-out infinite;
}
.bg-scene .doc-1 { width: 86px; top: 12%; left: 5%;  transform: rotate(-10deg); animation-duration: 13s; }
.bg-scene .doc-2 { width: 74px; top: 22%; right: 6%; transform: rotate(9deg);   animation-duration: 16s; animation-delay: -4s; }
.bg-scene .doc-3 { width: 92px; top: 58%; left: 3%;  transform: rotate(6deg);   animation-duration: 15s; animation-delay: -7s; }

@keyframes docFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -16px; }
}

/* alur AMD I - IV di bagian bawah */
.bg-scene .amd-track {
    position: absolute;
    left: 50%;
    bottom: 76px;
    translate: -50% 0;
    width: min(560px, 86vw);
    display: flex;
    align-items: center;
    opacity: .55;
}
.amd-track .node {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: rgb(var(--bs-primary-rgb));
    background: var(--bs-body-bg);
    border: 2px solid rgba(var(--bs-primary-rgb), .6);
}
.amd-track .node.done   { color: #fff; background: rgb(var(--bs-primary-rgb)); }
.amd-track .node.active { animation: nodePulse 2.4s ease-out infinite; }
.amd-track .node.todo   { border-style: dashed; }
.amd-track .line        { flex: 1; height: 2px; background: rgba(var(--bs-primary-rgb), .35); }
.amd-track .line.done   { background: rgb(var(--bs-primary-rgb)); }

@keyframes nodePulse {
    0%        { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .5); }
    70%, 100% { box-shadow: 0 0 0 14px rgba(var(--bs-primary-rgb), 0); }
}


/* ========== 4. HEADER ========== */
.app-header {
    background: rgba(var(--bs-body-bg-rgb), .82);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mon-border);
}

.sos-header { color: var(--bs-body-color); }

.sos-logo {
    width: 44px;
    height: 44px;
    padding: 6px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bs-body-bg);
    border: 1px solid var(--mon-border);
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), .12);
}
.sos-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.sos-title { min-width: 0; line-height: 1.2; }

.sos-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--bs-body-color);
}

.sos-subtitle {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-chip {
    align-items: center;
    padding: .3rem .75rem;
    border-radius: 50rem;
    font-size: .75rem;
    font-weight: 600;
    color: rgb(var(--bs-primary-rgb));
    background: rgba(var(--bs-primary-rgb), .1);
    border: 1px solid rgba(var(--bs-primary-rgb), .2);
}


/* ========== 5. FOOTER ========== */
.footer-pill {
    display: inline-block;
    max-width: 92vw;
    padding: .5rem 1rem;
    border-radius: var(--mon-radius);
    font-size: .8rem;
    line-height: 1.5;
    color: var(--bs-secondary-color);
    background: rgba(var(--bs-body-bg-rgb), .8);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid var(--mon-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
.footer-pill a       { color: var(--bs-body-color); font-weight: 600; text-decoration: none; }
.footer-pill a:hover { color: rgb(var(--bs-primary-rgb)); }


/* ========== 6. KARTU PEKERJAAN DAN STATISTIK ========== */
.work-card {
    display: block;
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
    background: var(--bs-body-bg);
    border: 1px solid var(--mon-border);
    border-radius: var(--mon-radius);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.work-card:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: rgba(var(--bs-primary-rgb), .4);
    box-shadow: 0 .5rem 1.25rem rgba(var(--bs-primary-rgb), .12);
}
.work-card.is-cancel { opacity: .75; }

.work-card .work-go {
    color: rgb(var(--bs-primary-rgb));
    transition: transform .15s;
}
.work-card:hover .work-go { transform: translateX(4px); }

.stat-tile {
    padding: .75rem 1rem;
    text-align: center;
    background: var(--bs-body-bg);
    border: 1px solid var(--mon-border);
    border-radius: .875rem;
}
.stat-tile .stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}


/* ========== 7. GARIS WAKTU PROSES ========== */
.tl { margin: 0; padding: 0; list-style: none; }

.tl-item {
    position: relative;
    padding-left: 3.25rem;
    padding-bottom: 1.5rem;
}
.tl-item:last-child { padding-bottom: 0; }

/* garis penghubung antar node */
.tl-item::before {
    content: '';
    position: absolute;
    left: 1.0625rem;
    top: 2.5rem;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color);
}
.tl-item:last-child::before { display: none; }

.tl-node {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    color: rgb(var(--bs-primary-rgb));
    background: var(--bs-body-bg);
    border: 2px solid rgba(var(--bs-primary-rgb), .6);
}
.tl-node.done   { color: #fff; background: var(--bs-success); border-color: var(--bs-success); }
.tl-node.active { animation: nodePulse 2.4s ease-out infinite; }

.tl-card {
    padding: 1rem 1.25rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--mon-border);
    border-radius: var(--mon-radius);
}


/* ========== 8. KOTAK KODE (OTP) ========== */
.otp-group {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.otp-box {
    width: 3rem;
    height: 3.5rem;
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: .75rem;
    caret-color: rgb(var(--bs-primary-rgb));
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.otp-box:focus {
    outline: 0;
    transform: translateY(-2px);
    border-color: rgb(var(--bs-primary-rgb));
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}
.otp-box.filled {
    border-color: rgba(var(--bs-primary-rgb), .6);
    background: rgba(var(--bs-primary-rgb), .06);
}

.otp-group.has-error .otp-box { border-color: var(--bs-danger); }
.otp-group.shake              { animation: otpShake .35s; }

@keyframes otpShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}


/* ========== 9. RESPONSIF ========== */
@media (max-width: 767.98px) {
    .bg-scene .doc { opacity: .12; }
    .sos-logo      { width: 40px; height: 40px; }
}

@media (max-width: 400px) {
    .otp-group { gap: .35rem; }
    .otp-box   { width: 2.5rem; height: 3rem; font-size: 1.25rem; }
}


/* ========== 10. KURANGI GERAKAN ==========
   Harus di paling bawah supaya mengalahkan semua aturan animasi di atas. */
@media (prefers-reduced-motion: reduce) {
    .bg-scene .doc,
    .amd-track .node.active,
    .tl-node.active,
    .otp-group.shake {
        animation: none;
    }
}