:root{--navy:#071b2c;--navy2:#0d2e49;--blue:#0b78e3;--ink:#17324d;--muted:#6c7f91;--bg:#f4f7fb;--line:#dbe4ec;--white:#fff;--red:#d83b3b;--green:#17834f;--amber:#b87800;--radius:16px;--shadow:0 8px 24px rgba(19,49,77,.08)}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px}button,input,select,textarea{font:inherit}.splash{padding:40px;text-align:center}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(160deg,#061728,#0f3554)}.login-card{width:min(460px,100%);background:#fff;border-radius:24px;padding:30px;box-shadow:0 20px 70px rgba(0,0,0,.25)}.brand-lockup{display:flex;gap:12px;align-items:center}.plane{font-size:34px}.login-card h1{margin:22px 0 8px;font-size:30px}.muted{color:var(--muted)}label{display:block;font-weight:650;margin:15px 0 7px}input,select,textarea{width:100%;border:1px solid #cbd7e2;border-radius:11px;padding:12px 13px;background:#fff;color:var(--ink)}textarea{min-height:90px;resize:vertical}.btn{border:0;border-radius:11px;padding:11px 15px;font-weight:700;cursor:pointer}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{background:#edf3f8;color:var(--ink)}.btn.danger{background:#fff0f0;color:#a92626}.btn.small{padding:7px 10px;font-size:13px}.login-card .btn{width:100%;margin-top:18px}.error,.notice{margin:14px 0;padding:11px 13px;border-radius:10px}.error{background:#fff0f0;color:#a92626}.notice{background:#edf9f2;color:#176239}.shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:245px;background:linear-gradient(180deg,var(--navy),#041421);color:#fff;padding:24px 16px;display:flex;flex-direction:column;z-index:20}.sidebar .brand-lockup{padding:8px 10px 22px}.sidebar .brand-lockup strong{font-size:17px}.sidebar .brand-lockup span{display:block;color:#a9c3d6;font-size:12px;margin-top:3px}.nav{display:grid;gap:7px}.nav button{border:0;background:transparent;color:#e8f1f8;border-radius:12px;padding:13px;text-align:left;font-weight:650;cursor:pointer}.nav button.active{background:#fff;color:var(--blue)}.statusbox{margin-top:auto;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:13px;border-radius:12px;font-size:13px}.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#33c779;margin-right:7px}.dot.bad{background:#ff5252}.main{margin-left:245px;padding:28px 32px 80px;max-width:1500px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--muted);font-weight:750;margin:0 0 5px}.topbar h1{margin:0;font-size:34px}.sub{margin:5px 0;color:var(--muted)}.userbox{text-align:right}.badge{display:inline-block;background:#e8f2fb;border-radius:999px;padding:7px 10px;font-weight:700;font-size:13px;margin-bottom:6px}.userbox small{display:block}.linkbtn{border:0;background:transparent;color:var(--blue);padding:5px 0;cursor:pointer}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:0 0 18px}.card,.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card{padding:19px}.card small{display:block;color:var(--muted);font-weight:650}.card strong{display:block;font-size:29px;margin-top:6px}.panel{padding:20px;margin-bottom:18px}.panel-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:15px}.panel h2,.panel h3{margin:0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;padding:11px 10px;border-bottom:1px solid #e7edf3;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}td{font-size:14px}.pill{display:inline-block;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:700;background:#edf3f8}.pill.open{background:#fff2dc;color:#825600}.pill.resolved{background:#eaf8ef;color:#176239}.pill.grounded{background:#ffeaea;color:#a92626}.actions{display:flex;gap:6px;flex-wrap:wrap}.empty{padding:24px;text-align:center;color:var(--muted)}.modal-bg{position:fixed;inset:0;background:rgba(2,14,25,.58);z-index:100;display:grid;place-items:center;padding:18px}.modal{width:min(650px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.3)}.modal-head{display:flex;justify-content:space-between;gap:15px;align-items:center}.x{border:0;background:#edf3f8;width:36px;height:36px;border-radius:50%;font-size:20px}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.mobile-nav{display:none}.danger-banner{background:#fff0f0;color:#9d2222;border:1px solid #ffd2d2;padding:12px 14px;border-radius:12px;margin-bottom:17px;font-weight:700}@media(max-width:950px){.sidebar{display:none}.main{margin-left:0;padding:18px 16px 92px}.topbar{align-items:center}.topbar h1{font-size:29px}.userbox{max-width:46%}.cards{grid-template-columns:1fr 1fr}.mobile-nav{position:fixed;display:flex;z-index:50;bottom:0;left:0;right:0;background:#071b2c;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow-x:auto;box-shadow:0 -5px 20px rgba(0,0,0,.16)}.mobile-nav button{flex:1;min-width:76px;border:0;background:transparent;color:#c9d9e6;border-radius:10px;padding:9px 7px;font-size:12px;font-weight:700}.mobile-nav button.active{background:#fff;color:var(--blue)}}@media(max-width:620px){.main{padding:15px 12px 88px}.topbar{display:block}.userbox{text-align:left;max-width:none;margin-top:11px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.userbox small{display:inline}.cards{grid-template-columns:1fr 1fr;gap:10px}.card{padding:15px}.card strong{font-size:24px}.panel{padding:15px}.grid2{grid-template-columns:1fr}.toolbar .btn{flex:1}.modal{padding:17px;border-radius:16px}.form-actions{flex-direction:column-reverse}.form-actions .btn{width:100%}}

/* ===== Mobile UI v2.1 ===== */
@media (max-width:700px){

  body{
    overflow-x:hidden;
  }

  .main{
    padding:22px 12px 105px;
    width:100%;
    overflow:hidden;
  }

  .topbar{
    margin-bottom:24px;
  }

  .topbar h1{
    font-size:34px;
    line-height:1.08;
  }

  .eyebrow{
    font-size:12px;
    letter-spacing:.16em;
  }

  .sub{
    font-size:18px;
  }

  .userbox{
    gap:7px 10px;
    font-size:15px;
  }

  .badge{
    margin:0;
  }

  .toolbar{
    margin-bottom:18px;
  }

  .toolbar .btn{
    width:100%;
    flex:none;
    min-height:48px;
    font-size:16px;
  }

  .panel{
    padding:14px;
    border-radius:18px;
    overflow:hidden;
  }

  .panel h2{
    font-size:25px;
    margin-bottom:14px;
  }

  .panel-head{
    align-items:flex-start;
  }

  /* Desktop tables become mobile record cards */
  .table-wrap{
    overflow:visible;
    width:100%;
  }

  table{
    display:block;
    width:100%;
    min-width:0 !important;
  }

  thead{
    display:none;
  }

  tbody{
    display:block;
    width:100%;
  }

  tbody tr{
    display:block;
    width:100%;
    margin:0 0 12px;
    padding:10px 13px;
    border:1px solid #dfe7ee;
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 12px rgba(19,49,77,.05);
  }

  tbody tr:last-child{
    margin-bottom:0;
  }

  tbody td{
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    gap:12px;
    width:100%;
    padding:9px 0;
    border:0;
    border-bottom:1px solid #edf2f6;
    font-size:15px;
    line-height:1.35;
    overflow-wrap:anywhere;
  }

  tbody td::before{
    content:attr(data-label);
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  tbody td:last-child{
    border-bottom:0;
  }

  tbody td[data-label=""]{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding-top:12px;
  }

  tbody td[data-label=""]::before{
    display:none;
  }

  .actions{
    width:100%;
    justify-content:flex-end;
  }

  .actions .btn,
  tbody td[data-label=""] .btn{
    min-width:82px;
  }

  .pill{
    width:max-content;
    max-width:100%;
  }

  /* Stats */
  .cards{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .card{
    min-height:102px;
    padding:15px;
  }

  .card strong{
    font-size:25px;
  }

  /* Bottom navigation */
  .mobile-nav{
    gap:2px;
    overflow:hidden;
    padding-left:5px;
    padding-right:5px;
  }

  .mobile-nav button{
    flex:1 1 0;
    min-width:0 !important;
    padding:10px 2px;
    font-size:10.5px;
    white-space:nowrap;
  }

  .mobile-nav button.active{
    border-radius:11px;
  }

  /* Modals */
  .modal-bg{
    align-items:end;
    padding:8px;
  }

  .modal{
    width:100%;
    max-height:90vh;
    border-radius:20px 20px 12px 12px;
  }

}

@media (max-width:390px){
  tbody td{
    grid-template-columns:82px minmax(0,1fr);
  }

  .mobile-nav button{
    font-size:10px;
  }
}

/* =========================================================
   TECNAM SYNDICATE — MOBILE POLISH PASS
   ========================================================= */

:root{
  --navy:#08253a;
  --navy-2:#0d3551;
  --blue:#1687e8;
  --blue-soft:#e8f4ff;
  --bg:#f5f8fb;
  --card:#ffffff;
  --text:#15344e;
  --muted:#7890a4;
  --line:#e3ebf2;
  --green:#1f9d68;
  --green-soft:#e8f7ef;
  --amber:#b7791f;
  --amber-soft:#fff4d9;
  --red:#c73a3a;
  --red-soft:#fdeaea;
  --shadow:0 10px 30px rgba(14,45,70,.08);
}

/* page */
body{
  background:
    linear-gradient(180deg,#eef5fa 0,#f7f9fb 220px,#f7f9fb 100%);
  color:var(--text);
}

.main{
  max-width:1100px;
  margin:0 auto;
}

/* top area */
.topbar{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:white;
  margin:-24px -20px 26px;
  padding:30px 24px 26px;
  border-radius:0 0 26px 26px;
  box-shadow:0 8px 28px rgba(8,37,58,.18);
}

.topbar h1{
  color:white;
  letter-spacing:-.03em;
  margin-top:4px;
}

.eyebrow{
  color:#a9c6db;
  font-weight:800;
}

.sub{
  color:#c6d7e4;
}

.userbox{
  margin-top:18px;
  color:#e5eef5;
}

.badge{
  background:rgba(255,255,255,.14);
  color:white;
  border:1px solid rgba(255,255,255,.16);
}

.userbox a,
.userbox button{
  color:#7fc5ff;
}

/* cards/panels */
.panel,
.card{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(208,221,232,.85);
  box-shadow:var(--shadow);
}

.panel{
  border-radius:22px;
}

.panel h2{
  color:var(--navy);
  letter-spacing:-.02em;
}

.cards{
  gap:14px;
}

.card{
  border-radius:20px;
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--blue);
  opacity:.9;
}

.card strong{
  color:var(--navy);
}

.card small,
.card .label{
  color:var(--muted);
}

/* primary actions */
.btn.primary,
.toolbar .btn{
  background:linear-gradient(135deg,#1687e8,#0d71ca);
  color:white;
  border:0;
  box-shadow:0 7px 18px rgba(22,135,232,.22);
  font-weight:800;
}

.btn.primary:active,
.toolbar .btn:active{
  transform:translateY(1px);
  box-shadow:0 3px 10px rgba(22,135,232,.18);
}

.btn{
  border-radius:13px;
}

.btn.secondary{
  background:#eef4f8;
  color:var(--navy);
  border:0;
}

.btn.danger{
  background:var(--red-soft);
  color:var(--red);
  border:0;
}

/* status pills */
.pill{
  border-radius:999px;
  font-weight:800;
  border:0;
  padding:6px 11px;
}

.pill.green,
.pill.resolved,
.pill.available{
  color:var(--green);
  background:var(--green-soft);
}

.pill.amber,
.pill.in-progress{
  color:var(--amber);
  background:var(--amber-soft);
}

.pill.red,
.pill.grounded{
  color:var(--red);
  background:var(--red-soft);
}

/* tables */
.table-wrap{
  border-radius:16px;
}

table{
  border-collapse:separate;
  border-spacing:0;
}

thead th{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:#f8fafc;
}

tbody td{
  color:var(--text);
}

/* mobile record cards */
@media (max-width:700px){

  .main{
    padding:0 14px 100px;
  }

  .topbar{
    margin:0 -14px 20px;
    padding:28px 20px 24px;
    border-radius:0 0 28px 28px;
  }

  .topbar h1{
    font-size:36px;
    line-height:1;
  }

  .eyebrow{
    font-size:11px;
    letter-spacing:.18em;
  }

  .sub{
    font-size:17px;
    margin-top:8px;
  }

  .userbox{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    padding:11px 12px;
    border-radius:16px;
    width:max-content;
    max-width:100%;
  }

  .toolbar{
    margin:18px 0;
  }

  .toolbar .btn{
    min-height:54px;
    border-radius:17px;
    font-size:17px;
  }

  .panel{
    padding:16px;
    border-radius:20px;
  }

  .panel h2{
    font-size:27px;
  }

  .cards{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .card{
    min-height:108px;
    padding:16px 14px;
    border-radius:18px;
  }

  .card strong{
    font-size:27px;
    letter-spacing:-.03em;
  }

  tbody tr{
    margin-bottom:14px;
    padding:12px 14px;
    border-radius:17px;
    box-shadow:0 6px 18px rgba(14,45,70,.06);
    border:1px solid var(--line);
  }

  tbody td{
    grid-template-columns:90px minmax(0,1fr);
    padding:10px 0;
    font-size:15px;
  }

  tbody td::before{
    font-size:10px;
    color:#88a0b3;
  }

  /* bottom nav */
  .mobile-nav{
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
    background:rgba(7,35,54,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-radius:22px;
    padding:7px;
    box-shadow:0 12px 30px rgba(6,34,53,.25);
    border:1px solid rgba(255,255,255,.06);
  }

  .mobile-nav button{
    color:#b7cad9;
    border-radius:14px;
    font-size:10px;
    font-weight:800;
    padding:12px 3px;
  }

  .mobile-nav button.active{
    background:white;
    color:var(--blue);
    box-shadow:0 4px 12px rgba(0,0,0,.12);
  }

  .modal{
    border-radius:24px 24px 16px 16px;
    box-shadow:0 -10px 40px rgba(8,37,58,.22);
  }
}

/* ===== Mobile navigation icons ===== */

@media (max-width:700px){

  .mobile-nav{
    min-height:70px;
    align-items:stretch;
  }

  .mobile-nav button{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;

    min-width:0;
    padding:7px 1px 6px;

    font-size:9px;
    line-height:1.05;
    letter-spacing:-.01em;
  }

  .mobile-nav button::before{
    display:block;
    font-size:18px;
    line-height:20px;
    font-weight:400;
  }

  .mobile-nav button:nth-child(1)::before{
    content:"⌂";
  }

  .mobile-nav button:nth-child(2)::before{
    content:"▣";
  }

  .mobile-nav button:nth-child(3)::before{
    content:"✈";
  }

  .mobile-nav button:nth-child(4)::before{
    content:"⚙";
  }

  .mobile-nav button:nth-child(5)::before{
    content:"♙";
  }

  .mobile-nav button:nth-child(6)::before{
    content:"≡";
  }

  .mobile-nav button.active{
    padding-top:7px;
    padding-bottom:6px;
  }

}

/* ===== Professional mobile nav icons ===== */
@media (max-width:700px){

  .mobile-nav button::before{
    content:"" !important;
    width:20px;
    height:20px;
    display:block;
    background-repeat:no-repeat;
    background-position:center;
    background-size:20px 20px;
    opacity:.92;
  }

  /* Dashboard */
  .mobile-nav button:nth-child(1)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  }

  /* Bookings */
  .mobile-nav button:nth-child(2)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  }

  /* Flights */
  .mobile-nav button:nth-child(3)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 9 15'/%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3C/svg%3E");
  }

  /* Maintenance */
  .mobile-nav button:nth-child(4)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5 5L3 18l3 3 6.7-6.7a4 4 0 0 0 5-5l-2.3 2.3-3-3Z'/%3E%3C/svg%3E");
  }

  /* Members */
  .mobile-nav button:nth-child(5)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }

  /* Change Log */
  .mobile-nav button:nth-child(6)::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E");
  }

  /* Active icon turns blue */
  .mobile-nav button.active::before{
    filter:brightness(0) saturate(100%) invert(43%) sepia(94%) saturate(1442%) hue-rotate(181deg) brightness(96%) contrast(91%);
  }

}

