body {
      font-family: Arial, sans-serif;
      margin: 0;
      background-color: #f9f9f9;
      color: #333;
  }

  .navbar {
      background-color: #CD853F; /* Light Brown */
      /* Cache Buster v5 */
      color: white;
      padding: 15px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      box-sizing: border-box; /* Ensure padding doesn't add to the width */
  }

  .navbar-brand {
      font-size: 1.5em;
      font-weight: bold;
  }

  .navbar-links ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
  }

  .navbar-links li {
      margin-left: 15px;
  }

  .navbar-links a {
      color: white;
      text-decoration: none;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
  }

  .navbar-links a:hover,
  .navbar-links a.active {
      background-color: #555;
  }

  .stats-cards-container {
      display: flex;
      justify-content: space-around;
      padding: 20px;
      gap: 20px;
      flex-wrap: wrap;
  }

  .stat-card {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      min-width: 200px;
      flex-grow: 1;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .stat-card.clickable {
      cursor: pointer;
  }

  .stat-card.clickable:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  }

  .stat-card-btn {
      margin-top: 12px;
      padding: 8px 16px;
      font-size: 0.85em;
      font-weight: 600;
      border: none;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.12);
      color: inherit;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.1s ease;
      display: inline-block;
  }

  .stat-card.clickable:hover .stat-card-btn,
  .stat-card-btn:hover {
      background-color: rgba(0, 0, 0, 0.22);
  }


  /* Specific colors for each stat card on the statistics page */
  .stats-cards-container .stat-card:nth-of-type(1) {
      background-color: #d1ecf1; /* Light Blue */
      color: #0c5460;
  }

  .stats-cards-container .stat-card:nth-of-type(2) {
      background-color: #d4edda; /* Light Green */
      color: #155724;
  }

  .stats-cards-container .stat-card:nth-of-type(3) {
      background-color: #fff3cd; /* Light Yellow */
      color: #856404;
  }

  .stats-cards-container .stat-card:nth-of-type(4) {
      background-color: #f8d7da; /* Light Red */
      color: #721c24;
  }

  .stats-cards-container .stat-card:nth-of-type(5) {
      background-color: #e2d9f3; /* Light Purple */
      color: #492a75;
  }

  .stats-cards-container .stat-card:nth-of-type(6) {
      background-color: #cff4fc; /* Light Cyan */
      color: #055160;
  }

  .stats-cards-container .stat-card:nth-of-type(7) {
      background-color: #fff0e1; /* Light Orange */
      color: #8d5a21;
  }

  .admin-container {
      padding: 20px;
      padding-top: 80px; /* Adjust this value based on the actual height of your navbar */
  }

  .management-section {
      background-color: #fff;
      padding: 20px;
      margin-bottom: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow-x: auto;
  }

  .management-section h2 {
      color: #007bff;
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
      margin-top: 0;
  }

  .management-section h3 {
      color: #555;
      margin-top: 20px;
      margin-bottom: 10px;
  }

  .add-form {
      margin-bottom: 20px;
      padding: 15px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      background-color: #fdfdfd;
  }

  .form-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 15px;
  }

  .form-row .form-group {
      flex: 1;
      min-width: 250px; /* Prevent fields from becoming too narrow */
      margin-bottom: 0;
  }
  .form-group {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
  }

  .form-group label {
      flex-basis: 150px;
      /* Adjust as needed */
      margin-right: 10px;
      font-weight: bold;
  }

  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="password"] {
      flex-grow: 1;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
  }

  .submit-btn {
      padding: 10px 15px;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1em;
  }

  .submit-btn:hover {
      background-color: #218838;
  }

  table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
  }

  table th,
  table td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
  }

  table th {
      background-color: #007bff;
      color: white;
  }

  table tr:nth-child(even) {
      background-color: #f2f2f2;
  }

  /* Styles for read-only grid display (Biodata) */
  .read-only-grid-display {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      /* Responsive columns */
      gap: 15px;
      padding: 15px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      background-color: #f9f9f9;
  }

  .data-pair {
      display: flex;
      flex-direction: column;
      /* Stack label and value */
      padding: 8px;
      border-bottom: 1px solid #eee;
  }

  .data-pair:last-child {
      border-bottom: none;
  }

  .data-label {
      font-weight: bold;
      color: #555;
      margin-bottom: 4px;
  }

  .data-value {
      color: #333;
      word-break: break-word;
      /* Ensure long values wrap */
  }

  /* Styles for Blood Test Table Display (Standard HTML Table) */
  #bloodTestsTable {
      width: 100%;
      border-collapse: collapse;
      border-radius: 4px;
      /* Optional: if you want rounded corners on the table itself */
      overflow-x: auto;
      /* For responsiveness on small screens */
      box-sizing: border-box;
      margin-top: 15px;
      /* Add some space above the table */
  }

  #bloodTestsTable th,
  #bloodTestsTable td {
      border: 1px solid #ddd;
      /* Light grey border */
      padding: 8px 10px;
      /* Adjusted padding */
      font-size: 0.9em;
      text-align: left;
      vertical-align: top;
      /* Good for multi-line content in cells */
  }

  #bloodTestsTable thead th {
      /* Main header cells */
      background-color: #e0e6ef;
      /* Slightly darker, more distinct background */
      font-weight: bold;
      color: #212529;
      /* Explicit dark color for text */
      position: sticky;
      /* Keep header visible when scrolling */
      top: 0;
      /* Adjust if you have a sticky navbar above the modal content */
      z-index: 2;
      /* Ensure header is above other content */
  }

  /* Styling for section title rows (which are now <tr> with a <th>) */
  #bloodTestsTable .test-section-title-row th {
      background-color: #e9ecef;
      /* Distinct background for section titles */
      font-weight: bold;
      color: #333;
      /* Darker text for section titles */
      padding: 10px 8px;
      text-align: left;
      border-top: 2px solid #ccc;
      /* Stronger top border for section separation */
      border-bottom: 1px solid #ccc;
      position: sticky;
      /* Make section headers sticky too */
      top: 40px;
      /* Adjust based on main header height */
      z-index: 1;
      /* Lower z-index than main header */
  }

  /* Admin view CBC subheader specific styling */
  /* Common styles for all th in CBC sub-header row */
  #bloodTestsTable .cbc-admin-subheader-row th {
      font-weight: bold;
      text-align: center;
      /* Center the displayed dates */
      border-bottom: 1px solid #ccc;
      /* Ensure border below subheader */
      z-index: 1;
      /* Lower z-index than main header */
  }

  #bloodTestsTable .cbc-admin-subheader-row th[colspan="2"] {
      /* The "CBC" title cell itself */
      background-color: #d1ecf1;
      /* Specific background for the CBC title part */
      text-align: left;
      color: #0056b3;
      /* Theme color for title */
  }

  /* Optional: Style for the 'Normal Range' column if needed */
  #bloodTestsTable td:nth-child(2) {
      /* Targets the second <td> in data rows */
      color: #555;
      font-style: italic;
      font-size: 0.85em;
  }



  /* Remove styling for the old vertical button container if it's no longer used elsewhere */
  .client-action-buttons-container {
      display: flex;
      flex-direction: column;
      gap: 5px;
      /* Space between stacked buttons */
  }

  .client-action-buttons-container .action-btn {
      width: 100%;
      /* Make buttons take full width of their container */
      margin-right: 0;
      /* Override any default right margin for action-btn if it exists */
  }

  /* New styles for the horizontal action buttons row */
  .client-actions-row td {
      /* Target the cell spanning columns */
      padding: 8px 10px;
      /* Consistent padding */
      border-top: 1px dashed #ddd;
      /* Optional: visual separator */
  }

  .client-action-buttons-horizontal {
      display: flex;
      flex-wrap: wrap;
      /* Allow buttons to wrap to next line if not enough space */
      gap: 8px;
      /* Space between horizontal buttons */
      justify-content: flex-start;
      /* Align buttons to the start */
  }

  .message-area {
      margin-top: 10px;
      padding: 10px;
      border-radius: 4px;
      text-align: center;
  }

  .message-area.success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
  }

  .message-area.error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
  }

  .message-area.info {
      background-color: #d1ecf1;
      color: #0c5460;
      border: 1px solid #bee5eb;
  }

  /* Action buttons in table */
  .action-btn {
      padding: 5px 10px;
      margin-right: 5px;
      border-radius: 3px;
      border: none;
      cursor: pointer;
      color: white;
      text-align: center;
      /* Ensure text is centered if button width is 100% */
  }

  .edit-btn,
  .edit-client-btn,
  .edit-roles-btn {
      background-color: #ffc107;
      color: #333;
  }

  /* Added .edit-roles-btn */
  .deactivate-btn {
      background-color: #dc3545;
  }

  .activate-btn {
      background-color: #28a745;
  }

  .view-food-plan-btn {
      background-color: #007bff;
  }

  .view-clients-btn {
      background-color: #17a2b8;
      color: white;
      font-size: 0.82em;
      padding: 4px 8px;
      margin-top: 4px;
      display: inline-block;
      text-decoration: none;
  }

  .view-clients-btn:hover {
      background-color: #138496;
      color: white;
  }

  /* Blue */
  .view-biodata-btn {
      background-color: #fd7e14;
  }

  /* Orange */
  .view-medical-history-btn {
      background-color: #6610f2;
  }

  /* Indigo */
  .view-blood-tests-btn {
      background-color: #20c997;
  }

  /* Teal/Greenish */
  .assign-nutritionist-btn {
      background-color: #DA70D6;
      color: black;
  }

  /* Orchid */
  .assign-executive-btn {
      background-color: #48D1CC;
      color: black;
  }

  /* Medium Turquoise */

  /* Hover effects for action buttons */
  .action-btn:hover {
      filter: brightness(90%);
  }

  /* Optional: Specific hover for edit button if brightness filter isn't ideal for yellow */
  .edit-btn:hover,
  .edit-client-btn:hover,
  .edit-roles-btn:hover {
      /* Added .edit-roles-btn */
      background-color: #e0a800;
      /* Darker yellow */
      color: #333;
      /* Ensure text remains readable */
  }


  /* Modal styles */
  .modal {
      display: none;
      /* Hidden by default (though inline style in HTML takes precedence) */
      position: fixed;
      /* Stay in place */
      z-index: 1000;
      /* Sit on top */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      overflow: auto;
      /* Enable scroll if needed */
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
      padding-top: 60px;
  }

  .modal-content {
      background-color: #fefefe;
      margin: 5% auto;
      /* 5% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      /* Could be more or less, depending on screen size */
      max-width: 500px;
      /* Default max-width, overridden for specific modals like blood tests */
      border-radius: 8px;
      position: relative;
  }

  /* Specific max-width for blood test modal if needed, ensure it's applied in HTML or JS */
  #viewClientBloodTestsModal .modal-content {
      max-width: 950px;
      /* As used in admin.html */
  }


  .close-btn {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      position: absolute;
      top: 10px;
      right: 20px;
  }

  .close-btn:hover,
  .close-btn:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
  }

  #staffDropdown {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
  }

  .nav-logout-btn {
      /* Specific style for logout button if it's part of nav items */
      padding: 8px 12px;
      background-color: #dc3545;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1em;
  }

  /* Styles for Client Food Plan Modal Table (to match client view) */

  /* --- Cursor for Disabled Elements --- */
  button[disabled],
  input[disabled],
  textarea[disabled],
  select[disabled] {
      cursor: not-allowed !important;
  }

  .hourly-plan-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
  }

  .hourly-plan-table th,
  .hourly-plan-table td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
      vertical-align: top;
      /* TD itself should still align top */
      /* min-height is removed from td directly, will be applied to inner div */
  }

  .hourly-plan-table .cell-content-wrapper {
      min-height: 60px;
      /* Content area min-height.
                          60px content + 10px top padding + 10px bottom padding = 80px total cell min-height. */
      display: flex;
      /* To allow vertical alignment of content within this wrapper */
      align-items: center;
      /* Vertically centers content if it's shorter than min-height */
  }

  .hourly-plan-table th {
      background-color: #34495e; /* Dark blue-grey */
      color: white;

      font-weight: bold;
       
  }

  .hourly-plan-table .time-column {
      /* If you use this class for the time column */
      width: 100px;
      font-weight: bold;
      text-align: center;
  }

  /* Distribute width for the other three data columns in the food plan table */
  /* This ensures they share the remaining space after the 100px time column */
  .hourly-plan-table th:nth-child(2),
  .hourly-plan-table td:nth-child(2) {
      /* Present Intake */
      width: calc((100% - 100px) / 3);
  }

  .hourly-plan-table th:nth-child(3),
  .hourly-plan-table td:nth-child(3) {
      /* Proposed Structure */
      width: calc((100% - 100px) / 3);
  }

  .hourly-plan-table th:nth-child(4),
  .hourly-plan-table td:nth-child(4) {
      /* Additional Points */
      width: calc((100% - 100px) / 3);
  }

  /* Styling for plain textareas within the hourly plan table */
  .hourly-plan-table textarea {
      width: 100%;
      min-height: 80px;
      /* Adjust as needed */
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 0.9em;
      resize: vertical;
  }

  pre {
      font-family: Monaco, Consolas, "Andale Mono", "Ubuntu Mono", 'Courier New', Courier, monospace;
  }

  .view-follow-ups-btn {
    background-color: purple !important;
  }

  /* Restrict Email column width to prevent spillover */
  #allClientsTable th:nth-child(3),
  #allClientsTable td:nth-child(3) {
      max-width: 150px;
      word-break: break-all;
  }

  /* --- Mobile Navbar & Responsiveness Improvements --- */
  .navbar-toggle {
      display: none;
      background: none;
      border: none;
      color: white;
      font-size: 1.8em;
      cursor: pointer;
      padding: 0;
      margin: 0;
      outline: none;
  }

  @media (max-width: 768px) {
      .navbar {
          padding: 10px 20px;
          flex-wrap: wrap;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-links {
          display: none; /* Collapsed by default */
          width: 100%;
          margin-top: 10px;
          order: 3; /* Render links below brand/toggle */
      }
      .navbar-links.active {
          display: block;
      }
      .navbar-links ul {
          flex-direction: column;
          align-items: stretch;
          width: 100%;
      }
      .navbar-links li {
          margin-left: 0;
          margin-bottom: 8px;
          text-align: center;
      }
      .navbar-links li:last-child {
          margin-bottom: 0;
      }
      .navbar-links a, .navbar-links .nav-logout-btn {
          display: block;
          width: 100%;
          box-sizing: border-box;
          padding: 10px;
      }
      .navbar-links .nav-logout-btn {
          margin-top: 5px;
      }
      .admin-container {
          padding: 10px;
          padding-top: 70px;
      }
      /* Table adjustments for mobile */
      table th, table td {
          padding: 6px 8px;
          font-size: 0.85em;
      }
      #allClientsTable th:nth-child(3),
      #allClientsTable td:nth-child(3) {
          min-width: 150px;
      }
  }