/* general ui theme */
:root {
    --base-background: #ffffff;
    --logo-color: #000000;

    /* general ui button - main  */
    --ui-btn-text: #ffffff;
    --ui-btn-bg: #007bff;
    --ui-btn-bg-hover: #0062cc;
    --ui-btn-bg-delete: #c20000;
    --ui-btn-bg-delete-hover: #9b0000;

    /* general ui button - red  */

    --progress-bar-bg: #e0e0e0;
    --progress-bar-color-start: #f44336; /* Red - the starting color of the gradient */
    --progress-text-color: #333;

    --non-editable: #e9ecef;
    --ui-reverse: #b4b4b4;
    --ui-bolder: #fafafa;

    --ui-hover-outline: 0 4px 8px rgba(0, 0, 0, 0.2);

    --text-color: #212529;
    --text-color-light: #6c757d;
}

[data-theme="dark"] {
    --base-background: #1e1e2f;
    --logo-color: #ffffff;

    /* general ui button - main  */
    --ui-btn-text: #ffffff;
    --ui-btn-bg: #009a9a;
    --ui-btn-bg-hover: #006666;
    --ui-btn-bg-delete: #c20000;
    --ui-btn-bg-delete-hover: #9b0000;

    --non-editable: #626262;
    --ui-reverse: #484848;
    --ui-bolder: #2c2c2cd2;

    --ui-hover-outline: 0 4px 8px rgba(255, 255, 255, 0.2);

    --text-color: #e1e1e1;
    --text-color-light: #a0a0a0;
}

/* sidebar */
:root {
    --sidebar-bg-color: #f9f9f9;
    --sidebar-text-color: black;

    --sidebar-button-color: #333;
    --sidebar-button-hover-bg: #007bff;

    --sidebar-profile-font-size: 28px;
    --sidebar-icon-size: 24px;
    --sidebar-text-size: 18px;
}

[data-theme="dark"] {
    --sidebar-bg-color: #545454;
    --sidebar-text-color: white;

    --sidebar-button-color: #333;
    --sidebar-button-hover-bg: #009a9a;
}

/* Define color variables for light and dark modes */
:root {
    /* ---------------------coded---------------------  */

    /* login/register  */
    --auth-text: #333333;
    --auth-card-bg: #f9f9f9;
    --auth-card-border: #cccccc;
    --auth-error: #dc3545;
    --auth-success: #28a745;
    --auth-link: #007bff;
    --auth-link-hover: #0062cc;
    /*
    --apply-button-bg: #28a745;
    --apply-button-hover-bg: #218838;

    /* analytics */
    --analytics-dashboard-item: #ffffff;

    /* un coded  */

    --highlight-hover: rgba(0, 123, 255, 0.1);

    --section-bg: #e1e1e16c;
    --section-bg-inverted: #282828;
    --section-heading-color: #333333;
    --section-separator-color: #333333;
    --background-color: #f8f9fa;
    --text-color: #212529;
    --label-color: #555555;
    --input-bg: #ffffff;
    --input-text-color: #212529;
    --input-border-color: #ced4da;

    --button-bg: #007bff;
    --button-text-color: #ffffff;
    --close-btn-color: #aaaaaa;
    --close-btn-hover-color: #000000;

    --chart-color-1: #007bff;
    --chart-color-2: #28a745;
    --chart-color-3: #ffc107;
    --chart-text-color: #000000;
    --chart-tooltip-bg: rgba(255, 255, 255, 0.8);
    --chart-border-color: #ffffff;

    --table-header-text: #333;
    --table-cell-bg: #ddd;
    --table-cell-text: #000;
    --table-cell-bg-alt: #d0d0d0;
    --input-focus-bg: #e6f7ff;
}

