:root {
      --color-primary: #ff6600;
      --color-accent: #0073e6;
      --color-danger: #cc0000;
    }

    html {
      font-size: 1rem;
    }

    .site-logo {
      width: 5rem;
      height: 5rem;
      border-radius: 0.9375rem;
      box-shadow: 0 0 0.3125rem rgba(0,0,0,0.2);
      margin: 0.625rem 0;
    }

    /* Base Styles */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 1.25rem;
    }
    h2 {
      text-align: center;
      color: #4d148c;
      margin-top: 0;
    }
    form, #records .records-container {
      background: #fff;
      max-width: 37.5rem;
      margin: 1.25rem auto;
      padding: 1.25rem;
      border-radius: 0.5rem;
      box-shadow: 0 0 0.625rem rgba(0,0,0,0.1);
    }
    input, select, button, textarea {
      padding: 0.625rem;
      margin: 0.625rem 0;
      box-sizing: border-box;
    }
    .error {
      border: 0.125rem solid red;
    }
    .error-message {
      color: red;
      font-size: 0.875rem;
    }
    button {
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
      border-radius: 0.5rem;
    }

    /* Full-width block buttons */
    .btn-block {
      width: 100%;
    }
    .btn-primary {
      background-color: var(--color-primary);
    }
    .btn-primary:hover {
      background-color: #e65c00;
    }
    .btn-secondary {
      background-color: var(--color-accent);
    }
    .btn-secondary:hover {
      background-color: #0066cc;
    }
    .btn-danger {
      background-color: var(--color-danger);
    }
    .btn-danger:hover {
      background-color: #990000;
    }
    /* Inline buttons maintain natural width */
    .btn-inline {
      width: auto;
      display: inline-block;
      margin: 0.3125rem;
      padding: 0.625rem 0.9375rem;
    }
    #checkoutForm .dropdown .btn-inline {
      margin: 0.625rem 0;
    }
    .hidden { display: none; }
    .mb-15 { margin-bottom: 0.9375rem; }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-menu {
      position: absolute;
      background-color: #fff;
      border: 0.0625rem solid #ccc;
      padding: 0.3125rem;
      border-radius: 0.5rem;
      z-index: 1;
    }
    .dropdown-menu.hidden { display: none; }
    .dropdown-menu button {
      display: block;
      width: 100%;
      margin: 0;
      padding: 0.3125rem 0.625rem;
      text-align: left;
      background-color: #f9f9f9;
      border: 0.0625rem solid #eee;
      border-radius: 0.25rem;
      cursor: pointer;
      color: #000 !important;
      }
    .dropdown-menu button:hover {
      background-color: #f0f0f0;
      color: #000;
    }
    #notifications.visible { display: block; }

    /* Header / Logo */
    .site-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 1.25rem;
      padding-bottom: 0.625rem;
      border-bottom: 0.125rem solid #4d148c;
    }
    .site-header h1 {
      margin: 0 0 0.3125rem 0;
      font-size: 1.75rem;
      color: #4d148c;
    }
    .app-name {
      text-align: center;
      font-size: 1.25rem;
      color: #4d148c;
      margin-top: 0.3125rem;
    }

    /* Notification Banner */
    #notifications {
      background-color: #ffcc00;
      border: 0.0625rem solid #e6b800;
      padding: 0.625rem;
      border-radius: 0.3125rem;
      margin: 0.625rem auto;
      max-width: 37.5rem;
      color: #333;
      font-weight: bold;
      text-align: center;
      display: none;
    }
    #notifications.success {
      background-color: #d4edda;
      border: 0.0625rem solid #c3e6cb;
      color: #155724;
    }
    #notifications.error {
      background-color: #f8d7da;
      border: 0.0625rem solid #f5c6cb;
      color: #721c24;
    }

    /* Navigation */
    nav {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.625rem;
      overflow-x: auto;
      margin-bottom: 1.25rem;
    }
    nav a {
      flex: 0 1 auto;
      width: auto;
      white-space: nowrap;
      text-decoration: none;
      color: white;
      font-weight: bold;
      background-color: var(--color-primary);
      padding: 0.5rem 0.9375rem;
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    nav a.active {
      background-color: #4d148c;
      text-decoration: none;
    }

      .nav-toggle {
        display: none;
        align-items: center;
        gap: 0.25rem;
        font-weight: bold;
        padding: 0.5rem 0.9375rem;
        width: auto;
        flex: 0 1 auto;
      }

    .nav-icon {
      font-size: 1.2rem;
    }

    /* Check-Out Section */
    .employeeRow, .equipmentRow {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      margin-bottom: 0.9375rem;
    }
    .employeeRow span, .equipmentNameDisplay {
      font-weight: bold;
      color: #555;
    }
    .equipment-item { margin-bottom: 0.9375rem; }
    .equipmentRow input { flex: 1; }
    .removeEquipment {
      width: 100%;
    }

    /* Admin Panel */
    .admin {
      text-align: center;
    }
    .admin ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      text-align: center;
    }
    .admin ul li { margin: 0.3125rem 0; }
    .admin form div {
      margin-bottom: 0.625rem;
    }
    .pagination-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      margin: 0.625rem 0;
    }
    .page-indicator {
      font-size: 0.875rem;
    }

    /* Records Section */
    #records {
      max-width: 100%;
    }
    .records-container {
      background: #fff;
      max-width: 50rem;
      margin: 1.25rem auto;
      padding: 1.25rem;
      border-radius: 0.5rem;
      box-shadow: 0 0 0.625rem rgba(0,0,0,0.1);
    }
    #recordFilterForm {
      display: flex;
      flex-wrap: wrap;
      gap: 0.625rem;
      justify-content: center;
      margin-bottom: 0.9375rem;
    }
    #recordFilterForm input {
      padding: 0.5rem;
      flex: 1;
      min-width: 9.375rem;
    }
    #recordFilterForm button {
      padding: 0.5rem 0.9375rem;
      border-radius: 0.5rem;
    }
    #recordsTable {
      overflow-x: auto;
    }
    #recordsTable table {
      width: 100%;
      border-collapse: collapse;
    }
    #recordsTable th, #recordsTable td {
      border: 0.0625rem solid #ddd;
      padding: 0.5rem;
      text-align: center;
    }
    #recordsTable th { background-color: #4d148c; color: white; }
    #recordsTable caption {
      caption-side: top;
      font-weight: bold;
      margin-bottom: 0.5rem;
      text-align: left;
    }

    .sr-only {
      position: absolute;
      width: 0.0625rem;
      height: 0.0625rem;
      padding: 0;
      margin: -0.0625rem;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 37.5rem) {
      nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        background-color: rgba(0,0,0,0.5);
        z-index: 1000;
        padding: 1.25rem;
        box-sizing: border-box;
        justify-content: center;
        align-items: flex-start;
      }

      nav.show {
        display: flex;
      }

      nav .nav-container {
        background: #fff;
        max-width: 37.5rem;
        width: 100%;
        margin: 1.25rem auto;
        padding: 1.25rem;
        border-radius: 0.5rem;
        box-shadow: 0 0 0.625rem rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
      }

      nav .nav-container a {
        flex: 1 1 auto;
        width: auto;
        padding: 0.375rem 0.75rem;
      }

      .nav-toggle {
        display: flex;
        position: fixed;
        top: 0.5rem;
        left: 0.5rem;
        z-index: 1001;
      }

      .nav-toggle.open {
        left: 0.5rem;
      }

      .nav-icon {
        font-size: 1rem;
      }

      .employeeRow,
      .equipmentRow {
        flex-direction: column;
        align-items: stretch;
      }

      .employeeRow input,
      .employeeRow button,
      .equipmentRow input,
      .equipmentRow button {
        width: 100%;
      }

      #recordsTable table {
        display: block;
        overflow-x: auto;
      }

      #recordsTable th,
      #recordsTable td {
        text-align: left;
        white-space: normal;
      }

      .records-container,
    form {
        max-width: 100%;
        margin: 0.625rem auto;
        padding: 0.625rem;
    }
    }

  .list-container {
    max-height: 18.75rem;
    overflow-y: auto;
  }

#employeeList .deleteEmployee,
#equipmentListAdmin .deleteEquipment {
  margin-left: 0.5rem;
  cursor: pointer;
  color: red;
  background: none;
  border: none;
  padding: 0;
}