/* =========================================================
   DASHBOARD + IOS STYLE BOOKING CALENDAR
   ========================================================= */

.next-booking-card{
  display:grid;
  gap:12px;
  padding-top:6px;
}

.next-booking-row{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
}

.next-icon{
  width:24px;
  color:var(--blue);
  font-size:19px;
  text-align:center;
}

.next-booking-purpose{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:2px;
  padding:7px 12px;
  border-radius:999px;
  background:#fff0e6;
  color:#b85d15;
  font-weight:700;
}

/* Calendar */

.calendar-panel{
  padding:18px;
}

.calendar-heading{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  margin-bottom:18px;
}

.calendar-heading h2{
  margin:0;
  text-align:center;
  font-size:25px;
}

.calendar-arrow{
  width:40px;
  height:40px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy);
  border-radius:50%;
  font-size:29px;
  line-height:1;
  display:grid;
  place-items:center;
  padding:0 0 4px;
}

.calendar-weekdays,
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
}

.calendar-weekdays{
  margin-bottom:8px;
}

.calendar-weekdays span{
  text-align:center;
  font-size:10px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.04em;
}

.calendar-day{
  position:relative;
  aspect-ratio:1/1;
  min-width:0;
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--text);
  border-radius:50%;
  font:inherit;
  padding:2px;
}

