/*
|--------------------------------------------------------------------------
| 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: Royal Blue (#3B6FCF) - matching the logo
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   CSS Variables
   ========================================================================== */
   :root {
    --primary-color: #4169E1;
    --primary-light: #60a5fa;
    --primary-dark: #3451b2;
    --primary-gradient: linear-gradient(135deg, #3451b2 0%, #60a5fa 100%);
    --sidebar-bg: #1e293b;
    --sidebar-bg-dark: #0f172a;
    --sidebar-border: #334155;
    --sidebar-text: #e2e8f0;
    --sidebar-text-muted: #94a3b8;
}

/* ==========================================================================
   Dark Sidebar
   ========================================================================== */

/* Sidebar Container */
.fi-sidebar {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--sidebar-border) !important;
}

.fi-sidebar-nav {
    background-color: var(--sidebar-bg) !important;
}

/* Sidebar Header (Logo Area) */
.fi-sidebar-header {
    background-color: var(--sidebar-bg-dark) !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
}

/* Sidebar Brand/Logo Text */
.fi-sidebar-header a,
.fi-sidebar-header span,.fi-sidebar-header div {
    color: white !important;
}

/* Sidebar Navigation Items */
.fi-sidebar-nav .fi-sidebar-item-label,
.fi-sidebar-nav .fi-sidebar-item-icon {
    color: var(--sidebar-text) !important;
    transition: all 0.2s ease;
}

/* Sidebar Group Labels */
.fi-sidebar-nav .fi-sidebar-group-label {
    color: var(--sidebar-text-muted) !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* Sidebar Item Hover */
.fi-sidebar-item > .fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-sidebar-item:hover .fi-sidebar-item-label,
.fi-sidebar-item:hover .fi-sidebar-item-icon {
    color: white !important;
}

/* Sidebar Active Item */
.fi-sidebar-item.fi-active > a,
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-sidebar-item-active > a,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn {
    background: var(--primary-gradient) !important;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}


/* Hover */
.fi-sidebar-item > a:hover,
.fi-sidebar-item > .fi-sidebar-item-button:hover,
.fi-sidebar-item > .fi-sidebar-item-btn:hover {
    background: var(--primary-gradient) !important;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    transition: all 0.2s ease-in-out;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: white !important;
    font-weight: 600;
}

/* Active item dot/border indicator */
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border div,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-grouped-border div {
    background-color: white !important;
}

/* Sidebar Collapsed State */
.fi-sidebar-nav-collapsed .fi-sidebar-item.fi-active > a,
.fi-sidebar-nav-collapsed .fi-sidebar-item.fi-sidebar-item-active > a {
    background: var(--primary-color) !important;
}

/* Sidebar Footer */
.fi-sidebar-footer {
    background-color: var(--sidebar-bg-dark) !important;
    border-top: 1px solid var(--sidebar-border) !important;
}

/* ==========================================================================
   Tenant Menu (Dark Style)
   ========================================================================== */

/* Tenant Menu Trigger Button */
.fi-tenant-menu-trigger {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--sidebar-border) !important;
}

.fi-tenant-menu-trigger:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.fi-tenant-menu-trigger span {
    color: white !important;
}

.fi-tenant-menu-trigger svg {
    color: var(--sidebar-text-muted) !important;
}

/* Tenant Dropdown Panel (Dark) */
.fi-sidebar .fi-dropdown-panel,
.fi-tenant-menu-trigger + .fi-dropdown-panel,
div[x-float] .fi-dropdown-panel {
    background-color: var(--sidebar-bg) !important;
    border: 1px solid var(--sidebar-border) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Dropdown List Items */
.fi-sidebar .fi-dropdown-list-item,
.fi-dropdown-panel .fi-dropdown-list-item {
    color: var(--sidebar-text) !important;
}

.fi-sidebar .fi-dropdown-list-item:hover,
.fi-dropdown-panel .fi-dropdown-list-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-sidebar .fi-dropdown-list-item-label {
    color: var(--sidebar-text) !important;
}

/* Dropdown Dividers */
.fi-sidebar .fi-dropdown-panel .divide-gray-100 > * + *,
.fi-dropdown-panel.divide-gray-100 > * + * {
    border-color: var(--sidebar-border) !important;
}

/* Sidebar Dropdown Panels */
.fi-sidebar-nav .fi-dropdown-panel {
    max-width: max-content !important;
    background-color: var(--sidebar-bg) !important;
    border-color: var(--sidebar-border) !important;
}
.fi-ta-header-cell-label {
    color: white !important;
}
/* ==========================================================================
   Section Headers (Cards)
   ========================================================================== */

.fi-section-header {
    background: var(--primary-gradient) !important;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    padding: 1rem 1.5rem !important;
}

.fi-section-header-heading {
    color: white !important;
    font-weight: 600 !important;
}

.fi-section-header-description {
    color: rgba(255, 255, 255, 0.85) !important;
}

.fi-section-header svg,
.fi-section-header .fi-icon-btn {
    color: white !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;
}

/* ==========================================================================
   Notifications - Hide Delete/Close Button
   ========================================================================== */

/* 
 * إخفاء زر الحذف/الإغلاق (X) من إشعارات Filament
 * الإشعارات لا تُحذف إلا يدوياً من صفحة الإشعارات
 */

/* إخفاء زر الإغلاق في Database Notifications Modal */
.fi-modal [class*="notification"] button[class*="close"],
.fi-modal [class*="notification"] button:has(svg[class*="x-mark"]),
/* Notification close button - الزر في زاوية كل إشعار */
.fi-no-notification-close-btn,
[class*="fi-no"] button[class*="close"],
/* زر X في الإشعارات */
.fi-notification button:first-of-type:has(svg),
/* Database notifications في الجرس */
[x-data*="notification"] button[x-on\:click*="close"],
[x-data*="notification"] button[wire\:click*="close"],
/* إخفاء أيقونة X في الإشعار */
.fi-no-notification > div:first-child > button,
/* Filament 3 database notification close */
div[wire\:key*="database-notification"] button:has(svg[data-slot="icon"]):first-of-type {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* إخفاء زر mark as read التلقائي - نريد التحكم اليدوي */
.fi-no-notification button[wire\:click*="markAsRead"]:not([wire\:click*="markAllAsRead"]) {
    /* نبقيه ظاهر للتحديد اليدوي */
}

/* التأكد من إظهار أزرار العرض فقط */
.fi-no-notification-actions a[href],
.fi-no-notification a.fi-link {
    display: inline-flex !important;
}