/* =============================================================
   SISTEM APPROVAL DRAWING KONSTRUKSI - TAMPILAN
   ============================================================= */

* { box-sizing: border-box; }

:root {
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --bg: #f8fafc;
    --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

body {
    margin: 0;
    font-family: "Segoe UI", "Inter", Roboto, Arial, sans-serif;
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
}

a { color: var(--blue); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.icon { vertical-align: middle; flex-shrink: 0; }
.text-blue  { color: var(--blue); }
.text-green { color: #22c55e; }

/* -------------------------------------------------------------
   Halaman login, daftar, dan verifikasi
   ------------------------------------------------------------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px;
}
.auth-card.wide { max-width: 520px; }
.auth-card h1 { margin: 0 0 4px; font-size: 22px; display: flex; align-items: center; gap: 8px; }
.auth-card p  { margin: 0 0 24px; }
.auth-footer { margin: 20px 0 0 !important; text-align: center; font-size: 14px; }

/* -------------------------------------------------------------
   Form
   ------------------------------------------------------------- */
label { display: block; margin: 16px 0 6px; font-weight: 600; font-size: 14px; }
input[type=email], input[type=password], input[type=text], input[type=tel],
input[type=date], input[type=number], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #93c5fd; border-color: #3b82f6; }
.field-error { color: #b91c1c; font-size: 13px; margin-top: 4px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 4px; }
.form-narrow { max-width: 460px; }

/* -------------------------------------------------------------
   Tombol
   ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
}
.btn-primary { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-primary:hover { background: #1e40af; }
.btn-dark { background: #0f172a; border-color: #0f172a; color: #fff; }
.btn-dark:hover { background: #1e293b; }
.btn-light { background: #f1f5f9; border-color: var(--border); }
.btn-light:hover { background: #e2e8f0; }
.btn-block { width: 100%; margin-top: 24px; }
.btn-sm { padding: 6px 12px; font-size: 14px; }
.is-disabled { opacity: .55; cursor: not-allowed; }

/* -------------------------------------------------------------
   Pesan
   ------------------------------------------------------------- */
.alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-warning { background: #fef9c3; color: #854d0e; }
.alert-danger  { background: #fee2e2; color: #991b1b; }
.alert-info    { background: #dbeafe; color: #1e40af; }

/* -------------------------------------------------------------
   Header atas
   ------------------------------------------------------------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 36px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 21px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    line-height: 1.25;
    flex-shrink: 0;
    white-space: nowrap;
}
.brand-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

.topnav { display: flex; align-items: center; gap: 26px; flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
/* Menu banyak (Super Admin): menu pindah ke baris kedua, tetap berjajar ke samping */
.topbar-2row { flex-wrap: wrap; row-gap: 8px; }
.topbar-2row .topnav { order: 5; flex-basis: 100%; flex-wrap: wrap; overflow: visible; column-gap: 26px; row-gap: 4px; }
.topnav-item { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topnav-link {
    color: #475569;
    text-decoration: none;
    font-size: 17px;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.topnav-link:hover { color: var(--blue); }
.topnav-link.active { color: var(--blue); border-bottom-color: var(--blue); }
.topnav-link.disabled { color: #cbd5e1; cursor: not-allowed; }
.pill-green {
    background: #d1fae5;
    color: #065f46;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.topbar-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.btn-qr {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
}
.btn-qr:hover { background: #e2e8f0; }

.bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: #334155;
}
.bell:hover { background: #f1f5f9; }
.bell-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    background: #e11d48;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* Menu akun */
.user-menu { position: relative; }
.user-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
    text-align: left;
}
.user-trigger:hover { background: #f8fafc; }
.user-text { display: flex; flex-direction: column; line-height: 1.3; }
.user-text strong { font-size: 15px; }
.user-text small { font-size: 12px; color: var(--muted); }
.role-dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-purple { background: #9333ea; }
.dot-amber  { background: #f97316; }
.dot-blue   { background: var(--blue); }
.dot-green  { background: #16a34a; }
.dot-slate  { background: #1e293b; }

.user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 260px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
    overflow: hidden;
}
.user-dropdown.open { display: block; }
.dropdown-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.dropdown-head small { color: var(--muted); font-size: 12px; }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: none;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}
.dropdown-item:hover { background: #f1f5f9; }
.dropdown-item.danger { color: #be123c; }

.nav-toggle {
    display: none;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    padding: 7px;
    cursor: pointer;
    color: var(--text);
}

/* Strip keterangan role */
.role-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 36px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    color: #334155;
}
.role-badge { padding: 4px 12px; border-radius: 6px; font-weight: 600; font-size: 14px; border: 1px solid; }
.role-purple { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.role-amber  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.role-blue   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.role-green  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.role-slate  { background: #fff;    color: #0f172a; border-color: #cbd5e1; }
.role-desc { flex: 1; min-width: 260px; }
.strip-right { color: #475569; white-space: nowrap; }
.strip-right code { font-family: var(--mono); font-weight: 700; color: var(--text); font-size: 14px; }
.strip-right a { text-decoration: underline; display: inline-flex; align-items: center; gap: 4px; }
.strip-right .sep { margin: 0 6px; }

/* -------------------------------------------------------------
   Isi halaman
   ------------------------------------------------------------- */
.content { padding: 32px 36px; min-height: 60vh; }
.footer { padding: 18px 36px; font-size: 13px; color: #94a3b8; }

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.page-title { margin: 0; font-size: 28px; display: flex; align-items: center; gap: 12px; }
.page-sub { margin: 6px 0 0; color: var(--muted); font-size: 16px; }
.page-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Kartu SLA */
.sla-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 28px;
}
.sla-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px 24px 26px;
}
.sla-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 16px;
}
.sla-card-body { margin-top: 18px; display: flex; align-items: baseline; gap: 10px; font-size: 16px; }
.sla-num { font-family: var(--mono); font-size: 32px; font-weight: 700; line-height: 1; }

.sla-overdue  { color: #be123c; }
.sla-critical { color: #c2410c; }
.sla-warning  { color: #b45309; }
.sla-done     { color: #047857; }
.sla-card .sla-card-body { color: inherit; }
.sla-done .sla-num { color: #059669; }
.sla-overdue.is-hot  { background: #fff1f2; border: 2px solid #fda4af; }
.sla-critical.is-hot { background: #fff7ed; border: 2px solid #fdba74; }
.sla-warning.is-hot  { background: #fffbeb; border: 2px solid #fcd34d; }

/* Kartu umum */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 24px;
    overflow: hidden;
}
.card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-title-caps {
    padding: 22px 30px 4px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #334155;
}
.card-body { padding: 18px 30px 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-2 > .card { margin-bottom: 0; }

/* Distribusi status */
.dist-row { display: grid; grid-template-columns: 230px 1fr 110px; align-items: center; gap: 16px; padding: 8px 0; }
.dist-bar { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.dist-bar span { display: block; height: 100%; border-radius: 999px; }
.bar-info    { background: #3b82f6; }
.bar-success { background: #16a34a; }
.bar-warning { background: #eab308; }
.bar-danger  { background: #e11d48; }
.bar-neutral { background: #94a3b8; }
.dist-value { text-align: right; font-size: 14px; }

/* Kartu angka sederhana */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { background: #fff; border: 1px solid var(--border); border-left: 4px solid #94a3b8; border-radius: 0 10px 10px 0; padding: 16px 18px; }
.stat-info    { border-left-color: #3b82f6; }
.stat-success { border-left-color: #16a34a; }
.stat-warning { border-left-color: #eab308; }
.stat-danger  { border-left-color: #dc2626; }
.stat-label { font-size: 13px; color: var(--muted); }
.stat-value { font-size: 26px; font-weight: 700; margin-top: 4px; font-family: var(--mono); }

/* Tabel */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.table th { background: #f8fafc; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.table tr:last-child td { border-bottom: none; }

/* Label status */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-info    { background: #dbeafe; color: #1e40af; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef9c3; color: #854d0e; }
.badge-orange  { background: #ffedd5; color: #9a3412; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-neutral { background: #f1f5f9; color: #334155; }

.empty { padding: 32px 20px; text-align: center; color: var(--muted); font-size: 14px; }

/* Verifikasi QR */
.verify-box { margin-top: 24px; border-radius: 12px; padding: 16px; border: 1px solid; }
.verify-ok  { background: #f0fdf4; border-color: #bbf7d0; }
.verify-bad { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.verify-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; }
.verify-ok .verify-title { color: #166534; }
.verify-box .table th, .verify-box .table td { background: transparent; padding: 7px 8px; }
/* Tulisan panjang (nomor drawing, nomor stempel) dipotong ke baris baru agar tetap di dalam kotak */
.verify-box .table td { overflow-wrap: break-word; }
.verify-box .table td.mono { overflow-wrap: anywhere; }
.verify-box .table td.mono:first-child { white-space: nowrap; overflow-wrap: normal; }
.verify-box .table .badge { white-space: normal; overflow-wrap: normal; }
@media (max-width: 520px) {
    .verify-box { padding: 12px; }
    .verify-box .table th, .verify-box .table td { padding: 6px 4px; }
    .verify-box .table th { font-size: 10.5px; letter-spacing: 0; }
}

/* -------------------------------------------------------------
   Layar sedang dan kecil
   ------------------------------------------------------------- */
@media (max-width: 1600px) {
    .brand { font-size: 18px; }
    .topnav { gap: 18px; }
    .topnav-link { font-size: 15px; }
    .btn-qr span { display: none; }
}

@media (max-width: 1400px) {
    .topbar { gap: 16px; padding-left: 24px; padding-right: 24px; }
    .brand { font-size: 16px; }
    .topnav { gap: 14px; }
    .topnav-link { font-size: 14px; }
}

@media (max-width: 1200px) {
    .nav-toggle { display: inline-flex; order: 3; }
    .topbar { flex-wrap: wrap; }
    .topnav {
        display: none;
        order: 5;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }
    .topnav.open { display: flex; }
    .sla-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .topbar, .role-strip, .content, .footer { padding-left: 16px; padding-right: 16px; }
    .btn-qr span, .user-text { display: none; }
    .strip-right { white-space: normal; }
    .page-title { font-size: 21px; }
    .sla-cards { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .dist-row { grid-template-columns: 1fr; gap: 6px; }
    .dist-value { text-align: left; }
}


/* =============================================================
   TAHAP 6: DAFTAR DRAWING DAN FORM UNGGAH
   ============================================================= */
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; text-decoration: none; margin-bottom: 10px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-warning { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.btn-warning:hover { background: #d97706; }

.filters { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 30px 20px; align-items: flex-end; }
.filters label { margin-top: 0; }
.filters input, .filters select { width: auto; min-width: 210px; }

.form-card { max-width: 900px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
textarea { min-height: 100px; resize: vertical; }
input[type=file] { width: 100%; padding: 12px; border: 1px dashed #94a3b8; border-radius: 8px; background: #f8fafc; font-family: inherit; }

.route-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.route-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 400;
}
.route-option input { width: auto; margin-top: 4px; }
.route-option strong { display: block; margin-bottom: 2px; font-size: 15px; }
.route-option span { font-size: 13px; color: var(--muted); }
.route-option:has(input:checked) { border-color: var(--blue); background: #eff6ff; }

.detail-table th { width: 40%; background: transparent; text-transform: none; letter-spacing: 0; font-size: 13px; }
.note-box { padding: 14px 16px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; margin-bottom: 8px; }
.page-title .badge { font-size: 13px; }

@media (max-width: 720px) {
    .form-grid, .route-options { grid-template-columns: 1fr; }
    .filters { padding: 8px 16px 18px; }
    .filters input, .filters select { min-width: 100%; }
}



.tabs { display: flex; gap: 4px; padding: 12px 30px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tab {
    padding: 10px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: #475569;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.tab:hover { color: var(--blue); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab .count { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #e2e8f0; font-size: 12px; }
.tab.active .count { background: #dbeafe; color: #1e40af; }

.review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}
.pdf-frame { display: block; width: 100%; height: 720px; border: 0; background: #e2e8f0; }
.review-panel { position: sticky; top: 110px; }

.checklist label { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-weight: 400; font-size: 14px; }
.checklist input { width: auto; margin-top: 3px; }

.decision-buttons { display: grid; gap: 10px; margin-top: 20px; }
.decision-buttons .btn { width: 100%; }
.btn-success { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }
.btn-danger-outline { background: #fff; border-color: #fda4af; color: #be123c; }
.btn-danger-outline:hover { background: #fff1f2; }

@media (max-width: 1100px) {
    .review-layout { grid-template-columns: 1fr; }
    .review-panel { position: static; }
    .pdf-frame { height: 520px; }
}


/* =============================================================
   TAHAP 8: EVALUASI FINAL DAN PENGESAHAN AFC
   ============================================================= */
.btn-danger { background: #be123c; border-color: #be123c; color: #fff; }
.btn-danger:hover { background: #9f1239; }

/* Kartu AFC di halaman detail */
.afc-card { border: 2px solid #86efac; background: #f0fdf4; }
.afc-card-body { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.afc-card-info { flex: 1; min-width: 240px; line-height: 1.6; }
.afc-card-number { font-size: 18px; font-weight: 700; color: #166534; }
.afc-mini-stamp {
    border: 3px double #15803d;
    color: #15803d;
    border-radius: 10px;
    padding: 8px 14px;
    text-align: center;
    transform: rotate(-4deg);
}
.afc-mini-title { font-size: 24px; font-weight: 800; letter-spacing: .15em; line-height: 1; }
.afc-mini-sub { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Lembar pengesahan AFC */
.afc-page { background: #e2e8f0; padding: 24px 12px; }
.afc-toolbar { max-width: 820px; margin: 0 auto 16px; display: flex; gap: 12px; flex-wrap: wrap; }
.afc-sheet {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    padding: 48px 56px;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, .12);
}
.afc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 2px solid #0f172a; padding-bottom: 20px; }
.afc-org { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.afc-header h1 { margin: 6px 0 2px; font-size: 26px; }
.afc-stamp {
    border: 4px double #15803d;
    color: #15803d;
    border-radius: 12px;
    padding: 12px 18px;
    text-align: center;
    transform: rotate(-5deg);
    min-width: 200px;
}
.afc-stamp-title { font-size: 40px; font-weight: 800; letter-spacing: .2em; line-height: 1; }
.afc-stamp-sub { font-size: 10px; font-weight: 700; letter-spacing: .08em; margin-top: 4px; }
.afc-stamp-number { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-top: 8px; }
.afc-stamp-date { font-size: 12px; }

.afc-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.afc-table th, .afc-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.afc-table th { width: 32%; color: var(--muted); font-weight: 600; }
.afc-hash { font-size: 12px; word-break: break-all; }

.afc-sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 12px; }
.afc-sign-block { line-height: 1.6; }
.afc-signer { font-size: 20px; font-weight: 700; margin-top: 18px; border-bottom: 1px solid #0f172a; padding-bottom: 2px; display: inline-block; }
.afc-qr-block { text-align: center; }
.afc-qr { width: 140px; height: 140px; margin: 0 auto 6px; font-size: 12px; }
.afc-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; color: #334155; }
.afc-url { word-break: break-all; }

@media print {
    .no-print { display: none !important; }
    .afc-page { background: #fff; padding: 0; }
    .afc-sheet { box-shadow: none; border-radius: 0; padding: 24px; max-width: none; }
    @page { size: A4; margin: 15mm; }
}

@media (max-width: 720px) {
    .afc-sheet { padding: 24px 18px; }
    .afc-header, .afc-sign { flex-direction: column; align-items: flex-start; }
    .afc-stamp { transform: none; }
}


/* =============================================================
   KODE HASIL REVIEW (A / B / C / I)
   ============================================================= */
.code-options { display: grid; gap: 10px; }
.code-option {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 400;
}
.code-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.code-letter {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 800;
    font-size: 18px;
    color: #fff;
}
.code-text strong { display: block; font-size: 14px; }
.code-text small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.code-a .code-letter { background: #16a34a; }
.code-b .code-letter { background: #d97706; }
.code-c .code-letter { background: #be123c; }
.code-i .code-letter { background: #64748b; }
.code-a:has(input:checked) { border-color: #16a34a; background: #f0fdf4; }
.code-b:has(input:checked) { border-color: #d97706; background: #fffbeb; }
.code-c:has(input:checked) { border-color: #be123c; background: #fff1f2; }
.code-i:has(input:checked) { border-color: #64748b; background: #f8fafc; }
.code-option:has(input:focus-visible) { outline: 2px solid #93c5fd; }

.code-chip {
    display: inline-block;
    min-width: 18px;
    padding: 0 4px;
    margin-right: 2px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .7);
    font-family: var(--mono);
    font-weight: 800;
    text-align: center;
}

/* =============================================================
   TAHAP 9A: MANAJEMEN USER DAN MASTER DATA
   ============================================================= */
.check-row { display: flex; gap: 10px; align-items: center; font-weight: 400; margin-top: 18px; }
.check-row input { width: auto; }
.actions form { margin: 0; }

.master-layout { display: grid; grid-template-columns: 340px 1fr; gap: 0; align-items: start; }
.master-form { padding: 22px 26px 26px; border-right: 1px solid var(--border); }
.master-form h3 { margin: 0 0 4px; font-size: 16px; }
.master-list { padding: 8px 0; }

@media (max-width: 900px) {
    .master-layout { grid-template-columns: 1fr; }
    .master-form { border-right: none; border-bottom: 1px solid var(--border); }
}

/* =============================================================
   TAHAP 9B: PENGATURAN, AUDIT TRAIL, KOREKSI PROYEK
   ============================================================= */
.table-meta { padding: 0 30px 10px; font-size: 13px; color: var(--muted); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px; border-top: 1px solid var(--border); }

.audit-details summary { cursor: pointer; color: var(--blue); font-size: 13px; }
.audit-values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; min-width: 360px; }
.kv { margin: 4px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }


/* =============================================================
   TAHAP 10: KEPATUHAN JADWAL DAN LAPORAN
   ============================================================= */
.progress-label { display: flex; justify-content: space-between; margin-bottom: 3px; color: var(--muted); }

.report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-bottom: 18px; }
.report-card { margin-bottom: 0; }
.report-card h3 { margin: 0 0 6px; font-size: 18px; }
.report-card p { margin: 0 0 14px; }

/* Tampilan cetak laporan (PDF) */
.print-page { background: #fff; padding: 24px; }
.print-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; border-bottom: 2px solid #0f172a; padding-bottom: 14px; margin-bottom: 16px; }
.print-header h1 { margin: 4px 0; font-size: 22px; }
.print-meta { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.6; }
.print-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.print-table th, .print-table td { border: 1px solid #cbd5e1; padding: 5px 6px; text-align: left; vertical-align: top; }
.print-table th { background: #f1f5f9; font-weight: 700; }
.print-table tr { page-break-inside: avoid; }
.print-footer { margin-top: 14px; font-size: 11px; color: var(--muted); }

@media print {
    .print-page { padding: 0; }
}

/* =============================================================
   REVISI: NOMOR DRAWING OTOMATIS
   ============================================================= */
.auto-number {
    padding: 10px 12px;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 15px;
    word-break: break-all;
}

/* =============================================================
   DETAIL PROYEK (KONSTRUKSI INDUK)
   ============================================================= */
.plain-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.plain-list li { display: flex; align-items: center; gap: 8px; }


/* Catatan penerusan dari Enjiniring Unit di halaman Enjiniring Induk */
.forward-note { margin: 0 0 16px; }
.forward-note-text { margin-top: 8px; white-space: normal; }


/* Hasil verifikasi stempel review B, C, atau I */
.verify-warn { background: #fffbeb; border-color: #fcd34d; }
.verify-warn .verify-title { color: #92400e; }

/* =============================================================
   CATATAN DI BAGIAN ATAS HALAMAN DRAWING
   ============================================================= */
.notes-card .card-body { display: grid; gap: 12px; }
.note-item {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 10px;
    background: #fff;
}
.note-forward    { border-left-color: #2563eb; background: #eff6ff; }
.note-contractor { border-left-color: #d97706; background: #fffbeb; }
.note-return     { border-left-color: #be123c; background: #fff1f2; }
.note-item-title { font-weight: 700; }
.note-item-text  { margin-top: 8px; }
.note-item-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }


/* =============================================================
   KODE REVIEW PER HALAMAN
   ============================================================= */
.code-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-family: var(--mono);
    font-weight: 800;
    font-size: 13px;
    color: #fff;
    vertical-align: middle;
}
.code-box-a { background: #16a34a; }
.code-box-b { background: #d97706; }
.code-box-c { background: #be123c; }
.code-box-i { background: #64748b; }

.page-codes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.page-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    white-space: nowrap;
}

/* Form review per halaman */
.locked-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.fill-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.fill-all .btn { min-width: 34px; padding-left: 8px; padding-right: 8px; font-family: var(--mono); font-weight: 800; }
.page-review-list { display: grid; gap: 10px; }
.page-review-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #f8fafc; }
.page-review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.page-code-pick { display: flex; gap: 6px; margin-bottom: 8px; }
.pick { margin: 0; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-family: var(--mono);
    font-weight: 800;
    font-size: 15px;
    color: #334155;
}
.pick input:focus-visible + span { outline: 2px solid #93c5fd; }
.pick-a input:checked + span { background: #16a34a; border-color: #16a34a; color: #fff; }
.pick-b input:checked + span { background: #d97706; border-color: #d97706; color: #fff; }
.pick-c input:checked + span { background: #be123c; border-color: #be123c; color: #fff; }
.pick-i input:checked + span { background: #64748b; border-color: #64748b; color: #fff; }
.page-review-row .page-note { width: 100%; font-size: 13px; }
.code-legend { display: grid; gap: 4px; margin-top: 10px; }
.code-legend span { display: flex; align-items: center; gap: 8px; }

/* Status per halaman */
.page-status-card .card-header { flex-wrap: wrap; gap: 8px; }
.page-summary { font-size: 13px; font-weight: 400; color: var(--muted); }
.page-status-note { padding: 0 30px 18px; margin: 0; }
.text-success { color: #166534; font-weight: 600; }
.text-warning { color: #92400e; font-weight: 600; }
.revise-table { margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; }

/* Kode utama dan daftar temuan pada form review */
.code-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nowrap { white-space: nowrap; }
.finding-add { display: grid; grid-template-columns: 1fr 64px auto; gap: 6px; }
.finding-list { display: grid; gap: 6px; margin-top: 8px; }
.finding-row {
    display: grid; grid-template-columns: 96px 58px 1fr auto; gap: 6px; align-items: center;
    padding: 6px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; background: #fff;
}
.finding-row input, .finding-row select { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.finding-row .finding-page { font-family: var(--mono); background: #f8fafc; }
.finding-a { border-left-color: #16a34a; }
.finding-b { border-left-color: #d97706; }
.finding-c { border-left-color: #be123c; }
.finding-i { border-left-color: #64748b; }
.finding-empty { margin-top: 8px; }
.tile-summary { margin-top: 8px; color: #334155; font-weight: 600; }
.revise-table input.group-pages { width: 90px; }

/* =============================================================
   MENU SAMPING (SIDEBAR)
   ============================================================= */
:root {
    --sb-bg: #1f3a5f;
    --sb-bg-dark: #18304f;
    --sb-text: #dbe5f1;
    --sb-muted: #9fb3cc;
    --sb-width: 300px;
}

.shell { display: flex; min-height: 100vh; }
.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-area .content { flex: 1; }

.sidebar {
    width: var(--sb-width);
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-dark) 100%);
    color: var(--sb-text);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    z-index: 40;
}

.sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
    text-decoration: none;
    padding: 4px 10px 14px;
}
.sb-brand .brand-dot { background: #60a5fa; }

.sb-profile {
    text-align: center;
    padding: 18px 8px 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    margin-bottom: 14px;
}
.sb-avatar {
    width: 84px;
    height: 84px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fff;
    color: var(--sb-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 8px 20px rgba(0, 0, 0, .25);
}
.sb-name {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    word-break: break-word;
}
.sb-email { color: var(--sb-muted); font-size: 13px; margin-top: 4px; word-break: break-all; }
.sb-role {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(96, 165, 250, .18);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 600;
}

.sb-nav { display: flex; flex-direction: column; gap: 4px; }
.sb-bottom {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sb-bottom form { margin: 0; }

.sb-link {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--sb-text);
    text-decoration: none;
    font-size: 14.5px;
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s, color .15s;
}
.sb-link .icon { flex-shrink: 0; opacity: .9; }
.sb-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sb-link.active { background: #fff; color: var(--sb-bg); font-weight: 600; }
.sb-link.active .icon { opacity: 1; }
.sb-link.disabled { color: rgba(255, 255, 255, .35); cursor: not-allowed; }
.sb-label { flex: 1; }
.sb-badge {
    background: #d1fae5;
    color: #065f46;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
}
.sb-logout:hover { background: rgba(244, 63, 94, .18); color: #fecdd3; }

/* Header di area kanan */
.with-sidebar .topbar { padding: 12px 28px; gap: 16px; flex-wrap: nowrap; }
.topbar-title { font-size: 20px; font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.with-sidebar .role-strip { padding-left: 28px; padding-right: 28px; }
.with-sidebar .content { padding: 28px; }
.with-sidebar .footer { padding-left: 28px; padding-right: 28px; }

/* Layar sedang: tombol QR cukup ikon */
@media (max-width: 1400px) {
    :root { --sb-width: 275px; }
    .with-sidebar .btn-qr span { display: none; }
    .sb-avatar { width: 72px; height: 72px; font-size: 26px; }
    .sb-link { gap: 12px; padding: 10px 12px; font-size: 14px; }
}

/* Layar kecil dan HP: sidebar menjadi laci yang dibuka tombol ☰ */
@media (min-width: 1025px) {
    .with-sidebar .nav-toggle { display: none; }
}
@media (max-width: 1024px) {
    .with-sidebar .nav-toggle { display: inline-flex; order: 0; }
    .with-sidebar .sidebar {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--sb-width);
        height: 100vh;
        flex-direction: column;
        padding: 18px 14px;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 8px 0 30px rgba(0, 0, 0, .25);
    }
    .with-sidebar .sidebar.open { transform: translateX(0); }
    .with-sidebar .user-text { display: none; }
    .topbar-title { font-size: 17px; }
}

@media (max-width: 720px) {
    .with-sidebar .topbar, .with-sidebar .role-strip, .with-sidebar .content, .with-sidebar .footer { padding-left: 16px; padding-right: 16px; }
    .with-sidebar .btn-qr { display: none; }
}

@media print {
    .sidebar, .with-sidebar .topbar, .with-sidebar .role-strip { display: none !important; }
}