/*
 * ═══════════════════════════════════════════════════════════════
 *  Medlink Admin  —  Sky Blue / Dark & Light Theme
 *  Filament v5 Custom Stylesheet
 * ═══════════════════════════════════════════════════════════════
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Tajawal:wght@400;500;600;700;800;900&display=swap');

/* ──────────────────────────────────────────
   Design Tokens
   ────────────────────────────────────────── */
:root {
    --ml-sky-50:  #f0f9ff;
    --ml-sky-100: #e0f2fe;
    --ml-sky-200: #bae6fd;
    --ml-sky-300: #7dd3fc;
    --ml-sky-400: #38bdf8;
    --ml-sky-500: #0ea5e9;
    --ml-sky-600: #0284c7;
    --ml-sky-700: #0369a1;
    --ml-sky-800: #075985;
    --ml-sky-900: #0c4a6e;

    --ml-white:   #ffffff;
    --ml-surface: #f8fafc;
    --ml-border:  rgba(14, 165, 233, 0.15);

    --ml-shadow-sm: 0 2px 12px rgba(14, 165, 233, 0.07);
    --ml-shadow:    0 4px 24px rgba(14, 165, 233, 0.11);
    --ml-shadow-lg: 0 12px 40px rgba(14, 165, 233, 0.18);
    --ml-shadow-xl: 0 25px 60px rgba(3, 105, 161, 0.30);

    --ml-radius:    0.75rem;
    --ml-radius-lg: 1.25rem;
    --ml-radius-xl: 1.75rem;

    --ml-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ──────────────────────────────────────────
   Global / Typography
   ────────────────────────────────────────── */
*, *::before, *::after {
    font-family: 'Tajawal', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* ──────────────────────────────────────────
   Page Background & Headings
   ────────────────────────────────────────── */
html:not(.dark) .fi-main,
html:not(.dark) .fi-body {
    background: var(--ml-surface) !important;
}

html:not(.dark) .fi-header-heading {
    color: var(--ml-sky-900) !important;
}

html.dark .fi-main,
html.dark .fi-body {
    background: #090d16 !important;
}

html.dark .fi-header-heading {
    color: #f8fafc !important;
}

/* ──────────────────────────────────────────
   Sidebar
   ────────────────────────────────────────── */
html:not(.dark) .fi-sidebar {
    background: linear-gradient(170deg, #ffffff 0%, #f0f9ff 100%) !important;
    border-inline-end: 1.5px solid var(--ml-border) !important;
    box-shadow: 4px 0 28px rgba(14, 165, 233, 0.06) !important;
}

html.dark .fi-sidebar {
    background: linear-gradient(170deg, #0f172a 0%, #0b1329 100%) !important;
    border-inline-end: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.4) !important;
}

/* Sidebar header / brand */
.fi-sidebar-header {
    background: linear-gradient(135deg, var(--ml-sky-600) 0%, var(--ml-sky-800) 100%) !important;
    padding: 1.25rem 1rem !important;
    border-bottom: none !important;
}

.fi-sidebar-header .fi-brand-name,
.fi-sidebar-header .fi-logo {
    color: var(--ml-white) !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    letter-spacing: -0.025em !important;
    -webkit-text-fill-color: white !important;
    background: none !important;
}

/* Sidebar nav group labels */
html:not(.dark) .fi-sidebar-group-label {
    color: var(--ml-sky-500) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding-inline-start: 0.75rem !important;
}

html.dark .fi-sidebar-group-label {
    color: var(--ml-sky-400) !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding-inline-start: 0.75rem !important;
}

/* Sidebar nav items */
html:not(.dark) .fi-sidebar-item-button {
    border-radius: 0.625rem !important;
    margin: 2px 8px !important;
    padding: 0.55rem 0.875rem !important;
    color: #475569 !important;
    font-weight: 500 !important;
    transition: var(--ml-transition) !important;
}

html:not(.dark) .fi-sidebar-item-button:hover {
    background: var(--ml-sky-50) !important;
    color: var(--ml-sky-700) !important;
}

html.dark .fi-sidebar-item-button {
    border-radius: 0.625rem !important;
    margin: 2px 8px !important;
    padding: 0.55rem 0.875rem !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    transition: var(--ml-transition) !important;
}

html.dark .fi-sidebar-item-button:hover {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #38bdf8 !important;
}

.fi-sidebar-item-button.fi-active,
.fi-sidebar-item-button[aria-current="page"] {
    background: linear-gradient(135deg, var(--ml-sky-500), var(--ml-sky-700)) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.38) !important;
}

.fi-sidebar-item-button.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon {
    color: white !important;
}

/* ──────────────────────────────────────────
   Top Bar
   ────────────────────────────────────────── */
html:not(.dark) .fi-topbar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border-bottom: 1.5px solid var(--ml-border) !important;
    box-shadow: 0 2px 16px rgba(14, 165, 233, 0.06) !important;
}

html.dark .fi-topbar {
    background: rgba(15, 23, 42, 0.92) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}

/* ──────────────────────────────────────────
   Cards & Sections & Containers
   ────────────────────────────────────────── */
html:not(.dark) .fi-section,
html:not(.dark) .fi-card,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-wi-account,
html:not(.dark) .fi-wi-filament-info {
    background: var(--ml-white) !important;
    border-radius: var(--ml-radius-lg) !important;
    border: 1.5px solid var(--ml-border) !important;
    box-shadow: var(--ml-shadow) !important;
    transition: var(--ml-transition) !important;
}

html.dark .fi-section,
html.dark .fi-card,
html.dark .fi-ta-ctn,
html.dark .fi-wi-account,
html.dark .fi-wi-filament-info {
    background: #0f172a !important;
    border-radius: var(--ml-radius-lg) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
    transition: var(--ml-transition) !important;
}

html:not(.dark) .fi-section:hover,
html:not(.dark) .fi-card:hover {
    box-shadow: var(--ml-shadow-lg) !important;
}

html:not(.dark) .fi-section-header-heading {
    color: var(--ml-sky-900) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

html.dark .fi-section-header-heading {
    color: #f8fafc !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* ──────────────────────────────────────────
   Stats Overview Widgets
   ────────────────────────────────────────── */
html:not(.dark) .fi-wi-stats-overview-stat {
    background: var(--ml-white) !important;
    border-radius: var(--ml-radius-lg) !important;
    border: 1.5px solid var(--ml-border) !important;
    box-shadow: var(--ml-shadow) !important;
    transition: var(--ml-transition) !important;
    overflow: hidden !important;
    position: relative !important;
}

html.dark .fi-wi-stats-overview-stat {
    background: #0f172a !important;
    border-radius: var(--ml-radius-lg) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
    transition: var(--ml-transition) !important;
    overflow: hidden !important;
    position: relative !important;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ml-sky-400), var(--ml-sky-600));
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px) !important;
}

