.management { background: #f6f8f9; }
.management-header { background: white; border-bottom: 1px solid var(--line); padding: 22px 5%; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.management-header img { width: 210px; height: auto; }
.management-header span { color: var(--muted); margin-right: auto; font-size: .9rem; }
.management-main { width: min(1180px,90%); margin: 36px auto 80px; }
.management h1 { font-size: clamp(1.8rem,4vw,2.6rem); letter-spacing: -.03em; }
.management h2 { font-size: 1.5rem; }
.management h3 { font-size: 1.1rem; }
.management-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin: 24px 0; }
.management-title p { color: var(--muted); }
.management-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin: 30px 0; }
.management-stat { background: white; border: 1px solid var(--line); padding: 22px; border-radius: 8px; }
.management-stat strong { display: block; font-size: 2rem; font-weight: 500; }
.management-stat span { color: var(--muted); font-size: .85rem; }
.management-tabs { display: flex; flex-wrap: wrap; gap: 28px; border-bottom: 1px solid var(--line); padding: 12px 0 20px; margin-bottom: 32px; }
.management-section { margin-top: 60px; scroll-margin-top: 25px; }
.management-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 24px; align-items: start; }
.management-card,.booking-card { background: white; padding: 26px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.management-card { display: grid; gap: 20px; }
.booking-list,.availability-list { display: grid; gap: 18px; }
.booking-card header { display: flex; justify-content: space-between; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.booking-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.booking-details p { overflow-wrap: anywhere; margin: 0; }
.booking-details small { display: block; color: var(--muted); margin-bottom: 5px; }
.booking-notes { display: grid; gap: 10px; margin-top: 24px; }
.booking-notes .btn { justify-self: start; }
.status-pill { display: inline-block; padding: 6px 12px; border-radius: 30px; font-size: .75rem; font-weight: 600; background: #edf1f3; color: var(--navy); }
.status-confirmed { background: #e6f2ea; color: #28603e; }
.status-payment_review { background: #fcebea; color: #9b2222; }
.status-awaiting_payment { background: #fff3d8; color: #795b13; }
.empty-state { border: 1px dashed var(--line); border-radius: 8px; padding: 32px; color: var(--muted); background: white; }
.login-card { max-width: 540px; margin: 80px auto; background: white; padding: 40px; border: 1px solid var(--line); border-radius: 10px; }
.login-card form { display: grid; gap: 24px; margin-top: 28px; }
.status-main { max-width: 760px; margin: 60px auto; width: 90%; }
.status-main .management-card { margin: 24px 0; }
.status-main dl { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.status-main dt { color: var(--muted); }
.status-main dd { margin: 0; overflow-wrap: anywhere; }
.status-main #extra-time form { display: grid; gap: 14px; min-width: 0; }
.status-main #extra-time select { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); font: inherit; font-size: 1rem; }
.status-main #extra-time select:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.status-main #extra-time form .btn { width: 100%; white-space: normal; }
.status-main #extra-time label:has(input[type="checkbox"]) { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.status-main #extra-time input[type="checkbox"] { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--navy); }
@media(max-width:800px) { .management-grid { grid-template-columns:1fr; } .booking-details { grid-template-columns:1fr 1fr; } .management-stats { grid-template-columns:1fr 1fr; } }
@media(max-width:480px) { .management-header img { width:150px; } .management-header span { font-size:.75rem; } .management-header .btn { padding:10px 15px; } .management-card,.booking-card,.login-card { padding:22px; } .booking-details { grid-template-columns:1fr; } .status-main dl { grid-template-columns:1fr; gap:8px; } .status-main dd { margin-bottom:14px; } }

/* Cancellation terms page, booking-form summary and staff cancellation review */
.terms-table { width:100%; border-collapse:collapse; margin:0 0 20px; }
.terms-table th,.terms-table td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.terms-table th { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cancellation-summary ul { margin:8px 0; padding-left:20px; }
.cancellation-summary li { margin-bottom:4px; }
.cancel-panel { margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--mist); }
.cancel-panel h4 { margin:0 0 10px; }
.cancel-facts { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin:12px 0; }
.cancel-facts dt { color:var(--muted); } .cancel-facts dd { margin:0; font-weight:600; }
.status-pill.status-cancelled { background:#e6e9ec; color:#3a4750; }
.attention-note { margin:10px 0 0; padding:8px 12px; border-left:3px solid #d4a514; background:#fff6d6; color:#5a4700; }