/* ============================================================================
jo-redesign.css — ELEVASI KOMPONEN L1 (premium navy, parity login).
Global, di-load PALING AKHIR. Bukan recolor — ini SIGNATURE: kartu premium +
garis aksen gold + tipografi tebal + focus navy ala login + tombol refined.
Presentation-only, reversibel (hapus 1 ). Fase 2 redesign 2026-06-07.
========================================================================== */
/* ---- Body font: Plus Jakarta Sans (match mockup, dulu Inter) ---- */
body, .app-content, .menu, .form-control, .btn, .card, table {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
/* ---- Tipografi: Plus Jakarta Sans, judul tebal & rapat (rasa premium) ---- */
.app-content h1, .app-content h2, .app-content h3,
.card-title, .fw-bold.fs-1, .fs-1, .fs-2 {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
letter-spacing: -0.02em;
}
.app-content h1, .app-content .fs-1 { font-weight: 800 !important; letter-spacing: -0.03em; }
.app-content h2 { font-weight: 800 !important; }
/* ---- KARTU: flat & bersih (match mockup — dulu kegedean) ---- */
.card {
border-radius: 14px !important;
border: 1px solid var(--jo-border) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px -8px rgba(20, 48, 110, 0.10) !important;
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
/* Garis aksen GOLD = OPT-IN (cuma .card.jo-accent — disiplin gold, bukan semua kartu) */
.card.jo-accent > .card-header { position: relative; }
.card.jo-accent > .card-header::after {
content: ''; position: absolute; left: 1.25rem; right: 1.25rem; top: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--jo-gold, #FBBF24), var(--jo-gold-deep, #F59E0B), transparent);
opacity: 0.6;
}
.card-header { border-bottom: 1px solid var(--jo-border) !important; }
.card-title { font-weight: 800 !important; letter-spacing: -0.01em; }
/* ---- TOMBOL: refined, navy dgn shadow halus ---- */
.btn { border-radius: 11px !important; font-weight: 700 !important; }
.btn-primary {
box-shadow: 0 8px 18px -10px rgba(30, 64, 175, 0.55) !important;
}
.btn-primary:hover { transform: translateY(-1px); }
/* ---- FORM: input ala login (radius + focus ring navy) ---- */
.form-control, .form-select {
border-radius: 11px !important;
border: 1.5px solid var(--jo-border) !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus, .form-select:focus {
border-color: var(--jo-primary) !important;
box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.12) !important;
}
/* ---- BADGE: bobot rapi ---- */
.badge { font-weight: 700; letter-spacing: 0.01em; }
/* ---- EYEBROW helper (kalau halaman pakai .jo-eyebrow / .text-uppercase label) ---- */
.jo-eyebrow, .page-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--jo-primary-bright, #3B82F6);
}
.jo-eyebrow::before, .page-eyebrow::before {
content: ''; width: 16px; height: 1px; background: var(--jo-gold-deep, #F59E0B);
}
/* ---- Angka mono kalau halaman menandai .jo-num / .tabular ---- */
.jo-num, .tabular-nums, .text-tabular {
font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
/* ============================================================================
TABEL → KARTU di HP & tablet (2026-07-14)
Akar masalah yang ditutup: tabel tanpa pembungkus overflow MENDORONG lebar
halaman → seluruh halaman geser horizontal di HP (terukur: 13 halaman, s/d
+326px). Yang punya pembungkus tetap "aman" tapi harus digeser-geser.
Dua-duanya sembuh dengan pola yang SAMA: di ≤1024px tabel berhenti jadi
tabel dan jadi tumpukan kartu.
Cara pakai: . Label kolom diisi OTOMATIS dari
oleh skrip di layouts/app.blade.php (data-label) — tak perlu tulis manual.
Jangan pasang di tabel MATRIKS (grid izin, edit gaji massal): 1000+ sel tak
akan pernah enak dipakai jadi kartu — halaman itu diberi notice layar-lebar.
========================================================================== */
@media (max-width: 1024px) {
.jo-stack, .jo-stack tbody, .jo-stack tr, .jo-stack td { display: block; width: 100%; }
/* Sebagian tabel dipaksa lebar lewat style inline (mis. min-width:1100px di
attendance/history) — itu membatalkan konversi kartu. !important di sini
mengalahkan inline style. */
.jo-stack { min-width: 0 !important; }
.jo-stack thead { display: none; }
.jo-stack { border-collapse: separate; border-spacing: 0; }
.jo-stack tr {
border: 1px solid #E2E8F0; border-radius: 12px; background: #fff;
margin-bottom: 12px; padding: 4px 2px; overflow: hidden;
}
.jo-stack tr:hover { background: #fff; }
.jo-stack td {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
text-align: right; padding: 10px 14px; border: 0;
border-bottom: 1px solid #F1F5F9; min-height: 44px;
}
.jo-stack td:last-child { border-bottom: 0; }
/* Label kolom (dari thead) */
.jo-stack td::before {
content: attr(data-label);
flex: 0 0 auto; text-align: left;
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase; color: #94A3B8;
}
.jo-stack td[data-label=""]::before { display: none; }
/* Sel aksi: tombol full-width, target sentuh 44px (HP murah + font besar) */
.jo-stack td.jo-stack-actions { flex-wrap: wrap; justify-content: stretch; }
.jo-stack td.jo-stack-actions::before { flex: 1 0 100%; margin-bottom: 4px; }
.jo-stack td.jo-stack-actions > * { flex: 1 1 auto; }
.jo-stack td.jo-stack-actions a,
.jo-stack td.jo-stack-actions button {
min-height: 44px; width: 100%; display: inline-flex;
align-items: center; justify-content: center;
}
/* Baris "belum ada data" (colspan tunggal): tetap satu blok, tanpa label */
.jo-stack tr.jo-stack-skip td { justify-content: center; text-align: center; }
.jo-stack tr.jo-stack-skip td::before { display: none; }
/* Pembungkus .table-responsive tak perlu lagi menggeser apa pun */
.table-responsive:has(.jo-stack) { overflow-x: visible; }
}
/* Deretan filter/toolbar WAJIB boleh turun baris di layar sempit.
Akar terukur: