/**
 * AutoTime - Luxury Admin Theme
 * Black, Red & White Color Scheme
 */

:root {
    --at-primary: #e31837;
    --at-primary-light: #ff3b5c;
    --at-primary-dark: #b8102a;
    --at-bg-darker: #050505;
    --at-bg-dark: #0a0a0a;
    --at-bg-card: #111111;
    --at-bg-input: #0d0d0f;
    --at-text-primary: #f4f4f4;
    --at-text-secondary: rgba(244, 244, 244, 0.72);
    --at-text-muted: rgba(244, 244, 244, 0.5);
    --at-border: rgba(255, 255, 255, 0.08);
    --at-border-light: rgba(255, 255, 255, 0.12);
    --at-radius: 12px;
    --at-radius-lg: 16px;
    --at-shadow-red: 0 10px 40px rgba(227, 24, 55, 0.25);
}

/* Body Background */
.fi-body {
    background: radial-gradient(ellipse at 20% 0%, rgba(227, 24, 55, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 100%, rgba(227, 24, 55, 0.05) 0%, transparent 50%),
                #050505 !important;
}

/* Sidebar */
.fi-sidebar {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%) !important;
    border-left: 1px solid var(--at-border) !important;
}

.fi-sidebar-nav { padding: 0.75rem !important; }

.fi-sidebar-item-button {
    border-radius: var(--at-radius) !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.2s ease !important;
    color: var(--at-text-secondary) !important;
}

.fi-sidebar-item-button:hover {
    background: rgba(227, 24, 55, 0.1) !important;
    color: var(--at-text-primary) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background: linear-gradient(90deg, rgba(227, 24, 55, 0.2) 0%, rgba(227, 24, 55, 0.05) 100%) !important;
    color: #e31837 !important;
    border-right: 3px solid #e31837 !important;
}

/* Topbar */
.fi-topbar {
    background: rgba(17, 17, 17, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--at-border) !important;
}

/* Cards & Sections */
.fi-section, .fi-ta-ctn {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(13, 13, 15, 0.9) 100%) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: var(--at-radius-lg) !important;
}

/* Stats Widgets */
.fi-wi-stats-overview-stat {
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.95) 0%, rgba(20, 20, 24, 0.9) 100%) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: var(--at-radius-lg) !important;
    transition: all 0.3s ease !important;
}

.fi-wi-stats-overview-stat:hover {
    border-color: rgba(227, 24, 55, 0.3) !important;
    box-shadow: var(--at-shadow-red) !important;
    transform: translateY(-2px) !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #e31837 !important;
}