.calendar-number{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:15px;
  font-weight:650;
}

.calendar-day.outside .calendar-number{
  color:#b8c3cc;
}

.calendar-day.today:not(.selected) .calendar-number{
  box-shadow:inset 0 0 0 1.5px #a8cdec;
  color:var(--blue);
}

.calendar-day.selected .calendar-number{
  background:var(--blue);
  color:#fff;
  box-shadow:0 5px 12px rgba(22,135,232,.28);
}

.booking-line{
  display:block;
  width:18px;
  height:3px;
  border-radius:999px;
  background:var(--blue);
}

.booking-line.multi{
  width:23px;
  background:linear-gradient(90deg,#1687e8 0 46%,transparent 46% 54%,#32a66a 54%);
}

.booking-line.empty-line{
  visibility:hidden;
}

.selected-day-section{
  margin-top:20px;
}

.selected-day-heading{
  padding:0 4px 10px;
}

.selected-day-date{
  margin:0;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}

.selected-day-heading h2{
  margin:3px 0 0;
  color:var(--navy);
  font-size:23px;
}

.day-booking-list{
  display:grid;
  gap:12px;
}

.day-booking-card{
  position:relative;
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:16px 14px 16px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.day-booking-card::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:4px;
  background:var(--blue);
}

.booking-colour-1::before{
  background:#27a76b;
}

.booking-colour-2::before{
  background:#f4a124;
}

.booking-colour-3::before{
  background:#805ad5;
}

.booking-time-block{
  display:flex;
  flex-direction:column;
  gap:4px;
  border-right:1px solid var(--line);
  padding-right:12px;
  color:var(--navy);
}

.booking-time-block strong{
  font-size:15px;
}

.booking-time-block span{
  color:var(--muted);
  font-size:14px;
}

.booking-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.booking-info > strong{
  color:var(--navy);
  font-size:16px;
}

.booking-member{
  color:#55728a;
  font-size:14px;
}

.booking-details{
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

.booking-cancel{
  border:0;
  background:#fdeaea;
  color:#b82f2f;
  font-weight:800;
  padding:9px 11px;
  border-radius:11px;
}

.calendar-empty{
  min-height:170px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:7px;
  color:var(--muted);
}

.calendar-empty-icon{
  color:#8da7ba;
  font-size:30px;
}

.calendar-empty strong{
  color:var(--navy);
}

@media(max-width:700px){

  .calendar-panel{
    padding:15px 10px 13px;
  }

  .calendar-heading{
    grid-template-columns:38px 1fr 38px;
    margin-bottom:16px;
  }

  .calendar-heading h2{
    font-size:21px;
  }

  .calendar-arrow{
    width:36px;
    height:36px;
    font-size:25px;
  }

  .calendar-number{
    width:32px;
    height:32px;
    font-size:14px;
  }

  .calendar-day{
    gap:2px;
  }

  .booking-line{
    height:3px;
    width:15px;
  }

  .day-booking-card{
    grid-template-columns:62px minmax(0,1fr);
    gap:12px;
  }

  .booking-cancel{
    grid-column:2;
    justify-self:start;
  }

  .booking-time-block{
    padding-right:9px;
  }

  .selected-day-section{
    margin-bottom:18px;
  }
}

/* ============================================================
   MONTHLY BILLING
   ============================================================ */

.billing-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.billing-month-nav{
  display:grid;
  grid-template-columns:42px auto 42px;
  align-items:center;
  gap:12px;
}

.billing-month-nav h2{
  margin:2px 0 0;
  color:var(--navy);
}

.billing-eyebrow{
  margin:0;
}

.billing-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
}

.billing-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 13px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.status-open{
  background:#e8f7ef;
  color:#1f8b60;
}

.status-finalised{
  background:#fff3d8;
  color:#986418;
}

.status-paid{
  background:#e8f4ff;
  color:#1676c1;
}

.billing-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:16px;
}

.billing-summary-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow);
}

.billing-summary-card small,
.billing-summary-card span{
  display:block;
  color:var(--muted);
}

.billing-summary-card strong{
  display:block;
  margin:5px 0 2px;
  color:var(--navy);
  font-size:24px;
}

.billing-admin-actions{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}

.billing-members{
  display:grid;
  gap:14px;
}

.billing-member-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.billing-member-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px;
  border-bottom:1px solid var(--line);
}

.billing-member-head small{
  color:var(--muted);
}

.billing-member-head h3{
  margin:3px 0 0;
  color:var(--navy);
  font-size:20px;
}

.billing-total{
  text-align:right;
}

.billing-total strong{
  display:block;
  margin-top:3px;
  color:var(--navy);
  font-size:24px;
}

.billing-total strong.credit{
  color:#1f9d68;
}

.billing-math{
  padding:8px 18px 18px;
}

.billing-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid #edf2f6;
}

.billing-line span{
  color:#59758b;
}

.billing-line strong{
  color:var(--navy);
}

.billing-line.fuel-credit strong{
  color:#1f9d68;
}

.billing-hours-edit{
  display:flex;
  align-items:center;
  gap:7px;
}

.billing-hours-edit input{
  width:85px;
  padding:8px 9px;
  margin:0;
}

.billing-derived{
  margin:-3px 0 5px;
  color:#8ba0b0;
  font-size:12px;
  text-align:right;
}

.billing-equation{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  background:#f4f8fb;
}

.billing-equation span{
  color:#698397;
  font-size:13px;
}

.billing-equation strong{
  color:var(--navy);
  font-size:20px;
}

.billing-disabled{
  text-align:center;
  padding:35px 20px;
}

.toggle-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:15px 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
}

.toggle-row input{
  width:auto;
  margin:3px 0 0;
}

.toggle-row span{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.toggle-row small{
  color:var(--muted);
}

.fuel-entry-btn{
  width:max-content;
  margin-top:8px;
  padding:8px 11px;
  background:#e8f7ef;
  color:#16774f;
  border:0;
  font-size:12px;
  font-weight:800;
}

.fuel-booking-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:13px;
  margin-bottom:15px;
  border-radius:14px;
  background:#f4f8fb;
}

.fuel-booking-summary strong{
  color:var(--navy);
}

.fuel-booking-summary span{
  color:#668196;
}

.fuel-credit-preview{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  background:#e8f7ef;
  color:#287b5a;
  font-size:13px;
}


