/* ==========================================================================
   SATU (Sistem Administrasi Terpadu) — Minimal Styles Override
   Mendukung penuh transisi Tailwind CSS & Material Symbols Outlined
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

body {
    font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.card-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
}

.sidebar-active-scale:active {
    transform: scale(0.95);
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f3f3f9;
}
::-webkit-scrollbar-thumb {
    background: #e2e2e8;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #c3c6d1;
}

/* SPA Panel Switching transition support */
.page-view {
    display: none;
}
.page-view.active {
    display: block;
}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */
.dark body {
    background-color: #0F172A !important; /* Slate 900 */
    color: #F8FAFC !important;
}

.dark main {
    background-color: #0F172A !important;
}

.dark aside,
.dark header,
.dark section.bg-surface-container-lowest,
.dark .bg-surface-container-lowest {
    background-color: #1E293B !important; /* Slate 800 */
    border-color: #334155 !important; /* Slate 700 */
    color: #F8FAFC !important;
}

.dark .bg-surface-container-low,
.dark .bg-slate-50 {
    background-color: #334155 !important;
    border-color: #475569 !important;
}

.dark .text-primary {
    color: #FFC72C !important; /* UT Gold accent for titles in dark mode */
}

.dark .text-on-surface-variant {
    color: #94A3B8 !important; /* Slate 400 */
}

.dark .text-on-surface {
    color: #F8FAFC !important;
}

.dark .text-slate-600 {
    color: #CBD5E1 !important; /* Slate 300 */
}

.dark .border-outline-variant {
    border-color: #334155 !important;
}

.dark input,
.dark select,
.dark textarea {
    background-color: #1E293B !important;
    color: #F8FAFC !important;
    border-color: #334155 !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: #FFC72C !important;
}

.dark input::placeholder {
    color: #64748B !important;
}

.dark select option {
    background-color: #1E293B !important;
    color: #F8FAFC !important;
}

.dark table thead {
    background-color: #334155 !important;
    border-color: #475569 !important;
}

.dark table thead tr th {
    color: #F8FAFC !important;
}

.dark table tbody tr {
    border-color: #334155 !important;
}

.dark table tbody tr:hover {
    background-color: #334155 !important;
}

.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

.dark .bg-slate-100 {
    background-color: #0F172A !important;
}

.dark .bg-slate-50 {
    background-color: #1E293B !important;
}

/* Specific component visual enhancements */
.dark #offline-banner {
    background-color: #D97706 !important;
}

.dark .text-primary-container {
    color: #FFC72C !important;
}

.dark .bg-primary {
    background-color: #003d79 !important; /* UT Blue signature Lighter in dark mode */
}

.dark .text-on-primary {
    color: #FFFFFF !important;
}

.dark .bg-secondary-container {
    background-color: #FFC72C !important;
    color: #002752 !important;
}

.dark .shadow-sm,
.dark .card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.14) !important;
}

/* Toast Notification Alerts */
.toast {
    animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
    from {
        transform: translateX(100%) translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}

.toast-fade-out {
    animation: fadeOut 0.4s ease forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Handover Modal Transition Scale */
#handover-modal:not(.hidden) .transform {
    transform: scale(1);
}

/* Print Media stylesheet overrides */
@media print {
    body, html, main {
        background: #ffffff !important;
        color: #000000 !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* Hide navigation bar, top header, buttons, comment forms, filters */
    aside, header, button, form, .btn, #role-select, #theme-toggle, #lang-select, #global-search, #detail-ticket-workflow-actions, #comment-form, #offline-banner {
        display: none !important;
    }
    
    /* Expand main area to fill the print page */
    main {
        margin-left: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Make sure all page views except the printed one are hidden */
    .page-view {
        display: none !important;
    }
    
    .page-view.active {
        display: block !important;
    }
    
    /* Style tables for clean printing */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-top: 20px !important;
    }
    
    th, td {
        border: 1px solid #cbd5e1 !important;
        padding: 8px !important;
        color: #000000 !important;
    }
    
    /* Force page break settings */
    tr {
        page-break-inside: avoid !important;
    }
}