:root{
      --bg:#0f1724;
      --card:#0b1220;
      --muted:#9aa7bf;
      --accent:#1ea7fd;
      --glass: rgba(255,255,255,0.03);
      --success:#2ecc71;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      background: #071028;
      color:#e6eef8;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:24px;
    }

    /* Layout */
    .container{
      max-width:1200px;
      margin:0 auto;
    }
    header{
      display:flex;
      gap:16px;
      align-items:center;
      justify-content:space-between;
      margin-bottom:18px;
    }
    .brand{
      display:flex;
      gap:12px;
      align-items:center;
    }
    .logo{
      width:44px;height:44px;border-radius:8px;
      background:linear-gradient(135deg,var(--accent),#6f7cff);
      display:flex;align-items:center;justify-content:center;font-weight:700;color:#032033;
      box-shadow: 0 6px 18px rgba(30,167,253,0.12);
      font-size:18px;
    }
    h1{font-size:18px;margin:0}
    .top-actions{display:flex;gap:8px;align-items:center}
    button.btn{
      border:0;padding:8px 12px;border-radius:8px;background:var(--glass);color:var(--muted);cursor:pointer;
    }
    button.primary{background:linear-gradient(90deg,var(--accent),#6f7cff);color:#021027;font-weight:600}


    /* Search & filters */
    .controls{
      display:grid;
      grid-template-columns: 1fr auto;
      gap:12px;
      margin-bottom:14px;
    }
    .searchbar{
      display:flex;gap:10px;align-items:center;background:rgba(255,255,255,0.03);padding:10px;border-radius:10px;
    }
    .searchbar input, .searchbar select{
      background:transparent;border:0;color:inherit;padding:8px 10px;border-radius:8px;outline:none;
    }
    .searchbar input::placeholder{color:var(--muted)}
    .filters{display:flex;gap:8px;align-items:center}
    .toggle{
      display:flex;gap:6px;background:rgba(255,255,255,0.02);padding:8px;border-radius:8px;
    }

    /* Main area (list + map) */
    .main{
      display:grid;
      grid-template-columns: 1fr 360px;
      gap:16px;
      align-items:start;
    }

    /* Load cards */
    .list{display:grid;gap:10px}
    .card{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.03);
      padding:12px;border-radius:10px;display:flex;justify-content:space-between;gap:10px;align-items:center;
    }
    .card .info{flex:1}
    .route{display:flex;gap:8px;align-items:center;font-weight:600}
    .meta{color:var(--muted);font-size:13px;margin-top:6px}
    .badge{padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.02);font-weight:600}
    .rate{font-weight:700;font-size:16px;color:var(--accent)}

    /* Sidebar placeholders */
    .sidebar{
      background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;min-height:240px;
    }
    #map{height:300px;background:linear-gradient(180deg,#071a2a,#05202b);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--muted)}

    /* Modal */
    .modal-backdrop{position:fixed;left:0;top:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);z-index:40}
    .modal{width:760px;max-width:calc(100% - 32px);background:#041022;padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
    .modal h3{margin:0 0 8px 0}
    .modal .m-row{display:flex;gap:12px;margin-top:8px}
    .close{background:transparent;border:0;color:var(--muted);cursor:pointer}

    /* small screens */
    @media (max-width:900px){
      .main{grid-template-columns:1fr}
      .sidebar{order:2}
      header{flex-direction:column;align-items:flex-start;gap:12px}
    }

   .form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    
    padding: 20px;
}

    .form-box {
  padding: 25px 30px;
  border-radius: 12px;
  box-shadow: 0px 6px 20px rgba(0,0,0,0.1);
  width: 100%;
}

.form-title {
  text-align: center;
  margin-bottom: 20px;
  color: #fff;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: bold;
  margin-bottom: 6px;
  color: #fff;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #007bff;
  outline: none;
}

/* Checkbox group */
.form-group.checkboxes {
  display: flex;
  flex-direction: row;   /* keep them in one row */
  gap: 20px;             /* space between them */
  align-items: center;
}

/* Each checkbox */
.checkbox-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #444;
  user-select: none;
  padding-left: 28px; /* space for custom box */
  margin: 0; /* no extra spacing */
}

/* Hide native checkbox */
.checkbox-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Custom box */
.checkmark {
  position: absolute;
  left: 0;
  top: 2px;
  height: 18px;
  width: 18px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}

/* Checked state */
.checkbox-wrapper input:checked ~ .checkmark {
  background-color: #007bff;
  border-color: #007bff;
}

/* Tick mark */
.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-wrapper input:checked ~ .checkmark::after {
  display: block;
}

.btn-submit {
  padding: 12px;
  background: #007bff;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease;
}

.btn-submit:hover {
  background: #0056b3;
}

    .alert {
        background: #eaf4ff;
        padding: 10px;
        margin-bottom: 15px;
        border-left: 4px solid #007bff;
        border-radius: 6px;
        color: #333;
        font-size: 14px;
    }
    /* Admin Sidebar */
    .sidebar .menu-link {
        display: block;
        padding: 12px 15px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        text-decoration: none;
        color: #333;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    /* Hover effect */
    .sidebar .menu-link:hover {
        background: #071028;   /* dark navy background */
        color: #fff;           /* white text */
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* Active effect */
    .sidebar .menu-link.active {
        background: #071028;   /* dark navy background */
        color: #fff;           /* white text */
        font-weight: 600;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* Admin Dashboard */
    .dashboardcard {
        background:#fff;
        border-radius:12px;
        padding:20px;
        box-shadow:0 4px 8px rgba(0,0,0,0.1);
        text-align:center;
        transition:all 0.3s ease;
    }
    .dashboardcard:hover {
        transform:translateY(-5px);
        box-shadow:0 6px 14px rgba(0,0,0,0.15);
    }
    .dashboardcard h3 {
        margin:0;
        font-size:18px;
        color:#071028;
    }
    .dashboardcard p {
        font-size:24px;
        margin-top:10px;
        font-weight:bold;
        color:#333;
    }
    .dashboardcard-link{
      display:block;
      text-align:center;
      margin-top:15px;
      padding:10px;
      background:#071028;
      color:#fff;
      border-radius:0 0 10px 10px;
      text-decoration:none;
    }
    /*login form css*/
    .loginform-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    
    padding: 20px;
}

    .loginform-box {
    background: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0px 6px 20px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
}

   
.loginform-title {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

    .loginform-group {
        margin-bottom: 15px;
    }

    .loginform-group label {
        display: block;
        font-weight: bold;
        margin-bottom: 6px;
        color: #444;
    }

    .loginform-group input,
    .loginform-group select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 14px;
    }

    .loginform-group input:focus,
    .loginform-group select:focus {
        border-color: #007bff;
        outline: none;
    }

    .loginbtn-submit {
        width: 100%;
        padding: 12px;
        background: #007bff;
        border: none;
        border-radius: 8px;
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: 0.3s ease;
    }

    .loginbtn-submit:hover {
        background: #0056b3;
    }