/* ========================================================== * SISTEM TEMA WARNA (bisa diganti pengguna, tersimpan di browser) * ========================================================== * Tailwind di-configure agar warna "brand-*" merujuk ke variabel CSS * di bawah ini (lihat tailwind.config di header.php/login.php), sehingga * mengganti tema cukup mengubah atribut data-theme di — tanpa * perlu build ulang Tailwind maupun reload halaman. */ :root, :root[data-theme="indigo"] { --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe; --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca; --brand-800:#3730a3; --brand-900:#312e81; } :root[data-theme="blue"] { --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8; --brand-800:#1e40af; --brand-900:#1e3a8a; } :root[data-theme="emerald"] { --brand-50:#ecfdf5; --brand-100:#d1fae5; --brand-200:#a7f3d0; --brand-500:#10b981; --brand-600:#059669; --brand-700:#047857; --brand-800:#065f46; --brand-900:#064e3b; } :root[data-theme="rose"] { --brand-50:#fff1f2; --brand-100:#ffe4e6; --brand-200:#fecdd3; --brand-500:#f43f5e; --brand-600:#e11d48; --brand-700:#be123c; --brand-800:#9f1239; --brand-900:#881337; } :root[data-theme="amber"] { --brand-50:#fffbeb; --brand-100:#fef3c7; --brand-200:#fde68a; --brand-500:#f59e0b; --brand-600:#d97706; --brand-700:#b45309; --brand-800:#92400e; --brand-900:#78350f; } :root[data-theme="purple"] { --brand-50:#faf5ff; --brand-100:#f3e8ff; --brand-200:#e9d5ff; --brand-500:#a855f7; --brand-600:#9333ea; --brand-700:#7e22ce; --brand-800:#6b21a8; --brand-900:#581c87; } :root[data-theme="teal"] { --brand-50:#f0fdfa; --brand-100:#ccfbf1; --brand-200:#99f6e4; --brand-500:#14b8a6; --brand-600:#0d9488; --brand-700:#0f766e; --brand-800:#115e59; --brand-900:#134e4a; } :root[data-theme="slate"] { --brand-50:#f8fafc; --brand-100:#f1f5f9; --brand-200:#e2e8f0; --brand-500:#64748b; --brand-600:#475569; --brand-700:#334155; --brand-800:#1e293b; --brand-900:#0f172a; } .theme-swatch { width: 32px; height: 32px; border-radius: 9999px; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #e2e8f0; transition: transform .15s ease; } .theme-swatch:hover { transform: scale(1.12); } .theme-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-600); } body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; background-color: #f4f5fa; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; } ::-webkit-scrollbar-track { background: transparent; } .sidebar-link.active { background-color: rgba(255,255,255,0.14); color: #fff; box-shadow: inset 3px 0 0 #fff; } .card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04); } .table-modern th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; background: #f8fafc; } .table-modern tbody tr:hover { background-color: #f8fafc; } .input-modern { width: 100%; border: 1px solid #e2e8f0; border-radius: 0.65rem; padding: 0.55rem 0.85rem; font-size: 0.9rem; background: #fff; transition: border-color .15s, box-shadow .15s; } .input-modern:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-200); } .btn { display: inline-flex; align-items: center; gap: .4rem; justify-content: center; padding: 0.55rem 1.05rem; font-size: 0.875rem; font-weight: 600; border-radius: 0.65rem; transition: all .15s ease; white-space: nowrap; } .btn-primary { background: linear-gradient(135deg,var(--brand-600),var(--brand-500)); color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.18); } .btn-primary:hover { filter: brightness(1.07); } .btn-secondary { background: #f1f5f9; color: #334155; } .btn-secondary:hover { background: #e2e8f0; } .btn-danger { background: #fef2f2; color: #dc2626; } .btn-danger:hover { background: #fee2e2; } .btn-outline { border: 1px solid #e2e8f0; color: #334155; background: #fff; } .btn-outline:hover { background: #f8fafc; } .btn-sm { padding: 0.35rem 0.6rem; font-size: 0.78rem; } .btn-icon { padding: 0.5rem; } .skeleton { background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; } @keyframes skeleton { 0%{background-position:100% 50%} 100%{background-position:0 50%} } /* ---------------- PRINT (Cetak Disposisi) ---------------- */ @media print { body * { visibility: hidden; } #print-area, #print-area * { visibility: visible; } #print-area { position: absolute; top: 0; left: 0; width: 100%; } .no-print { display: none !important; } @page { size: A4; margin: 1.4cm; } }