/* ==========================================================================
   HJ Cambio - Tailwind CSS Extensions & Custom Components
   This file contains only custom components that cannot be built with Tailwind utilities alone.
   Most styling should be done with Tailwind utility classes directly in .razor files.
   ========================================================================== */

/* ==========================================================================
   Toast Notifications
   ========================================================================== */

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(calc(100% + 1rem));
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-slide-in {
    animation: toastSlideIn 0.25s ease-out forwards;
}

/* ==========================================================================
   Global Resets - Ensure full width layout (AGGRESSIVE RESET)
   ========================================================================== */

* {
    box-sizing: border-box !important;
}

html {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

body {
    width: 100% !important;
    max-width: none !important;
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

#app {
    width: 100% !important;
    max-width: none !important;
}

/* Remove any container max-width constraints */
.container,
.container-fluid {
    max-width: none !important;
    width: 100% !important;
}

/* Force main layout to be full width */
main,
.page-wrapper,
.wrapper,
.content-wrapper {
    max-width: none !important;
    width: 100% !important;
}

/* ==========================================================================
   Custom Animations (Not available in Tailwind by default)
   ========================================================================== */

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fadeInRight {
    animation: fadeInRight 0.3s ease-out;
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.progress-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.progress-gradient {
    background: linear-gradient(90deg, #3b82f6, #2563eb, #1d4ed8, #2563eb, #3b82f6);
    background-size: 200% 100%;
    animation: gradient-shift 2s ease infinite;
}

@keyframes scale-in {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-scale-in {
    animation: scale-in 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in;
}

/* ==========================================================================
   Modal/Dialog Overlay Fix - Critical z-index management
   ========================================================================== */

/* Reset any transform on parent elements that could affect fixed positioning */
#app, #app > *, main, .overflow-auto {
    transform: none !important;
}

/* Modal backdrop - always on top of everything */
.fixed.inset-0.bg-black.bg-opacity-50,
.fixed.inset-0[class*="backdrop"],
.modal-backdrop,
.fixed.inset-0[style*="z-index"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 999999 !important;
    backdrop-filter: blur(2px);
}

/* Modal content - above backdrop */
.fixed.inset-0 > div,
.modal-dialog,
.modal-content,
div[style*="z-index: 10000"] {
    position: relative;
    z-index: 1000000 !important;
}

/* Ensure modals are always visible and on top */
div[style*="z-index: 9999"] {
    position: fixed !important;
    z-index: 999999 !important;
}

/* ==========================================================================
   Button Styling - Override Bootstrap defaults
   ========================================================================== */

/* Force black background for primary action buttons */
button.bg-gray-900 {
    background-color: #111827 !important;
    color: white !important;
}

button.bg-gray-900:hover {
    background-color: #1f2937 !important;
}

button.bg-gray-900:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   Consistent Theme States
   ========================================================================== */

:root {
    --hj-brand: #343434;
    --hj-brand-strong: #1a1a1a;
    --hj-brand-muted: #5a5a5a;
    --hj-primary: #343434;
    --hj-primary-strong: #1a1a1a;
    --hj-primary-soft: #f7f7f7;
    --hj-primary-border: #d2d2d2;
    --hj-surface: #ffffff;
    --hj-surface-muted: #fbfbfb;
    --hj-border: #d2d2d2;
    --hj-text: #111827;
    --hj-text-muted: #6b7280;
    --hj-danger: #dc2626;
    --hj-success: #16a34a;
    --hj-warning: #d97706;
    --hj-focus-ring: rgba(52, 52, 52, 0.18);
    --hj-radius: 0.5rem;
    --hj-shadow: 0 1px 2px 0 rgba(17, 24, 39, 0.06);
    --hj-shadow-modal: 0 20px 25px -5px rgba(17, 24, 39, 0.18), 0 8px 10px -6px rgba(17, 24, 39, 0.14);
}

body {
    color: var(--hj-text);
    background-color: #f9fafb;
}

.hj-page {
    padding: 1.5rem;
}

.hj-page-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hj-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.hj-page-title {
    color: var(--hj-text);
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    letter-spacing: 0;
}

.hj-page-subtitle {
    margin-top: 0.25rem;
    color: var(--hj-text-muted);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.hj-panel,
.hj-card {
    background-color: var(--hj-surface);
    border: 1px solid var(--hj-border);
    border-radius: var(--hj-radius);
    box-shadow: var(--hj-shadow);
}

.hj-panel-muted {
    background-color: var(--hj-surface-muted);
    border: 1px solid var(--hj-border);
    border-radius: var(--hj-radius);
}

.hj-panel-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background-color: var(--hj-surface-muted);
}

.hj-modal-card {
    background-color: var(--hj-surface);
    border-radius: 0.75rem;
    box-shadow: var(--hj-shadow-modal);
}

.hj-modal-backdrop {
    z-index: 999999;
}

.hj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--hj-radius);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.hj-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hj-btn-primary {
    color: #fff !important;
    background-color: var(--hj-brand) !important;
    border-color: var(--hj-brand) !important;
}

.hj-btn-primary:hover:not(:disabled) {
    background-color: var(--hj-brand-strong) !important;
    border-color: var(--hj-brand-strong) !important;
}

.hj-btn-secondary {
    color: var(--hj-brand) !important;
    background-color: #fff !important;
    border-color: var(--hj-border) !important;
}

.hj-btn-secondary:hover:not(:disabled) {
    background-color: var(--hj-surface-muted) !important;
}

.hj-btn-muted {
    color: var(--hj-brand) !important;
    background-color: #ededed !important;
    border-color: #d2d2d2 !important;
}

.hj-btn-muted:hover:not(:disabled) {
    background-color: #d2d2d2 !important;
}

.hj-btn-danger {
    color: #fff !important;
    background-color: var(--hj-danger) !important;
    border-color: var(--hj-danger) !important;
}

.hj-btn-danger:hover:not(:disabled) {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

.hj-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9999px;
    color: var(--hj-text-muted);
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.hj-btn-icon:hover {
    color: var(--hj-text);
    background-color: #f3f4f6;
}

.hj-input,
.hj-select,
.hj-textarea {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--hj-border);
    border-radius: var(--hj-radius);
    background-color: var(--hj-surface);
    color: var(--hj-text);
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.hj-filter-control {
    width: auto;
}

.hj-filter-control.hj-select {
    width: auto;
    min-width: 8rem;
}

.hj-modal-fx {
    max-width: 780px;
}

.hj-input:focus,
.hj-select:focus,
.hj-textarea:focus {
    border-color: var(--hj-brand) !important;
    box-shadow: 0 0 0 3px var(--hj-focus-ring) !important;
    outline: none !important;
}

.hj-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid var(--hj-border);
    background-color: var(--hj-surface-muted);
    color: var(--hj-brand);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
}

.hj-table {
    width: 100%;
}

.hj-table thead {
    background-color: var(--hj-surface-muted);
    border-bottom: 1px solid var(--hj-border);
}

.hj-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    color: #6b7280;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
}

.hj-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control,
.form-select {
    min-height: 2.5rem;
    border-color: var(--hj-border) !important;
    border-radius: 0.5rem !important;
    background-color: var(--hj-surface) !important;
    color: var(--hj-text) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover,
.form-control:hover,
.form-select:hover {
    border-color: #9ca3af !important;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--hj-primary) !important;
    box-shadow: 0 0 0 3px var(--hj-focus-ring) !important;
    outline: none !important;
}

input[readonly],
textarea[readonly],
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled {
    background-color: #f3f4f6 !important;
    color: var(--hj-text-muted) !important;
    cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--hj-primary);
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.nav-link:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--hj-focus-ring) !important;
}