html:not(.dark) .fi-wi-stats-overview-stat-label {
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
}

html.dark .fi-wi-stats-overview-stat-label {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important;
}

html:not(.dark) .fi-wi-stats-overview-stat-value {
    color: var(--ml-sky-900) !important;
    font-weight: 800 !important;
    font-size: 1.875rem !important;
    letter-spacing: -0.035em !important;
    line-height: 1.2 !important;
}

html.dark .fi-wi-stats-overview-stat-value {
    color: #f8fafc !important;
    font-weight: 800 !important;
    font-size: 1.875rem !important;
    letter-spacing: -0.035em !important;
    line-height: 1.2 !important;
}

.fi-wi-stats-overview-stat-description {
    color: var(--ml-sky-500) !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
}

/* ──────────────────────────────────────────
   Buttons
   ────────────────────────────────────────── */
.fi-btn {
    border-radius: 0.625rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: var(--ml-transition) !important;
}

.fi-btn-color-primary {
    background: linear-gradient(135deg, var(--ml-sky-500) 0%, var(--ml-sky-700) 100%) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35) !important;
}

.fi-btn-color-primary:hover {
    background: linear-gradient(135deg, var(--ml-sky-600) 0%, var(--ml-sky-800) 100%) !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.48) !important;
    transform: translateY(-1px) !important;
}

.fi-btn-color-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
}

/* ──────────────────────────────────────────
   Form Inputs
   ────────────────────────────────────────── */
