/*
 * Masria AI Agent SaaS — Custom Filament Theme
 * Fixes contrast issues (white text on white buttons) and provides
 * consistent Arabic-friendly styling across both Admin and App panels.
 */

/* ================================================================
   1. Primary Action Buttons — Solid Background & Readable Contrast
   ================================================================ */

.fi-btn {
    font-weight: 600 !important;
    transition: all 0.15s ease-in-out !important;
}

/* Base Primary (Emerald Green #059669) */
button.fi-btn.fi-color-primary:not(.fi-btn-outlined),
a.fi-btn.fi-color-primary:not(.fi-btn-outlined),
.fi-btn-color-primary:not(.fi-btn-outlined) {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #047857 !important;
}
button.fi-btn.fi-color-primary:not(.fi-btn-outlined):hover,
a.fi-btn.fi-color-primary:not(.fi-btn-outlined):hover,
.fi-btn-color-primary:not(.fi-btn-outlined):hover {
    background-color: #047857 !important;
    color: #ffffff !important;
}
.fi-btn.fi-color-primary .fi-btn-label,
.fi-btn.fi-color-primary svg,
.fi-btn-color-primary .fi-btn-label,
.fi-btn-color-primary svg {
    color: #ffffff !important;
}

/* Success Buttons (Green #059669) */
button.fi-btn.fi-color-success:not(.fi-btn-outlined),
a.fi-btn.fi-color-success:not(.fi-btn-outlined),
.fi-btn-color-success:not(.fi-btn-outlined) {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #047857 !important;
}
button.fi-btn.fi-color-success:not(.fi-btn-outlined):hover,
a.fi-btn.fi-color-success:not(.fi-btn-outlined):hover,
.fi-btn-color-success:not(.fi-btn-outlined):hover {
    background-color: #047857 !important;
    color: #ffffff !important;
}
.fi-btn.fi-color-success .fi-btn-label,
.fi-btn.fi-color-success svg,
.fi-btn-color-success .fi-btn-label,
.fi-btn-color-success svg {
    color: #ffffff !important;
}

/* Warning Buttons (Amber/Orange #d97706) — CRITICAL for QR and Alert buttons */
button.fi-btn.fi-color-warning:not(.fi-btn-outlined),
a.fi-btn.fi-color-warning:not(.fi-btn-outlined),
.fi-btn.fi-btn-color-warning:not(.fi-btn-outlined),
.fi-btn-color-warning:not(.fi-btn-outlined) {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border: 1px solid #b45309 !important;
}
button.fi-btn.fi-color-warning:not(.fi-btn-outlined):hover,
a.fi-btn.fi-color-warning:not(.fi-btn-outlined):hover,
.fi-btn.fi-btn-color-warning:not(.fi-btn-outlined):hover,
.fi-btn-color-warning:not(.fi-btn-outlined):hover {
    background-color: #b45309 !important;
    color: #ffffff !important;
}
.fi-btn.fi-color-warning:not(.fi-btn-outlined) .fi-btn-label,
.fi-btn.fi-color-warning:not(.fi-btn-outlined) svg,
.fi-btn.fi-btn-color-warning:not(.fi-btn-outlined) .fi-btn-label,
.fi-btn.fi-btn-color-warning:not(.fi-btn-outlined) svg {
    color: #ffffff !important;
}

/* Danger Buttons (Red #dc2626) */
button.fi-btn.fi-color-danger:not(.fi-btn-outlined),
a.fi-btn.fi-color-danger:not(.fi-btn-outlined),
.fi-btn-color-danger:not(.fi-btn-outlined) {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #b91c1c !important;
}
button.fi-btn.fi-color-danger:not(.fi-btn-outlined):hover,
a.fi-btn.fi-color-danger:not(.fi-btn-outlined):hover,
.fi-btn-color-danger:not(.fi-btn-outlined):hover {
    background-color: #b91c1c !important;
    color: #ffffff !important;
}
.fi-btn.fi-color-danger .fi-btn-label,
.fi-btn.fi-color-danger svg,
.fi-btn-color-danger .fi-btn-label,
.fi-btn-color-danger svg {
    color: #ffffff !important;
}

