/*
|--------------------------------------------------------------------------
| Custom Admin Panel Styles (Additional)
|--------------------------------------------------------------------------
| This file contains ADDITIONAL custom styles for the Filament admin panel.
| These styles ADD to the default Filament styles, not replace them.
| Primary Color: Indigo (#4f46e5 / rgba(79, 70, 229, 1))
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   CSS Variables
   ========================================================================== */
   :root {
    --primary-color: #2d5aa0;
    --primary-light: #0d2347;
    --primary-dark: #2d5aa0;
    --primary-gradient: linear-gradient(135deg, #e8c547 0%, #c9a227 100%);
    --sidebar-bg: #1e293b;
    --sidebar-bg-dark: #0f172a;
    --sidebar-border: #334155;
    --sidebar-text: #e2e8f0;
    --sidebar-text-muted: #94a3b8;
        --cpec-blue:       #1a3a6b;
    --cpec-blue-dark:  #0d2347;
    --cpec-blue-light: #2d5aa0;
    --cpec-gold:       #c9a227;
    --cpec-gold-light: #e8c547;
    --cpec-text-light: #e2e8f0;
    --cpec-text-muted: #94a3b8;
}

/* ==========================================================================
   Sidebar — توافق مع Filament v5، ألوان فقط بدون تعديل layout
   ========================================================================== */

/* Sidebar خلفية داكنة */
.fi-sidebar {
    background-color: var(--sidebar-bg) !important;
}

/* Header الشعار */
.fi-sidebar-header {
    background-color: var(--cpec-blue-dark) !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
}
.fi-sidebar-header .cpec-brand-name { color: white !important; }
.fi-sidebar-header .cpec-brand-sub { color: rgba(255,255,255,0.7) !important; }
.fi-sidebar-header a, .fi-sidebar-header span { color: white !important; }

/* Brand في Topbar والـ login */
.fi-topbar .cpec-brand-name, .cpec-brand-name { color: var(--cpec-blue) !important; }
.fi-topbar .cpec-brand-sub, .cpec-brand-sub { color: #64748b !important; }
.fi-simple-page .cpec-brand-name, .fi-simple .cpec-brand-name { color: var(--cpec-blue) !important; }
.fi-simple-page .cpec-brand-sub, .fi-simple .cpec-brand-sub { color: #64748b !important; }

/* عناصر التنقل */
.fi-sidebar-nav .fi-sidebar-item-label { color: var(--sidebar-text) !important; }
.fi-sidebar-nav .fi-sidebar-item-icon { color: var(--sidebar-text) !important; }
.fi-sidebar-group-label, .fi-sidebar-nav [class*="group"] span { color: var(--sidebar-text-muted) !important; }

/* Hover */
.fi-sidebar-item:hover .fi-sidebar-item-label,
.fi-sidebar-item:hover .fi-sidebar-item-icon { color: white !important; }
.fi-sidebar-item > a:hover,
.fi-sidebar-item > [class*="btn"]:hover,
.fi-sidebar-item > [class*="button"]:hover {
    background-color: rgba(255,255,255,0.06) !important;
}

/* العنصر النشط */
.fi-sidebar-item.fi-active > a,
.fi-sidebar-item.fi-sidebar-item-active > a,
.fi-sidebar-item.fi-active > [class*="btn"],
.fi-sidebar-item.fi-sidebar-item-active > [class*="btn"] {
    background: var(--primary-gradient) !important;
    color: white !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-icon { color: white !important; }

/* Footer */
.fi-sidebar-footer { background-color: rgba(0,0,0,0.2) !important; }

/* عند طي الـ sidebar إخفاء نص الشعار */
.fi-sidebar-nav-collapsed .cpec-brand-logo > div:last-child,
.fi-sidebar-collapsed .cpec-brand-logo > div:last-child { display: none !important; }

/* Tenant / Dropdown في الـ sidebar */
.fi-sidebar .fi-dropdown-panel {
    background-color: var(--sidebar-bg) !important;
    border: 1px solid var(--sidebar-border) !important;
}
.fi-sidebar .fi-dropdown-list-item-label { color: var(--sidebar-text) !important; }
.fi-ta-header-cell-label {
    color: white !important;
}
/* ==========================================================================
   Section Headers (Cards)
   ========================================================================== */

.fi-section {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
    overflow: hidden !important;
}

.fi-section-header {
    background: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%) !important;
    border-bottom: 2px solid var(--cpec-gold) !important;
    padding: 12px 16px !important;
}

.fi-section-header-heading {
    color: var(--cpec-blue) !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   Table Styling
   ========================================================================== */

/* Table Header */
.fi-ta-table > thead > tr {
    background: var(--primary-gradient) !important;
}

.fi-ta-table > thead > tr > th {
    color: white !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

.fi-ta-header-cell-sort-btn svg {
    color: white !important;
}

/* Table Row Hover */
.fi-ta-row {
    transition: background-color 0.15s ease;
}

.fi-ta-row:hover {
    background-color: rgba(79, 70, 229, 0.04) !important;
}

.dark .fi-ta-row:hover {
    background-color: rgba(99, 102, 241, 0.08) !important;
}

/* ==========================================================================
   Form Input Enhancements
   ========================================================================== */

/* Input Prefix/Suffix Icons */
.fi-input-wrp [class*="flex items-center"][class*="border-s"] {
    background-color: var(--primary-color) !important;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.fi-input-wrp [class*="flex items-center"][class*="border-s"] svg {
    color: white !important;
}

/* Exception for nav inputs */
nav .fi-input-wrp [class*="flex items-center"][class*="border-s"] {
    background-color: transparent !important;
}

nav .fi-input-wrp [class*="flex items-center"][class*="border-s"] svg {
    color: var(--sidebar-text-muted) !important;
}

/* Form Select Arrow (RTL) */
.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: left 0.5rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-left: 2.5rem !important;
}

.dark .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Primary Button Enhancement */
.fi-btn-primary {
    background: var(--primary-gradient) !important;
    transition: all 0.2s ease;
}

.fi-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

/* Icon Buttons in Headers */
.fi-section-header .fi-icon-btn,
.fi-ta-table thead .fi-icon-btn {
    color: white !important;
}

/* Type Buttons (Schedule) */
.type-btn.active.lecture {
    background: rgb(220 252 231) !important;
    border-color: rgb(34 197 94) !important;
    color: rgb(21 128 61) !important;
}

.type-btn.active.lab {
    background: rgb(254 243 199) !important;
    border-color: rgb(245 158 11) !important;
    color: rgb(180 83 9) !important;
}

.type-btn.active.tutorial {
    background: rgb(219 234 254) !important;
    border-color: rgb(59 130 246) !important;
    color: rgb(29 78 216) !important;
}

.dark .type-btn.active.lecture {
    background: rgba(34, 197, 94, 0.2) !important;
    color: rgb(134 239 172) !important;
}

.dark .type-btn.active.lab {
    background: rgba(245, 158, 11, 0.2) !important;
    color: rgb(252 211 77) !important;
}

.dark .type-btn.active.tutorial {
    background: rgba(59, 130, 246, 0.2) !important;
    color: rgb(147 197 253) !important;
}

/* ==========================================================================
   Cards & Stats
   ========================================================================== */

/* Stats Card Hover */
.fi-wi-stats-overview-stat {
    transition: all 0.2s ease;
    border-radius: 0.75rem;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Schedule Grid
   ========================================================================== */

.schedule-card {
    transition: all 0.15s ease !important;
}

.schedule-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.empty-slot:hover {
    border-color: var(--primary-color) !important;
    background: rgba(79, 70, 229, 0.05) !important;
}

/* ==========================================================================
   Modal Enhancements
   ========================================================================== */

.modal-content {
    animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* ==========================================================================
   Dropdown Panels
   ========================================================================== */

nav .fi-dropdown-panel {
    max-width: 16rem !important;
}

/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Sidebar Scrollbar */
.fi-sidebar::-webkit-scrollbar-track {
    background: var(--sidebar-bg-dark);
}

.fi-sidebar::-webkit-scrollbar-thumb {
    background: var(--sidebar-border);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

@media print {
    .fi-sidebar,
    .fi-topbar,
    .no-print {
        display: none !important;
    }

    .fi-main {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 1024px) {
    .fi-sidebar {
        background-color: var(--sidebar-bg) !important;
    }
}

/* ==========================================================================
   LTR Direction for English Input Fields
   ========================================================================== */

/* English text inputs - LTR direction */
input[name$="_en"],
input[name*="_en]"],
textarea[name$="_en"],
textarea[name*="_en]"],
[data-field-name$="_en"] input,
[data-field-name$="_en"] textarea,
.fi-fo-field-wrp[wire\:key*="_en"] input,
.fi-fo-field-wrp[wire\:key*="_en"] textarea,
/* TinyMCE English editors */
.fi-fo-field-wrp[wire\:key*="_en"] .tox-tinymce,
.fi-fo-field-wrp[wire\:key*="_en"] .tox-edit-area__iframe {
    direction: ltr !important;
    text-align: left !important;
}

/* English RichEditor content */
.fi-fo-field-wrp[wire\:key*="_en"] .ProseMirror,
.fi-fo-field-wrp[wire\:key*="_en"] .tiptap {
    direction: ltr !important;
    text-align: left !important;
}

/* English name inputs (name_en, full_name_en, etc.) */
input[name="name_en"],
input[name="full_name_en"],
input[name="title_en"],
input[name="position_en"],
input[name="degree_en"],
input[name="specialization_en"],
input[name="location_en"],
input[name="author_en"],
textarea[name="description_en"],
textarea[name="content_en"],
textarea[name="excerpt_en"],
textarea[name="value_en"],
textarea[name="bio_en"],
textarea[name="abstract_en"] {
    direction: ltr !important;
    text-align: left !important;
}

/* Ensure Arabic fields remain RTL (default) */
input[name$="_ar"],
input[name*="_ar]"],
textarea[name$="_ar"],
textarea[name*="_ar]"] {
    direction: rtl !important;
    text-align: right !important;
}


/* =====================================================
   PAGE HEADER
   ===================================================== */
.fi-header {
    background: linear-gradient(135deg, var(--cpec-blue) 0%, var(--cpec-blue-light) 100%) !important;
    color: white !important;
    padding: 20px 24px !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 15px rgba(26, 58, 107, 0.3) !important;
}

.fi-header-heading {
    color: white !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
}

.fi-header-subheading {
    color: rgba(255,255,255,0.75) !important;
}
.fi-breadcrumbs-item-label {
    color: var(--cpec-text-muted) !important;
}
.fi-dropdown-list-item-label {
    color: var(--cpec-blue) !important;
}
.fi-dropdown-panel .fi-dropdown-list-item-label {
    color: var(--cpec-blue) !important;
}

/* ==========================================================================
   Force Latin (English) Numerals in Arabic Locale
   Cairo font renders Arabic-Indic digits (٠١٢٣...) by default.
   We define a @font-face that uses system fonts ONLY for digit unicode range,
   then prepend it to Cairo in the font-family stack.
   ========================================================================== */
@font-face {
    font-family: 'LatinDigits';
    src: local('Segoe UI'), local('Arial'), local('Helvetica Neue'), local('sans-serif');
    unicode-range: U+0030-0039, U+002E, U+002C, U+0025, U+002B, U+002D;
}

body {
    font-family: 'LatinDigits', 'Cairo', 'Segoe UI', system-ui, sans-serif !important;
}

[dir="rtl"] {
    font-family: 'LatinDigits', 'Cairo', 'Segoe UI', system-ui, sans-serif !important;
}