body {
        background-color: #000;
        color: #008CFF;
        font-family: 'Segoe UI', sans-serif;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        padding-top: 80px;
        padding-bottom: 70px;
        overflow: hidden;
      }
  
      header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        box-sizing: border-box;
        align-items: center;
        padding: 10px 20px;
        border-bottom: 2px solid #008CFF;
        background-color: #111;
      }
  
      .logo {
        height: 60px;
      }
  
      h1 {
        text-shadow: 0 0 5px black;
        border: 2px solid #008CFF;
        padding: 10px 20px;
        border-radius: 10px;
        color: #008CFF;
        margin: 30px auto;
        text-align: center;
        width: fit-content;
      }
  
      #login-section, #logout-section {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
      }
  
      #login-wrapper {
        display: flex;
        flex-direction: column;
        padding: 10px;
      }
  
      input[type="text"], input[type="password"] {
        padding: 5px 8px;
        border: 1px solid #008CFF;
        border-radius: 5px;
        background-color: #000;
        color: #008CFF;
        font-size: 0.9rem;
      }
  
      button {
        padding: 8px 12px;
        border: 1px solid #008CFF;
        border-radius: 5px;
        background-color: black;
        color: #008CFF;
        font-weight: bold;
        cursor: pointer;
        transition: 0.2s;
      }
  
      button:hover {
        background-color: #008CFF;
        color: black;
      }

      .button {
        padding: 8px 12px;
        background: #008CFF;
        color: black;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        margin-left: 10px;
      }
      .button:hover {
        background: black;
        color: #008CFF;
        border: 1px solid #008CFF;
      }

      #logout-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }
      #logout-left {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
      }
      #logout-right {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-end;
        padding-right: 10px;
      }




      .side-nav {
        position: fixed;
        top: 80px;
        left: 0;
        width: 180px;
        height: calc(100% - 80px);
        background-color: #111;
        border-right: 2px solid #008CFF;
        display: flex;
        flex-direction: column;
        justify-content: start;
      }

      .side-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .side-nav li {
        border-bottom: 1px solid #008CFF;
      }

      .side-nav a {
        display: block;
        padding: 15px 20px;
        text-decoration: none;
        color: #008CFF;
        font-weight: bold;
        cursor: pointer;
      }

      .side-nav a:hover,
      .side-nav a.active {
        background-color: #008CFF;
        color: black;
      }

      .tab-content {
        margin-left: 200px;
        padding: 20px;
        display: none;
        height: calc(100vh - 80px - 90px);
        overflow-y: auto;
      }

      .tab-content.active {
        display: block;
      }

      @media (max-width: 768px) {
        .side-nav {
          position: static;
          width: 100%;
          height: auto;
          border-right: none;
          border-top: 2px solid #008CFF;
        }
        .side-nav li {
          border-bottom: none;
          border-top: 1px solid #008CFF;
        }
        .tab-content {
          margin-left: 0;
        }
      }




      #grand-total,
    #reset-btn {
      font-size: 1.2rem;
      font-weight: bold;
    }

    #total-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: #111;
        border-top: 2px solid #008CFF;
        padding: 10px 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
      }

    @media (max-width: 768px) {
      #total-container {
        margin-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
    }


    /* ====== Enhanced Global Inputs ====== */
    input[type="number"],
    select {
      background-color: #111;
      color: #008CFF;
      border: 1px solid #008CFF;
      padding: 6px 10px;
      border-radius: 4px;
      font-size: 0.95rem;
      margin-bottom: 8px;
      display: block;
      width: 100%;
      max-width: 300px;
    }

    /* ====== Labels and Groups ====== */
    label {
      font-weight: bold;
      margin-top: 10px;
      display: inline-block;
    }

    div > p {
      margin: 10px 0 2px;
      font-weight: 600;
      color: #008CFF;
    }

    select option {
      background-color: #000;
      color: #008CFF;
    }

    /* ====== Section Headings ====== */
    .tab-content h2 {
      font-size: 1.8rem;
      border-bottom: 2px solid #008CFF;
      padding-bottom: 4px;
      margin-bottom: 20px;
    }

  /* Repair subnav and subtabs */
  .repair-subnav {
    display: flex;
    gap: 10px;
    margin: 10px 0 16px;
  }
  .repair-subnav a {
    padding: 6px 10px;
    background: transparent;
    color: #008CFF;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
  }
  .repair-subnav a.sub-active,
  .repair-subnav a:hover {
    background: #008CFF;
    color: black;
  }
  .repair-subtab { display: none; }
  .repair-subtab.active { display: block; }

  /* Generated repair section items */
  .repair-subtab .repair-item {
    margin-bottom: 8px;
    padding: 8px;
    border: 1px dashed rgba(0,140,255,0.08);
    border-radius: 6px;
    max-width: 720px;
  }
  .repair-subtab label { color: #cfeeff; }
  .repair-subtab input[type="number"] { max-width: 120px; }

    /* ====== Totals ====== */

    #repair-total,
    #cosmetics-total,
    #performance-total {
      margin-top: 20px;
      font-size: 1.1rem;
      font-weight: bold;
      color: #008CFF;
  
    }

    /* ====== Checkbox Styling (Group look) ====== */
    .tab-content input[type="checkbox"] {
      transform: scale(1.3);
      margin-right: 10px;
    }
    .tab-content label {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* ====== General Layout Spacing ====== */
    .tab-content > div,
    .tab-content > label,
    .tab-content > select,
    .tab-content > input {
      margin-bottom: 12px;
    }

    /* Fix overflow and alignment for small screens */
    @media (max-width: 768px) {
      input[type="number"],
      select {
        max-width: 100%;
      }
    }



      /* smaller screens  */

      @media (max-width: 768px) {
        header {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
          position: fixed;
        }
        #toggle-login {
          position: absolute;
          top: 10px;
          right: 10px;
          order: -1;
          z-index: 2;
        }
        #login-wrapper {
          display: flex;
          position: absolute;
          top: 45px;
          right: 10px;
          max-width: 100%;
          background-color: #111;
          padding: 10px;
          border: 1px solid #008CFF;
          border-radius: 6px;
          box-shadow: 0 0 10px #008CFF;
          flex-direction: column;
          align-items: stretch;
          animation: slideDown 0.3s ease-in-out;
          width: 250px;
          box-sizing: border-box;
        }
        #login-wrapper.open {
          display: flex;
        }
        @keyframes slideDown {
          from { opacity: 0; transform: translateY(-10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        #login-section, #logout-section {
          flex-wrap: wrap;
          gap: 5px;
          padding: 5px 0;
          width: 100%;
        }
        input[type="text"], input[type="password"] {
          width: 100%;
          box-sizing: border-box;
        }
      }
      #toggle-login {
        display: none;
        background: none;
        color: #008CFF;
        font-size: 1.5rem;
        border: none;
        cursor: pointer;
        transition: transform 0.2s;
      }
      #toggle-login.open {
        transform: rotate(90deg);
      }
      @media (max-width: 768px) {
        #toggle-login {
          display: block;
        }
      }