/* Info Buttons (Blue #2563eb) */
button.fi-btn.fi-color-info:not(.fi-btn-outlined),
a.fi-btn.fi-color-info:not(.fi-btn-outlined),
.fi-btn-color-info:not(.fi-btn-outlined) {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #1d4ed8 !important;
}
button.fi-btn.fi-color-info:not(.fi-btn-outlined):hover,
a.fi-btn.fi-color-info:not(.fi-btn-outlined):hover,
.fi-btn-color-info:not(.fi-btn-outlined):hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}
.fi-btn.fi-color-info .fi-btn-label,
.fi-btn.fi-color-info svg,
.fi-btn-color-info .fi-btn-label,
.fi-btn-color-info svg {
    color: #ffffff !important;
}

/* Gray / Secondary / Cancel Buttons */
button.fi-btn.fi-color-gray,
a.fi-btn.fi-color-gray,
.fi-btn-color-gray {
    color: #1f2937 !important;
    background-color: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
}
button.fi-btn.fi-color-gray:hover,
a.fi-btn.fi-color-gray:hover,
.fi-btn-color-gray:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}
.fi-btn.fi-color-gray .fi-btn-label,
.fi-btn.fi-color-gray svg,
.fi-btn-color-gray .fi-btn-label,
.fi-btn-color-gray svg {
    color: #1f2937 !important;
}

/* Dark mode support for gray buttons */
.dark button.fi-btn.fi-color-gray,
.dark a.fi-btn.fi-color-gray,
.dark .fi-btn-color-gray {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}
.dark .fi-btn.fi-color-gray .fi-btn-label,
.dark .fi-btn.fi-color-gray svg {
    color: #f9fafb !important;
}

/* Outlined Buttons */
.fi-btn.fi-btn-outlined.fi-color-primary {
    color: #059669 !important;
    border-color: #059669 !important;
    background-color: transparent !important;
}
.fi-btn.fi-btn-outlined.fi-color-warning {
    color: #d97706 !important;
    border-color: #d97706 !important;
    background-color: transparent !important;
}
.fi-btn.fi-btn-outlined.fi-color-danger {
    color: #dc2626 !important;
    border-color: #dc2626 !important;
    background-color: transparent !important;
}
.fi-btn.fi-btn-outlined.fi-color-success {
    color: #059669 !important;
    border-color: #059669 !important;
    background-color: transparent !important;
}
.fi-btn.fi-btn-outlined.fi-color-info {
    color: #2563eb !important;
    border-color: #2563eb !important;
    background-color: transparent !important;
}

/* Universal Button Text Contrast Guard:
   Ensure any filled colored button has pure white text on itself and all child spans/labels */
button.fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not(.fi-btn-outlined),
a.fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not(.fi-btn-outlined) {
    color: #ffffff !important;
}
button.fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not(.fi-btn-outlined) span,
button.fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not(.fi-btn-outlined) .fi-btn-label,
button.fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not(.fi-btn-outlined) svg,
a.fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not(.fi-btn-outlined) span,
a.fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not(.fi-btn-outlined) .fi-btn-label,
a.fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not(.fi-btn-outlined) svg {
    color: #ffffff !important;
}

/* ================================================================
   2. Modal / SlideOver — High Contrast Action & Confirm Buttons
   ================================================================ */

.fi-modal-footer {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: center !important;
}

/* Default styling for ANY non-gray button in modal footer */
.fi-modal-footer .fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not([color="gray"]),
.fi-modal-footer button[type="submit"]:not(.fi-color-gray):not([color="gray"]) {
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}
.fi-modal-footer .fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not([color="gray"]):hover,
.fi-modal-footer button[type="submit"]:not(.fi-color-gray):not([color="gray"]):hover {
    background-color: #047857 !important;
    color: #ffffff !important;
}
.fi-modal-footer .fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not([color="gray"]) span,
.fi-modal-footer .fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not([color="gray"]) .fi-btn-label,
.fi-modal-footer .fi-btn:not(.fi-color-gray):not(.fi-btn-color-gray):not([color="gray"]) svg,
.fi-modal-footer button[type="submit"]:not(.fi-color-gray):not([color="gray"]) span,
.fi-modal-footer button[type="submit"]:not(.fi-color-gray):not([color="gray"]) .fi-btn-label {
    color: #ffffff !important;
}

/* Modal Success / Confirm Action (e.g. تم المسح - فحص الاتصال) */
.fi-modal-footer .fi-btn.fi-color-success,
.fi-modal-footer .fi-btn.fi-btn-color-success {
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
}
.fi-modal-footer .fi-btn.fi-color-success:hover,
.fi-modal-footer .fi-btn.fi-btn-color-success:hover {
    background-color: #047857 !important;
    color: #ffffff !important;
}
.fi-modal-footer .fi-btn.fi-color-success span,
.fi-modal-footer .fi-btn.fi-color-success .fi-btn-label {
    color: #ffffff !important;
}

