/* ============================================================ AGRODIA — Mobile Mockup Design System Palm Oil ERP Platform | Mobile App Screens Version: 1.0.0 ============================================================ */ /* ── Google Fonts ─────────────────────────────────────────── */ /* Google Fonts loaded via in HTML for non-blocking render */ /* ── CSS Variables ────────────────────────────────────────── */ :root { --bg: #081610; --bg-alt: #0C1E14; --card: #0F2419; --card-alt: #122A1D; --card-hover: #163222; --border: #1B3D28; --border-soft: #235035; --text: #E2EEE4; --text-soft: #A0BFA6; --muted: #608A68; --muted-dark: #3A5E42; --gold: #C9A84C; --gold-light: #E8C96B; --gold-dark: #956C1A; --gold-bg: rgba(201,168,76,0.08); --green: #2D7D46; --green-mid: #3A9A5A; --green-light: #4CB870; --green-bg: rgba(76,184,112,0.1); --success: #4CB870; --success-bg: rgba(76,184,112,0.12); --warning: #F0A030; --warning-bg: rgba(240,160,48,0.12); --danger: #E63946; --danger-bg: rgba(230,57,70,0.12); --info: #28B4CC; --info-bg: rgba(40,180,204,0.12); --purple: #8B5CF6; --purple-bg: rgba(139,92,246,0.12); --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; --shadow: 0 2px 16px rgba(0,0,0,0.5); --shadow-lg: 0 4px 32px rgba(0,0,0,0.6); --transition: 0.2s ease; } /* ── Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; height: 100%; } /* ── Body — Mobile-First (no desktop frame) ───────────────── */ body { height: 100%; overflow: hidden; background: var(--bg); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--green-light); text-decoration: none; } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 2px; } /* ── Screen Visibility — full-page flex column ────────────── */ .screen { display: none; } .screen.active { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background: var(--bg); } /* ── Bottom Navigation — in-flow, bagian dari flex column screen ── */ .bottom-nav { display: flex; flex-shrink: 0; background: rgba(10,26,15,0.97); border-top: 1px solid var(--border); padding: 10px 0 12px; } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; padding: 4px 2px; transition: all 0.15s; position: relative; } .nav-btn.active { color: var(--green-light); } .nav-btn.active::after { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--green-light); border-radius: 0 0 3px 3px; } .nav-btn i { font-size: 20px; } .nav-btn .nav-label { font-size: 10px; font-weight: 600; } /* ── Portal Back Link (below hero card) ───────────────────── */ .hero-portal-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--muted); text-decoration: none; margin-top: -4px; margin-bottom: 12px; transition: color 0.15s; } .hero-portal-link i { font-size: 10px; } .hero-portal-link:hover { color: var(--green-light); } /* ── Portal Back Bar — auth screens (login/pin/biometric) ── */ .portal-topbar { display: flex; align-items: center; padding: 10px 16px 6px; border-bottom: 1px solid var(--border); background: var(--bg); } .portal-back-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; transition: color 0.15s; padding: 4px 0; } .portal-back-btn i { font-size: 11px; } .portal-back-btn:hover { color: var(--green-light); } /* ── Screen Header ────────────────────────────────────────── */ .screen-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); background: #0A1A0F; flex-shrink: 0; } .screen-header .back-ic { width: 32px; height: 32px; background: var(--card-hover); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--green-light); font-size: 13px; cursor: pointer; } .screen-header .hd-title { font-size: 14px; font-weight: 700; color: var(--text); } .screen-header .hd-sub { font-size: 11px; color: var(--muted); } /* ── Screen Padding ───────────────────────────────────────── */ .screen-pad { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; padding-bottom: 20px; } .screen-pad::-webkit-scrollbar { display: none; } /* ── Common Mobile Components ─────────────────────────────── */ /* Hero banner card */ .hero-banner { background: linear-gradient(135deg, #163222 0%, #0F2419 60%, #112A1C 100%); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px; } .hero-banner .greeting { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .hero-banner .name { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; } .hero-banner .sub-info { font-size: 11px; color: var(--text-soft); margin-top: 2px; } /* Section header inside mobile screen */ .mob-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .mob-section-hdr .label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .mob-section-hdr .see-all { font-size: 11px; color: var(--green-light); font-weight: 600; } /* Stat row inside mobile */ .mob-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; } .mob-stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 8px; text-align: center; } .mob-stat .val { font-size: 16px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); } .mob-stat .lbl { font-size: 9px; color: var(--muted); margin-top: 2px; font-weight: 600; } /* Status pills */ .mob-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; } .mob-badge.green { background: var(--success-bg); color: var(--success); border: 1px solid rgba(76,184,112,0.3); } .mob-badge.warn { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(240,160,48,0.3); } .mob-badge.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(230,57,70,0.3); } .mob-badge.info { background: var(--info-bg); color: var(--info); border: 1px solid rgba(40,180,204,0.3); } .mob-badge.gold { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-dark); } /* Action button */ .mob-action-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--green), var(--green-mid)); border: none; border-radius: 12px; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition); box-shadow: 0 4px 16px rgba(45,125,70,0.4); } .mob-action-btn:hover { opacity: 0.9; transform: translateY(-1px); } .mob-action-btn.outline { background: transparent; border: 1.5px solid var(--border-soft); color: var(--text-soft); box-shadow: none; } .mob-action-btn.gold { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #000; box-shadow: 0 4px 16px rgba(201,168,76,0.3); } /* List item card */ .mob-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; transition: var(--transition); } .mob-item:hover { border-color: var(--border-soft); } .mob-item-ico { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .mob-item-ico.green { background: var(--green-bg); color: var(--success); } .mob-item-ico.warn { background: var(--warning-bg); color: var(--warning); } .mob-item-ico.danger { background: var(--danger-bg); color: var(--danger); } .mob-item-ico.info { background: var(--info-bg); color: var(--info); } .mob-item-ico.gold { background: var(--gold-bg); color: var(--gold); } .mob-item-body { flex: 1; min-width: 0; } .mob-item-title { font-size: 13px; font-weight: 600; color: var(--text); } .mob-item-sub { font-size: 11px; color: var(--muted); margin-top: 1px; } /* Progress bar (mobile) */ .mob-progress { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 6px; } .mob-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--green), var(--green-light)); transition: width 0.5s ease; } .mob-progress-fill.gold { background: linear-gradient(90deg, var(--gold-dark), var(--gold)); } .mob-progress-fill.warn { background: linear-gradient(90deg, var(--warning), #FFD580); } .mob-progress-fill.danger { background: linear-gradient(90deg, var(--danger), #FF8080); } /* Divider */ .mob-divider { height: 1px; background: var(--border); margin: 12px 0; } /* Input field (mobile) */ .mob-input { width: 100%; padding: 12px 14px; background: var(--card-alt); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 14px; outline: none; transition: var(--transition); } .mob-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(76,184,112,0.1); } .mob-input::placeholder { color: var(--muted); } /* Mobile utility */ .mob-mono { font-family: 'JetBrains Mono', monospace; } .mob-flex { display: flex; align-items: center; gap: 8px; } .mob-between { display: flex; align-items: center; justify-content: space-between; } .mob-center { display: flex; align-items: center; justify-content: center; } .mob-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mob-mt-8 { margin-top: 8px; } .mob-mt-12 { margin-top: 12px; } .mob-mt-16 { margin-top: 16px; } .mob-mb-8 { margin-bottom: 8px; } .mob-mb-12 { margin-bottom: 12px; } .mob-mb-16 { margin-bottom: 16px; } /* Text helpers — color */ .mob-text-green { color: var(--success) !important; } .mob-text-warn { color: var(--warning) !important; } .mob-text-danger { color: var(--danger) !important; } .mob-text-gold { color: var(--gold) !important; } .mob-text-muted { color: var(--muted) !important; } .mob-text-info { color: var(--info) !important; } .mob-text-purple { color: var(--purple) !important; } /* Text helpers — size */ .mob-text-xs { font-size: 10px; } .mob-text-sm { font-size: 12px; } .mob-fs-6 { font-size: 6px; } .mob-fs-7 { font-size: 7px; } .mob-fs-8 { font-size: 8px; } .mob-fs-9 { font-size: 9px; } .mob-fs-11 { font-size: 11px; } .mob-fs-13 { font-size: 13px; } .mob-fs-14 { font-size: 14px; } .mob-fs-16 { font-size: 16px; } .mob-fs-18 { font-size: 18px; } .mob-fs-20 { font-size: 20px; } .mob-fs-22 { font-size: 22px; } /* Text helpers — weight / style / align */ .mob-fw-600 { font-weight: 600; } .mob-fw-700 { font-weight: 700; } .mob-fw-800 { font-weight: 800; } .mob-italic { font-style: italic; } .mob-tr { text-align: right; } .mob-tc { text-align: center; } .mob-upper { text-transform: uppercase; } /* Flex / layout utilities */ .mob-f1 { flex: 1; } .mob-fsh0 { flex-shrink: 0; } .mob-ml-auto { margin-left: auto; } .mob-flex-gap10 { display: flex; align-items: center; gap: 10px; } .step-actions { display: flex; gap: 10px; margin-top: 8px; } .step-actions .m-btn-outline { flex: 0 0 auto; width: auto; padding: 13px 16px; margin-bottom: 0; white-space: nowrap; } .step-actions .m-btn-primary { flex: 1; width: auto; margin-bottom: 0; white-space: nowrap; } .step-actions--equal .m-btn-outline { flex: 1; } /* Margin utilities */ .mob-mt-0 { margin-top: 0; } .mob-mt-3 { margin-top: 3px; } .mob-mt-4 { margin-top: 4px; } .mob-mt-6 { margin-top: 6px; } .mob-mt-10 { margin-top: 10px; } .mob-mb-0 { margin-bottom: 0 !important; } .mob-mb-4 { margin-bottom: 4px; } .mob-mb-14 { margin-bottom: 14px; } .mob-mr-3 { margin-right: 3px; } .mob-mr-4 { margin-right: 4px; } .mob-mr-6 { margin-right: 6px; } /* Misc utilities */ .mob-resize-none { resize: none; } .mob-opacity-55 { opacity: 0.55; } /* ── Icon size shortcuts (for tab button icons) ─────────────── */ .mob-ic-tab { margin-right: 6px; font-size: 12px; } .mob-ic-xs { font-size: 9px; margin-right: 3px; } .mob-ic-muted { font-size: 10px; color: var(--muted); margin-right: 3px; } .mob-ic-green { margin-right: 4px; color: var(--green-light); } /* ── k-icon / notif-icon color variants ─────────────────────── */ .k-icon.green, .notif-icon.green { background: var(--success-bg); color: var(--success); } .k-icon.warn, .notif-icon.warn { background: var(--warning-bg); color: var(--warning); } .k-icon.info, .notif-icon.info { background: var(--info-bg); color: var(--info); } .k-icon.gold, .notif-icon.gold { background: var(--gold-bg); color: var(--gold); } .k-icon.danger, .notif-icon.danger { background: var(--danger-bg); color: var(--danger); } .k-icon.purple, .notif-icon.purple { background: var(--purple-bg); color: var(--purple); } .k-icon.muted, .notif-icon.muted { background: rgba(96,138,104,0.1); color: var(--muted); } /* ── Compound utility patterns ──────────────────────────────── */ /* Dark inner background tile */ .mob-inner-dark { background: #081610; border-radius: 10px; padding: 10px 12px; } /* Row with separator line */ .mob-row-sep { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(27,61,40,0.5); } /* Dark frosted row (map/list items) */ .mob-row-dark { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.2); border-radius: 12px; padding: 12px 14px; } /* Fixed-width label column in data rows */ .mob-col-label { font-size: 11px; font-weight: 700; color: var(--text); width: 54px; flex-shrink: 0; } .mob-col-label-muted { font-size: 11px; font-weight: 700; color: var(--muted); width: 54px; flex-shrink: 0; } /* Mono value cells */ .mob-val-mono { font-size: 11px; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; } .mob-val-mono-green { font-size: 11px; font-weight: 700; color: var(--success); font-family: 'JetBrains Mono', monospace; } /* Pulse / status dot */ .mob-pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(76,184,112,0.2); flex-shrink: 0; } .mob-dot-muted { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; } /* Category label (tiny uppercase) */ .mob-cat-label { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; margin-bottom: 3px; } .mob-sec-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } /* Big display numbers */ .mob-big-num { font-size: 28px; font-weight: 900; font-family: 'JetBrains Mono', monospace; color: var(--text); } .mob-big-num-green { font-size: 28px; font-weight: 900; font-family: 'JetBrains Mono', monospace; color: var(--success); } /* Navigation number badge */ .mob-nav-num { font-size: 22px; width: 30px; text-align: center; } /* Border color variants */ .mob-border-warn { border-color: rgba(240,160,48,0.4) !important; } .mob-border-gold { border-color: rgba(201,168,76,0.3) !important; } /* ============================================================ EXTENDED COMPONENT LIBRARY — v2.0 Extracted from all mobile mockup screens ============================================================ */ /* ── Hero Banner Inner Elements ───────────────────────────── */ .hero-banner { background: linear-gradient(135deg, #163222 0%, #0F2419 60%, #112A1C 100%); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden; } .hero-banner::before { content: ''; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(76,184,112,0.12) 0%, transparent 70%); border-radius: 50%; } .hero-greeting { font-size: 13px; color: var(--muted); margin-bottom: 4px; } .hero-name { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: 4px; } .hero-role { font-size: 11px; color: var(--green-light); font-weight: 600; display: flex; align-items: center; gap: 6px; } .hero-role span { color: var(--muted); } /* ── Badge System ─────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; } .badge-success { background: rgba(76,184,112,0.15); color: var(--success); border: 1px solid rgba(76,184,112,0.3); } .badge-warning { background: rgba(240,160,48,0.15); color: var(--warning); border: 1px solid rgba(240,160,48,0.3); } .badge-danger { background: rgba(230,57,70,0.15); color: var(--danger); border: 1px solid rgba(230,57,70,0.3); } .badge-info { background: rgba(40,180,204,0.15); color: var(--info); border: 1px solid rgba(40,180,204,0.3); } .badge-gold { background: rgba(201,168,76,0.15); color: var(--gold); border: 1px solid rgba(201,168,76,0.3); } .badge-muted { background: rgba(96,138,104,0.1); color: var(--muted); border: 1px solid rgba(96,138,104,0.2); } .badge-pending { background: rgba(96,138,104,0.1); color: #A0BFA6; border: 1px solid rgba(96,138,104,0.2); } .badge-purple { background: rgba(139,92,246,0.15); color: var(--purple); border: 1px solid rgba(139,92,246,0.3); } /* ── KPI Grid ─────────────────────────────────────────────── */ .mobile-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .mobile-kpi-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; } .m-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; position: relative; overflow: hidden; } .m-kpi .k-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-bottom: 8px; } .m-kpi .label { font-size: 10px; color: var(--muted); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .m-kpi .value { font-size: 22px; font-weight: 800; font-family: 'JetBrains Mono', 'Courier New', monospace; color: var(--text); line-height: 1; } .m-kpi .unit { font-size: 11px; color: var(--muted); margin-top: 2px; } .m-kpi .sub { font-size: 11px; margin-top: 5px; font-weight: 600; } /* ── Section Header ───────────────────────────────────────── */ .section-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .section-title { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.05em; } .section-link { font-size: 11px; color: var(--green-light); font-weight: 600; cursor: pointer; } /* ── Progress Card ────────────────────────────────────────── */ .progress-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; } .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .progress-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .progress-pct { font-size: 13px; font-weight: 800; color: var(--green-light); font-family: monospace; } .progress-bar-wrap { height: 8px; background: #163222; border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .progress-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--green), var(--green-light)); transition: width 0.5s ease; } .progress-bar-fill.warn { background: linear-gradient(90deg, var(--warning), #FFD580); } .progress-bar-fill.danger { background: linear-gradient(90deg, var(--danger), #FF8080); } .progress-bar-fill.gold { background: linear-gradient(90deg, var(--gold-dark), var(--gold)); } .progress-detail { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); } .progress-detail strong { color: var(--text); } /* ── Button System ────────────────────────────────────────── */ .m-btn-primary { width: 100%; padding: 16px; background: linear-gradient(135deg, var(--green), var(--green-mid)); border: none; border-radius: 14px; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.01em; box-shadow: 0 6px 20px rgba(45,125,70,0.35); margin-bottom: 14px; transition: all 0.15s; } .m-btn-primary:hover { filter: brightness(1.1); } .m-btn-gold { width: 100%; padding: 16px; background: linear-gradient(135deg, #B8893A, var(--gold)); border: none; border-radius: 14px; color: #0A1200; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.02em; box-shadow: 0 6px 20px rgba(201,168,76,0.35); margin-bottom: 14px; transition: all 0.15s; } .m-btn-gold:hover { filter: brightness(1.08); } .m-btn-outline { width: 100%; padding: 13px; background: transparent; border: 1px solid var(--border-soft); border-radius: 14px; color: var(--green-light); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; margin-bottom: 14px; } .m-btn-outline:hover { background: var(--card-hover); } .m-btn-outline-green { width: 100%; padding: 13px; background: transparent; border: 1px solid var(--border-soft); border-radius: 14px; color: var(--green-light); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; margin-bottom: 14px; } .m-btn-outline-green:hover { background: var(--card-hover); } .m-btn-danger { width: 100%; padding: 14px; background: linear-gradient(135deg, #C0222D, var(--danger)); border: none; border-radius: 14px; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 20px rgba(230,57,70,0.35); margin-bottom: 14px; transition: all 0.15s; } .m-btn-danger:hover { filter: brightness(1.1); } /* ── SPB Card ─────────────────────────────────────────────── */ .spb-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 10px; transition: all 0.2s; } .spb-card.active-spb { border-color: var(--green-light); box-shadow: 0 0 0 1px rgba(76,184,112,0.2); } .spb-card.selesai { opacity: 0.7; } .spb-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; } .spb-title { font-size: 13px; font-weight: 700; color: var(--text); } .spb-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .spb-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; padding: 10px; background: #081610; border-radius: 10px; } .spb-stat { text-align: center; } .spb-stat .sv { font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); display: block; } .spb-stat .sl { font-size: 9px; color: var(--muted); font-weight: 600; text-transform: uppercase; display: block; margin-top: 2px; } .spb-footer { display: flex; justify-content: space-between; align-items: center; } .spb-meta { font-size: 11px; color: var(--muted); } .spb-action-btn { padding: 7px 14px; background: linear-gradient(135deg, var(--green), var(--green-mid)); border: none; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; } /* ── Notification List ────────────────────────────────────── */ .notif-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 12px; } .notif-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .notif-body { flex: 1; } .notif-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .notif-sub { font-size: 11px; color: var(--muted); } .notif-time { font-size: 10px; color: var(--muted); white-space: nowrap; margin-top: 2px; } /* ── Alert Card ───────────────────────────────────────────── */ .alert-card { background: rgba(230,57,70,0.08); border: 1px solid rgba(230,57,70,0.25); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; gap: 10px; align-items: flex-start; } .alert-card.warn { background: rgba(240,160,48,0.08); border-color: rgba(240,160,48,0.3); } .alert-card.info { background: rgba(40,180,204,0.06); border-color: rgba(40,180,204,0.2); } .alert-icon { color: var(--danger); font-size: 18px; flex-shrink: 0; margin-top: 1px; } .alert-card.warn .alert-icon { color: var(--warning); } .alert-card.info .alert-icon { color: var(--info); } .alert-title { font-size: 12px; font-weight: 700; color: var(--text); } .alert-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ── Rekap Stats ──────────────────────────────────────────── */ .rekap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; } .rekap-stat { background: #081610; border-radius: 10px; padding: 10px 8px; text-align: center; } .rekap-stat .rv { font-size: 14px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); display: block; } .rekap-stat .rl { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; display: block; margin-top: 3px; } .rekap-stat.green { background: var(--green-bg); } .rekap-stat.green .rv { color: var(--green-light); } .rekap-stat.warning { background: var(--warning-bg); } .rekap-stat.warning .rv { color: var(--warning); } .rekap-stat.danger { background: var(--danger-bg); } .rekap-stat.danger .rv { color: var(--danger); } .rekap-stat.muted { background: var(--card-alt); } /* ── Rekap Stat Row (horizontal 2-4 items) ────────────────── */ /* Used in field-officer and similar screens for stat summaries */ .rs-row { display: flex; gap: 8px; } .rs-item { flex: 1; background: var(--card); border-radius: 10px; padding: 10px 8px; text-align: center; } .rs-val { font-size: 18px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--text); display: block; } .rs-label { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; display: block; margin-top: 3px; } /* ── Form Components ──────────────────────────────────────── */ .m-form-section { padding: 16px; } .m-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.04em; } .m-input { width: 100%; background: var(--card-hover); border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; color: var(--text); font-family: inherit; font-size: 14px; outline: none; margin-bottom: 14px; transition: border-color 0.15s; } .m-input:focus { border-color: var(--green-light); } .m-input::placeholder { color: var(--muted); } .m-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .num-ctrl { display: flex; align-items: center; margin-bottom: 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); } .num-btn { width: 44px; height: 48px; background: var(--card-hover); border: none; color: var(--green-light); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; } .num-btn:hover { background: #1E3D2A; } .num-val { flex: 1; height: 48px; background: var(--card-hover); border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 800; color: var(--text); display: flex; align-items: center; justify-content: center; } .m-selector { background: var(--card-hover); border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: border-color 0.15s; } .m-selector:hover { border-color: var(--green-light); } .sel-left .sel-title { font-size: 14px; font-weight: 700; color: var(--text); } .sel-left .sel-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .sel-chevron { color: var(--muted); font-size: 13px; } /* ── GPS Display ──────────────────────────────────────────── */ .gps-display { background: #081610; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .gps-ic { color: var(--success); font-size: 16px; } .gps-val { font-size: 12px; font-family: monospace; color: var(--text); } .gps-status { font-size: 10px; color: var(--success); font-weight: 700; margin-top: 2px; } /* ── Chart Wrapper ────────────────────────────────────────── */ .chart-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; } .chart-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; } /* ── Divider (alias) ──────────────────────────────────────── */ .divider { height: 1px; background: var(--border); margin: 14px 0; } /* ── Offline / Sync Status Banner ────────────────────────── */ .offline-banner { background: var(--warning); color: #1A0E00; font-size: 11px; font-weight: 700; text-align: center; padding: 7px 16px; letter-spacing: 0.06em; display: flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; } .offline-banner.danger { background: var(--danger); color: #fff; } .sync-ok-banner { background: rgba(76,184,112,0.15); border-bottom: 1px solid rgba(76,184,112,0.25); color: var(--success); font-size: 11px; font-weight: 700; text-align: center; padding: 6px 16px; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; gap: 6px; } /* ── Sync Queue Card ──────────────────────────────────────── */ .sync-queue-bar { display: flex; align-items: center; justify-content: space-between; background: var(--warning-bg); border: 1px solid rgba(240,160,48,0.3); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; gap: 10px; } .sync-queue-bar .sq-left { display: flex; align-items: center; gap: 8px; } .sync-queue-bar .sq-icon { font-size: 14px; color: var(--warning); } .sync-queue-bar .sq-label { font-size: 12px; font-weight: 600; color: var(--text-soft); } .sync-queue-bar .sq-sub { font-size: 10px; color: var(--muted); margin-top: 1px; } .sync-queue-bar .sq-badge { background: var(--warning); color: #1A0E00; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 20px; white-space: nowrap; } .sync-queue-bar .sq-spin { animation: spin 1.2s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Draft Auto-Save Toast ────────────────────────────────── */ .draft-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--card); border: 1px solid var(--border-soft); border-radius: 20px; padding: 7px 16px; display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: var(--text-soft); box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 200; white-space: nowrap; } .draft-toast i { color: var(--success); font-size: 11px; } /* ── Conflict Dialog ──────────────────────────────────────── */ .conflict-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 300; display: flex; align-items: flex-end; } .conflict-sheet { background: var(--card); border-radius: 20px 20px 0 0; padding: 24px 20px 36px; width: 100%; border-top: 1px solid var(--border-soft); } .conflict-handle { width: 36px; height: 4px; background: var(--border-soft); border-radius: 2px; margin: 0 auto 20px; } .conflict-icon { font-size: 28px; text-align: center; margin-bottom: 10px; } .conflict-title { font-size: 16px; font-weight: 800; color: var(--text); text-align: center; margin-bottom: 6px; } .conflict-sub { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 20px; line-height: 1.5; } .conflict-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .conflict-opt { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; transition: border-color 0.15s; } .conflict-opt:hover { border-color: var(--green); } .conflict-opt.selected { border-color: var(--green-light); } .conflict-opt-ico { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .conflict-opt-ico.local { background: var(--warning-bg); color: var(--warning); } .conflict-opt-ico.server { background: var(--green-bg); color: var(--green-light); } .conflict-opt-label { font-size: 13px; font-weight: 700; color: var(--text); } .conflict-opt-desc { font-size: 11px; color: var(--muted); margin-top: 2px; } .conflict-btn { width: 100%; padding: 14px; border-radius: var(--radius); background: var(--green); color: #fff; font-size: 14px; font-weight: 700; border: none; cursor: pointer; } .gps-banner { background: rgba(45,125,70,0.25); border-bottom: 1px solid rgba(76,184,112,0.3); color: var(--success); font-size: 11px; font-weight: 700; text-align: center; padding: 7px 16px; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; gap: 6px; } .gps-banner .pulse { width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: pulse-gps 1.5s infinite; flex-shrink: 0; } @keyframes pulse-gps { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } /* ── Pulse animation ──────────────────────────────────────── */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* ── Pass-3 utility classes ─────────────────────────────────────── */ .mob-fs-17 { font-size:17px; } .mob-opacity-65 { opacity:0.65; } .mob-text-body { color:var(--text) !important; } .k-icon.gold { background:rgba(201,168,76,0.15); color:var(--gold); } .mob-svg-full { width:100%; display:block; } /* ════════════════════════════════════════════════════════════ Asisten Divisi ════════════════════════════════════════════════════════════ */ /* asisten-divisi-specific components only — common styles live in shared/mobile.css */ /* ── Alert card ── */ .alert-card.danger { background: rgba(230,57,70,0.08); border: 1px solid rgba(230,57,70,0.3); } .alert-card.warning { background: rgba(240,160,48,0.08); border: 1px solid rgba(240,160,48,0.3); } .alert-icon.danger { color: var(--danger); } .alert-icon.warning { color: var(--warning); } /* ── Mandor progress ── */ .mandor-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; } .mandor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .mandor-name { font-size: 13px; font-weight: 700; color: var(--text); } .mandor-blok { font-size: 10px; color: var(--muted); margin-top: 2px; } .prog-row { display: flex; align-items: center; gap: 8px; } .prog-bar-wrap { flex: 1; height: 6px; background: #163222; border-radius: 3px; overflow: hidden; } .prog-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2D7D46, #4CB870); } .prog-bar-fill.warn { background: linear-gradient(90deg, #C07010, #F0A030); } .prog-pct { font-size: 11px; font-weight: 700; font-family: monospace; color: var(--text); min-width: 32px; text-align: right; } /* ── SPB cards ── */ .spb-card.warn-spb { border-color: var(--warning); box-shadow: 0 0 0 1px rgba(240,160,48,0.2); } .spb-card.inactive-spb { opacity: 0.7; } /* ── Approve button ── */ .approve-btn { padding: 8px 16px; background: linear-gradient(135deg, #2D7D46, #3A9A5A); border: none; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; letter-spacing: 0.05em; display: flex; align-items: center; gap: 5px; box-shadow: 0 3px 10px rgba(45,125,70,0.35); transition: all 0.15s; } .approve-btn:hover { filter: brightness(1.1); } /* ── Review form ── */ .review-summary { background: #081610; border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 14px; } .review-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(27,61,40,0.6); font-size: 12px; } .review-row:last-child { border-bottom: none; } .review-key { color: var(--muted); font-weight: 600; } .review-val { color: var(--text); font-weight: 800; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .warning-box { background: rgba(240,160,48,0.08); border: 1px solid rgba(240,160,48,0.3); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; display: flex; gap: 10px; align-items: flex-start; font-size: 12px; } .warning-box i { color: var(--warning); flex-shrink: 0; margin-top: 1px; } .m-textarea { width: 100%; background: #163222; border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; color: var(--text); font-family: inherit; font-size: 13px; outline: none; margin-bottom: 14px; resize: none; transition: border-color 0.15s; min-height: 80px; } .m-textarea:focus { border-color: var(--green-light); } .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; } .m-btn-approve { padding: 15px; background: linear-gradient(135deg, #2D7D46, #3A9A5A); border: none; border-radius: 14px; color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 20px rgba(45,125,70,0.35); transition: all 0.15s; letter-spacing: 0.04em; } .m-btn-approve:hover { filter: brightness(1.1); } .m-btn-tolak { padding: 15px; background: transparent; border: 2px solid var(--danger); border-radius: 14px; color: var(--danger); font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; letter-spacing: 0.04em; } .m-btn-tolak:hover { background: rgba(230,57,70,0.08); } .mandor-note { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; } .mandor-note-label { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; margin-bottom: 6px; } .mandor-note-text { font-size: 12px; color: var(--muted); font-style: italic; } /* ── Chart ── */ .chart-sub { font-size: 10px; color: var(--muted); margin-bottom: 14px; } /* ── Ranking table ── */ .rank-table { width: 100%; border-collapse: collapse; } .rank-table th { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0 8px 0; text-align: left; border-bottom: 1px solid var(--border); } .rank-table th:last-child { text-align: right; } .rank-table td { font-size: 12px; color: var(--text); padding: 10px 0; border-bottom: 1px solid rgba(27,61,40,0.5); font-weight: 600; } .rank-table td:last-child { text-align: right; } .rank-table tr:last-child td { border-bottom: none; } .rank-num { width: 22px; height: 22px; border-radius: 50%; background: #163222; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--muted); } .rank-num.top { background: rgba(201,168,76,0.2); color: var(--gold); } /* ── Summary trend card ── */ .trend-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; display: flex; gap: 14px; } .trend-stat { flex: 1; text-align: center; } .trend-val { font-size: 20px; font-weight: 900; font-family: 'JetBrains Mono', monospace; color: var(--gold); } .trend-label { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-top: 3px; } .trend-divider { width: 1px; background: var(--border); } /* ════════════════════════════════════════════════════════════ Auditor ════════════════════════════════════════════════════════════ */ /* auditor-specific components only — common styles live in shared/mobile.css */ /* ── Screen tabs ── */ /* ── Phone outer frame ── */ /* ── Dynamic Island ── */ /* ── Status bar ── */ /* ── Scrollable screen area ── */ /* ── Bottom nav ── */ /* ── Screen visibility ── */ /* ── Screen padding ── */ /* ── Hero banner ── */ .hero-banner::before { content: ''; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(76,184,112,0.12) 0%, transparent 70%); border-radius: 50%; } /* ── KPI cards ── */ /* ── Progress card ── */ /* ── Primary / Gold button ── */ /* ── Section header ── */ /* ── Badge ── */ /* ── Screen header ── */ /* ── Form styles ── */ /* ── GPS display ── */ /* ── Info text ── */ .info-text { text-align: center; font-size: 11px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding: 10px; background: rgba(40,180,204,0.06); border-radius: 8px; border: 1px solid rgba(40,180,204,0.15); } .info-text i { color: var(--info); } /* ── Divider ── */ /* ── Notif / card item ── */ /* ── ISPO Prinsip tabs ── */ .prinsip-tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; } .prinsip-tabs::-webkit-scrollbar { display: none; } .p-tab { padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all 0.15s; display: flex; align-items: center; gap: 4px; } .p-tab.done { background: rgba(76,184,112,0.12); color: var(--success); border-color: rgba(76,184,112,0.3); } .p-tab.active-p { background: rgba(201,168,76,0.15); color: var(--gold); border-color: rgba(201,168,76,0.4); } .p-tab.pending { opacity: 0.5; } /* ── Criteria form card ── */ .kriteria-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; } .kriteria-id { font-size: 10px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .kriteria-text { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.5; margin-bottom: 14px; } /* ── Radio result buttons ── */ .result-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .result-opt { border: 2px solid var(--border); border-radius: 10px; padding: 10px 8px; text-align: center; cursor: pointer; transition: all 0.15s; font-size: 12px; font-weight: 700; background: #081610; } .result-opt.sesuai.sel { border-color: var(--success); background: rgba(76,184,112,0.12); color: var(--success); } .result-opt.minor.sel { border-color: var(--warning); background: rgba(240,160,48,0.12); color: var(--warning); } .result-opt.major.sel { border-color: var(--danger); background: rgba(230,57,70,0.12); color: var(--danger); } .result-opt.na.sel { border-color: var(--muted); background: rgba(96,138,104,0.12); color: var(--muted); } .result-opt:not(.sel) { color: var(--muted); } /* ── Photo thumbnails ── */ .photo-row { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; } .photo-thumb { width: 72px; height: 72px; border-radius: 10px; background: #163222; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; } .photo-thumb-placeholder { font-size: 22px; color: var(--muted); } .photo-add-btn { width: 72px; height: 72px; border-radius: 10px; border: 2px dashed #235035; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--green-light); font-size: 10px; font-weight: 700; cursor: pointer; gap: 4px; transition: all 0.15s; } .photo-add-btn:hover { background: #163222; } .photo-add-btn i { font-size: 20px; } /* ── Nav pagination ── */ .nav-pagination { display: flex; gap: 10px; margin-top: 4px; } .nav-pagination button { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; } .nav-pagination button:hover { background: #163222; } .nav-pagination button.next-btn { background: linear-gradient(135deg, #2D7D46, #3A9A5A); border-color: transparent; box-shadow: 0 4px 12px rgba(45,125,70,0.3); } /* ── Temuan card ── */ .temuan-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; } .temuan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; } .temuan-title { font-size: 12px; font-weight: 700; color: var(--text); } .temuan-ref { font-size: 10px; color: var(--muted); margin-top: 2px; } .temuan-desc { font-size: 11px; color: var(--muted); line-height: 1.5; } /* ── Tipe finding large radio ── */ .tipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .tipe-opt { border: 2px solid var(--border); border-radius: 12px; padding: 14px 6px; text-align: center; cursor: pointer; transition: all 0.15s; background: #081610; } .tipe-opt .tipe-icon { font-size: 22px; margin-bottom: 6px; display: block; } .tipe-opt .tipe-label { font-size: 11px; font-weight: 700; color: var(--muted); } .tipe-opt.observasi.sel { border-color: var(--info); background: rgba(40,180,204,0.10); } .tipe-opt.observasi.sel .tipe-label { color: var(--info); } .tipe-opt.minor.sel { border-color: var(--warning); background: rgba(240,160,48,0.10); } .tipe-opt.minor.sel .tipe-label { color: var(--warning); } .tipe-opt.major.sel { border-color: var(--danger); background: rgba(230,57,70,0.10); } .tipe-opt.major.sel .tipe-label { color: var(--danger); } /* ── Dokumen list ── */ .doc-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; } .doc-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .doc-body { flex: 1; } .doc-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .doc-sub { font-size: 10px; color: var(--muted); } .doc-status { font-size: 10px; font-weight: 700; text-align: right; white-space: nowrap; } /* ── Upload area ── */ .upload-area { border: 2px dashed #235035; border-radius: 14px; padding: 24px 16px; text-align: center; margin-bottom: 14px; background: rgba(45,125,70,0.04); cursor: pointer; transition: all 0.15s; } .upload-area:hover { border-color: var(--green-light); background: rgba(45,125,70,0.08); } .upload-area .u-icon { font-size: 32px; color: var(--green-light); margin-bottom: 8px; display: block; } .upload-area .u-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .upload-area .u-sub { font-size: 11px; color: var(--muted); } /* ── Sync status bar ── */ .sync-bar { background: rgba(40,180,204,0.08); border: 1px solid rgba(40,180,204,0.2); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; } .sync-bar .sb-left { font-size: 12px; font-weight: 700; color: var(--text); } .sync-bar .sb-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } /* ── Category filter tabs ── */ .cat-tabs { display: flex; gap: 6px; margin-bottom: 14px; } .cat-tab { padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer; transition: all 0.15s; } .cat-tab.active { background: var(--green); border-color: var(--green); color: #fff; } /* ── Jadwal item ── */ .jadwal-item { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--green-light); border-radius: 0 12px 12px 0; padding: 10px 14px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } .jadwal-body .j-day { font-size: 10px; font-weight: 700; color: var(--gold); text-transform: uppercase; margin-bottom: 3px; } .jadwal-body .j-title { font-size: 12px; font-weight: 700; color: var(--text); } .jadwal-body .j-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } /* ── Assignment card ── */ .assignment-card { background: linear-gradient(135deg, #163222, #0F2419); border: 1px solid rgba(201,168,76,0.25); border-radius: 14px; padding: 16px; margin-bottom: 14px; } .assignment-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 4px; letter-spacing: -0.01em; } .assignment-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .assignment-meta i { color: var(--gold); font-size: 10px; } /* ── Temuan summary grid ── */ .temuan-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .ts-item { background: #081610; border-radius: 10px; padding: 10px 8px; text-align: center; } .ts-val { font-size: 20px; font-weight: 800; font-family: monospace; display: block; margin-bottom: 3px; } .ts-label { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; } /* auditor pass-3 */ .app-icon-box { width:36px; height:36px; background:linear-gradient(135deg,#C9A84C,#E8C96B); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; } .app-title { font-size:16px; font-weight:800; color:var(--text); letter-spacing:-0.02em; } .ts-item-green { border:1px solid rgba(76,184,112,0.2); } .ts-item-warn { border:1px solid rgba(240,160,48,0.2); } .ts-item-muted { border:1px solid rgba(96,138,104,0.2); } .jadwal-item-done { border-left-color:var(--muted) !important; opacity:0.75; } .jadwal-item-skip { border-left-color:var(--muted) !important; opacity:0.6; } .info-box-gold { background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.2); border-radius:12px; padding:12px 14px; margin-bottom:14px; } .photo-placeholder { width:100%; height:100%; background:linear-gradient(135deg,#163222,#0F2419); display:flex; align-items:center; justify-content:center; font-size:24px; } .photo-placeholder-alt { width:100%; height:100%; background:linear-gradient(135deg,#1A2E20,#0F2419); display:flex; align-items:center; justify-content:center; font-size:24px; } .m-select-native { appearance:auto; padding:12px 14px; } .doc-icon-green { background:rgba(76,184,112,0.12) !important; } .doc-icon-info { background:rgba(40,180,204,0.12) !important; } .doc-icon-gold { background:rgba(201,168,76,0.12) !important; } .doc-icon-warn { background:rgba(240,160,48,0.12) !important; } .audit-note-sm { font-size:10px; color:var(--muted); text-align:center; } /* ════════════════════════════════════════════════════════════ Driver ════════════════════════════════════════════════════════════ */ /* driver-specific components only — common styles live in shared/mobile.css */ .pks-card { background: rgba(240,160,48,0.08); border: 1px solid rgba(240,160,48,0.3); border-radius: 14px; padding: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .pks-ic { width: 40px; height: 40px; background: rgba(240,160,48,0.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .pks-body { flex: 1; } .pks-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .pks-sub { font-size: 11px; color: var(--muted); } .pks-est { font-size: 12px; font-weight: 700; color: var(--warning); } /* ── Notifications ── */ .notif-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 12px; } .notif-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .notif-body { flex: 1; } .notif-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .notif-sub { font-size: 11px; color: var(--muted); } .notif-time { font-size: 10px; color: var(--muted); white-space: nowrap; margin-top: 2px; } /* ── Screen header ── */ .screen-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); background: #0A1A0F; flex-shrink: 0; } .screen-header .back-ic { width: 32px; height: 32px; background: #163222; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--green-light); font-size: 13px; cursor: pointer; } .screen-header .hd-title { font-size: 14px; font-weight: 700; color: var(--text); } .screen-header .hd-sub { font-size: 11px; color: var(--muted); } /* ── Divider ── */ .divider { height: 1px; background: var(--border); margin: 14px 0; } .divider-text { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; } .divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── QR Camera Simulator ── */ .qr-finder { position: relative; width: 100%; height: 220px; background: #030A05; border-radius: 14px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .qr-finder-inner { width: 160px; height: 160px; position: relative; } .qr-corner { position: absolute; width: 28px; height: 28px; } .qr-corner.tl { top: 0; left: 0; border-top: 3px solid var(--gold); border-left: 3px solid var(--gold); border-radius: 4px 0 0 0; } .qr-corner.tr { top: 0; right: 0; border-top: 3px solid var(--gold); border-right: 3px solid var(--gold); border-radius: 0 4px 0 0; } .qr-corner.bl { bottom: 0; left: 0; border-bottom: 3px solid var(--gold); border-left: 3px solid var(--gold); border-radius: 0 0 0 4px; } .qr-corner.br { bottom: 0; right: 0; border-bottom: 3px solid var(--gold); border-right: 3px solid var(--gold); border-radius: 0 0 4px 0; } .qr-scan-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: scan-anim 2s ease-in-out infinite; top: 0; } @keyframes scan-anim { 0% { top: 0; opacity: 1; } 50% { top: 156px; opacity: 0.7; } 100% { top: 0; opacity: 1; } } .qr-label { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 11px; color: rgba(201,168,76,0.7); font-weight: 600; letter-spacing: 0.05em; } .qr-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .qr-btn-small { padding: 10px 12px; background: #163222; border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; } .qr-btn-small.active-scan { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.08); } .qr-btn-small:hover { background: #1E3D2A; } /* ── Tiket Info Card ── */ .tiket-card { background: rgba(76,184,112,0.06); border: 1px solid rgba(76,184,112,0.25); border-radius: 14px; padding: 14px; margin-bottom: 14px; } .tiket-card .tc-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid rgba(76,184,112,0.1); } .tiket-card .tc-row:last-child { border-bottom: none; padding-bottom: 0; } .tiket-card .tc-label { font-size: 11px; color: var(--muted); font-weight: 600; } .tiket-card .tc-val { font-size: 12px; font-weight: 700; color: var(--text); text-align: right; } /* ── Ritase list ── */ .ritase-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; } .ritase-num { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; font-family: monospace; flex-shrink: 0; } .ritase-body { flex: 1; } .ritase-title { font-size: 12px; font-weight: 700; color: var(--text); } .ritase-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ── SVG Map area ── */ .map-wrap { background: #0A1800; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; position: relative; } .map-zoom-btns { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 10; } .map-zoom-btn { width: 28px; height: 28px; background: rgba(10,26,15,0.9); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .map-zoom-btn:hover { border-color: var(--green-light); color: var(--green-light); } /* ── Road alert card ── */ .road-alert { background: rgba(240,160,48,0.08); border: 1px solid rgba(240,160,48,0.3); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; display: flex; gap: 10px; align-items: flex-start; } .road-alert-ic { color: var(--warning); font-size: 16px; flex-shrink: 0; margin-top: 1px; } .road-alert-title { font-size: 12px; font-weight: 700; color: var(--text); } .road-alert-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ── Collapsible report form ── */ .collapsible-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; transition: all 0.15s; } .collapsible-header:hover { background: #163222; } .collapsible-header .ch-title { font-size: 12px; font-weight: 700; color: var(--text); } .collapsible-header .ch-ic { color: var(--muted); font-size: 12px; transition: transform 0.2s; } .collapsible-header.open .ch-ic { transform: rotate(180deg); } .collapsible-body { background: var(--card); border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; padding: 12px 14px 14px; margin-bottom: 8px; display: none; } .collapsible-body.open { display: block; } .m-select { width: 100%; background: #163222; border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; color: var(--text); font-family: inherit; font-size: 13px; outline: none; margin-bottom: 10px; -webkit-appearance: none; appearance: none; cursor: pointer; } .m-btn-sm-green { padding: 10px 16px; background: linear-gradient(135deg, #2D7D46, #3A9A5A); border: none; border-radius: 10px; color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; } /* ── Upah / Rekap cards ── */ .upah-card { background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.25); border-radius: 14px; padding: 16px; margin-bottom: 14px; } .upah-card .uc-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(201,168,76,0.1); } .upah-card .uc-row:last-child { border-bottom: none; padding-bottom: 0; } .upah-card .uc-label { font-size: 12px; color: var(--muted); font-weight: 500; } .upah-card .uc-val { font-size: 13px; font-weight: 700; color: var(--text); } .upah-card .uc-val.big { font-size: 18px; font-weight: 800; color: var(--gold); font-family: monospace; } .upah-card .uc-val.est { font-size: 11px; color: var(--muted); font-weight: 600; } /* ── Rekap bulan stats ── */ .rekap-stats-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } /* ── Riwayat hari list ── */ .riwayat-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } .riwayat-left .ri-date { font-size: 12px; font-weight: 700; color: var(--text); } .riwayat-left .ri-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .riwayat-right { text-align: right; } .riwayat-right .ri-val { font-size: 13px; font-weight: 800; color: var(--gold); font-family: monospace; } .riwayat-right .ri-sub2 { font-size: 10px; color: var(--muted); margin-top: 2px; } /* ── Chart container ── */ .chart-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; } .chart-box .cb-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; } /* ── Rute info card ── */ .rute-info { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .rute-info .ri-ic { width: 40px; height: 40px; background: rgba(76,184,112,0.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--success); font-size: 18px; flex-shrink: 0; } .rute-info .ri-body { flex: 1; } .rute-info .ri-title { font-size: 13px; font-weight: 700; color: var(--text); } .rute-info .ri-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .rute-info .ri-meta { font-size: 11px; color: var(--green-light); font-weight: 600; margin-top: 4px; } /* ── PKS live status inline ── */ .pks-live { background: rgba(240,160,48,0.06); border: 1px solid rgba(240,160,48,0.2); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--warning); } .pks-live i { font-size: 11px; } /* ── Profil card ── */ .profil-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #2D7D46, #C9A84C); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff; margin: 0 auto 12px; border: 3px solid var(--gold); } .profil-banner { background: linear-gradient(135deg, #163222, #0F2419); border: 1px solid #235035; border-radius: 16px; padding: 20px; margin-bottom: 14px; text-align: center; } .profil-name { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 4px; } .profil-role { font-size: 12px; color: var(--green-light); font-weight: 600; } .profil-id { font-size: 11px; color: var(--muted); margin-top: 3px; } .profil-row { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; } .profil-row .pr-ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .profil-row .pr-label { font-size: 10px; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-bottom: 2px; } .profil-row .pr-val { font-size: 13px; font-weight: 700; color: var(--text); } .profil-row .pr-ic.green { background: rgba(76,184,112,0.12); color: var(--green-light); } .profil-row .pr-ic.gold { background: rgba(201,168,76,0.12); color: var(--gold); } .profil-row .pr-ic.blue { background: rgba(52,152,219,0.12); color: #3498DB; } .profil-row .pr-ic.red { background: rgba(192,57,43,0.12); color: var(--danger); } .profil-row .pr-ic.muted { background: rgba(255,255,255,0.06); color: var(--muted); } .profil-action-btn { width:100%; padding:13px 16px; background:var(--card); border:1px solid var(--border); border-radius:12px; color:var(--text); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:10px; margin-bottom:8px; transition:all 0.15s; } .profil-action-btn.danger { color:var(--danger); border-color:rgba(192,57,43,0.3); background:rgba(192,57,43,0.04); } .profil-spacer { height: 16px; } /* driver pass-3 */ .progress-title-plain { text-transform:none; font-size:13px; color:var(--text); margin-bottom:2px; } .value-fs17 { font-size:17px; } .m-kpi-green-border { border-color:rgba(76,184,112,0.3) !important; } .tiket-id-text { font-size:13px; font-weight:800; color:var(--text); } .sep-pipe { margin:0 6px; color:var(--border); } .mob-svg-map { width:100%; height:240px; display:block; } .form-report-panel { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:14px; } .gps-loc-box { background:#081610; border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin-bottom:10px; display:flex; align-items:center; gap:8px; } .photo-upload-btn { width:100%; padding:10px; background:#163222; border:1px dashed var(--border); border-radius:10px; color:var(--muted); font-family:inherit; font-size:12px; cursor:pointer; margin-bottom:12px; display:flex; align-items:center; justify-content:center; gap:6px; } .chart-wrap-130 { height:130px; position:relative; } .upah-section-header { font-size:12px; font-weight:700; color:var(--gold); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.05em; } .chart-wrap-150 { height:150px; position:relative; } /* ════════════════════════════════════════════════════════════ Estate Manager ════════════════════════════════════════════════════════════ */ /* estate-manager-specific components only — common styles live in shared/mobile.css */ /* ── Alert cards ── */ .alert-card.danger { background: rgba(230,57,70,0.08); border: 1px solid rgba(230,57,70,0.25); } .alert-card.warning { background: rgba(240,160,48,0.08); border: 1px solid rgba(240,160,48,0.25); } .alert-card.info { background: rgba(40,180,204,0.06); border: 1px solid rgba(40,180,204,0.2); } .alert-body { flex: 1; } /* ── Divisi progress rows ── */ .divisi-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .divisi-label { font-size: 11px; font-weight: 700; color: var(--text); width: 44px; flex-shrink: 0; } .divisi-bar { flex: 1; height: 8px; background: #163222; border-radius: 4px; overflow: hidden; } .divisi-fill { height: 100%; border-radius: 4px; } .divisi-pct { font-size: 11px; font-weight: 800; font-family: monospace; width: 38px; text-align: right; flex-shrink: 0; } /* ── Buttons ── */ .m-btn-approve { flex: 1; padding: 13px; background: linear-gradient(135deg, #C9A84C, #E8C96B); border: none; border-radius: 12px; color: #1A1000; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 4px 12px rgba(201,168,76,0.3); transition: all 0.15s; } .m-btn-small { padding: 7px 14px; background: linear-gradient(135deg, #2D7D46, #3A9A5A); border: none; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.15s; } /* ── Approval card ── */ .approval-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 15px; margin-bottom: 10px; transition: all 0.2s; cursor: pointer; } .approval-card:hover { border-color: rgba(201,168,76,0.3); } .approval-card.expanded { border-color: rgba(201,168,76,0.4); background: #112A1D; } .appr-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .appr-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .appr-sub { font-size: 11px; color: var(--muted); } .appr-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .appr-meta .appr-pengaju { font-size: 11px; color: var(--muted); } .appr-footer { display: flex; justify-content: space-between; align-items: center; } /* ── Approval detail (inline expand) ── */ .appr-detail { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .appr-detail.open { display: block; } .rincian-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(27,61,40,0.5); font-size: 12px; } .rincian-row:last-child { border-bottom: none; } .rincian-label { color: var(--muted); } .rincian-val { font-weight: 700; color: var(--text); font-family: monospace; font-size: 12px; } .rincian-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: rgba(201,168,76,0.08); border-radius: 8px; margin: 10px 0; border: 1px solid rgba(201,168,76,0.2); } /* ── GIS Map SVG ── */ .gis-container { background: #050E08; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; position: relative; } .gis-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #0A1A0F; border-bottom: 1px solid var(--border); } .gis-toolbar select { background: #163222; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 12px; padding: 6px 10px; outline: none; } .blok-popup { position: absolute; bottom: 14px; left: 14px; right: 14px; background: rgba(10,26,15,0.96); border: 1px solid rgba(230,57,70,0.4); border-radius: 12px; padding: 12px 14px; backdrop-filter: blur(10px); display: flex; align-items: center; gap: 10px; } .popup-body { flex: 1; } .popup-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .popup-sub { font-size: 11px; color: var(--muted); } /* ── GIS Legend ── */ .gis-legend { display: flex; gap: 14px; padding: 8px 14px; background: #0A1A0F; border-top: 1px solid var(--border); } .legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); font-weight: 600; } .legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } /* ── GIS Stats ── */ .gis-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .gs-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 8px; text-align: center; } .gs-val { font-size: 20px; font-weight: 800; font-family: monospace; display: block; margin-bottom: 3px; } .gs-label { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; } /* ── Laporan tabel kinerja ── */ .kinerja-tbl { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; } .kinerja-row { display: flex; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--border); gap: 10px; } .kinerja-row:last-child { border-bottom: none; } .kinerja-div { font-size: 13px; font-weight: 700; color: var(--text); width: 50px; flex-shrink: 0; } .kinerja-bar { flex: 1; height: 7px; background: #163222; border-radius: 4px; overflow: hidden; } .kinerja-fill { height: 100%; border-radius: 4px; } .kinerja-pct { font-size: 12px; font-weight: 800; font-family: monospace; width: 36px; text-align: right; flex-shrink: 0; } /* ── Stats summary row ── */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; } .stat-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 10px; text-align: center; } .stat-val { font-size: 16px; font-weight: 800; font-family: monospace; color: var(--text); display: block; } .stat-label { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-top: 3px; display: block; } /* ── Info text ── */ .info-text { text-align: center; font-size: 11px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 12px; padding: 10px; background: rgba(40,180,204,0.06); border-radius: 8px; border: 1px solid rgba(40,180,204,0.15); } .info-text i { color: var(--info); } /* estate-manager pass-3 */ .m-kpi-gold { border-color:rgba(201,168,76,0.5) !important; background:rgba(201,168,76,0.06) !important; } .k-icon-gold { background:rgba(201,168,76,0.15); color:var(--gold); } .value-gold-xl { color:var(--gold); font-size:28px; } .gs-item-green { border-color:rgba(76,184,112,0.2) !important; } .gs-item-warn { border-color:rgba(240,160,48,0.2) !important; } .gs-item-danger { border-color:rgba(230,57,70,0.2) !important; } .legend-dot-normal { background:#2D7D46; } .legend-dot-warn { background:#F0A030; } .legend-dot-danger { background:#E63946; } .map-svg-dark { width:100%; display:block; background:#060F08; } .alert-icon-danger { width:32px; height:32px; background:rgba(230,57,70,0.15); border:2px solid var(--danger); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; } .m-btn-small-xs { white-space:nowrap; font-size:10px !important; padding:6px 10px !important; } .period-selector { flex:1; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 14px; display:flex; align-items:center; gap:8px; } .filter-btn-box { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 12px; cursor:pointer; } .kinerja-row-hdr { background:rgba(76,184,112,0.04); } .kinerja-label-col { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; width:50px; flex-shrink:0; } /* ════════════════════════════════════════════════════════════ Mandor ════════════════════════════════════════════════════════════ */ /* mandor-specific components only — common styles live in shared/mobile.css */ /* ── BJR auto calc ── */ .bjr-display { background: rgba(76,184,112,0.08); border: 1px solid rgba(76,184,112,0.25); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; } .bjr-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; } .bjr-val { font-size: 20px; font-weight: 800; font-family: monospace; color: var(--success); } /* ── Info text ── */ .info-text { text-align: center; font-size: 11px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding: 10px; background: rgba(40,180,204,0.06); border-radius: 8px; border: 1px solid rgba(40,180,204,0.15); } .info-text i { color: var(--info); } /* ── Agronomi menu grid ── */ .agro-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .agro-menu-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 14px; cursor: pointer; transition: all 0.15s; text-align: center; } .agro-menu-card:hover { border-color: var(--green-light); background: #163222; } .agro-menu-card .agro-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 10px; } .agro-menu-card .agro-title { font-size: 12px; font-weight: 700; color: var(--text); } .agro-menu-card .agro-sub { font-size: 10px; color: var(--muted); margin-top: 3px; } /* ── Cuaca widget ── */ .cuaca-card { background: linear-gradient(135deg, #163222, #0F2419); border: 1px solid #235035; border-radius: 14px; padding: 16px; margin-bottom: 14px; } .cuaca-main { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .cuaca-temp { font-size: 40px; font-weight: 800; color: var(--text); font-family: monospace; line-height: 1; } .cuaca-icon { font-size: 36px; } .cuaca-desc { font-size: 13px; font-weight: 700; color: var(--text); } .cuaca-loc { font-size: 11px; color: var(--muted); margin-top: 2px; } .cuaca-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .cuaca-stat { background: rgba(0,0,0,0.2); border-radius: 8px; padding: 8px; text-align: center; } .cuaca-stat .cv { font-size: 13px; font-weight: 700; color: var(--text); font-family: monospace; } .cuaca-stat .cl { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-top: 2px; } /* ── PHT Alert ── */ .pht-alert { background: rgba(230,57,70,0.08); border: 1px solid rgba(230,57,70,0.25); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; gap: 10px; align-items: flex-start; } .pht-icon { color: var(--danger); font-size: 18px; flex-shrink: 0; margin-top: 1px; } .pht-title { font-size: 12px; font-weight: 700; color: var(--text); } .pht-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ── Jadwal task ── */ .task-item { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--green-light); border-radius: 0 12px 12px 0; padding: 12px 14px; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; } .task-body { flex: 1; } .task-title { font-size: 12px; font-weight: 700; color: var(--text); } .task-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .task-check { width: 28px; height: 28px; border-radius: 50%; background: rgba(76,184,112,0.15); border: 2px solid var(--green-light); display: flex; align-items: center; justify-content: center; color: var(--success); font-size: 12px; flex-shrink: 0; } /* ── PHT radio pill cards ── */ .pht-radio-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .pht-radio-pill { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--card); cursor: pointer; transition: all 0.15s; font-size: 13px; font-weight: 600; color: var(--text); } .pht-radio-pill.selected { border-color: var(--green-light); background: rgba(76,184,112,0.08); color: var(--green-light); } .pht-radio-pill .radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .pht-radio-pill.selected .radio-dot { border-color: var(--green-light); background: var(--green-light); } .pht-radio-pill.selected .radio-dot::after { content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; } .pht-radio-pill input[type="text"] { flex: 1; background: transparent; border: none; outline: none; color: var(--muted); font-family: inherit; font-size: 12px; } /* ── Toggle buttons (Tingkat Serangan) ── */ .toggle-group { display: flex; gap: 8px; margin-bottom: 14px; } .toggle-btn { flex: 1; padding: 10px 8px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; transition: all 0.15s; } .toggle-btn.active-ringan { border-color: var(--success); background: rgba(76,184,112,0.12); color: var(--success); } .toggle-btn.active-sedang { border-color: var(--warning); background: rgba(240,160,48,0.12); color: var(--warning); } .toggle-btn.active-berat { border-color: var(--danger); background: rgba(230,57,70,0.12); color: var(--danger); } /* ── Foto thumbnails ── */ .foto-row { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .foto-thumb { width: 60px; height: 60px; background: #163222; border: 1.5px dashed var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--muted); flex-shrink: 0; } .foto-add-btn { padding: 8px 14px; border: 1.5px dashed #235035; border-radius: 10px; background: transparent; color: var(--green-light); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; } .foto-add-btn:hover { background: #163222; } /* ── Rekomendasi card ── */ .rekomendasi-card { background: rgba(240,160,48,0.10); border: 1px solid rgba(240,160,48,0.35); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 12px; color: var(--warning); font-weight: 600; display: flex; align-items: flex-start; gap: 8px; } .rekomendasi-card span { color: var(--text); font-weight: 400; } /* ── Offline badge ── */ .offline-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--info); background: rgba(40,180,204,0.08); border: 1px solid rgba(40,180,204,0.2); border-radius: 20px; padding: 5px 12px; margin: 0 auto; display: flex; justify-content: center; } /* ── Absensi clock ── */ .absensi-clock-card { background: linear-gradient(135deg, #163222 0%, #0F2419 100%); border: 1px solid #235035; border-radius: 16px; padding: 20px 16px; margin-bottom: 14px; text-align: center; } .absensi-date { font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 600; } .absensi-time { font-size: 46px; font-weight: 900; font-family: 'JetBrains Mono', 'Courier New', monospace; color: var(--text); letter-spacing: -0.02em; line-height: 1; margin-bottom: 4px; } .absensi-wib { font-size: 13px; color: var(--green-light); font-weight: 700; } /* ── Lokasi card ── */ .lokasi-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; } .lokasi-row { display: flex; align-items: flex-start; gap: 10px; } .lokasi-ic { font-size: 20px; flex-shrink: 0; margin-top: 2px; } .lokasi-coords { font-size: 12px; font-family: monospace; color: var(--muted); margin-bottom: 4px; } .lokasi-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .lokasi-akurasi { font-size: 11px; color: var(--muted); } /* ── Selfie box ── */ .selfie-box { width: 150px; height: 150px; border: 2.5px dashed var(--gold); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 12px; gap: 6px; background: rgba(201,168,76,0.04); cursor: pointer; transition: all 0.15s; position: relative; } .selfie-box:hover { background: rgba(201,168,76,0.08); } .selfie-box .selfie-ic { font-size: 36px; color: var(--gold); } .selfie-box .selfie-label { font-size: 10px; color: var(--muted); text-align: center; padding: 0 12px; line-height: 1.4; } .selfie-done { position: absolute; top: 6px; right: 6px; background: var(--success); border-radius: 50%; width: 22px; height: 22px; display: none; align-items: center; justify-content: center; font-size: 12px; color: #fff; } .selfie-box.done .selfie-ic { opacity: 0.4; } .selfie-box.done .selfie-done { display: flex; } /* ── Warning card absensi ── */ .warning-card { background: rgba(230,57,70,0.08); border: 1px solid rgba(230,57,70,0.25); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; font-size: 11px; color: #f08080; display: flex; align-items: flex-start; gap: 8px; } .warning-card i { flex-shrink: 0; margin-top: 1px; color: var(--danger); } /* ── Riwayat absensi ── */ .riwayat-abs { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 4px; } .riwayat-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; } .riwayat-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #0D1F12; font-size: 12px; } .riwayat-row:last-child { border-bottom: none; } .riwayat-row .hari { color: var(--muted); font-weight: 600; width: 36px; } .riwayat-row .jam { color: var(--text); font-family: monospace; font-size: 11px; } .riwayat-row .status-abs { font-size: 14px; } /* ── Absensi success overlay ── */ .abs-success { display: none; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #1A4A2A, #0D2818); border-radius: 14px; padding: 32px 20px; margin-bottom: 14px; text-align: center; gap: 10px; border: 1px solid rgba(76,184,112,0.4); } .abs-success.show { display: flex; } .abs-success .check-big { font-size: 52px; } .abs-success .abs-ok-title { font-size: 18px; font-weight: 800; color: var(--success); } .abs-success .abs-ok-time { font-size: 14px; color: var(--muted); } /* ── Gold outline btn ── */ .m-btn-gold-outline { width: 100%; padding: 13px; background: transparent; border: 1.5px solid var(--gold); border-radius: 14px; color: var(--gold); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; margin-bottom: 14px; } .m-btn-gold-outline:hover { background: rgba(201,168,76,0.08); } /* mandor pass-3 */ .num-btn-lg { width:36px; height:44px; } .num-val-lg { height:44px; font-size:16px; } .m-textarea-fixed { resize:none; height:80px; padding-top:12px; } /* ════════════════════════════════════════════════════════════ Mill Operator ════════════════════════════════════════════════════════════ */ /* mill-operator-specific components only — common styles live in shared/mobile.css */ /* ── Screen tabs ── */ /* ── Phone outer frame ── */ /* ── Dynamic Island ── */ /* ── Status bar ── */ /* ── Scrollable screen area ── */ /* ── Bottom nav ── */ /* ── Screen visibility ── */ /* ── Screen padding ── */ /* ── Section header ── */ /* ── Badge ── */ /* ── Primary & outline buttons ── */ .m-btn-outline-gold { width: 100%; padding: 13px; background: transparent; border: 1px solid rgba(201,168,76,0.5); border-radius: 14px; color: var(--gold); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; margin-bottom: 10px; } .m-btn-outline-gold:hover { background: rgba(201,168,76,0.08); } /* ── Screen header ── */ /* ── Form styles ── */ /* ── Divider ── */ /* ── KPI cards ── */ /* ── PKS Status card ── */ .pks-status-card { background: linear-gradient(135deg, #163222 0%, #0F2419 60%, #112A1C 100%); border: 1px solid #235035; border-radius: 16px; padding: 16px; margin-bottom: 14px; position: relative; overflow: hidden; } .pks-status-card::before { content: ''; position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(76,184,112,0.12) 0%, transparent 70%); border-radius: 50%; } .pks-title { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: 2px; } .pks-sub { font-size: 11px; color: var(--muted); margin-bottom: 10px; } .pks-status-row { display: flex; align-items: center; justify-content: space-between; } .pks-badge-op { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; background: rgba(76,184,112,0.15); color: var(--success); border: 1px solid rgba(76,184,112,0.35); } .pks-cap { text-align: right; } .pks-cap .cv { font-size: 13px; font-weight: 800; color: var(--text); font-family: monospace; } .pks-cap .cl { font-size: 10px; color: var(--muted); margin-top: 2px; } .pks-util-row { margin-top: 10px; display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 6px; } .pks-util-row strong { color: var(--text); } .util-bar-wrap { height: 6px; background: #163222; border-radius: 3px; overflow: hidden; } .util-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2D7D46, #4CB870); } /* ── Tank meters ── */ .tank-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; } .tank-title { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .tank-item { margin-bottom: 12px; } .tank-item:last-child { margin-bottom: 0; } .tank-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .tank-name { font-size: 12px; font-weight: 700; color: var(--text); } .tank-pct { font-size: 13px; font-weight: 800; font-family: monospace; } .tank-bar-wrap { height: 10px; background: #163222; border-radius: 5px; overflow: hidden; margin-bottom: 4px; } .tank-bar-fill-gold { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #956C1A, #C9A84C, #E8C96B); } .tank-bar-fill-green { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #2D7D46, #4CB870); } .tank-detail { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); } .tank-detail strong { color: var(--text); } /* ── Antrian badge ── */ .antrian-banner { background: rgba(240,160,48,0.1); border: 1px solid rgba(240,160,48,0.3); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; } .antrian-left { display: flex; align-items: center; gap: 10px; } .antrian-icon { width: 34px; height: 34px; border-radius: 10px; background: rgba(240,160,48,0.15); display: flex; align-items: center; justify-content: center; color: var(--warning); font-size: 16px; flex-shrink: 0; } .antrian-title { font-size: 13px; font-weight: 700; color: var(--text); } .antrian-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } .antrian-count { font-size: 24px; font-weight: 800; font-family: monospace; color: var(--warning); } /* ── Input tiket row (ticket no + scan btn) ── */ .input-with-btn { display: flex; gap: 8px; margin-bottom: 14px; } .input-with-btn .m-input { flex: 1; margin-bottom: 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; } .scan-btn { padding: 0 14px; background: #163222; border: 1px solid var(--border); border-radius: 10px; color: var(--gold); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 6px; transition: all 0.15s; } .scan-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.08); } /* ── Auto-fill info card ── */ .autofill-card { background: #0D1F14; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; } .autofill-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .autofill-row:last-child { margin-bottom: 0; } .autofill-key { font-size: 11px; color: var(--muted); font-weight: 600; } .autofill-val { font-size: 12px; color: var(--text); font-weight: 700; } /* ── Berat netto display ── */ .netto-display { background: rgba(76,184,112,0.08); border: 1px solid rgba(76,184,112,0.25); border-radius: 10px; padding: 14px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; } .netto-label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .netto-val { font-size: 20px; font-weight: 800; font-family: monospace; color: var(--success); display: flex; align-items: center; gap: 8px; } /* ── Grading info box ── */ .grading-info-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; } .grading-info-text { font-size: 12px; color: var(--muted); } /* ── Simpan tiket btn (tall gold) ── */ .m-btn-save-tiket { width: 100%; padding: 18px; background: linear-gradient(135deg, #C9A84C, #E8C96B); border: none; border-radius: 14px; color: #1A0E00; font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.03em; box-shadow: 0 6px 20px rgba(201,168,76,0.3); transition: all 0.15s; } .m-btn-save-tiket:hover { filter: brightness(1.06); transform: translateY(-1px); } /* ── Camera preview (grading) ── */ .camera-preview { width: 100%; aspect-ratio: 1 / 1; background: #0A1005; border: 2px dashed rgba(201,168,76,0.5); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; position: relative; overflow: hidden; } .camera-crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border: 2px solid rgba(201,168,76,0.4); border-radius: 4px; } .camera-corner { position: absolute; width: 18px; height: 18px; border-color: var(--gold); border-style: solid; } .camera-corner.tl { top: 16px; left: 16px; border-width: 2px 0 0 2px; border-radius: 2px 0 0 0; } .camera-corner.tr { top: 16px; right: 16px; border-width: 2px 2px 0 0; border-radius: 0 2px 0 0; } .camera-corner.bl { bottom: 16px; left: 16px; border-width: 0 0 2px 2px; border-radius: 0 0 0 2px; } .camera-corner.br { bottom: 16px; right: 16px; border-width: 0 2px 2px 0; border-radius: 0 0 2px 0; } .camera-icon { font-size: 40px; color: rgba(201,168,76,0.3); } .camera-text { font-size: 12px; color: rgba(201,168,76,0.6); text-align: center; font-weight: 600; } /* ── Camera buttons row ── */ .camera-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .cam-btn-shutter { padding: 14px; background: rgba(201,168,76,0.12); border: 2px solid var(--gold); border-radius: 12px; color: var(--gold); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; } .cam-btn-shutter:hover { background: rgba(201,168,76,0.2); } .cam-btn-flash { padding: 14px; background: #163222; border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; } .cam-btn-flash:hover { border-color: var(--warning); color: var(--warning); } /* ── Grading divider ── */ .grading-divider { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-size: 11px; color: var(--muted); font-weight: 600; } .grading-divider::before, .grading-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Grade result badge (big) ── */ .grade-result-badge { display: flex; align-items: center; justify-content: center; margin-bottom: 14px; gap: 12px; } .grade-badge-big { padding: 8px 24px; background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(201,168,76,0.1)); border: 2px solid var(--gold); border-radius: 12px; font-size: 24px; font-weight: 900; color: var(--gold); letter-spacing: 0.05em; font-family: 'JetBrains Mono', monospace; } .grade-conf { font-size: 11px; color: var(--muted); margin-top: 4px; text-align: center; } /* ── Grade bar items ── */ .grade-bars { margin-bottom: 14px; } .grade-bar-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .grade-bar-label { font-size: 11px; color: var(--muted); font-weight: 600; width: 65px; flex-shrink: 0; } .grade-bar-track { flex: 1; height: 8px; background: #163222; border-radius: 4px; overflow: hidden; } .grade-bar-fill-green { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2D7D46, #4CB870); } .grade-bar-fill-warn { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #C07020, #F0A030); } .grade-bar-fill-danger { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #A02020, #E63946); } .grade-bar-fill-muted { height: 100%; border-radius: 4px; background: #3A5E42; } .grade-bar-pct { font-size: 11px; font-weight: 700; font-family: monospace; color: var(--text); width: 38px; text-align: right; flex-shrink: 0; } /* ── Action buttons row (grading) ── */ .action-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .act-btn-outline { padding: 13px; background: transparent; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: all 0.15s; } .act-btn-outline:hover { border-color: var(--green-light); color: var(--green-light); } .act-btn-gold { padding: 13px; background: linear-gradient(135deg, #C9A84C, #E8C96B); border: none; border-radius: 12px; color: #1A0E00; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: all 0.15s; } .act-btn-gold:hover { filter: brightness(1.06); } /* ── Filter tabs (riwayat) ── */ .filter-tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 2px; } .filter-tabs::-webkit-scrollbar { display: none; } .ftab { padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 700; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; transition: all 0.15s; font-family: inherit; } .ftab.active { background: rgba(45,125,70,0.2); color: var(--green-light); border-color: var(--green); } .ftab:hover:not(.active) { border-color: #235035; color: var(--text); } /* ── Summary bar ── */ .summary-bar { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; display: flex; gap: 12px; } .sum-item { flex: 1; text-align: center; } .sum-val { font-size: 15px; font-weight: 800; font-family: monospace; color: var(--text); display: block; } .sum-lbl { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-top: 2px; display: block; } /* ── Tiket list card ── */ .tiket-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; transition: all 0.15s; } .tiket-card:hover { border-color: #235035; } .tiket-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; } .tiket-no { font-size: 12px; font-weight: 800; color: var(--text); font-family: monospace; } .tiket-time { font-size: 11px; color: var(--muted); } .tiket-info-row { display: flex; justify-content: space-between; align-items: center; } .tiket-meta { font-size: 11px; color: var(--muted); } .tiket-weight { font-size: 13px; font-weight: 700; color: var(--green-light); font-family: monospace; } .tiket-footer-row { margin-top: 6px; display: flex; justify-content: space-between; align-items: center; } .tiket-source { font-size: 10px; color: var(--muted); } .grade-mini-btn { padding: 4px 10px; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.4); border-radius: 20px; color: var(--gold); font-size: 10px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; } .grade-mini-btn:hover { background: rgba(201,168,76,0.2); } /* ── Chart wrapper ── */ .chart-container { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 12px; } .chart-canvas-wrap { position: relative; height: 130px; } /* ── Tiket info row (grading screen) ── */ .tiket-info-chip { background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.25); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 12px; color: var(--gold); font-weight: 600; display: flex; align-items: center; gap: 8px; } /* mill-operator pass-3 */ .scan-btn-gold { color:var(--gold); border-color:rgba(201,168,76,0.4); } .scan-hint-gold { font-size:10px; color:rgba(201,168,76,0.4); margin-top:4px; } .tiket-card-warn { border-color:rgba(240,160,48,0.35) !important; } .m-btn-text-green { background:none; border:none; color:var(--green-light); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; padding:8px 16px; } .netto-icon { font-size:16px; } .netto-icon-warn { font-size:16px; color:var(--warning); } /* ════════════════════════════════════════════════════════════ Onboarding ════════════════════════════════════════════════════════════ */ /* onboarding-specific components only — common styles live in shared/mobile.css */ /* ── Screen tabs ── */ /* ── Phone outer frame ── */ /* ── Dynamic Island ── */ /* ── Status bar ── */ /* ── Screen visibility ── */ /* ── Scrollable screen area ── */ /* ══════════════════════════════════════ SCREEN 1 — SPLASH SCREEN ══════════════════════════════════════ */ .splash-wrapper { height: 740px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #050E08; background-image: radial-gradient(ellipse 60% 50% at 50% 52%, rgba(45,125,70,0.28) 0%, transparent 70%); position: relative; overflow: hidden; } /* decorative rings */ .splash-wrapper::before { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 1px solid rgba(76,184,112,0.08); top: 50%; left: 50%; transform: translate(-50%, -50%); } .splash-wrapper::after { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(76,184,112,0.12); top: 50%; left: 50%; transform: translate(-50%, -50%); } .splash-logo-box { width: 80px; height: 80px; background: linear-gradient(135deg, #2D7D46 0%, #3DAA5A 60%, #4CB870 100%); border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 36px; box-shadow: 0 0 0 1px rgba(76,184,112,0.3), 0 12px 40px rgba(45,125,70,0.5), 0 0 60px rgba(76,184,112,0.15); margin-bottom: 24px; position: relative; z-index: 2; animation: splash-logo-pulse 2.5s ease-in-out infinite; } @keyframes splash-logo-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(76,184,112,0.3), 0 12px 40px rgba(45,125,70,0.5), 0 0 60px rgba(76,184,112,0.15); } 50% { box-shadow: 0 0 0 1px rgba(76,184,112,0.5), 0 12px 40px rgba(45,125,70,0.7), 0 0 80px rgba(76,184,112,0.25); } } .splash-app-name { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); position: relative; z-index: 2; margin-bottom: 8px; } .splash-tagline { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0.04em; position: relative; z-index: 2; margin-bottom: 56px; } /* Loading bar */ .splash-loader-wrap { width: 180px; position: relative; z-index: 2; margin-bottom: 28px; } .splash-loader-track { height: 3px; background: rgba(76,184,112,0.12); border-radius: 2px; overflow: hidden; } .splash-loader-bar { height: 100%; width: 40%; border-radius: 2px; background: linear-gradient(90deg, transparent, #4CB870, #2D7D46); animation: splash-loading 1.8s ease-in-out infinite; } @keyframes splash-loading { 0% { transform: translateX(-100%); width: 40%; } 50% { width: 60%; } 100% { transform: translateX(350%); width: 40%; } } .splash-version { font-size: 11px; color: #3A5E42; font-weight: 500; letter-spacing: 0.04em; position: relative; z-index: 2; } /* ══════════════════════════════════════ SCREEN 2 — ONBOARDING SLIDES ══════════════════════════════════════ */ .onboard-wrapper { height: 740px; display: flex; flex-direction: column; background: #050E08; overflow: hidden; } /* Dots indicator */ .onboard-dots { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 28px 0 0; flex-shrink: 0; } .ob-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(76,184,112,0.5); background: transparent; transition: all 0.3s; cursor: pointer; } .ob-dot.active { width: 24px; border-radius: 4px; background: var(--green-light); border-color: var(--green-light); } /* Slide area */ .onboard-slides { flex: 1; display: flex; align-items: stretch; overflow: hidden; } .ob-slide { min-width: 100%; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px 32px; text-align: center; } .ob-slide.active { display: flex; } .ob-slide svg { width: 240px; height: 200px; margin-bottom: 32px; filter: drop-shadow(0 8px 24px rgba(45,125,70,0.3)); } .ob-title { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: 12px; line-height: 1.2; } .ob-desc { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 280px; } /* Navigation buttons */ .onboard-nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px 32px; flex-shrink: 0; gap: 12px; } .ob-btn-ghost { padding: 12px 20px; background: transparent; border: 1px solid #235035; border-radius: 12px; color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s; min-width: 100px; text-align: center; } .ob-btn-ghost:hover { background: #0F2419; color: var(--text); } .ob-btn-next { padding: 12px 24px; background: linear-gradient(135deg, #2D7D46, #3A9A5A); border: none; border-radius: 12px; color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s; min-width: 140px; text-align: center; box-shadow: 0 6px 20px rgba(45,125,70,0.35); display: flex; align-items: center; justify-content: center; gap: 6px; } .ob-btn-next:hover { filter: brightness(1.1); } .ob-btn-gold { padding: 12px 24px; background: linear-gradient(135deg, #C9A84C, #E8C96B); border: none; border-radius: 12px; color: #1A1000; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: all 0.15s; min-width: 140px; text-align: center; box-shadow: 0 6px 20px rgba(201,168,76,0.35); display: flex; align-items: center; justify-content: center; gap: 6px; } .ob-btn-gold:hover { filter: brightness(1.1); } /* ══════════════════════════════════════ SCREEN 3 — LOGIN SCREEN ══════════════════════════════════════ */ .login-wrapper { height: 740px; background: #050E08; background-image: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(45,125,70,0.12) 0%, transparent 60%); overflow-y: auto; padding: 32px 28px 40px; display: flex; flex-direction: column; } .login-wrapper::-webkit-scrollbar { display: none; } .login-logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; } .login-logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #2D7D46, #4CB870); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 12px rgba(45,125,70,0.4); } .login-logo-name { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; } .login-heading { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; margin-bottom: 6px; line-height: 1.2; } .login-sub { font-size: 13px; color: var(--muted); margin-bottom: 28px; } /* Input field */ .login-field { position: relative; margin-bottom: 14px; } .login-field .field-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; } .login-field .field-toggle { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; cursor: pointer; background: none; border: none; padding: 0; line-height: 1; transition: color 0.15s; } .login-field .field-toggle:hover { color: var(--green-light); } .login-input { width: 100%; background: #0F2419; border: 1px solid #1B3D28; border-radius: 12px; padding: 15px 15px 15px 42px; color: var(--text); font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.15s; } .login-input:focus { border-color: var(--green-light); } .login-input::placeholder { color: #3A5E42; } .login-input.pass-input { padding-right: 42px; } /* Main CTA */ .login-btn-primary { width: 100%; height: 56px; background: linear-gradient(135deg, #2D7D46, #3A9A5A); border: none; border-radius: 14px; color: #fff; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 0.06em; cursor: pointer; margin-bottom: 18px; box-shadow: 0 8px 24px rgba(45,125,70,0.4); transition: all 0.15s; } .login-btn-primary:hover { filter: brightness(1.08); } /* Divider */ .login-divider { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--muted); font-size: 12px; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: #1B3D28; } /* Outline buttons */ .login-btn-outline { width: 100%; height: 48px; background: transparent; border: 1px solid #235035; border-radius: 12px; color: var(--green-light); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; } .login-btn-outline:hover { background: #0F2419; } .login-btn-muted { width: 100%; height: 48px; background: transparent; border: 1px solid #1B3D28; border-radius: 12px; color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 0; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; } .login-btn-muted:hover { background: #0F2419; color: var(--text); } .login-forgot { text-align: center; font-size: 12px; color: var(--muted); margin-top: 16px; cursor: pointer; transition: color 0.15s; } .login-forgot:hover { color: var(--green-light); } .login-footer { margin-top: auto; text-align: center; font-size: 11px; color: #3A5E42; padding-top: 24px; } /* ══════════════════════════════════════ SCREEN 4 — QUICK LOGIN PIN ══════════════════════════════════════ */ /* ══════════════════════════════════════ (also used in biometric screen) ══════════════════════════════════════ */ .pin-wrapper { height: 740px; background: #050E08; background-image: radial-gradient(ellipse 60% 35% at 50% 0%, rgba(45,125,70,0.1) 0%, transparent 60%); display: flex; flex-direction: column; align-items: center; padding: 36px 24px 24px; overflow: hidden; } /* Avatar + greeting */ .pin-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #2D7D46, #1E5A33); border: 2px solid rgba(76,184,112,0.3); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 14px; box-shadow: 0 0 0 4px rgba(76,184,112,0.08), 0 8px 24px rgba(0,0,0,0.4); letter-spacing: -0.02em; } .pin-greeting { font-size: 20px; font-weight: 800; color: var(--text); text-align: center; margin-bottom: 4px; letter-spacing: -0.02em; } .pin-role { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 24px; } .pin-prompt { font-size: 13px; color: var(--muted); text-align: center; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 18px; } /* PIN dots display */ .pin-dots { display: flex; gap: 14px; margin-bottom: 32px; } .pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #235035; background: transparent; transition: all 0.2s; } .pin-dot.filled { background: var(--green-light); border-color: var(--green-light); box-shadow: 0 0 8px rgba(76,184,112,0.5); } .pin-dot.error { background: var(--danger); border-color: var(--danger); animation: pin-shake 0.4s ease; } @keyframes pin-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } /* Numpad */ .pin-numpad { display: grid; grid-template-columns: repeat(3, 64px); gap: 12px; margin-bottom: 24px; } .pin-key { width: 64px; height: 64px; border-radius: 50%; background: #0F2419; border: 1px solid #1B3D28; color: var(--text); font-family: 'Inter', inherit; font-size: 22px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.12s; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .pin-key:hover { background: #163222; border-color: #2D7D46; } .pin-key:active { transform: scale(0.92); background: #1E3D2A; } .pin-key.empty { background: transparent; border-color: transparent; cursor: default; pointer-events: none; box-shadow: none; } .pin-key.delete { font-size: 18px; color: var(--muted); } .pin-key.delete:hover { color: var(--warning); border-color: rgba(240,160,48,0.3); } .pin-key.confirm { background: linear-gradient(135deg, #2D7D46, #3A9A5A); border-color: transparent; font-size: 18px; box-shadow: 0 4px 16px rgba(45,125,70,0.4); } .pin-key.confirm:hover { filter: brightness(1.12); } /* Status message */ .pin-status { font-size: 13px; font-weight: 600; text-align: center; color: transparent; margin-bottom: 16px; min-height: 20px; transition: color 0.2s; } .pin-status.verifying { color: var(--muted); } .pin-status.success { color: var(--success); } /* Bottom links */ .pin-links { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; } .pin-link { font-size: 12px; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: color 0.15s; } .pin-link:hover { color: var(--green-light); } .pin-link-primary { font-size: 12px; color: var(--green-light); cursor: pointer; font-weight: 600; transition: color 0.15s; } .pin-link-primary:hover { color: var(--success); } /* ══════════════════════════════════════ SCREEN 5 — BIOMETRIC LOGIN ══════════════════════════════════════ */ .biometric-wrapper { height: 740px; background: #050E08; background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(45,125,70,0.1) 0%, transparent 60%); display: flex; flex-direction: column; align-items: center; padding: 28px 24px 32px; overflow: hidden; position: relative; } /* ── Avatar area ── */ .bio-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #2D7D46, #1E5A33); border: 2px solid rgba(76,184,112,0.3); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 10px; box-shadow: 0 0 0 4px rgba(76,184,112,0.08); letter-spacing: -0.02em; } .bio-name { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 3px; letter-spacing: -0.02em; } .bio-role { font-size: 12px; color: var(--muted); margin-bottom: 18px; } /* ── Method toggle ── */ .bio-method-toggle { display: flex; background: #0F2419; border: 1px solid #1B3D28; border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 28px; width: 100%; max-width: 290px; } .bio-method-btn { flex: 1; padding: 10px 8px; border: none; border-radius: 9px; background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; } .bio-method-btn.active { background: linear-gradient(135deg, #2D7D46, #3A9A5A); color: #fff; box-shadow: 0 4px 12px rgba(45,125,70,0.35); } .bio-method-btn i { font-size: 16px; } /* ── Scanner area (shared container) ── */ .bio-scanner-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; position: relative; } /* ──────────────────────────── FINGERPRINT SCANNER ──────────────────────────── */ .fp-scanner { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; cursor: pointer; } /* Concentric pulsing rings */ .fp-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(76,184,112,0.2); transition: border-color 0.4s; } .fp-ring-1 { width: 200px; height: 200px; animation: fp-pulse-1 2.5s ease-in-out infinite; } .fp-ring-2 { width: 160px; height: 160px; animation: fp-pulse-1 2.5s ease-in-out infinite 0.4s; } .fp-ring-3 { width: 120px; height: 120px; animation: fp-pulse-1 2.5s ease-in-out infinite 0.8s; } @keyframes fp-pulse-1 { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.03); } } /* Active (scanning) rings */ .fp-scanner.scanning .fp-ring { border-color: rgba(76,184,112,0.45); animation-duration: 1.2s; } .fp-scanner.success .fp-ring { border-color: rgba(76,184,112,0.6); animation: none; opacity: 0.6; } .fp-scanner.error .fp-ring { border-color: rgba(230,57,70,0.45); animation: fp-error-shake 0.4s; } @keyframes fp-error-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } /* Central circle button */ .fp-circle { width: 90px; height: 90px; border-radius: 50%; background: #0F2419; border: 2px solid #235035; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: all 0.3s; box-shadow: 0 8px 32px rgba(0,0,0,0.5); overflow: hidden; } .fp-circle i { font-size: 40px; color: #2D7D46; transition: color 0.3s; position: relative; z-index: 2; } /* Scan sweep overlay */ .fp-sweep { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, transparent 0%, rgba(76,184,112,0.35) 50%, transparent 100%); transform: translateY(-100%); opacity: 0; transition: opacity 0.2s; } .fp-scanner.scanning .fp-sweep { opacity: 1; animation: fp-sweep 1.4s ease-in-out infinite; } @keyframes fp-sweep { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .fp-scanner.scanning .fp-circle { border-color: #4CB870; box-shadow: 0 0 0 3px rgba(76,184,112,0.15), 0 8px 32px rgba(0,0,0,0.5); } .fp-scanner.scanning .fp-circle i { color: #4CB870; } .fp-scanner.success .fp-circle { border-color: #4CB870; background: rgba(76,184,112,0.12); box-shadow: 0 0 0 4px rgba(76,184,112,0.2); } .fp-scanner.success .fp-circle i { color: #4CB870; } .fp-scanner.error .fp-circle { border-color: var(--danger); } .fp-scanner.error .fp-circle i { color: var(--danger); } /* ──────────────────────────── FACE ID SCANNER ──────────────────────────── */ .face-scanner { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; cursor: pointer; } /* Face oval outline */ .face-oval { width: 130px; height: 170px; border-radius: 50%; border: 2px solid #235035; position: absolute; transition: border-color 0.4s; overflow: hidden; } .face-scanner.scanning .face-oval { border-color: #4CB870; box-shadow: 0 0 0 2px rgba(76,184,112,0.15); } .face-scanner.success .face-oval { border-color: #4CB870; box-shadow: 0 0 0 4px rgba(76,184,112,0.2); } .face-scanner.error .face-oval { border-color: var(--danger); } /* Horizontal scan line */ .face-scan-line { position: absolute; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #4CB870, transparent); top: 0; opacity: 0; transition: opacity 0.2s; box-shadow: 0 0 8px rgba(76,184,112,0.6); } .face-scanner.scanning .face-scan-line { opacity: 1; animation: face-scan 1.6s ease-in-out infinite; } @keyframes face-scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* Corner brackets (SVG) */ .face-brackets { position: absolute; width: 160px; height: 196px; pointer-events: none; } .face-brackets line, .face-brackets path { transition: stroke 0.4s; } .face-scanner.scanning .face-brackets line, .face-scanner.scanning .face-brackets path { stroke: #4CB870 !important; } .face-scanner.success .face-brackets line, .face-scanner.success .face-brackets path { stroke: #4CB870 !important; } .face-scanner.error .face-brackets line, .face-scanner.error .face-brackets path { stroke: #E63946 !important; } /* Face outline icon inside oval */ .face-icon { font-size: 72px; color: #235035; transition: color 0.4s; position: relative; z-index: 2; } .face-scanner.scanning .face-icon { color: #2D7D46; } .face-scanner.success .face-icon { color: #4CB870; } .face-scanner.error .face-icon { color: #E63946; } /* Facial point dots */ .face-dots { position: absolute; width: 130px; height: 170px; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.3s; } .face-scanner.scanning .face-dots { opacity: 1; animation: face-dots-blink 0.6s ease-in-out infinite alternate; } .face-scanner.success .face-dots { opacity: 0; } @keyframes face-dots-blink { 0% { opacity: 0.4; } 100% { opacity: 0.9; } } /* ── Shared label below scanner ── */ .bio-prompt { font-size: 15px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 6px; letter-spacing: -0.01em; } .bio-hint { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 20px; line-height: 1.5; min-height: 36px; } .bio-hint.success-msg { color: var(--success); font-weight: 700; } .bio-hint.error-msg { color: var(--danger); } /* ── Tap to retry / instruction ── */ .bio-tap-hint { font-size: 11px; color: #3A5E42; text-align: center; margin-bottom: 20px; } /* ── Bottom actions ── */ .bio-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; width: 100%; } .bio-btn-pin { width: 100%; height: 48px; background: transparent; border: 1px solid #235035; border-radius: 12px; color: var(--green-light); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.15s; } .bio-btn-pin:hover { background: #0F2419; } .bio-link-other { font-size: 12px; color: var(--muted); cursor: pointer; transition: color 0.15s; } .bio-link-other:hover { color: var(--text); } /* ── Success checkmark overlay on face/fp ── */ .bio-success-badge { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: #4CB870; border: 2px solid #050E08; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; opacity: 0; transform: scale(0.5); transition: all 0.3s; z-index: 10; } .fp-scanner.success .bio-success-badge, .face-scanner.success .bio-success-badge { opacity: 1; transform: scale(1); } /* onboarding pass-3 */ .otp-action-row { display:flex; gap:8px; margin-bottom:0; } .bio-badge-corner { bottom:14px; right:14px; } /* ════════════════════════════════════════════════════════════ Pemanen ════════════════════════════════════════════════════════════ */ /* pemanen-specific components only — common styles live in shared/mobile.css */ /* ── Active SPB hero card ── */ .spb-hero-card { background: linear-gradient(135deg, #1C4A2E, #163222); border: 1.5px solid var(--green-light); border-radius: 16px; padding: 18px; margin-bottom: 14px; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(76,184,112,0.1), 0 8px 24px rgba(0,0,0,0.3); } .spb-hero-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(76,184,112,0.15) 0%, transparent 70%); } .spb-hero-label { font-size: 10px; font-weight: 700; color: var(--green-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .spb-hero-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-light); animation: pulse 2s infinite; } .spb-hero-number { font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin-bottom: 10px; } .spb-hero-meta { display: flex; flex-wrap: wrap; gap: 10px; } .spb-hero-meta-item { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; } .spb-hero-meta-item strong { color: var(--text); } /* ── Premi / Upah card ── */ .premi-card { background: linear-gradient(135deg, #1C1508, #201A0A); border: 1.5px solid rgba(201,168,76,0.4); border-radius: 14px; padding: 16px; margin-bottom: 10px; } .premi-label { font-size: 10px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .premi-value { font-size: 26px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--gold); } .premi-note { font-size: 10px; color: rgba(201,168,76,0.6); margin-top: 4px; } .upah-row { display: flex; justify-content: space-between; align-items: center; background: rgba(76,184,112,0.06); border: 1px solid rgba(76,184,112,0.2); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; } .upah-label { font-size: 12px; color: var(--muted); font-weight: 600; } .upah-value { font-size: 18px; font-weight: 800; font-family: monospace; color: var(--success); } /* ── SPB Detail card ── */ .spb-detail-card { background: var(--card); border: 1.5px solid var(--green-light); border-radius: 16px; padding: 16px; margin-bottom: 14px; box-shadow: 0 0 0 1px rgba(76,184,112,0.1); } .spb-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .spb-detail-num { font-size: 13px; font-weight: 800; color: var(--text); } .spb-detail-date { font-size: 11px; color: var(--muted); margin-top: 2px; } .spb-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .spb-detail-item { background: #081610; border-radius: 10px; padding: 10px 12px; } .spb-detail-item .dil { font-size: 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; margin-bottom: 3px; } .spb-detail-item .div { font-size: 13px; font-weight: 700; color: var(--text); } /* ── My result big numbers ── */ .my-result-section { background: linear-gradient(135deg, #1C4A2E, #163222); border: 1px solid #235035; border-radius: 16px; padding: 18px; margin-bottom: 14px; } .my-result-label { font-size: 10px; font-weight: 700; color: var(--green-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; } .my-result-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .my-result-stat { text-align: center; } .my-result-stat .rv { font-size: 26px; font-weight: 900; font-family: 'JetBrains Mono', monospace; color: var(--text); display: block; line-height: 1; } .my-result-stat .rl { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; display: block; margin-top: 4px; } /* ── Validation status ── */ .validation-status { background: rgba(76,184,112,0.08); border: 1px solid rgba(76,184,112,0.25); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .val-icon { color: var(--success); font-size: 20px; flex-shrink: 0; } .val-text { font-size: 12px; color: var(--text); font-weight: 600; } .val-sub { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ── Ancak map ── */ .ancak-map-section { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; } .ancak-map-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; } .ancak-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; } .ancak-cell { aspect-ratio: 1; border-radius: 3px; background: rgba(76,184,112,0.7); display: flex; align-items: center; justify-content: center; font-size: 6px; font-weight: 700; color: rgba(255,255,255,0.8); } .ancak-cell.done { background: linear-gradient(135deg, #2D7D46, #4CB870); } .ancak-legend { display: flex; gap: 14px; margin-top: 10px; } .ancak-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); } .ancak-legend-dot { width: 10px; height: 10px; border-radius: 2px; } /* ── History list ── */ .history-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; } .history-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .history-dot.done { background: var(--success); box-shadow: 0 0 0 3px rgba(76,184,112,0.2); } .history-dot.off { background: var(--muted); } .history-date { font-size: 11px; font-weight: 700; color: var(--text); width: 52px; flex-shrink: 0; } .history-body { flex: 1; } .history-val { font-size: 12px; font-weight: 700; color: var(--text); font-family: monospace; } .history-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } .history-off { font-size: 12px; color: var(--muted); font-style: italic; } .history-bjr { font-size: 11px; font-weight: 700; color: var(--gold); text-align: right; white-space: nowrap; } /* ── Weekly summary ── */ .weekly-summary { background: linear-gradient(135deg, #163222, #0F2419); border: 1px solid #235035; border-radius: 14px; padding: 16px; margin-bottom: 14px; } .weekly-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; } .weekly-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .weekly-stat { text-align: center; background: rgba(0,0,0,0.2); border-radius: 8px; padding: 10px 6px; } .weekly-stat .wv { font-size: 16px; font-weight: 800; font-family: monospace; color: var(--text); } .weekly-stat .wl { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-top: 3px; } /* ── Chart container ── */ .chart-container { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; } .chart-wrap { position: relative; height: 140px; } /* pemanen pass-3 */ .m-kpi-green-border { border-color:rgba(76,184,112,0.4) !important; } .ancak-dot-green { background:linear-gradient(135deg,#2D7D46,#4CB870); } .ancak-dot-gold { background:var(--gold); border:1px solid rgba(201,168,76,0.6); } .ancak-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:14px; } .ancak-card-bonus { background:linear-gradient(135deg,#1C1508,#201A0A); border:1.5px solid rgba(201,168,76,0.5); border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:0 0 16px rgba(201,168,76,0.08); } .ancak-card-header { font-size:10px; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; display:flex; align-items:center; gap:6px; } .ancak-sub-note { font-size:10px; color:rgba(201,168,76,0.65); display:flex; align-items:center; gap:5px; } .ancak-chart-h { position:relative; height:100px; } /* ════════════════════════════════════════════════════════════ Petani Plasma ════════════════════════════════════════════════════════════ */ /* petani-plasma-specific components only — common styles live in shared/mobile.css */ /* ── Lahan card ── */ .lahan-card { background: linear-gradient(135deg, #1A3B22, #0F2419); border: 1px solid var(--gold); border-radius: 16px; padding: 16px; margin-bottom: 14px; position: relative; overflow: hidden; } .lahan-card::after { content: ''; position: absolute; bottom: -20px; right: -20px; width: 80px; height: 80px; background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 70%); border-radius: 50%; } .lahan-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .lahan-blok { font-size: 11px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; } .lahan-nama { font-size: 16px; font-weight: 800; color: var(--text); } .lahan-luas { font-size: 28px; font-weight: 900; color: var(--gold); font-family: 'JetBrains Mono', monospace; line-height: 1; } .lahan-luas span { font-size: 13px; font-weight: 600; color: var(--muted); } .lahan-sertif { display: flex; flex-direction: column; gap: 5px; } .sertif-row { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--success); } .sertif-row i { font-size: 11px; } /* ── Pendapatan card ── */ .pendapatan-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; } .pendapatan-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .pendapatan-nilai { font-size: 28px; font-weight: 900; color: var(--gold); font-family: 'JetBrains Mono', monospace; line-height: 1.1; margin-bottom: 4px; } .pendapatan-est { font-size: 10px; color: var(--muted); margin-bottom: 12px; } .pendapatan-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pd-item { background: #081610; border-radius: 10px; padding: 10px; } .pd-val { font-size: 14px; font-weight: 800; color: var(--text); font-family: 'JetBrains Mono', monospace; } .pd-label { font-size: 9px; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-top: 2px; } /* ── Riwayat row ── */ .riwayat-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); } .riwayat-item:last-child { border-bottom: none; } .riwayat-bulan { font-size: 13px; font-weight: 700; color: var(--text); } .riwayat-tanggal { font-size: 10px; color: var(--muted); margin-top: 2px; } .riwayat-nominal { text-align: right; } .riwayat-jumlah { font-size: 14px; font-weight: 800; color: var(--gold); font-family: 'JetBrains Mono', monospace; } /* ── SVG Mini-map ── */ .minimap-wrap { background: #081610; border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; text-align: center; } .minimap-title { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; } .minimap-legend { display: flex; justify-content: center; gap: 16px; margin-top: 10px; font-size: 10px; color: var(--muted); } .legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: middle; } /* ── Detail lahan card ── */ .detail-lahan-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; } .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .detail-row:last-child { border-bottom: none; } .detail-key { color: var(--muted); font-weight: 600; } .detail-val { color: var(--text); font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 11px; } /* ── Status keberlanjutan ── */ .status-card { background: rgba(76,184,112,0.06); border: 1px solid rgba(76,184,112,0.2); border-radius: 14px; padding: 14px; margin-bottom: 14px; } .status-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(76,184,112,0.12); font-size: 12px; color: var(--text); font-weight: 600; } .status-row:last-child { border-bottom: none; } .status-row i { color: var(--success); font-size: 13px; flex-shrink: 0; } /* ── Chart container ── */ .chart-sub { font-size: 10px; color: var(--muted); margin-bottom: 14px; } /* ── Tabel riwayat ── */ .riwayat-table { width: 100%; border-collapse: collapse; } .riwayat-table th { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0 8px 0; text-align: left; border-bottom: 1px solid var(--border); } .riwayat-table th:last-child { text-align: right; } .riwayat-table td { font-size: 11px; color: var(--text); padding: 10px 0; border-bottom: 1px solid rgba(27,61,40,0.5); font-weight: 600; } .riwayat-table td:last-child { text-align: right; } .riwayat-table tr:last-child td { border-bottom: none; } /* ── YTD card ── */ .ytd-card { background: linear-gradient(135deg, #1A3B22, #0F2419); border: 1px solid var(--gold); border-radius: 16px; padding: 18px; margin-bottom: 14px; text-align: center; } .ytd-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; margin-bottom: 6px; } .ytd-value { font-size: 30px; font-weight: 900; color: var(--gold); font-family: 'JetBrains Mono', monospace; } .ytd-sub { font-size: 11px; color: var(--muted); margin-top: 4px; } /* petani-plasma pass-3 */ .minimap-svg { border-radius:8px; overflow:hidden; } .legend-dot-gold-b06 { background:rgba(201,168,76,0.4); border:1px solid #C9A84C; } /* ══════════════════════════════════════════════════════════ Field Officer ══════════════════════════════════════════════════════════ */ .fo-check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(27,61,40,0.5); cursor: pointer; } .fo-check-item:last-child { border-bottom: none; } .fo-check-box { width: 22px; height: 22px; border-radius: 6px; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; margin-top: 1px; transition: all 0.15s; } .fo-check-box.unchecked { background: transparent; border: 2px solid var(--border); } .fo-check-title { font-size: 12px; font-weight: 700; color: var(--text); } .fo-check-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } .fo-doc-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; } /* Steps */ .mob-jc-center { justify-content: center; } .fo-step-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; margin: 0 auto 4px; } .fo-step-circle.active { background: var(--success); color: #fff; } .fo-step-circle.inactive { background: var(--border); color: var(--muted); } .fo-step-line { flex: 1; height: 2px; background: var(--border); margin-top: 14px; } /* Select narrow */ .fo-select-sm { width: 120px; flex-shrink: 0; } /* Upload zones */ .fo-upload-zone-gold { background: #060F08; border: 1.5px dashed rgba(201,168,76,0.4); border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 10px; } .fo-upload-zone-green { background: #060F08; border: 1.5px dashed rgba(76,184,112,0.3); border-radius: 12px; padding: 20px; text-align: center; } .fo-upload-zone-alt { background: #060F08; border: 1.5px dashed rgba(201,168,76,0.35); border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 14px; } .fo-upload-icon { font-size: 36px; margin-bottom: 8px; } .fo-upload-icon-lg { font-size: 28px; margin-bottom: 8px; } /* Header spacer */ .fo-spacer { width: 28px; } /* Summary row (no border) */ .fo-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; } /* Map wrappers */ .fo-map-wrap { background: #060F08; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin-bottom: 14px; } .fo-map-wrap-active { background: #060F08; border: 1.5px solid rgba(76,184,112,0.4); border-radius: 14px; overflow: hidden; margin-bottom: 14px; } /* Stop button */ .m-btn-danger { flex: 1; padding: 12px; border-radius: 12px; border: none; background: linear-gradient(135deg,#C0392B,#E74C3C); color: #fff; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; } /* Add photo thumb */ .fo-photo-add { border: 1.5px dashed rgba(201,168,76,0.4); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* Field Officer extras */ .fo-phone-prefix { padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; flex-shrink: 0; } /* ── SPB Closing Workflow ────────────────────────────────── */ .spb-action-close { background: rgba(201,168,76,0.12); border: 1.5px solid rgba(201,168,76,0.4); color: var(--gold); } .closing-steps { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 14px 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); } .closing-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; } .cs-circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); } .closing-step.done .cs-circle { background: var(--green-light); border-color: var(--green-light); color: #fff; } .closing-step.active .cs-circle { background: var(--gold); border-color: var(--gold); color: #1a1a1a; } .cs-label { font-size: 9px; color: var(--muted); white-space: nowrap; } .closing-step.done .cs-label, .closing-step.active .cs-label { color: var(--text); } .closing-step-line { flex: 1; height: 2px; background: var(--border); border-radius: 2px; } .closing-step-line.done { background: var(--green-light); } .spb-summary-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; } .ss-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border-soft); } .ss-row:last-child { border-bottom: none; } .ss-row.highlight { padding-top: 8px; } .ss-label { font-size: 11px; color: var(--muted); } .ss-val { font-size: 13px; font-weight: 600; color: var(--text); } .denda-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .denda-item { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid rgba(240,160,48,0.25); border-radius: var(--radius); padding: 10px 12px; } .denda-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .denda-ic.warn { background: rgba(240,160,48,0.15); color: var(--gold); } .denda-body { flex: 1; } .denda-title { font-size: 12px; font-weight: 600; color: var(--text); } .denda-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } .denda-amount { font-size: 12px; font-weight: 700; white-space: nowrap; } .closing-photo-row { display: flex; gap: 8px; margin-bottom: 14px; } .closing-photo { flex: 1; aspect-ratio: 1; background: var(--card); border: 1px solid var(--border-soft); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 18px; } .closing-photo.add { border: 1.5px dashed rgba(201,168,76,0.4); color: var(--gold); cursor: pointer; } .ttd-box { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; } .ttd-label { padding: 8px 14px; font-size: 11px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: 6px; } .ttd-area { height: 70px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px dashed var(--border); border-radius: 0 0 var(--radius) var(--radius); margin: 8px; } .ttd-placeholder { font-size: 11px; color: var(--muted); } .ttd-signed { display: flex; align-items: center; gap: 8px; } .ttd-ok { color: var(--green-light); font-size: 20px; } .ttd-signed span { font-size: 12px; font-weight: 600; color: var(--text); } .closing-actions { display: flex; gap: 8px; margin-bottom: 8px; } .closing-actions .m-btn-outline { flex: 0 0 auto; padding: 12px 16px; } .closing-actions .m-btn-primary { flex: 1; } /* ── Mill Operator: Beranda quick buttons ──────────────── */ .beranda-quick-row { display: flex; gap: 8px; margin-top: 8px; margin-bottom: 4px; } .beranda-quick-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--card); color: var(--muted); font-size: 10px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s; } .beranda-quick-btn i { font-size: 16px; } .beranda-quick-btn.warn { border-color: rgba(240,160,48,0.4); color: var(--gold); } .beranda-quick-btn.danger { border-color: rgba(192,57,43,0.3); color: var(--danger); } /* ── Mill Operator: Offline Timbang ─────────────────────── */ .offline-mode-card { display: flex; align-items: center; gap: 12px; background: rgba(192,57,43,0.1); border: 1px solid rgba(192,57,43,0.3); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; } .omc-icon { font-size: 22px; color: var(--danger); flex-shrink: 0; } .omc-body { flex: 1; } .omc-title { font-size: 12px; font-weight: 700; color: var(--danger); } .omc-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } .m-input-mock { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 14px; } .offline-ticket-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .offline-ticket-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; } .ot-number { font-size: 11px; font-weight: 700; color: var(--text); min-width: 90px; } .ot-detail { flex: 1; font-size: 10px; color: var(--muted); } /* ── Mill Operator: POME Monitoring ─────────────────────── */ .pome-status-card { display: flex; align-items: center; gap: 12px; border-radius: var(--radius); padding: 14px; margin-bottom: 14px; } .pome-status-card.normal { background: rgba(76,184,112,0.1); border: 1px solid rgba(76,184,112,0.25); } .pome-status-card.warn { background: rgba(240,160,48,0.1); border: 1px solid rgba(240,160,48,0.3); } .pome-status-icon { font-size: 24px; color: var(--green-light); } .pome-status-title { font-size: 13px; font-weight: 700; color: var(--text); } .pome-status-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } .pome-param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .pome-param-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; } .pome-param-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; } .pome-param-val { font-size: 16px; font-weight: 700; color: var(--text); } .pome-param-val.normal { color: var(--green-light); } .pome-param-val.warn { color: var(--danger); } .pome-unit { font-size: 10px; font-weight: 400; color: var(--muted); } .pome-param-limit { font-size: 9px; color: var(--muted); margin: 2px 0 5px; } .pome-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; } .pome-bar { height: 100%; border-radius: 2px; } .lagoon-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .lagoon-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; } .lagoon-num { width: 28px; height: 28px; border-radius: 8px; background: rgba(45,125,70,0.15); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--green-light); flex-shrink: 0; } .lagoon-body { flex: 1; } .lagoon-name { font-size: 12px; font-weight: 600; color: var(--text); } .lagoon-detail { font-size: 10px; color: var(--muted); margin-top: 2px; } /* ── Mill Operator: Process Alert ───────────────────────── */ .process-alert { border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; } .process-alert.critical { background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.3); } .process-alert.warn { background: rgba(240,160,48,0.08); border: 1px solid rgba(240,160,48,0.25); } .process-alert.info { background: rgba(52,152,219,0.08); border: 1px solid rgba(52,152,219,0.25); } .pa-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .pa-icon { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(192,57,43,0.15); color: var(--danger); font-size: 14px; } .pa-icon.warn { background: rgba(240,160,48,0.15); color: var(--gold); } .pa-icon.info { background: rgba(52,152,219,0.15); color: var(--info); } .pa-title-block { flex: 1; } .pa-title { font-size: 12px; font-weight: 700; color: var(--text); } .pa-time { font-size: 10px; color: var(--muted); margin-top: 2px; } .pa-body { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; } .pa-actions { display: flex; gap: 8px; } .pa-btn-ack, .pa-btn-assign { padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; border: 1.5px solid var(--border); background: transparent; color: var(--text); font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.15s; } .pa-btn-ack { border-color: rgba(76,184,112,0.4); color: var(--green-light); } .resolved-alert-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .resolved-item { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; opacity: 0.7; } /* ── Petani Plasma: E-Ticket Viewer ─────────────────────── */ .eticket-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; } .eticket-card.highlighted { border-color: rgba(201,168,76,0.4); } .eticket-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); background: rgba(201,168,76,0.05); } .eticket-num { font-size: 11px; font-weight: 700; color: var(--gold); } .eticket-body { padding: 0 14px; } .eticket-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-soft); } .eticket-row:last-child { border-bottom: none; } .eticket-row.highlight { padding-top: 8px; } .et-label { font-size: 11px; color: var(--muted); } .et-val { font-size: 12px; font-weight: 600; color: var(--text); text-align: right; } .eticket-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--border-soft); } .eticket-qr { width: 48px; height: 48px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--text); } .eticket-share-btn { padding: 8px 14px !important; font-size: 11px !important; } .eticket-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .eticket-list-item { display: flex; justify-content: space-between; align-items: flex-start; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; } .etl-num { font-size: 11px; font-weight: 700; color: var(--text); } .etl-date { font-size: 10px; color: var(--muted); margin-top: 2px; } .etl-right { text-align: right; } .etl-kg { font-size: 12px; font-weight: 700; } .etl-rp { font-size: 10px; color: var(--muted); margin-top: 2px; } .eticket-summary-bar { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; } /* ── Petani Plasma: EUDR Status ──────────────────────────── */ .eudr-info-card { display: flex; align-items: flex-start; gap: 12px; background: rgba(76,184,112,0.08); border: 1px solid rgba(76,184,112,0.2); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; } .eudr-info-icon { font-size: 22px; color: var(--green-light); flex-shrink: 0; padding-top: 2px; } .eudr-info-title { font-size: 12px; font-weight: 700; color: var(--text); } .eudr-info-sub { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.4; } .eudr-summary-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; } .eudr-sum-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px; text-align: center; } .eudr-sum-card.green { border-color: rgba(76,184,112,0.3); } .eudr-sum-card.warn { border-color: rgba(240,160,48,0.3); } .eudr-sum-val { font-size: 22px; font-weight: 700; } .eudr-sum-card.green .eudr-sum-val { color: var(--green-light); } .eudr-sum-card.warn .eudr-sum-val { color: var(--gold); } .eudr-sum-card.muted .eudr-sum-val { color: var(--muted); } .eudr-sum-label { font-size: 9px; color: var(--muted); margin-top: 2px; } .eudr-plot-card { border-radius: var(--radius); padding: 14px; margin-bottom: 10px; } .eudr-plot-card.pass { background: var(--card); border: 1px solid rgba(76,184,112,0.25); } .eudr-plot-card.warn { background: var(--card); border: 1px solid rgba(240,160,48,0.3); } .eudr-plot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .eudr-plot-id { font-size: 13px; font-weight: 700; color: var(--text); } .eudr-plot-detail { font-size: 10px; color: var(--muted); margin-bottom: 10px; } .eudr-checklist { display: flex; flex-direction: column; gap: 6px; } .eudr-check-item { display: flex; align-items: center; gap: 8px; font-size: 11px; } .eudr-check-item.pass { color: var(--text); } .eudr-check-item.pass i { color: var(--green-light); } .eudr-check-item.fail { color: var(--muted); } .eudr-check-item.fail i { color: var(--danger); } .eudr-check-item.warn i { color: var(--gold); } .eudr-action-row { display: flex; gap: 8px; margin-top: 12px; } /* ── Auditor: RSPO P&C Checklist ────────────────────────── */ .rspo-progress-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; } .rspo-prog-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .rspo-prog-title { font-size: 13px; font-weight: 700; color: var(--text); } .rspo-prog-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } .rspo-prog-pct { font-size: 24px; font-weight: 700; color: var(--gold); } .prog-bar-wrap { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 10px; } .prog-bar-fill { height: 100%; border-radius: 3px; } .rspo-status-chips { display: flex; gap: 6px; flex-wrap: wrap; } .rspo-chip { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 10px; } .rspo-chip.green { background: rgba(76,184,112,0.15); color: var(--green-light); } .rspo-chip.warn { background: rgba(240,160,48,0.15); color: var(--gold); } .rspo-chip.danger { background: rgba(192,57,43,0.15); color: var(--danger); } .rspo-section { margin-bottom: 14px; } .rspo-section-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .rspo-principle { width: 28px; height: 28px; border-radius: 8px; background: rgba(201,168,76,0.15); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--gold); flex-shrink: 0; } .rspo-principle-title { flex: 1; font-size: 12px; font-weight: 600; color: var(--text); } .rspo-criterion { border-radius: 10px; margin-bottom: 6px; overflow: hidden; border: 1px solid var(--border-soft); } .rspo-criterion.done { border-color: rgba(76,184,112,0.25); background: rgba(76,184,112,0.04); } .rspo-criterion.nc-minor { border-color: rgba(240,160,48,0.3); background: rgba(240,160,48,0.04); } .rspo-criterion.nc-major { border-color: rgba(192,57,43,0.3); background: rgba(192,57,43,0.04); } .rspo-crit-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; } .rspo-crit-id { font-size: 11px; font-weight: 700; color: var(--gold); min-width: 24px; } .rspo-crit-title { flex: 1; font-size: 11px; color: var(--text); line-height: 1.35; } .rspo-chevron { font-size: 10px; color: var(--muted); transition: transform 0.2s; } .rspo-crit-body { padding: 0 12px 10px; } .rspo-crit-detail { font-size: 11px; color: var(--muted); line-height: 1.4; margin-bottom: 8px; } .rspo-evidence-row, .rspo-result-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .rspo-ev-label { font-size: 10px; color: var(--muted); min-width: 50px; } .rspo-ev-val { font-size: 11px; color: var(--text); } .rspo-capa-row { margin-top: 8px; } /* ── Auditor: EUDR Compliance ────────────────────────────── */ .eudr-audit-status-card { display: flex; align-items: center; justify-content: space-between; background: rgba(240,160,48,0.08); border: 1px solid rgba(240,160,48,0.25); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; } .eas-left { display: flex; align-items: center; gap: 10px; } .eas-icon { font-size: 22px; color: var(--green-light); } .eas-title { font-size: 12px; font-weight: 700; color: var(--text); } .eas-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } .eudr-audit-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; } .eudr-aud-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px; text-align: center; } .eudr-aud-card.green { border-color: rgba(76,184,112,0.3); } .eudr-aud-card.warn { border-color: rgba(240,160,48,0.3); } .eudr-aud-card.danger { border-color: rgba(192,57,43,0.3); } .eudr-aud-val { font-size: 22px; font-weight: 700; } .eudr-aud-card.green .eudr-aud-val { color: var(--green-light); } .eudr-aud-card.warn .eudr-aud-val { color: var(--gold); } .eudr-aud-card.danger .eudr-aud-val { color: var(--danger); } .eudr-aud-label { font-size: 9px; color: var(--muted); margin-top: 2px; } .eudr-req-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .eudr-req-item { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; } .eudr-req-item.pass { border-color: rgba(76,184,112,0.2); } .eudr-req-item.warn { border-color: rgba(240,160,48,0.25); } .eudr-req-item.fail { border-color: rgba(192,57,43,0.25); } .eudr-req-status { font-size: 16px; flex-shrink: 0; padding-top: 1px; } .eudr-req-status i { color: var(--green-light); } .eudr-req-status.warn i { color: var(--gold); } .eudr-req-status.fail i { color: var(--danger); } .eudr-req-body { flex: 1; } .eudr-req-title { font-size: 12px; font-weight: 600; color: var(--text); } .eudr-req-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } /* ── Auditor: CAPA Input ─────────────────────────────────── */ .capa-type-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .capa-type-pill { padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1.5px solid var(--border); color: var(--muted); cursor: pointer; transition: all 0.15s; } .capa-type-pill.selected { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.1); } .capa-action-list { margin-bottom: 14px; } .capa-action-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); } .capa-action-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(201,168,76,0.15); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--gold); flex-shrink: 0; margin-top: 1px; } .capa-action-text { font-size: 12px; color: var(--text); line-height: 1.45; flex: 1; } .mob-row { display: flex; } .mob-gap-8 { gap: 8px; } /* ── Driver: GPS Navigation ─────────────────────────────── */ .nav-header-eta { text-align: right; } .nhe-time { font-size: 18px; font-weight: 700; color: var(--gold); font-family: 'JetBrains Mono', monospace; } .nhe-label { font-size: 9px; color: var(--muted); } .nav-map-fullwidth { width: 100%; background: #040C02; overflow: hidden; } .next-turn-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid rgba(76,184,112,0.3); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; } .ntc-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(76,184,112,0.15); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--green-light); flex-shrink: 0; } .ntc-body { flex: 1; } .ntc-action { font-size: 14px; font-weight: 700; color: var(--text); } .ntc-street { font-size: 10px; color: var(--muted); margin-top: 2px; } .ntc-dist { font-size: 16px; font-weight: 700; color: var(--gold); white-space: nowrap; } .nav-progress-row { display: flex; justify-content: space-between; margin-bottom: 4px; } .nav-live-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px; margin-bottom: 10px; } .nav-live-item { text-align: center; } .nli-val { font-size: 14px; font-weight: 700; color: var(--text); } .nli-unit { font-size: 9px; font-weight: 400; color: var(--muted); } .nli-label { font-size: 9px; color: var(--muted); margin-top: 2px; } /* ── Driver: Route Optimization ─────────────────────────── */ .route-opt-summary { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 10px; margin-bottom: 12px; } .ros-item { flex: 1; text-align: center; } .ros-val { font-size: 14px; font-weight: 700; color: var(--text); } .ros-label { font-size: 9px; color: var(--muted); margin-top: 2px; } .ros-divider { width: 1px; background: var(--border); align-self: stretch; } .waypoint-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .waypoint-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; } .waypoint-item.current { border-color: rgba(76,184,112,0.35); background: rgba(76,184,112,0.05); } .waypoint-item.destination { border-color: rgba(201,168,76,0.3); } .wp-num { width: 26px; height: 26px; border-radius: 50%; background: rgba(201,168,76,0.15); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--gold); flex-shrink: 0; } .wp-num.star { font-size: 14px; background: rgba(201,168,76,0.12); } .wp-body { flex: 1; } .wp-title { font-size: 12px; font-weight: 700; color: var(--text); } .wp-detail { font-size: 10px; color: var(--muted); margin-top: 2px; } .wp-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .wp-dist { font-size: 11px; font-weight: 600; color: var(--text); } .wp-nav-btn { width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid rgba(76,184,112,0.4); background: rgba(76,184,112,0.1); color: var(--green-light); font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .truck-cap-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; } .tcc-title { font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; } .tcc-detail { display: flex; justify-content: space-between; } /* ── Asisten Divisi: Agronomi Oversight ─────────────────── */ .agro-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .aog-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 4px; } .aog-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; margin-bottom: 4px; } .aog-ic.green { background: rgba(45,125,70,0.2); color: var(--green-light); } .aog-ic.warn { background: rgba(240,160,48,0.15); color: var(--gold); } .aog-ic.info { background: rgba(52,152,219,0.15); color: var(--info); } .aog-val { font-size: 20px; font-weight: 700; color: var(--text); } .aog-label { font-size: 10px; color: var(--muted); } .pupuk-blok-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .pb-item { display: flex; align-items: center; gap: 10px; } .pb-blok { font-size: 11px; font-weight: 600; color: var(--text); min-width: 70px; } .pb-bar-wrap { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .pb-bar { height: 100%; border-radius: 3px; } .pb-pct { font-size: 11px; font-weight: 700; min-width: 36px; text-align: right; } /* ── Asisten Divisi: Work Order ──────────────────────────── */ .wo-summary-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; } .wo-sum-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px; text-align: center; } .wo-sum-val { font-size: 20px; font-weight: 700; } .wo-sum-label { font-size: 9px; color: var(--muted); margin-top: 2px; } .mob-text-danger { color: var(--danger); } .wo-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; } .wo-card.urgent { border-color: rgba(192,57,43,0.35); background: rgba(192,57,43,0.04); } .wo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .wo-id-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; } .wo-id-badge.danger { background: rgba(192,57,43,0.15); color: var(--danger); } .wo-id-badge.warn { background: rgba(240,160,48,0.12); color: var(--gold); } .wo-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; line-height: 1.35; } .wo-meta-row { display: flex; gap: 14px; font-size: 10px; color: var(--muted); margin-bottom: 8px; } .wo-detail { font-size: 11px; color: var(--muted); line-height: 1.4; margin-bottom: 8px; } .wo-progress-row { display: flex; justify-content: space-between; margin-bottom: 3px; } .wo-actions { display: flex; gap: 8px; margin-top: 10px; } .wo-btn-update, .wo-btn-foto, .wo-btn-selesai { padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; border: 1.5px solid var(--border); background: transparent; color: var(--text); font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.15s; } .wo-btn-selesai { border-color: rgba(76,184,112,0.4); color: var(--green-light); } .wo-done-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .wo-done-item { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; opacity: 0.7; } /* ── Estate Manager: Compliance Status ──────────────────── */ .compliance-score-card { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid rgba(76,184,112,0.25); border-radius: var(--radius); padding: 16px 14px; margin-bottom: 14px; } .csc-score { font-size: 42px; font-weight: 800; color: var(--green-light); line-height: 1; } .csc-label { font-size: 12px; font-weight: 600; color: var(--text); margin-top: 4px; } .csc-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } .compliance-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .compliance-item { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; } .compliance-item.pass { border-color: rgba(76,184,112,0.2); } .compliance-item.warn { border-color: rgba(240,160,48,0.25); } .comp-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .comp-icon.pass { background: rgba(76,184,112,0.15); color: var(--green-light); } .comp-icon.warn { background: rgba(240,160,48,0.15); color: var(--gold); } .comp-icon.green { background: rgba(45,125,70,0.15); color: var(--green-light); } .comp-body { flex: 1; } .comp-title { font-size: 12px; font-weight: 700; color: var(--text); } .comp-detail { font-size: 10px; color: var(--muted); margin-top: 2px; margin-bottom: 6px; } .comp-progress-row { display: flex; align-items: center; gap: 8px; } .action-item-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .action-item { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; } .action-item.urgent { border-color: rgba(192,57,43,0.25); } .action-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; } .action-dot.danger { background: var(--danger); } .action-dot.warn { background: var(--gold); } .action-dot.green { background: var(--green-light); } /* ── Estate Manager: Cost Drill-Down ────────────────────── */ .cost-total-card { background: var(--card); border: 1px solid rgba(201,168,76,0.3); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; text-align: center; } .ctc-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; } .ctc-value { font-size: 22px; font-weight: 700; color: var(--gold); margin-bottom: 6px; } .ctc-vs { display: flex; align-items: center; justify-content: center; gap: 4px; } .mob-ml-4 { margin-left: 4px; } .cost-breakdown-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .cost-item { display: flex; align-items: center; gap: 8px; } .cost-color { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .cost-cat { font-size: 11px; color: var(--text); min-width: 130px; } .cost-bar-wrap { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .cost-bar { height: 100%; border-radius: 3px; } .cost-pct { font-size: 11px; font-weight: 600; color: var(--muted); min-width: 28px; text-align: right; } .cost-rp { font-size: 11px; font-weight: 700; min-width: 42px; text-align: right; } .mob-text-info { color: var(--info); } .cost-divisi-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .cost-divisi-item { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; } .cd-name { font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .cd-bar-wrap { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 6px; } .cd-bar { height: 100%; border-radius: 3px; } .cd-detail { display: flex; justify-content: space-between; align-items: center; } .cd-rp { font-size: 12px; font-weight: 700; } /* ── Estate Manager: Forecast Produksi ──────────────────── */ .forecast-header-card { display: flex; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid rgba(201,168,76,0.25); border-radius: var(--radius); padding: 12px 10px; margin-bottom: 14px; } .fhc-item { flex: 1; text-align: center; } .fhc-val { font-size: 15px; font-weight: 700; } .fhc-label { font-size: 10px; color: var(--muted); margin-top: 2px; } .fhc-trend { font-size: 10px; font-weight: 600; margin-top: 3px; } .fhc-divider { width: 1px; background: var(--border); align-self: stretch; } .forecast-chart-wrap { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px; margin-bottom: 14px; } .risk-factor-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .risk-item { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; } .risk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; } .risk-dot.green { background: var(--green-light); } .risk-dot.warn { background: var(--gold); } /* ── Pemanen: Premi Detail ───────────────────────────────── */ .premi-total-card { background: var(--card); border: 1px solid rgba(201,168,76,0.3); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; text-align: center; } .ptc-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; } .ptc-value { font-size: 24px; font-weight: 700; color: var(--gold); margin-bottom: 4px; } .ptc-vs { font-size: 11px; color: var(--muted); } .premi-comp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .premi-comp-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid rgba(76,184,112,0.2); border-radius: var(--radius); padding: 10px 12px; } .premi-comp-item.deduction { border-color: rgba(192,57,43,0.2); } .pci-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .pci-icon.green { background: rgba(76,184,112,0.15); color: var(--green-light); } .pci-icon.warn { background: rgba(240,160,48,0.12); color: var(--gold); } .pci-icon.danger { background: rgba(192,57,43,0.12); color: var(--danger); } .pci-body { flex: 1; } .pci-title { font-size: 12px; font-weight: 600; color: var(--text); } .pci-detail { font-size: 10px; color: var(--muted); margin-top: 2px; } .pci-amount { font-size: 13px; font-weight: 700; white-space: nowrap; } .premi-total-row { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1.5px solid rgba(201,168,76,0.4); border-radius: var(--radius); padding: 12px 14px; } /* ── Pemanen: Fraksi Matang ──────────────────────────────── */ .fraksi-today-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; } .fraksi-today-item { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px; text-align: center; } .fraksi-today-item.good { border-color: rgba(76,184,112,0.3); } .fraksi-today-item.warn { border-color: rgba(240,160,48,0.3); } .fti-label { font-size: 10px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .fti-val { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .fti-desc { font-size: 9px; color: var(--muted); margin-bottom: 6px; } .fraksi-table { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; } .fraksi-row { display: grid; grid-template-columns: 80px 1fr 90px; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); gap: 8px; align-items: center; } .fraksi-row:last-child { border-bottom: none; } .fraksi-row.header { background: rgba(45,125,70,0.08); } .fraksi-row.header .fr-fraksi, .fraksi-row.header .fr-ciri, .fraksi-row.header .fr-aksi { font-size: 10px; font-weight: 700; color: var(--muted); } .fraksi-row.danger-row { background: rgba(192,57,43,0.04); } .fraksi-row.warn-row { background: rgba(240,160,48,0.03); } .fraksi-row.ok-row { background: rgba(76,184,112,0.03); } .fr-fraksi { } .fr-ciri { font-size: 10px; color: var(--text); line-height: 1.35; } .fr-aksi { font-size: 10px; font-weight: 600; text-align: right; } .fraksi-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 8px; display: inline-block; text-align: center; } .fraksi-badge.mentah { background: rgba(192,57,43,0.15); color: var(--danger); } .fraksi-badge.f1 { background: rgba(240,160,48,0.15); color: var(--gold); } .fraksi-badge.f2 { background: rgba(76,184,112,0.2); color: var(--green-light); } .fraksi-badge.f3 { background: rgba(76,184,112,0.15); color: var(--green-light); } .fraksi-badge.f0 { background: rgba(240,160,48,0.12); color: var(--gold); } .fraksi-tips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .fraksi-tip-item { display: flex; align-items: flex-start; gap: 10px; } .fti-num { width: 20px; height: 20px; border-radius: 50%; background: rgba(201,168,76,0.15); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--gold); flex-shrink: 0; } /* ── Notification Center ─────────────────────────────────── */ .notif-bell { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background 0.15s; } .notif-bell:active { background: rgba(255,255,255,0.14); } .notif-bell i { font-size: 13px; color: var(--text); } .notif-bell-wrap { position: relative; display: inline-flex; } .notif-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; background: var(--danger); border-radius: 8px; font-size: 9px; font-weight: 800; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 1.5px solid var(--bg); pointer-events: none; } .notif-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-soft); } .notif-header-title { font-size: 16px; font-weight: 800; color: var(--text); } .notif-mark-all { font-size: 11px; color: var(--green-light); font-weight: 600; cursor: pointer; } .notif-filter-row { display: flex; gap: 6px; padding: 10px 16px 8px; border-bottom: 1px solid var(--border-soft); } .notif-ftab { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; background: var(--card); border: 1px solid var(--border-soft); color: var(--muted); cursor: pointer; transition: all 0.15s; } .notif-ftab.active { background: var(--green-dark); border-color: var(--green-light); color: var(--green-light); } .notif-group-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; padding: 10px 16px 4px; } .notif-list { display: flex; flex-direction: column; } .notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.12s; } .notif-item:active { background: rgba(255,255,255,0.03); } .notif-item.unread { background: rgba(76,184,112,0.04); } .notif-item.unread-urgent { background: rgba(192,57,43,0.05); } .notif-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-light); margin-top: 6px; flex-shrink: 0; } .notif-dot.urgent { background: var(--danger); } .notif-dot.read { background: transparent; } .notif-icon-wrap { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .notif-icon-wrap.green { background: rgba(76,184,112,0.15); color: var(--green-light); } .notif-icon-wrap.gold { background: rgba(201,168,76,0.15); color: var(--gold); } .notif-icon-wrap.red { background: rgba(192,57,43,0.15); color: var(--danger); } .notif-icon-wrap.blue { background: rgba(52,152,219,0.15); color: #5eb4e8; } .notif-icon-wrap.muted { background: rgba(255,255,255,0.06); color: var(--muted); } .notif-body { flex: 1; min-width: 0; } .notif-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 2px; } .notif-desc { font-size: 11px; color: var(--text-soft); line-height: 1.45; margin-bottom: 4px; } .notif-meta { display: flex; align-items: center; gap: 8px; } .notif-time { font-size: 10px; color: var(--muted); } .notif-action-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; border: 1px solid; cursor: pointer; } .notif-action-tag.green { color: var(--green-light); border-color: rgba(76,184,112,0.4); } .notif-action-tag.red { color: var(--danger); border-color: rgba(192,57,43,0.4); } .notif-action-tag.gold { color: var(--gold); border-color: rgba(201,168,76,0.4); } .notif-empty { text-align: center; padding: 48px 24px; color: var(--muted); font-size: 13px; } .notif-empty i { font-size: 36px; margin-bottom: 12px; display: block; opacity: 0.35; } /* ── Error & Empty States ────────────────────────────────── */ /* -- Back button (screen header) -- */ .back-btn { width: 32px; height: 32px; background: rgba(255,255,255,0.07); border: 1px solid var(--border-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 13px; cursor: pointer; flex-shrink: 0; transition: background 0.15s; } .back-btn:active { background: rgba(255,255,255,0.14); } /* -- Error full-screen state -- */ .error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 28px 40px; min-height: 320px; } .error-icon-wrap { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 28px; } .error-icon-wrap.red { background: rgba(192,57,43,0.12); color: var(--danger); } .error-icon-wrap.gold { background: rgba(201,168,76,0.12); color: var(--gold); } .error-icon-wrap.muted { background: rgba(255,255,255,0.06); color: var(--muted); } .error-icon-wrap.green { background: rgba(76,184,112,0.12); color: var(--green-light); } .error-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 8px; line-height: 1.3; } .error-desc { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; max-width: 260px; } .error-btn { background: var(--green-dark); border: 1px solid var(--green-light); color: var(--green-light); font-size: 13px; font-weight: 700; padding: 10px 22px; border-radius: 10px; cursor: pointer; transition: background 0.15s; display: inline-flex; align-items: center; gap: 7px; } .error-btn:active { background: rgba(76,184,112,0.2); } .error-btn.secondary { background: transparent; border-color: var(--border-soft); color: var(--text-soft); margin-top: 8px; } .error-code { font-size: 10px; color: var(--muted); margin-top: 14px; font-family: monospace; } /* -- No Connection Banner (inline, inside screens) -- */ .no-conn-banner { display: flex; align-items: center; gap: 10px; background: rgba(192,57,43,0.1); border: 1px solid rgba(192,57,43,0.25); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; } .no-conn-icon { width: 28px; height: 28px; background: rgba(192,57,43,0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--danger); font-size: 13px; flex-shrink: 0; } .no-conn-body { flex: 1; } .no-conn-title { font-size: 12px; font-weight: 700; color: var(--danger); } .no-conn-sub { font-size: 10px; color: var(--muted); margin-top: 1px; } .no-conn-retry { font-size: 10px; font-weight: 700; color: var(--green-light); padding: 5px 10px; background: rgba(76,184,112,0.1); border: 1px solid rgba(76,184,112,0.3); border-radius: 8px; cursor: pointer; white-space: nowrap; } /* -- Empty List State -- */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 24px; } .empty-state i { font-size: 38px; color: var(--muted); opacity: 0.3; margin-bottom: 12px; } .empty-state-title { font-size: 14px; font-weight: 700; color: var(--text-soft); margin-bottom: 6px; } .empty-state-desc { font-size: 11px; color: var(--muted); line-height: 1.55; max-width: 220px; } .empty-state-btn { margin-top: 16px; padding: 9px 20px; background: var(--green-dark); border: 1px solid var(--green-light); color: var(--green-light); font-size: 12px; font-weight: 700; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } /* -- Form Validation Error -- */ .form-field-wrap { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .form-field-label { font-size: 11px; font-weight: 600; color: var(--muted); } .form-field-input { background: var(--card); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--text); outline: none; transition: border-color 0.15s; } .form-field-input:focus { border-color: var(--green-light); } .form-field-input.error { border-color: var(--danger); background: rgba(192,57,43,0.04); } .form-field-error { font-size: 10px; color: var(--danger); font-weight: 600; display: flex; align-items: center; gap: 4px; } .form-field-error i { font-size: 9px; } .form-field-input.success { border-color: var(--green-light); } .form-field-success { font-size: 10px; color: var(--green-light); font-weight: 600; } /* -- Error Screens container -- */ .error-screen-pad { padding: 0 16px; } .error-variants-title { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 16px 0 8px; } /* ── Loading States ──────────────────────────────────────── */ /* -- Shimmer animation -- */ @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .skeleton { background: linear-gradient( 90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75% ); background-size: 936px 100%; animation: shimmer 1.4s infinite linear; border-radius: 6px; } .skel-text { height: 12px; border-radius: 6px; } .skel-text.wide { width: 80%; } .skel-text.mid { width: 55%; } .skel-text.short { width: 35%; } .skel-title { height: 18px; border-radius: 7px; width: 60%; margin-bottom: 6px; } .skel-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; } .skel-rect { width: 100%; height: 12px; border-radius: 6px; } .skel-badge { width: 52px; height: 20px; border-radius: 10px; flex-shrink: 0; } .skel-btn { width: 90px; height: 32px; border-radius: 10px; flex-shrink: 0; } .skel-icon { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; } .skel-hero { width: 100%; height: 96px; border-radius: var(--radius-lg); } .skel-chart { width: 100%; height: 120px; border-radius: var(--radius); } .skel-bar { height: 10px; border-radius: 5px; } /* -- Skeleton card patterns -- */ .skel-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .skel-row { display: flex; align-items: center; gap: 10px; } .skel-body { flex: 1; display: flex; flex-direction: column; gap: 6px; } /* -- KPI grid skeleton -- */ .skel-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .skel-kpi { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 7px; } /* -- Full-screen spinner overlay -- */ .spinner-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; gap: 14px; } .spinner { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,0.08); border-top-color: var(--green-light); border-radius: 50%; animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .spinner.sm { width: 20px; height: 20px; border-width: 2px; } .spinner.gold { border-top-color: var(--gold); } .spinner.red { border-top-color: var(--danger); } .spinner-label { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; } /* -- Inline loading row (e.g., button loading state) -- */ .btn-loading { display: inline-flex; align-items: center; gap: 8px; opacity: 0.75; pointer-events: none; } .loading-bar-wrap { height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; margin: 8px 0; } .loading-bar-fill { height: 100%; width: 35%; background: var(--green-light); border-radius: 2px; animation: loadingSlide 1.6s ease-in-out infinite; } @keyframes loadingSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(380%); } } /* ── Realisasi Pemupukan ─────────────────────────────────── */ .task-info-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; } .task-info-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border-soft); } .task-info-row:last-child { border-bottom: none; } .task-info-label { font-size: 11px; color: var(--muted); } .task-info-val { font-size: 12px; font-weight: 600; color: var(--text); text-align: right; } .blok-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .blok-pill { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1.5px solid var(--border); color: var(--muted); cursor: pointer; transition: all 0.15s; } .blok-pill.selected { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.1); } .cuaca-pill-row { display: flex; gap: 8px; margin-bottom: 14px; } .cuaca-pill { flex: 1; padding: 8px 6px; border-radius: 10px; font-size: 11px; font-weight: 600; text-align: center; border: 1.5px solid var(--border); color: var(--muted); cursor: pointer; transition: all 0.15s; } .cuaca-pill.selected { border-color: var(--gold); color: var(--gold); background: rgba(201,168,76,0.1); } /* ── Sisip Recording ─────────────────────────────────────── */ .sisip-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; } .sisip-stat-card { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; text-align: center; } .sisip-stat-card.accent-warn { border-color: rgba(240,160,48,0.3); } .sisip-stat-card.accent-danger { border-color: rgba(192,57,43,0.3); } .sisip-stat-card.accent-info { border-color: rgba(52,152,219,0.3); } .sisip-stat-val { font-size: 22px; font-weight: 700; color: var(--text); } .sisip-stat-card.accent-warn .sisip-stat-val { color: var(--gold); } .sisip-stat-card.accent-danger .sisip-stat-val { color: var(--danger); } .sisip-stat-card.accent-info .sisip-stat-val { color: var(--info); } .sisip-stat-label { font-size: 10px; color: var(--muted); margin-top: 2px; } .kondisi-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; } .kondisi-pill { padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1.5px solid var(--border); color: var(--muted); cursor: pointer; transition: all 0.15s; } .kondisi-pill.selected { border-color: var(--green-light); color: var(--green-light); background: rgba(76,184,112,0.1); } .m-textarea-mock { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; font-size: 12px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; min-height: 60px; } .sisip-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .sisip-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 10px 12px; } .sisip-pohon { font-size: 12px; font-weight: 700; color: var(--text); min-width: 70px; } .sisip-detail { flex: 1; font-size: 11px; color: var(--muted); }