/* public/variables.css */

:root {
  /* Primary Colors */
  --color-primary: #1475c6;
  /* Your current header/loader blue */
  --color-primary-light: rgb(152, 163, 211);
  /* Your current loader top border blue */
  --color-secondary: #2c3e50;
  /* Your original sidebar background */

  /* Text Colors */
  --text-color-dark: #333;
  --text-color-medium: #55565b;
  --text-color-light: #757575;
  --text-color-white: #fff;

  /* Background Colors */
  --bg-color-light: #f2f5f7;
  /* App content background */
  --bg-color-lighter: #f9f9f9;
  /* User image background */
  --bg-color-medium: #f3f3f3;
  /* User ID background */
  --bg-color-sidebar: #ffffff;
  /* Your specific sidebar background */
  --bg-color-hover: #f2f5f7;
  /* Sidebar menu item hover background */
  --bg-color-active: #c0d5e0;
  /* Sidebar menu item active background */
  --bg-color-white: #fff;

  --bg-light: #f5f5f5;
  --bg-white: #ffffff;
  /* Border Colors */
  --border-color-light: #f6f6f6;
  /* Sidebar borders */
  --border-color-medium: #a9a9a9;
  /* HR line */
  --border-color-dark: #757575;
  /* User image border */

  /* Icon Colors/Gradients */
  --icon-color-default: rgb(82, 82, 82);
  --icon-color-hover: #fff;
  /* Assuming you have a CSS variable for the gradient */
  --icon-green-gradient: linear-gradient(135deg, #2196F3 0%, #0d47a1 100%);
  /* Example gradient, adjust as needed */
  /* A slightly more pronounced light blue fading to white horizontally */
  --icon-lightBlue-gradient: linear-gradient(to right, #ADD8E6, #FFFFFF);
  /* Shadow */
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 8px rgba(0, 0, 0, 0.1);


  /* For the tooltip/pop-out background */

  /* Table Header */
  --table-header: #2563EB;
  --border-color: #e0e0e0;


  --create-button: linear-gradient(135deg, #2196F3 0%, #0d47a1 100%);
  --delete--button: linear-gradient(90deg,
      rgba(255, 113, 28, 1) 0%,
      rgba(247, 66, 49, 1) 50%,
      rgba(253, 42, 109, 1) 100%);
      
  --update-button: linear-gradient(90deg,
      rgba(29, 169, 156, 1) 0%,
      rgba(74, 187, 131, 1) 50%,
      rgba(125, 207, 97, 1) 100%);


  /* Submenu Pop-out Colors */
  --submenu-popout-bg: #1475c6;


  /* Table Header Colors */
  --table-background: #f5f5f5;
  --tableheadercolor-gradient: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
  --table-header: #1475c6;
  --table-header-title: #55565b;
  --table-row-data-color: #333333;

  --table-row-hover: #f0f8ff;


  /* Icon Colors */
  --red-gradient: linear-gradient(90deg, rgba(255, 113, 28, 1) 0%, rgba(247, 66, 49, 1) 50%, rgba(253, 42, 109, 1) 100%);
  --blue-gradient: linear-gradient(135deg, #2196F3 0%, #0d47a1 100%);
  --icon-hover: #555555;
  --icon-default: #55565b;



  /* Modal Colors */
  --modal-title-color: #2c3e50;
  --modal-title-header: #ffffff;
  --modal-header-background: #34495e;
  --modal-label: #7f8c8d;














}