﻿:root {
    --background-main: #ffffff;
    --background-item1: #184E77;
    --text-main: #000000;
    --icon-color: white;
    --btn-bg: #3f93f1;
    --btn-text: white;
    --btn-border: none;
    --active-bg: #6c757d;
    --nav-link-color: black;
    --general-btn-bg: #0866ff;
    --general-btn-text: white;
    --general-btn-border: none;
    --general-btn-hover-bg: white;
    --general-btn-hover-text: #0866ff;
    --hover-opacity: 0.5;
    /* --- GLOBAL THEME VARIABLES (Default/Light) --- */
    /* Backgrounds */
    --bs-body-bg: #f3f4f6;
    --bs-body-color: #334155;
    --content-bg: #f8fafc;
    /* Cards */
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Sidebar */
    --sidebar-bg: #141414;
    --sidebar-text: #e2e8f0;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --sidebar-active-bg: #0f172a;
    --sidebar-active-text: #ffffff;
    /* Forms */
    --input-bg: #ffffff;
    --input-color: #334155;
    --input-border: #cbd5e1;
    --input-focus-border: #3f93f1;
    --input-placeholder: #94a3b8;
    /* Tables */
    --table-bg: #ffffff;
    --table-header-bg: #3f93f1;
    --table-header-color: #ffffff;
    --table-border: #e2e8f0;
    --table-hover-bg: #f1f5f9;
    --table-row-bg: #ffffff;
    /* Text */
    --text-primary: #334155;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    /* Borders */
    --border-color: #e2e8f0;
}

[data-theme="light"] {
    --background-main: #ffffff;
    --background-item1: #184E77;
    --background-item1-hover: #eee;
    /* لون أفتح للهفر */
    --text-main: black;
    --icon-color: white;
    --btn-bg: #3f93f1;
    --btn-text: white;
    --btn-border: none;
    --active-bg: #6c757d;
    --nav-link-color: black;
    --general-btn-bg: #0866ff;
    --general-btn-text: white;
    --general-btn-border: none;
    --general-btn-hover-bg: white;
    --general-btn-hover-text: #0866ff;
    --hover-opacity: 0.5;
    /* --- GLOBAL THEME VARIABLES (Explicit Light) --- */
    /* Backgrounds */
    --bs-body-bg: #f3f4f6;
    --bs-body-color: #334155;
    --content-bg: #f8fafc;
    /* Cards */
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Sidebar */
    --sidebar-bg: #141414;
    --sidebar-text: #e2e8f0;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --sidebar-active-bg: #0f172a;
    --sidebar-active-text: #ffffff;
    /* Forms */
    --input-bg: #ffffff;
    --input-color: #334155;
    --input-border: #cbd5e1;
    --input-focus-border: #3f93f1;
    --input-placeholder: #94a3b8;
    /* Tables */
    --table-bg: #ffffff;
    --table-header-bg: #3f93f1;
    --table-header-color: #ffffff;
    --table-border: #e2e8f0;
    --table-hover-bg: #f1f5f9;
    --table-row-bg: #ffffff;
    /* Text */
    --text-primary: #334155;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    /* Borders */
    --border-color: #e2e8f0;
    /* Dashboard Specific (Mapped to globals where possible) */
    --dashboard-bg: var(--content-bg);
    --text-primary-color: var(--text-primary);
    --text-secondary-color: var(--text-secondary);
}

[data-theme="dark"] {
    --background-main: #252728;
    --background-item1: #27272a;
    --background-item1-hover: #3f3f46;
    --text-main: white;
    --icon-color: #184E77;
    --btn-bg: white;
    --btn-text: #2985f1;
    --btn-border: 1px solid blue;
    --active-bg: #6c757d;
    --nav-link-color: white;
    --general-btn-bg: #0866ff;
    --general-btn-text: white;
    --general-btn-border: 1px solid blue;
    --general-btn-hover-bg: white;
    --general-btn-hover-text: #0866ff;
    --hover-opacity: 0.9;
    /* --- GLOBAL THEME VARIABLES (Dark - Neutral Black) --- */
    /* Backgrounds */
    --bs-body-bg: #000000;
    --bs-body-color: #f4f4f5;
    --content-bg: #1C1C1D;
    /* User Preferred Content Base */
    /* Cards */
    --card-bg: #27272a;
    /* Zinc-800: Lighter than bg for elevation */
    --card-border: #3f3f46;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    /* Sidebar */
    --sidebar-bg: #141414;
    --sidebar-text: #a1a1aa;
    --sidebar-hover-bg: #27272a;
    --sidebar-active-bg: #1C1C1D;
    --sidebar-active-text: #ffffff;
    /* Forms */
    --input-bg: #ffffff;
    /* User Request: Always White */
    --input-color: #334155;
    --input-border: #cbd5e1;
    --input-focus-border: #3f93f1;
    --input-placeholder: #94a3b8;
    /* Tables */
    --table-bg: #ffffff;
    /* User Request: QuickGrid/Table White */
    --table-header-bg: #3f93f1;
    /* Keep header distinct or use brand? Keeping dark/neutral header for contrast with white body looks good, or use #f8f9fa light grey? Let's try White Body, Dark Header. */
    --table-header-color: #ffffff;
    --table-border: #e2e8f0;
    --table-hover-bg: #f1f5f9;
    --table-row-bg: #ffffff;
    /* Text */
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    /* Borders */
    --border-color: #3f3f46;
    /* Dashboard Specific */
    --dashboard-bg: var(--content-bg);
    --text-primary-color: var(--text-primary);
    --text-secondary-color: var(--text-secondary);
}

  


.erp-body,
.modal-body,
.modal-header,
.card,
.product-list {
    background-color: var(--background-main);
}

.product-list .product:hover {
    background-color: var(--background-item1-hover);
    color: var(--text-main);
    border-radius: 10px;
    border: 1px solid #000;
}


.item1 {
    background-color: var(--background-item1);
    min-height: 140px;
}

.icon-style {
    color: var(--icon-color);
    font-size: 30px;
}

.anchor-style {
    text-decoration: none;
    color: var(--icon-color);
    cursor: pointer;
}

.style-click {
    border-radius: 8px;
}

.style-click:hover {
    opacity: var(--hover-opacity);
}

.text-primary {
    color: #3f93f1 !important;
}

.account-label {
    color: var(--text-main) !important;
}


.add-btn {
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: var(--btn-border);
}

.edit-btn {
    background-color: var(--btn-text);
    color: var(--btn-bg);
}

.account-list-table,
.bank-table,
.treasuries-list-tabel,
.lib-table {
    background-color: var(--background-main);
}

.summary,
.pagination-text,
.notifications,
.prof-img,
.form-label label,
h1,
h2,
h3,
h4,
h5,
h6,
span {
    color: var(--text-main);
}

.go-next,
.go-last {
    color: var(--text-main);
}

.header-btn {
    color: var(--text-main);
}

.active[b-zsasc0whsj] {
    background-color: var(--active-bg) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.nav-link[b-zsasc0whsj] {
    color: var(--nav-link-color) !important;
}

.general-btn {
    height: 70px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 500;
    background-color: var(--general-btn-bg);
    color: var(--general-btn-text);
    border: var(--general-btn-border);
}

.general-btn:hover {
    background-color: var(--general-btn-hover-bg);
    color: var(--general-btn-hover-text);
    border: var(--general-btn-border);
}

.edit-btn:hover {
    background-color: var(--btn-text);
    color: var(--btn-bg);
}



