/** * mobile-patch.css — Mobile-First Accessibility Patch untuk SIM PPDM * * Include di SETELAH theme.css: * * * Prioritas: touch target ≥44px, font readable ≥12px, kontras cukup. * Tidak mengubah theme.css asli — semua pakai override/specificity. */ /* ── Baseline: naikkan font minimum global ───────────────────────── */ :root { --mp-font-base: 0.9rem; } body { font-size: var(--mp-font-base); } /* ── Typography: muted text lebih kontras (WCAG 4.5:1) ────────────── */ .text-muted { color: #4b5563 !important; /* default #6b7280 terlalu muda */ } .text-secondary { color: #4b5563 !important; } /* ── Progress bars: visible on mobile ────────────────────────────── */ .progress { height: 10px !important; } .progress[style*="height:7px"] { height: 10px !important; } .progress[style*="height:6px"] { height: 10px !important; } .progress[style*="height:8px"] { height: 12px !important; } /* ── Touch targets: minimum 44px (Apple/Android guideline) ─────────── */ .btn, .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select { min-height: 44px; } /* Checkbox & radio tetap normal size */ .form-check-input { min-height: auto; width: 1.25rem; height: 1.25rem; } /* ── Scorecard domain circles: readable di mobile ─────────────────── */ .score-circle { width: 64px !important; height: 64px !important; font-size: 1.35rem !important; } .score-circle.final { width: 88px !important; height: 88px !important; font-size: 1.9rem !important; } /* Domain label typography */ .domain-label, .domain-label-raw { font-size: 0.8rem !important; white-space: normal !important; } /* ── Font sizes: naikkan minimum readable ─────────────────────────── */ small, .small { font-size: 0.8rem !important; } .list-group-item .small, small.small, .feed-item small { font-size: 0.78rem !important; } /* Badge readable */ .badge { font-size: 0.75rem; padding: 0.35em 0.65em; } /* Section titles */ .section-title { font-size: 0.9rem !important; } /* Breadcrumb readable */ .breadcrumb-bar .breadcrumb { font-size: 0.85rem !important; } /* ── Feed/Kabar Pesantren: visibility improvements ───────────────── */ .feed-avatar { width: 44px !important; height: 44px !important; font-size: 1.1rem !important; } .feed-item .text-muted { font-size: 0.78rem !important; } .feed-item .opacity-50 { opacity: 0.7 !important; /* jangan < 0.6 untuk aksesibilitas */ } /* Badge di feed tanpa shadow noise */ .feed-item .badge.rounded-pill { box-shadow: none !important; } /* ── Menu cards: readable titles ──────────────────────────────────── */ .menu-title { font-size: 0.9rem !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; line-height: 1.3; } .menu-desc { font-size: 0.72rem !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } /* ── Navbar: compact mobile ─────────────────────────────────────────── */ @media (max-width: 575.98px) { .navbar-brand span { font-size: 0.95rem !important; letter-spacing: 0.5px; } .navbar-brand img { max-height: 32px !important; } .navbar .badge { max-width: 7rem; white-space: normal; line-height: 1.3; } /* Sinkronisasi button readable */ #btnSync { padding: 0.5rem 0.75rem !important; min-height: 44px; min-width: 44px; } } /* ── Executive dashboard KPI: readable 2-kolom mobile ────────────── */ @media (max-width: 575.98px) { .card-kpi .card-body h2, .card-ews .card-body h2, .card-top .card-body h2, .card-bottom .card-body h2 { font-size: 1.75rem !important; } .card-kpi .card-body h6, .card-ews .card-body h6, .card-top .card-body h6, .card-bottom .card-body h6 { font-size: 0.7rem !important; } /* Filter form stacked */ .filter-row-mobile { flex-direction: column; gap: 0.5rem; } .filter-row-mobile .form-select { min-height: 44px; } /* Action buttons wrap nicely */ .action-buttons-row { flex-wrap: wrap; gap: 0.5rem; } .action-buttons-row .btn { min-height: 44px; font-size: 0.8rem; } } /* ── Scorecard layout: domain stack di mobile ──────────────────────── */ @media (max-width: 575.98px) { #dashboard-scorecard .row.g-0 { flex-direction: column; } #dashboard-scorecard .col-md-8, #dashboard-scorecard .col-md-4 { width: 100%; border-left: none; border-left: 0 !important; } #dashboard-scorecard .col-md-8 { border-bottom: 1px solid #e5e7eb; } /* Domain circles tetap horizontal tapi 3 kolom compact */ #dashboard-scorecard .domain-circle-wrap { display: flex; justify-content: space-around; gap: 0.5rem; } #dashboard-scorecard .domain-circle-wrap .col-4 { flex: 1; max-width: 32%; } } @media (max-width: 400px) { /* Ekstra kecil: domain circles jadi 2+1 layout */ #dashboard-scorecard .domain-circle-wrap { flex-wrap: wrap; } #dashboard-scorecard .domain-circle-wrap .col-4 { flex: 0 0 48%; max-width: 48%; } } /* ── Form inputs: padding lebih lega untuk touch ─────────────────── */ .form-control-modern, .form-control, input.form-control { padding: 0.6rem 0.85rem !important; } /* ── Modal: max-height mobile viewport ─────────────────────────────── */ .modal-content { max-height: 90vh; overflow-y: auto; } .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ── Alert: readable di mobile ────────────────────────────────────── */ .alert { font-size: 0.85rem; padding: 0.75rem 1rem; } /* ── Table: sticky header readable, horizontal scroll smooth ──────── */ .table-responsive { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .table { font-size: 0.85rem; } .table th, .table td { padding: 0.6rem 0.75rem; } /* ── Scroll margin untuk anchor navigation (navbar fixed) ─────────── */ .scroll-mt-5, [id] { scroll-margin-top: 70px; } /* ── Impersonate/Simulation banners: compact mobile ───────────────── */ .impersonate-banner, .simulation-banner { font-size: 0.8rem !important; padding: 8px 10px !important; } .impersonate-banner .btn, .simulation-banner .btn { font-size: 0.75rem !important; padding: 0.35rem 0.75rem !important; } /* ── DataTables: mobile input & pagination readable ─────────────────── */ .dataTables_wrapper .dataTables_filter input { min-height: 44px; font-size: 0.85rem; } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_paginate select { min-height: 36px; } .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 36px; min-height: 36px; line-height: 36px; font-size: 0.85rem; } /* ── Proker compliance badge: readable ─────────────────────────────── */ .compliance-badge { font-size: 0.75rem !important; padding: 0.3em 0.6em; } /* ── Tab navigation: touch-friendly ───────────────────────────────── */ .nav-tabs .nav-link, .nav-pills .nav-link { padding: 0.6rem 1rem; min-height: 44px; font-size: 0.85rem; } /* ── Notification/alert dismiss button: bigger touch target ───────── */ .btn-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* ── Tooltips: readable font ──────────────────────────────────────── */ .tooltip, .bs-tooltip-top, .bs-tooltip-bottom, .bs-tooltip-start, .bs-tooltip-end { font-size: 0.8rem !important; }