/* Overrides para Classless.css y utilidades custom que no estén en Tailwind */

:root[color-scheme="dark"] {
    --primary: #16a34a;
    /* accent-green */
    --primary-contrast: #15803d;
    /* accent-green-hover */
    --primary-invert: #ffffff;
    --body-bg: #f0fdf4;
    /* light green background */
    --card-bg: #ffffff;
    /* white cards */
    --border-color: #d1fae5;
    --heading-color: #0f172a;
    --body-color: #1f2937;
    /* text-primary */
    --link-color: #16a34a;
    --link-hover-color: #15803d;
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-contrast) 100%);
    --gradient-link: linear-gradient(135deg, var(--link-color) 0%, var(--link-hover-color) 100%);
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    color-scheme: light;
}

/* Dark mode variable overrides for Classless.css */
.dark,
:root.dark {
    --primary: #3fa865;
    --primary-contrast: #16a34a;
    --primary-invert: #ffffff;
    --body-bg: #08120e;
    /* Very dark forest green (almost black) */
    --card-bg: #0f221a;
    /* Dark forest green for cards */
    --border-color: #1a3c2e;
    /* Green tinted borders */
    --heading-color: #f0fdf4;
    /* Light mint green for headings */
    --body-color: #c2eed5;
    /* Soft greenish text */
    --link-color: #4ade80;
    --link-hover-color: #22c55e;
    --shadow-color: rgba(0, 0, 0, 0.5);
    color-scheme: dark !important;
}

/* Specific component overrides for dark mode */
.dark table thead {
    background: #142e23 !important;
}

.dark table th {
    color: #8ab89e !important;
    background: #142e23 !important;
}

.dark table td {
    border-bottom: 1px solid #1a3c2e !important;
    color: #c2eed5 !important;
}

.dark table tbody tr:hover td {
    background-color: #193a2c !important;
}

/* Action button overrides in dark mode */
.dark .action-btn,
.dark .btn-action {
    color: #8ab89e !important;
}

.dark .action-btn.action-edit:hover,
.dark .btn-action.btn-action-edit:hover {
    color: #4ade80 !important;
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}

.dark .action-btn.action-delete:hover,
.dark .btn-action.btn-action-delete:hover {
    color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

/* Badge overrides in dark mode */
.dark .badge-success {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.dark .badge-danger {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.dark .badge-primary {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.dark .badge-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.dark .badge-secondary {
    background-color: rgba(138, 184, 158, 0.2) !important;
    color: #8ab89e !important;
    border: 1px solid rgba(138, 184, 158, 0.3) !important;
}

/* Global dark mode overrides for Tailwind utility classes */
.dark .bg-white {
    background-color: #0f221a !important;
    /* card background green */
}

.dark .bg-content-bg {
    background-color: #08120e !important;
    /* body background green */
}

.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: #1a3c2e !important;
}

.dark .text-gray-900,
.dark .text-gray-800,
.dark .text-gray-700 {
    color: #f0fdf4 !important;
}

.dark .text-gray-500,
.dark .text-gray-400 {
    color: #8ab89e !important;
}

.dark .bg-slate-50,
.dark .bg-gray-50 {
    background-color: #142e23 !important;
}

.dark .hover\:bg-slate-100:hover,
.dark .hover\:bg-gray-100:hover,
.dark .hover\:bg-gray-50:hover {
    background-color: #193a2c !important;
}

/* Overriding Tailwind specific dark classes to use our forest green theme instead of slate/blue */
.dark .dark\:bg-slate-900 {
    background-color: #0f221a !important;
}

.dark .dark\:bg-slate-950 {
    background-color: #08120e !important;
}

.dark .dark\:border-slate-800 {
    border-color: #1a3c2e !important;
}

.dark .dark\:bg-slate-800 {
    background-color: #142e23 !important;
}

.dark .dark\:hover\:bg-slate-800:hover {
    background-color: #142e23 !important;
}

.dark .dark\:text-slate-100 {
    color: #f0fdf4 !important;
}

.dark .dark\:text-slate-200 {
    color: #c2eed5 !important;
}

.dark .dark\:text-slate-300 {
    color: #8ab89e !important;
}

.dark .dark\:text-slate-400 {
    color: #6a957d !important;
}

/* Sidebar dark green mode overrides */
.dark #sidebar {
    background-color: #050a08 !important;
    /* Extra dark green */
    border-right-color: #0e1e17 !important;
}

.dark #sidebar .border-b,
.dark #sidebar .border-t {
    border-color: rgba(34, 197, 94, 0.1) !important;
}

.dark #sidebar .text-blue-300,
.dark #sidebar .text-blue-400 {
    color: #8ab89e !important;
}

.dark #sidebar .text-blue-300\/70,
.dark #sidebar .text-blue-400\/60 {
    color: rgba(138, 184, 158, 0.6) !important;
}

h2:after {
    display: none !important;
}

/* Ocultar barra de desplazamiento en sidebar para navegadores webkit */
.sidebar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar,
.sidebar-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

