/* Light */ :root { --ring: 0 0 #0000; --bg: #ffffff; --bg-muted: #f8f9fb; --card: #ffffff; --text: #0b1220; --text-muted: #5b6472; --border: #e7e9ee; --brand: #00AA13; --brand-600: #01910F; --shadow-soft: 0 10px 30px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.04); } /* Dark (Tailwind adds .dark to ) */ .dark { --bg: #0b0c0f; --bg-muted: #0f1115; --card: #121418; --text: #e7e9ee; --text-muted: #b2b7bf; --border: #252830; --shadow-soft: 0 16px 32px rgba(0,0,0,.35), 0 3px 8px rgba(0,0,0,.35); } body { background: var(--bg); color: var(--text); } /* Buttons & Inputs */ .btn-muted{ display:inline-flex;align-items:center;gap:.5rem;border-radius:.75rem;border:1px solid var(--border);background:var(--card);padding:.5rem .75rem;font-size:.875rem;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:all .18s ease } .btn-muted:hover{ background:var(--bg-muted); transform:translateY(-1px) } .btn-muted:active{ transform:translateY(0) } .input{ width:18rem;border-radius:.625rem;border:1px solid var(--border);background:var(--bg);padding:.55rem .75rem;font-size:.875rem;outline:none;color:var(--text);transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease } .input:focus{ border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,170,19,.12) } /* Cards */ .card{ position:relative;border-radius:1.1rem;border:1px solid var(--border);background:var(--card);padding:1.15rem;box-shadow:var(--shadow-soft) } .card::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent) } .card-title{ margin-bottom:.75rem;font-size:.9rem;font-weight:700;color:var(--text-muted);letter-spacing:.2px } /* KPI */ .kpi{ display:flex;align-items:center;justify-content:space-between } .kpi-icon{ width:2.25rem;height:2.25rem;border-radius:.9rem;background:rgba(0,170,19,.09);display:flex;align-items:center;justify-content:center;color:var(--brand) } .kpi-value{ margin-top:.5rem;font-weight:800;font-size:1.5rem;letter-spacing:.2px } .kpi-diff-up{ color:#059669 } .kpi-diff-down{ color:#dc2626 } /* Pills & Badges */ .pill{ display:inline-flex;align-items:center;border-radius:9999px;border:1px solid;padding:.125rem .5rem;font-size:.75rem;font-weight:700 } .pill-emerald{ border-color:#a7f3d0;background:#ecfdf5;color:#059669 } .pill-red{ border-color:#fecaca;background:#fef2f2;color:#dc2626 } .dark .pill-emerald{ border-color:rgba(6,95,70,.45);background:rgba(6,95,70,.22);color:#a7f3d0 } .dark .pill-red{ border-color:rgba(153,27,27,.45);background:rgba(153,27,27,.18);color:#fca5a5 } .badge{ display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .5rem;font-size:.75rem;font-weight:700;border:1px solid } /* Nav */ .nav-item{ display:flex;align-items:center;gap:.5rem;border-radius:.65rem;padding:.5rem .75rem;font-size:.9rem;color:var(--text-muted);transition:all .18s ease } .nav-item:hover{ background:var(--bg-muted); color:var(--text) } .nav-item .dot{ width:.375rem;height:.375rem;border-radius:9999px;background:#cfd5dd } .nav-item:hover .dot{ background:var(--brand) } /* Table */ .th{ padding:.5rem .75rem;font-weight:700;cursor:pointer;user-select:none } .td{ padding:.55rem .75rem; color:var(--text) } .row{ border-bottom:1px solid var(--border) } tbody tr:hover{ background:rgba(2,6,23,.03) } .dark tbody tr:hover{ background:rgba(255,255,255,.04) } /* Skeleton */ .skeleton-row{ height:2.6rem;width:100%;border-radius:.65rem;background:var(--bg-muted);animation:pulse 1.4s ease-in-out infinite } @keyframes pulse{ 50%{ opacity:.6 } } /* Boards */ .list{ display:flex;flex-direction:column;gap:.6rem } .list-item{ display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:.75rem;padding:.55rem .75rem;background:var(--card);color:var(--text) } .media{ display:flex;align-items:center;gap:.7rem } .avatar{ width:2rem;height:2rem;border-radius:.55rem;background:var(--bg-muted);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--text-muted) } .chips{ display:flex;flex-wrap:wrap;gap:.4rem } .chip{ border:1px solid var(--border);border-radius:9999px;padding:.2rem .55rem;font-size:.72rem;background:var(--bg-muted);color:var(--text-muted);font-weight:700 } /* Progress tiny bar */ .progress{ height:.35rem;border-radius:.35rem;overflow:hidden;background:var(--bg-muted) } .progress > span{ display:block;height:100%;background:linear-gradient(90deg,#10b981,#22c55e,#84cc16) } /* ========== Mobile-first polish pack ========== */ /* 1) Fluid type scale */ html { font-size: 15px; } @media (max-width: 420px) { html { font-size: 14px; } } /* 2) Global spacing tighten on small screens */ @media (max-width: 640px) { .mx-auto.max-w-7xl { padding-left: 1rem !important; padding-right: 1rem !important; } header .h-16 { height: 3.25rem !important; } .card { padding: 0.9rem; border-radius: 0.9rem; } .card-title { margin-bottom: 0.55rem; font-size: 0.85rem; } .btn-muted { padding: 0.45rem 0.65rem; border-radius: 0.6rem; } .input { width: 100%; } } /* 3) Topbar: compact & sticky shadow on scroll */ @media (max-width: 640px) { header .mx-auto { gap: .75rem; } header h1 { font-size: .95rem; line-height: 1.15rem; } header p { display: none; } /* sembunyikan subtext API di HP */ } @supports (position: sticky) { header { transition: box-shadow .18s ease; } body.scrolled header { box-shadow: 0 8px 18px rgba(0,0,0,.08); } } /* 4) Sidebar → horizontal pills di HP */ @media (max-width: 1024px) { aside .card { padding: .5rem .75rem; } } @media (max-width: 640px) { #nav-list { display: flex; overflow-x: auto; gap: .5rem; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #nav-list::-webkit-scrollbar { display: none; } .nav-item { white-space: nowrap; border: 1px solid var(--border); } } /* 5) KPI grid padding dan sentris di HP */ @media (max-width: 640px) { #kpi-section { grid-template-columns: 1fr 1fr !important; gap: .6rem !important; } #kpi-section .card { min-height: 90px; } .kpi-value { font-size: 1.35rem; } } /* 6) Boards: kartu lebih ringkas & media item mengalir */ @media (max-width: 640px) { #boards-section { grid-template-columns: 1fr !important; gap: .6rem !important; } .list-item { padding: .5rem .6rem; } .avatar { width: 1.8rem; height: 1.8rem; border-radius: .5rem; } .chips { gap: .35rem; } .chip { padding: .18rem .5rem; font-size: .7rem; } } /* 7) Sparkline card: buat lebih tinggi di HP biar tappable & readable */ @media (max-width: 640px) { #sparkline { height: 96px; } } /* 8) Status list: stack rapat */ @media (max-width: 640px) { #status-list .list-item { gap: .5rem; } #status-list .list-item span { font-size: .8rem; } } /* 9) Table → “Card rows” di mobile (tanpa JS) - Header disembunyikan - Row jadi card dengan label di pseudo-elements */ @media (max-width: 768px) { #spot-table thead { display: none; } #spot-table, #spot-table tbody, #spot-table tr, #spot-table td { display: block; width: 100%; } #spot-table tr.row { border: 1px solid var(--border); border-radius: .8rem; padding: .6rem .65rem; margin-bottom: .6rem; background: var(--card); } #spot-table td.td { display: grid; grid-template-columns: 9rem 1fr; gap: .4rem; padding: .35rem 0; border-bottom: 0; } #spot-table td.td.font-medium { font-weight: 700; } #spot-table td.td.tabular-nums { font-feature-settings: "tnum"; } /* Labels (ikuti urutan kolom di HTML) */ #spot-table td:nth-child(1)::before { content: "Spot"; color: var(--text-muted); } #spot-table td:nth-child(2)::before { content: "Negara"; color: var(--text-muted); } #spot-table td:nth-child(3)::before { content: "Area"; color: var(--text-muted); } #spot-table td:nth-child(4)::before { content: "Target Ikan"; color: var(--text-muted); } #spot-table td:nth-child(5)::before { content: "Rating"; color: var(--text-muted); } #spot-table td:nth-child(6)::before { content: "Status"; color: var(--text-muted); } } /* 10) Controls bar pada table: stack & sticky bawah */ @media (max-width: 640px) { .table-controls { position: sticky; bottom: .75rem; z-index: 30; display: flex; gap: .5rem; background: transparent; } .table-controls .input { flex: 1; } } /* 11) Tap targets lebih empuk */ @media (max-width: 640px) { .btn-muted, .nav-item { min-height: 40px; } } /* 12) Reduce motion (aksesibilitas) */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* 13) Fix toast di HP (jangan keluar layar) */ @media (max-width: 640px) { #toast { right: .75rem; left: .75rem; } #toast > div { width: 100%; } }