:root {
    color-scheme: light;
    --app-bg: #f8fafc;
    --app-surface: #ffffff;
    --app-surface-muted: #f1f5f9;
    --app-text: #0f172a;
    --app-muted: #64748b;
    --app-border: #cbd5e1;
    --app-accent: #047857;
    --app-accent-hover: #065f46;
}

* {
    box-sizing: border-box;
}

/* Evita flash de conteúdo protegido antes do routeGuard */
html.auth-pending body {
    visibility: hidden;
}

body {
    background: var(--app-bg) !important;
    color: var(--app-text) !important;
    transition: background-color 160ms ease, color 160ms ease;
}

body > header,
#message,
#table-dashboard,
#tender-list,
#details,
#new-tender-form,
#new-payment-form {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
}

#new-tender-form,
#new-payment-form,
#details {
    margin-bottom: 2rem;
}

#resident-payment-table,
#tender-list .overflow-x-auto {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

#resident-payment-table table {
    min-width: 36rem;
    width: 100%;
}

#tender-list table {
    min-width: 42rem;
}

#resident-payment-table th,
#resident-payment-table td,
#tender-list th,
#tender-list td {
    white-space: nowrap;
}

table {
    border-collapse: collapse;
}

.dashboard-data-table {
    width: 100%;
    table-layout: fixed;
}

.dashboard-data-table th,
.dashboard-data-table td {
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
}

.dashboard-payment-table th:nth-child(1),
.dashboard-payment-table td:nth-child(1) {
    width: 28%;
}

.dashboard-payment-table th:nth-child(2),
.dashboard-payment-table td:nth-child(2) {
    width: 20%;
}

.dashboard-payment-table th:nth-child(3),
.dashboard-payment-table td:nth-child(3) {
    width: 20%;
}

.dashboard-payment-table th:nth-child(4),
.dashboard-payment-table td:nth-child(4) {
    width: 32%;
}

.dashboard-tender-table th:nth-child(1),
.dashboard-tender-table td:nth-child(1) {
    width: 30%;
}

.dashboard-tender-table th:nth-child(2),
.dashboard-tender-table td:nth-child(2) {
    width: 18%;
}

.dashboard-tender-table th:nth-child(3),
.dashboard-tender-table td:nth-child(3) {
    width: 22%;
}

.dashboard-tender-table th:nth-child(4),
.dashboard-tender-table td:nth-child(4) {
    width: 15%;
}

.dashboard-tender-table th:nth-child(5),
.dashboard-tender-table td:nth-child(5) {
    width: 15%;
}

button,
input,
select,
textarea,
form,
[class*="rounded-2xl"],
[class*="rounded-3xl"],
[class*="rounded-full"] {
    border-radius: 0.375rem !important;
}

button,
input,
select,
textarea {
    min-height: 2.75rem;
}

button {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(16, 185, 129, 0.35);
    outline-offset: 2px;
}

input,
select,
textarea {
    border-color: var(--app-border) !important;
    background-color: var(--app-surface) !important;
    color: var(--app-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--app-muted);
}

#theme-toggle {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

#theme-toggle:hover {
    border-color: var(--app-accent);
    color: var(--app-accent);
}

body.dark {
    color-scheme: dark;
    --app-bg: #0f172a;
    --app-surface: #1e293b;
    --app-surface-muted: #273449;
    --app-text: #e2e8f0;
    --app-muted: #94a3b8;
    --app-border: #475569;
    --app-accent: #34d399;
    --app-accent-hover: #6ee7b7;
}

body.dark .bg-white,
body.dark .bg-slate-50,
body.dark .bg-slate-100 {
    background-color: var(--app-surface) !important;
}

body.dark .bg-green-400 {
    background-color: #166534 !important;
}

body.dark .bg-slate-900 {
    background-color: #334155 !important;
}

body.dark .bg-gray-800,
body.dark .bg-slate-900\/60 {
    background-color: rgba(2, 6, 23, 0.82) !important;
}

body.dark .text-slate-900,
body.dark .text-slate-700,
body.dark .text-gray-800 {
    color: var(--app-text) !important;
}

body.dark .text-slate-600,
body.dark .text-slate-500 {
    color: var(--app-muted) !important;
}

body.dark .border-slate-200,
body.dark .border-slate-300,
body.dark .border-gray-300,
body.dark .ring-slate-200 {
    border-color: var(--app-border) !important;
    --tw-ring-color: var(--app-border) !important;
}

body.dark .hover\:bg-slate-200:hover,
body.dark .hover\:bg-gray-100:hover {
    background-color: var(--app-surface-muted) !important;
}

body.dark table {
    color: var(--app-text);
}

body.dark .text-blue-700,
body.dark .text-blue-900,
body.dark .text-emerald-700 {
    color: var(--app-accent) !important;
}

@media (min-width: 640px) {
    #theme-toggle {
        right: 1.5rem;
        bottom: 1.5rem;
    }
}

@media (max-width: 639px) {
    body {
        overflow-x: hidden;
    }

    #resident-payment-table,
    #tender-list .overflow-x-auto {
        margin-inline: -1rem;
        padding-inline: 1rem;
        width: calc(100% + 2rem);
    }

    #resident-payment-table table,
    #tender-list table {
        min-width: 36rem;
        table-layout: auto;
    }

    #resident-payment-table th,
    #resident-payment-table td,
    #tender-list th,
    #tender-list td {
        padding: 0.75rem 0.875rem;
    }
}

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