/* MACS Global Styles */

/* GLOBAL FORM INPUT STYLING - HIGH SPECIFICITY TO OVERRIDE TAILWIND */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
textarea,
select,
.form-input,
.form-select,
.custom-input,
.block.w-full.rounded-md.border-gray-300,
.block.w-full.rounded-md.border-red-300 {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

/* Focus states for form inputs */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus,
.form-input:focus,
.form-select:focus,
.custom-input:focus,
.block.w-full.rounded-md.border-gray-300:focus,
.block.w-full.rounded-md.border-red-300:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* Placeholder text styling */
input::placeholder,
textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

/* Select dropdown options styling */
select option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Error state styling - ensure white background and black text even with errors */
.border-red-300,
.text-red-900 {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Custom Input Styling - Consistent across the application */
.custom-input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.2s ease-in-out !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.custom-input::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

.custom-input:focus {
    background-color: #ffffff !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

.custom-input:disabled {
    background-color: #f3f4f6 !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
}

/* Password toggle button styling */
.password-toggle {
    color: #6b7280 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0.25rem !important;
    border-radius: 0.25rem !important;
    transition: color 0.2s ease-in-out !important;
}

.password-toggle:hover {
    color: #374151 !important;
}

.password-toggle:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
}

/* Form styling */
.form-group {
    margin-bottom: 1.5rem !important;
}

.form-label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 0.5rem !important;
}

.form-label.required::after {
    content: " *" !important;
    color: #ef4444 !important;
}

/* Button styling */
.btn-primary {
    background-color: #667eea !important;
    color: white !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.btn-primary:hover {
    background-color: #5a67d8 !important;
    transform: translateY(-1px) !important;
}

.btn-primary:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
}

.btn-primary:disabled {
    background-color: #9ca3af !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.btn-secondary {
    background-color: #6b7280 !important;
    color: white !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.btn-secondary:hover {
    background-color: #4b5563 !important;
    transform: translateY(-1px) !important;
}

.btn-secondary:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.3) !important;
}

.btn-secondary:disabled {
    background-color: #9ca3af !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.btn-success {
    background-color: #10b981 !important;
    color: white !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.btn-success:hover {
    background-color: #059669 !important;
    transform: translateY(-1px) !important;
}

.btn-success:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3) !important;
}

