:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang HK","Noto Sans TC",sans-serif;color:#24313b;background:#fff;color-scheme:light;
--blue:#2468d9;--ink:#1e2935;--muted:#73808e;--line:#e7eaf0;--bg:#f9fbff;--booked:#e8f0fe;--booked-ink:#2057aa;--pending:#fff2d9;--pending-ink:#94610c}
*{box-sizing:border-box}
body{margin:0;min-width:320px}button,select,input{font:inherit}
button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #5b95ed;outline-offset:2px}
.topbar{height:68px;padding:0 27px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);background:white}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;white-space:nowrap}
.brand-icon{width:38px;height:38px;display:grid;place-items:center;color:var(--blue);background:#edf4ff;border-radius:12px}
.brand-name{font-size:16px;font-weight:450;letter-spacing:-.01em}.brand-name b{font-weight:760}
.test-label{font-size:10px;letter-spacing:.09em;font-weight:750;color:#768b9f;background:#eff3f8;border-radius:6px;padding:4px 6px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:19px}
.header-link{display:flex;align-items:center;gap:7px;text-decoration:none;font-size:13px;font-weight:620;color:#4e6273}
.header-link:hover{color:var(--blue)}
.primary-button{background:#2468d9;color:white;font-weight:750;text-decoration:none;border-radius:11px;min-height:42px;padding:9px 18px;display:inline-flex;align-items:center;gap:5px;box-shadow:0 3px 10px #2468d925;white-space:nowrap}
.primary-button:hover{background:#1c57b7}
.plus{font-size:22px;line-height:1;font-weight:400}
.demo-strip{display:flex;align-items:center;justify-content:center;gap:8px;min-height:29px;padding:5px 14px;font-size:11px;color:#6c7886;background:#f7f9fc;border-bottom:1px solid var(--line)}
.demo-dot{width:6px;height:6px;border-radius:50%;background:#8ca9d7}
.app-layout{display:flex;min-height:calc(100vh - 98px)}
.sidebar{width:226px;flex:0 0 226px;border-right:1px solid var(--line);padding:27px 14px 18px 20px;display:flex;flex-direction:column;gap:12px}
.side-heading{font-size:11px;color:#788696;font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin-bottom:9px}
.side-head select{display:block;width:100%;border:1px solid #d8e0e9;border-radius:10px;background:#fff;padding:11px 32px 11px 10px;min-height:44px;color:#293845;font-size:13px;font-weight:700}
.room-heading{margin:18px 0 0}
.room-filters{display:flex;flex-direction:column;gap:3px}
.room-filter{width:100%;text-align:left;border:0;background:transparent;color:#465564;border-radius:10px;padding:11px 12px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:580;min-height:43px}
.room-filter:hover{background:#f2f6fd}
.room-filter.active{background:#eaf2ff;color:#2058ae;font-weight:750}
.room-dot{width:9px;height:9px;border-radius:3px;background:#94b5df;flex:none}
.room-filter.active .room-dot{background:var(--blue)}
.mini-loading{font-size:12px;color:var(--muted);padding:8px}
.side-bottom{margin-top:auto;border-top:1px solid var(--line);padding:15px 5px 0;color:var(--muted);font-size:11px}
.side-bottom p{font-size:11px;margin-top:20px}
.legend{display:flex;flex-wrap:wrap;gap:12px}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend-dot{width:9px;height:9px;display:inline-block;border-radius:3px}
.legend-dot.approved{background:#3e83dc}.legend-dot.pending{background:#efba51}
.main-view{flex:1;min-width:0;padding:20px 22px 30px;background:#fff}
.controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.date-nav{display:flex;align-items:center;gap:11px;min-width:0}
.today-button{border:1px solid #dce2e8;color:#42596b;background:white;border-radius:8px;font-size:13px;font-weight:650;min-height:36px;padding:7px 13px}
.today-button:hover,.icon-button:hover{background:#f2f7ff}
.icon-button{border:0;border-radius:50%;background:transparent;font-size:27px;font-weight:380;width:34px;height:34px;line-height:1;color:#667580;display:grid;place-items:center}
#range-title{font-size:22px;letter-spacing:-.03em;margin:0 0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:770}
.view-toggle{display:flex;background:#f3f5f8;border-radius:9px;padding:3px;gap:2px}
.view-toggle button{min-width:50px;border:0;border-radius:7px;background:transparent;color:#60717e;padding:7px 13px;font-size:13px;font-weight:700}
.view-toggle button[aria-pressed="true"]{background:white;color:#244c84;box-shadow:0 1px 5px #152c451c}
.calendar-body{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:white;min-height:450px}
.calendar-message{padding:32px;text-align:center;font-size:14px;color:var(--muted)}
.calendar-message[hidden]{display:none}
.calendar-scroll{overflow:auto;max-height:calc(100vh - 205px);position:relative;scrollbar-color:#d8e1ed transparent}
.calendar-scroll[hidden],.agenda[hidden]{display:none!important}
.cal-inner{min-width:820px}
.day-heads{display:grid;grid-template-columns:64px repeat(7,minmax(0,1fr));position:sticky;top:0;z-index:6;background:white;border-bottom:1px solid var(--line)}
.day-head{border:0;border-left:1px solid #edf0f5;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:73px;color:#5a6977}
.day-head:hover{background:#f7faff}
.day-head .day-name{font-size:11px;font-weight:650;letter-spacing:.03em}
.day-head .day-number{font-size:20px;font-weight:700;line-height:1.2;min-width:33px;text-align:center;border-radius:50%;padding:4px}
.day-head.today .day-number{background:#2566d2;color:white}
.day-heads .empty-head{min-height:73px;display:flex;align-items:center;justify-content:center;color:#a1abb8;font-size:11px}
.hour-grid{display:grid;grid-template-columns:64px repeat(7,minmax(0,1fr));position:relative}
.time-axis{height:1008px;position:relative;background:#fff}
.time-label{position:absolute;left:0;right:0;color:#9aa4b2;text-align:center;font-size:11px;transform:translateY(-50%)}
.time-label:first-child{transform:none}
.day-lane{height:1008px;position:relative;border-left:1px solid #e9edf3;background:repeating-linear-gradient(to bottom,transparent 0,transparent 17px,#f3f5f9 17px,#f3f5f9 18px,transparent 18px,transparent 35px,#edf0f5 35px,#edf0f5 36px,transparent 36px,transparent 53px,#f3f5f9 53px,#f3f5f9 54px,transparent 54px,transparent 71px,#e5ebf2 71px,#e5ebf2 72px)}
.slot-button{position:absolute;width:100%;height:18px;left:0;border:0;background:transparent;padding:0;z-index:1}
.slot-button:hover,.slot-button:focus-visible{background:#e6f1ff8c}
.slot-button:hover::after,.slot-button:focus-visible::after{content:"＋";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:15px;color:#2767cf;font-weight:800}
.cal-event{position:absolute;z-index:3;left:3px;right:3px;padding:7px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:0;border-left:3px solid #4686e8;border-radius:6px;overflow:hidden;background:var(--booked);color:var(--booked-ink);box-shadow:0 1px 1px #1d2e400b}
.cal-event:hover{filter:brightness(.97);box-shadow:0 2px 8px #315b9326}
.cal-event.pending{background:var(--pending);color:var(--pending-ink);border-color:#e6b344}
.cal-event .event-clock{font-size:11px;line-height:1.1;font-weight:760;white-space:nowrap}
.cal-event .event-name{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cal-event .event-state{font-size:10px;opacity:.74}
.cal-event.compact{padding:4px 6px;gap:1px}.cal-event.compact .event-state{display:none}
.cal-event.tiny .event-name,.cal-event.tiny .event-state{display:none}
.single-view .cal-inner{min-width:0}
.single-view .day-heads,.single-view .hour-grid{grid-template-columns:64px minmax(0,1fr)}
.single-view .day-heads .day-head{grid-column:2}
.single-view .day-lane{min-width:0}
.mobile-days{display:none}
.agenda{padding:12px 16px 22px}
.agenda-date{font-size:14px;font-weight:760;margin:3px 0 14px}
.agenda-group{display:flex;flex-direction:column;gap:9px}
.agenda-event{display:flex;align-items:center;gap:13px;min-height:70px;background:#eff5ff;color:#234f89;border:0;border-left:4px solid #4789e5;border-radius:12px;padding:12px;text-align:left;width:100%}
.agenda-event.pending{background:#fff7e7;color:#9a6b1d;border-left-color:#ecc261}
.agenda-event .agenda-time{font-size:13px;font-weight:800;width:95px;flex:none}
.agenda-event .agenda-info{font-size:13px;font-weight:740}
.agenda-event .agenda-status{font-size:11px;margin-top:3px;font-weight:500;opacity:.78}
.agenda-empty{padding:48px 15px;text-align:center;color:#93a0ae;font-size:13px}
.agenda-add{border:1px dashed #8caee1;background:#f8fbff;border-radius:12px;min-height:57px;margin-top:12px;padding:10px;font-size:14px;color:#2763b8;font-weight:700;width:100%}
.agenda-add:hover{background:#eff6ff}
.dialog-card{width:min(420px,calc(100vw - 32px));max-height:85vh;overflow:auto;border:1px solid #e1e8f0;border-radius:17px;padding:0;box-shadow:0 18px 75px #14263f36;color:var(--ink)}
.dialog-card::backdrop{background:#18334c77}
.dialog-head{padding:19px 21px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.dialog-head h2{margin:0;font-size:17px;font-weight:800}
.dialog-close{width:29px;height:29px;border-radius:50%;background:#f3f6fa;color:#647586;font-size:22px;line-height:1;border:0;display:grid;place-items:center}
.dialog-content{padding:18px 21px 24px}
.slot-summary{font-size:17px;font-weight:800;line-height:1.4;margin-bottom:17px}
.slot-room-list{display:flex;flex-direction:column;gap:7px}
.room-choice{min-height:49px;border:1px solid #dce5ee;background:white;border-radius:10px;padding:10px 13px;display:flex;align-items:center;justify-content:space-between;gap:15px;text-align:left;color:#2b455d;font-size:14px;font-weight:720}
.room-choice:hover:not(:disabled){border-color:#4684df;background:#f5f9ff}
.room-choice:disabled{opacity:.5;cursor:not-allowed;background:#f4f5f6}
.room-choice small{font-size:11px;color:#82909f;font-weight:600}
.event-large-time{font-size:24px;font-weight:800;letter-spacing:-.02em}
.event-room{font-size:15px;margin-top:7px;font-weight:650}
.event-status{display:inline-flex;margin-top:17px;border-radius:20px;font-size:12px;font-weight:750;padding:6px 10px;color:#2861b4;background:#e8f1ff}
.event-status.pending{color:#9a6a13;background:#fff4d8}
.noscript{text-align:center;padding:25px;font-size:14px;color:#8b5a12}
@media(max-width:1060px){.sidebar{width:182px;flex-basis:182px;padding:22px 10px}.main-view{padding:18px 14px}.topbar{padding:0 16px}}
@media(max-width:760px){
.topbar{height:59px;padding:0 14px;gap:7px}.brand-name{font-size:14px}.brand-icon{width:32px;height:32px}
.test-label{font-size:9px}.header-link{font-size:12px}.header-link svg{display:none}.top-actions{gap:9px}.admin-link{display:none}
.primary-button{min-height:37px;padding:7px 11px;font-size:13px}
.demo-strip{font-size:10px;padding:6px 11px;text-align:center}
.app-layout{display:block}
.sidebar{width:100%;border-right:0;border-bottom:1px solid var(--line);padding:12px 14px 13px;display:block}
.side-head{display:flex;align-items:center;gap:10px}
.side-head .side-heading{display:none}
.side-head select{max-width:280px;min-height:40px}
.room-heading,.side-bottom{display:none}
.room-filters{display:flex;flex-direction:row;overflow-x:auto;gap:6px;margin-top:11px;padding-bottom:2px;scrollbar-width:none}
.room-filters::-webkit-scrollbar{display:none}
.room-filter{min-height:35px;padding:7px 10px;border:1px solid var(--line);white-space:nowrap;width:auto;flex:none;border-radius:99px;font-size:12px}
.room-filter.active{border-color:#8db7e8}
.room-dot{width:6px;height:6px}
.main-view{padding:14px 11px}
.controls{margin:0 0 13px}.date-nav{gap:3px}.today-button{padding:6px 9px;font-size:12px;min-height:33px}.icon-button{font-size:24px;width:29px;height:31px}
#range-title{font-size:17px;margin-left:4px}.view-toggle button{min-width:34px;padding:6px 7px;font-size:12px}
.calendar-body{border-radius:13px;min-height:350px}
.mobile-days{display:flex;overflow-x:auto;gap:4px;padding-bottom:10px;scrollbar-width:none}
.mobile-day{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;border-radius:10px;background:transparent;border:1px solid transparent;padding:7px 4px;font-size:11px;color:#697688}
.mobile-day b{font-size:16px;color:#2b4050}.mobile-day.selected{background:#eaf2ff;color:#215ba8;border-color:#c7ddfb}
.mobile-day.selected b{color:#205aab}.mobile-day.today:not(.selected) b{color:#2568d8}
.calendar-scroll{max-height:calc(100vh - 268px)}.cal-inner{min-width:770px}
.agenda{min-height:335px}
}
@media(max-width:390px){.brand-name{font-size:12px}.top-actions{gap:5px}.header-link{font-size:11px}.primary-button{padding:6px 9px}}


/* Independent room-list scrolling: large 友愛堂 inventories never stretch the calendar. */
@media(min-width:761px){
 .app-layout{height:calc(100dvh - 98px);min-height:550px;overflow:hidden}
 .sidebar{height:100%;position:sticky;top:0;min-height:0;overflow:hidden}
 .room-filters{min-height:0;flex:1 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c4d3e5 transparent;padding-right:3px}
 .side-head,.room-heading,.side-bottom{flex-shrink:0}
 .main-view{height:100%;overflow:hidden;display:flex;flex-direction:column;min-height:0}
 .controls,.admin-filter-row{flex-shrink:0}
 .calendar-body{flex:1 1 auto;min-height:0;overflow:auto}
 .calendar-scroll{max-height:none;height:100%}
}
.legend-dot.reference{background:#9073c7}
.official-source{display:inline-block;font-size:11px;color:#697896;margin-top:13px;text-decoration:none;line-height:1.5}
.official-source:hover{text-decoration:underline}
.reference-marker{position:absolute;right:3px;z-index:4;left:3px;height:19px;padding:1px 5px;border:1px solid #d4c4ec;border-left:3px solid #9473c4;border-radius:5px;background:#f4effb;color:#6b4b9b;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;font-size:10px;font-weight:700;box-shadow:0 2px 3px #563a800e}
.reference-marker:hover{background:#eadef7}
.agenda-event.reference{background:#f6f0fc;border-color:#9175c0;color:#6b4b93}
.event-status.reference{background:#f1e9fa;color:#7654a2}
.event-activity{font-size:15px;margin-top:11px;color:#36495b;font-weight:750}
.event-applicant{font-size:13px;color:#6b7d90;margin-top:8px}
.event-applicant[hidden]{display:none}
.source-info{color:#738091;font-size:12px;margin:13px 0 0}
.event-action{display:inline-flex;margin-top:14px;padding:10px 13px;border-radius:9px;text-decoration:none;background:#e8f1ff;color:#225aa9;font-size:13px;font-weight:750}
.event-action[hidden],.source-info[hidden],.event-activity[hidden]{display:none}
.event-action:hover{background:#d5e6ff}
.month-grid{min-width:0;height:100%;overflow:auto;display:flex;flex-direction:column}
.month-grid[hidden]{display:none!important}
.month-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:sticky;top:0;z-index:5;border-bottom:1px solid #e7eaf0;background:#f7f9fc}
.month-weekdays span{text-align:center;color:#788799;font-size:12px;font-weight:750;padding:12px 0}
.month-cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(var(--month-weeks,6),minmax(112px,1fr));flex:1 1 auto;min-height:0}
.month-cell{display:flex;flex-direction:column;gap:4px;align-items:stretch;border-right:1px solid #e8edf4;border-bottom:1px solid #e8edf4;min-width:0;padding:5px;overflow:hidden}
.month-cell.outside{background:#fafbfd;opacity:.55}
.month-cell.today{background:#f9fbff}
.month-events{display:flex;flex-direction:column;gap:4px;min-height:0;min-width:0;overflow:hidden;flex:0 1 auto}
.month-event[hidden],.month-more[hidden]{display:none!important}
.month-more{min-height:20px;flex:0 0 auto;cursor:pointer;overflow:hidden;white-space:nowrap}
.month-date{border:0;background:transparent;border-radius:50%;align-self:center;font-size:13px;font-weight:750;color:#607488;min-width:30px;min-height:30px}
.month-date:hover{background:#eaf2ff;color:#235eb2}
.month-cell.today .month-date{background:#286cd4;color:#fff}
.month-event{display:block;max-width:100%;min-height:23px;border:0;border-radius:5px;padding:4px 6px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:700}
.month-event.approved{background:#e3efff;color:#2661ae}
.month-event.pending{background:#fff0cd;color:#98671b}
.month-event.reference{background:#f1e8fa;color:#7253a0}
.month-event:hover{filter:brightness(.96)}
.month-more{border:0;background:transparent;color:#5077a5;text-align:left;font-size:11px;font-weight:700}
.admin-pending{display:inline-flex;align-items:center;gap:7px;background:#fff3d8;color:#8a630b;border-radius:99px;padding:7px 11px;font-size:12px;font-weight:750;text-decoration:none;white-space:nowrap}
.admin-pending b{font-size:12px}
.pending-pulse{width:7px;height:7px;background:#efbe5b;border-radius:50%}
.logout-form{margin:0}
.logout-form button{border:1px solid #e0e6ec;background:white;color:#687b8c;padding:6px 10px;border-radius:8px;font-size:12px;font-weight:650}
.admin-filter-row{display:flex;align-items:center;gap:6px;min-height:35px;margin:0 0 12px}
.admin-filter{border:1px solid #e0e8f1;border-radius:99px;background:white;padding:6px 13px;color:#73869a;font-size:12px;font-weight:700}
.admin-filter.active{background:#e6f0ff;border-color:#bdd4f5;color:#2660ad}
.admin-small-link{font-size:12px;text-decoration:none;color:#5375a1;margin-left:auto;font-weight:700}
@media(max-width:760px){
 .app-layout{height:auto;overflow:visible}
 .sidebar{overflow:hidden}.room-filters{overflow-x:auto;overflow-y:hidden;max-height:none;overscroll-behavior-inline:contain}
 .month-cells{min-height:0;grid-template-rows:repeat(var(--month-weeks,6),minmax(86px,1fr))}
 .month-cell{padding:3px 2px;gap:2px}
 .month-events{gap:2px}
 .month-date{min-width:26px;min-height:25px;font-size:12px}
 .month-event{font-size:9px;min-height:17px;padding:2px 3px}
 .month-weekdays span{padding:8px 0;font-size:11px}
 .admin-pending{padding:6px 9px}
 .admin-filter-row{margin-bottom:8px}
 .top-actions{gap:6px}.header-link{font-size:11px}
 .logout-form{display:none}
 .calendar-body{max-height:none}
}
@media(max-width:400px){.month-event{font-size:8px}.header-link span{display:none}}


/* Stakeholder-specified status colors: approved pale green, pending orange, cancelled grey. */
:root{--booked:#e3f5e8;--booked-ink:#205f43;--pending:#fff0db;--pending-ink:#9a5f11}
.legend-dot.approved{background:#43a56d}
.legend-dot.pending{background:#e9a34d}
.cal-event{border-left-color:#46aa73}
.cal-event.pending{border-left-color:#e59e3d}
.agenda-event{background:#e4f7eb;color:#236345;border-left-color:#49a871}
.agenda-event.pending{background:#fff0db;color:#936016;border-left-color:#e4a44b}
.month-event.approved{background:#e2f6e9;color:#277046}
.month-event.pending{background:#ffedd3;color:#996014}


/* Public calendar date jump and distinct admin area. */
.calendar-date-jump{border:1px solid #d9e4f2;background:white;color:#466183;border-radius:10px;padding:8px;max-width:155px;font-size:13px}
.admin-calendar{background:#f6f3f9}
.admin-calendar .topbar{background:#29223d!important;border-bottom:3px solid #e5b85f!important;color:white}
.admin-calendar .brand-name,.admin-calendar .header-link,.admin-calendar .topbar a{color:#f1eafa!important}
.admin-calendar .brand-icon{background:#e6c77c!important;color:#29223d!important}
.admin-calendar .top-actions .admin-pending{background:#e5b85f!important;color:#322541!important}
.admin-calendar .admin-pending b{color:#322541!important}
.admin-calendar .top-actions .header-link:hover{color:#fbe1a5!important}
.admin-calendar .test-label{background:#5b496f;color:#ffde97}
.admin-calendar .main-view{border-color:#e4dced}
.admin-calendar .view-toggle button[aria-pressed=true]{background:#57419c!important;color:#fff!important}
.admin-calendar .admin-filter.active{background:#6044a1!important;color:#fff!important}
.admin-calendar .room-filter.active{background:#f1eafd!important;color:#5a3c99!important;border-color:#b5a2d3!important}
.admin-calendar .calendar-date-jump{border-color:#d7cbe5}
.v3-all-day{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;font-size:15px;font-weight:800;color:#2d526d}
.v3-all-day input{width:20px;height:20px;min-height:20px}
.v3-all-day small{font-size:12px;color:#798da0;font-weight:500}
.v3-time-field[hidden],.admin-time-field[hidden]{display:none!important}


.all-day-row{display:grid;grid-template-columns:64px repeat(7,minmax(0,1fr));border-bottom:1px solid #dce6f1;background:#fbfcfe;min-height:42px}
.all-day-label{padding:12px 4px;text-align:center;font-size:11px;font-weight:780;color:#73869b}
.all-day-cell{display:flex;flex-direction:column;gap:3px;min-width:0;padding:5px 4px;border-left:1px solid #e9edf3}
.all-day-chip{width:100%;border:0;border-left:3px solid #4baa75;border-radius:6px;padding:8px 5px;text-align:left;background:#e2f5e9;color:#20613f;font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.all-day-chip.pending{background:#fff0d9;border-left-color:#e9a74e;color:#93631c}
.single-view .all-day-row{grid-template-columns:64px minmax(0,1fr)}
.reference-marker{white-space:normal;line-height:1.25;padding:3px 5px}
.calendar-date-jump:focus-visible{outline:2px solid #5a86c9;outline-offset:2px}

/* Side-by-side interval packing: no events may overlap visually. */
.cal-event.reference{background:#f1e8fa;color:#67469a;border-left-color:#9979c8;z-index:4}
.cal-event.reference:hover{background:#e5d8f4}
.cal-event{overflow:hidden;white-space:normal;min-width:0}
.day-lane{min-width:0;position:relative}

/* 06:00–24:00 visual clock: 18 hours × 2 half-hour slots × 30px = 1080px. */
.time-axis,.day-lane{height:1080px}
.day-lane{background:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,#edf1f7 29px,#edf1f7 30px,transparent 30px,transparent 59px,#dfe6f2 59px,#dfe6f2 60px)}
.slot-button{height:30px}

/* Phone-first WEEK agenda: seven complete days visible without a squashed grid. */
.week-agenda-day{margin:0 0 14px;padding:10px 0 14px;border-bottom:1px solid #e2e7ef}
.week-agenda-day.is-today{border-left:3px solid #4389df;padding-left:10px}
.week-agenda-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.week-agenda-header h3{margin:0;font-size:14px;color:#263c57;font-weight:790}
.week-today-badge{font-size:11px;color:#2769b4;background:#e6f2ff;border-radius:20px;padding:3px 8px;margin-left:8px}
.week-agenda-add{width:34px;height:34px;flex:none;border:1px solid #a9caed;background:#eef6ff;color:#2867ac;border-radius:50%;font-size:20px;display:grid;place-items:center}
.week-agenda-empty{padding:5px 12px;color:#8091a3;font-size:12px;margin:0}
.week-agenda-day .agenda-event{margin-bottom:8px;min-height:55px;padding:9px 12px;display:flex;gap:9px}
.week-agenda-day .agenda-event.reference{background:#f5effa;color:#6e5089;border-left:4px solid #a388cb}
.week-agenda-day .agenda-event .agenda-time{width:100px;max-width:45%;line-height:1.35;white-space:normal;font-size:12px}
.week-event-detail{display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left;font-size:12px}
.week-event-detail strong{white-space:normal;overflow-wrap:anywhere;font-size:13px}
.week-event-detail span{color:inherit;opacity:.72;font-size:11px}
@media(max-width:760px){
  .agenda{padding:13px 13px 20px}
  .week-agenda-day{display:block}
  .mobile-days{display:none!important} /* whole week is shown below, no one-day-only filter */
}

/* Responsive period navigation: arrows flank a complete date, controls wrap below. */
.date-nav{flex:1 1 auto;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:4px}
.date-nav .icon-button{width:44px;height:44px;font-size:30px;justify-self:center;border-radius:12px;background:#f4f7fb}
#range-title{text-align:center;white-space:normal;overflow:visible;text-overflow:clip;margin:0;line-height:1.25;min-width:0}
.calendar-secondary{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:none}
.calendar-secondary .calendar-date-jump{min-height:42px}
.calendar-secondary .view-toggle button{min-height:36px}
/* Admin has one visible, 44px tap target instead of cramped micro text links. */
.mobile-admin-menu{display:none;position:relative;margin-left:auto}
.mobile-admin-menu summary{list-style:none;cursor:pointer;min-width:75px;min-height:44px;border:1px solid #8f7ca6;border-radius:10px;padding:10px 12px;color:#fff;font-size:14px;font-weight:820;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.mobile-admin-menu summary::-webkit-details-marker{display:none}
.admin-calendar .mobile-admin-menu summary{background:#49375f;border-color:#c9b77e}
.mobile-admin-menu summary:focus-visible{outline:3px solid #ffd881;outline-offset:3px}
.mobile-admin-menu nav{position:absolute;right:0;top:calc(100% + 6px);width:min(260px,calc(100vw - 24px));background:#fff;border:1px solid #e4dfea;box-shadow:0 15px 40px #120b2738;border-radius:13px;padding:8px;display:grid;gap:3px;z-index:100}
.mobile-admin-menu nav a,.mobile-admin-menu nav button{display:flex;align-items:center;width:100%;min-height:44px;padding:10px 12px;color:#34274c!important;text-decoration:none;font-size:15px;font-weight:700;text-align:left;border:0;border-radius:8px;background:white}
.mobile-admin-menu nav a:hover{background:#f1eafa}
.mobile-admin-menu nav .mobile-admin-section{display:grid;gap:3px}
.mobile-admin-menu nav .mobile-admin-group{padding:8px 12px 2px;color:#594a68;font-size:11px;font-weight:850;letter-spacing:.04em}
.mobile-admin-menu nav .mobile-admin-priority{background:#fff5df;color:#493412!important;border:1px solid #e6c781;font-weight:820}
.mobile-admin-menu nav a:focus-visible,.mobile-admin-menu nav button:focus-visible{outline:3px solid #71549a;outline-offset:1px}
.mobile-admin-menu nav form{margin:0}
.mobile-admin-menu nav button{color:#aa3248!important}
@media(max-width:760px){
 .controls{flex-direction:column;align-items:stretch;gap:10px}
 .date-nav{flex:0 0 auto;width:100%;grid-template-columns:48px minmax(0,1fr) 48px;gap:3px}
 #range-title{font-size:clamp(16px,4.5vw,21px)!important;line-height:1.3;font-weight:790;max-width:100%}
 .date-nav .icon-button{min-width:44px;min-height:44px;background:#eef4fc}
 .calendar-secondary{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr) auto;gap:7px}
 .calendar-secondary .today-button{min-height:42px;padding:8px 10px}
 .calendar-secondary .calendar-date-jump{width:100%;max-width:none;min-width:0;min-height:42px;padding:6px;font-size:13px}
 .calendar-secondary .view-toggle{justify-self:end}
 .calendar-secondary .view-toggle button{min-height:37px;min-width:33px;padding:7px 8px}
 .admin-calendar .topbar .top-actions{display:none!important}
 .admin-calendar .mobile-admin-menu{display:block}
}
@media(max-width:360px){
 .calendar-secondary{grid-template-columns:auto minmax(95px,1fr);grid-template-rows:auto auto}
 .calendar-secondary .view-toggle{grid-column:1 / -1;justify-self:end}
}
.drag-preview{position:absolute;left:2px;right:2px;border:2px dashed #2a71db;background:#5a9ef72d;border-radius:8px;z-index:2;pointer-events:none}

/* Make the primary venue chooser unmistakable, not a tiny filter. */
@media(min-width:761px){
 .sidebar{width:252px;flex-basis:252px;padding-left:20px;padding-right:17px}
 .side-head .side-heading{font-size:13px;letter-spacing:.06em;color:#2c5f9e}
 .side-head select{min-height:54px;padding:12px 36px 12px 14px;border:2px solid #8fb3dd;border-radius:12px;font-size:16px;color:#204c83;background:#f4f9ff;font-weight:790}
}
@media(max-width:760px){
 .side-head select{max-width:none;min-height:48px;border:2px solid #9bbfe9;background:#f0f7ff;font-size:15px;font-weight:790}
 .sidebar{background:#fbfdff}
}

/* Factual source notice; not a trial/demo status indicator. */
.calendar-note{font-size:12px;text-align:center;padding:7px 12px;color:#476076;background:#f3f7fb;border-bottom:1px solid #e3eaf1}

/* Calendar overflow stays on the same monthly page; hover, click and keyboard supported. */
.mobile-month-help{margin:0;padding:7px 9px;background:#eff7f1;color:#275b40;font-size:11px;font-weight:750;text-align:center}
.month-overflow-panel{position:fixed;z-index:1500;background:#fff;border:1px solid #d6cce4;border-radius:12px;box-shadow:0 12px 35px #29223d33;max-height:min(440px,72vh);overflow:auto;width:min(325px,calc(100vw - 16px));padding:9px;box-sizing:border-box}
.month-overflow-title{display:flex;align-items:center;justify-content:space-between;font-weight:800;color:#46335d;padding:5px 7px 10px}
.month-overflow-close{border:0;background:transparent;color:#48365e;font-size:23px;cursor:pointer;min-width:34px;min-height:34px}
.month-overflow-item{display:block;width:100%;text-align:left;border:0;border-left:4px solid #43a56d;border-radius:6px;background:#e2f6e9;color:#275b40;margin:4px 0;padding:9px;font-size:13px;font-weight:700;cursor:pointer}
.month-overflow-item.pending{background:#ffedd3;color:#996014;border-left-color:#e9a34d}
.month-overflow-item.reference{background:#f1e8fa;color:#7253a0;border-left-color:#9073c7}
.month-overflow-item:hover,.month-overflow-item:focus-visible{filter:brightness(.95);outline:2px solid #8060b5}
.public-calendar .month-cell{cursor:cell}
.public-calendar .month-cell .month-event,.public-calendar .month-cell .month-more{cursor:pointer}

.public-create-form{display:grid;gap:13px;padding:16px}
.public-create-form label{display:grid;gap:6px;font-size:13px;font-weight:750;color:#443657}
.public-create-form select{box-sizing:border-box;width:100%;max-width:100%;min-width:0;min-height:44px;border:1px solid #bfb4d1;border-radius:9px;padding:8px;background:#fff;color:#302640}
.public-create-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.public-create-form .primary-button{min-height:44px;cursor:pointer}

/* 320px month is seven narrow columns: prioritize legible time/room over clipped microtext. */
@media(max-width:400px){
 .month-cell{padding:3px 2px;gap:3px}
 .month-cells{grid-template-rows:repeat(var(--month-weeks,6),minmax(112px,1fr))}
 .month-date{min-width:29px;min-height:29px;font-size:12px}
 .month-event{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;line-height:1.24;min-height:29px;max-height:40px;padding:3px 3px;font-size:10px!important;font-weight:800;letter-spacing:0}
 .month-more{font-size:11px;min-height:24px;color:#205b45;font-weight:850}
 .month-events{gap:3px}
}
@media(max-width:340px){
 .month-event{font-size:10px!important}
 .month-cell.outside{opacity:.73}
}


/* Day timeline is a true one-day vertical hour grid on 320px and desktop.
   The .single-view class is on the cal-inner node itself. */
.cal-inner.single-view{min-width:0!important}
.cal-inner.single-view .day-heads,.cal-inner.single-view .hour-grid,.cal-inner.single-view .all-day-row{grid-template-columns:64px minmax(0,1fr)}
.cal-inner.single-view .day-lane{min-width:0}
.cal-inner.single-view .day-head{grid-column:2}
#timeline-view{min-width:65px!important}
@media(max-width:760px){
 .calendar-secondary{min-width:0;max-width:100%}
 .calendar-secondary .view-toggle{display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:100%}
 .calendar-secondary .view-toggle button{font-size:12px;padding:6px;min-height:40px}
 #timeline-view{min-width:50px!important}
 .cal-inner.single-view .time-axis,.cal-inner.single-view .day-lane{height:1080px}
}
@media(max-width:360px){.calendar-secondary .view-toggle button{font-size:11px;padding:5px}}



/* Fluid calendar: preserve dimensions on fetch instead of hiding all views. */
.calendar-body{position:relative}
.calendar-body .calendar-message:not([hidden]){position:absolute;z-index:18;top:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:9px 15px;border:1px solid #d6e4f2;background:#fffffff2;border-radius:999px;box-shadow:0 5px 18px #22394d18;font-size:12px;color:#39536b;pointer-events:none}
.calendar-body.is-loading #calendar-grid,.calendar-body.is-loading #agenda,.calendar-body.is-loading #month-grid{opacity:.58;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
 .calendar-body #calendar-grid,.calendar-body #agenda,.calendar-body #month-grid{transition:opacity .16s ease}
 .dialog-card[open]{animation:yoc-dialog-enter .17s cubic-bezier(.2,.7,.2,1) both}
 @keyframes yoc-dialog-enter{from{opacity:.5;transform:translateY(9px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
}
@media(prefers-reduced-motion:reduce){
 .calendar-body #calendar-grid,.calendar-body #agenda,.calendar-body #month-grid,.dialog-card[open]{animation:none!important;transition:none!important}
}

/* UX65 — on-calendar booking and login, desktop modal / mobile nearly full screen. */
.public-calendar .inline-booking-dialog{
 box-sizing:border-box;width:min(890px,calc(100vw - 28px));max-width:890px;
 height:min(94dvh,940px);max-height:94dvh;
 padding:0;overflow:hidden;border:1px solid #aecfb9;border-radius:17px;
 background:#fff;box-shadow:0 22px 85px #122a2366;
}
.public-calendar .inline-booking-dialog:not([open]),
.public-calendar .inline-login-dialog:not([open]){display:none}
.public-calendar .inline-booking-dialog[open]{display:flex;flex-direction:column}
.public-calendar .inline-booking-dialog .dialog-head{
 flex:0 0 auto;position:relative;z-index:2;padding:12px 17px;
 background:#f1f8f4;border-bottom:1px solid #c3ddca;color:#164e34;
}
.public-calendar .inline-booking-dialog #public-booking-frame{
 display:block;flex:1 1 auto;min-height:0;width:100%;border:0;
 background:#f8fcfa;
}
.public-calendar .inline-login-dialog{box-sizing:border-box;width:min(430px,calc(100vw - 28px));max-width:430px;padding:0;max-height:calc(100dvh - 28px);overflow:auto;background:#fff;border-color:#c9e1d0;}
.public-calendar .inline-login-dialog .dialog-head{background:#edf7f1;color:#165237}
.public-calendar .inline-login-form{display:grid;gap:15px;padding:22px 24px 10px}
.public-calendar .inline-login-form label{display:grid;gap:7px;font-size:14px;font-weight:760;color:#1f5039}
.public-calendar .inline-login-form input{box-sizing:border-box;width:100%;min-width:0;min-height:46px;padding:10px 12px;background:white;color:#173b2a;font:inherit;font-size:16px;border:1px solid #a6c8b2;border-radius:9px}
.public-calendar .inline-login-form input:focus-visible,.public-calendar .inline-login-form button:focus-visible{outline:3px solid #47876c;outline-offset:2px}
.public-calendar .inline-login-form button{min-height:48px;font-size:15px;cursor:pointer}
.public-calendar .inline-login-form button:disabled{opacity:.6;cursor:wait}
.public-calendar #public-admin-login-feedback{color:#a12e3b;font-size:13px;font-weight:740;margin:0;min-height:18px}
.public-calendar .inline-login-fallback{text-align:center;margin:5px 0 17px;font-size:13px}
.public-calendar .inline-login-fallback a{color:#236347}
@media(max-width:760px){
 .public-calendar .inline-booking-dialog{width:calc(100vw - 8px);max-width:none;height:calc(100dvh - 8px);max-height:calc(100dvh - 8px);margin:auto;border-radius:11px}
 .public-calendar .inline-booking-dialog .dialog-head{padding:10px 13px}
 .public-calendar .inline-booking-dialog .dialog-close,.public-calendar .inline-login-dialog .dialog-close{min-width:44px;min-height:44px;border-radius:9px}
 .public-calendar .inline-login-dialog{width:calc(100vw - 16px);max-width:none}
 .public-calendar .inline-login-form{padding:20px 16px 10px}
}

/* UX65: expose Admin sign-in on phones; otherwise the popup has no entry.
   The desktop print action stays available via the existing nav. */
@media(max-width:760px){
 .public-calendar .topbar #print-link{display:none}
 .public-calendar .topbar .admin-link{
  display:inline-flex;min-height:40px;align-items:center;
  flex-shrink:0;white-space:nowrap;font-size:12px;font-weight:760;
 }
 .public-calendar .topbar .top-actions{gap:7px;min-width:0}
 .public-calendar .topbar .brand{min-width:0;max-width:calc(100vw - 188px);flex-shrink:1}
 .public-calendar .topbar .brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:360px){
 .public-calendar .topbar{padding:0 9px;gap:4px}
 .public-calendar .topbar .admin-link{font-size:11px}
 .public-calendar .topbar .top-actions{gap:5px}
 .public-calendar .topbar .brand{max-width:calc(100vw - 173px)}
}

/* UX80: Public List uses the shared seven-day list renderer, with complete
   styles independent of Admin-only CSS. Touch-safe rows at 320px Safari. */
.public-calendar .work-list-days{display:grid;gap:12px;padding:8px 0}
.public-calendar .work-list-day{min-width:0;padding:12px;border:1px solid #dfd5e9;background:#fff;border-radius:12px}
.public-calendar .work-list-date{margin:0;padding:0 0 9px;color:#392a55;font-size:14px;font-weight:800;border-bottom:1px solid #eee6f3}
.public-calendar .work-list-events{display:grid;gap:7px;margin-top:9px}
.public-calendar .work-list-event{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 12px;width:100%;box-sizing:border-box;min-height:44px;text-align:left;border:1px solid #e0d6e9;border-left:4px solid #38976b;border-radius:9px;background:#f4faf6;color:#255239;font:inherit;padding:9px 11px;cursor:pointer}
.public-calendar .work-list-event.pending{background:#fff6e8;color:#78501a;border-left-color:#e0a43c}
.public-calendar .work-list-event span{min-width:0;overflow-wrap:anywhere;font-weight:700}
.public-calendar .work-list-event small{font-size:12px;line-height:1.4;color:#5c6270}
.public-calendar .work-list-event:focus-visible{outline:3px solid #765b99;outline-offset:2px}
.public-calendar .work-list-day .work-note{margin:10px 0;color:#6b6b75}