.active,
.nav-link.active,
a.active,
[aria-selected="true"] {
    border-color: var(--hj-primary-border) !important;
}

.nav-link.active,
a.active {
    font-weight: 600;
}

[aria-selected="true"],
.tab-active,
.tabs button.active,
.tabs [role="tab"][aria-selected="true"] {
    color: var(--hj-primary-strong) !important;
    background-color: var(--hj-primary-soft) !important;
    border-color: var(--hj-primary-border) !important;
}

table {
    color: var(--hj-text);
}

thead th,
table th {
    color: #374151;
    background-color: var(--hj-surface-muted);
    font-weight: 600;
}

tbody tr {
    transition: background-color 0.12s ease;
}

tbody tr:hover {
    background-color: #f9fafb;
}

tbody tr.active,
tbody tr.selected,
tr[aria-selected="true"] {
    background-color: var(--hj-primary-soft) !important;
    box-shadow: inset 3px 0 0 var(--hj-primary);
}

.card,
.ibox,
.panel,
.modal-content,
.rounded-xl,
.rounded-lg {
    border-color: #e5e7eb;
}

.badge,
[class*="badge-"],
[class*="rounded-full"] {
    line-height: 1.15;
}

.text-muted,
.text-gray-500,
.text-gray-600 {
    color: var(--hj-text-muted);
}

.bg-blue-600,
.bg-indigo-600 {
    background-color: var(--hj-primary) !important;
}

.hover\:bg-blue-700:hover,
.hover\:bg-indigo-700:hover {
    background-color: var(--hj-primary-strong) !important;
}

.border-blue-500,
.border-indigo-500 {
    border-color: var(--hj-primary) !important;
}

.text-blue-600,
.text-indigo-600,
.text-indigo-700 {
    color: var(--hj-primary-strong) !important;
}

.bg-blue-50,
.bg-indigo-50 {
    background-color: var(--hj-primary-soft) !important;
}

.border-blue-100,
.border-indigo-100,
.border-indigo-200 {
    border-color: var(--hj-primary-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    border-color: var(--hj-primary) !important;
    background: var(--hj-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--hj-primary-strong) !important;
    border-color: var(--hj-primary-border) !important;
    background: var(--hj-primary-soft) !important;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white;
    }
}