/* Professional Billing nav icon */
@media(max-width:700px){

  .mobile-nav button[data-tab="Billing"]::before{
    content:"" !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M16 8.5c-.8-.8-2-1.2-3.4-1.2-2 0-3.6 1-3.6 2.5 0 3.8 7 1.8 7 5.3 0 1.5-1.5 2.6-3.8 2.6-1.6 0-3-.5-4-1.4M12 5.5v13'/%3E%3C/svg%3E") !important;
  }

  .mobile-nav button[data-tab="Change Log"]::before{
    content:"" !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E") !important;
  }

  .billing-top{
    display:block;
  }

  .billing-month-nav{
    grid-template-columns:38px 1fr 38px;
  }

  .billing-month-nav > div{
    text-align:center;
  }

  .billing-toolbar{
    justify-content:center;
    margin-top:14px;
  }

  .billing-summary{
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .billing-summary-card:last-child{
    grid-column:1 / -1;
  }

  .billing-summary-card{
    padding:14px;
  }

  .billing-summary-card strong{
    font-size:21px;
  }

  .billing-admin-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .billing-admin-actions .btn{
    width:100%;
  }

  .billing-member-head{
    padding:16px;
  }

  .billing-total strong{
    font-size:21px;
  }

  .billing-math{
    padding:6px 16px 16px;
  }

  .billing-line{
    align-items:flex-start;
  }

  .billing-equation{
    display:block;
  }

  .billing-equation strong{
    display:block;
    margin-top:7px;
  }

  .mobile-nav{
    overflow-x:auto;
    justify-content:flex-start;
  }

  .mobile-nav button{
    min-width:56px !important;
  }

}


/* ===== Billing nav placement ===== */
@media(max-width:700px){

  .mobile-nav{
    display:grid !important;
    grid-template-columns:repeat(6,1fr) !important;
    gap:2px !important;
  }

  .mobile-nav button{
    min-width:0 !important;
    width:100% !important;
    font-size:8.5px !important;
    padding:8px 1px 7px !important;
  }

  .mobile-nav button::before{
    width:19px !important;
    height:19px !important;
    background-size:19px 19px !important;
  }

  /* Billing */
  .mobile-nav button[data-tab="Billing"]::before{
    content:"" !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M16 8.5c-.8-.8-2-1.2-3.4-1.2-2 0-3.6 1-3.6 2.5 0 3.8 7 1.8 7 5.3 0 1.5-1.5 2.6-3.8 2.6-1.6 0-3-.5-4-1.4M12 5.5v13'/%3E%3C/svg%3E") !important;
  }

}

/* ===== FINAL MOBILE NAV FIX ===== */
@media(max-width:700px){

  .mobile-nav{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:2px !important;
    overflow:hidden !important;
    align-items:stretch !important;
  }

  .mobile-nav button{
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:8px 1px 7px !important;
    font-size:8.5px !important;
    line-height:1 !important;
  }

  .mobile-nav button::before{
    width:19px !important;
    height:19px !important;
    background-size:19px 19px !important;
  }

  /* More is always final nav item */
  .mobile-nav button:last-child::before{
    content:"" !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='5' cy='12' r='1.4' fill='%23b7cad9'/%3E%3Ccircle cx='12' cy='12' r='1.4' fill='%23b7cad9'/%3E%3Ccircle cx='19' cy='12' r='1.4' fill='%23b7cad9'/%3E%3C/svg%3E") !important;
  }

}

/* ============================================================
   FINAL SIX ITEM MOBILE NAV
   ============================================================ */

@media(max-width:700px){

  .mobile-nav{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:2px !important;

    left:10px !important;
    right:10px !important;
    width:auto !important;

    min-height:82px !important;
    padding:7px !important;

    overflow:hidden !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
  }

  .mobile-nav > button{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    margin:0 !important;
    padding:8px 1px 7px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    gap:5px !important;

    font-size:8.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;

    border-radius:13px !important;
  }

  .mobile-nav > button::before{
    width:20px !important;
    height:20px !important;
    background-size:20px 20px !important;
    flex:0 0 20px !important;
  }

  .mobile-nav > button.active{
    background:#fff !important;
  }

  /* Proper More button */
  .mobile-nav .nav-more-button::before{
    display:none !important;
  }

  .nav-more-dots{
    width:20px;
    height:20px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
  }

  .nav-more-dots i{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#b7cad9;
    display:block;
  }

  .nav-more-label{
    color:#b7cad9;
    font-weight:800;
    font-size:8.5px;
  }

  /* More menu */
  .more-sheet{
    display:grid;
    gap:10px;
  }

  .more-sheet-item{
    width:100%;
    border:1px solid var(--line);
    background:#fff;
    border-radius:17px;
    padding:15px;

    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;

    text-align:left;
    color:var(--navy);
  }

  .more-sheet-item > span:nth-child(2){
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .more-sheet-item strong{
    font-size:16px;
  }

  .more-sheet-item small{
    color:var(--muted);
    font-size:12px;
  }

  .more-sheet-item b{
    font-size:27px;
    font-weight:400;
    color:#8da4b6;
  }

  .more-sheet-icon{
    width:42px;
    height:42px;
    border-radius:13px;
    background-color:#edf6fc;
    background-repeat:no-repeat;
    background-position:center;
    background-size:21px 21px;
  }

  .members-sheet-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231687e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }

  .changes-sheet-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231687e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E");
  }
}

/* ============================================================
   NAV BAR EXTENSION — MEMBERS / CHANGES
   ============================================================ */

@media(max-width:700px){

  .nav-more-extension{
    position:fixed;
    z-index:9998;

    left:10px;
    right:10px;
    bottom:100px;

    min-height:76px;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;

    padding:7px;

    background:rgba(7,35,54,.98);

    border:1px solid rgba(255,255,255,.07);
    border-radius:20px 20px 12px 12px;

    box-shadow:
      0 -8px 24px rgba(7,35,54,.12),
      0 12px 32px rgba(7,35,54,.25);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    animation:navMoreIn .16s ease-out;
  }

  /* visually joins onto the bottom nav */
  .nav-more-extension::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-12px;
    height:20px;
    background:rgba(7,35,54,.98);
    z-index:-1;
  }

  @keyframes navMoreIn{
    from{
      opacity:0;
      transform:translateY(10px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }

  .nav-extension-item{
    border:0;
    background:transparent;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    min-width:0;
    min-height:61px;

    padding:7px 4px;

    border-radius:13px;

    color:#b7cad9;

    font-size:10px;
    font-weight:800;
    line-height:1;

    appearance:none;
    -webkit-appearance:none;
  }

  .nav-extension-item:active{
    background:rgba(255,255,255,.08);
  }

  .nav-extension-icon{
    width:21px;
    height:21px;

    display:block;

    background-repeat:no-repeat;
    background-position:center;
    background-size:21px 21px;
  }

  .members-extension-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }

  .changes-extension-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E");
  }

  /* Old full-screen More sheet should never appear */
  .more-sheet{
    display:none !important;
  }
}


/* ============================================================
   SETTINGS / NAV EXTENSION
   ============================================================ */

@media(max-width:700px){

  .nav-more-extension{
    position:fixed;
    z-index:9998;

    left:10px;
    right:10px;
    bottom:99px;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;

    padding:7px;

    background:rgba(7,35,54,.98);

    border:1px solid rgba(255,255,255,.07);
    border-radius:20px 20px 11px 11px;

    box-shadow:
      0 -8px 24px rgba(7,35,54,.10),
      0 10px 28px rgba(7,35,54,.22);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .nav-more-extension::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-12px;
    height:18px;
    background:rgba(7,35,54,.98);
    z-index:-1;
  }

  .nav-extension-item{
    border:0;
    background:transparent;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;

    min-width:0;
    min-height:60px;

    padding:7px 3px;

    border-radius:13px;

    color:#b7cad9;

    font-size:9px;
    font-weight:800;
    line-height:1;
  }

  .nav-extension-item:active{
    background:rgba(255,255,255,.08);
  }

  .settings-extension-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
  }

  .settings-group{
    display:grid;
    gap:12px;
  }

  .settings-group-head{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding-bottom:6px;
  }

  .settings-group-head strong{
    color:var(--navy);
    font-size:18px;
  }

  .settings-group-head small{
    color:var(--muted);
  }

  .settings-switch-row{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:14px;

    padding:14px;

    border:1px solid var(--line);
    border-radius:15px;
    background:#fff;
  }

  .settings-switch-row > span{
    display:flex;
    flex-direction:column;
    gap:3px;
  }

  .settings-switch-row small{
    color:var(--muted);
    font-size:12px;
  }

  .settings-switch-row input[type="checkbox"]{
    width:22px;
    height:22px;
    margin:0;
  }

  .settings-field{
    display:grid;
    gap:7px;
  }

  .settings-field > span{
    color:var(--navy);
    font-weight:700;
  }

  .money-input-wrap{
    display:grid;
    grid-template-columns:34px 1fr;

    border:1px solid var(--line);
    border-radius:13px;
    overflow:hidden;
    background:#fff;
  }

  .money-input-wrap > span{
    display:grid;
    place-items:center;
    background:#f4f8fb;
    color:var(--muted);
    font-weight:800;
  }

  .money-input-wrap input{
    border:0 !important;
    margin:0 !important;
    border-radius:0 !important;
  }
}

/* ===== NAV RESCUE ===== */

@media(max-width:700px){

  .mobile-nav{
    display:grid !important;
    gap:2px !important;
    overflow:hidden !important;
    min-height:82px !important;
  }

  .mobile-nav > button{
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
    padding:8px 1px 7px !important;
    font-size:8.5px !important;
  }

  /* Small extension positioned over More only */
  .nav-more-extension.nav-more-compact{
    left:auto !important;
    right:10px !important;
    bottom:96px !important;

    width:190px !important;
    min-height:0 !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:3px !important;

    padding:6px !important;

    border-radius:18px 18px 8px 18px !important;
    background:rgba(7,35,54,.98) !important;

    box-shadow:0 10px 28px rgba(7,35,54,.28) !important;
  }

  .nav-more-extension.nav-more-compact::after{
    display:none !important;
  }

  .nav-more-compact .nav-extension-item{
    min-height:62px !important;
    padding:7px 3px !important;
    border-radius:12px !important;
  }

  .nav-extension-empty{
    grid-column:1 / -1;
    padding:15px;
    text-align:center;
    color:#b7cad9;
    font-size:11px;
  }

}

@media(max-width:700px){

  .billing-extension-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M16 8.5c-.8-.8-2-1.2-3.4-1.2-2 0-3.6 1-3.6 2.5 0 3.8 7 1.8 7 5.3 0 1.5-1.5 2.6-3.8 2.6-1.6 0-3-.5-4-1.4M12 5.5v13'/%3E%3C/svg%3E");
  }

  .nav-more-extension.nav-more-compact{
    width:auto !important;
    min-width:190px !important;
    max-width:270px !important;

    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    right:10px !important;
    left:auto !important;
    bottom:96px !important;
  }

}

