:root {
  /* 🎨 Base Palette */
  --clr-white: #ffffff;
  --clr-pure-white: rgba(255, 255, 255);
  --clr-black: #000000;
  --clr-alice: aliceblue;
  --clr-noti: #f3f6fa;
  --clr-light-black: rgba(33, 37, 41, 0.75);
  --clr-hover: #f0f0f0;
   --clr-hover-d:rgba(255, 255, 255, 0.1);

  /* --clr-primary: #215F9A;
  --clr-primary-hover: #256cad; */

  --clr-primary: #1a74c9;
  --clr-primary-hover: #377fc0;

  --clr-success: #27cffd;
  --clr-success-hover: #57d9fc;


  /* --clr-success: #6FB02A;
  --clr-success-hover: #72bb25; */

  --clr-danger: #de02ff;
  --clr-danger-hover: #e85dfd;

  /* 🌫️ Neutral Shades */
  --clr-gray-lightest: #f8f9fa;
  --clr-gray-lighter: #e9ecef;
  --clr-gray-light: #dee2e6;
  --clr-gray: #e0e0e0;
  --clr-gray-medium: #888888;
  --clr-gray-dark: #5e5858;
  --clr-gray-darker: #443f3f;
  --clr-gray-deep: #333333;
  --clr-gray-darkest: #272626;
  --clr-gay: rgb(39, 38, 38);

  /* 📝 Text Colors */
  --text-small: var(--clr-light-black);
  --text-default: var(--clr-black);
  --text-white: var(--clr-alice);
  --text-aliceblue: var(--clr-alice);
  --text-primary: var(--clr-primary);
  --text-success: var(--clr-success);
  --text-danger: var(--clr-danger);
  --txt-close: #666666;
  --txt-panel: var(--clr-gray-deep);

  /* 🧱 Backgrounds */

  --bg-load: var(--clr-white);
  --bg-ap: var(--clr-success);
  --bg-reject: var(--clr-danger);
  --bg-pending: var(--clr-primary);
  --bg-hover: var(--clr-hover);
  --bg-noti-hover: var(--clr-noti);
  --bg-primary: var(--clr-primary);
  --bg-input: var(--clr-white);
  --bg-success: var(--clr-success);
  --bg-body: var(--clr-white);
  --bg-report: var(--clr-gray-lightest);
  --bg-loader: var(--clr-pure-white);
  --bg-header: var(--clr-gray-lightest);
  --bg-form: var(--clr-white);
  --bg-panel: var(--clr-white);
  --bg-sidebar: var(--clr-gray-lighter);
  --bg-light: var(--clr-gray-lightest);
  --bg-green: var(--clr-success);
  --bg-card: var(--clr-gray-lightest);
  --bg-footer: var(--clr-white);
  --sub-child-hover: #f0f0f0;
  --bg-switch: var(--clr-white);
  --bg-danger: var(--clr-danger);
  --bg-pagnition: var(--clr-white);

  /* 🖱️ Scrollbar */
  --scrollbar-track: var(--clr-gray);
  --scrollbar-thumb: var(--clr-gray-medium);

  /* 🧩 Borders */
  --border-default: var(--clr-gray-light);
  --border-dark: var(--clr-gray-dark);
  --border-red: var(--clr-danger);

  /* 🔘 Buttons */
  --btn-danger-bg: var(--clr-danger);
  
  --btn-green-bg: var(--clr-success);
  --btn-green-hover: var(--clr-success-hover);

  --btn-blue-bg: var(--clr-primary);
  --btn-blue-hover: var(--clr-primary-hover);

  --btn-edit-bg: var(--btn-blue-bg);
  --btn-edit-hover: var(--btn-blue-hover);

  --btn-delt-bg: var(--clr-danger);
  --btn-delt-hover: var(--clr-danger-hover);

  /* 🧭 Scroll Tabs */
  --scroll-tab: var(--clr-primary);
  --scroll-tab-hover: var(--clr-success);

  /* 🔄 Switch */
  --switch-on-bg: #28a745;
  --switch-off-bg: #dc3545;

  /* 🌐 Social Hover */
  --social-linkedin-hover: #0077b5;
  --social-google-hover: #ea4335;
  --social-facebook-hover: #3b5998;
  --social-apple-hover: var(--clr-black);

  /* 🧮 Table */
  --table-header-bg: var(--clr-gray-dark);
  --table-body-bg: var(--clr-gray-darkest);
  --table-body-text: #f5f5f5;

  /* 🎛️ Misc */
  --panel-hover: rgba(0, 0, 0, 0.05);
  --card-link-hover-scale: 1.05;
  --scroll-btn-bg: var(--clr-black);
}

/* 🌙 Dark mode overrides */
body.dark-mode {
  --text-default: var(--clr-alice);
  --txt-panel: var(--clr-alice);
  --text-small: var(--clr-alice);

  --bg-load: var(--clr-gray-darkest);
  --bg-hover: var(--clr-hover-d);
  --bg-report: var(--clr-gray-darkest);
  --bs-modal-bg: var(--clr-gray-darkest) !important;
  --bg-body: var(--clr-gray-darkest);
  --bg-input: var(--clr-gray-darkest);
  --bg-loader: var(--clr-gray-darkest);
  --bg-header: var(--clr-gray-darkest);
  --bg-form: var(--clr-gray-darkest);
  --bg-panel: var(--clr-gray-darkest);
  --bg-sidebar: var(--clr-gray-darkest);
  --bg-light: var(--clr-gray-darkest);
  --bg-card: var(--clr-gray-dark);
  --bg-footer: var(--clr-gray-darkest);
  --bg-pagnition: var(--clr-gay);
  --border-default: var(--clr-gray-dark);
  --border-dark: var(--clr-gray-darker);
  --bg-noti-hover: var(--panel-hover);
  --bg-datePicker: var(--clr-gray-darkest);

  /* Scrollbar */
  --scrollbar-track: var(--clr-gray-dark);
  --scrollbar-thumb: var(--clr-alice);

  /* Social Hover (unified for dark) */
  --social-linkedin-hover: var(--clr-gray-dark);
  --social-google-hover: var(--clr-gray-dark);
  --social-facebook-hover: var(--clr-gray-dark);
  --social-apple-hover: var(--clr-gray-dark);

  /* Table */
  --table-header-bg: var(--clr-gray-dark);
  --table-body-bg: var(--clr-gray-darkest);
  --table-body-text: var(--clr-alice);

  /* Misc */
  --panel-hover: var(--clr-hover-d);

  /* AG Grid */
  --ag-background-color: var(--clr-gray-darkest);
  --ag-cell-text-color: var(--clr-alice);
  --ag-header-text-color: var(--clr-alice);
  --ag-foreground-color: var(--clr-alice);
}