/* Custom Theme Styling with Gradient Backgrounds (#667eea to #764ba2) */

/* Define CSS variables for our gradient colors */
:root {
    --gradient-start: #667eea;
    --gradient-end: #764ba2;
    --gradient: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    --gradient-reverse: linear-gradient(135deg, var(--gradient-end) 0%, var(--gradient-start) 100%);
}

/* Card gradients */
.card {
    background: var(--gradient) !important;
    border: none !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
}

.card-body {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 0.475rem !important;
    margin: 0.5rem !important;
}

.card-header {
    background: transparent !important;
    border-bottom: none !important;
    color: #ffffff !important;
}

.card-footer {
    background: transparent !important;
    border-top: none !important;
}

/* Button gradients */
.btn-primary {
    background: var(--gradient) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background: var(--gradient-reverse) !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Secondary buttons with subtle gradient */
.btn-secondary {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #cbd5e0 0%, #e2e8f0 100%) !important;
    box-shadow: 0 5px 15px rgba(203, 213, 224, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Success button */
.btn-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #38a169 0%, #48bb78 100%) !important;
    box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Danger button */
.btn-danger {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #e53e3e 0%, #f56565 100%) !important;
    box-shadow: 0 5px 15px rgba(245, 101, 101, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Warning button */
.btn-warning {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #dd6b20 0%, #ed8936 100%) !important;
    box-shadow: 0 5px 15px rgba(237, 137, 54, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Info button */
.btn-info {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #3182ce 0%, #4299e1 100%) !important;
    box-shadow: 0 5px 15px rgba(66, 153, 225, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Gradient menu */
.app-sidebar-menu .menu-item .menu-link.active {
    background: var(--gradient) !important;
}

/* Hover effect for menu items */
.app-sidebar-menu .menu-item .menu-link:hover:not(.active) {
    background-color: rgba(102, 126, 234, 0.1) !important;
}

/* Gradient badges */
.badge-primary {
    background: var(--gradient) !important;
}

/* Navbar gradient */
.app-header {
    background: var(--gradient) !important;
}

/* Tables */
.table th, table th {
    background: var(--gradient) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2) !important;
    padding: 0.65rem 0.65rem !important;
}

.table td, table td {
    color: #000000 !important; /* Pure black for maximum clarity */
    font-weight: 500 !important; /* Make font bolder */
    font-size: 13px !important; /* Slightly larger font */
    letter-spacing: 0.2px !important; /* Better letter spacing for readability */
    padding: 0.5rem 0.5rem !important; /* More padding for better spacing */
}

/* Special treatment for data values in tables */
.table td[data-kt-value], table td[data-kt-value],
.table td.amount, table td.amount,
.table td.value, table td.value,
.table td.number, table td.number,
.table td:nth-child(n+3):not(:last-child), table td:nth-child(n+3):not(:last-child) {
    font-weight: 600 !important;
    color: #000000 !important;
}

/* Override any light colors in table cells with darker ones */
.table td span, table td span,
.table td a, table td a,
.table td div, table td div {
    color: inherit !important;
    font-weight: inherit !important;
}

/* Improve table row contrast */
.table tbody tr:nth-child(odd), table tbody tr:nth-child(odd) {
    background-color: #f8f9fa !important;
}

.table tbody tr:nth-child(even), table tbody tr:nth-child(even) {
    background-color: #ffffff !important;
}

/* Hover state for table rows */
.table tbody tr:hover, table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05) !important;
}

/* Better borders for table cells */
.table th:not(:last-child), .table td:not(:last-child),
table th:not(:last-child), table td:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Ensure text wrapping works properly */
.table td, table td {
    white-space: normal !important;
    word-break: normal !important;
}

/* Fix for tiny cells in responsive tables */
@media (max-width: 992px) {
    .table td, table td {
        min-width: 100px !important;
    }
}

/* Override inline styles from app.blade.php */
table th {
    background: var(--gradient) !important; /* Override the existing background-color */
    color: #ffffff !important; /* Force white text for better contrast on gradient */
}

.table th, table th {
    padding: 0.65rem 0.65rem !important; /* Override existing padding */
    font-size: 13px !important; /* Override existing font size */
}

.table td, table td {
    padding: 0.5rem 0.5rem !important; /* Override existing padding */
    font-size: 13px !important; /* Override existing font size */
}

/* Add a slight shadow effect to make text pop more */
.table td, table td {
    text-shadow: 0 0 0.5px rgba(0, 0, 0, 0.2) !important;
}

/* Enhance text legibility with better font rendering */
.table, table {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

/* Custom class for super-clear tables */
.table-clear, table.table-clear {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.table-clear th, table.table-clear th {
    background: var(--gradient) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0.75rem 1rem !important;
}

.table-clear td, table.table-clear td {
    color: #000000 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.table-clear tbody tr:hover, table.table-clear tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05) !important;
}

/* Form focus states */
.form-control:focus {
    border-color: var(--gradient-end) !important;
    box-shadow: 0 0 0 0.25rem rgba(118, 75, 162, 0.25) !important;
}

/* Custom scrollbars */
::-webkit-scrollbar-thumb {
    background: var(--gradient) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-reverse) !important;
}

/* Modal styling */
.modal-header {
    background: var(--gradient) !important;
    color: white !important;
    border: none !important;
}

.modal-content {
    border: none !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Pagination styling */
.page-item.active .page-link {
    background: var(--gradient) !important;
    border-color: var(--gradient-end) !important;
}

.page-link:focus {
    box-shadow: 0 0 0 0.25rem rgba(118, 75, 162, 0.25) !important;
}

/* Dropdown menu styling */
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(102, 126, 234, 0.1) !important;
}

.dropdown-item.active, .dropdown-item:active {
    background: var(--gradient) !important;
}

/* Progress bar styling */
.progress-bar {
    background: var(--gradient) !important;
}