/* Modal Warning Action */
.fi-modal-footer .fi-btn.fi-color-warning,
.fi-modal-footer .fi-btn.fi-btn-color-warning {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border: 1px solid #b45309 !important;
}
.fi-modal-footer .fi-btn.fi-color-warning:hover,
.fi-modal-footer .fi-btn.fi-btn-color-warning:hover {
    background-color: #b45309 !important;
    color: #ffffff !important;
}
.fi-modal-footer .fi-btn.fi-color-warning span,
.fi-modal-footer .fi-btn.fi-color-warning .fi-btn-label {
    color: #ffffff !important;
}

/* Modal Primary Action */
.fi-modal-footer .fi-btn.fi-color-primary,
.fi-modal-footer .fi-btn.fi-btn-color-primary,
.fi-modal-footer button[type="submit"]:not(.fi-color-gray) {
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
}
.fi-modal-footer .fi-btn.fi-color-primary:hover,
.fi-modal-footer .fi-btn.fi-btn-color-primary:hover,
.fi-modal-footer button[type="submit"]:not(.fi-color-gray):hover {
    background-color: #047857 !important;
    color: #ffffff !important;
}
.fi-modal-footer .fi-btn.fi-color-primary span,
.fi-modal-footer .fi-btn.fi-color-primary .fi-btn-label {
    color: #ffffff !important;
}

/* Modal Danger Action (e.g. Reset Session confirmation) */
.fi-modal-footer .fi-btn.fi-color-danger,
.fi-modal-footer .fi-btn.fi-btn-color-danger {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #b91c1c !important;
}
.fi-modal-footer .fi-btn.fi-color-danger:hover,
.fi-modal-footer .fi-btn.fi-btn-color-danger:hover {
    background-color: #b91c1c !important;
    color: #ffffff !important;
}
.fi-modal-footer .fi-btn.fi-color-danger span,
.fi-modal-footer .fi-btn.fi-color-danger .fi-btn-label {
    color: #ffffff !important;
}

/* Modal Info Action */
.fi-modal-footer .fi-btn.fi-color-info,
.fi-modal-footer .fi-btn.fi-btn-color-info {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #1d4ed8 !important;
}
.fi-modal-footer .fi-btn.fi-color-info:hover,
.fi-modal-footer .fi-btn.fi-btn-color-info:hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}
.fi-modal-footer .fi-btn.fi-color-info span,
.fi-modal-footer .fi-btn.fi-color-info .fi-btn-label {
    color: #ffffff !important;
}

/* Modal Gray / Cancel Button */
.fi-modal-footer .fi-btn.fi-color-gray,
.fi-modal-footer .fi-btn.fi-btn-color-gray,
.fi-modal-footer button[color="gray"],
.fi-modal-footer button.fi-color-gray {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}
.fi-modal-footer .fi-btn.fi-color-gray:hover,
.fi-modal-footer .fi-btn.fi-btn-color-gray:hover,
.fi-modal-footer button[color="gray"]:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
}
.fi-modal-footer .fi-btn.fi-color-gray span,
.fi-modal-footer .fi-btn.fi-color-gray .fi-btn-label,
.fi-modal-footer .fi-btn.fi-color-gray svg,
.fi-modal-footer button[color="gray"] span,
.fi-modal-footer button[color="gray"] .fi-btn-label {
    color: #1f2937 !important;
}
.dark .fi-modal-footer .fi-btn.fi-color-gray,
.dark .fi-modal-footer .fi-btn.fi-btn-color-gray,
.dark .fi-modal-footer button[color="gray"] {
    background-color: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}
.dark .fi-modal-footer .fi-btn.fi-color-gray span,
.dark .fi-modal-footer .fi-btn.fi-color-gray .fi-btn-label,
.dark .fi-modal-footer button[color="gray"] span {
    color: #f9fafb !important;
}

/* ================================================================
   3. Modal Content Buttons (QR Code Modal Reload & Retry)
   ================================================================ */

.qr-reload-btn,
button.qr-reload-btn,
.qr-retry-btn,
button.qr-retry-btn {
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
}
.qr-reload-btn:hover,
button.qr-reload-btn:hover,
.qr-retry-btn:hover,
button.qr-retry-btn:hover {
    background-color: #047857 !important;
    color: #ffffff !important;
}
.qr-reload-btn span,
button.qr-reload-btn span,
.qr-retry-btn span,
button.qr-retry-btn span {
    color: #ffffff !important;
}