.billing-email-row{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #edf2f6;
}

.billing-email-button{
  width:100%;
  background:#e8f4ff;
  color:#147bc5;
  border:0;
  font-weight:800;
  min-height:44px;
}

.billing-email-button:disabled{
  opacity:.65;
}

/* ============================================================
   BOOKING -> FLIGHT WORKFLOW
   ============================================================ */

.booking-start-btn,
.booking-complete-btn{
  width:max-content;
  margin-top:9px;
  min-height:38px;
  padding:8px 13px;
  font-size:12px;
  font-weight:800;
  border:0;
}

.booking-start-btn{
  background:#e8f4ff;
  color:#147bc5;
}

.booking-complete-btn{
  background:#e8f7ef;
  color:#177a52;
}

.booking-flight-started,
.booking-flight-complete{
  display:flex;
  flex-direction:column;
  gap:2px;

  width:max-content;
  max-width:100%;

  margin-top:8px;
  padding:7px 10px;

  border-radius:11px;

  font-size:12px;
}

.booking-flight-started{
  background:#fff3d8;
  color:#8f6219;
}

.booking-flight-complete{
  background:#e8f7ef;
  color:#177a52;
}

.booking-flight-started span,
.booking-flight-complete span{
  font-weight:800;
}

.booking-flight-started small,
.booking-flight-complete small{
  opacity:.8;
}


.flight-hours-summary{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;

  margin-bottom:18px;
  padding:14px;

  border-radius:15px;
  background:#f4f8fb;
}

.flight-hours-summary > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.flight-hours-summary small{
  color:#7890a3;
}

.flight-hours-summary strong{
  color:#082f49;
  font-size:20px;
}

.flight-hours-summary > span{
  color:#91a5b4;
  font-size:21px;
}

.flight-calculated-hours{
  margin:-4px 0 17px;

  padding:10px 12px;

  border-radius:11px;
  background:#e8f4ff;

  color:#55748b;
  font-size:13px;
}

.flight-calculated-hours strong{
  color:#147bc5;
}

.complete-flight-section{
  margin-top:20px;
  padding-top:18px;

  border-top:1px solid #e5edf2;
}

.complete-flight-section h3{
  margin:0 0 15px;
  color:#082f49;
  font-size:18px;
}

@media(max-width:700px){

  .booking-start-btn,
  .booking-complete-btn{
    width:100%;
  }

}

/* ===== Single Update Flight button ===== */

.booking-update-flight-btn{
  width:max-content;
  margin-top:9px;
  min-height:39px;
  padding:9px 14px;

  border:0;
  border-radius:12px;

  background:#e8f4ff;
  color:#147bc5;

  font-size:12px;
  font-weight:800;
}

@media(max-width:700px){
  .booking-update-flight-btn{
    width:100%;
  }
}

.booking-undo-btn{
  width:max-content;
  margin-top:8px;
  min-height:38px;
  padding:8px 13px;

  border:0;
  border-radius:12px;

  background:#fff3d8;
  color:#986418;

  font-size:12px;
  font-weight:800;
}

@media(max-width:700px){
  .booking-undo-btn{
    width:100%;
  }
}

/* ============================================================
   DYNAMIC MORE MENU SIZE
   ============================================================ */

@media(max-width:700px){

  .nav-more-extension.nav-more-compact{
    width:max-content !important;
    min-width:0 !important;
    max-width:calc(100vw - 20px) !important;

    display:grid !important;
    grid-auto-flow:column !important;
    grid-auto-columns:86px !important;
    grid-template-columns:none !important;

    left:auto !important;
    right:10px !important;
    bottom:96px !important;

    padding:6px !important;
    gap:3px !important;

    border-radius:18px 18px 8px 18px !important;
  }

  .nav-more-compact .nav-extension-item{
    width:86px !important;
    min-width:86px !important;
    min-height:62px !important;

    padding:7px 3px !important;
  }

}

/* ============================================================
   DESKTOP MORE MENU
   Mobile rules remain untouched.
   ============================================================ */

@media(min-width:701px){

  .nav-more-extension.nav-more-desktop{
    position:fixed;
    z-index:9999;

    width:max-content;
    min-width:0;
    max-width:420px;

    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:110px;
    gap:5px;

    padding:7px;

    background:#082f49;
    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;

    box-shadow:
      0 12px 32px rgba(8,47,73,.24),
      0 3px 10px rgba(8,47,73,.12);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .nav-more-desktop .nav-extension-item{
    width:110px;
    min-width:110px;
    min-height:70px;

    border:0;
    border-radius:11px;
    padding:9px 6px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;

    background:transparent;
    color:#b7cad9;

    font-size:12px;
    font-weight:700;

    cursor:pointer;

    transition:
      background .15s ease,
      color .15s ease;
  }

  .nav-more-desktop .nav-extension-item:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
  }

  .nav-more-desktop .nav-extension-icon{
    width:23px;
    height:23px;

    display:block;

    background-position:center;
    background-repeat:no-repeat;
    background-size:23px 23px;
  }

  .nav-more-desktop .billing-extension-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M16 8.5c-.8-.8-2-1.2-3.4-1.2-2 0-3.6 1-3.6 2.5 0 3.8 7 1.8 7 5.3 0 1.5-1.5 2.6-3.8 2.6-1.6 0-3-.5-4-1.4M12 5.5v13'/%3E%3C/svg%3E");
  }

  .nav-more-desktop .settings-extension-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
  }

  .nav-more-desktop .changes-extension-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7cad9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E");
  }

}

/* ============================================================
   FINAL MORE MENU STYLE
   ============================================================ */

.nav-more-extension.nav-more-final{
  z-index:99999;

  width:max-content;
  min-width:0;

  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:90px;

  gap:4px;
  padding:6px;

  background:#082f49;

  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;

  box-shadow:0 12px 32px rgba(8,47,73,.28);
}

.nav-more-final .nav-extension-item{
  width:90px;
  min-width:90px;
  min-height:64px;

  border:0;
  border-radius:11px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:6px;

  background:transparent;
  color:#b7cad9;

  font-size:10px;
  font-weight:800;

  cursor:pointer;
}

.nav-more-final .nav-extension-item:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.nav-more-final .nav-extension-icon{
  width:21px;
  height:21px;

  display:block;

  background-repeat:no-repeat;
  background-position:center;
  background-size:21px 21px;
}

@media(max-width:700px){

  .nav-more-extension.nav-more-final{
    grid-auto-columns:86px;
  }

  .nav-more-final .nav-extension-item{
    width:86px;
    min-width:86px;
  }

}

/* ============================================================
   SERVICE SETTINGS + LANDING BILLING
   ============================================================ */

.settings-help{
  margin:-6px 0 15px;
  color:#7990a2;
  font-size:12px;
  line-height:1.45;
}

.settings-info-box{
  margin-top:16px;
  padding:13px 14px;

  border-radius:13px;

  background:#eef6fb;
  color:#577389;

  font-size:12px;
  line-height:1.5;
}

.landing-charge-editor{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}

.landing-charge-editor > span{
  color:#6f8798;
  font-weight:700;
}

.landing-charge-editor input{
  width:88px !important;
  min-height:36px !important;
  margin:0 !important;

  padding:6px 8px !important;

  text-align:right;
}

.landing-charge-editor button{
  min-height:36px;
  margin:0;
}

@media(max-width:700px){

  .landing-charge-editor{
    width:100%;
    margin-top:7px;
  }

}

/* ===== DASHBOARD PARITY 902 CSS START ===== */

.dashboard-primary-actions{
  margin-bottom:20px;
}

.dash-next{
  margin-bottom:18px;
}

.dash-next-booking{
  display:grid;
  grid-template-columns:minmax(190px,.8fr) 1.2fr;
  gap:18px;
  padding-top:8px;
}