html:not(.dark) .fi-input-wrp input,
html:not(.dark) .fi-input-wrp select,
html:not(.dark) .fi-input-wrp textarea,
html:not(.dark) .fi-select-input {
    border-radius: 0.625rem !important;
    border: 1.5px solid var(--ml-sky-200) !important;
    background: var(--ml-sky-50) !important;
    font-size: 0.9375rem !important;
    color: #0f172a !important;
    transition: var(--ml-transition) !important;
}

html:not(.dark) .fi-input-wrp input:focus,
html:not(.dark) .fi-input-wrp select:focus,
html:not(.dark) .fi-input-wrp textarea:focus {
    border-color: var(--ml-sky-500) !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12) !important;
    outline: none !important;
}

html.dark .fi-input-wrp input,
html.dark .fi-input-wrp select,
html.dark .fi-input-wrp textarea,
html.dark .fi-select-input {
    border-radius: 0.625rem !important;
    border: 1.5px solid #334155 !important;
    background: #1e293b !important;
    font-size: 0.9375rem !important;
    color: #f8fafc !important;
    transition: var(--ml-transition) !important;
}

html.dark .fi-input-wrp input:focus,
html.dark .fi-input-wrp select:focus,
html.dark .fi-input-wrp textarea:focus {
    border-color: var(--ml-sky-500) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2) !important;
    outline: none !important;
}

html:not(.dark) .fi-fo-field-wrp label {
    color: var(--ml-sky-800) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

html.dark .fi-fo-field-wrp label {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

/* ──────────────────────────────────────────
   Table
   ────────────────────────────────────────── */
html:not(.dark) .fi-ta-header-cell {
    background: var(--ml-sky-50) !important;
    color: var(--ml-sky-800) !important;
    font-weight: 700 !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
}

html.dark .fi-ta-header-cell {
    background: #1e293b !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
}

html:not(.dark) .fi-ta-row:hover > td {
    background: #f0f9ff !important;
}

html.dark .fi-ta-row:hover > td {
    background: rgba(14, 165, 233, 0.08) !important;
}

html:not(.dark) .fi-ta-cell {
    color: #334155 !important;
}

html.dark .fi-ta-cell {
    color: #cbd5e1 !important;
}

/* ──────────────────────────────────────────
   Badges
   ────────────────────────────────────────── */
.fi-badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 0.6875rem !important;
    letter-spacing: 0.02em !important;
    padding: 0.2rem 0.6rem !important;
}

/* ──────────────────────────────────────────
   Notifications
   ────────────────────────────────────────── */
.fi-no-notification {
    border-radius: var(--ml-radius-lg) !important;
    border-inline-start: 3px solid var(--ml-sky-500) !important;
    box-shadow: var(--ml-shadow-lg) !important;
}

/* ──────────────────────────────────────────
   Custom Scrollbar
   ────────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; height: 5px; }

html:not(.dark) ::-webkit-scrollbar-track    { background: var(--ml-sky-50); }
html:not(.dark) ::-webkit-scrollbar-thumb    { background: var(--ml-sky-200); border-radius: 999px; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: var(--ml-sky-400); }

html.dark ::-webkit-scrollbar-track          { background: #090d16; }
html.dark ::-webkit-scrollbar-thumb          { background: #334155; border-radius: 999px; }
html.dark ::-webkit-scrollbar-thumb:hover    { background: var(--ml-sky-500); }

/* ──────────────────────────────────────────
   Dropdown / Select Menus
   ────────────────────────────────────────── */
html:not(.dark) .fi-dropdown-panel,
html:not(.dark) .fi-select-options-list {
    background: white !important;
    border-radius: var(--ml-radius) !important;
    border: 1.5px solid var(--ml-border) !important;
    box-shadow: var(--ml-shadow-lg) !important;
}

html.dark .fi-dropdown-panel,
html.dark .fi-select-options-list {
    background: #0f172a !important;
    border-radius: var(--ml-radius) !important;
    border: 1.5px solid #334155 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    color: #f8fafc !important;
}

/* ──────────────────────────────────────────
   Pagination
   ────────────────────────────────────────── */
.fi-pagination-item-btn.fi-active {
    background: linear-gradient(135deg, var(--ml-sky-500), var(--ml-sky-700)) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35) !important;
}