/* Default (Light) Theme */
 :root {
    --primary-color: #ffffff;
    --secondary-color: #1f2d3d;
    --background-color: #ffffff;
    --text-color: #212529;
    --sidebar-bg-color: #343a40;
    --sidebar-text-color: #f4f6f9;
    --footer-bg-color: #ffffff;
    --footer-text-color: #869099;
  }

  /* Dark Theme */
  [data-theme='dark'] {
    --primary-color: #343a40;
    --secondary-color: #6c757d;
    --background-color: #212529;
    --text-color: #f8f9fa;
    --sidebar-bg-color: #222d32;
    --sidebar-text-color: #f8f9fa;
    --footer-bg-color: #222d32;
    --footer-text-color: #f8f9fa;
  }

  /* Blue Theme */
  [data-theme='blue'] {
    --primary-color: #0056b3;
    --secondary-color: #d3d3d3;
    --background-color: #e9ecef;
    --text-color: #343a40;
    --sidebar-bg-color: #0069d9;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #0069d9;
    --footer-text-color: #ffffff;
  }

  /* Red Theme */
  [data-theme='red'] {
    --primary-color: #dc3545;
    --secondary-color: #f8d7da;
    --background-color: #f4f6f9;
    --text-color: #343a40;
    --sidebar-bg-color: #c82333;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #c82333;
    --footer-text-color: #ffffff;
  }

  /* Green Theme */
  [data-theme='green'] {
    --primary-color: #28a745;
    --secondary-color: #d4edda;
    --background-color: #e9ecef;
    --text-color: #343a40;
    --sidebar-bg-color: #218838;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #218838;
    --footer-text-color: #f8f9fa;
  }

  /* Purple Theme */
  [data-theme='purple'] {
    --primary-color: #6f42c1;
    --secondary-color: #e2d9f3;
    --background-color: #f4f6f9;
    --text-color: #343a40;
    --sidebar-bg-color: #5e3e92;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #5e3e92;
    --footer-text-color: #f8f9fa;
  }

  /* Orange Theme */
  [data-theme='orange'] {
    --primary-color: #fd7e14;
    --secondary-color: #ffe8d1;
    --background-color: #f4f6f9;
    --text-color: #343a40;
    --sidebar-bg-color: #e96b2c;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #e96b2c;
    --footer-text-color: #f8f9fa;
  }


