:root{font-family:Arial,Helvetica,sans-serif;color:#102b53;background:#f1f4f8;font-synthesis:none}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:#f1f4f8;color:#102b53}
.page{width:min(1152px,calc(100% - 32px));margin:0 auto;padding:24px 0 60px}
.page-heading,.section-heading,.calendar-heading,.calendar-filters,.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.page-heading{margin:0 0 20px}.page-heading h1{font-size:clamp(1.55rem,3vw,1.9rem)}
.page-heading h1,.page-heading p{margin:0}.page-heading p{color:#52667c;margin-top:7px}
h1,h2,h3,p{overflow-wrap:anywhere}h2{font-size:1.23rem;margin:0 0 9px}h3{font-size:1.03rem}
.panel{background:white;border:1px solid #e0e7ef;border-radius:16px;padding:20px;margin:0 0 17px;box-shadow:0 2px 8px #0e30550a}
.panel p{line-height:1.5}.muted,.hint{color:#52667c;font-size:.92rem}.hint{margin:0}
.signed-in{color:#52667c;font-size:.88rem;margin:0 0 14px}
.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.btn{min-height:44px;padding:10px 15px;border:1px solid #afc1d5;border-radius:10px;background:#fff;color:#102b53;font:700 .92rem Arial,Helvetica,sans-serif;cursor:pointer;text-decoration:none}
.btn.primary{background:#174b91;border-color:#174b91;color:#fff}
.btn.primary:hover{background:#103c77}.btn.outline:hover{background:#edf3fa}
.btn:disabled{cursor:not-allowed;opacity:.5}.btn:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid #d9ab13;outline-offset:3px}
.message{margin:0 0 14px;padding:12px 14px;border:1px solid #b5c8df;border-radius:10px;background:#eaf1fa}
.message:empty{display:none}
.message.error{border-color:#db9da2;background:#fff1f1;color:#8e161d}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:17px}
.stat{background:white;border:1px solid #dfe7ef;border-radius:14px;padding:15px 18px}
.stat span{display:block;font-size:.85rem;color:#52667c}.stat strong{display:block;margin:6px 0 4px;font-size:1.17rem}.stat small{font-size:.8rem;color:#53647a}
.calendar-heading{margin-bottom:16px}.calendar-heading p{margin:0}.calendar-heading h2{margin:0 0 4px}
.calendar-actions .btn{min-width:46px}
.calendar-filters{margin-bottom:15px}
.calendar-filters h3{margin:0;font-size:1.13rem}
label{display:block;font-weight:700;font-size:.9rem;color:#102b53}
input:not([type=checkbox]),select,textarea{display:block;width:100%;min-height:44px;margin:6px 0 0;padding:10px 11px;border-radius:9px;border:1px solid #a8b9ce;color:#102b53;background:#fff;font:400 .98rem Arial,Helvetica,sans-serif}
textarea{resize:vertical}
.calendar-filters label{display:flex;align-items:center;gap:10px}
.calendar-filters select{width:200px;margin:0}
.calendar-scroll{overflow-x:auto}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;min-width:545px}
.calendar-weekday{text-align:center;padding:7px 3px;font-size:.85rem;font-weight:700;color:#53647a}
.day{display:flex;flex-direction:column;align-items:stretch;gap:5px;text-align:left;min-height:103px;background:#fcfdff;border:1px solid #d8e3ee;color:#102b53;border-radius:9px;padding:8px 7px;cursor:pointer;font:inherit;overflow:hidden}
.day:hover{border-color:#174b91;background:#f0f6ff}
.day.outside{opacity:.42}.day.selected{border:2px solid #174b91;padding:7px 6px;background:#eef5ff}
.day.today .day-number{background:#f8ce42;border-radius:99px;padding:2px 7px;align-self:flex-start}
.day-number{font-weight:800;font-size:.88rem}
.day-entry{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;padding:4px 5px;background:#e6effc;color:#123a68;font-size:.73rem}
.day-entry.party{background:#fff1c7;color:#5c4704}.day-entry.other{background:#e9f0eb;color:#25533f}
.day-more{font-size:.74rem;color:#52667c}
.booking-list{display:grid;gap:11px}
.booking-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;border:1px solid #dae4ef;background:#fcfdff;border-radius:12px}
.booking-card h3{margin:0 0 5px}
.booking-card p{margin:0;font-size:.91rem;color:#52667c}
.booking-card .btn{flex:0 0 auto}
.empty{color:#52667c;margin:2px 0}
.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.package-grid>div{background:#f8fafd;border:1px solid #e0e7ef;border-radius:11px;padding:12px 14px}
.package-grid strong{color:#102b53}.package-grid p{margin:5px 0 0;font-size:.87rem;color:#53647a}
.guidance>.muted{margin:14px 0 0}
.dialog{width:min(690px,calc(100vw - 24px));max-height:94vh;overflow:auto;padding:24px;background:#fff;color:#102b53;border:0;border-radius:16px;box-shadow:0 10px 42px #0005}
.dialog::backdrop{background:#071b38a8}
.dialog-heading{align-items:flex-start;margin-bottom:16px}
.dialog-heading h2{margin:4px 0 0}
.close{border:0;background:#eff3f7;color:#102b53;min-width:38px;min-height:38px;font-size:1.4rem;border-radius:8px;cursor:pointer}
.booking-form{display:grid;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
#packageField{padding:12px;background:#f8fafd;border:1px solid #dfe9f4;border-radius:11px}
#packageField .hint{margin-top:8px}
.reservation-hint{margin:0;background:#eaf1fa;border-radius:9px;padding:11px 13px;font-size:.89rem}
.repeat-box{border:1px solid #d7e2ef;background:#f9fbff;padding:13px;border-radius:11px}
.repeat-box fieldset{margin:12px 0 0;border:1px solid #d8e3ee;border-radius:8px}
.repeat-box legend{font-weight:700;font-size:.86rem}
.check-field,.weekday-options label{display:flex;gap:7px;align-items:center}
.check-field input,.weekday-options input{width:18px;height:18px;margin:0;accent-color:#174b91}
.weekday-options{display:flex;gap:9px;flex-wrap:wrap}
.weekday-options label{font-weight:500;white-space:nowrap;padding:6px 3px}
#repeatFields{margin-top:12px}
#repeatFields .hint{margin-top:10px}
.form-actions{justify-content:flex-end;margin-top:10px}
.detail-info{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
.detail-info div{padding:10px;background:#f8fafd;border-radius:9px}
.detail-info strong,.detail-info span{display:block}
.detail-info strong{font-size:.8rem;color:#52667c;margin-bottom:5px}
.detail-info span{font-size:.95rem}
.detail-section{border-top:1px solid #e0e7ef;padding-top:15px;margin-top:15px}
.task{display:flex;align-items:flex-start;gap:10px;margin:11px 0;font-size:.94rem}
.task input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:#174b91}
.payment-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.payment-row select{width:190px;margin:0}
.role-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #e0e7ef;padding:12px 0;flex-wrap:wrap}
.role-row:first-child{border-top:none}
.role-row strong{overflow-wrap:anywhere}
.role-row .actions{gap:15px}
.role-row label{display:flex;align-items:center;gap:7px}
.role-row input[type=checkbox]{width:19px;height:19px;margin:0}
footer{text-align:center;color:#52667c;font-size:.85rem;padding:12px 0 24px}
@media(max-width:740px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.package-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start}.form-row{grid-template-columns:1fr}}
@media(max-width:570px){.page{width:calc(100% - 24px);padding:16px 0 40px}.panel{padding:15px}.summary-grid{grid-template-columns:1fr;gap:8px}.stat{padding:12px 15px}.dialog{padding:15px}.calendar-filters{align-items:stretch}.calendar-filters label{justify-content:space-between}.calendar-filters select{width:min(230px,100%)}.booking-card{align-items:stretch;flex-direction:column}.booking-card .btn{align-self:flex-start}.detail-info{grid-template-columns:1fr}.role-row{align-items:flex-start;flex-direction:column}}
@media print{header,nav,.actions,footer,.role-row button{display:none!important}.panel{box-shadow:none}.calendar{min-width:0}.page{width:100%}}

/* Phones keep the seven-day calendar within the viewport; dots indicate bookings.
   Selecting a date reveals full titles and package details in the list below. */
@media(max-width:600px){
 .calendar{min-width:0;gap:3px}
 .calendar-weekday{font-size:.72rem;padding:5px 0}
 .day{min-height:68px;padding:5px 3px;gap:3px;border-radius:7px}
 .day.selected{padding:4px 2px}
 .day-number{font-size:.8rem}
 .day-entry{height:9px;width:9px;flex:none;border-radius:50%;padding:0;font-size:0;overflow:hidden}
 .day-more{font-size:.6rem;line-height:1.1}
}

/* Booking contacts use the same guided form hierarchy as other fields. */
.booking-contact-fields{
 margin:0;padding:14px;border:1px solid #d7e2ef;border-radius:11px;
 background:#f8fafd;display:grid;gap:13px;min-width:0
}
.booking-contact-fields legend{
 padding:0 5px;font-weight:800;font-size:.98rem;color:#102b53
}
.booking-contact-fields .hint{margin:0}
.booking-contact-fields .form-row{gap:13px}

/* Colour key: categories are text-labelled as well as colour-coded. */
.tag-party-bronze{--tag-color:#AA713C;--tag-bg:#F6E7D7;--tag-ink:#60370D}
.tag-party-silver{--tag-color:#64748B;--tag-bg:#E8EDF2;--tag-ink:#34435B}
.tag-party-gold{--tag-color:#B38A16;--tag-bg:#FFF2BF;--tag-ink:#654A00}
.tag-crossfit{--tag-color:#285DB6;--tag-bg:#E4EDFF;--tag-ink:#143F80}
.tag-pilates{--tag-color:#8457B5;--tag-bg:#F1E8FA;--tag-ink:#523477}
.tag-bounce-fitness{--tag-color:#11877D;--tag-bg:#DDF6F0;--tag-ink:#085F58}
.tag-football{--tag-color:#BC542F;--tag-bg:#FBE8DC;--tag-ink:#7C341C}
.tag-forest-school{--tag-color:#386E49;--tag-bg:#DCF1DE;--tag-ink:#254E32}
.tag-school-event{--tag-color:#3B5B83;--tag-bg:#E8F0FA;--tag-ink:#213E65}
.tag-holiday-club{--tag-color:#4E7B3E;--tag-bg:#EAF5E4;--tag-ink:#34592A}
.tag-regular-letting{--tag-color:#617487;--tag-bg:#ECF1F5;--tag-ink:#354A60}
.tag-other{--tag-color:#68747D;--tag-bg:#EDF0F2;--tag-ink:#37434B}
.calendar-legend{display:flex;gap:7px 13px;flex-wrap:wrap;margin:4px 0 15px;
 border-top:1px solid #e1e7ed;padding-top:12px}
.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:.77rem;
 font-weight:700;color:#243c57;padding:4px 1px}
.legend-dot{display:inline-block;width:12px;height:12px;border-radius:3px;
 flex:0 0 12px;background:var(--tag-color);border:1px solid #001c2833}
.day-entry[class*="tag-"]{background:var(--tag-bg);color:var(--tag-ink);
 border-left:3px solid var(--tag-color)}
.booking-card[class*="tag-"]{border-left:5px solid var(--tag-color)}
.booking-label{display:inline-block;padding:4px 8px;margin-bottom:8px;
 background:var(--tag-bg);color:var(--tag-ink);border-radius:6px;
 font-weight:700;font-size:.76rem}
#activityField{background:#f8fafd;border:1px solid #d7e2ef;border-radius:11px;
 padding:13px;display:grid;gap:8px}
#activityField .hint{margin:0}
@media(max-width:600px){
 .day-entry[class*="tag-"]{background:var(--tag-color);border-left:0;
 width:10px;height:10px;border-radius:50%;font-size:0;padding:0;overflow:hidden}
 .calendar-legend{gap:4px 10px}
 .legend-item{font-size:.71rem}
}