[data-theme="dark"] {
    /* ---------------------coded---------------------  */

    /* login/register  */
    --auth-text: #ffffff;
    --auth-card-bg: #2b2b3b;
    --auth-card-border: #444455;
    --auth-error: #ff6f6f;
    --auth-success: #66ff91;
    --auth-link: #009a9a;
    --auth-link-hover: #006666;

    /*
    --apply-button-bg: #009a9a;
    --apply-button-hover-bg: #006666;

    /* analytics */
    --analytics-dashboard-item: #444444;

    /* un coded  */
    --highlight-hover: rgba(255, 255, 255, 0.1);

    --section-bg: #2c2c2cb2;
    --section-bg-inverted: #ffffff;
    --section-heading-color: #ffffff;
    --section-separator-color: #a1a1a1;
    --background-color: #1e1e1e;
    --text-color: #f1f1f1;
    --label-color: #cccccc;
    --input-bg: #3a3a3a;
    --input-text-color: #ffffff;
    --input-border-color: #555555;
    --button-bg: #007bff;
    --button-text-color: #ffffff;
    --close-btn-color: #cccccc;
    --close-btn-hover-color: #ffffff;

    --chart-color-1: #007bff;
    --chart-color-2: #28a745;
    --chart-color-3: #ffc107;
    --chart-text-color: #ffffff;
    --chart-tooltip-bg: rgba(0, 0, 0, 0.8);
    --chart-border-color: #333333;

    --table-header-text: #fff;
    --table-cell-bg: #444;
    --table-cell-text: #fff;
    --table-cell-bg-alt: #555;
    --input-focus-bg: #2a3b4c;
}