form select {
    display: block;
    width: 100%;
    padding: calc(var(--spacing-base) * var(--input-padding-factor)) 2.5rem calc(var(--spacing-base) * var(--input-padding-factor)) calc(var(--spacing-base) * var(--input-padding-factor)) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--body-bg) !important;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%234b5563' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-md) !important;
    color: var(--body-color) !important;
}

:root[color-scheme="dark"] form select {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23e2e8f0' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") !important;
}

/* Option styling to match the green/dark theme */
select option {
    background-color: #ffffff;
    color: #1f2937;
}

.dark select option,
:root.dark select option {
    background-color: #0f221a !important;
    color: #c2eed5 !important;
}

/* Focus overrides to match the green theme instead of default blue */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2) !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
}

form button,
form .btn {
    color: inherit;
}

/* Google Material Symbols overrides/helpers */
.material-symbols-outlined {
    font-size: inherit;
    /* allows Tailwind's text-sizing to control the icon size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* ==========================================================================
   Table & Badge Redesign (MoldTech ERP Style)
   ========================================================================== */

/* --- 1. Global Table Overrides --- */
table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    border-radius: var(--border-radius-md, 8px) !important;
    overflow: hidden !important;
    background-color: var(--card-bg, #ffffff) !important;
    margin-bottom: var(--spacing-base, 1.5rem) !important;
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)) !important;
}

table thead {
    background: #f8fafc !important;
}

table th {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
    text-align: left !important;
    background: #f8fafc !important;
    /* ensure background override on cell level if needed */
}

table td {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: var(--body-color, #334155) !important;
    font-size: 0.875rem !important;
    vertical-align: middle !important;
    background-color: var(--card-bg, #ffffff) !important;
    /* ensure override of standard row background */
}

table tbody tr:last-child td {
    border-bottom: none !important;
}

table tbody tr {
    transition: background-color 0.15s ease-in-out !important;
}

table tbody tr:hover td {
    background-color: #f8fafc !important;
}

/* --- 2. Soft Pastel Badges --- */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
}

.badge-success {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

.badge-danger {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fee2e2 !important;
}

.badge-primary {
    background-color: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

.badge-warning {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fef3c7 !important;
}

.badge-secondary {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* --- 3. Action Buttons & Icons --- */
.action-btn,
.btn-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 6px !important;
    color: #64748b !important;
    background-color: transparent !important;
    transition: all 0.15s ease-in-out !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.action-btn::before,
.btn-action::before {
    display: none !important;
}

.action-btn.action-edit:hover,
.btn-action.btn-action-edit:hover {
    color: #16a34a !important;
    background-color: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

.action-btn.action-delete:hover,
.btn-action.btn-action-delete:hover {
    color: #dc2626 !important;
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
}

.action-btn .material-symbols-outlined,
.btn-action .material-symbols-outlined {
    font-size: 1.15rem !important;
}

/* ==========================================================================
   Button Consistency & Roundness
   ========================================================================== */

/* 1. Universal roundness for page buttons (inside main content only to protect sidebar/navbar layout) */
main button,
main input[type="button"],
main input[type="reset"],
main input[type="submit"],
main .btn,
main a.px-6.py-2,
main a.px-4.py-2 {
    border-radius: var(--border-radius-md, 12px) !important;
}

/* 2. Style alignment for main form action buttons (Guardar, Cancelar, Eliminar) to match input sizes */
main form button[type="submit"],
main form input[type="submit"],
main form a.px-6.py-2 {
    min-height: 2.875rem !important;
    /* Matches input height perfectly */
    padding: 0.5rem 1.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
    text-decoration: none !important;
}

/* 3. Style alignment for main content list/action header links (e.g. Crear buttons) */
main a.px-4.py-2 {
    min-height: 2.875rem !important;
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
    text-decoration: none !important;
}

/* 4. Remove classless.css underline hover effect on button-like links inside main */
main button::before,
main input[type="button"]::before,
main input[type="reset"]::before,
main input[type="submit"]::before,
main .btn::before,
main a.px-6.py-2::before,
main a.px-4.py-2::before {
    display: none !important;
}

/* 5. Keep accent buttons readable on hover */
a.bg-accent:hover,
a.bg-accent:hover *,
.bg-accent:hover,
.bg-accent:hover * {
    color: #000000 !important;
}

/* Ensure high contrast black text on solid green, warning, and accent buttons in dark mode */
.dark main button:not(.danger):not(.outline):not(.action-btn):not([class*="bg-transparent"]):not([class*="btn-action"]):not(.salida-tab-btn):not(.transport-btn),
.dark main input[type="button"]:not(.danger):not(.outline):not(.action-btn):not([class*="bg-transparent"]):not(.transport-btn),
.dark main input[type="submit"],
.dark .bg-accent,
.dark button.success,
.dark button.warning {
    color: #000000 !important;
}

.dark main button:not(.danger):not(.outline):not(.action-btn):not([class*="bg-transparent"]):not([class*="btn-action"]):not(.salida-tab-btn):not(.transport-btn) *,
.dark main input[type="button"]:not(.danger):not(.outline):not(.action-btn):not([class*="bg-transparent"]):not(.transport-btn) *,
.dark main input[type="submit"] *,
.dark .bg-accent *,
.dark button.success *,
.dark button.warning * {
    color: #000000 !important;
}

/* Sidebar and Navbar toggle/icon buttons contrast overrides */
#mobile-sidebar-toggle,
#theme-toggle,
#sidebar-toggle,
#mobile-sidebar-close {
    color: #ffffff !important;
}

#mobile-sidebar-toggle:hover,
#theme-toggle:hover,
#sidebar-toggle:hover,
#mobile-sidebar-close:hover {
    color: #f0fdf4 !important;
}

.dark #mobile-sidebar-toggle,
.dark #theme-toggle,
.dark #sidebar-toggle,
.dark #mobile-sidebar-close {
    color: #000000 !important;
}

.dark #mobile-sidebar-toggle:hover,
.dark #theme-toggle:hover,
.dark #sidebar-toggle:hover,
.dark #mobile-sidebar-close:hover {
    color: #0f1f19 !important;
}

/* ==========================================================================
   Clean Custom Checkbox Redesign
   ========================================================================== */

/* Define variables for checkbox styling */
:root {
    --checkbox-border: #94a3b8;
    --checkbox-bg-disabled: #f1f5f9;
    --checkbox-border-disabled: #cbd5e1;
}

.dark,
:root.dark {
    --checkbox-border: #475569;
    --checkbox-bg-disabled: #1e293b;
    --checkbox-border-disabled: #334155;
}

/* Base custom checkbox styling */
input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--card-bg, #ffffff) !important;
    border: 1.5px solid var(--checkbox-border) !important;
    border-radius: 6px !important;
    /* matches ERP design style */
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)) !important;
}

