/* assets/css/style.css - Zeawan Unified Portal Styles */

:root {
    --primary-navy: #000927;
    --primary-orange: #ff7700;
    --primary-green: #16a34a;
    --bg-light: #f8fafc;
    --text-dark: #1e293b;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode overrides */
html.dark body {
    background-color: #0b1120;
    color: #f1f5f9;
}

html.dark .bg-white {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

html.dark .bg-gray-50 {
    background-color: #0b1120 !important;
}

html.dark .bg-gray-100 {
    background-color: #1e293b !important;
}

html.dark .text-gray-800, 
html.dark .text-gray-700, 
html.dark .text-gray-900 {
    color: #f1f5f9 !important;
}

html.dark .text-gray-600, 
html.dark .text-gray-500 {
    color: #94a3b8 !important;
}

html.dark .border-gray-100, 
html.dark .border-gray-200, 
html.dark .border-gray-300 {
    border-color: #334155 !important;
}

html.dark input, 
html.dark select, 
html.dark textarea {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

html.dark input::placeholder, 
html.dark textarea::placeholder {
    color: #64748b !important;
}

/* Custom UI helpers */
.btn-disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
    pointer-events: none; 
}

.progress-bar { 
    transition: width 0.4s ease; 
}

.spinner {
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 3px solid #fff;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* Certificate Print Styles */
@media print {
    body * {
        visibility: hidden;
    }
    #printableCertificate, #printableCertificate * {
        visibility: visible;
    }
    #printableCertificate {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 20px;
        box-shadow: none !important;
        border: 2px solid #000927 !important;
    }
    .no-print {
        display: none !important;
    }
}