/* --- AI-GINEX MODERN GLOSSY DESIGN SYSTEM --- */
:root {
    --esmf-font: 'Inter', system-ui, -apple-system, sans-serif;
    --esmf-radius: 16px;
    --esmf-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Default variables that will be overridden by themes */
    --card-gradient-start: #6366f1;
    --card-gradient-end: #8b5cf6;
    --card-shadow-color: rgba(99, 102, 241, 0.4);
    --card-accent: #e0e7ff;
    
    /* Default Light Mode Colors (Base) */
    --esmf-bg-glass: rgba(255, 255, 255, 0.6);
    --esmf-bg-solid: #fff;
    --esmf-text-main: #334155;
    --esmf-text-sub: #64748b;
    --esmf-border: rgba(255, 255, 255, 0.5);
    --esmf-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    --esmf-input-bg: rgba(255, 255, 255, 0.7);
    --esmf-toggle-bg: rgba(226, 232, 240, 0.6);
}

/* =========================================
   PUBLIC INTERFACE WRAPPER
   ========================================= */
.eze-smart-menu-v5 {
    font-family: var(--esmf-font);
    background: transparent;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- TOOLBAR (Glassy) --- */
.esmf-v5-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px 20px;
    background: var(--esmf-bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--esmf-border);
    border-radius: 20px;
    box-shadow: var(--esmf-shadow);
    gap: 15px;
    transition: var(--esmf-transition);
}

.search-wrapper {
    position: relative;
    flex: 1;
    max-width: 450px;
}

.search-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--esmf-text-sub);
    pointer-events: none;
    font-size: 14px;
}

.esmf-live-search {
    width: 100% !important;
    padding: 12px 15px 12px 40px !important;
    border: 1px solid rgba(203, 213, 225, 0.6) !important;
    border-radius: 12px !important;
    background: var(--esmf-input-bg) !important;
    font-size: 15px !important;
    transition: var(--esmf-transition) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
    color: var(--esmf-text-main) !important;
}

.esmf-live-search:focus {
    outline: none !important;
    background: var(--esmf-bg-solid) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

/* --- Toolbar Actions Group --- */
.esmf-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Theme Toggle Button */
.esmf-theme-toggle {
    border: none;
    background: var(--esmf-toggle-bg);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    font-size: 18px;
    transition: var(--esmf-transition);
    position: relative;
    overflow: hidden;
}

.esmf-theme-toggle:hover {
    background: var(--esmf-bg-solid);
    color: #6366f1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Icon Switching Logic */
.esmf-theme-toggle .icon-moon { display: none; }
.esmf-theme-toggle .icon-sun { display: block; }

/* View Toggle */
.view-toggle {
    display: flex;
    background: var(--esmf-toggle-bg);
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}

.toggle-btn {
    border: none;
    background: transparent;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    color: var(--esmf-text-sub);
    font-size: 14px;
    transition: var(--esmf-transition);
}

.toggle-btn.active {
    background: var(--esmf-bg-solid);
    color: #6366f1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* =========================================
   SUPER GLOSSY GRID CARDS
   ========================================= */
.esmf-v5-grid-container {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    perspective: 1000px;
}

.view-grid .esmf-v5-grid-container { display: grid; }

/* --- CARD THEMES --- */
.esmf-v5-card:nth-child(4n+1) { --card-gradient-start: #6366f1; --card-gradient-end: #a855f7; --card-shadow-color: rgba(124, 58, 237, 0.4); --card-accent: #e0e7ff; }
.esmf-v5-card:nth-child(4n+2) { --card-gradient-start: #0ea5e9; --card-gradient-end: #2563eb; --card-shadow-color: rgba(14, 165, 233, 0.4); --card-accent: #e0f2fe; }
.esmf-v5-card:nth-child(4n+3) { --card-gradient-start: #f59e0b; --card-gradient-end: #ea580c; --card-shadow-color: rgba(234, 88, 12, 0.4); --card-accent: #ffedd5; }
.esmf-v5-card:nth-child(4n+4) { --card-gradient-start: #10b981; --card-gradient-end: #059669; --card-shadow-color: rgba(16, 185, 129, 0.4); --card-accent: #d1fae5; }

.esmf-v5-card {
    position: relative;
    border-radius: var(--esmf-radius);
    overflow: hidden;
    transition: var(--esmf-transition);
    border: 1px solid var(--esmf-border);
    background: linear-gradient(145deg, var(--esmf-bg-glass), rgba(255,255,255,0.4));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02), inset 0 0 0 1px rgba(255,255,255,0.5);
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.esmf-v5-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 25px -5px var(--card-shadow-color), 0 8px 10px -6px var(--card-shadow-color);
    z-index: 2;
    border-color: rgba(255,255,255,0.9);
}

.esmf-v5-card.esmf-selected {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px var(--card-gradient-start), 0 25px 50px -12px var(--card-shadow-color);
    z-index: 5;
    border: 2px solid #fff;
}

.esmf-v5-grid-container.has-selection .esmf-v5-card:not(.esmf-selected) {
    opacity: 0.6;
    transform: scale(0.95);
    filter: grayscale(0.4);
}

.card-head {
    background: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-end));
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
}

.card-head::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-25deg);
    transition: 0.7s;
}

.esmf-v5-card:hover .card-head::before { left: 150%; }

.category-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    backdrop-filter: blur(4px);
    transition: var(--esmf-transition);
}

.esmf-v5-card:hover .category-icon { background: #fff; color: var(--card-gradient-start); transform: rotate(10deg); }

.card-head h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: var(--esmf-transition);
}

.esmf-v5-card:hover .card-head h4 { transform: translateX(5px); letter-spacing: 1.5px; }

.card-links { 
    padding: 15px;
    background: rgba(255,255,255,0.1);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--esmf-text-main) !important;
    transition: all 0.2s ease;
    background: var(--esmf-bg-glass);
    border: 1px solid var(--esmf-border);
}