/* Professional Themes */
[data-theme='steelblue'] {
    --primary-color: #4682b4;
    --secondary-color: #d0e1f9;
    --background-color: #f0f4f8;
    --text-color: #2f4f4f;
    --sidebar-bg-color: #3b5998;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #3b5998;
    --footer-text-color: #ffffff;
  }

  [data-theme='charcoal'] {
    --primary-color: #36454f;
    --secondary-color: #a0a0a0;
    --background-color: #f0f0f0;
    --text-color: #ffffff;
    --sidebar-bg-color: #333333;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #333333;
    --footer-text-color: #ffffff;
  }

  [data-theme='slategray'] {
    --primary-color: #708090;
    --secondary-color: #dcdcdc;
    --background-color: #f1f1f1;
    --text-color: #333333;
    --sidebar-bg-color: #556b2f;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #556b2f;
    --footer-text-color: #ffffff;
  }

  [data-theme='crimson'] {
    --primary-color: #dc143c;
    --secondary-color: #f8d7da;
    --background-color: #f4f6f9;
    --text-color: #333333;
    --sidebar-bg-color: #8b0000;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #8b0000;
    --footer-text-color: #ffffff;
  }

  [data-theme='seagreen'] {
    --primary-color: #2e8b57;
    --secondary-color: #a8d5ba;
    --background-color: #f0f8f0;
    --text-color: #333333;
    --sidebar-bg-color: #3cb371;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #3cb371;
    --footer-text-color: #ffffff;
  }

  [data-theme='midnightblue'] {
    --primary-color: #191970;
    --secondary-color: #a9a9a9;
    --background-color: #f0f8ff;
    --text-color: #333333;
    --sidebar-bg-color: #000080;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #000080;
    --footer-text-color: #ffffff;
  }

  [data-theme='darkorange'] {
    --primary-color: #ff8c00;
    --secondary-color: #ffebcc;
    --background-color: #f4f6f9;
    --text-color: #333333;
    --sidebar-bg-color: #d2691e;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #d2691e;
    --footer-text-color: #ffffff;
  }

  [data-theme='olive'] {
    --primary-color: #808000;
    --secondary-color: #b5b300;
    --background-color: #f4f6f9;
    --text-color: #333333;
    --sidebar-bg-color: #556b2f;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #556b2f;
    --footer-text-color: #ffffff;
  }

  [data-theme='forestgreen'] {
    --primary-color: #228b22;
    --secondary-color: #a8e5a0;
    --background-color: #f4f6f9;
    --text-color: #333333;
    --sidebar-bg-color: #228b22;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #228b22;
    --footer-text-color: #ffffff;
  }

  [data-theme='lightsteelblue'] {
    --primary-color: #b0c4de;
    --secondary-color: #d3d3d3;
    --background-color: #f4f6f9;
    --text-color: #333333;
    --sidebar-bg-color: #5f9ea0;
    --sidebar-text-color: #ffffff;
    --footer-bg-color: #5f9ea0;
    --footer-text-color: #ffffff;
  }

  /* EasyUI Themes */
  [data-theme='easyui-default'] {
    --primary-color: #339;
    --secondary-color: #eee;
    --background-color: #f4f6f9;
    --text-color: #333333;
    --sidebar-bg-color: #f1f1f1;
    --sidebar-text-color: #333;
    --footer-bg-color: #f1f1f1;
    --footer-text-color: #ffffff;
  }

  [data-theme='easyui-black'] {
    --primary-color: #333;
    --secondary-color: #999;
    --background-color: #222;
    --text-color: #333333;
    --sidebar-bg-color: #444;
    --sidebar-text-color: #fff;
    --footer-bg-color: #444;
    --footer-text-color: #ffffff;
  }

  [data-theme='easyui-grey'] {
    --primary-color: #808080;
    --secondary-color: #c0c0c0;
    --background-color: #d3d3d3;
    --text-color: #333333;
    --sidebar-bg-color: #555;
    --sidebar-text-color: #fff;
    --footer-bg-color: #555;
    --footer-text-color: #ffffff;
  }

  [data-theme='easyui-blue'] {
    --primary-color: #008cba;
    --secondary-color: #a3c2d1;
    --background-color: #f1f8f9;
    --text-color: #333333;
    --sidebar-bg-color: #0091c7;
    --sidebar-text-color: #fff;
    --footer-bg-color: #0091c7;
    --footer-text-color: #ffffff;
  }

  [data-theme='easyui-green'] {
    --primary-color: #32cd32;
    --secondary-color: #a4e8a4;
    --background-color: #e8f9e8;
    --text-color: #333333;
    --sidebar-bg-color: #006400;
    --sidebar-text-color: #fff;
    --footer-bg-color: #006400;
    --footer-text-color: #ffffff;
  }

  [data-theme='easyui-purple'] {
    --primary-color: #800080;
    --secondary-color: #ffffff;
    --background-color: #f9f5f9;
    --text-color: #333333;
    --sidebar-bg-color: #800080;
    --sidebar-text-color: #fff;
    --footer-bg-color: #800080;
    --footer-text-color: #ffffff;
  }

  [data-theme='easyui-red'] {
    --primary-color: #dc143c;
    --secondary-color: #f8d7da;
    --background-color: #fff0f0;
    --text-color:rgb(1, 11, 20);
    --sidebar-bg-color: #c72c41;
    --sidebar-text-color: #fff;
    --footer-bg-color: #c72c41;
    --footer-text-color: #ffffff;
  }

  [data-theme='easyui-pink'] {
    --primary-color: #e83e8c;
    --secondary-color: #f8d7e1;
    --background-color: #f8f9fa;
    --text-color:rgb(1, 11, 20);
    --sidebar-bg-color: #d81b60;
    --sidebar-text-color: #fff;
    --footer-bg-color: #d81b60;
    --footer-text-color: #ffffff;
  }

  [data-theme='easyui-orange'] {
    --primary-color: #fd7e14;
    --secondary-color: #ffe8d1;
    --background-color: #f4f6f9;
    --text-color:rgb(1, 11, 20);
    --sidebar-bg-color: #e96b2c;
    --sidebar-text-color: #fff;
    --footer-bg-color: #e96b2c;
    --footer-text-color: #ffffff;
  }

  [data-theme='easyui-yellow'] {
    --primary-color: #ffc107;
    --secondary-color: #fff3cd;
    --background-color: #fff8e1;
    --text-color:rgb(1, 11, 20);
    --sidebar-bg-color: #fbc02d;
    --sidebar-text-color: #fff;
    --footer-bg-color: #fbc02d;
    --footer-text-color: #ffffff;
  }


  /* Apply CSS Variables to the UI */
  body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Sidebar Styling */
  .main-sidebar {
    background-color: var(--sidebar-bg-color);
  }

  .sidebar {
    color: var(--sidebar-text-color);
  }

  .main-footer {
      background-color: var(--footer-bg-color);
          color: var(--footer-text-color);
  }

  .navbar {
    background-color: var(--primary-color);
  }

  .card {
    background-color: var(--background-color);
    /* border: 1px solid var(--secondary-color); */
    border-top: 1px solid #dee2e6;
  }

  .card-header {
    background-color: var(--background-color);
    color:var(--secondary-color);
  }

  .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }

  /* Optional: Style the dropdown to hide it by default */
  .dropdown-menu {
    display: none;
  }

  .dropdown-menu.show {
    display: block;
    width: 50px;
  }