/* Alpine.js cloak rule */
[x-cloak] {
    display: none !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0b0f19;
}

::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Smooth Transitions */
body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Chart Canvas container fix */
canvas {
    max-width: 100% !important;
}

/* Shared settings navigation: regular links preserve URLs and browser history. */
.settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
}
.settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}
.settings-tab:hover, .settings-subtab:hover { background: #f1f5f9; }
.settings-tab[aria-current="page"] { background: #e0e7ff; color: #4338ca; }
.settings-subnav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.settings-subtab {
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    border-bottom: 2px solid transparent;
}
.settings-subtab[aria-current="page"] { color: #4338ca; border-bottom-color: #4f46e5; }
.settings-tab:focus-visible, .settings-subtab:focus-visible,
.settings-back-link:focus-visible, [data-settings-entry]:focus-visible,
.settings-server-import > summary:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 3px;
}
.dark .settings-nav { background: #0f172a; border-color: #1e293b; }
.dark .settings-tab, .dark .settings-subtab { color: #cbd5e1; }
.dark .settings-tab:hover, .dark .settings-subtab:hover { background: #1e293b; }
.dark .settings-tab[aria-current="page"] { background: #312e81; color: #e0e7ff; }
.dark .settings-subtab[aria-current="page"] { color: #c7d2fe; border-bottom-color: #818cf8; }
@media (max-width: 639px) {
    .settings-page header { flex-wrap: wrap; }
    .settings-page header > div:last-child { flex-wrap: wrap; }
    .settings-page main { padding: 1rem; }
    .settings-tab { flex: 1 1 calc(50% - 0.5rem); padding: 0.75rem; }
    .settings-shell { min-width: 0; overflow-wrap: anywhere; }
    .settings-shell input, .settings-shell select, .settings-shell textarea { max-width: 100%; min-width: 0; }
}