.link-item:hover {
    background: var(--esmf-bg-solid);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: var(--card-gradient-start) !important;
    border-color: var(--card-gradient-start);
}

.link-left { display: flex; align-items: center; gap: 12px; }

.icon-box {
    width: 28px;
    height: 28px;
    background: var(--card-accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--card-gradient-start);
    transition: all 0.3s ease;
}

.link-item:hover .icon-box { background: var(--card-gradient-start); color: #fff; }

.label { font-weight: 600; font-size: 14px; }
.arrow { font-size: 12px; opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; color: var(--card-gradient-start); }
.link-item:hover .arrow { opacity: 1; transform: translateX(0); }


/* =========================================
   LIST VIEW (Tabs) - IMPROVED GLOSSY
   ========================================= */
.esmf-v5-tab-container {
    display: none;
    background: var(--esmf-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--esmf-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    min-height: 400px;
}

.view-tabs .esmf-v5-tab-container { display: flex; }

.tab-sidebar {
    width: 280px;
    background: rgba(248, 250, 252, 0.7); /* Light Sidebar Base */
    border-right: 1px solid var(--esmf-border);
    padding: 10px 0;
    transition: var(--esmf-transition);
}

.tab-trigger {
    padding: 14px 20px;
    cursor: pointer;
    color: var(--esmf-text-sub);
    font-weight: 500;
    font-size: 14px;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 10px;
    border-radius: 8px;
}

.tab-trigger:hover {
    background: var(--esmf-bg-glass);
    color: var(--esmf-text-main);
    transform: translateX(3px);
}

.tab-trigger.active {
    background: var(--esmf-bg-solid);
    color: #6366f1;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

/* Sidebar Count Badge */
.tab-trigger .count {
    background: rgba(0,0,0,0.05);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    color: var(--esmf-text-sub);
    transition: 0.3s;
}

.tab-trigger.active .count {
    background: #6366f1;
    color: #fff;
}

.tab-content {
    flex: 1;
    padding: 30px;
    background: rgba(255,255,255,0.3); /* Slight contrast from sidebar */
    position: relative;
    overflow-y: auto;
}

.pane-header h3 {
    margin: 0 0 5px 0;
    font-size: 20px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.pane-header p { margin: 0 0 20px 0; color: #94a3b8; font-size: 13px; }

/* Grid for Links inside the Tab */
.pane-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.pane-link {
    display: flex;
    align-items: center;
    padding: 15px;
    background: var(--esmf-bg-glass);
    border: 1px solid var(--esmf-border);
    border-radius: 12px;
    text-decoration: none !important;
    transition: var(--esmf-transition);
    position: relative;
}

.pane-link:hover {
    background: var(--esmf-bg-solid);
    border-color: #6366f1;
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.1);
    z-index: 2;
}

.pane-link-icon {
    width: 40px;
    height: 40px;
    background: var(--card-accent);
    color: #6366f1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 15px;
    transition: 0.3s;
}

.pane-link:hover .pane-link-icon {
    background: #6366f1;
    color: #fff;
    transform: rotate(15deg);
}

.pane-link-text { flex: 1; }
.pane-link-text .title { font-weight: 700; color: var(--esmf-text-main); display: block; font-size: 15px; }
.pane-link-text .url { font-size: 12px; color: var(--esmf-text-sub); display: block; margin-top: 2px; }

.pane-link-action {
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
    color: #6366f1;
}

.pane-link:hover .pane-link-action { opacity: 1; transform: translateX(0); }

/* =========================================
   DARK MODE OVERRIDES (The Magic)
   ========================================= */
.eze-smart-menu-v5.dark-mode {
    --esmf-bg-glass: rgba(15, 23, 42, 0.75);
    --esmf-bg-solid: #1e293b;
    --esmf-text-main: #f1f5f9;
    --esmf-text-sub: #94a3b8;
    --esmf-border: rgba(255, 255, 255, 0.1);
    --esmf-input-bg: rgba(30, 41, 59, 0.6);
    --esmf-toggle-bg: rgba(51, 65, 85, 0.5);
    --card-accent: rgba(99, 102, 241, 0.2);
}

.eze-smart-menu-v5.dark-mode .esmf-v5-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.8));
    border-color: rgba(255, 255, 255, 0.08);
}

.eze-smart-menu-v5.dark-mode .tab-sidebar {
    background: rgba(15, 23, 42, 0.6);
}

.eze-smart-menu-v5.dark-mode .tab-trigger.active {
    background: #1e293b;
    color: #818cf8;
}

.eze-smart-menu-v5.dark-mode .tab-content {
    background: rgba(0,0,0,0.2);
}

/* Switch the Icon */
.eze-smart-menu-v5.dark-mode .esmf-theme-toggle .icon-sun { display: none; }
.eze-smart-menu-v5.dark-mode .esmf-theme-toggle .icon-moon { display: block; color: #fbbf24; }

.eze-smart-menu-v5.dark-mode .esmf-theme-toggle:hover {
    background: #334155;
}

/* Specific text fixes for dark mode */
.eze-smart-menu-v5.dark-mode .pane-link-text .title { color: #f8fafc; }
.eze-smart-menu-v5.dark-mode .link-item:hover .icon-box { color: #fff; }

/* =========================================
   GLOBAL PAGE OVERRIDES (Optional)
   ========================================= */
body.esmf-global-dark-mode {
    background-color: #0f172a !important; /* Matches --esmf-bg-glass darker variant */
    color: #cbd5e1 !important;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .esmf-v5-grid-container { grid-template-columns: 1fr; }
    .esmf-v5-tab-container { flex-direction: column; height: auto; }
    
    .tab-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--esmf-border);
        display: flex;
        overflow-x: auto;
        padding: 10px;
        background: var(--esmf-bg-glass);
        white-space: nowrap;
        gap: 10px;
    }
    
    .tab-trigger {
        margin: 0;
        padding: 8px 16px;
        flex-shrink: 0;
        background: var(--esmf-toggle-bg);
    }
    
    .tab-trigger .count { display: none; } 
    .pane-links { grid-template-columns: 1fr; }
    .esmf-v5-toolbar { flex-direction: column; align-items: stretch; }
    .esmf-toolbar-actions { width: 100%; justify-content: space-between; }
}

/* =========================================
   ADMIN STYLES (ENHANCED FOR v5.4)
   ========================================= */
.esmf-manager-wrapper { background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-top: 20px; }
.esmf-header { border-bottom: 1px solid #eee; margin-bottom: 20px; padding-bottom: 10px; }
.esmf-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px; }
.esmf-field input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.esmf-admin-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.esmf-admin-table th, .esmf-admin-table td { padding: 10px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
.esmf-btn-primary { background: #2271b1; color: #fff; border:none; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
.esmf-btn-secondary { background: #f0f0f1; color: #2271b1; border: 1px solid #2271b1; padding: 8px 15px; border-radius: 4px; cursor: pointer; }
.esmf-btn-secondary:hover { background: #f6f7f7; }
.esmf-btn-small { background: #2271b1; color: #fff; border:none; padding: 5px 10px; border-radius: 3px; cursor: pointer; font-size: 13px; }
.esmf-danger-link { color: #d63638; text-decoration: none; font-size: 13px; border: 1px solid #d63638; padding: 4px 8px; border-radius: 4px; }
.esmf-danger-link:hover { background: #d63638; color: #fff; }

/* CSV & Batch Update Styles */
.esmf-checkbox-wrapper { margin-top: 10px; padding: 10px; background: #f0f6fc; border-radius: 4px; border: 1px solid #cce5ff; }
.esmf-checkbox-wrapper label { cursor: pointer; color: #1d2327; font-size: 14px; }
.format-hint { font-size: 12px; color: #646970; margin: 5px 0 10px 0; font-style: italic; }

/* Bulk Toolbar */
.esmf-bulk-toolbar { 
    background: #f6f7f7; 
    padding: 10px; 
    border: 1px solid #dcdcde; 
    border-radius: 4px; 
    margin-bottom: 10px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}
.bulk-label { font-weight: 600; font-size: 13px; color: #50575e; }
.esmf-bulk-toolbar select, .esmf-bulk-toolbar input { padding: 4px 8px; border: 1px solid #8c8f94; border-radius: 4px; font-size: 13px; }

/* Notices */
.esmf-admin-notice { padding: 10px 15px; border-radius: 4px; margin-bottom: 20px; border-left: 4px solid; }
.esmf-success { background: #fff; border-color: #00a32a; color: #00a32a; box-shadow: 0 1px 1px rgba(0,0,0,0.04); }
.esmf-warning { background: #fff; border-color: #dba617; color: #1d2327; box-shadow: 0 1px 1px rgba(0,0,0,0.04); }

.esmf-btn-warning { background: #f59e0b !important; color: #fff !important; }

/* Filter Bar */
.esmf-filter-bar {
    margin-bottom: 15px;
    padding: 12px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
}
.esmf-filter-form { display: flex; align-items: center; gap: 10px; }
.filter-label { font-weight: 600; font-size: 13px; color: #1d2327; }
.esmf-filter-form select { 
    max-width: 200px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    padding: 3px 6px;
}
.esmf-reset-link { font-size: 12px; color: #2271b1; text-decoration: none; margin-left: 5px; }
.esmf-reset-link:hover { text-decoration: underline; color: #135e96; }

/* Batch Edit Table Inputs */
.esmf-inline-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent; /* Hidden by default for clean look */
    background: transparent;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    transition: all 0.2s ease;
}

.esmf-inline-input:hover, .esmf-inline-input:focus {
    border-color: #8c8f94;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(34, 113, 177, 0.2);
}

.esmf-inline-input.small-input { width: 60px; }

/* Icon Input Wrapper */
.icon-input-wrapper { display: flex; align-items: center; gap: 8px; }
.preview-icon { width: 20px; text-align: center; color: #64748b; }
.icon-field { font-family: monospace; font-size: 12px; }

/* Save Row Button */
.esmf-save-row-btn {
    background: none;
    border: none;
    color: #2271b1;
    cursor: pointer;
    padding: 6px;
    font-size: 16px;
    border-radius: 4px;
    transition: 0.2s;
    margin-right: 5px;
}
.esmf-save-row-btn:hover { background: #e5f5fa; color: #0a4b78; }

.del-btn i { color: #d63638; }
.del-btn:hover i { color: #a32a2a; }