.dash-next-date{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.dash-next-date strong{
  color:#123d58;
  font-size:20px;
}

.dash-next-date span{
  color:#708899;
  font-size:15px;
}

.dash-next-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.dash-next-info div{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.dash-next-info small{
  color:#8298a8;
  font-size:11px;
}

.dash-next-info strong{
  color:#12344e;
  font-size:14px;
}

.dash-free-aircraft{
  min-height:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
}

.dash-free-plane{
  font-size:34px;
}

.dash-free-aircraft > strong{
  color:#143b57;
  font-size:21px;
}

.dash-free-aircraft > span{
  color:#7b91a2;
}

.dash-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:18px;
}

.dash-metric{
  min-height:112px;
  border:1px solid #dbe6ed;
  border-radius:17px;
  background:#fff;

  display:flex;
  align-items:center;
  gap:14px;

  padding:17px;

  text-align:left;

  box-shadow:0 5px 18px rgba(8,47,73,.05);
}

button.dash-metric{
  cursor:pointer;
}

.dash-metric > span:last-child{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.dash-metric small{
  color:#7890a2;
  font-size:12px;
}

.dash-metric strong{
  color:#0d3650;
  font-size:25px;
}

.dash-metric-icon{
  width:45px;
  height:45px;
  min-width:45px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:19px;
  font-weight:800;
}

.dash-metric-icon.blue{
  background:#eaf5fd;
  color:#1486d2;
}

.dash-metric-icon.green{
  background:#e8f8f5;
  color:#1fa88c;
}

.dash-metric-icon.amber{
  background:#fff2d5;
  color:#ae750a;
}

.dash-due-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:9px;
}

.dash-due-card{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:14px;

  padding:18px;

  background:#fff;

  border:1px solid #dbe6ed;
  border-radius:17px;

  box-shadow:0 5px 18px rgba(8,47,73,.04);
}

.dash-due-card.warning{
  border-color:#efc66d;
  background:#fffaf0;
}

.dash-due-icon{
  width:45px;
  height:45px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:13px;

  background:#fff0c8;

  font-size:22px;
}

.dash-due-card > div:last-child{
  display:flex;
  flex-direction:column;
}

.dash-due-card small{
  color:#718a9c;
}

.dash-due-card strong{
  margin-top:3px;

  color:#147bd1;
  font-size:25px;
}

.dash-due-card span{
  margin-top:5px;

  color:#173b52;
  font-size:13px;
}

.dash-due-card em{
  margin-top:5px;

  color:#8197a7;
  font-size:10px;
  font-style:normal;
}

.dash-settings-link{
  margin:5px 0 18px;

  border:0;
  background:transparent;

  padding:0;

  color:#147bd1;
  font-weight:800;

  cursor:pointer;
}

.dash-maintenance-card{
  width:100%;

  display:grid;
  grid-template-columns:48px 1fr 25px;
  align-items:center;
  gap:13px;

  padding:18px;

  background:#fff;

  border:1px solid #dbe6ed;
  border-radius:17px;

  text-align:left;

  cursor:pointer;
}

.dash-maintenance-card.warning{
  border-color:#efc66d;
  background:#fffaf0;
}

.dash-maint-icon{
  width:43px;
  height:43px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:13px;

  background:#fff0c8;

  font-size:21px;
}

.dash-maintenance-card > span:nth-child(2){
  display:flex;
  flex-direction:column;
  gap:3px;
}

.dash-maintenance-card strong{
  color:#173b52;
  font-size:16px;
}

.dash-maintenance-card small{
  color:#7890a2;
}

.dash-maintenance-card b{
  color:#44687f;
  font-size:21px;
}

@media(max-width:900px){

  .dash-metrics{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:700px){

  .dash-next-booking{
    grid-template-columns:1fr;
  }

  .dash-metrics{
    grid-template-columns:1fr 1fr;
    gap:9px;
  }

  .dash-metric{
    min-height:104px;
    padding:13px;
    gap:9px;
  }

  .dash-metric-icon{
    width:37px;
    height:37px;
    min-width:37px;
  }

  .dash-metric strong{
    font-size:20px;
  }

  .dash-due-grid{
    grid-template-columns:1fr;
  }

}

/* ===== DASHBOARD PARITY 902 CSS END ===== */

/* ============================================================
   BILLING MEMBER PAYMENTS v950
   ============================================================ */

.billing-member-payment-section{
  margin-top:24px;
}

.billing-payment-section-head{
  margin-bottom:14px;
}

.billing-payment-section-head h2{
  margin:3px 0 4px;
  color:#12384f;
}

.billing-payment-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:14px;
}

.billing-payment-card{
  padding:18px;

  background:#fff;

  border:1px solid #dfe8ef;
  border-radius:18px;

  box-shadow:
    0 5px 18px rgba(8,47,73,.05);
}

.billing-payment-member{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  margin-bottom:15px;
}

.billing-payment-member > div:first-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.billing-payment-member small{
  color:#8398a7;
  font-size:10px;
}

.billing-payment-member strong{
  color:#12384f;
  font-size:16px;
}

.billing-total-badge,
.billing-payment-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;

  font-weight:800;
}

.billing-total-badge{
  padding:6px 9px;
  font-size:10px;
}

.billing-payment-status{
  padding:5px 8px;
  font-size:9px;
  letter-spacing:.05em;
}

.billing-total-badge.paid,
.billing-payment-status.paid{
  background:#e7f7ef;
  color:#177952;
}

.billing-total-badge.owing,
.billing-payment-status.owing{
  background:#fff3d9;
  color:#966512;
}

.billing-component{
  padding:14px;

  border:1px solid #e4ebf0;
  border-radius:14px;

  background:#fafcfd;
}

.billing-component + .billing-component{
  margin-top:10px;
}

.billing-component-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;

  margin-bottom:12px;
}

.billing-component-title > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.billing-component-title strong{
  color:#143a52;
  font-size:13px;
}

.billing-component-title small{
  color:#8095a4;
  font-size:10px;
}

.billing-component-lines{
  display:flex;
  flex-direction:column;
}

.billing-component-lines > div,
.billing-component-total{
  display:flex;
  justify-content:space-between;
  gap:14px;

  padding:7px 0;

  color:#617b8d;
  font-size:11px;
}

.billing-component-lines strong,
.billing-component-total strong{
  color:#173b52;
}

.billing-credit{
  color:#17825b !important;
}

.billing-component-total{
  margin-top:4px;
  padding-top:10px !important;

  border-top:1px solid #dfe7ed;

  font-weight:800;
}

.billing-component-total.standalone{
  margin:0;
  padding:8px 0 !important;
  border-top:0;
}

.billing-paid-detail,
.billing-owing-detail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  margin-top:11px;
  padding-top:11px;

  border-top:1px solid #dfe7ed;
}

.billing-paid-detail > strong{
  color:#177952;
}

.billing-owing-detail > strong{
  color:#986418;
}

.billing-paid-detail small{
  width:100%;

  color:#7a909f;
  font-size:9px;
}

.billing-fixed-summary{
  border-color:#dbe8f0;
}

@media(max-width:900px){

  .billing-payment-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:700px){

  .billing-payment-card{
    padding:14px;
  }

  .billing-payment-member{
    align-items:flex-start;
  }

  .billing-paid-detail,
  .billing-owing-detail{
    align-items:stretch;
  }

  .billing-paid-detail button,
  .billing-owing-detail button{
    width:100%;
  }

}

/* ============================================================
   END BILLING MEMBER PAYMENTS v950
   ============================================================ */

.billing-paid-controls{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #e6edf2;
}

.billing-paid-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
}

.billing-paid-row + .billing-paid-row{
  border-top:1px solid #edf2f5;
}

.billing-paid-row > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.billing-paid-row strong{
  color:#163b53;
  font-size:12px;
}

.billing-paid-row small{
  color:#7a91a1;
  font-size:10px;
}

@media(max-width:700px){
  .billing-paid-row{
    align-items:flex-start;
  }

  .billing-paid-row button{
    min-width:92px;
  }
}


/* ============================================================
   FLIGHT HOBBS SAFETY v980
   ============================================================ */

.flight-start-warning{
  margin:18px 0 14px;
  padding:18px;

  display:flex;
  flex-direction:column;
  gap:6px;

  border:2px solid #72bff0;
  border-radius:16px;

  background:#eef8ff;
}

.flight-start-warning small{
  color:#47758f;

  font-size:10px;
  font-weight:900;
  letter-spacing:1.3px;
}

.flight-start-warning strong{
  color:#087ed1;

  font-size:34px;
  line-height:1.05;
  font-weight:900;
}

.flight-start-warning span{
  color:#55778b;

  font-size:11px;
  line-height:1.45;
}

.flight-hours-summary-prominent{
  border:1px solid #d8e8f2;
  background:#f8fbfd;
}

.flight-hours-summary-prominent strong{
  font-size:22px;
}

.flight-calculated-hours{
  margin-top:8px;
  padding:11px 13px;

  border-radius:11px;

  background:#eaf5fd;

  color:#50758b;
}

.flight-calculated-hours strong{
  color:#087ed1;
  font-size:16px;
}


@media(max-width:700px){

  .flight-start-warning strong{
    font-size:30px;
  }

}


/* ============================================================
   END FLIGHT HOBBS SAFETY v980
   ============================================================ */



/* ============================================================
   BOOKING EDIT v990
   ============================================================ */

.booking-card-actions-v990{
  display:flex;
  align-items:center;
  gap:8px;

  margin-top:10px;
}

