/* ============================================================ SURAT — Custom CSS override di atas Tailwind ============================================================ */ /* Brand mark & logo placeholder */ .brand-mark { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%); } /* Sidebar scroll area */ .sidebar-scroll { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.3) transparent; } .sidebar-scroll::-webkit-scrollbar { width: 4px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 4px; } /* Smooth transition for layout shifts */ .layout-transition { transition: margin-left 0.25s ease, width 0.25s ease; } /* Card hover effect */ .card-hover { transition: transform 0.15s ease, box-shadow 0.15s ease; } .card-hover:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.12); } /* Status badges custom colors */ .badge-status { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; } .badge-dot { width: 0.4rem; height: 0.4rem; border-radius: 9999px; display: inline-block; } /* PDF viewer area */ .pdf-frame { background: #525252 repeating-conic-gradient(#737373 0% 25%, #525252 0% 50%) 50% / 24px 24px; } /* Drag & drop upload zone */ .drop-zone { border: 2px dashed #cbd5e1; transition: all 0.15s ease; } .drop-zone.is-drag { border-color: #4f46e5; background: rgba(79, 70, 229, 0.05); } /* Print styling for PDF export */ @media print { .no-print, nav, aside, header, .topbar, .action-bar { display: none !important; } body { background: white !important; } .print-area { box-shadow: none !important; border: 0 !important; } @page { size: A4; margin: 1.5cm; } } /* Dark mode tweaks (manual via .dark on ) */ .dark body { background-color: #0f172a; color: #e2e8f0; } .dark .bg-white { background-color: #1e293b !important; } .dark .text-slate-700 { color: #cbd5e1 !important; } .dark .border-slate-200 { border-color: #334155 !important; } .dark .bg-slate-50 { background-color: #0f172a !important; } .dark .bg-slate-100 { background-color: #1e293b !important; } /* Skeleton loader */ .skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: skeleton-loading 1.4s infinite; border-radius: 0.375rem; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Truncate lines */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }