/* Homebrew System - Custom Styles */

:root {
    --primary-color: #d97706;
    --secondary-color: #92400e;
    --success-color: #059669;
    --danger-color: #dc2626;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

.card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.table-hover tbody tr:hover {
    background-color: rgba(217, 119, 6, 0.1);
}

footer {
    margin-top: auto;
}

/* ===== DROPDOWNS / SELECTS =====
   Cualquier card que contenga un <select> debe dejar salir el desplegable
   por encima del contenido que haya debajo en la página.
   El transform del hover crea un nuevo stacking context que tape el select,
   por eso se anula también en esas cards.
   =============================== */
.card:has(select),
.card:has(.form-select) {
    overflow: visible;
    position: relative;
    z-index: 10;
}
.card:has(select):hover,
.card:has(.form-select):hover {
    transform: none;
}

/* ===== RESPONSIVE TABLES =====
   Patrón usado en todas las tablas de la app:
   - Columnas secundarias: class="d-none d-md-table-cell" en <th> y <td>
   - Acciones desktop: <div class="d-none d-md-flex btn-group btn-group-sm">
   - Acciones mobile:  <div class="d-md-none dropdown"> con botón ⋮
   =============================== */

/* Columna de acciones: ancho mínimo en móvil */
@media (max-width: 767.98px) {
    .table-acciones {
        width: 44px !important;
        padding: 0.35rem 0.4rem !important;
    }
    /* Dropdown ⋮ más fácil de pulsar en táctil */
    .btn-dots {
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* En móvil las columnas extra ya están ocultas, no necesitamos
       scroll horizontal — lo desactivamos para que el dropdown ⋮
       pueda salir del contenedor sin quedar recortado */
    .table-responsive {
        overflow: visible;
    }
}

/* ===== DARK MODE OVERRIDES ===== */
[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(217, 119, 6, 0.15);
}

/* Tom Select en modo oscuro */
[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option:hover,
[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .option.active {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-dropdown .optgroup-header {
    color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .ts-wrapper .ts-control input::placeholder {
    color: var(--bs-secondary-color);
}