:root{--b:#080808;--p:#f4f1eb;--w:#fff;--g:#777;--l:#d8d4cc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--p);color:#111;font-family:Arial,sans-serif}a{text-decoration:none;color:inherit}header{height:80px;padding:0 5vw;background:#080808;color:#fff;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;border-bottom:1px solid #292929}.brand{font-weight:900;letter-spacing:.16em}.brand b{font:32px Georgia}.brand small{display:block;font-size:8px;color:#999;letter-spacing:.28em;margin-left:35px;margin-top:-7px}nav{display:flex;gap:24px;font-size:12px}nav button{background:none;border:0;color:#bbb;cursor:pointer}.button{display:inline-block;background:#fff;color:#080808;border:0;padding:16px 22px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.mini{font-size:10px;padding:12px 15px}.hero{min-height:700px;background:radial-gradient(circle at 76% 48%,#343434,#151515 28%,#070707 62%);color:#fff;display:flex;align-items:center;padding:8vw}.hero h1{font:clamp(72px,11vw,150px)/.82 Georgia;margin:25px 0}.lead{max-width:620px;color:#bbb;font-size:20px;line-height:1.6;margin-bottom:35px}.eyebrow{font-size:10px;font-weight:900;letter-spacing:.22em;color:#888}.facts{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;padding:25px 6vw}.facts div{padding:10px 24px;border-right:1px solid var(--l)}.facts span,.facts b{display:block}.facts span{font-size:11px;color:#888;margin-top:6px}.section{padding:100px 8vw}.section h2{font:clamp(42px,6vw,76px) Georgia;margin:12px 0 50px}.cards,.fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--l)}.cards article{background:var(--p);padding:35px;min-height:230px}.cards p,.about p,.request p{color:#666;line-height:1.7}.black{background:#090909;color:#fff}.fleet{grid-template-columns:repeat(3,1fr);background:#333}.fleet article{background:#090909;padding:20px}.fleet p{color:#888}.car{height:230px;background:linear-gradient(145deg,#252525,#0b0b0b);display:grid;place-items:center;text-align:center;color:#555;font-weight:900;letter-spacing:.2em}.bigcopy{font:27px/1.8 Georgia;max-width:1100px}.about,.request{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.request{background:#e8e4dc}form{background:#fff;padding:38px}label{font-size:11px;font-weight:800}input,select,textarea{width:100%;border:0;border-bottom:1px solid #bbb;background:transparent;padding:13px 0;margin:6px 0 20px;font:inherit}.two,.three{display:grid;gap:22px}.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}footer{background:#050505;color:#999;padding:55px 8vw;display:flex;justify-content:space-between;align-items:center;font-size:11px}.admin{background:#ece9e3}.login{min-height:100vh;background:#080808;display:grid;place-items:center}.loginbox{width:min(430px,90%);background:#fff;padding:45px}.loginbox h2{font:38px Georgia}.darkbtn{background:#080808!important;color:#fff!important}.outline{background:none;color:#bbb;border:1px solid #555;padding:10px 15px}.dash{padding:55px 6vw}.dash>h1{font:60px Georgia}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:25px 0 45px}.metrics div{background:#111;color:#fff;padding:24px}.metrics b,.metrics span{display:block}.metrics b{font-size:27px}.metrics span{font-size:10px;color:#888;margin-top:6px}.bar{display:flex;justify-content:space-between;align-items:center}.quick{margin:20px 0;border:1px solid #ccc}.filters{display:grid;grid-template-columns:1fr 220px;gap:12px;margin:20px 0}.filters input,.filters select{background:#fff;border:1px solid #ddd;padding:13px;margin:0}.ride{background:#fff;border:1px solid #ddd;padding:24px;margin:12px 0}.ridehead{display:flex;justify-content:space-between}.ridehead h3{margin:10px 0 5px}.ridehead p{margin:0;color:#555}.pill{background:#111;color:#fff;padding:5px 8px;font-size:9px;text-transform:uppercase}.meta{font-size:11px;color:#777;margin:18px 0}.edit{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.margin{font-size:11px;color:#777}.table{background:#fff;overflow:auto}.table table{width:100%;border-collapse:collapse}.table th,.table td{padding:17px;text-align:left;border-bottom:1px solid #eee;font-size:12px}.table th{text-transform:uppercase;font-size:9px;letter-spacing:.1em;color:#777}.empty{background:#fff;padding:35px}@media(max-width:850px){nav{display:none}.facts,.cards,.fleet,.metrics{grid-template-columns:1fr 1fr}.about,.request{grid-template-columns:1fr}.edit{grid-template-columns:1fr 1fr}}@media(max-width:550px){.facts,.cards,.fleet,.metrics,.two,.three,.edit{grid-template-columns:1fr}.section{padding:60px 22px}.hero{padding:60px 22px;min-height:620px}.hero h1{font-size:70px}.facts div{border-right:0;border-bottom:1px solid var(--l)}form{padding:24px}footer{flex-direction:column;align-items:flex-start;gap:20px}.dash{padding:35px 18px}.dash>h1{font-size:45px}}
/* Keep the login screen out of the dashboard layout */
body:has(#adminApp:not([hidden])) #loginScreen {
  display: none !important;
}

/* Keep hidden sections completely hidden */
[hidden] {
  display: none !important;
}


/* ==========================================
   WORTHY TRANSPORTATION - MOBILE IMPROVEMENTS
   ========================================== */

@media (max-width: 850px) {

  /* Keep navigation visible on mobile */
  header {
    height: auto;
    min-height: 80px;
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 16px;
  }

  nav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
  }

  nav button {
    display: inline-block;
    padding: 11px 13px;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
  }

  /* Dashboard layout */
  .dash {
    padding: 28px 18px;
  }

  .dash > h1 {
    font-size: 40px;
    line-height: 1.1;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 30px;
  }

  .metrics div {
    padding: 18px;
    min-width: 0;
  }

  .metrics b {
    font-size: 24px;
    overflow-wrap: anywhere;
  }

  /* Search and filters */
  .filters {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Reservation cards */
  .ride {
    padding: 18px;
    overflow-wrap: anywhere;
  }

  .ridehead {
    flex-direction: column;
    gap: 12px;
  }

  .ridehead h3 {
    font-size: 18px;
    line-height: 1.4;
  }

  .ridehead strong {
    font-size: 20px;
  }

  .edit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .edit label {
    min-width: 0;
  }

  /* Keep tables scrollable */
  .table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table table {
    min-width: 550px;
  }

  /* Prevent input fields from zooming on iPhone */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Better button tapping */
  button {
    min-height: 42px;
  }
}

@media (max-width: 550px) {

  .brand b {
    font-size: 27px;
  }

  .dash > h1 {
    font-size: 34px;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .edit {
    grid-template-columns: 1fr;
  }

  .bar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .ride {
    padding: 15px;
  }

  /* Easier reservation editing */
  #editReservationOverlay section {
    padding: 18px !important;
    max-height: 92vh !important;
  }

  #editReservationForm {
    grid-template-columns: 1fr !important;
  }
}