.booking-edit-v990{
  min-height:40px;

  padding:9px 16px;

  border:0;
  border-radius:12px;

  background:#e8f4ff;
  color:#147bc5;

  font-weight:800;
  font-size:12px;

  cursor:pointer;
}

.booking-card-actions-v990 .booking-cancel{
  margin:0;
}

.booking-edit-note{
  margin-top:16px;
  padding:12px 14px;

  border-radius:12px;

  background:#eef7fd;

  color:#607f92;

  font-size:11px;
  line-height:1.5;
}


@media(max-width:700px){

  .booking-card-actions-v990{
    width:100%;
  }

  .booking-edit-v990,
  .booking-card-actions-v990 .booking-cancel{
    flex:1;
  }
}


/* ============================================================
   END BOOKING EDIT v990
   ============================================================ */



/* ============================================================
   MANUAL FLIGHT HOBBS v991
   ============================================================ */

.manual-flight-hobbs-v991{
  margin:18px 0;
  padding:16px;

  border:1px solid #d7e6ef;
  border-radius:16px;

  background:#f7fbfd;
}

.manual-flight-hobbs-head-v991{
  margin-bottom:15px;
}

.manual-flight-hobbs-head-v991 strong{
  display:block;

  color:#082f49;

  font-size:15px;
  font-weight:900;
}

.manual-flight-hobbs-head-v991 small{
  display:block;

  margin-top:4px;

  color:#6e8798;

  font-size:11px;
  line-height:1.45;
}

.manual-flight-total-v991{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:12px;
  padding:11px 13px;

  border-radius:11px;

  background:#e8f4fc;
}

.manual-flight-total-v991 span{
  color:#638095;
}

.manual-flight-total-v991 strong{
  color:#087ed1;

  font-size:19px;
  font-weight:900;
}


/* ============================================================
   END MANUAL FLIGHT HOBBS v991
   ============================================================ */



/* ============================================================
   GROUNDED BOOKING STATUS v1000
   ============================================================ */

.booking-pending-v1000{

  display:inline-flex;

  width:max-content;
  max-width:100%;

  margin-bottom:7px;

  padding:6px 9px;

  border-radius:10px;

  background:#fff3d8;

  color:#956313;

  font-size:10px;
  line-height:1.2;

  font-weight:900;

  letter-spacing:.25px;
}


/*
 * Give pending bookings a subtle warning tint
 * without making them look cancelled.
 */

.day-booking-card:has(
  .booking-pending-v1000
){

  background:
    linear-gradient(
      90deg,
      #fffaf0 0,
      #ffffff 38%
    );
}


/* ============================================================
   END GROUNDED BOOKING STATUS v1000
   ============================================================ */



/* ============================================================
   IPAD / TABLET RESPONSIVE FIX v1011
   ============================================================ */


/*
 * Never allow the application shell itself to make the
 * browser viewport horizontally scroll.
 *
 * Tables retain their own internal horizontal scrolling.
 */

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

.shell{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}


/* ============================================================
   DESKTOP WITH SIDEBAR
   951px and above
   ============================================================ */

@media(min-width:951px){

  /*
   * An older visual-design rule changed .main to:
   *
   *     margin:0 auto
   *     max-width:1100px
   *
   * That accidentally removed the sidebar offset.
   *
   * Make the content area explicitly occupy the space
   * to the right of the sidebar.
   */

  .main{
    margin-left:245px !important;
    margin-right:0 !important;

    width:calc(100% - 245px) !important;
    max-width:none !important;

    min-width:0 !important;

    padding-left:28px;
    padding-right:28px;

    overflow:visible;
  }


  /*
   * Prevent grid children from forcing their parent wider
   * than the available content area.
   */

  .main > *,
  .panel,
  .cards,
  .dash-next-booking,
  .dash-metrics,
  .dash-due-grid,
  .dash-maintenance-card{
    min-width:0;
    max-width:100%;
  }


  .dash-metric,
  .dash-due-card{
    min-width:0;
  }


  .dash-metric > span:last-child,
  .dash-due-card > div:last-child{
    min-width:0;
  }

}


/* ============================================================
   IPAD LANDSCAPE / SMALL DESKTOP
   Keep sidebar, but use a narrower version.
   ============================================================ */

@media(min-width:951px) and (max-width:1180px){

  .sidebar{
    width:210px;
    padding-left:12px;
    padding-right:12px;
  }


  .sidebar .brand-lockup{
    padding-left:7px;
    padding-right:7px;
  }


  .sidebar .brand-lockup strong{
    font-size:16px;
  }


  .sidebar .nav button,
  .nav button{
    padding-left:12px;
    padding-right:10px;
  }


  .main{
    margin-left:210px !important;

    width:calc(100% - 210px) !important;

    padding-left:20px;
    padding-right:20px;
  }


  /*
   * Three dashboard cards are too tight once the sidebar
   * consumes part of an iPad landscape viewport.
   */

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


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


  .dash-metric{
    padding:15px;
    gap:11px;
  }


  .dash-metric strong{
    font-size:22px;
  }

}


/* ============================================================
   TABLET / IPAD PORTRAIT
   Existing <=950px rules hide the sidebar and use bottom nav.
   Make sure the main content is genuinely viewport-width.
   ============================================================ */

@media(max-width:950px){

  .sidebar{
    display:none !important;
  }


  .main{
    margin-left:0 !important;
    margin-right:0 !important;

    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;
  }


  .main > *,
  .panel,
  .dash-next-booking,
  .dash-metrics,
  .dash-due-grid{
    min-width:0;
    max-width:100%;
  }


  /*
   * Bottom navigation may contain several items,
   * but it must not expand the page itself.
   */

  .mobile-nav{
    max-width:100vw;
  }

}


/* ============================================================
   END IPAD / TABLET RESPONSIVE FIX v1011
   ============================================================ */



/* ============================================================
   IPAD PORTRAIT / TABLET RECORD CARDS v1012
   701px - 950px
   ============================================================ */

@media(min-width:701px) and (max-width:950px){

  html,
  body,
  .shell,
  .main{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }


  .main{
    padding:
      0
      22px
      105px !important;
  }


  /*
   * Keep tablet header comfortably inside viewport.
   */

  .topbar{
    margin:
      0
      -22px
      24px !important;

    padding:
      28px
      28px
      26px !important;
  }


  /*
   * Panels must never force page wider.
   */

  .panel{
    width:100%;
    max-width:100%;
    min-width:0;
  }


  /*
   * Desktop tables do not fit portrait iPad well,
   * especially Members with long email addresses.
   *
   * Convert each row into a record card.
   */

  .table-wrap{
    width:100%;
    max-width:100%;
    overflow:visible !important;
  }


  .table-wrap table{
    display:block;

    width:100% !important;
    min-width:0 !important;

    border-collapse:separate;
  }


  .table-wrap thead{
    display:none;
  }


  .table-wrap tbody{
    display:grid;
    gap:14px;

    width:100%;
  }


  .table-wrap tbody tr{
    display:grid;

    width:100%;

    padding:
      12px
      18px;

    border:
      1px solid
      #dfe8ef;

    border-radius:
      17px;

    background:#fff;

    box-shadow:
      0
      5px
      16px
      rgba(8,47,73,.05);
  }


  .table-wrap tbody td{
    display:grid;

    grid-template-columns:
      140px
      minmax(0,1fr);

    gap:16px;

    width:100%;
    min-width:0;

    padding:
      11px
      0 !important;

    border:0;
    border-bottom:
      1px solid
      #e7edf3;

    font-size:15px;

    overflow-wrap:anywhere;
    word-break:break-word;
  }


  .table-wrap tbody td:last-child{
    border-bottom:0;
  }


  .table-wrap tbody td::before{
    content:
      attr(data-label);

    min-width:0;

    color:#7890a2;

    font-size:11px;
    font-weight:800;

    letter-spacing:.09em;
    text-transform:uppercase;
  }


  /*
   * Blank action column doesn't need an empty label.
   */

  .table-wrap tbody td[data-label=""]{
    display:flex;

    justify-content:flex-end;
    align-items:center;

    gap:8px;
  }


  .table-wrap tbody td[data-label=""]::before{
    display:none;
  }


  /*
   * Long member email addresses are the main problem
   * in the current screenshot.
   */

  .table-wrap a,
  .table-wrap td{
    max-width:100%;
    overflow-wrap:anywhere;
  }


  /*
   * Keep buttons sensible on tablet cards.
   */

  .table-wrap .actions{
    width:100%;

    justify-content:flex-end;
  }


  /*
   * Dashboard cards:
   * two across is comfortable on iPad portrait.
   */

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


  .dash-due-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr))
      !important;
  }


  /*
   * Bottom nav must remain fixed but never widen page.
   */

  .mobile-nav{
    left:0 !important;
    right:0 !important;

    width:100% !important;
    max-width:100vw !important;

    overflow:hidden !important;
  }


  .mobile-nav > button{
    min-width:0 !important;
  }

}


