/* ARSII Admin Theme - Light and Dark Mode Colors */
:root {
    /* ARSII Primary Colors (Teal/Turquoise) */
    --arsii-primary-50: #f0fdfa;
    --arsii-primary-100: #ccfbf1;
    --arsii-primary-200: #99f6e4;
    --arsii-primary-300: #5eead4;
    --arsii-primary-400: #2dd4bf;
    --arsii-primary-500: #14b8a6;
    --arsii-primary-600: #0d9488;
    --arsii-primary-700: #0f766e;
    --arsii-primary-800: #115e59;
    --arsii-primary-900: #134e4a;
    --arsii-primary-950: #042f2e;

    /* ARSII Secondary Colors (Dark Teal) */
    --arsii-secondary-50: #ecfdf5;
    --arsii-secondary-100: #d1fae5;
    --arsii-secondary-200: #a7f3d0;
    --arsii-secondary-300: #6ee7b7;
    --arsii-secondary-400: #34d399;
    --arsii-secondary-500: #10b981;
    --arsii-secondary-600: #059669;
    --arsii-secondary-700: #047857;
    --arsii-secondary-800: #065f46;
    --arsii-secondary-900: #064e3b;
    --arsii-secondary-950: #022c22;
}

/* Light Mode Customizations */
.fi-body {
    --primary-50: var(--arsii-primary-50);
    --primary-100: var(--arsii-primary-100);
    --primary-200: var(--arsii-primary-200);
    --primary-300: var(--arsii-primary-300);
    --primary-400: var(--arsii-primary-400);
    --primary-500: var(--arsii-primary-500);
    --primary-600: var(--arsii-primary-600);
    --primary-700: var(--arsii-primary-700);
    --primary-800: var(--arsii-primary-800);
    --primary-900: var(--arsii-primary-900);
    --primary-950: var(--arsii-primary-950);
}

/* Dark Mode Customizations */
.dark .fi-body {
    --primary-50: var(--arsii-primary-950);
    --primary-100: var(--arsii-primary-900);
    --primary-200: var(--arsii-primary-800);
    --primary-300: var(--arsii-primary-700);
    --primary-400: var(--arsii-primary-600);
    --primary-500: var(--arsii-primary-500);
    --primary-600: var(--arsii-primary-400);
    --primary-700: var(--arsii-primary-300);
    --primary-800: var(--arsii-primary-200);
    --primary-900: var(--arsii-primary-100);
    --primary-950: var(--arsii-primary-50);
}

/* Sidebar Customizations */
.fi-sidebar {
    background: linear-gradient(135deg, var(--arsii-primary-900), var(--arsii-primary-800));
}

.dark .fi-sidebar {
    background: linear-gradient(135deg, var(--arsii-primary-950), var(--arsii-primary-900));
}

/* Navigation Items */
.fi-sidebar-nav-item-active {
    background-color: var(--arsii-primary-600) !important;
    border-left: 4px solid var(--arsii-primary-400);
}

.dark .fi-sidebar-nav-item-active {
    background-color: var(--arsii-primary-700) !important;
    border-left: 4px solid var(--arsii-primary-300);
}

/* Brand Logo Area */
.fi-sidebar-header {
    background: linear-gradient(135deg, var(--arsii-primary-800), var(--arsii-primary-700));
    border-bottom: 2px solid var(--arsii-primary-600);
}

.dark .fi-sidebar-header {
    background: linear-gradient(135deg, var(--arsii-primary-950), var(--arsii-primary-900));
    border-bottom: 2px solid var(--arsii-primary-800);
}

/* Buttons */
.fi-btn-primary {
    background: linear-gradient(135deg, var(--arsii-primary-600), var(--arsii-primary-500));
    border: 1px solid var(--arsii-primary-600);
    transition: all 0.3s ease;
}

