/* SIPeRDinkes - Main CSS */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

* { font-family: 'Plus Jakarta Sans', sans-serif; box-sizing: border-box; }

/* Animations */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pulseSlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.05); }
}
@keyframes shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.animate-slide-in    { animation: slideIn 0.4s ease forwards; }
.animate-fade-in     { animation: fadeIn 0.3s ease forwards; }
.animate-pulse-slow  { animation: pulseSlow 3s ease-in-out infinite; }
.animate-spin        { animation: spin 1s linear infinite; }
.font-jakarta        { font-family: 'Plus Jakarta Sans', sans-serif; }

/* Custom scrollbar */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #93c5fd; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

/* Status badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-draft    { background: #f1f5f9; color: #64748b; }
.badge-dikirim  { background: #dbeafe; color: #1d4ed8; }
.badge-diterima { background: #dcfce7; color: #15803d; }
.badge-selesai  { background: #dcfce7; color: #15803d; }
.badge-gudang   { background: #dbeafe; color: #1e40af; }
.badge-bidang   { background: #ede9fe; color: #5b21b6; }
.badge-puskesmas{ background: #d1fae5; color: #065f46; }
.badge-unit     { background: #fef3c7; color: #92400e; }
.badge-low      { background: #fef3c7; color: #92400e; }
.badge-critical { background: #fee2e2; color: #991b1b; }

/* Card hover */
.card-hover { transition: all 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(59,130,246,0.15); }

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

/* Table */
.tbl-row { transition: background 0.15s; }
.tbl-row:hover { background: #eff6ff; }

/* Sidebar */
.sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 12px;
    font-size: 14px; font-weight: 600;
    color: #475569; transition: all 0.15s;
}
.sidebar-link:hover { background: #eff6ff; color: #2563eb; }
.sidebar-link.active { background: #2563eb; color: white; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.sidebar-link.active span { filter: brightness(10); }

/* Modal */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    z-index: 1000; display: none;
    align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.active { display: flex; }

/* Input focus */
.form-input {
    width: 100%; padding: 10px 14px; border: 2px solid #e2e8f0;
    border-radius: 10px; font-size: 14px; outline: none;
    transition: all 0.15s; background: white;
}
.form-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }

/* Stats card gradient */
.stat-blue   { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.stat-indigo { background: linear-gradient(135deg, #4f46e5, #4338ca); }
.stat-teal   { background: linear-gradient(135deg, #0891b2, #0e7490); }
.stat-green  { background: linear-gradient(135deg, #059669, #047857); }
.stat-amber  { background: linear-gradient(135deg, #d97706, #b45309); }
.stat-red    { background: linear-gradient(135deg, #dc2626, #b91c1c); }

/* Print Kop Surat */
@media screen {
    .print-kop { display: none !important; }
}
@media print {
    @page {
        size: landscape !important;
        margin: 0.5cm !important;
    }
    html, body {
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
    }
    body > div.flex, 
    body > div.flex > div.flex-1,
    body > div.flex > div.flex-1 > main {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .print-kop { display: flex; align-items: center; border-bottom: 4px double #000; padding-bottom: 15px; margin-bottom: 25px; width: 100%; }
    .print-kop-logo { width: 15%; text-align: center; }
    .print-kop-logo img { width: 80px; height: auto; }
    .print-kop-text { width: 70%; text-align: center; color: #000; }
    .print-kop-text h2, .print-kop-text h3, .print-kop-text h4 { margin: 0; text-transform: uppercase; line-height: 1.2; font-family: "Times New Roman", Times, serif; color: #000; }
    .print-kop-text h2 { font-size: 18px; font-weight: bold; }
    .print-kop-text h3 { font-size: 20px; font-weight: bold; letter-spacing: 1px; }
    .print-kop-text h4 { font-size: 22px; font-weight: bold; margin-top: 2px; }
    .print-kop-text p { margin: 5px 0 0; font-size: 13px; font-family: "Times New Roman", Times, serif; color: #000; }
    .print-kop-right { width: 15%; }
}