/**
 * Design System - Telas sem mapa (upload, envio_dados, gerenciamento_banco, login, geoserver, etc.)
 * Não se aplica a: index, cliente_map, URS_disponiveis, contratantes_disponiveis, modelos_venda, gerencial_ses, mapa_localizacao*
 */

/* Tema claro – cores da interface (header teal, fundo branco, verde Excel, azul claro destaque) */
:root {
    --primary: #0087A8;
    --primary-hover: #006d8a;
    --primary-light: #00b2d8;
    --secondary: #2c3e50;
    --text: #2c3e50;
    --text-muted: #6c757d;
    --bg: #ffffff;
    --bg-elevated: #f8f9fa;
    --border: #dee2e6;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --radius: 10px;
    --radius-sm: 6px;
    --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --info-bg: #e7f5ff;
    --info-border: #74c0fc;
}

/* Tema escuro */
[data-theme="dark"] {
    --primary: #00b2d8;
    --primary-hover: #0087a8;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --bg: #0b1220;
    --bg-elevated: #1e293b;
    --border: #334155;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.35);
}


/* Base - aplicado quando design-system.css é carregado em telas do escopo */
body.ds-app,
body[data-ds="true"] {
    font-family: var(--font-sans);
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* Tema claro: alerta informativo (ex.: "Nenhum arquivo encontrado") em azul claro */
body[data-ds="true"]:not([data-theme="dark"]) .alert-info {
    background-color: var(--info-bg);
    border-color: var(--info-border);
    color: #0c8599;
}

body[data-theme="dark"].ds-app,
body[data-theme="dark"][data-ds="true"] {
    background: linear-gradient(135deg, #0c1424, #0e1828 40%, #0b1220);
}


/* Navbar padrão */
.navbar-app {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
    border: none;
    box-shadow: var(--shadow);
}

.navbar-app .navbar-brand,
.navbar-app .nav-link,
.navbar-app .dropdown-toggle {
    color: #fff !important;
}

.navbar-app .nav-link:hover,
.navbar-app .dropdown-toggle:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-app .dropdown-menu {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.navbar-app .dropdown-item {
    color: var(--text);
}

.navbar-app .dropdown-item:hover {
    background: var(--primary);
    color: #fff;
}

/* Tema: label e botões inativos com bom contraste na navbar teal */
body:not([data-theme="dark"]) .navbar-app .theme-label,
body:not([data-theme="dark"]) .navbar-app #theme-label {
    color: #fff !important;
}
body:not([data-theme="dark"]) .navbar-app .btn-group .btn-outline-light:not(.active) {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.7);
}
body:not([data-theme="dark"]) .navbar-app .btn-group .btn-outline-light:not(.active):hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* Páginas com seletor pill: navbar sempre azul-petróleo como na referência */
.navbar-app:has(.theme-pill) {
    background: linear-gradient(135deg, #0087A8 0%, #006d8a 100%) !important;
    border-color: transparent;
}
.navbar-app:has(.theme-pill) .navbar-brand,
.navbar-app:has(.theme-pill) .nav-link,
.navbar-app:has(.theme-pill) .dropdown-toggle,
.navbar-app:has(.theme-pill) [class*="theme-label"],
.navbar-app:has(.theme-pill) #theme-label {
    color: #fff !important;
}

/* Seletor de tema em pill (igual à referência: borda clara, Claro ativo = branco+teal, Escuro inativo = teal+branco) */
.theme-pill {
    display: inline-flex;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
}
.theme-pill .btn {
    border: none;
    border-radius: 9999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.theme-pill .btn-theme-light {
    background: #0087A8;
    color: rgba(255, 255, 255, 0.95);
}
.theme-pill .btn-theme-light:hover {
    background: #006d8a;
    color: #fff;
}
.theme-pill .btn-theme-light.active {
    background: #fff;
    color: #0087A8;
}
.theme-pill .btn-theme-dark {
    background: #0087A8;
    color: rgba(255, 255, 255, 0.95);
}
.theme-pill .btn-theme-dark:hover {
    background: #006d8a;
    color: #fff;
}
.theme-pill .btn-theme-dark.active {
    background: #fff;
    color: #0087A8;
}

[data-theme="dark"] .navbar-app:not(:has(.theme-pill)) {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    border-color: var(--border);
}
[data-theme="dark"] .navbar-app:not(:has(.theme-pill)) .navbar-brand,
[data-theme="dark"] .navbar-app:not(:has(.theme-pill)) .nav-link,
[data-theme="dark"] .navbar-app:not(:has(.theme-pill)) .dropdown-toggle {
    color: var(--text) !important;
}

[data-theme="dark"] .navbar-app .navbar-brand,
[data-theme="dark"] .navbar-app .nav-link,
[data-theme="dark"] .navbar-app .dropdown-toggle {
    color: var(--text) !important;
}

[data-theme="dark"] .navbar-app .dropdown-menu {
    background: var(--bg-elevated);
    border-color: var(--border);
}


/* Card padrão */
.card-app {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--bg-elevated);
    color: var(--text);
}

.card-app .card-header {
    background: linear-gradient(120deg, var(--primary), var(--primary-hover));
    color: #fff;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0.75rem 1rem;
}

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

[data-theme="dark"] .card-app {
    background: var(--bg-elevated);
    border-color: var(--border);
}

[data-theme="dark"] .card-app .card-header {
    background: linear-gradient(120deg, var(--primary), var(--primary-hover));
    border-color: var(--border);
}

/* Botão primário padrão */
.btn-primary-app {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn-primary-app:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

/* Form controls - uso das variáveis em telas que adotam ds */
body.ds-app .form-control:focus,
body[data-ds="true"] .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 135, 168, 0.25);
}

