:root{
  --blue:#173b68;
  --blue2:#2b6098;
  --blueLight:#dce9f5;
  --gray:#edf1f4;
  --gray2:#d4dce4;
  --ink:#202b38;
  --muted:#6d7986;
  --white:#fff;
  --existing:#173b68;
  --new:#73a8d8;
  --shadow:0 7px 22px rgba(28,51,78,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--gray);color:var(--ink)}
button,input,select{font:inherit}
.site-header{background:linear-gradient(135deg,#173b68,#2b6098);color:#fff;padding:16px 18px}
.header-inner{max-width:1180px;margin:auto;display:flex;align-items:center;gap:14px}
.logo{width:68px;height:68px;object-fit:contain;flex:0 0 68px}
.brand{flex:1}
.unit{font-size:10px;letter-spacing:1.4px;font-weight:700;opacity:.85}
.brand h1{margin:4px 0 2px;font-size:24px}
.period{font-size:11px;opacity:.9}
.header-link{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:9px 12px;font-size:11px;font-weight:800}
.container{max-width:980px;margin:auto;padding:20px}
.wide-container{max-width:1500px;margin:auto;padding:18px}
.intro{margin-bottom:15px}
.intro h2{margin:0 0 4px;font-size:21px}
.intro p{margin:0;color:var(--muted);font-size:13px}
.card,.table-card{background:#fff;border:1px solid var(--gray2);border-radius:13px;box-shadow:var(--shadow);padding:17px;margin-bottom:15px}
.step-title{font-size:11px;font-weight:800;letter-spacing:.8px;color:var(--blue);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.step-title span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:11px}
.search,.select{width:100%;border:1px solid #c8d1da;border-radius:8px;padding:12px 13px;background:#fff;outline:none}
.search:focus,.select:focus{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(43,96,152,.09)}
.results{display:none;margin-top:7px;border:1px solid var(--gray2);border-radius:8px;overflow:hidden;max-height:260px;overflow-y:auto}
.result{padding:10px 11px;border-bottom:1px solid #e7ebef;cursor:pointer}
.result:last-child{border-bottom:0}
.result:hover{background:#f6f9fc}
.result strong{display:block;font-size:13px}
.result small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.selected-person{margin-top:11px;padding:11px;border:1px solid #c7d9e9;background:#f3f8fc;border-radius:9px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.selected-person strong{display:block}
.selected-person span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.selected-person button{border:1px solid #c7d0da;background:#fff;color:var(--blue);font-weight:800;font-size:10px;border-radius:7px;padding:7px 9px;cursor:pointer}
.hidden{display:none!important}

.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:10px;margin-bottom:10px}
.swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px;border:1px solid #bec8d2}
.swatch.existing{background:var(--existing)}
.swatch.new{background:var(--new)}
.swatch.open{background:#fff}

.calendar-shell{border:1px solid var(--gray2);border-radius:9px;overflow:hidden}
.weekdays,.calendar{display:grid;grid-template-columns:repeat(7,1fr)}
.weekdays{background:#e6ebef;border-bottom:1px solid var(--gray2)}
.weekdays div{padding:9px 2px;text-align:center;font-size:9px;font-weight:800;color:#596675}
.day,.blank{min-height:76px;border-right:1px solid #e0e5ea;border-bottom:1px solid #e0e5ea}
.day:nth-child(7n),.blank:nth-child(7n){border-right:0}
.blank{background:#f7f8f9}
.day{background:#fff;border-top:0;border-left:0;padding:8px;text-align:left;cursor:pointer;position:relative;color:var(--ink)}
.day:hover{background:#f7fafc}
.day.existing{background:var(--existing);color:#fff}
.day.new{background:var(--new);color:#fff}
.day-number{font-size:19px;font-weight:800}
.day-meta{display:block;margin-top:16px;font-size:9px;color:var(--muted)}
.day.existing .day-meta,.day.new .day-meta{color:#eef5fb}
.day.existing::after{content:"BOOKED";position:absolute;right:6px;top:6px;font-size:7px;font-weight:900;letter-spacing:.4px}
.day.new::after{content:"NEW";position:absolute;right:6px;top:6px;font-size:7px;font-weight:900;letter-spacing:.4px}
.hint{margin-top:8px;color:var(--muted);font-size:10px}

.booked-list{display:grid;gap:7px}
.booked-person{border:1px solid #e0e6eb;border-radius:8px;padding:9px 10px}
.booked-person strong{display:block;font-size:12px}
.booked-person span{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.empty{color:var(--muted);font-size:12px}
.review-label{font-size:10px;font-weight:800;color:var(--muted);margin-bottom:7px}
.review-label.second{margin-top:13px}
.selected-dates{display:flex;flex-wrap:wrap;gap:6px}
.date-chip{border-radius:999px;padding:6px 9px;font-size:10px;font-weight:800}
.date-chip.existing{background:#e0e8f0;color:var(--blue)}
.date-chip.new{background:#d9ecfb;color:#225a8d}
.submit-btn{width:100%;margin-top:15px;padding:13px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-weight:800;cursor:pointer}
.submit-btn:disabled{opacity:.4;cursor:not-allowed}
.message{margin-top:9px;text-align:center;font-size:12px}
.message.ok{color:#2a6840}.message.error{color:#a33b3b}

.toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 320px auto;gap:10px;margin-bottom:12px}
.table-card{padding:0;overflow:hidden}
.table-scroll{overflow:auto;max-height:calc(100vh - 190px)}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:10px}
th,td{border-right:1px solid #dfe4e9;border-bottom:1px solid #dfe4e9;padding:7px 8px;white-space:nowrap;background:#fff}
thead th{position:sticky;top:0;z-index:5;background:#dfe6ed;color:#32404e;font-size:9px;text-transform:uppercase}
th.sticky,td.sticky{position:sticky;z-index:3}
th.col-squadron,td.col-squadron{left:0;min-width:225px;max-width:225px}
th.col-designation,td.col-designation{left:225px;min-width:260px;max-width:260px}
th.col-name,td.col-name{left:485px;min-width:300px;max-width:300px}
thead th.sticky{z-index:8;background:#cfd9e2}
tbody td.sticky{background:#f9fbfc}
td.booked-cell{background:#d8e8f6;color:var(--blue);font-weight:900;text-align:center}
th.date-col,td.date-col{min-width:58px;text-align:center}
tr:hover td{background:#f5f8fb}
tr:hover td.sticky{background:#edf3f7}

@media(max-width:700px){
  .site-header{padding:12px 10px}
  .header-inner{gap:9px}
  .logo{width:50px;height:50px;flex-basis:50px}
  .brand h1{font-size:17px}
  .unit{font-size:8px}.period{font-size:9px}
  .header-link{padding:7px 8px;font-size:9px}
  .container{padding:11px 5px 18px}
  .wide-container{padding:10px 4px}
  .card{padding:11px;border-radius:9px;margin-bottom:9px}
  .weekdays div{padding:7px 0;font-size:8px}
  .day,.blank{min-height:47px}
  .day{padding:0;display:flex;align-items:center;justify-content:center;text-align:center}
  .day-number{font-size:17px}
  .day-meta,.day.existing::after,.day.new::after{display:none}
  .toolbar{grid-template-columns:1fr}
  .table-scroll{max-height:calc(100vh - 210px)}
  th.col-squadron,td.col-squadron{min-width:150px;max-width:150px}
  th.col-designation,td.col-designation{left:150px;min-width:180px;max-width:180px}
  th.col-name,td.col-name{left:330px;min-width:180px;max-width:180px}
  th,td{font-size:9px;padding:6px}
}

.csv-btn{
  border:0;
  border-radius:8px;
  padding:12px 16px;
  background:#173b68;
  color:#fff;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

.csv-btn:hover{
  background:#2b6098;
}

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


.mobile-table-nav{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  background:#ffffff;
  border:1px solid #d4dce4;
  border-radius:8px;
  padding:8px;
}

.mobile-table-nav span{
  flex:1;
  text-align:center;
  font-size:10px;
  color:#6d7986;
}

.mobile-table-nav button{
  width:42px;
  height:36px;
  border:0;
  border-radius:7px;
  background:#173b68;
  color:#ffffff;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
}

@media(max-width:700px){
  .mobile-table-nav{
    display:flex;
    position:sticky;
    top:0;
    z-index:20;
  }
}

@media(max-width:700px){

  th.col-squadron,
  td.col-squadron,
  th.col-designation,
  td.col-designation{
    display:none;
  }

  th.col-name,
  td.col-name{
    left:0 !important;
    min-width:220px !important;
    max-width:220px !important;
  }

}

.existing-booking{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.remove-booking-btn{
  border:0;
  border-radius:999px;
  background:#a33b3b;
  color:#fff;
  padding:4px 7px;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.remove-booking-btn:hover{
  background:#812d2d;
}

@media(max-width:700px){

  .remove-booking-btn{
    padding:5px 8px;
    font-size:9px;
  }

}


.group-col{
  min-width:110px;
  text-align:left;
}

@media(max-width:700px){
  th.group-col,
  td.group-col{
    display:none;
  }
}


/* ============================================================
   BOOKING PASSWORD + REMOVE BOOKING
   ============================================================ */

.booking-existing-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.booking-remove-btn{
    border:0;
    border-radius:999px;
    padding:4px 7px;
    background:#a93838;
    color:#fff;
    font-size:8px;
    font-weight:900;
    cursor:pointer;
}

.booking-remove-btn:hover{
    background:#842b2b;
}

.booking-password-overlay{
    position:fixed;
    inset:0;
    z-index:9999;

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

    padding:18px;

    background:rgba(10,20,35,.72);
}

.booking-password-box{
    width:min(420px,100%);

    background:#fff;

    border-radius:14px;

    padding:20px;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.30);
}

.booking-password-box h3{
    margin:0 0 8px;

    color:#173b68;
}

.booking-password-box p{
    margin:0 0 14px;

    color:#6d7986;

    font-size:12px;

    line-height:1.5;
}

.booking-password-box label{
    display:block;

    margin-bottom:5px;

    font-size:11px;

    font-weight:800;

    color:#354353;
}

.booking-password-box input{
    width:100%;

    padding:12px;

    border:1px solid #c8d1da;

    border-radius:8px;

    font-size:16px;

    outline:none;
}

.booking-password-box input:focus{
    border-color:#2b6098;

    box-shadow:
        0 0 0 3px
        rgba(43,96,152,.12);
}

.booking-password-actions{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:14px;
}

.booking-password-actions button{
    border:0;

    border-radius:8px;

    padding:11px;

    font-weight:800;

    cursor:pointer;
}

.booking-password-cancel{
    background:#e7ebef;

    color:#374452;
}

.booking-password-confirm{
    background:#173b68;

    color:#fff;
}

.booking-group-title{
    margin:12px 0 6px;

    font-size:12px;

    font-weight:900;

    color:#173b68;
}

.booking-unit-title{
    margin:8px 0 5px;

    font-size:10px;

    font-weight:800;

    color:#6d7986;
}

@media(max-width:700px){

    .booking-remove-btn{
        padding:5px 8px;

        font-size:8px;
    }

}

/* Dark font color for attendance vote counters */
.ojt-vote-buttons .ojt-vote-btn .ojt-vote-count {
    color: #172033 !important;
    font-weight: 900 !important;
}