/* e-Arsip Pro — application-level styles and responsive enhancements */
:root {
    --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.3);
    --sidebar-width: 16rem;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button, label, select, input[type="file"] { -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Keep custom scrollbars consistent with the dark navigation area. */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #475569 rgba(15, 23, 42, 0.08);
}
.custom-scrollbar::-webkit-scrollbar { width: 7px; height: 7px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.08); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #64748b; border-radius: 999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }

input[type="file"]::file-selector-button {
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

table { border-collapse: separate; border-spacing: 0; }
td { vertical-align: middle; }

/* Avoid accidental horizontal overflow from long URLs and generated names. */
.font-mono, a, td, th { overflow-wrap: anywhere; }

/* On small screens the sidebar becomes a compact top navigation. */
@media (max-width: 767px) {
    #sidebar {
        min-height: auto !important;
        position: sticky;
        top: 0;
    }

    #sidebar nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 13rem;
        overflow-y: auto;
    }

    #sidebar nav > div { grid-column: 1 / -1; }
    #sidebar .nav-item { min-height: 2.75rem; padding: 0.65rem 0.75rem; font-size: 0.72rem; }
    #sidebar .nav-item svg { flex: 0 0 auto; width: 1rem; height: 1rem; }
    main { height: auto !important; min-height: calc(100vh - 1rem); }
    #toastNotification { left: 1rem; right: 1rem; top: 1rem; }
    #toastInner { justify-content: center; }
}

@media (max-width: 480px) {
    main { padding: 0.75rem !important; }
    header { padding: 1rem !important; }
    header h2 { font-size: 1.15rem; }
    #archiveCanvas { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body { background: #fff !important; color: #111827 !important; }
    #loginModal, #toastNotification, #sidebar, header, button { display: none !important; }
    main { display: block !important; height: auto !important; overflow: visible !important; max-width: none !important; }
}