/* Tables */
.fi-ta-header-cell {
    background: rgba(17, 17, 17, 0.8) !important;
    color: var(--at-text-secondary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
}

.fi-ta-row { border-bottom: 1px solid var(--at-border) !important; transition: all 0.2s ease !important; }
.fi-ta-row:hover { background: rgba(227, 24, 55, 0.05) !important; }

/* Forms */
.fi-input, .fi-select, .fi-textarea {
    background: var(--at-bg-input) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: var(--at-radius) !important;
    color: var(--at-text-primary) !important;
}

.fi-input:focus, .fi-select:focus, .fi-textarea:focus {
    border-color: #e31837 !important;
    box-shadow: 0 0 0 3px rgba(227, 24, 55, 0.15) !important;
}

/* Buttons */
.fi-btn { border-radius: var(--at-radius) !important; font-weight: 600 !important; }

.fi-btn-primary {
    background: linear-gradient(135deg, #e31837 0%, #b8102a 100%) !important;
    box-shadow: 0 4px 15px rgba(227, 24, 55, 0.3) !important;
}

.fi-btn-primary:hover {
    background: linear-gradient(135deg, #ff3b5c 0%, #e31837 100%) !important;
    box-shadow: 0 6px 20px rgba(227, 24, 55, 0.4) !important;
}

/* Badges */
.fi-badge { border-radius: 20px !important; font-weight: 600 !important; }
.fi-badge-success { background: rgba(34, 197, 94, 0.15) !important; color: #22c55e !important; }
.fi-badge-danger { background: rgba(239, 68, 68, 0.15) !important; color: #ef4444 !important; }
.fi-badge-warning { background: rgba(245, 158, 11, 0.15) !important; color: #f59e0b !important; }

/* Modals */
.fi-modal-window {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: var(--at-radius-lg) !important;
}

/* Login Page */
.fi-simple-layout {
    background: radial-gradient(ellipse at 25% 10%, rgba(227, 24, 55, 0.15) 0%, transparent 40%),
                radial-gradient(ellipse at 75% 90%, rgba(227, 24, 55, 0.1) 0%, transparent 40%),
                #050505 !important;
}

.fi-simple-main {
    background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(10, 10, 10, 0.85) 100%) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: var(--at-radius-lg) !important;
    backdrop-filter: blur(20px) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: rgba(227, 24, 55, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(227, 24, 55, 0.5); }

/* RTL Support */
[dir="rtl"] .fi-sidebar-item-active .fi-sidebar-item-button {
    border-right: none !important;
    border-left: 3px solid #e31837 !important;
}

/* Pagination */
.fi-pagination-item-active { background: #e31837 !important; }

/* Dropdown */
.fi-dropdown-panel {
    background: var(--at-bg-card) !important;
    border: 1px solid var(--at-border) !important;
    border-radius: var(--at-radius) !important;
}

.fi-dropdown-list-item:hover { background: rgba(227, 24, 55, 0.1) !important; }

/* Animation */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fi-section { animation: fadeIn 0.3s ease-out; }

/* ═══════════════════════════════════════════════════════════════════════
   RICH EDITOR - Premium Style with Large Text
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   FORCE RICH EDITOR DARK BACKGROUND - NO WHITE ANYWHERE
   ═══════════════════════════════════════════════════════════════════════ */

/* Kill ALL white backgrounds in editor */
.fi-fo-rich-editor,
.fi-fo-rich-editor *,
.fi-fo-rich-editor > *,
.fi-fo-rich-editor > div,
.fi-fo-rich-editor > div > *,
.fi-fo-rich-editor > div > div,
.fi-fo-rich-editor > div > div > *,
.fi-fo-rich-editor .tiptap-wrapper,
.fi-fo-rich-editor .tiptap-wrapper > *,
.fi-fo-rich-editor .tiptap-editor,
.fi-fo-rich-editor [class*="tiptap"],
.fi-fo-rich-editor [class*="editor"],
.fi-fo-rich-editor [class*="content"],
div[wire\:key*="content"] > div,
div[wire\:key*="content"] > div > div {
    background: #1e1e2e !important;
    background-color: #1e1e2e !important;
    border-color: #1e1e2e !important;
}

/* The wrapper border */
.fi-fo-rich-editor {
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* The actual content area */
.fi-fo-rich-editor .ProseMirror,
.ProseMirror,
[contenteditable="true"] {
    background: #1e1e2e !important;
    background-color: #1e1e2e !important;
    color: #e5e7eb !important;
    min-height: 450px !important;
    padding: 28px !important;
    font-size: 18px !important;
    line-height: 2 !important;
    caret-color: #e31837 !important;
    border: none !important;
    outline: none !important;
}

/* Override any inline white styles */
.fi-fo-rich-editor [style*="white"],
.fi-fo-rich-editor [style*="#fff"],
.fi-fo-rich-editor [style*="rgb(255"],
.fi-fo-rich-editor [style*="background"] {
    background: #1e1e2e !important;
    background-color: #1e1e2e !important;
}

/* Paragraph Text */
.ProseMirror p {
    color: #e5e7eb !important;
    font-size: 18px !important;
    margin-bottom: 1.2em !important;
}

/* Font Size Classes for RichEditor */
.ProseMirror .text-xs { font-size: 12px !important; }
.ProseMirror .text-sm { font-size: 14px !important; }
.ProseMirror .text-base { font-size: 16px !important; }
.ProseMirror .text-lg { font-size: 18px !important; }
.ProseMirror .text-xl { font-size: 20px !important; }
.ProseMirror .text-2xl { font-size: 24px !important; }
.ProseMirror .text-3xl { font-size: 30px !important; }
.ProseMirror .text-4xl { font-size: 36px !important; }

/* Headings */
.ProseMirror h1 {
    color: #ffffff !important;
    font-size: 32px !important;
    font-weight: 700 !important;
}

.ProseMirror h2 {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 700 !important;
}

.ProseMirror h3 {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 600 !important;
}

.ProseMirror h4 {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

/* Placeholder text */
.ProseMirror p.is-editor-empty:first-child::before,
.ProseMirror .is-empty::before,
.ProseMirror[data-placeholder]::before {
    color: #9ca3af !important;
    font-size: 18px !important;
}

/* Links */
.ProseMirror a {
    color: #60a5fa !important;
}

/* Code blocks */
.ProseMirror pre {
    background: #0d0d14 !important;
    color: #22d3ee !important;
    padding: 16px !important;
    border-radius: 8px !important;
}

/* Inline code */
.ProseMirror code {
    background: rgba(34, 211, 238, 0.2) !important;
    color: #22d3ee !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Blockquote */
.ProseMirror blockquote {
    border-right: 4px solid #e31837 !important;
    background: rgba(227, 24, 55, 0.1) !important;
    padding: 16px 20px !important;
    border-radius: 0 8px 8px 0 !important;
    color: #d1d5db !important;
}

/* Lists */
.ProseMirror ul,
.ProseMirror ol {
    padding-right: 1.5em !important;
}

.ProseMirror li {
    font-size: 18px !important;
    color: #ffffff !important;
}