/* ================================================================
   3. Table Action Buttons & Links — High Contrast Labels & Icons
   ================================================================ */

.fi-ta-btn {
    font-weight: 500 !important;
}

/* Table action buttons: ensure icon+text are visible */
.fi-ta-btn.fi-color-primary .fi-btn-label {
    color: var(--primary-600, #059669) !important;
}
.fi-ta-btn.fi-color-danger .fi-btn-label {
    color: var(--danger-600, #dc2626) !important;
}
.fi-ta-btn.fi-color-warning .fi-btn-label {
    color: var(--warning-600, #d97706) !important;
}
.fi-ta-btn.fi-color-success .fi-btn-label {
    color: var(--success-600, #059669) !important;
}
.fi-ta-btn.fi-color-info .fi-btn-label {
    color: var(--info-600, #2563eb) !important;
}

/* Table Action Buttons rendered as filled buttons */
.fi-ta-actions .fi-btn:not(.fi-btn-outlined).fi-color-warning {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border: 1px solid #b45309 !important;
}
.fi-ta-actions .fi-btn:not(.fi-btn-outlined).fi-color-primary {
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
}
.fi-ta-actions .fi-btn:not(.fi-btn-outlined).fi-color-success {
    background-color: #059669 !important;
    color: #ffffff !important;
    border: 1px solid #047857 !important;
}
.fi-ta-actions .fi-btn:not(.fi-btn-outlined).fi-color-danger {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border: 1px solid #b91c1c !important;
}
.fi-ta-actions .fi-btn:not(.fi-btn-outlined).fi-color-info {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #1d4ed8 !important;
}
.fi-ta-actions .fi-btn:not(.fi-btn-outlined).fi-color-gray {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}

.fi-ta-actions .fi-btn:not(.fi-btn-outlined):not(.fi-color-gray) span,
.fi-ta-actions .fi-btn:not(.fi-btn-outlined):not(.fi-color-gray) .fi-btn-label,
.fi-ta-actions .fi-btn:not(.fi-btn-outlined):not(.fi-color-gray) svg {
    color: #ffffff !important;
}
.fi-ta-actions .fi-btn.fi-color-gray span,
.fi-ta-actions .fi-btn.fi-color-gray .fi-btn-label {
    color: #1f2937 !important;
}

/* ================================================================
   5. Fallback Utility Classes for Custom Blades
   ================================================================ */

.bg-emerald-600 {
    background-color: #059669 !important;
}
.bg-emerald-700 {
    background-color: #047857 !important;
}
.bg-emerald-800 {
    background-color: #065f46 !important;
}
.bg-emerald-500 {
    background-color: #10b981 !important;
}
.hover\:bg-emerald-700:hover {
    background-color: #047857 !important;
}
.hover\:bg-emerald-800:hover {
    background-color: #065f46 !important;
}
.active\:bg-emerald-800:active {
    background-color: #065f46 !important;
}
.text-white {
    color: #ffffff !important;
}
.text-white span {
    color: #ffffff !important;
}

/* ================================================================
   4. Badges & Tags — Readable contrast
   ================================================================ */

.fi-badge {
    font-weight: 600 !important;
}
.fi-badge.fi-color-primary {
    background-color: var(--primary-50, #ecfdf5) !important;
    color: var(--primary-700, #047857) !important;
}
.fi-badge.fi-color-success {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
}
.fi-badge.fi-color-danger {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}
.fi-badge.fi-color-warning {
    background-color: #fffbeb !important;
    color: #b45309 !important;
}

/* ================================================================
   5. Form Inputs & Toggles
   ================================================================ */

.fi-input {
    font-size: 0.9rem !important;
}
.fi-toggle-input:checked {
    background-color: var(--primary-600, #059669) !important;
}

/* ================================================================
   6. Sidebar / Navigation — Visible active state
   ================================================================ */

.fi-sidebar-item-active .fi-sidebar-item-label {
    font-weight: 700 !important;
}

/* ================================================================
   7. RTL / Arabic Enhancements
   ================================================================ */

[dir="rtl"] .fi-sidebar-item-label,
[dir="rtl"] .fi-header-heading,
[dir="rtl"] .fi-ta-header-cell-label {
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif !important;
}