/* ============================================================ TRACKING NOTA - main stylesheet Palette (Royal Blue / Powder Blue / Bone) - dipakai sebagai blok warna aksen (badge, tombol, highlight), bukan wash penuh satu halaman, biar tetap terasa "professional web app": --ink #101B33 (deep navy, headings & text) --primary #162660 (Royal Blue - primary actions/accents) --primary-dk #0E1A47 (hover/active, darker navy) --primary-soft #D0E6FD (Powder Blue - soft surfaces/highlight) --accent-bone #F1E4D1 (Bone - warm accent block, badge terkirim) --bg #F6F7FA (kanvas halaman, netral terang & bersih) --surface #FFFFFF (background card/panel/sidebar, ganti di dark mode) --line #E4E7EE (border, netral dingin lembut) --amber #C97B2E (warning/pending accent) --slate #5B6478 (muted text, netral kebiruan) TEMA GELAP/TERANG: diatur lewat atribut [data-theme] di , nilainya "light" (default) atau "dark", disimpan di cookie 'nota_theme' (lihat settings.php). ============================================================ */ :root { --ink: #101B33; --ink-solid: #101B33; --primary: #162660; --primary-dk: #0E1A47; --primary-soft: #D0E6FD; --accent-bone: #F1E4D1; --bg: #F6F7FA; --surface: #FFFFFF; --line: #E4E7EE; --amber: #C97B2E; --slate: #5B6478; --white: #FFFFFF; --danger: #C0413A; --success: #1E8E4A; --success-soft: #E1F4E7; --amber-soft: #FDF1DE; } [data-theme="dark"] { --ink: #EEF1F8; --ink-solid: #2A3B66; --primary: #4C74E0; --primary-dk: #6E92F0; --primary-soft: #1C2A4A; --accent-bone: #3A3226; --bg: #0F1320; --surface: #171C2C; --line: #2A3148; --amber: #E0A458; --slate: #9098B2; --danger: #E0645C; --success: #4FCB7C; --success-soft: #1B3624; --amber-soft: #3A3226; } [data-theme="dark"] .success-box { color: #BFD6FF; border-color: #2A3F70; } [data-theme="dark"] .error-box, [data-theme="dark"] .badge-critical, [data-theme="dark"] .badge-cancelled { background: #3A1F20; border-color: #55272A; } [data-theme="dark"] .badge-high, [data-theme="dark"] .badge-menunggu, [data-theme="dark"] .badge-unread { background: #3A3220; } [data-theme="dark"] .badge-draft { background: #232838; } [data-theme="dark"] .row-delayed { background: #2A1A1B !important; } [data-theme="dark"] .toast-icon { background: #3A1F20; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); transition: background-color .2s ease, color .2s ease; } a { text-decoration: none; color: inherit; } /* ------------------------------------------------------------ LOGIN PAGE (split screen) ------------------------------------------------------------ */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; } .login-card { display: flex; width: 100%; max-width: 980px; min-height: 560px; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 70px rgba(16, 27, 51, 0.18); } .login-visual { flex: 1.1; position: relative; background: #ffffff; color: var(--ink); padding: 48px; display: flex; flex-direction: column; justify-content: flex-end; } .login-visual::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(120deg, rgba(16,27,51,0.04) 0 2px, transparent 2px 40px); opacity: 0.5; } .login-visual .brandmark { position: relative; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; margin-bottom: auto; } .login-visual .brandmark .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(22,38,96,0.15); } .login-visual h1 { position: relative; font-size: 34px; line-height: 1.25; font-weight: 700; max-width: 380px; margin: 0 0 8px; color: var(--ink); } .login-visual p { position: relative; color: var(--slate); max-width: 360px; font-size: 14px; } .login-form-side { flex: 1; position: relative; background: radial-gradient(circle at 80% 20%, rgba(22,38,96,0.55), transparent 55%), linear-gradient(160deg, #0A1130 0%, #10204F 45%, #162660 100%); padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; } .login-form-side h2 { font-size: 28px; margin: 0 0 6px; font-weight: 700; color: var(--white); } .login-form-side .sub { color: rgba(255,255,255,0.75); font-size: 14px; margin-bottom: 32px; } .field { margin-bottom: 18px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .login-form-side .field label { color: var(--white); } .field input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line); font-size: 14px; background: var(--bg); color: var(--ink); outline: none; transition: border-color .15s ease, background .15s ease, color .15s ease; } .field input:focus { border-color: var(--primary); background: var(--surface); } .login-form-side .field input { border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: var(--white); } .login-form-side .field input::placeholder { color: rgba(255,255,255,0.45); } .login-form-side .field input:focus { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); } .login-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--slate); margin-bottom: 22px; } .login-form-side .login-row { color: rgba(255,255,255,0.75); } .login-form-side .btn-primary { background: var(--white); color: var(--ink-solid); } .login-form-side .btn-primary:hover { background: rgba(255,255,255,0.85); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 10px; padding: 12px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .1s ease, background .15s ease; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--ink-solid); color: var(--white); width: 100%; } .btn-primary:hover { background: var(--primary-dk); } .btn-forest { background: var(--primary); color: var(--white); } .btn-forest:hover { background: var(--primary-dk); } .btn-success { background: var(--success); color: var(--white); } .btn-success:hover { background: #17703A; } .btn-warning { background: var(--amber); color: var(--white); } .btn-warning:hover { background: #A9631E; } /* ------------------------------------------------------------ REVISI BOX (kotak "Perlu Revisi?" di Update Progres) ------------------------------------------------------------ */ .revisi-box { background: var(--amber-soft); border: 1.5px solid var(--amber); border-radius: 12px; padding: 18px; margin-bottom: 18px; } .revisi-box h4 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--amber); display: flex; align-items: center; gap: 8px; } .revisi-box p { margin: 0 0 12px; font-size: 13px; color: var(--slate); } .revisi-box textarea { font-size: 14px; } .revisi-status-box { background: var(--amber-soft); border: 1.5px solid var(--amber); border-radius: 12px; padding: 18px; margin-bottom: 18px; } .revisi-status-box h4 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--amber); display: flex; align-items: center; gap: 8px; } .revisi-status-box p { margin: 0 0 12px; font-size: 13px; color: var(--ink); } .btn-outline { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); } .btn-outline:hover { border-color: var(--primary); } .btn-danger { background: var(--danger); color: var(--white); } .btn-ghost { background: transparent; color: var(--slate); } .error-box { background: #FBEAE9; color: var(--danger); border: 1px solid #F3C9C6; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px; } .success-box { background: var(--primary-soft); color: var(--primary-dk); border: 1px solid #B7D6F5; border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px; } .demo-hint { margin-top: 24px; font-size: 12px; color: var(--slate); background: var(--bg); border-radius: 10px; padding: 10px 12px; } /* ------------------------------------------------------------ APP SHELL (sidebar + topbar) ------------------------------------------------------------ */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 240px; background: var(--surface); border-right: 1px solid var(--line); padding: 24px 16px; flex-shrink: 0; } .sidebar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; margin-bottom: 28px; padding: 0 8px; } .sidebar .brand .dot { width: 12px; height: 12px; border-radius: 4px; background: var(--primary); } .nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); margin: 18px 8px 8px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--ink); margin-bottom: 2px; } .nav-item:hover { background: var(--bg); } .nav-item.active { background: var(--primary-soft); color: var(--primary-dk); font-weight: 600; } .nav-badge { margin-left: auto; background: var(--danger); color: var(--white); font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 20px; } .bell-badge { position: absolute; top: -6px; right: -6px; background: var(--danger); color: var(--white); font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 20px; border: 2px solid var(--surface); } .main { flex: 1; min-width: 0; padding: 24px 32px 48px; } .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .topbar .search { flex: 1; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; color: var(--slate); font-size: 13px; } .topbar-right { display: flex; align-items: center; gap: 14px; position: relative; } .icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; } .icon-btn-plain { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 8px; background: none; border: none; color: var(--slate); cursor: pointer; transition: background .15s ease, color .15s ease; } .icon-btn-plain:hover { background: #FBEAE9; color: var(--danger); } [data-theme="dark"] .icon-btn-plain:hover { background: #3A1F20; } .profile-btn { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 30px; border: 1px solid var(--line); background: var(--surface); } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .profile-name { font-size: 13px; font-weight: 600; line-height: 1.1; } .profile-role { font-size: 11px; color: var(--slate); text-transform: capitalize; } .profile-menu { position: absolute; top: 48px; right: 0; width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 40px rgba(16,27,51,0.12); padding: 10px; z-index: 20; display: none; } .profile-menu.open { display: block; } .profile-menu .role-option { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px; border-radius: 10px; font-size: 13px; cursor: pointer; } .profile-menu .role-option:hover { background: var(--bg); } .profile-menu .role-option.current { background: var(--primary-soft); color: var(--primary-dk); font-weight: 600; } .role-option-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 10px; border-radius: 10px; font-size: 13px; cursor: pointer; background: none; border: none; font-family: inherit; color: var(--ink); text-align: left; } .role-option-btn:hover { background: var(--bg); } .role-option-btn.current { background: var(--primary-soft); color: var(--primary-dk); font-weight: 600; } .profile-menu hr { border: none; border-top: 1px solid var(--line); margin: 8px 0; } .page-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; text-transform: uppercase; } .page-sub { color: var(--slate); font-size: 13px; margin: 0 0 20px; } /* ------------------------------------------------------------ CARDS / GRID ------------------------------------------------------------ */ .grid-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; } @media (max-width: 1000px) { .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; } a.card { display: block; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } a.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 27, 51, 0.10); } a.card.accent:hover { box-shadow: 0 8px 20px rgba(16, 27, 51, 0.28); } .card .card-label { font-size: 13px; color: var(--slate); display: flex; justify-content: space-between; margin-bottom: 10px; text-transform: uppercase; } .card .card-value { font-size: 28px; font-weight: 700; color: var(--ink); } .card.accent { background: var(--primary); color: var(--white); border-color: var(--primary); } .card.accent .card-label { color: rgba(255,255,255,0.7); } .card.accent .card-value { color: var(--white); } .two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; } .panel h3 { margin: 0 0 14px; font-size: 15px; } .panel .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } /* ------------------------------------------------------------ TABLE ------------------------------------------------------------ */ .table-wrap { overflow-x: auto; } table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; } table.data-table th { text-align: left; color: var(--slate); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; } table.data-table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; } table.data-table tr:last-child td { border-bottom: none; } table.data-table tr:hover { background: var(--bg); } .row-delayed { background: #FBEAE9 !important; } /* ------------------------------------------------------------ BADGES ------------------------------------------------------------ */ .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; } .badge-low { background: var(--primary-soft); color: var(--primary-dk); } .badge-medium { background: var(--accent-bone); color: var(--primary); } .badge-high { background: #FDF1DE; color: var(--amber); } .badge-critical { background: #FBEAE9; color: var(--danger); } .badge-draft { background: #EEF0EE; color: var(--slate); } .badge-menunggu { background: #FDF1DE; color: var(--amber); } .badge-revisi { background: #FDF1DE; color: var(--amber); } .badge-terkirim { background: var(--accent-bone); color: var(--primary); } .badge-approved { background: var(--primary-soft); color: var(--primary-dk); } .badge-selesai { background: var(--success-soft); color: var(--success); } .badge-cancelled { background: #FBEAE9; color: var(--danger); } .badge-read { background: var(--primary-soft); color: var(--primary-dk); } .badge-unread { background: #FDF1DE; color: var(--amber); } /* ------------------------------------------------------------ TABS (menu Nota Dinas) ------------------------------------------------------------ */ .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 12px; } .tab { padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--slate); background: var(--surface); border: 1px solid var(--line); } .tab.active { background: var(--ink-solid); color: var(--white); border-color: var(--ink-solid); } .tab .count { opacity: .7; margin-left: 4px; } /* ------------------------------------------------------------ DETAIL TABS (Info Detail / Update Progres - halaman view nota) ------------------------------------------------------------ */ .detail-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 18px; } .detail-tab { background: none; border: none; padding: 10px 2px 12px; font-size: 14px; font-weight: 600; color: var(--slate); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; text-transform: uppercase; } .detail-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .detail-tab-panel { display: none; } .detail-tab-panel.active { display: block; } /* ------------------------------------------------------------ FORMS (buat surat) ------------------------------------------------------------ */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } } .form-grid .full { grid-column: 1 / -1; } textarea, select { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line); font-size: 14px; background: var(--bg); color: var(--ink); font-family: inherit; outline: none; transition: border-color .15s ease, background .15s ease, color .15s ease; } textarea:focus, select:focus { border-color: var(--primary); background: var(--surface); } .field input::placeholder, textarea::placeholder { color: var(--slate); opacity: 0.75; } .pill-choice { display: flex; gap: 8px; flex-wrap: wrap; } .pill-choice label { border: 1.5px solid var(--line); border-radius: 20px; padding: 8px 16px; font-size: 13px; cursor: pointer; background: var(--surface); } .pill-choice input { display: none; } .pill-choice input:checked + span {} .pill-choice label:has(input:checked) { background: var(--ink-solid); color: var(--white); border-color: var(--ink-solid); } /* ------------------------------------------------------------ TRACKING STEPS (detail tracking di dashboard) ------------------------------------------------------------ */ .steps { display: flex; flex-direction: column; gap: 0; } .step { display: flex; gap: 12px; position: relative; padding-bottom: 22px; } .step:last-child { padding-bottom: 0; } .step .dot-line { display: flex; flex-direction: column; align-items: center; } .step .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); flex-shrink: 0; margin-top: 2px; } .step.done .dot { background: var(--primary); } .step .line { flex: 1; width: 2px; background: var(--line); margin-top: 2px; } .step.done .line { background: var(--primary); } .step .step-body b { display: block; font-size: 13px; } .step .step-body span { font-size: 12px; color: var(--slate); } .progress-photo-thumb { display: block; margin-top: 8px; width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); } /* ------------------------------------------------------------ PROGRESS BAR CHART (progres per kategori & per PIC, dashboard) ------------------------------------------------------------ */ .progress-bar-item { margin-bottom: 16px; } .progress-bar-item:last-child { margin-bottom: 0; } .progress-bar-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); } .progress-bar-track { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; height: 22px; overflow: hidden; } .progress-bar-fill { height: 100%; min-width: 34px; background: var(--primary); color: var(--white); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; border-radius: 999px; transition: width 0.4s ease; white-space: nowrap; } .progress-bar-fill-alt { background: var(--success); } .progress-bar-toggle { display: block; width: 100%; background: none; border: none; padding: 0; margin: 0; text-align: left; cursor: pointer; font-family: inherit; } .progress-bar-toggle:hover .progress-bar-label span:first-child { color: var(--primary); } .chevron-icon { display: inline-block; vertical-align: middle; margin-left: 2px; color: var(--slate); transition: transform 0.2s ease; } .chevron-icon.chevron-open { transform: rotate(180deg); } .kategori-detail { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); } /* ------------------------------------------------------------ MISC ------------------------------------------------------------ */ .empty-state { text-align: center; padding: 40px 20px; color: var(--slate); font-size: 13px; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .mt-16 { margin-top: 16px; } .mb-16 { margin-bottom: 16px; } .small-muted { font-size: 12px; color: var(--slate); } /* ------------------------------------------------------------ TOAST NOTIFICATIONS (nota delayed > 48 jam) ------------------------------------------------------------ */ .toast-stack { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 320px; max-width: calc(100vw - 40px); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 27, 51, 0.14); padding: 12px 14px; transform: translateX(120%); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; } .toast.toast-in { transform: translateX(0); opacity: 1; } .toast.toast-out { transform: translateX(-30px); opacity: 0; } .toast-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #FBEAE9; color: var(--danger); display: flex; align-items: center; justify-content: center; font-size: 14px; } .toast-body { flex: 1; min-width: 0; } .toast-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; } .toast-sub { font-size: 12px; color: var(--slate); line-height: 1.4; } .toast-sub a { color: var(--primary); text-decoration: none; font-weight: 600; } .toast-sub a:hover { text-decoration: underline; } @media (max-width: 480px) { .toast-stack { left: 12px; right: 12px; top: 12px; } .toast { width: auto; } } /* ============================================================ MOBILE ONLY ADJUSTMENTS Semua rule di bawah ini hanya aktif di layar sempit (max-width 880px / 480px) lewat media query, jadi tampilan desktop yang sudah bagus di atas TIDAK berubah sama sekali. ============================================================ */ /* tombol hamburger: default disembunyikan, baru muncul di mobile */ .hamburger-btn { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); cursor: pointer; } /* overlay gelap di belakang sidebar saat dibuka di mobile */ .sidebar-overlay { display: none; } /* ------------------------------------------------------------ FIX AKAR MASALAH "kepotong/kecil semua": Flex & grid item secara default punya min-width:auto, jadi kalau isinya (teks panjang, angka, badge) lebih lebar dari kolomnya, seluruh baris/grid dipaksa melebar dan mendorong SELURUH halaman jadi overflow ke samping. Browser lalu terlihat "menyusutkan" semua elemen supaya tetap muat kelihatannya kecil dan terpotong. min-width:0 di bawah ini mengizinkan elemen untuk benar-benar menyusut/scroll di dalam kolomnya sendiri, bukan mendorong keluar. Ini aman di desktop karena di layar lebar ruang selalu cukup, jadi tidak mengubah tampilan yang sudah bagus. ------------------------------------------------------------ */ .app-shell, .main, .two-col, .grid-cards, .panel, .two-col > *, .grid-cards > *, .table-wrap, .card { min-width: 0; } html, body { overflow-x: hidden; } @media (max-width: 880px) { /* --- SIDEBAR jadi drawer yang bisa dibuka/tutup --- */ .hamburger-btn { display: flex; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; max-width: 82vw; overflow-y: auto; z-index: 110; transform: translateX(-100%); transition: transform .25s ease; } .app-shell.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 20px 60px rgba(16,27,51,0.35); } .app-shell.sidebar-open .sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(16,27,51,0.45); z-index: 100; } /* --- MAIN & TOPBAR --- */ .main { padding: 16px 16px 40px; width: 100%; } .topbar { flex-wrap: wrap; row-gap: 10px; } .topbar > form { order: 3; flex-basis: 100%; max-width: none !important; } .topbar-right { margin-left: auto; } .profile-btn .profile-name, .profile-btn .profile-role { display: none; } .profile-btn { padding: 4px; gap: 0; } .profile-menu { width: min(220px, calc(100vw - 32px)); } .page-title { font-size: 20px; } /* --- CARDS: 2 kolom, isi boleh menyusut, tidak mendorong lebar --- */ .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .card { padding: 14px; } .card .card-value { font-size: 22px; word-break: break-word; } .card .card-label { font-size: 12px; } .two-col { grid-template-columns: minmax(0, 1fr); } /* --- PANELS --- */ .panel { padding: 16px; } /* --- TABS --- */ .tabs { gap: 8px; } .detail-tabs { gap: 16px; overflow-x: auto; } /* --- LOGIN PAGE: stack visual & form, bukan side-by-side --- */ .login-wrap { padding: 16px; align-items: flex-start; padding-top: 32px; } .login-card { flex-direction: column; min-height: 0; max-width: 440px; border-radius: 20px; } .login-visual { padding: 28px 24px; flex: none; } .login-visual h1 { font-size: 22px; } .login-visual p { max-width: none; } .login-form-side { padding: 28px 24px; } /* --- flex row bawaan (grup tombol/aksi) supaya tidak sempit --- */ [style*="display:flex"] { flex-wrap: wrap; } .flex-between { flex-wrap: wrap; row-gap: 10px; } } /* ------------------------------------------------------------ TABEL DI MOBILE: diubah jadi tumpukan kartu per baris (bukan tabel yang di-scroll ke samping), supaya semua teks/kolom kebaca penuh, tidak kepotong. Header kolom otomatis jadi label kecil di depan tiap nilai (lewat data-label pada setiap ). ------------------------------------------------------------ */ @media (max-width: 760px) { .table-wrap { overflow-x: visible; } table.data-table thead { display: none; } table.data-table, table.data-table tbody, table.data-table tr, table.data-table td { display: block; width: 100%; } table.data-table tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; background: var(--surface); } table.data-table tr:hover { background: var(--surface); } table.data-table tr.row-delayed { background: #FBEAE9 !important; } table.data-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right; padding: 7px 0; border-bottom: 1px dashed var(--line); white-space: normal; word-break: break-word; } table.data-table tr:last-child { margin-bottom: 0; } table.data-table td:last-child { border-bottom: none; } table.data-table td[data-label]::before { content: attr(data-label); font-weight: 600; font-size: 12px; color: var(--slate); text-align: left; flex-shrink: 0; margin-right: auto; } /* kolom tanpa data-label (misal kolom aksi/link) rata kanan penuh */ table.data-table td:not([data-label]) { justify-content: flex-end; } table.data-table td.empty-state { display: block; text-align: center; border-bottom: none; } table.data-table tr:has(td.empty-state) { border: none; background: transparent; padding: 0; } } @media (max-width: 480px) { .grid-cards { grid-template-columns: minmax(0, 1fr); } .login-form-side h2 { font-size: 22px; } .reminder-overlay { padding: 0; } .reminder-modal { border-radius: 0; max-width: 100%; max-height: 100vh; min-height: 100vh; } .reminder-modal-head { padding: 18px 18px; } .reminder-modal-head h3 { font-size: 19px; } .reminder-modal-body { padding: 4px 18px 20px; } } /* ============================================================ POPUP INFORMASI / REMINDER (muncul di Dashboard setelah login, bisa juga dibuka manual lewat icon di topbar). Panel polos putih, TIDAK full screen — daftar informasi di dalamnya yang di-scroll. ============================================================ */ button.icon-btn { font: inherit; color: inherit; padding: 0; } .reminder-overlay { position: fixed; inset: 0; background: rgba(16, 27, 51, 0.45); display: none; align-items: center; justify-content: center; z-index: 500; padding: 24px; } .reminder-overlay.open { display: flex; } .reminder-modal { background: var(--surface); border-radius: 20px; width: 100%; max-width: 980px; min-height: 420px; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 30px 70px rgba(16, 27, 51, 0.28); overflow: hidden; } .reminder-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 26px 32px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .reminder-modal-head h3 { margin: 0; font-size: 24px; font-weight: 700; color: var(--ink); } .reminder-modal-head p { margin: 4px 0 0; font-size: 13px; color: var(--slate); } .reminder-close-btn { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: none; border: none; color: var(--slate); cursor: pointer; font-size: 20px; line-height: 1; } .reminder-close-btn:hover { background: var(--bg); color: var(--ink); } .reminder-modal-body { flex: 1; overflow-y: auto; padding: 6px 32px 26px; min-height: 60px; } .reminder-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); transition: opacity .2s ease; } .reminder-item:last-child { border-bottom: none; } .reminder-item.is-removing { opacity: 0; } .reminder-check { flex-shrink: 0; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; border: none; background: var(--line); color: var(--slate); box-shadow: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1; transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease; } .reminder-check:hover { background: #D7DBE4; } [data-theme="dark"] .reminder-check:hover { background: #333B54; } .reminder-check.is-checked { background: var(--success); color: var(--white); box-shadow: 0 0 0 3px var(--success-soft); transform: scale(1.08); } .reminder-check:disabled { cursor: default; opacity: .45; } .reminder-item-body { flex: 1; min-width: 0; } .reminder-item-text { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.5; word-break: break-word; white-space: pre-wrap; } .reminder-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .reminder-pic-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; } [data-theme="dark"] .reminder-pic-tag { color: #C9D9FB; } .reminder-item-by { font-size: 11px; color: var(--slate); } .reminder-nota-select { margin-top: 10px; } .reminder-nota-select select { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; } .reminder-nota-select select:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); } .reminder-nota-link { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: none; background: var(--primary-soft); padding: 5px 11px; border-radius: 20px; } .reminder-nota-link:hover { text-decoration: underline; } [data-theme="dark"] .reminder-nota-link { color: #C9D9FB; } .reminder-empty { text-align: center; padding: 22px 0; color: var(--slate); font-size: 13px; } /* ============================================================ PREVIEW FILE (lampiran dokumen & download PDF riwayat tracking) Klik file dulu -> tampil preview di modal -> baru bisa diunduh dari tombol di dalam modal. ============================================================ */ .file-preview-overlay { position: fixed; inset: 0; background: rgba(16, 27, 51, 0.55); display: none; align-items: center; justify-content: center; z-index: 600; padding: 24px; } .file-preview-overlay.open { display: flex; } .file-preview-modal { background: var(--surface); border-radius: 20px; width: 100%; max-width: 840px; height: 86vh; display: flex; flex-direction: column; box-shadow: 0 30px 70px rgba(16, 27, 51, 0.28); overflow: hidden; } .file-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .file-preview-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); word-break: break-word; } .file-preview-head p { margin: 3px 0 0; font-size: 12px; color: var(--slate); } .file-preview-close-btn { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: none; border: none; color: var(--slate); cursor: pointer; font-size: 20px; line-height: 1; } .file-preview-close-btn:hover { background: var(--bg); color: var(--ink); } .file-preview-body { flex: 1; min-height: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: auto; padding: 16px; } .file-preview-body iframe { width: 100%; height: 100%; border: none; border-radius: 8px; background: var(--white); } .file-preview-body img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 6px 20px rgba(16, 27, 51, 0.15); } .file-preview-fallback { text-align: center; color: var(--slate); font-size: 13.5px; padding: 30px 20px; } .file-preview-fallback .fp-icon { font-size: 42px; display: block; margin-bottom: 12px; } .file-preview-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); flex-shrink: 0; } @media (max-width: 640px) { .file-preview-overlay { padding: 0; } .file-preview-modal { border-radius: 0; max-width: 100%; height: 100vh; } }