body{

margin:0;

font-family:Arial, Helvetica, sans-serif;

background:#f3f5f7;

}

header{

background:#283593;

color:white;

padding:20px;

}

nav{

margin-top:10px;

}

nav a{

color:white;

text-decoration:none;

margin-right:20px;

font-weight:bold;

}

main{

padding:30px;

}

table{

width:100%;

border-collapse:collapse;

background:white;

}

th{

background:#3949ab;

color:white;

padding:10px;

}

td{

padding:10px;

border-bottom:1px solid #ddd;

}

form{

max-width:700px;

background:white;

padding:20px;

}

form.inline-form{
display:inline;
background:transparent;
padding:0;
}

label{

display:block;

margin-top:15px;

font-weight:bold;

}

input,
select,
textarea{

width:100%;

padding:10px;

box-sizing:border-box;

margin-top:5px;

}

button{

margin-top:20px;

padding:12px 20px;

background:#3949ab;

color:white;

border:none;

cursor:pointer;

}

button:hover{

background:#1a237e;

}

.link-button{
margin:0 0 0 8px;
padding:0;
background:none;
color:#283593;
text-decoration:underline;
}

.link-button:hover{
background:none;
color:#1a237e;
}

footer{

padding:20px;

text-align:center;

background:#ddd;

margin-top:40px;

}

.checkbox{

display:flex;

align-items:center;

gap:10px;

margin-top:20px;

}

.checkbox input{

width:auto;

}

.availability-status{
min-height:1.25em;
margin:10px 0 0;
font-weight:bold;
}

.availability-status p{
margin:0;
}

.availability-status ul{
margin:6px 0 0;
padding-left:22px;
font-weight:normal;
}

.availability-status.available{
color:#1b5e20;
}

.availability-status.unavailable{
color:#b71c1c;
}

.availability-status.checking{
color:#455a64;
}

.availability-status.warning{
color:#8a5a00;
}

.outdoor-form{
max-width:none;
padding:0;
margin:0 0 18px;
background:transparent;
}

.outdoor-form button{
margin:0;
background:#558b2f;
}

.outdoor-form button:hover{
background:#33691e;
}

.booking-list-wrap{
overflow-x:auto;
}

.booking-list{
min-width:850px;
}

.checklist-form{
display:flex;
justify-content:center;
max-width:none;
margin:0;
padding:0;
background:transparent;
}

.checklist-checkbox{
width:22px;
height:22px;
margin:0;
accent-color:#2e7d32;
cursor:pointer;
}

.checklist-done{
display:block;
color:#2e7d32;
font-size:22px;
font-weight:bold;
line-height:22px;
text-align:center;
}

.calendar-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:12px;
}

.calendar-heading h2,
.calendar-heading p{
margin:0;
}

.calendar-controls{
display:flex;
align-items:center;
gap:8px;
max-width:none;
padding:0;
background:transparent;
}

.calendar-controls input{
margin:0;
}

.calendar-controls button{
margin:0;
}

.calendar-nav{
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:4px;
background:#3949ab;
color:white;
font-size:28px;
line-height:1;
text-decoration:none;
}

.calendar-legend{
display:flex;
align-items:center;
gap:8px;
margin:0 0 20px;
}

.legend,
.room-color{
display:inline-block;
width:12px;
height:12px;
border-radius:50%;
}

.legend.busy{ background:#ffebee; border:1px solid #c62828; }
.legend.free{ background:#e8f5e9; border:1px solid #2e7d32; }

.room-day,
.room-month{
background:white;
border-radius:6px;
overflow:hidden;
box-shadow:0 1px 3px rgba(0,0,0,.12);
}

.room-day h3,
.room-month h3{
display:flex;
align-items:center;
gap:8px;
margin:0;
padding:14px 16px;
font-size:18px;
border-bottom:1px solid #ddd;
}

.time-slots{
padding:12px;
}

.time-slot{
display:flex;
justify-content:space-between;
gap:12px;
padding:10px 12px;
margin-bottom:8px;
border-left:4px solid;
border-radius:3px;
}

.time-slot:last-child{
margin-bottom:0;
}

.time-slot a{
color:inherit;
}

.free-slot{
background:#e8f5e9;
border-color:#2e7d32;
}

.busy-slot{
background:#ffebee;
border-color:#c62828;
}

.month-weekdays,
.month-tile-grid{
display:grid;
grid-template-columns:repeat(7, minmax(0, 1fr));
}

.month-weekdays{
border-bottom:1px solid #ddd;
background:#f5f5f5;
}

.month-weekdays span{
padding:7px 2px;
text-align:center;
font-size:12px;
font-weight:bold;
}

.month-calendar{
background:white;
border-radius:6px;
overflow:hidden;
box-shadow:0 1px 3px rgba(0,0,0,.12);
}

.month-tile{
min-height:190px;
padding:7px;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
background:#fff;
}

.month-tile:nth-child(7n){
border-right:0;
}

.empty-tile{
background:#f1f1f1;
}

.day-number{
display:block;
margin-bottom:4px;
font-size:12px;
font-weight:bold;
}

.free-label{
color:#2e7d32;
font-size:12px;
}

.room-statuses{
display:grid;
gap:4px;
}

.room-status{
display:flex;
align-items:center;
gap:4px;
padding:3px;
font-size:11px;
line-height:1.2;
overflow-wrap:anywhere;
}

.room-free{
background:#e8f5e9;
color:#2e7d32;
}

.month-booking{
margin-bottom:4px;
padding:3px;
border-left:3px solid rgba(0,0,0,.35);
background:var(--booking-color, #ffab91);
color:#1a1a1a;
font-size:11px;
line-height:1.2;
overflow-wrap:anywhere;
}

.month-booking a{
color:inherit;
font-weight:bold;
}

.booking-room{
display:block;
font-weight:bold;
}

.booking-category{
display:block;
font-size:10px;
font-style:italic;
}

.category-color{
display:inline-block;
width:16px;
height:16px;
margin-right:6px;
vertical-align:middle;
border:1px solid #555;
border-radius:3px;
}

.month-booking small{
display:block;
margin-top:2px;
}

@media (max-width:650px){
.calendar-heading{ align-items:flex-start; flex-direction:column; }
.calendar-controls{ width:100%; }
.calendar-controls input{ flex:1; }
.month-tile{ min-height:125px; padding:4px; }
.room-status, .month-booking{ font-size:9px; }
.month-booking{ font-size:10px; }
}