.btn-success:disabled {
    background-color: #9ca3af !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Fix for Send Back for Review button - ensure orange background and white text */
button[onclick="showSendBackModal()"],
button[onclick*="showSendBackModal"] {
    background-color: #ea580c !important; /* orange-600 */
    color: white !important;
    border: none !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

button[onclick="showSendBackModal()"]:hover,
button[onclick*="showSendBackModal"]:hover {
    background-color: #c2410c !important; /* orange-700 */
}

/* Ensure all buttons with orange background have white text */
.bg-orange-600 {
    background-color: #ea580c !important;
    color: white !important;
}

.bg-orange-600:hover {
    background-color: #c2410c !important;
}

/* Override any conflicting button styles */
button.bg-orange-600,
button[class*="bg-orange-600"] {
    background-color: #ea580c !important;
    color: white !important;
}

button.bg-orange-600:hover,
button[class*="bg-orange-600"]:hover {
    background-color: #c2410c !important;
}

/* Specific fix for the Send Back for Review button in loan applications */
.loan-applications-show button[onclick="showSendBackModal()"],
.loan-applications-show button[onclick*="showSendBackModal"],
div[class*="Admin Actions"] button[onclick="showSendBackModal()"],
div[class*="Admin Actions"] button[onclick*="showSendBackModal"] {
    background-color: #ea580c !important; /* orange-600 */
    color: white !important;
    border: none !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.loan-applications-show button[onclick="showSendBackModal()"]:hover,
.loan-applications-show button[onclick*="showSendBackModal"]:hover,
div[class*="Admin Actions"] button[onclick="showSendBackModal()"]:hover,
div[class*="Admin Actions"] button[onclick*="showSendBackModal"]:hover {
    background-color: #c2410c !important; /* orange-700 */
}

/* Global fix for any button with orange background */
button[class*="bg-orange-600"],
button[class*="orange-600"] {
    background-color: #ea580c !important;
    color: white !important;
}

button[class*="bg-orange-600"]:hover,
button[class*="orange-600"]:hover {
    background-color: #c2410c !important;
}

/* Specific fix for the Send Back for Review button using the new class */
.send-back-review-btn {
    background-color: #ea580c !important; /* orange-600 */
    color: white !important;
    border: none !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

.send-back-review-btn:hover {
    background-color: #c2410c !important; /* orange-700 */
}

/* Additional specificity for the button */
button.send-back-review-btn,
.send-back-review-btn[type="button"] {
    background-color: #ea580c !important;
    color: white !important;
}

button.send-back-review-btn:hover,
.send-back-review-btn[type="button"]:hover {
    background-color: #c2410c !important;
}

/* GLOBAL ORANGE BUTTON FIXES - Comprehensive coverage for all orange buttons */
/* Target all possible orange button variations - ONLY for buttons and links with background colors */
button.bg-orange-600,
button.bg-orange-500,
button.bg-orange-700,
button[class*="bg-orange-600"],
button[class*="bg-orange-500"],
button[class*="bg-orange-700"],
a.bg-orange-600,
a.bg-orange-500,
a.bg-orange-700,
a[class*="bg-orange-600"],
a[class*="bg-orange-500"],
a[class*="bg-orange-700"],
.btn-orange,
.btn[class*="orange"] {
    background-color: #ea580c !important; /* orange-600 */
    color: white !important;
}

/* Hover states for orange buttons */
button.bg-orange-600:hover,
button.bg-orange-500:hover,
button.bg-orange-700:hover,
button[class*="bg-orange-600"]:hover,
button[class*="bg-orange-500"]:hover,
button[class*="bg-orange-700"]:hover,
a.bg-orange-600:hover,
a.bg-orange-500:hover,
a.bg-orange-700:hover,
a[class*="bg-orange-600"]:hover,
a[class*="bg-orange-500"]:hover,
a[class*="bg-orange-700"]:hover,
.btn-orange:hover,
.btn[class*="orange"]:hover {
    background-color: #c2410c !important; /* orange-700 */
}

/* Button-specific orange styling */
button.bg-orange-600,
button.bg-orange-500,
button.bg-orange-700,
button[class*="bg-orange-600"],
button[class*="bg-orange-500"],
button[class*="bg-orange-700"],
a.bg-orange-600,
a.bg-orange-500,
a.bg-orange-700,
a[class*="bg-orange-600"],
a[class*="bg-orange-500"],
a[class*="bg-orange-700"] {
    background-color: #ea580c !important;
    color: white !important;
    border: none !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hover states for button and anchor elements */
button.bg-orange-600:hover,
button.bg-orange-500:hover,
button.bg-orange-700:hover,
button[class*="bg-orange-600"]:hover,
button[class*="bg-orange-500"]:hover,
button[class*="bg-orange-700"]:hover,
a.bg-orange-600:hover,
a.bg-orange-500:hover,
a.bg-orange-700:hover,
a[class*="bg-orange-600"]:hover,
a[class*="bg-orange-500"]:hover,
a[class*="bg-orange-700"]:hover {
    background-color: #c2410c !important;
    color: white !important;
    text-decoration: none !important;
}

/* Focus states for accessibility */
button.bg-orange-600:focus,
button.bg-orange-500:focus,
button.bg-orange-700:focus,
button[class*="bg-orange-600"]:focus,
button[class*="bg-orange-500"]:focus,
button[class*="bg-orange-700"]:focus,
button[class*="orange-600"]:focus,
button[class*="orange-500"]:focus,
button[class*="orange-700"]:focus,
a.bg-orange-600:focus,
a.bg-orange-500:focus,
a.bg-orange-700:focus,
a[class*="bg-orange-600"]:focus,
a[class*="bg-orange-500"]:focus,
a[class*="bg-orange-700"]:focus,
a[class*="orange-600"]:focus,
a[class*="orange-500"]:focus,
a[class*="orange-700"]:focus {
    background-color: #c2410c !important;
    color: white !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.3) !important;
}

/* Disabled states */
button.bg-orange-600:disabled,
button.bg-orange-500:disabled,
button.bg-orange-700:disabled,
button[class*="bg-orange-600"]:disabled,
button[class*="bg-orange-500"]:disabled,
button[class*="bg-orange-700"]:disabled,
button[class*="orange-600"]:disabled,
button[class*="orange-500"]:disabled,
button[class*="orange-700"]:disabled {
    background-color: #9ca3af !important; /* gray-400 */
    color: #6b7280 !important; /* gray-500 */
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Ensure SVG icons inside orange buttons are white */
.bg-orange-600 svg,
.bg-orange-500 svg,
.bg-orange-700 svg,
[class*="bg-orange-600"] svg,
[class*="bg-orange-500"] svg,
[class*="bg-orange-700"] svg,
[class*="orange-600"] svg,
[class*="orange-500"] svg,
[class*="orange-700"] svg {
    color: white !important;
    fill: white !important;
}

/* Override any conflicting Tailwind or custom styles - ONLY for buttons and links */
button[class*="bg-orange"],
a[class*="bg-orange"],
.btn[class*="bg-orange"] {
    background-color: #ea580c !important;
    color: white !important;
}

button[class*="bg-orange"]:hover,
a[class*="bg-orange"]:hover,
.btn[class*="bg-orange"]:hover {
    background-color: #c2410c !important;
}

/* CUSTOM ORANGE BUTTON CLASS - Use this for consistent orange buttons */
.btn-orange {
    background-color: #ea580c !important; /* orange-600 */
    color: white !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.btn-orange:hover {
    background-color: #c2410c !important; /* orange-700 */
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.btn-orange:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.3) !important;
}

.btn-orange:disabled {
    background-color: #9ca3af !important; /* gray-400 */
    color: #6b7280 !important; /* gray-500 */
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
}

/* Ensure SVG icons inside custom orange buttons are white */
.btn-orange svg {
    color: white !important;
    fill: white !important;
}

/* GLOBAL CYAN BUTTON FIXES - Comprehensive coverage for all cyan buttons */
/* Target all possible cyan button variations - ONLY for buttons and links with background colors */
button.bg-cyan-600,
button.bg-cyan-500,
button.bg-cyan-700,
button[class*="bg-cyan-600"],
button[class*="bg-cyan-500"],
button[class*="bg-cyan-700"],
a.bg-cyan-600,
a.bg-cyan-500,
a.bg-cyan-700,
a[class*="bg-cyan-600"],
a[class*="bg-cyan-500"],
a[class*="bg-cyan-700"],
.btn-cyan,
.btn[class*="cyan"] {
    background-color: #0891b2 !important; /* cyan-600 */
    color: white !important;
}

/* Hover states for cyan buttons */
button.bg-cyan-600:hover,
button.bg-cyan-500:hover,
button.bg-cyan-700:hover,
button[class*="bg-cyan-600"]:hover,
button[class*="bg-cyan-500"]:hover,
button[class*="bg-cyan-700"]:hover,
a.bg-cyan-600:hover,
a.bg-cyan-500:hover,
a.bg-cyan-700:hover,
a[class*="bg-cyan-600"]:hover,
a[class*="bg-cyan-500"]:hover,
a[class*="bg-cyan-700"]:hover,
.btn-cyan:hover,
.btn[class*="cyan"]:hover {
    background-color: #0e7490 !important; /* cyan-700 */
}

/* Button-specific cyan styling */
button.bg-cyan-600,
button.bg-cyan-500,
button.bg-cyan-700,
button[class*="bg-cyan-600"],
button[class*="bg-cyan-500"],
button[class*="bg-cyan-700"],
a.bg-cyan-600,
a.bg-cyan-500,
a.bg-cyan-700,
a[class*="bg-cyan-600"],
a[class*="bg-cyan-500"],
a[class*="bg-cyan-700"] {
    background-color: #0891b2 !important;
    color: white !important;
    border: none !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hover states for button and anchor elements */
button.bg-cyan-600:hover,
button.bg-cyan-500:hover,
button.bg-cyan-700:hover,
button[class*="bg-cyan-600"]:hover,
button[class*="bg-cyan-500"]:hover,
button[class*="bg-cyan-700"]:hover,
a.bg-cyan-600:hover,
a.bg-cyan-500:hover,
a.bg-cyan-700:hover,
a[class*="bg-cyan-600"]:hover,
a[class*="bg-cyan-500"]:hover,
a[class*="bg-cyan-700"]:hover {
    background-color: #0e7490 !important;
    color: white !important;
    text-decoration: none !important;
}

/* Focus states for accessibility */
button.bg-cyan-600:focus,
button.bg-cyan-500:focus,
button.bg-cyan-700:focus,
button[class*="bg-cyan-600"]:focus,
button[class*="bg-cyan-500"]:focus,
button[class*="bg-cyan-700"]:focus,
button[class*="cyan-600"]:focus,
button[class*="cyan-500"]:focus,
button[class*="cyan-700"]:focus,
a.bg-cyan-600:focus,
a.bg-cyan-500:focus,
a.bg-cyan-700:focus,
a[class*="bg-cyan-600"]:focus,
a[class*="bg-cyan-500"]:focus,
a[class*="bg-cyan-700"]:focus,
a[class*="cyan-600"]:focus,
a[class*="cyan-500"]:focus,
a[class*="cyan-700"]:focus {
    background-color: #0e7490 !important;
    color: white !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.3) !important;
}

/* Disabled states */
button.bg-cyan-600:disabled,
button.bg-cyan-500:disabled,
button.bg-cyan-700:disabled,
button[class*="bg-cyan-600"]:disabled,
button[class*="bg-cyan-500"]:disabled,
button[class*="bg-cyan-700"]:disabled,
button[class*="cyan-600"]:disabled,
button[class*="cyan-500"]:disabled,
button[class*="cyan-700"]:disabled {
    background-color: #9ca3af !important; /* gray-400 */
    color: #6b7280 !important; /* gray-500 */
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Ensure SVG icons inside cyan buttons are white */
.bg-cyan-600 svg,
.bg-cyan-500 svg,
.bg-cyan-700 svg,
[class*="bg-cyan-600"] svg,
[class*="bg-cyan-500"] svg,
[class*="bg-cyan-700"] svg,
[class*="cyan-600"] svg,
[class*="cyan-500"] svg,
[class*="cyan-700"] svg {
    color: white !important;
    fill: white !important;
}

/* Override any conflicting Tailwind or custom styles - ONLY for buttons and links */
button[class*="bg-cyan"],
a[class*="bg-cyan"],
.btn[class*="bg-cyan"] {
    background-color: #0891b2 !important;
    color: white !important;
}

button[class*="bg-cyan"]:hover,
a[class*="bg-cyan"]:hover,
.btn[class*="bg-cyan"]:hover {
    background-color: #0e7490 !important;
}

/* CUSTOM CYAN BUTTON CLASS - Use this for consistent cyan buttons */
.btn-cyan {
    background-color: #0891b2 !important; /* cyan-600 */
    color: white !important;
    border: none !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.btn-cyan:hover {
    background-color: #0e7490 !important; /* cyan-700 */
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.btn-cyan:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.3) !important;
}

.btn-cyan:disabled {
    background-color: #9ca3af !important; /* gray-400 */
    color: #6b7280 !important; /* gray-500 */
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
}

/* Ensure SVG icons inside custom cyan buttons are white */
.btn-cyan svg {
    color: white !important;
    fill: white !important;
}

/* Size variations for the custom cyan button */
.btn-cyan.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
}

.btn-cyan.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
}

.btn-cyan.btn-xl {
    padding: 1.25rem 2.5rem !important;
    font-size: 1.125rem !important;
}

/* Full width option */
.btn-cyan.btn-full {
    width: 100% !important;
}

/* Size variations for the custom orange button */
.btn-orange.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.75rem !important;
}

.btn-orange.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
}

.btn-orange.btn-xl {
    padding: 1.25rem 2.5rem !important;
    font-size: 1.125rem !important;
}

/* Full width option */
.btn-orange.btn-full {
    width: 100% !important;
}

/* Card styling */
.card {
    background-color: white !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    padding: 1.5rem !important;
}

/* Alert styling */
.alert {
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 1rem !important;
    border: 1px solid !important;
}

.alert-success {
    background-color: #d1fae5 !important;
    border-color: #10b981 !important;
    color: #065f46 !important;
}

.alert-error {
    background-color: #fee2e2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

.alert-warning {
    background-color: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

.alert-info {
    background-color: #dbeafe !important;
    border-color: #3b82f6 !important;
    color: #1e40af !important;
}

/* Loading spinner */
.spinner {
    display: inline-block !important;
    width: 1rem !important;
    height: 1rem !important;
    border: 2px solid currentColor !important;
    border-radius: 50% !important;
    border-top-color: transparent !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg) !important;
    }
}

/* Table styling */
.table {
    width: 100% !important;
    border-collapse: collapse !important;
    background-color: white !important;
    table-layout: auto !important;
    min-width: 100% !important;
}

.table-header {
    background-color: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
}

.table-header th {
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #374151 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
}

.table-body {
    background-color: white !important;
}

.table-row {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background-color 0.2s ease-in-out !important;
}

.table-row:hover {
    background-color: #f8fafc !important;
}

.table-cell {
    padding: 0.75rem 1rem !important;
    vertical-align: top !important;
    color: #374151 !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    white-space: nowrap !important;
}

.table-cell:first-child {
    font-weight: 500 !important;
}

.table-cell:last-child {
    text-align: right !important;
}

/* Transaction ID specific styling */
.table-cell .font-mono {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

/* Column-specific styling */
.table-cell .font-medium {
    white-space: nowrap !important;
}

/* Ensure badges don't overflow */
.table-cell .inline-flex {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Responsive table container */
.overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .custom-input {
        font-size: 1rem !important; /* Prevent zoom on iOS */
    }
}

/* =============================================================================
   Solid surfaces for actions — no white-on-white or invisible (transparent) CTAs
   Loaded via asset('css/app.css') in layouts.app (this file).
   ============================================================================= */

/* Past savings withdrawal (backfill) */
a.btn-past-withdrawal,
button.btn-past-withdrawal {
    background-color: #c2410c !important;
    color: #ffffff !important;
    border: 2px solid #7c2d12 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    text-decoration: none !important;
}

a.btn-past-withdrawal:hover,
button.btn-past-withdrawal:hover {
    background-color: #9a3412 !important;
    color: #ffffff !important;
    border-color: #431407 !important;
}

body.gradient-bg .bg-white a.btn-past-withdrawal,
body.gradient-bg .bg-white button.btn-past-withdrawal,
body.gradient-bg a.btn-past-withdrawal,
body.gradient-bg button.btn-past-withdrawal {
    background-color: #c2410c !important;
    color: #ffffff !important;
    border: 2px solid #7c2d12 !important;
}

body.gradient-bg .bg-white a.btn-past-withdrawal:hover,
body.gradient-bg .bg-white button.btn-past-withdrawal:hover,
body.gradient-bg a.btn-past-withdrawal:hover,
body.gradient-bg button.btn-past-withdrawal:hover {
    background-color: #9a3412 !important;
    color: #ffffff !important;
    border-color: #431407 !important;
}

/*
 * Tailwind "secondary" links: bg-white + gray border → use visible gray surface instead of white chip on white card.
 * class~="bg-white" matches the token bg-white only (not hover:bg-white).
 */
body.gradient-bg .bg-white a.inline-flex[class~="bg-white"],
body.gradient-bg .bg-white button.inline-flex[class~="bg-white"],
body.gradient-bg .card a.inline-flex[class~="bg-white"],
body.gradient-bg .card button.inline-flex[class~="bg-white"] {
    background-color: #e5e7eb !important;
    color: #111827 !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #6b7280 !important;
}

body.gradient-bg .bg-white a.inline-flex[class~="bg-white"]:hover,
body.gradient-bg .card a.inline-flex[class~="bg-white"]:hover {
    background-color: #d1d5db !important;
    color: #111827 !important;
}

/*
 * Outline-style actions: gray border but no colored fill class → give a solid neutral fill
 * (avoids transparent "buttons" that only show text).
 */
body.gradient-bg .bg-white a.inline-flex[class*="border-gray-300"]:not([class*="bg-blue"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-orange"]):not([class*="bg-purple"]):not([class*="bg-indigo"]):not([class*="bg-cyan"]):not([class*="bg-teal"]):not([class*="bg-yellow"]):not([class*="bg-pink"]):not([class*="bg-white"]):not([class*="bg-black"]):not([class*="btn-past-withdrawal"]),
body.gradient-bg .card a.inline-flex[class*="border-gray-300"]:not([class*="bg-blue"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-orange"]):not([class*="bg-purple"]):not([class*="bg-indigo"]):not([class*="bg-cyan"]):not([class*="bg-teal"]):not([class*="bg-yellow"]):not([class*="bg-pink"]):not([class*="bg-white"]):not([class*="bg-black"]):not([class*="btn-past-withdrawal"]) {
    background-color: #e5e7eb !important;
    color: #111827 !important;
    border-color: #6b7280 !important;
}

body.gradient-bg .bg-white a.inline-flex[class*="border-gray-300"]:hover:not([class*="bg-blue"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-orange"]):not([class*="bg-purple"]):not([class*="bg-indigo"]):not([class*="bg-cyan"]):not([class*="bg-teal"]):not([class*="bg-yellow"]):not([class*="bg-pink"]):not([class*="bg-white"]):not([class*="bg-black"]):not([class*="btn-past-withdrawal"]),
body.gradient-bg .card a.inline-flex[class*="border-gray-300"]:hover:not([class*="bg-blue"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-orange"]):not([class*="bg-purple"]):not([class*="bg-indigo"]):not([class*="bg-cyan"]):not([class*="bg-teal"]):not([class*="bg-yellow"]):not([class*="bg-pink"]):not([class*="bg-white"]):not([class*="bg-black"]):not([class*="btn-past-withdrawal"]) {
    background-color: #d1d5db !important;
    color: #111827 !important;
}