* { box-sizing: border-box; }
body { display: flex; min-height: 100vh; margin: 0; background: #f6f7fb; color: #172033; font: 14px -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.login-screen { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; background: #f6f7fb; }.login-screen.hidden { display: none; }.login-card { display: grid; width: min(400px, calc(100vw - 40px)); gap: 14px; padding: 32px; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(27, 42, 71, .13); }.login-card h1 { margin: 0; font-size: 24px; }.login-card p { margin: 0; color: #738096; }.login-eyebrow { color: #3555e8 !important; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }.login-card label { display: grid; gap: 7px; color: #536075; }.login-card input { width: 100%; }.login-card small { color: #8a93a4; line-height: 1.5; }.login-error { min-height: 18px; color: #c03434 !important; }.logout { color: #677388; }
aside { width: 220px; padding: 28px 16px; background: #111a2e; color: #fff; }
h1 { margin: 0 12px 35px; font-size: 20px; }
aside button { width: 100%; margin: 3px 0; padding: 13px 12px; border: 0; border-radius: 8px; background: transparent; color: #cdd5e4; text-align: left; font: inherit; }
aside button.selected, aside button:hover { background: #25345a; color: #fff; }
main { flex: 1; min-width: 0; padding: 0 42px; }
header { display: flex; align-items: center; justify-content: space-between; height: 80px; border-bottom: 1px solid #e6e8ef; }
header h2 { margin: 0; font-size: 22px; }
.panel { display: none; padding: 30px 0; }.panel.active { display: block; }
.toolbar, .calendar-toolbar, .nav-group { display: flex; gap: 12px; align-items: center; }.toolbar { margin-bottom: 24px; }.toolbar strong { margin-right: auto; font-size: 16px; }
button, input { border: 1px solid #d9deea; border-radius: 7px; background: #fff; padding: 9px 13px; font: inherit; } button { cursor: pointer; }
.primary { border-color: #2563eb; background: #2563eb; color: #fff; }.danger-outline { border-color: #f4b4b4; background: #fff; color: #b42323; }
.calendar-toolbar { justify-content: space-between; margin-bottom: 14px; }.nav-group strong { margin-left: 10px; font-size: 16px; }.calendar-note { margin: 0 0 16px; color: #748097; }
.week-calendar { display: grid; grid-template-columns: 64px repeat(7, minmax(112px, 1fr)); grid-template-rows: 52px auto; overflow: auto; border: 1px solid #e2e6ed; border-radius: 12px; background: #fff; box-shadow: 0 5px 20px rgba(28, 43, 69, .04); }
.time-corner, .day-head { position: sticky; top: 0; z-index: 4; min-height: 52px; padding: 9px; border-bottom: 1px solid #e5e8ef; background: #f8f9fc; }.time-corner { left: 0; z-index: 5; color: #8992a4; font-size: 12px; }.day-head { text-align: center; }.day-head span, .day-head b { display: block; }.day-head span { color: #7b8599; font-size: 12px; }.day-head b { margin-top: 3px; font-size: 16px; }.day-head.today b { display: inline-grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #2563eb; color: #fff; }
.time-axis { position: sticky; left: 0; z-index: 3; border-right: 1px solid #e5e8ef; background: #fff; }.time-label { height: 26px; padding: 1px 7px; border-bottom: 1px solid #f0f2f6; color: #8a93a4; font-size: 11px; }
.day-column { position: relative; min-width: 112px; height: 1248px; border-right: 1px solid #e9edf3; background: repeating-linear-gradient(to bottom, transparent 0, transparent 25px, #edf0f4 26px); }.closed-overlay { position: absolute; z-index: 1; top: 0; right: 0; left: 0; background: rgba(204,210,220,.56); pointer-events: none; }.closed-overlay.all-day { bottom: 0; display: grid; place-items: center; color: #8992a4; font-size: 12px; }
.event { position: absolute; z-index: 2; right: 5px; left: 5px; overflow: hidden; padding: 4px 6px; border-radius: 5px; font-size: 11px; line-height: 1.35; cursor: pointer; }.event b, .event span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.booking { border-left: 3px solid #3b82f6; background: #dce9ff; color: #1e4f9d; }.block { border-left: 3px solid #ef4444; background: #fee2e2; color: #9e3030; }.selection-preview { position: absolute; z-index: 3; right: 5px; left: 5px; display: none; border: 1px dashed #dc2626; border-radius: 4px; background: rgba(239,68,68,.25); pointer-events: none; }.current-line { position: absolute; z-index: 4; right: 0; left: 0; height: 2px; background: #ef4444; pointer-events: none; }.current-line span { position: absolute; top: -9px; left: 2px; border-radius: 3px; background: #ef4444; color: #fff; padding: 1px 3px; font-size: 10px; }
table { width: 100%; overflow: hidden; border-collapse: collapse; border-radius: 12px; background: #fff; } th, td { padding: 16px; border-bottom: 1px solid #edf0f4; text-align: left; } th { color: #6b7280; font-weight: 500; }
.toolbar-note { color: #7b8599; font-size: 13px; }.orders-table-wrap { overflow-x: auto; }.orders-table-wrap table { min-width: 950px; }.introduction-cell { min-width: 260px; max-width: 420px; white-space: pre-wrap; line-height: 1.55; }
.actions-cell { display: flex; gap: 8px; }.actions-cell button { padding: 6px 10px; }.switch-row { display: flex !important; align-items: center; gap: 8px; }
dialog { width: min(620px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(15,23,42,.25); } dialog::backdrop { background: rgba(15,23,42,.4); } dialog form, .event-card { padding: 24px; }.modal-header { display: flex; justify-content: space-between; gap: 24px; }.modal-header h3 { margin: 0; font-size: 19px; }.modal-header p { margin: 8px 0 18px; color: #718096; }.icon-button { border: 0; background: transparent; color: #64748b; padding: 0; font-size: 26px; }.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.hours-fields { border-top: 1px solid #edf0f4; }.hours-row { display: grid; grid-template-columns: 26px 56px 1fr 20px 1fr; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf0f4; }.hours-row input[type=time] { min-width: 0; padding: 7px; }
.event-card h3 { margin: 9px 0 0; font-size: 20px; }.event-type { display: inline-block; border-radius: 99px; padding: 4px 8px; font-size: 12px; }.event-type.booking { background: #dce9ff; color: #1e4f9d; }.event-type.block { background: #fee2e2; color: #9e3030; }.event-details { margin: 20px 0; padding: 0; }.event-details div { padding: 13px 0; border-bottom: 1px solid #edf0f4; }.event-details dt { color: #7b8599; font-size: 12px; }.event-details dd { margin: 5px 0 0; color: #1f2937; font-size: 14px; }.edit-event-fields { display: grid; gap: 14px; }.edit-event-fields label { display: grid; gap: 7px; color: #536075; font-size: 13px; }.edit-event-fields input, .edit-event-fields select { width: 100%; }
@media (max-width: 900px) { aside { width: 170px; } main { padding: 0 20px; }.calendar-toolbar { align-items: flex-start; flex-direction: column; }.week-calendar { grid-template-columns: 56px repeat(7, minmax(100px,1fr)); } }