/* table colors main */
:root {
    --dropdown-bg: #fff;
    --dropdown-text-color: #000; /* Assuming default text color is black */
    --dropdown-border-color: #ddd;
    --scrollbar-bg: #eee;
    --scrollbar-thumb-bg: #aaa;
    --scrollbar-thumb-hover-bg: #999;
    --clear-button-bg: #de1b2c;
    --clear-button-hover-bg: #c82333;
    --search-box-bg: #fff;
    --search-box-text-color: #000; /* Assuming default text color is black */
    --table-header-bg: #007bff;
    --table-header-color: #fff;
    --table-row-even-bg: #f2f2f2;
    --table-row-odd-bg: #fff;
    --project-row-hover-bg: rgba(0, 123, 255, 0.1);
    --button-default-bg: rgb(215, 215, 215);
    --button-default-text: rgb(100, 100, 100);
    --button-hover-bg: rgb(69, 69, 255);
    --button-hover-text: rgb(255, 255, 255);
    --delete-button-hover-bg: rgb(255, 69, 69);
    --table-border-color: #ddd;
    --table-controls-text: #333;
    --table-controls-border: #979797;
    --table-controls-bg: white;
    --table-controls-bg-hover: #585858;
    --table-controls-text-hover: white;
    --table-controls-bg-active: #2b2b2b;

    --paginate-button-color: #333;
    --paginate-button-border: transparent;
    --paginate-button-bg: linear-gradient(to bottom, white 0%, #dcdcdc 100%);
    --paginate-button-hover-color: white;
    --paginate-button-hover-border: #111;
    --paginate-button-hover-bg: linear-gradient(to bottom, #585858 0%, #111 100%);
    --paginate-button-active-bg: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
    --paginate-button-disabled-color: #666;
    --length-select-border: #aaa;
    --length-select-bg: transparent;
    --length-select-color: black;
}

[data-theme="dark"] {
    --table-box-shadow: rgba(0, 0, 0, 0.1); /* Keep the same shadow for dark mode */
    --dropdown-bg: #2c2c2c;
    --dropdown-text-color: #eee;
    --dropdown-border-color: #555;
    --scrollbar-bg: #555;
    --scrollbar-thumb-bg: #888;
    --scrollbar-thumb-hover-bg: #777;
    --clear-button-bg: #de1b2c;
    --clear-button-hover-bg: #c82333;
    --search-box-bg: #444;
    --search-box-text-color: #eee;
    --table-header-bg: #009a9a;
    --table-header-color: #fff;
    --table-row-even-bg: #444;
    --table-row-odd-bg: #555;
    --project-row-hover-bg: rgba(0, 154, 154, 0.2); /* Dark mode hover */
    --button-default-bg: rgb(40, 40, 40);
    --button-default-text: rgb(255, 255, 255); /* Adjusted for dark background */
    --button-hover-bg: rgb(69, 69, 255);
    --button-hover-text: rgb(255, 255, 255);
    --delete-button-hover-bg: rgb(255, 69, 69);
    --table-border-color: #555;
    --table-controls-text: #fff;
    --table-controls-border: #979797; /* Keep the same border color */
    --table-controls-bg: #585858;
    --table-controls-bg-hover: white;
    --table-controls-text-hover: black;
    --table-controls-bg-active: #0c0c0c;

    --paginate-button-color: #fff;
    --paginate-button-border: transparent;
    --paginate-button-bg: linear-gradient(to bottom, #585858 0%, #111 100%);
    --paginate-button-hover-color: black;
    --paginate-button-hover-border: #979797;
    --paginate-button-hover-bg: linear-gradient(to bottom, white 0%, #dcdcdc 100%);
    --paginate-button-active-bg: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
    --paginate-button-disabled-color: #666;
    --length-select-border: #aaa;
    --length-select-bg: #444;
    --length-select-color: white;
}







/* === Old Main coloring === */
:root {
    /* === Base === */
/*    --color-background: #ffffff;*/
/*    --color-background-rgb: 255, 255, 255;*/
    --color-surface: #f8f9fa;
/*    --color-text-primary: #212529;*/
/*    --color-text-secondary: #33363a;*/
/*    --color-text-inactive: #6c757d;*/
    --color-border: #ced4da;

    /* Layers (light mode) */
/*    --color-layer-1: #ffffff; *//* Base cards, lowest elevation */
/*    --color-layer-2: #f6f6f6; *//* Slightly raised */
/*    --color-layer-3: #eeeeee; *//* Middle layer (popovers) */
/*    --color-layer-4: #e6e6e6; *//* Dialogs or deeper modals */
/*    --color-layer-5: #dedede; *//* Top-level modal/dialog/tooltip */

    /* === Primary UI === */
/*    --color-primary: #007bff;*/
/*    --color-primary-hover: #0062cc;*/
/*    --color-primary-light: #5daaff;*/
/*    --color-secondary: #6f42c1;*/
/*    --color-secondary-hover: #5936a6;*/
/*    --color-secondary-light: #b497e7;*/
/*    --color-danger: #c20000;*/
/*    --color-danger-hover: #9b0000;*/
/*    --color-success: #28a745;*/
/*    --color-warning: #f39c12;*/

    /* === Neutral UI === */
/*    --color-disabled: #e9ecef;*/
/*    --color-hover-outline: 0 4px 8px rgba(0, 0, 0, 0.2);*/

    /* === Components === */
    --color-card-bg: #ffffff;
    --color-input-bg: #ffffff;
    --color-input-focus-bg: #e6f7ff;
    --color-input-focus-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

    --color-table-header-text: #ffffff;
    --color-table-header-bg: #3999ff;
    --color-table-header-bg-filtered: rgba(255, 156, 0, 0.60);
    --color-table-row-even: #f2f2f2;
    --color-table-row-odd: #ffffff;
    --color-table-hover-bg: rgba(0, 123, 255, 0.1);

    --color-tag-default-bg: #eee;
    --color-tag-default-text: #444;
    --color-tag-default-border: #ccc;
    --color-perm-owner: #d4af37;
    --color-perm-shared: #6c757d;
    --color-perm-edit: #0d6efd;
    --color-perm-view: #ffc107;
    --color-perm-owner-bg: #b8860b;
    --color-perm-shared-bg: #6c757d;
    --color-perm-edit-bg: #0d6efd;
    --color-perm-view-bg: #E49B0F;

    --color-progress-bar-bg: #e0e0e0;

    /* === Search Box Specific (Light Mode) === */
    --size-button: 40px; /* Added from original search CSS */
    --searchbox-bg: var(--color-layer-3); /* #eee */
    --searchbox-text-color: var(--color-text-primary); /* #000 */
    --searchbox-icon-color: var(--color-text-inactive); /* #aaa */
    --searchbox-icon-active-color: var(--color-primary);
    --searchbox-shadow1: /* Default shadow */
        1.5px 1.5px 3px var(--color-border), /* #cecece */
        -1.5px -1.5px 3px rgb(95 94 94 / 25%),
        inset 0px 0px 0px var(--color-border),
        inset 0px 0px 0px var(--color-layer-2); /* #efeeee */
    --searchbox-shadow2: /* Focus/Active shadow */
        0px 0px 0px var(--color-border),
        0px 0px 0px rgb(95 94 94 / 25%),
        inset 1.5px 1.5px 3px var(--color-border),
        inset -1.5px -1.5px 3px var(--color-layer-2);


    /* === Confirmation Dialog Specific === */
}

[data-theme="dark"] {
    /* === Base === */
    --color-background: #121212;
    --color-background-rgb: 38, 38, 38;
    --color-surface: #2c2c2c;
/*    --color-text-primary: #e1e1e1;*/
/*    --color-text-secondary: #d2d2d2;*/
/*    --color-text-inactive: #6c757d;*/
    --color-border: #555555;

    /* Layers (dark mode) */
/*    --color-layer-1: #1c1c1c; *//* Base card */
/*    --color-layer-2: #242424; *//* Slightly raised */
/*    --color-layer-3: #2a2a2a; *//* Popover/mid */
/*    --color-layer-4: #2f2f2f; *//* Dialogs */
/*    --color-layer-5: #383838; *//* Top modal */

    /* === Primary UI === */
/*    --color-primary: #009a9a;*/
/*    --color-primary-hover: #006666;*/
/*    --color-primary-light: #00dede;*/
/*    --color-secondary: #a66cff;*/
/*    --color-secondary-hover: #7f48cc;*/
/*    --color-secondary-light: #d0b3ff;*/
/*    --color-danger: #c20000;*/
/*    --color-danger-hover: #9b0000;*/
/*    --color-success: #66ff91;*/
/*    --color-warning: #ffc107;*/

    /* === Neutral UI === */
/*    --color-disabled: #626262;*/
/*    --color-hover-outline: 0 4px 8px rgba(255, 255, 255, 0.2);*/

    /* === Components === */
    --color-card-bg: #2c2c2c;
    --color-input-bg: #3a3a3a;
    --color-input-focus-bg: #2a3b4c;
    --color-input-focus-shadow: 0 0 0 0.2rem rgba(0, 154, 154, 0.25);

    --color-table-header-text: #e1e1e1;
    --color-table-header-bg: #009a9a;
    --color-table-header-bg-filtered: rgba(71, 219, 255, 0.4);
    --color-table-row-even: #444;
    --color-table-row-odd: #555;
    --color-table-hover-bg: rgba(0, 154, 154, 0.80);

    --color-tag-default-bg: #2b2b2b;
    --color-tag-default-text: #ccc;
    --color-tag-default-border: #444;

    --color-perm-owner: #ffdd57;          /* Gold-like for 'owner' */
    --color-perm-shared: #adb5bd;         /* Muted gray for shared */
    --color-perm-edit: #4dabf7;           /* Lighter blue for 'edit' */
    --color-perm-view: #ffc078;           /* Warm orange for 'view' */

    --color-perm-owner-bg: #8e6f1d;       /* Darker gold background */
    --color-perm-shared-bg: #495057;      /* Dark gray background */
    --color-perm-edit-bg: #1864ab;        /* Navy blue background */
    --color-perm-view-bg: #a96c00;        /* Burnt orange background */

    /* === Search Box Specific (Dark Mode) === */
    --searchbox-bg: var(--color-input-bg); /* #38383b equivalent */
    --searchbox-text-color: var(--color-text-primary); /* light text */
    --searchbox-icon-color: var(--color-text-secondary); /* Use secondary text color for dark icon */
    --searchbox-icon-active-color: var(--color-primary);
    --searchbox-shadow1: /* Default shadow */
        1.5px 1.5px 3px var(--color-background), /* #0e0e0e */
        -1.5px -1.5px 3px rgb(95 94 94 / 25%),
        inset 0px 0px 0px var(--color-background),
        inset 0px 0px 0px var(--color-layer-4); /* #333 */
    --searchbox-shadow2: /* Focus/Active shadow */
        0px 0px 0px var(--color-background),
        0px 0px 0px rgb(95 94 94 / 25%),
        inset 1.5px 1.5px 3px var(--color-background),
        inset -1.5px -1.5px 3px var(--color-layer-4);
}

/* statuses, priority and dates */
:root{
    /* === Status & Priority === */

/*    --color-priority-1: #e85c4e;*/
/*    --color-priority-2: #f3a428;*/
/*    --color-priority-3: #e5c63e;*/
/*    --color-priority-4: #4b9ed7;*/
/*    --color-priority-5: #35af68;*/

    --color-priority-1: #FF0000;
    --color-priority-2: #FF4D4D;
    --color-priority-3: #FF6666;
    --color-priority-4: #FF9999;
    --color-priority-5: #FFCCCC;

    --color-status-review: #a39cff;
    --color-status-planning: #ffce53;
    --color-status-awaiting-budget: #eeb770;
    --color-status-not-started-yet: #9f9f9f;
    --color-status-binui: #d9d9d9;
    --color-status-working: #4985d5;
    --color-status-tikshuv: #51c29b;

    --color-status-active: #4b8ad7;
    --color-status-finished: #7ed089;
    --color-status-on-hold: #f6bd60;
    --color-status-canceled: #ff6767;

    --color-date-overdue: #ff6767;
    --color-date-soon: #ffed92;

/*    --priority-1: #e74c3c;*/
/*    --priority-2: #f39c12;*/
/*    --priority-3: #3498db;*/
/*    --priority-4: #27ae60;*/
/*    --priority-5: #8e44ad;*/

    /*    --priority-1: #ff0000;*/
    /*    --priority-2: #ff3535;*/
    /*    --priority-3: #ff5353;*/
    /*    --priority-4: #ff8484;*/
    /*    --priority-5: #ffbbbb;*/

    /* for tasks */
/*    --status-active: #4b8ad7;*/
/*    --status-finished: #af7ed0;*/
/*    --status-on-hold: #f6bd60;*/
/*    --status-canceled: #ee6854;*/
}



/* === Popup & Confirm === */
:root{
    /* --- General Popup (PopupHelper) --- */
    --popup-overlay-bg-color: rgba(0, 0, 0, 0.4);

    --popup-dialog-bg-color: var(--color-layer-1);
    --popup-dialog-text-color: var(--color-text-secondary);
    --popup-dialog-border-color: var(--color-border);
    --popup-dialog-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Standard shadow */

    --popup-title-text-color: var(--color-text-primary);
    --popup-title-border-color: var(--color-border);

    --popup-close-btn-color: var(--color-text-inactive);
    --popup-close-btn-hover-color: var(--color-text-primary);

    /* Popup Body & Form Elements */
    --popup-form-label-text-color: var(--color-text-primary);
    --popup-form-input-bg-color: var(--color-input-bg);
    --popup-form-input-text-color: var(--color-text-primary);
    --popup-form-input-border-color: var(--color-border);
    --popup-form-input-focus-border-color: var(--color-primary);
    --popup-form-input-focus-shadow: var(--color-input-focus-shadow); /* Full shadow value */
    --popup-form-select-arrow-icon-color-ref: var(--color-text-secondary);

    --popup-footer-border-color: var(--color-border);

    /* Popup Buttons (General) */
    --popup-button-primary-bg-color: var(--color-primary);
    --popup-button-primary-text-color: var(--color-text-primary);
    --popup-button-primary-hover-bg-color: var(--color-primary-hover);
    --popup-button-primary-hover-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Full shadow value */

    --popup-button-secondary-bg-color: var(--color-surface);
    --popup-button-secondary-text-color: var(--color-text-primary);
    --popup-button-secondary-border-color: var(--color-border);
    --popup-button-secondary-hover-bg-color: var(--color-layer-4);
    --popup-button-secondary-hover-border-color: var(--color-text-secondary);

    --popup-general-button-padding: 10px 20px; /* Define standard button padding */
    --popup-general-button-radius: 6px;      /* Define standard button radius */
    --popup-general-button-font-size: 0.95em;

    /* --- Modern Confirm UI --- */
    --confirm-overlay-backdrop-bg-color: rgba(0, 0, 0, 0.4);

    --confirm-dialog-bg-color: var(--color-layer-2);
    --confirm-dialog-text-color: var(--color-text-secondary);
    --confirm-dialog-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); /* Full shadow value */

    --confirm-dialog-title-text-color: var(--color-text-primary);
    --confirm-dialog-title-border-color: var(--color-border); /* Can use a more specific var like --confirm-dialog-divider-color */
    --confirm-dialog-message-text-color: var(--color-text-secondary);

    /* Confirm Dialog Buttons */
    --confirm-button-base-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Full shadow value for base confirm buttons */

    --confirm-button-confirm-bg-color: var(--color-primary);
    --confirm-button-confirm-text-color: white;
    --confirm-button-confirm-hover-bg-color: var(--color-primary-hover);
    --confirm-button-confirm-hover-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Full shadow value */

    --confirm-button-deny-bg-color: var(--color-surface);
    --confirm-button-deny-text-color: var(--color-text-primary);
    --confirm-button-deny-border-color: var(--color-border);
    --confirm-button-deny-hover-bg-color: var(--color-layer-2);
    --confirm-button-deny-hover-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Full shadow value */
}