/* ──────────────────────────────────────────
   cek-status-permohonan.css
   Append ke form-permohonan.css
────────────────────────────────────────── */

/* ── Input error ── */
.frm-input-error {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}
.frm-field-error {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .75rem;
    color: #dc2626;
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin-top: 4px;
}

/* ── Section hasil ── */
.cek-results-section {
    background: #f8fafc;
    padding-bottom: 28px;
}

/* ── Badge total ── */
.cek-total-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    background: var(--frm-blue-lt);
    color: var(--frm-blue);
    border: 1.5px solid #bfdbfe;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 800;
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

/* ══════════════════════════════════════════
   TABEL DAFTAR PERMOHONAN
══════════════════════════════════════════ */
.cek-table-wrap {
    border-radius: 10px;
    border: 1px solid var(--frm-border);
    overflow: hidden;
    background: var(--frm-white);
    box-shadow: 0 1px 6px rgba(0,43,91,.05);
}

.cek-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Plus Jakarta Sans', sans-serif;
    table-layout: fixed;
}

/* ── Thead ── */
.cek-th {
    padding: 11px 14px;
    font-size: .7rem;
    font-weight: 800;
    color: var(--frm-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    background: #f1f5f9;
    border-bottom: 2px solid var(--frm-border);
    text-align: left;
    white-space: nowrap;
}
.cek-th-center { text-align: center; }

/* ── Tbody rows ── */
.cek-tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background .12s;
}
.cek-tr:last-child { border-bottom: none; }
.cek-tr:hover { background: #f0f7ff; }

/* ── Cells ── */
.cek-td {
    padding: 11px 14px;
    vertical-align: middle;
    font-size: .8rem;
    color: var(--frm-text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.5;
}

.cek-td-num {
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--frm-muted);
    background: #fafafa;
    border-right: 1px solid #f1f5f9;
}

.cek-td-rincian {
    /* Baris panjang dipotong max 2 baris */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* Trik: -webkit-line-clamp harus pada display:-webkit-box,
   tapi <td> tidak support itu langsung. Bungkus dalam <p>. */
.cek-td-rincian p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cek-td-opd {
    font-size: .77rem;
    font-weight: 600;
    color: var(--frm-text);
    word-break: break-word;
}

.cek-td-date {
    text-align: center;
    font-size: .75rem;
    color: var(--frm-muted);
    white-space: nowrap;
}

.cek-td-status {
    text-align: center;
}

/* ── Status badges ── */
.cek-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 100px;
    font-size: .7rem;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
}
.cek-badge i { font-size: .62rem; }
.cek-badge-success { background: #dcfce7; color: #15803d; }
.cek-badge-danger  { background: #fee2e2; color: #b91c1c; }
.cek-badge-info    { background: #dbeafe; color: #1d4ed8; }
.cek-badge-warning { background: #fef9c3; color: #a16207; }
.cek-badge-neutral { background: #f1f5f9; color: #64748b; }

/* ══════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════ */
.cek-pag-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--frm-border);
}
.cek-pag-info {
    font-size: .74rem;
    color: var(--frm-muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.cek-pag-nav {
    display: flex;
    align-items: center;
    gap: 3px;
}
.cek-pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    background: var(--frm-white);
    border: 1.5px solid var(--frm-border);
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--frm-muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    line-height: 1;
}
.cek-pag-btn:hover:not(:disabled):not(.cek-pag-active) {
    background: var(--frm-blue-lt);
    border-color: #93c5fd;
    color: var(--frm-blue);
    box-shadow: 0 2px 8px rgba(37,99,235,.12);
}
.cek-pag-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
}
.cek-pag-active {
    background: var(--frm-blue) !important;
    border-color: var(--frm-blue) !important;
    color: #fff !important;
    cursor: default;
    box-shadow: 0 2px 10px rgba(37,99,235,.3) !important;
}
.cek-pag-icon {
    color: #94a3b8;
    font-size: .7rem;
}
.cek-pag-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 34px;
    font-size: .8rem;
    color: var(--frm-muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
    user-select: none;
    letter-spacing: .05em;
}

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
.cek-empty {
    text-align: center;
    padding: 52px 24px;
}
.cek-empty-icon { font-size: 2.6rem; color: #cbd5e1; margin-bottom: 14px; }
.cek-empty-title {
    font-size: .9rem; font-weight: 700;
    color: var(--frm-text); font-family: 'Plus Jakarta Sans', sans-serif; margin: 0 0 6px;
}
.cek-empty-sub {
    font-size: .78rem; color: var(--frm-muted);
    font-family: 'Plus Jakarta Sans', sans-serif; margin: 0; line-height: 1.7;
}

/* ══════════════════════════════════════════
   MODAL DETAIL
══════════════════════════════════════════ */
.cek-detail-table {
    border: 1px solid var(--frm-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.cek-detail-row {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
}
.cek-detail-row:last-child { border-bottom: none; }
.cek-detail-label {
    min-width: 170px;
    max-width: 170px;
    padding: 11px 14px;
    font-size: .77rem;
    font-weight: 700;
    color: var(--frm-muted);
    background: #f8fafc;
    font-family: 'Plus Jakarta Sans', sans-serif;
    border-right: 1px solid var(--frm-border);
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.5;
}
.cek-detail-label i { margin-top: 2px; color: var(--frm-blue); font-size: .7rem; flex-shrink: 0; }
.cek-detail-value {
    padding: 11px 14px;
    font-size: .8rem;
    color: var(--frm-text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    flex: 1;
    line-height: 1.6;
}

/* ── Progress steps ── */
.cek-progress-wrap {
    background: var(--frm-bg);
    border: 1px solid var(--frm-border);
    border-radius: 10px;
    padding: 20px;
}
.cek-progress-title {
    font-size: .7rem; font-weight: 700; color: var(--frm-muted);
    text-align: center; margin-bottom: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-transform: uppercase; letter-spacing: .07em;
}
.cek-steps { display: flex; align-items: center; justify-content: center; }
.cek-step  { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.cek-step-circle {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 800;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #e2e8f0; color: #94a3b8; border: 2px solid #cbd5e1;
    transition: background .25s, border-color .25s, color .25s;
}
.cek-step-done .cek-step-circle    { background: var(--frm-blue); border-color: var(--frm-blue); color: #fff; }
.cek-step-success .cek-step-circle { background: #16a34a; border-color: #16a34a; color: #fff; }
.cek-step-danger .cek-step-circle  { background: #dc2626; border-color: #dc2626; color: #fff; }
.cek-step-label {
    font-size: .7rem; font-weight: 700; color: var(--frm-muted);
    font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap;
}
.cek-step-done .cek-step-label    { color: var(--frm-blue); }
.cek-step-success .cek-step-label { color: #16a34a; }
.cek-step-danger .cek-step-label  { color: #dc2626; }
.cek-step-line {
    flex: 1; height: 3px; background: #e2e8f0;
    border-radius: 2px; margin: 0 8px; margin-bottom: 24px;
    min-width: 32px; transition: background .25s;
}
.cek-step-line-done { background: var(--frm-blue); }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 991px) {
    .cek-table { table-layout: auto; }
}
@media (max-width: 767px) {
    .cek-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cek-table { min-width: 580px; }
    .cek-pag-wrap { flex-direction: column; align-items: flex-start; }
    .cek-detail-label { min-width: 120px; max-width: 120px; }
    .cek-step-line { min-width: 16px; }
}
@media (max-width: 575px) {
    .cek-total-badge { display: none; }
    .cek-pag-btn { min-width: 30px; height: 30px; font-size: .72rem; }
}