[data-theme="dark"] body.ds-app .form-control,
[data-theme="dark"] body[data-ds="true"] .form-control {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] body.ds-app .form-control:focus,
[data-theme="dark"] body[data-ds="true"] .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 178, 216, 0.25);
}

/* Tema escuro - componentes genéricos (upload, envio_dados, etc.) */
[data-theme="dark"] body[data-ds="true"] .card,
[data-theme="dark"] body[data-ds="true"] .table-responsive {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] body[data-ds="true"] .table { color: var(--text); }
[data-theme="dark"] body[data-ds="true"] .table th,
[data-theme="dark"] body[data-ds="true"] .table td { border-color: var(--border); }
[data-theme="dark"] body[data-ds="true"] .table th:hover { background-color: var(--border); }
[data-theme="dark"] body[data-ds="true"] .form-control,
[data-theme="dark"] body[data-ds="true"] .form-select {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] body[data-ds="true"] .btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}
[data-theme="dark"] body[data-ds="true"] .btn-outline-primary:hover {
    background: var(--primary);
    color: var(--bg);
}
[data-theme="dark"] body[data-ds="true"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] body[data-ds="true"] .dropdown-menu { background: var(--bg-elevated); border-color: var(--border); }
[data-theme="dark"] body[data-ds="true"] .dropdown-item { color: var(--text); }
[data-theme="dark"] body[data-ds="true"] .dropdown-item:hover { background: var(--border); color: var(--text); }

/* Admin / listagens: Bootstrap text-dark e table-light no tema escuro */
[data-theme="dark"] body[data-ds="true"] .text-dark {
    color: var(--text) !important;
}
[data-theme="dark"] body[data-ds="true"] thead.table-light th {
    background-color: var(--bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] body[data-ds="true"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}
[data-theme="dark"] body[data-ds="true"] .breadcrumb-item a {
    color: var(--primary-light);
}
[data-theme="dark"] body[data-ds="true"] .breadcrumb-item.active {
    color: var(--text-muted);
}
[data-theme="dark"] body[data-ds="true"] .card-footer {
    background: var(--bg-elevated) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}
[data-theme="dark"] body[data-ds="true"] .alert-info {
    background-color: rgba(0, 178, 216, 0.12);
    border-color: var(--primary);
    color: var(--text);
}