.fi-btn-primary:hover {
    background: linear-gradient(135deg, var(--arsii-primary-700), var(--arsii-primary-600));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.dark .fi-btn-primary {
    background: linear-gradient(135deg, var(--arsii-primary-500), var(--arsii-primary-600));
}

.dark .fi-btn-primary:hover {
    background: linear-gradient(135deg, var(--arsii-primary-400), var(--arsii-primary-500));
    box-shadow: 0 4px 12px rgba(45, 212, 191, 0.3);
}

/* Form Fields */
.fi-input:focus {
    border-color: var(--arsii-primary-500);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.dark .fi-input:focus {
    border-color: var(--arsii-primary-400);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.1);
}

/* Tables */
.fi-table-header {
    background: linear-gradient(135deg, var(--arsii-primary-50), var(--arsii-primary-100));
}

.dark .fi-table-header {
    background: linear-gradient(135deg, var(--arsii-primary-900), var(--arsii-primary-800));
}

/* Badges */
.fi-badge {
    background-color: var(--arsii-primary-100);
    color: var(--arsii-primary-800);
    border: 1px solid var(--arsii-primary-200);
}

.dark .fi-badge {
    background-color: var(--arsii-primary-800);
    color: var(--arsii-primary-100);
    border: 1px solid var(--arsii-primary-700);
}

/* Notifications */
.fi-notification-success {
    background-color: var(--arsii-secondary-100);
    border-left: 4px solid var(--arsii-secondary-500);
}

.dark .fi-notification-success {
    background-color: var(--arsii-secondary-900);
    border-left: 4px solid var(--arsii-secondary-400);
}

/* Cards */
.fi-card {
    transition: all 0.3s ease;
}

.fi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(20, 184, 166, 0.15);
}

.dark .fi-card:hover {
    box-shadow: 0 8px 25px rgba(45, 212, 191, 0.15);
}

/* Loading Indicators */
.fi-loading-indicator {
    color: var(--arsii-primary-500);
}

.dark .fi-loading-indicator {
    color: var(--arsii-primary-400);
}

/* Tabs */
.fi-tab-active {
    background: linear-gradient(135deg, var(--arsii-primary-500), var(--arsii-primary-600));
    border-bottom: 3px solid var(--arsii-primary-400);
}

.dark .fi-tab-active {
    background: linear-gradient(135deg, var(--arsii-primary-600), var(--arsii-primary-700));
    border-bottom: 3px solid var(--arsii-primary-300);
}

/* Pagination */
.fi-pagination-item-active {
    background: linear-gradient(135deg, var(--arsii-primary-500), var(--arsii-primary-600));
    border-color: var(--arsii-primary-500);
}

.dark .fi-pagination-item-active {
    background: linear-gradient(135deg, var(--arsii-primary-600), var(--arsii-primary-700));
    border-color: var(--arsii-primary-400);
}

/* Custom Scrollbar */
.fi-sidebar::-webkit-scrollbar {
    width: 6px;
}

.fi-sidebar::-webkit-scrollbar-track {
    background: var(--arsii-primary-900);
}

.fi-sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--arsii-primary-600), var(--arsii-primary-500));
    border-radius: 3px;
}

.fi-sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--arsii-primary-500), var(--arsii-primary-400));
}

/* Toggle Switches */
.fi-toggle-switch-checked {
    background-color: var(--arsii-primary-500);
}

.dark .fi-toggle-switch-checked {
    background-color: var(--arsii-primary-400);
}

/* File Upload Areas */
.fi-file-upload-dropzone {
    border: 2px dashed var(--arsii-primary-300);
    background: linear-gradient(135deg, var(--arsii-primary-50), var(--arsii-primary-100));
}

.dark .fi-file-upload-dropzone {
    border: 2px dashed var(--arsii-primary-700);
    background: linear-gradient(135deg, var(--arsii-primary-900), var(--arsii-primary-800));
}

/* Stats Cards */
.fi-stats-card {
    background: linear-gradient(135deg, var(--arsii-primary-50), white);
    border-left: 4px solid var(--arsii-primary-500);
}

.dark .fi-stats-card {
    background: linear-gradient(135deg, var(--arsii-primary-900), var(--arsii-primary-950));
    border-left: 4px solid var(--arsii-primary-400);
}

/* Smooth Animations */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Focus States */
.fi-input:focus,
.fi-textarea:focus,
.fi-select:focus {
    outline: none;
    ring: 2px solid var(--arsii-primary-500);
    ring-opacity: 0.5;
}

.dark .fi-input:focus,
.dark .fi-textarea:focus,
.dark .fi-select:focus {
    ring: 2px solid var(--arsii-primary-400);
    ring-opacity: 0.5;
}