/* ============================================================
   END IPAD PORTRAIT FIX v1012
   ============================================================ */



/* ============================================================
   FLIGHT FUEL RECEIPTS v1025
   ============================================================ */

.flight-receipt-section-v1025{
  margin:20px 0;
  padding:16px;
  border:1px solid #dce6ed;
  border-radius:16px;
  background:#f8fbfd;
}

.flight-receipt-head-v1025{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.flight-receipt-head-v1025 strong{
  display:block;
  font-size:15px;
}

.flight-receipt-head-v1025 small{
  display:block;
  margin-top:3px;
  color:#6c8497;
}

.flight-receipt-head-v1025 > span{
  font-size:22px;
}

.flight-receipt-picker-v1025{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  margin:0;
  border:1.5px dashed #9db4c3;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
}

.flight-receipt-picker-v1025:hover{
  border-color:#617f92;
}

.flight-receipt-camera-v1025{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:12px;
  background:#edf4f8;
  font-size:20px;
}

.flight-receipt-picker-v1025 strong{
  display:block;
}

.flight-receipt-picker-v1025 small{
  display:block;
  margin-top:3px;
  color:#6c8497;
}

.flight-receipt-selected-v1025{
  margin-top:10px;
  font-size:13px;
}

.flight-receipt-selected-v1025 > div{
  padding-top:5px;
  color:#526d7d;
  overflow-wrap:anywhere;
}

.flight-receipt-status-v1025{
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  color:#49697c;
}

.flight-receipt-none-v1025{
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:10px;
  background:#fff;
  color:#71899b;
  font-size:13px;
}

.flight-receipt-existing-v1025{
  display:grid;
  gap:8px;
  margin-bottom:12px;
}

.flight-receipt-file-v1025{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid #e1e9ee;
  border-radius:12px;
  background:#fff;
}

.flight-receipt-open-v1025{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
  padding:4px;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

.flight-receipt-open-v1025 strong,
.flight-receipt-open-v1025 small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.flight-receipt-open-v1025 small{
  margin-top:2px;
  color:#71899b;
}

.flight-receipt-icon-v1025{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:10px;
  background:#edf4f8;
  font-size:12px;
  font-weight:800;
}

.flight-receipt-badge-v1025{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border:1px solid #c9d9e3;
  border-radius:999px;
  background:#f4f9fc;
  font:inherit;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}

.flight-receipt-missing-v1025{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 9px;
  border-radius:999px;
  background:#fff4dc;
  color:#8a5a00;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.flight-receipt-viewer-v1025{
  display:grid;
  gap:12px;
}

.flight-receipt-flight-v1025{
  display:grid;
  gap:3px;
  padding:14px;
  border-radius:12px;
  background:#f4f8fb;
}

.flight-receipt-flight-v1025 span,
.flight-receipt-flight-v1025 small{
  color:#647d8d;
}

.flight-receipt-view-card-v1025{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:14px;
  border:1px solid #dce6ed;
  border-radius:13px;
  background:#fff;
  text-align:left;
  cursor:pointer;
}

.flight-receipt-view-card-v1025 > span:nth-child(2){
  flex:1;
  min-width:0;
}

.flight-receipt-view-card-v1025 strong,
.flight-receipt-view-card-v1025 small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.flight-receipt-view-card-v1025 small{
  margin-top:3px;
  color:#71899b;
}

.flight-receipt-view-icon-v1025{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:11px;
  background:#edf4f8;
  font-size:12px;
  font-weight:800;
}

.flight-receipt-arrow-v1025{
  font-size:26px;
  color:#8499a7;
}


@media(max-width:700px){

  .flight-receipt-section-v1025{
    padding:14px;
    margin:16px 0;
  }

  .flight-receipt-picker-v1025{
    padding:13px;
  }

  .flight-receipt-file-v1025{
    align-items:stretch;
  }

  .flight-receipt-file-v1025 .btn{
    align-self:center;
  }

  .flight-receipt-badge-v1025,
  .flight-receipt-missing-v1025{
    font-size:11px;
  }

}


/* ===== FLIGHT FUEL RECEIPTS v1025 END ===== */


/* ===== LANDING CHARGE DATE v1026 ===== */

.landing-charge-date-v1026{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-left:8px;
}

.landing-charge-date-v1026 label{
  margin:0;
  font-size:11px;
  color:#6c8497;
}

.landing-charge-date-v1026 input{
  min-width:145px;
}

.landing-charge-date-display-v1026{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  font-size:13px;
}

.landing-charge-date-display-v1026 span{
  color:#6c8497;
}


@media(max-width:700px){

  .landing-charge-editor{
    flex-wrap:wrap;
  }

  .landing-charge-date-v1026{
    width:100%;
    margin:8px 0 0;
  }

  .landing-charge-date-v1026 input{
    width:100%;
  }

}


/* ===== LANDING CHARGE DATE v1026 END ===== */


/* ============================================================
   ITEMISED LANDING FEES v1027
   ============================================================ */

.landing-fee-items-v1027{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

.landing-fee-item-v1027{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 14px;
  padding:13px;
  border:1px solid #dfe8ef;
  border-radius:12px;
  background:#fff;
}

.landing-fee-item-v1027.is-paid{
  opacity:.82;
}

.landing-fee-main-v1027{
  min-width:0;
}

.landing-fee-date-v1027{
  font-size:12px;
  color:#6c8497;
  margin-bottom:3px;
}

.landing-fee-place-v1027{
  font-weight:700;
  color:#12344e;
}

.landing-fee-note-v1027{
  margin-top:3px;
  font-size:12px;
  color:#71899b;
  overflow-wrap:anywhere;
}

.landing-fee-right-v1027{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
}

.landing-fee-right-v1027 > strong{
  font-size:16px;
}

.landing-fee-paid-v1027{
  grid-column:1 / -1;
  font-size:11px;
  color:#71899b;
}

.landing-fee-actions-v1027{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding-top:3px;
}

.landing-fee-empty-v1027{
  padding:14px 0;
  color:#71899b;
  font-size:13px;
}

.landing-fee-add-row-v1027{
  padding-top:12px;
}

.landing-fee-member-v1027{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:16px;
  padding:12px;
  background:#f4f8fb;
  border-radius:10px;
}

.landing-fee-member-v1027 small{
  color:#71899b;
}


@media(max-width:700px){

  .landing-fee-item-v1027{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .landing-fee-actions-v1027 .btn{
    flex:1 1 auto;
  }

}


/* ===== ITEMISED LANDING FEES v1027 END ===== */


/* ============================================================
   MAIN BILLING LANDING FEES v1028
   ============================================================ */

.landing-fee-heading-v1028{
  align-items:center;
}

.landing-fees-main-v1028{
  width:100%;
  padding:4px 0 8px;
}

.landing-fee-totals-v1028{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #e4edf3;
}

.landing-fee-totals-v1028 > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:5px 0;
}

.landing-fee-totals-v1028 span{
  color:#71899b;
}

.landing-fee-totals-v1028 strong{
  color:#12344e;
}

.landing-add-v1028{
  width:100%;
  margin-top:12px;
}

@media(max-width:700px){

  .landing-fees-main-v1028{
    padding-top:8px;
  }

  .landing-fee-item-v1027{
    padding:12px;
  }

  .landing-fee-actions-v1027{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .landing-fee-actions-v1027 .btn{
    width:100%;
  }

  .landing-fee-actions-v1027
  [data-delete-landing-fee]{
    grid-column:1 / -1;
  }

  .landing-add-v1028{
    min-height:48px;
    font-size:15px;
  }

}

/* ===== MAIN BILLING LANDING FEES v1028 END ===== */


/* ============================================================
   LANDING FEE QUANTITY v1029
   ============================================================ */

.landing-fee-calc-grid-v1029{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:12px;
}

.landing-fee-calc-grid-v1029 > div{
  min-width:0;
}

.landing-fee-live-total-v1029{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin:14px 0;
  padding:13px 14px;
  border-radius:11px;
  background:#eef6fb;
}

.landing-fee-live-total-v1029 span{
  color:#71899b;
}

.landing-fee-live-total-v1029 strong{
  color:#082f49;
  font-size:18px;
}

.landing-fee-math-v1029{
  display:block;
  color:#71899b;
  font-size:11px;
  white-space:nowrap;
}


@media(max-width:420px){

  .landing-fee-calc-grid-v1029{
    grid-template-columns:95px minmax(0,1fr);
  }

}

/* ===== LANDING FEE QUANTITY v1029 END ===== */