/* Sizing compatibility helper for common Tailwind classes */
input[type="checkbox"],
input[type="checkbox"].w-5 {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

input[type="checkbox"].w-4 {
    width: 1rem !important;
    height: 1rem !important;
}

input[type="checkbox"].w-6 {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* Hover state: highlight with primary accent color */
input[type="checkbox"]:hover:not(:disabled) {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
}

/* Checked state: fill background with primary accent color */
input[type="checkbox"]:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Checkmark using pseudo-element and clip-path */
input[type="checkbox"]::before {
    content: "" !important;
    width: 55% !important;
    height: 55% !important;
    background-color: var(--primary-invert, #ffffff) !important;
    transform: scale(0) !important;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    clip-path: polygon(14% 44%, 0 58%, 38% 96%, 100% 21%, 86% 7%, 38% 68%) !important;
}

input[type="checkbox"]:checked::before {
    transform: scale(1) !important;
}

/* Indeterminate state (e.g. partial selection) */
input[type="checkbox"]:indeterminate {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

input[type="checkbox"]:indeterminate::before {
    content: "" !important;
    width: 50% !important;
    height: 12.5% !important;
    background-color: var(--primary-invert, #ffffff) !important;
    transform: scale(1) !important;
    clip-path: none !important;
    border-radius: 1px !important;
}

/* Focus outline for accessibility */
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* Disabled state styling */
input[type="checkbox"]:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: var(--checkbox-bg-disabled) !important;
    border-color: var(--checkbox-border-disabled) !important;
}

/* Show/hide password toggler styles */
.password-input-wrapper {
    margin-bottom: var(--spacing-base);
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.password-input-wrapper input {
    margin-bottom: 0 !important;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    background-repeat: no-repeat !important;
    background-position: 0.75rem center !important;
    background-size: 1rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23989fab' viewBox='0 0 16 16'%3E%3Cpath transform='rotate(-45 8 8)' d='M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2zM2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E") !important;
}

.password-input-wrapper .toggle-password-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    width: auto !important;
    box-shadow: none !important;
    cursor: pointer;
    color: #94a3b8;
    /* neutral-400 */
    transition: color 0.15s ease-in-out;
}

.password-input-wrapper .toggle-password-btn:hover {
    color: #475569;
    /* neutral-600 */
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

.password-input-wrapper .toggle-password-btn:active {
    transform: translateY(-50%) !important;
}

.dark .password-input-wrapper .toggle-password-btn {
    color: #64748b;
    /* neutral-500 */
}

.dark .password-input-wrapper .toggle-password-btn:hover {
    color: #94a3b8;
    /* neutral-400 */
}

/* Body base overrides */
body {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Reusable Toast Notification styles */
@keyframes toast-progress {
  from { width: 100%; }
  to { width: 0%; }
}
.toast-progress-bar {
  animation: toast-progress var(--duration) linear forwards;
}
.dark .toast-notification {
  background-color: rgba(20, 46, 35, 0.95) !important; /* Lighter forest green (slate-800 shade) for differentiation */
  border-color: rgba(26, 60, 46, 0.9) !important;      /* Matching dark-green border */
}