/* UI/UX Pro Max: Grayscale Lines & Colorful Icons */
/* Typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root, [data-bs-theme="light"] {
    --bs-body-bg: #FAFAFA;
    --bs-body-color: #333333;
    
    /* Grayscale line definitions */
    --line-light: #EAEAEC;
    --line-regular: #D4D4D8;
    --line-heavy: #A1A1AA;
    --bs-border-color: var(--line-light);

    /* AdminLTE Sidebar overrides - Grayscale */
    --lte-sidebar-bg: #FFFFFF;
    --lte-sidebar-color: #52525B; /* Zinc 600 */
    --lte-sidebar-hover-bg: #F4F4F5;
    --lte-sidebar-active-bg: #FFFFFF;
    --lte-sidebar-active-color: #18181B; /* Zinc 900 */
}

[data-bs-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #E4E4E7;
    --bs-secondary-bg: #18181B;
    
    /* Grayscale line definitions */
    --line-light: #27272A;
    --line-regular: #3F3F46;
    --line-heavy: #52525B;
    --bs-border-color: var(--line-light);

    --lte-sidebar-bg: #18181B;
    --lte-sidebar-color: #A1A1AA; /* Zinc 400 */
    --lte-sidebar-hover-bg: #27272A;
    --lte-sidebar-active-bg: #18181B;
    --lte-sidebar-active-color: #FAFAFA;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: -0.01em;
}

/* Grayscale Borders */
.app-sidebar {
    background-color: var(--lte-sidebar-bg) !important;
    border-right: 1px solid var(--line-regular) !important;
    box-shadow: none !important;
    z-index: 1038; /* Make sure it stays above mobile content */
}

.app-header {
    border-bottom: 2px solid var(--line-light) !important;
    box-shadow: none !important;
}

.card {
    border: 1px solid var(--line-regular) !important;
    box-shadow: none !important;
    border-radius: 8px;
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="light"] .card { background-color: #FFFFFF !important; }
[data-bs-theme="dark"] .card { background-color: #18181B !important; }

.card-header {
    border-bottom: 2px solid var(--line-light) !important;
    background-color: transparent !important;
}

.card-footer {
    border-top: 1px dashed var(--line-heavy) !important;
    background-color: transparent !important;
}

/* Table boundaries */
table th, table td {
    border-bottom: 1px solid var(--line-light) !important;
}
table thead th {
    border-bottom: 2px solid var(--line-regular) !important;
}

/* Base button styling (Grayscale border default) */
.btn-default, .btn-outline-secondary {
    border: 1px solid var(--line-heavy) !important;
    color: var(--bs-body-color);
    background-color: transparent;
}
.btn-default:hover, .btn-outline-secondary:hover {
    background-color: var(--line-light);
}

/* Colorful Icon Classes (to be used specifically on <i> tags) */
.icon-red { color: #EF4444 !important; }
.icon-orange { color: #F97316 !important; }
.icon-yellow { color: #EAB308 !important; }
.icon-green { color: #10B981 !important; }
.icon-teal { color: #14B8A6 !important; }
.icon-blue { color: #3B82F6 !important; }
.icon-indigo { color: #6366F1 !important; }
.icon-purple { color: #8B5CF6 !important; }
.icon-pink { color: #EC4899 !important; }

/* Active nav states - keep it grayscale but bold and thick border */
.nav-link.active {
    font-weight: 600;
    position: relative;
}
.nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 4px;
    background-color: var(--bs-body-color);
    border-radius: 0 4px 4px 0;
}