:root{--tri-green:#233f2f;--tri-green-2:#284243;--tri-orange:#cf554e;--tri-orange-2:#ca5143;--tri-beige:#bab9af;--tri-offwhite:#edebe9;--tri-paper:#fbfaf7;--tri-ink:#15241f;--bg:var(--tri-paper);--surface:rgba(255,255,255,.86);--text:var(--tri-ink);--muted:#66716a;--line:rgba(35,63,47,.12);--blue:var(--tri-green);--blue2:#315b45;--green:#34c759;--amber:#ff9f0a;--red:#ff3b30;--purple:var(--tri-orange);--radius:22px;--shadow:0 18px 48px rgba(35,63,47,.08);font-family:"Anuphan",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 88% 4%,#e6f1ff 0,transparent 24%),var(--bg);min-height:100vh}button,input,select,textarea{font:inherit}button,a{transition:.2s ease}a{text-decoration:none;color:inherit}
.app-version{position:fixed;left:50%;bottom:8px;transform:translateX(-50%);z-index:4;color:var(--muted);font-size:10px;line-height:1.2;opacity:.78;pointer-events:none;white-space:nowrap}
.app-shell{display:grid;grid-template-columns:240px 1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:240px;padding:30px 20px;display:flex;flex-direction:column;background:rgba(255,255,255,.66);backdrop-filter:blur(30px);border-right:1px solid var(--line);z-index:5}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;padding:0 10px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;color:#fff;background:linear-gradient(145deg,#4da3ff,#0064d5);box-shadow:0 8px 18px rgba(0,113,227,.28)}.sidebar nav{display:grid;gap:6px;margin-top:48px}.sidebar nav a{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:12px;color:var(--muted);font-weight:500}.sidebar nav a:hover,.sidebar nav a.active{background:#fff;color:var(--blue);box-shadow:0 5px 18px rgba(0,0,0,.05)}.profile{margin-top:auto;display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding-top:20px;border-top:1px solid var(--line)}.profile strong,.profile small{display:block;max-width:115px;overflow:hidden;text-overflow:ellipsis}.profile strong{font-size:13px}.profile small{font-size:11px;color:var(--muted);margin-top:2px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#dbeaff,#b7d5ff);color:#075ca8;font-weight:700}
.main{grid-column:2;padding:42px clamp(24px,4vw,64px);max-width:1700px;width:100%;margin:auto}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:28px}.topbar h1{font-size:34px;letter-spacing:-1.2px;margin:3px 0}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700;color:var(--blue);margin:0}.muted{color:var(--muted);margin:0}.button{border:0;border-radius:12px;padding:11px 17px;display:inline-flex;justify-content:center;align-items:center;gap:8px;cursor:pointer;font-weight:600}.button:hover{transform:translateY(-1px)}.button.primary{color:#fff;background:linear-gradient(180deg,var(--blue2),var(--blue));box-shadow:0 8px 20px rgba(0,113,227,.22)}.button.secondary{background:#f1f1f3;color:var(--text)}.button.microsoft{background:#fff;border:1px solid var(--line);box-shadow:0 4px 15px rgba(0,0,0,.04)}.button.small{padding:7px 12px;font-size:12px}.wide{width:100%}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:16px;margin-bottom:18px}.stat-card{position:relative;overflow:hidden;padding:20px 22px;background:var(--surface);border:1px solid rgba(255,255,255,.8);border-radius:18px;box-shadow:0 9px 30px rgba(0,0,0,.04)}.stat-card:after{content:"";position:absolute;width:95px;height:95px;border-radius:50%;right:-24px;top:-35px;background:currentColor;opacity:.08}.stat-card span,.stat-card small{display:block;color:var(--muted);font-size:12px}.stat-card strong{display:block;font-size:29px;margin:8px 0 1px}.stat-card.blue{color:var(--blue)}.stat-card.purple{color:var(--purple)}.stat-card.amber{color:var(--amber)}
.dashboard-grid{display:grid;grid-template-columns:minmax(290px,.75fr) minmax(550px,1.5fr);gap:18px}.panel{background:var(--surface);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.85);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.panel h2{font-size:18px;margin:0 0 3px}.panel-head p{font-size:12px}.live-dot{font-size:11px;color:var(--green);background:rgba(52,199,89,.1);padding:5px 9px;border-radius:20px}.live-dot:before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:5px}.timeline{display:grid;gap:8px}.meeting-row{display:grid;grid-template-columns:48px 3px 1fr auto;align-items:center;gap:12px;text-align:left;border:0;background:transparent;border-radius:13px;padding:11px 8px;cursor:pointer;width:100%}.meeting-row:hover{background:#fff}.time strong,.time small{display:block}.time strong{font-size:14px}.time small{color:var(--muted);font-size:10px}.room-line{height:42px;border-radius:4px;background:var(--room-color)}.meeting-info{min-width:0}.meeting-info strong,.meeting-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meeting-info strong{font-size:13px}.meeting-info small{font-size:10px;color:var(--muted);margin-top:4px}.status{font-size:10px;font-weight:600;padding:5px 8px;border-radius:20px;white-space:nowrap}.status-pending{background:#fff3d9;color:#a66000}.status-approved{background:#e5f7e9;color:#1b7d33}.status-rejected{background:#ffe6e3;color:#b42318}.status-cancelled{background:#ececef;color:#6e6e73}
.meeting-row.now-meeting{position:relative;background:rgba(52,199,89,.08);box-shadow:inset 0 0 0 2px rgba(52,199,89,.72);animation:now-meeting-pulse 1.35s ease-in-out infinite}.meeting-row.now-meeting .room-line{background:var(--green)}.meeting-row.now-meeting .live-meeting-status{position:relative;background:#dff8e5;color:#13762b;padding-left:20px}.meeting-row.now-meeting .live-meeting-status:before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--green);transform:translateY(-50%);animation:now-dot-blink .75s ease-in-out infinite}.meeting-row.queue-pending .live-meeting-status{background:#fff1cc;color:#945c00}.meeting-row.meeting-ended{opacity:.58}.meeting-row.meeting-ended .live-meeting-status{background:#ececef;color:#6e6e73}.meeting-row.booking-pending .live-meeting-status{background:#fff3d9;color:#a66000}.meeting-row.booking-rejected .live-meeting-status{background:#ffe6e3;color:#b42318}.meeting-row.booking-cancelled .live-meeting-status{background:#ececef;color:#6e6e73}@keyframes now-meeting-pulse{0%,100%{box-shadow:inset 0 0 0 2px rgba(52,199,89,.5),0 0 0 0 rgba(52,199,89,.2)}50%{box-shadow:inset 0 0 0 2px rgba(52,199,89,1),0 0 0 7px rgba(52,199,89,0)}}@keyframes now-dot-blink{0%,100%{opacity:1;transform:translateY(-50%) scale(1)}50%{opacity:.25;transform:translateY(-50%) scale(.72)}}@media(prefers-reduced-motion:reduce){.meeting-row.now-meeting,.meeting-row.now-meeting .live-meeting-status:before{animation:none}}
.today-panel h2,.calendar-panel h2{font-size:22px}.today-panel .panel-head p,.calendar-panel .panel-head p{font-size:13px}.today-panel .meeting-row{grid-template-columns:62px 4px 1fr auto;gap:14px;padding:15px 10px}.today-panel .time strong{font-size:18px}.today-panel .time small{font-size:12px}.today-panel .room-line{height:52px}.today-panel .meeting-info strong{font-size:16px}.today-panel .meeting-info small{font-size:12px}.today-panel .status{font-size:12px;padding:7px 11px}.stats-grid .stat-card span{font-size:14px}.stats-grid .stat-card strong{font-size:34px}.stats-grid .stat-card small{font-size:13px}.calendar .weekday{font-size:11px;padding:10px 5px}.calendar .day-number{font-size:12px;width:25px;height:25px}.calendar .calendar-event{font-size:10px;padding:4px 6px}.legend{font-size:11px}.live-tools{display:flex;align-items:center;gap:8px}.refresh-countdown{min-width:42px;text-align:center;font-size:10px;font-weight:700;color:var(--blue);background:#e8f3ff;border-radius:20px;padding:5px 8px}.last-updated{position:fixed;right:22px;bottom:14px;z-index:4;color:var(--muted);font-size:10px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:20px;padding:7px 11px;box-shadow:0 5px 18px rgba(0,0,0,.05)}
.refresh-countdown.refresh-error{color:#b42318;background:#ffe6e3}
.calendar-nav{display:flex;align-items:center;gap:5px}.calendar-nav a{display:grid;place-items:center;min-width:30px;height:30px;border-radius:9px;background:#f3f3f5}.calendar-nav a:hover{background:#e7e7ea}.calendar-nav .today-link{padding:0 10px;font-size:11px}.calendar{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);overflow:hidden;border-radius:12px}.weekday{text-align:center;color:var(--muted);font-size:10px;font-weight:600;padding:8px;background:#f8f8fa;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.day{min-width:0;min-height:91px;padding:7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.45)}.muted-day{background:rgba(245,245,247,.6)}.day-number{display:grid;place-items:center;width:22px;height:22px;font-size:10px;border-radius:50%}.is-today .day-number{background:var(--blue);color:#fff;font-weight:700}.day-events{display:grid;gap:3px;margin-top:3px}.calendar-event{border:0;border-radius:5px;padding:3px 5px;font-size:8px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.status-bg-pending{background:#fff1cc;color:#8a5700}.status-bg-approved{background:#ddf5e3;color:#176c2b}.status-bg-rejected{background:#ffe0dc;color:#9d261d}.status-bg-cancelled{background:#e9e9ec;color:#777;text-decoration:line-through}.legend{display:flex;justify-content:flex-end;gap:14px;flex-wrap:wrap;margin-top:15px;color:var(--muted);font-size:9px}.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.legend .pending{background:var(--amber)}.legend .approved{background:var(--green)}.legend .rejected{background:var(--red)}.legend .cancelled{background:#8e8e93}
.modal{border:0;border-radius:24px;padding:0;max-width:620px;width:calc(100% - 32px);box-shadow:0 30px 100px rgba(0,0,0,.25);background:rgba(255,255,255,.96)}.modal::backdrop{background:rgba(20,22,26,.36);backdrop-filter:blur(8px)}.modal form,.detail-modal>div{padding:28px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.modal h2{margin:4px 0 0;font-size:24px}.icon-button{width:34px;height:34px;border:0;border-radius:50%;background:#eeeef0;font-size:22px;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid .full{grid-column:1/-1}label{display:grid;gap:7px;font-size:12px;font-weight:600}input,select,textarea{width:100%;border:1px solid var(--line);background:#f7f7f9;border-radius:11px;padding:11px 12px;outline:none;color:var(--text)}input:focus,select:focus,textarea:focus{border-color:#78b8f7;box-shadow:0 0 0 3px rgba(0,113,227,.1);background:#fff}textarea{resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.checkbox{display:flex;grid-template-columns:auto 1fr;align-items:center}.checkbox input{width:18px}.detail-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.detail-item{background:#f6f6f8;border-radius:12px;padding:12px}.detail-item.full{grid-column:1/-1}.detail-item small,.detail-item strong{display:block}.detail-item small{color:var(--muted);font-size:10px;margin-bottom:5px}.detail-item strong{font-size:13px}.decision-box{padding-top:18px;border-top:1px solid var(--line)}.decision-box textarea{margin:10px 0}.reminder-modal{text-align:center;padding:32px;max-width:380px}.reminder-icon{font-size:42px}.reminder-modal h2{margin:8px 0}
.empty{text-align:center;color:var(--muted);padding:50px 10px}.empty span{font-size:36px}.toast{position:fixed;right:24px;top:20px;padding:12px 18px;border-radius:12px;background:#222;color:#fff;z-index:100;box-shadow:0 10px 30px rgba(0,0,0,.2);animation:toast-out .4s 4s forwards}.toast.success{background:#187a35}.toast.error{background:#b92b22}@keyframes toast-out{to{opacity:0;transform:translateY(-10px);pointer-events:none}}
.auth-shell{background:#fff}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}.login-art{position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#071c3a,#0b55a0 60%,#54b5ff);padding:50px}.login-art:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 55%)}.orb{position:absolute;border-radius:50%;filter:blur(2px)}.orb-one{width:430px;height:430px;background:linear-gradient(140deg,rgba(81,191,255,.8),rgba(42,67,255,.1));left:-90px;top:-80px}.orb-two{width:340px;height:340px;background:linear-gradient(140deg,rgba(196,100,255,.65),rgba(255,255,255,.03));right:-80px;bottom:-100px}.glass-card{position:relative;z-index:1;max-width:540px;padding:50px;border:1px solid rgba(255,255,255,.24);border-radius:32px;background:rgba(255,255,255,.1);backdrop-filter:blur(25px);color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.18)}.glass-card .eyebrow{color:#bfe1ff}.glass-card h1{font-size:54px;line-height:1.13;letter-spacing:-2px;margin:14px 0}.glass-card p{color:rgba(255,255,255,.72)}.login-panel{display:grid;place-items:center;padding:45px}.login-box{width:min(390px,100%)}.login-brand{padding:0;margin-bottom:60px}.login-box h2{font-size:30px;margin:0 0 6px}.login-box>p{margin-bottom:28px}.login-box form{display:grid;gap:17px}.divider{display:flex;align-items:center;gap:12px;color:#aaa;font-size:10px;margin:20px 0}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}.ms-logo{font-size:20px;color:#1674d1}.login-note{display:block;color:var(--muted);text-align:center;margin-top:16px}
.table-panel{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}th,td{padding:14px;border-bottom:1px solid var(--line)}.user-cell{display:flex;align-items:center;gap:11px}.user-cell strong,.user-cell small{display:block}.user-cell small{color:var(--muted);margin-top:3px}
.sidebar nav a span{display:grid}.sidebar nav a span small{font-size:9px;font-weight:400;opacity:.75}.en-title{display:block;color:var(--muted);font-size:15px;font-weight:500;letter-spacing:0;margin-top:2px}.permission-fieldset{border:1px solid var(--line);border-radius:14px;padding:15px}.permission-fieldset legend{padding:0 7px;font-size:12px;font-weight:700}.permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.permission-option{display:grid;grid-template-columns:auto 1fr;align-items:flex-start;background:#f7f7f9;padding:10px;border-radius:10px;cursor:pointer}.permission-option input{width:17px;margin-top:2px}.permission-option strong,.permission-option small{display:block}.permission-option strong{font-size:11px}.permission-option small{font-size:9px;color:var(--muted);margin-top:2px}.room-grid{display:grid;grid-template-columns:repeat(3,minmax(250px,1fr));gap:18px}.room-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid rgba(255,255,255,.85);border-radius:20px;box-shadow:var(--shadow);padding:23px}.room-disabled{opacity:.68}.room-color{position:absolute;inset:0 0 auto;height:5px}.room-card-head{display:flex;justify-content:space-between;gap:12px}.room-card h2{margin:0;font-size:20px}.room-card-head p{margin:4px 0;color:var(--muted);font-size:11px}.room-facts{display:flex;gap:22px;margin:22px 0 14px}.room-facts span{font-size:10px;color:var(--muted)}.room-facts strong{font-size:20px;color:var(--text);margin-right:3px}.amenities{min-height:38px;color:var(--muted);font-size:11px;line-height:1.7}.room-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.button.danger{background:#ffe9e7;color:#bd2c22}.room-actions form{margin:0}input[type=color]{height:42px;padding:5px}
.email-decision-card{width:min(560px,calc(100% - 32px));margin:8vh auto;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.email-decision-card h1{font-size:clamp(23px,4vw,32px);margin:8px 0 12px}
.email-decision-card>p{color:var(--muted);line-height:1.6}
.email-decision-card dl{display:grid;grid-template-columns:150px 1fr;gap:10px 16px;margin:24px 0}
.email-decision-card dt{color:var(--muted);font-size:13px}
.email-decision-card dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.email-decision-card form{margin:20px 0}
.email-decision-card .button{width:100%}
@media(max-width:520px){.email-decision-card dl{grid-template-columns:1fr;gap:4px}.email-decision-card dd{margin-bottom:12px}}
.password-field{transition:.2s}.password-field.auth-field-disabled{opacity:.45}.password-field.auth-field-disabled input{cursor:not-allowed}
.user-actions{display:flex;align-items:center;gap:7px}.user-actions form{margin:0}
.approver-room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.permission-help{color:var(--muted);font-size:11px;line-height:1.5;margin:0 0 10px}.approver-room-empty{padding:14px;border:1px dashed var(--line);border-radius:12px;background:#f7f7f9;color:var(--muted);font-size:12px;line-height:1.5}.approver-rooms-fieldset.is-disabled{opacity:.48}.approver-rooms-fieldset.is-disabled .approver-room-option{cursor:not-allowed}.approver-room-option input:disabled{cursor:not-allowed}
@media(max-width:1100px){.room-grid{grid-template-columns:1fr 1fr}}@media(max-width:760px){.room-grid,.permission-grid,.approver-room-grid{grid-template-columns:1fr}}
.email-settings-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:18px;align-items:start}.settings-panel .panel-head{align-items:flex-start}.switch{display:flex;grid-template-columns:auto auto;align-items:center;gap:8px;cursor:pointer}.switch input{display:none}.switch span{position:relative;width:42px;height:24px;border-radius:20px;background:#c7c7cc;transition:.2s}.switch span:after{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s}.switch input:checked+span{background:var(--green)}.switch input:checked+span:after{transform:translateX(18px)}.switch strong{font-size:10px}.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}.provider-card{position:relative;display:flex;align-items:center;min-height:92px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8f8fa;cursor:pointer}.provider-card input{position:absolute;opacity:0}.provider-card:has(input:checked){border-color:#75b7f8;background:#eef7ff;box-shadow:0 0 0 3px rgba(0,113,227,.08)}.provider-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:#fff;font-size:18px;margin-bottom:4px}.gmail-icon{background:linear-gradient(145deg,#ea4335,#fbbc05)}.ms-icon{background:#1674d1}.custom-icon{background:#73737a}.provider-card strong,.provider-card small{display:block}.provider-card small{font-size:9px;color:var(--muted)}.provider-help{display:none;margin-top:16px;padding:12px 14px;border-radius:12px;background:#f3f7fc;border-left:3px solid var(--blue)}.provider-help.visible{display:block}.provider-help strong{font-size:12px}.provider-help p{font-size:10px;color:var(--muted);margin:4px 0 0;line-height:1.6}.test-panel{position:sticky;top:32px;text-align:center}.settings-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;margin:0 auto 12px;color:#fff;background:linear-gradient(145deg,#4da3ff,#0064d5);font-size:23px;box-shadow:0 10px 25px rgba(0,113,227,.2)}.test-panel h2{margin:0 0 5px}.test-panel>p{font-size:10px;margin-bottom:22px}.test-panel label{text-align:left;margin-bottom:13px}.test-panel hr{border:0;border-top:1px solid var(--line);margin:20px 0}.security-note{display:block;color:var(--muted);font-size:9px;line-height:1.6;margin-top:17px}
.email-settings-grid>.settings-panel{grid-column:1}.email-settings-grid>.test-panel{grid-column:2;grid-row:1 / span 2}.field-help{display:block;color:var(--muted);font-size:10px;line-height:1.55;margin-top:6px}.field-help strong{color:var(--text)}
@media(max-width:960px){.email-settings-grid{grid-template-columns:1fr}.email-settings-grid>.settings-panel,.email-settings-grid>.test-panel{grid-column:1;grid-row:auto}.test-panel{position:static}}@media(max-width:620px){.provider-grid{grid-template-columns:1fr}}
.provider-card{flex-direction:column;text-align:center;min-height:112px}
@media(max-width:1100px){.dashboard-grid{grid-template-columns:1fr}.today-panel{order:2}.calendar-panel{order:1}}@media(max-width:760px){.app-shell{display:block}.sidebar{position:sticky;top:0;width:100%;height:66px;padding:12px 16px;flex-direction:row;align-items:center}.sidebar nav{display:flex;margin:0 0 0 auto}.sidebar nav a{padding:9px}.sidebar nav a span,.profile div:not(.avatar),.profile>a{display:none}.profile{border:0;padding:0;margin:0 0 0 8px}.main{padding:24px 14px}.topbar{align-items:center}.topbar h1{font-size:27px}.topbar .button{font-size:0;padding:12px}.topbar .button:first-letter{font-size:18px}.stats-grid{gap:8px}.stat-card{padding:15px}.panel{padding:15px;border-radius:18px}.calendar{overflow-x:auto}.day{min-height:74px}.calendar-event{max-width:100%}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.login-wrap{grid-template-columns:1fr}.login-art{display:none}.login-panel{padding:25px;min-height:100vh}.login-brand{margin-bottom:45px}.detail-list{grid-template-columns:1fr}.detail-item.full{grid-column:auto}}

/* Tri Vananda login theme */
.tri-login{background:#fbfaf7;grid-template-columns:1.08fr .92fr}
.tri-login-art{position:relative;background:
  radial-gradient(circle at 18% 18%,rgba(187,184,175,.42) 0 120px,transparent 122px),
  radial-gradient(circle at 78% 74%,rgba(196,74,49,.18) 0 150px,transparent 152px),
  linear-gradient(135deg,#ffffff 0%,#f7f5ef 54%,#ffffff 100%);
  isolation:isolate;color:#15241f}
.tri-login-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(135deg,rgba(19,66,49,.06) 25%,transparent 25%,transparent 50%,rgba(19,66,49,.06) 50%,rgba(19,66,49,.06) 75%,transparent 75%,transparent);background-size:28px 28px;opacity:.42;mask-image:linear-gradient(90deg,#000,transparent 82%)}
.tri-login-art:after{content:"";position:absolute;inset:auto -70px -90px auto;width:430px;height:430px;border-radius:50%;background:repeating-linear-gradient(45deg,#123f31 0 5px,#123f31 5px 8px,transparent 8px 15px);opacity:.13}
.tri-pattern{position:absolute;border-radius:999px;filter:blur(.2px);opacity:.82}
.tri-pattern-grey{width:290px;height:290px;left:-92px;top:-72px;background:#bbb8af}
.tri-pattern-green{width:260px;height:180px;right:12%;bottom:9%;background:repeating-linear-gradient(45deg,#123f31 0 6px,#123f31 6px 9px,#fff 9px 14px);opacity:.18}
.tri-pattern-orange{width:150px;height:74px;right:19%;top:23%;background:#c84a31;border-radius:40px;transform:rotate(-8deg);opacity:.22}
.tri-hero-card{position:relative;z-index:2;max-width:620px;padding:58px 60px;border-radius:34px;background:rgba(255,255,255,.78);border:1px solid rgba(187,184,175,.48);box-shadow:0 30px 90px rgba(18,63,49,.12);backdrop-filter:blur(18px)}
.tri-hero-card .eyebrow{color:#c84a31;letter-spacing:.18em}
.tri-hero-card h1{font-size:46px;line-height:1.18;letter-spacing:-1.3px;margin:16px 0 18px;color:#123f31}
.tri-hero-card p{font-size:18px;line-height:1.8;color:#5d665f;margin:0}
.tri-login-panel{background:#fff;position:relative;overflow:hidden}
.tri-login-panel:before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 90% 12%,rgba(187,184,175,.23),transparent 24%),
  radial-gradient(circle at 8% 94%,rgba(18,63,49,.08),transparent 22%),
  linear-gradient(180deg,#fff,#fbfaf7);pointer-events:none}
.tri-login-panel .login-box{position:relative;z-index:1;width:min(430px,100%)}
.tri-login-logo-wrap{text-align:center;margin-bottom:44px;padding:24px 18px;border-radius:28px;background:rgba(255,255,255,.72);border:1px solid rgba(187,184,175,.28)}
.tri-login-logo{display:block;width:150px;max-width:62%;height:auto;margin:0 auto 18px}
.tri-login-logo-wrap h1{margin:0;color:#123f31;font-size:24px;letter-spacing:.08em;font-weight:600;text-transform:uppercase}
.tri-login .login-box h2{color:#111827}
.tri-login .button.primary{background:linear-gradient(135deg,#123f31,#1d614b);box-shadow:0 12px 24px rgba(18,63,49,.18)}
.tri-login .button.microsoft:hover{border-color:#c84a31;color:#123f31}
.tri-login .brand-mark{background:linear-gradient(145deg,#123f31,#c84a31)}
.tri-login .tri-hero-card{max-width:760px;padding:54px 62px}
.tri-login .tri-hero-card h1{font-size:39px;line-height:1.22;white-space:nowrap;letter-spacing:-1px}
.tri-login .tri-logo-only{padding:34px 24px;margin-bottom:42px}
.tri-login .tri-logo-only .tri-login-logo{width:270px;max-width:88%;margin-bottom:0}
@media(max-width:760px){.tri-login{grid-template-columns:1fr}.tri-login-art{display:grid;min-height:36vh;padding:28px}.tri-hero-card{padding:30px}.tri-hero-card h1{font-size:30px}.tri-login-logo{width:128px}.tri-login-logo-wrap h1{font-size:18px}}
@media(max-width:1180px){.tri-login .tri-hero-card h1{white-space:normal;font-size:34px}}
@media(max-width:760px){.tri-login .tri-logo-only .tri-login-logo{width:190px;max-width:80%}}

/* Keep the left login headline inside the white card */
.tri-login .tri-hero-card{
  width:min(88%,920px);
  max-width:920px;
  padding:54px 72px;
  overflow:hidden;
}
.tri-login .tri-hero-card h1{
  font-size:clamp(30px,2.05vw,38px);
  line-height:1.2;
  white-space:nowrap;
  max-width:100%;
}
@media(max-width:1280px){
  .tri-login .tri-hero-card{width:92%;padding:48px 54px}
  .tri-login .tri-hero-card h1{font-size:clamp(28px,2.15vw,34px)}
}
@media(max-width:1080px){
  .tri-login .tri-hero-card h1{white-space:normal}
}

/* Tri Vananda app theme */
body.app-shell{
  background:
    radial-gradient(circle at 88% 6%,rgba(187,184,175,.32) 0 150px,transparent 152px),
    radial-gradient(circle at 14% 94%,rgba(18,63,49,.08) 0 260px,transparent 262px),
    radial-gradient(circle at 76% 82%,rgba(196,74,49,.11) 0 210px,transparent 212px),
    linear-gradient(135deg,#ffffff 0%,#fbfaf7 52%,#ffffff 100%);
}
body.app-shell:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:linear-gradient(135deg,rgba(18,63,49,.035) 25%,transparent 25%,transparent 50%,rgba(18,63,49,.035) 50%,rgba(18,63,49,.035) 75%,transparent 75%,transparent);
  background-size:30px 30px;
  mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);
}
body.app-shell:after{
  content:"";
  position:fixed;
  right:-90px;
  bottom:-80px;
  width:360px;
  height:250px;
  border-radius:999px;
  z-index:0;
  pointer-events:none;
  background:repeating-linear-gradient(45deg,#123f31 0 6px,#123f31 6px 9px,transparent 9px 15px);
  opacity:.08;
}
.app-shell .sidebar{
  background:rgba(255,255,255,.84);
  border-right:1px solid rgba(187,184,175,.42);
  box-shadow:14px 0 45px rgba(18,63,49,.05);
}
.app-shell .main,.app-shell .sidebar{position:relative;z-index:1}
.app-brand-logo{
  justify-content:center;
  padding:0 6px 18px;
  border-bottom:1px solid rgba(187,184,175,.34);
}
.app-brand-logo img{
  display:block;
  width:150px;
  max-width:100%;
  height:auto;
  object-fit:contain;
}
.app-shell .sidebar nav a:hover,.app-shell .sidebar nav a.active{
  background:#fff;
  color:#123f31;
  box-shadow:0 10px 28px rgba(18,63,49,.08);
}
.app-shell .sidebar nav a.active{border:1px solid rgba(18,63,49,.09)}
.app-shell .eyebrow{color:#c84a31}
.app-shell .button.primary{
  background:linear-gradient(135deg,#123f31,#1d614b);
  box-shadow:0 12px 24px rgba(18,63,49,.18);
}
.app-shell .stat-card,.app-shell .panel,.app-shell .room-card{
  background:rgba(255,255,255,.86);
  border-color:rgba(187,184,175,.32);
}
.app-shell .stat-card.blue{color:#123f31}
.app-shell .stat-card.purple{color:#c84a31}
.app-shell .stat-card.amber{color:#d56b1f}
.app-shell .calendar-nav a:hover{background:rgba(18,63,49,.08)}
.calendar-month-picker{display:flex;align-items:end;gap:7px;padding:4px 6px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.72);box-shadow:0 8px 24px rgba(20,40,35,.06)}.calendar-month-picker label{display:grid;gap:3px;font-size:9px;color:var(--muted);font-weight:700}.calendar-month-picker select{min-width:112px;height:31px;border-radius:9px;padding:5px 26px 5px 9px;font-size:11px;background:#fff}.calendar-month-picker [data-room-select]{min-width:170px}.calendar-month-picker [data-year-select]{min-width:88px}.calendar-month-picker .button{height:31px;padding:0 10px}
.selected-room-heading{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:9px 13px;border:2px solid var(--selected-room-color,#233f2f);border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(250,246,237,.72));box-shadow:0 12px 28px color-mix(in srgb,var(--selected-room-color,#233f2f) 16%,transparent);color:var(--tri-green,#233f2f);font-size:12px;font-weight:700}.selected-room-heading strong{font-size:14px;color:var(--selected-room-color,#233f2f);letter-spacing:.01em}.selected-room-heading span:not(.selected-room-dot){color:#66716a}.selected-room-dot{width:11px;height:11px;border-radius:50%;background:var(--selected-room-color,#233f2f);box-shadow:0 0 0 4px color-mix(in srgb,var(--selected-room-color,#233f2f) 18%,transparent)}
@media(max-width:900px){.calendar-nav{flex-wrap:wrap;justify-content:flex-end}.calendar-month-picker{order:5;width:100%;justify-content:flex-end}.calendar-month-picker select{min-width:0}}
.app-shell .is-today .day-number{background:#123f31}
.app-shell .avatar{
  background:linear-gradient(145deg,rgba(18,63,49,.14),rgba(196,74,49,.14));
  color:#123f31;
}
.app-shell .profile{
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
}
.app-shell .profile .logout-button{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  border-radius:10px;
  background:#123f31;
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 10px 22px rgba(18,63,49,.16);
}
.app-shell .profile .logout-button:hover{
  background:#c84a31;
  transform:translateY(-1px);
}
@media(max-width:760px){
  .app-brand-logo{border:0;padding:0;justify-content:flex-start}
  .app-brand-logo img{width:92px}
  .app-shell .profile>a.logout-button{display:flex}
  .app-shell .profile{grid-template-columns:34px auto;gap:6px}
  .app-shell .profile .logout-button{grid-column:auto;padding:8px 10px;min-height:32px;font-size:11px}
}
.form-note{display:grid;gap:4px;border:1px solid var(--line);background:#f7f7f9;border-radius:13px;padding:12px 14px}.form-note strong{font-size:12px}.form-note span{color:var(--muted);font-size:12px;line-height:1.5}
.main{max-width:1900px}.dashboard-grid{grid-template-columns:minmax(300px,.55fr) minmax(820px,2fr)}.calendar-panel{padding:30px}.calendar{min-height:620px}.day{min-height:132px;padding:9px}.calendar-event{font-size:11px;padding:5px 7px;border-radius:7px}.day-events{gap:5px}.calendar-more{border:0;background:transparent;color:var(--text);font-size:12px;font-weight:700;text-align:left;cursor:pointer;padding:3px 2px;border-radius:7px}.calendar-more:hover{color:var(--blue);background:#eef7ff}.calendar-more.subtle{color:var(--muted);font-size:10px;font-weight:600}.day-detail-list{display:grid;gap:10px;margin-top:18px}.day-detail-row{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:14px;width:100%;border:0;border-left:4px solid var(--blue);background:#f7f7f9;border-radius:14px;padding:13px 14px;text-align:left;cursor:pointer}.day-detail-row:hover{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.07);transform:translateY(-1px)}.day-detail-time strong,.day-detail-time small,.day-detail-info strong,.day-detail-info small{display:block}.day-detail-time strong{font-size:16px}.day-detail-time small,.day-detail-info small{color:var(--muted);font-size:11px}.day-detail-info strong{font-size:15px}.status-left-pending{border-left-color:var(--amber)}.status-left-approved{border-left-color:var(--green)}.status-left-rejected{border-left-color:var(--red)}.status-left-cancelled{border-left-color:#8e8e93}@media(max-width:1300px){.dashboard-grid{grid-template-columns:1fr}.calendar{min-height:auto}.day{min-height:118px}}

/* Dashboard arrangement: monthly calendar above today's meetings */
.dashboard-grid{grid-template-columns:1fr}
.calendar-panel{order:1}
.today-panel{order:2}
.my-bookings-panel{order:3}
.today-panel .timeline{grid-template-columns:repeat(auto-fit,minmax(440px,1fr))}
.today-panel .meeting-row{grid-template-columns:74px 5px minmax(0,1fr) auto;align-items:flex-start;padding:18px 14px}
.today-panel .meeting-info strong,
.today-panel .meeting-info small{white-space:normal;overflow:visible;text-overflow:clip}
.today-panel .meeting-info strong{font-size:17px;line-height:1.35}
.today-panel .meeting-info small{font-size:13px;line-height:1.5}
.today-panel .status{align-self:center}
.calendar-panel{padding:30px}
.my-bookings-panel .panel-head{margin-bottom:18px}
.feed-count{font-size:12px;font-weight:800;color:var(--tri-green,#233f2f);background:rgba(35,63,47,.08);border:1px solid rgba(35,63,47,.14);border-radius:999px;padding:7px 11px;white-space:nowrap}
.user-booking-feed{display:grid;grid-template-columns:1fr;gap:12px}
.user-booking-card{display:grid;grid-template-columns:84px 5px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;border:1px solid rgba(35,63,47,.10);border-left:5px solid var(--tri-green,#233f2f);border-radius:20px;background:rgba(255,255,255,.70);box-shadow:0 14px 32px rgba(35,63,47,.06);padding:14px 16px;text-align:left;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.user-booking-card:hover{background:#fff;box-shadow:0 18px 42px rgba(35,63,47,.11);transform:translateY(-1px)}
.user-booking-card .room-line{height:46px}
.feed-date strong,.feed-date small,.feed-info strong,.feed-info small{display:block}
.feed-date strong{font-size:15px;color:var(--tri-green,#233f2f)}
.feed-date small,.feed-info small{font-size:11px;color:var(--muted)}
.feed-info{min-width:0}
.feed-info strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty.compact{padding:24px 12px}
.stat-action{cursor:pointer}
.stat-action:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(18,63,49,.1)}
.stat-action:focus-visible{outline:3px solid rgba(18,63,49,.24);outline-offset:3px}
@media(max-width:760px){
  .today-panel .timeline{grid-template-columns:1fr}
  .today-panel .meeting-row{grid-template-columns:58px 4px 1fr;gap:12px}
  .today-panel .status{grid-column:3;justify-self:start;margin-top:6px}
  .user-booking-card{grid-template-columns:70px 4px minmax(0,1fr)}
  .user-booking-card .status{grid-column:3;justify-self:start}
}

/* Tri Vananda brand manifesto refinement */
body{
  color:var(--tri-ink);
  background:
    radial-gradient(circle at 91% 7%,rgba(186,185,175,.28) 0 170px,transparent 172px),
    radial-gradient(circle at 8% 90%,rgba(35,63,47,.07) 0 260px,transparent 262px),
    linear-gradient(135deg,#fff 0%,var(--tri-paper) 48%,#fff 100%);
}
.auth-shell,.app-shell{
  background:
    radial-gradient(circle at 90% 8%,rgba(186,185,175,.30) 0 170px,transparent 172px),
    radial-gradient(circle at 74% 86%,rgba(207,85,78,.11) 0 220px,transparent 222px),
    radial-gradient(circle at 12% 92%,rgba(35,63,47,.08) 0 280px,transparent 282px),
    linear-gradient(135deg,#fff 0%,var(--tri-paper) 54%,#fff 100%);
}
.auth-shell:before,.app-shell:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:linear-gradient(135deg,rgba(35,63,47,.035) 25%,transparent 25%,transparent 50%,rgba(35,63,47,.035) 50%,rgba(35,63,47,.035) 75%,transparent 75%,transparent);
  background-size:30px 30px;
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 36%,transparent 92%);
}
.main,.login-wrap,.sidebar{position:relative;z-index:1}
.panel,.stat-card,.room-card,.modal,.tri-hero-card,.tri-login-logo-wrap{
  border-color:rgba(186,185,175,.36);
  box-shadow:0 22px 58px rgba(35,63,47,.08);
}
.button.primary{
  background:linear-gradient(135deg,var(--tri-green),var(--tri-green-2));
  box-shadow:0 14px 28px rgba(35,63,47,.18);
}
.button.primary:hover,.logout-button:hover{
  background:linear-gradient(135deg,var(--tri-orange),var(--tri-orange-2));
}
.eyebrow{
  color:var(--tri-orange);
  letter-spacing:.18em;
}
.sidebar nav a:hover,.sidebar nav a.active{
  color:var(--tri-green);
  border:1px solid rgba(35,63,47,.10);
}
.app-brand-logo img{width:160px}
.login-brand,.app-brand-logo{color:var(--tri-green)}
.tri-login-art{
  background:
    radial-gradient(circle at 17% 16%,rgba(186,185,175,.48) 0 124px,transparent 126px),
    radial-gradient(circle at 77% 75%,rgba(207,85,78,.18) 0 160px,transparent 162px),
    linear-gradient(135deg,#fff 0%,var(--tri-offwhite) 56%,#fff 100%);
}
.tri-pattern-grey{background:var(--tri-beige)}
.tri-pattern-orange{background:var(--tri-orange)}
.tri-pattern-green{background:repeating-linear-gradient(45deg,var(--tri-green) 0 6px,var(--tri-green) 6px 9px,#fff 9px 14px)}
.tri-hero-card{
  background:rgba(255,255,255,.86);
  border-color:rgba(186,185,175,.44);
}
.tri-hero-card h1{
  color:var(--tri-green);
}
.tri-login-logo-wrap{
  background:rgba(255,255,255,.88);
}
.tri-login-logo{
  width:280px;
}
.calendar-nav a,.calendar-month-picker,.last-updated{
  border-color:rgba(35,63,47,.10);
}
.is-today .day-number{
  background:var(--tri-green);
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(35,63,47,.45);
  box-shadow:0 0 0 3px rgba(35,63,47,.10);
}
.toast.success{background:var(--tri-green)}
.toast.error{background:#b92b22}
@media(max-width:760px){
  .app-brand-logo img{width:96px}
  .tri-login-logo{width:210px}
}

/* Force Tri Vananda brand appearance even if production is still using older HTML classes */
body.auth-shell,
body.app-shell{
  background:
    radial-gradient(circle at 9% 8%,rgba(186,185,175,.36) 0 135px,transparent 138px),
    radial-gradient(circle at 82% 78%,rgba(207,85,78,.16) 0 230px,transparent 234px),
    radial-gradient(circle at 18% 96%,rgba(35,63,47,.10) 0 280px,transparent 284px),
    linear-gradient(135deg,#ffffff 0%,#fbfaf7 50%,#edebe9 100%) !important;
}
.login-art,
.tri-login-art{
  background:
    radial-gradient(circle at 14% 14%,rgba(186,185,175,.46) 0 140px,transparent 143px),
    radial-gradient(circle at 78% 76%,rgba(207,85,78,.20) 0 170px,transparent 174px),
    linear-gradient(135deg,#ffffff 0%,#f6f3ec 56%,#ffffff 100%) !important;
  color:var(--tri-ink) !important;
}
.login-art:before,
.tri-login-art:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background-image:linear-gradient(135deg,rgba(35,63,47,.05) 25%,transparent 25%,transparent 50%,rgba(35,63,47,.05) 50%,rgba(35,63,47,.05) 75%,transparent 75%,transparent) !important;
  background-size:28px 28px !important;
  opacity:.72 !important;
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.62) 60%,transparent 100%) !important;
}
.orb-one,
.orb-two{
  display:none !important;
}
.glass-card,
.tri-hero-card{
  max-width:860px !important;
  width:min(86%,860px) !important;
  padding:54px 64px !important;
  color:var(--tri-ink) !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(186,185,175,.52) !important;
  box-shadow:0 28px 90px rgba(35,63,47,.14) !important;
  backdrop-filter:blur(16px) !important;
}
.glass-card .eyebrow,
.tri-hero-card .eyebrow{
  color:var(--tri-orange) !important;
}
.glass-card h1,
.tri-hero-card h1{
  color:var(--tri-green) !important;
  font-size:clamp(32px,2.5vw,44px) !important;
  line-height:1.2 !important;
  letter-spacing:-1px !important;
  white-space:normal !important;
}
.glass-card p,
.tri-hero-card p{
  color:#66716a !important;
  font-size:18px !important;
}
.login-panel,
.tri-login-panel{
  background:
    radial-gradient(circle at 94% 10%,rgba(186,185,175,.22) 0 140px,transparent 143px),
    linear-gradient(180deg,#ffffff 0%,#fbfaf7 100%) !important;
}
.brand-mark{
  background:linear-gradient(145deg,var(--tri-green),var(--tri-orange)) !important;
  box-shadow:0 10px 22px rgba(35,63,47,.18) !important;
}
.button.primary,
.topbar .button.primary,
.profile .logout-button{
  background:linear-gradient(135deg,var(--tri-green),var(--tri-green-2)) !important;
  color:#fff !important;
  box-shadow:0 14px 28px rgba(35,63,47,.20) !important;
}
.sidebar{
  background:rgba(255,255,255,.90) !important;
  border-right:1px solid rgba(186,185,175,.46) !important;
  box-shadow:16px 0 52px rgba(35,63,47,.06) !important;
}
.sidebar nav a.active,
.sidebar nav a:hover{
  color:var(--tri-green) !important;
  background:#fff !important;
  border:1px solid rgba(35,63,47,.12) !important;
}
.topbar .eyebrow,
.modal .eyebrow,
.settings-panel .eyebrow,
.login-box .eyebrow{
  color:var(--tri-orange) !important;
}
.panel,
.stat-card,
.room-card,
.table-panel,
.modal{
  background:rgba(255,255,255,.90) !important;
  border-color:rgba(186,185,175,.38) !important;
  box-shadow:0 22px 58px rgba(35,63,47,.09) !important;
}
.stat-card.blue,
.stats-grid .stat-card.blue{
  color:var(--tri-green) !important;
}
.stat-card.purple,
.stats-grid .stat-card.purple{
  color:var(--tri-orange) !important;
}
.stat-card.amber,
.stats-grid .stat-card.amber{
  color:#d56b1f !important;
}
.calendar-more:hover,
.day-detail-row:hover{
  color:var(--tri-green) !important;
  background:rgba(35,63,47,.07) !important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(35,63,47,.55) !important;
  box-shadow:0 0 0 3px rgba(35,63,47,.12) !important;
}

/* Tri Vananda pastel wellness redesign - visible refresh */
:root{
  --tri-pastel-sage:#dfe9df;
  --tri-pastel-mint:#eef6ef;
  --tri-pastel-clay:#f3c9bd;
  --tri-pastel-peach:#f8e4d9;
  --tri-pastel-stone:#e7e3da;
  --tri-pastel-sand:#faf6ed;
}
body.auth-shell,
body.app-shell{
  background-color:#fbfaf7 !important;
  background-image:
    radial-gradient(ellipse at 9% 9%,rgba(186,185,175,.45) 0 120px,transparent 124px),
    radial-gradient(ellipse at 23% 18%,rgba(223,233,223,.70) 0 150px,transparent 154px),
    radial-gradient(ellipse at 80% 18%,rgba(243,201,189,.55) 0 140px,transparent 144px),
    radial-gradient(ellipse at 79% 82%,rgba(35,63,47,.13) 0 250px,transparent 255px),
    radial-gradient(ellipse at 56% 92%,rgba(207,85,78,.16) 0 230px,transparent 236px),
    linear-gradient(135deg,#fff 0%,#fbfaf7 42%,#f4efe6 100%) !important;
}
body.auth-shell:before,
body.app-shell:before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(135deg,rgba(35,63,47,.045) 25%,transparent 25%,transparent 50%,rgba(35,63,47,.045) 50%,rgba(35,63,47,.045) 75%,transparent 75%,transparent),
    linear-gradient(90deg,rgba(255,255,255,.45),transparent 50%,rgba(255,255,255,.52)) !important;
  background-size:34px 34px,100% 100% !important;
  mask-image:none !important;
  opacity:1 !important;
}
body.app-shell:after,
body.auth-shell:after{
  content:"" !important;
  position:fixed !important;
  right:-110px !important;
  bottom:-70px !important;
  width:440px !important;
  height:310px !important;
  border-radius:55% 45% 50% 50% !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:repeating-linear-gradient(45deg,rgba(35,63,47,.20) 0 7px,rgba(35,63,47,.20) 7px 10px,transparent 10px 18px) !important;
  opacity:.34 !important;
}
.main{
  padding-top:54px !important;
}
.sidebar{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(250,246,237,.91)) !important;
  border-right:1px solid rgba(186,185,175,.55) !important;
  box-shadow:18px 0 58px rgba(35,63,47,.08) !important;
}
.app-brand-logo{
  padding:0 8px 26px !important;
  border-bottom:1px solid rgba(186,185,175,.45) !important;
}
.app-brand-logo img{
  width:178px !important;
  filter:none !important;
}
.sidebar nav{
  gap:10px !important;
  margin-top:42px !important;
}
.sidebar nav a{
  min-height:58px !important;
  border:1px solid transparent !important;
  border-radius:18px !important;
  color:#66716a !important;
}
.sidebar nav a.active,
.sidebar nav a:hover{
  background:linear-gradient(135deg,#fff,rgba(238,246,239,.92)) !important;
  color:var(--tri-green) !important;
  border-color:rgba(35,63,47,.16) !important;
  box-shadow:0 14px 32px rgba(35,63,47,.10) !important;
}
.profile{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(186,185,175,.36) !important;
  border-radius:22px !important;
  padding:14px !important;
}
.profile .avatar,
.avatar{
  background:linear-gradient(145deg,#e6efe6,#f2d5ca) !important;
  color:var(--tri-green) !important;
  border:1px solid rgba(35,63,47,.10) !important;
}
.topbar{
  padding:12px 4px 4px !important;
}
.topbar h1{
  color:var(--tri-green) !important;
  font-size:40px !important;
  letter-spacing:-1.5px !important;
}
.topbar .muted{
  color:#66716a !important;
  font-size:16px !important;
}
.eyebrow{
  color:var(--tri-orange) !important;
  font-weight:800 !important;
  letter-spacing:.23em !important;
}
.button.primary,
.topbar .button.primary,
.profile .logout-button{
  border-radius:18px !important;
  background:linear-gradient(135deg,#1f4b38,#233f2f 58%,#cf554e 155%) !important;
  color:#fff !important;
  box-shadow:0 18px 34px rgba(35,63,47,.22) !important;
}
.button.secondary{
  background:rgba(255,255,255,.70) !important;
  color:var(--tri-green) !important;
  border:1px solid rgba(35,63,47,.10) !important;
}
.stats-grid{
  gap:22px !important;
}
.stat-card{
  min-height:132px !important;
  border-radius:28px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.93),rgba(250,246,237,.76)) !important;
  border:1px solid rgba(186,185,175,.42) !important;
  box-shadow:0 22px 60px rgba(35,63,47,.08) !important;
}
.stat-card:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:7px !important;
  background:linear-gradient(90deg,var(--tri-green),var(--tri-orange)) !important;
  opacity:.9 !important;
}
.stat-card:after{
  width:130px !important;
  height:130px !important;
  right:-38px !important;
  top:-44px !important;
  opacity:.14 !important;
}
.stat-card span{
  font-weight:700 !important;
  color:#66716a !important;
}
.stat-card strong{
  font-size:42px !important;
}
.panel,
.room-card,
.table-panel,
.modal,
.email-settings-grid .panel{
  border-radius:30px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(250,246,237,.82)) !important;
  border:1px solid rgba(186,185,175,.44) !important;
  box-shadow:0 28px 78px rgba(35,63,47,.09) !important;
}
.panel-head h2,
.panel h2,
.room-card h2{
  color:var(--tri-green) !important;
  letter-spacing:-.4px !important;
}
.today-panel,
.calendar-panel{
  position:relative !important;
  overflow:hidden !important;
}
.today-panel:before,
.calendar-panel:before{
  content:"" !important;
  position:absolute !important;
  right:-60px !important;
  top:-78px !important;
  width:190px !important;
  height:150px !important;
  border-radius:48% !important;
  background:rgba(243,201,189,.42) !important;
  pointer-events:none !important;
}
.today-panel:after,
.calendar-panel:after{
  content:"" !important;
  position:absolute !important;
  left:-80px !important;
  bottom:-86px !important;
  width:250px !important;
  height:190px !important;
  border-radius:50% !important;
  background:repeating-linear-gradient(45deg,rgba(35,63,47,.10) 0 7px,rgba(35,63,47,.10) 7px 10px,transparent 10px 18px) !important;
  pointer-events:none !important;
}
.today-panel > *,
.calendar-panel > *{
  position:relative !important;
  z-index:1 !important;
}
.meeting-row{
  background:rgba(255,255,255,.62) !important;
  border:1px solid rgba(35,63,47,.08) !important;
  border-radius:22px !important;
  box-shadow:0 12px 28px rgba(35,63,47,.05) !important;
}
.meeting-row:hover{
  background:#fff !important;
  box-shadow:0 18px 42px rgba(35,63,47,.10) !important;
}
.meeting-row.now-meeting{
  background:linear-gradient(135deg,rgba(238,246,239,.96),rgba(255,255,255,.90)) !important;
  border-color:rgba(52,199,89,.45) !important;
}
.calendar{
  border-color:rgba(186,185,175,.45) !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.52) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.70) !important;
}
.weekday{
  background:linear-gradient(180deg,#fff,#f7f2e8) !important;
  color:var(--tri-green) !important;
  font-weight:800 !important;
}
.day{
  background:rgba(255,255,255,.56) !important;
}
.day:hover{
  background:rgba(238,246,239,.64) !important;
}
.is-today .day-number{
  background:linear-gradient(135deg,var(--tri-green),#38634c) !important;
  box-shadow:0 8px 18px rgba(35,63,47,.20) !important;
}
.calendar-event{
  border-radius:10px !important;
  font-weight:700 !important;
}
.status-bg-approved{
  background:#dff3df !important;
  color:#1e5a34 !important;
}
.status-bg-pending{
  background:#ffeec3 !important;
  color:#895600 !important;
}
.status-bg-rejected{
  background:#f9d5ce !important;
  color:#9f2f24 !important;
}
.status-bg-cancelled{
  background:#e6e2dc !important;
  color:#736c63 !important;
}
.login-wrap{
  background:
    radial-gradient(circle at 74% 80%,rgba(35,63,47,.10),transparent 28%),
    linear-gradient(135deg,#fff,#fbfaf7) !important;
}
.login-art,
.tri-login-art{
  background:
    radial-gradient(circle at 12% 14%,rgba(186,185,175,.42) 0 140px,transparent 144px),
    radial-gradient(circle at 76% 26%,rgba(243,201,189,.62) 0 120px,transparent 124px),
    radial-gradient(circle at 70% 84%,rgba(223,233,223,.78) 0 210px,transparent 214px),
    linear-gradient(135deg,#fff 0%,#f7f2e9 100%) !important;
}
.glass-card,
.tri-hero-card{
  background:rgba(255,255,255,.86) !important;
  border-radius:38px !important;
  border-color:rgba(186,185,175,.54) !important;
  box-shadow:0 35px 90px rgba(35,63,47,.13) !important;
}
.glass-card h1,
.tri-hero-card h1{
  color:var(--tri-green) !important;
  text-shadow:none !important;
}
.login-panel,
.tri-login-panel{
  background:
    radial-gradient(circle at 88% 12%,rgba(243,201,189,.25),transparent 24%),
    radial-gradient(circle at 8% 92%,rgba(223,233,223,.56),transparent 26%),
    #fff !important;
}
.tri-login-logo-wrap{
  background:linear-gradient(145deg,#fff,#fbfaf7) !important;
  border:1px solid rgba(186,185,175,.48) !important;
  box-shadow:0 24px 62px rgba(35,63,47,.09) !important;
}
input,
select,
textarea{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(35,63,47,.12) !important;
}
@media(max-width:760px){
  .topbar h1{font-size:30px !important}
  .stat-card{min-height:108px !important}
  .glass-card,.tri-hero-card{padding:34px 28px !important;width:94% !important}
}

/* Tri Vananda Apple style redesign with menu press effect */
:root{
  --apple-glass:rgba(255,255,255,.72);
  --apple-glass-strong:rgba(255,255,255,.88);
  --apple-glass-soft:rgba(255,255,255,.58);
  --apple-line:rgba(35,63,47,.12);
  --apple-shadow:0 28px 78px rgba(23,36,30,.11);
  --apple-shadow-soft:0 12px 34px rgba(23,36,30,.075);
  --apple-radius:28px;
}
html{
  background:#fbfaf7 !important;
}
body.auth-shell,
body.app-shell{
  color:var(--tri-ink,#15241f) !important;
  background:
    radial-gradient(circle at 8% 2%,rgba(186,185,175,.34) 0 210px,transparent 214px),
    radial-gradient(circle at 88% 9%,rgba(35,63,47,.11) 0 250px,transparent 254px),
    radial-gradient(circle at 82% 92%,rgba(207,85,78,.13) 0 310px,transparent 314px),
    linear-gradient(135deg,#ffffff 0%,#fbfaf7 46%,#f2f0eb 100%) !important;
}
body.auth-shell:before,
body.app-shell:before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;
  opacity:.42 !important;
  background:
    linear-gradient(135deg,rgba(35,63,47,.030) 25%,transparent 25%,transparent 50%,rgba(35,63,47,.030) 50%,rgba(35,63,47,.030) 75%,transparent 75%,transparent) !important;
  background-size:42px 42px !important;
}
body.auth-shell:after,
body.app-shell:after{
  content:"" !important;
  position:fixed !important;
  right:-90px !important;
  bottom:-90px !important;
  width:410px !important;
  height:410px !important;
  border-radius:44% 56% 48% 52% !important;
  background:
    repeating-linear-gradient(45deg,rgba(35,63,47,.11) 0 8px,transparent 8px 18px),
    rgba(237,235,233,.28) !important;
  z-index:-1 !important;
  pointer-events:none !important;
  opacity:.36 !important;
}
.sidebar{
  background:rgba(255,255,255,.78) !important;
  border-right:1px solid rgba(255,255,255,.72) !important;
  backdrop-filter:blur(30px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(30px) saturate(1.2) !important;
  box-shadow:22px 0 70px rgba(23,36,30,.075) !important;
}
.sidebar .logo,
.brand-block{
  filter:none !important;
}
.sidebar nav a{
  position:relative !important;
  overflow:hidden !important;
  min-height:58px !important;
  border-radius:18px !important;
  color:#66716a !important;
  border:1px solid transparent !important;
  background:transparent !important;
  transform:translateZ(0) !important;
  transition:
    transform .16s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease !important;
}
.sidebar nav a:before{
  content:"" !important;
  position:absolute !important;
  left:10px !important;
  top:50% !important;
  width:4px !important;
  height:0 !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,var(--tri-green,#233f2f),var(--tri-orange,#cf554e)) !important;
  transform:translateY(-50%) !important;
  transition:height .22s ease !important;
}
.sidebar nav a:after{
  content:"" !important;
  position:absolute !important;
  inset:-22px !important;
  background:radial-gradient(circle at var(--menu-x,50%) var(--menu-y,50%),rgba(35,63,47,.18),rgba(207,85,78,.10) 18%,transparent 44%) !important;
  opacity:0 !important;
  transform:scale(.75) !important;
  pointer-events:none !important;
}
.sidebar nav a:hover{
  color:var(--tri-green,#233f2f) !important;
  background:rgba(255,255,255,.62) !important;
  border-color:rgba(35,63,47,.08) !important;
  transform:translateX(4px) !important;
  box-shadow:0 12px 30px rgba(23,36,30,.06) !important;
}
.sidebar nav a:hover:before,
.sidebar nav a.active:before{
  height:30px !important;
}
.sidebar nav a.active{
  color:var(--tri-green,#233f2f) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(237,235,233,.70)) !important;
  border-color:rgba(35,63,47,.10) !important;
  box-shadow:0 18px 42px rgba(23,36,30,.10) !important;
}
.sidebar nav a:active{
  transform:translateX(4px) scale(.972) !important;
  box-shadow:inset 0 0 0 1px rgba(35,63,47,.16),0 8px 18px rgba(23,36,30,.08) !important;
}
.sidebar nav a.menu-pressed:after{
  animation:tri-menu-ripple .42s cubic-bezier(.2,.8,.2,1) !important;
}
@keyframes tri-menu-ripple{
  0%{opacity:.82;transform:scale(.62)}
  60%{opacity:.26;transform:scale(1.05)}
  100%{opacity:0;transform:scale(1.18)}
}
.button,
button,
.chip,
.month-picker select,
.month-picker button{
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background .22s ease,border-color .22s ease !important;
}
.button:active,
button:active,
.month-picker button:active{
  transform:scale(.976) !important;
}
.button.primary,
button.primary,
.new-booking,
.new-room,
.new-user{
  background:linear-gradient(135deg,var(--tri-green,#233f2f),#14583f) !important;
  color:#fff !important;
  box-shadow:0 18px 38px rgba(35,63,47,.22) !important;
}
.button.primary:hover,
button.primary:hover,
.new-booking:hover,
.new-room:hover,
.new-user:hover{
  background:linear-gradient(135deg,#174c39,var(--tri-orange,#cf554e)) !important;
  box-shadow:0 24px 50px rgba(35,63,47,.25) !important;
}
.panel,
.stat-card,
.room-card,
.modal,
.table-panel,
.today-panel,
.calendar-panel,
.login-panel,
.tri-login-panel,
.glass-card,
.tri-hero-card,
.tri-login-logo-wrap{
  background:var(--apple-glass-strong) !important;
  border:1px solid rgba(255,255,255,.76) !important;
  box-shadow:var(--apple-shadow) !important;
  backdrop-filter:blur(26px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.18) !important;
}
.panel,
.today-panel,
.calendar-panel,
.table-panel{
  border-radius:30px !important;
}
.stat-card{
  min-height:128px !important;
  border-radius:26px !important;
  background:
    radial-gradient(circle at 92% 0%,rgba(35,63,47,.08) 0 56px,transparent 58px),
    linear-gradient(145deg,rgba(255,255,255,.93),rgba(237,235,233,.62)) !important;
}
.stat-card:nth-child(2){
  background:
    radial-gradient(circle at 92% 0%,rgba(207,85,78,.10) 0 56px,transparent 58px),
    linear-gradient(145deg,rgba(255,255,255,.93),rgba(237,235,233,.62)) !important;
}
.stat-card:nth-child(3){
  background:
    radial-gradient(circle at 92% 0%,rgba(255,159,10,.12) 0 56px,transparent 58px),
    linear-gradient(145deg,rgba(255,255,255,.93),rgba(237,235,233,.62)) !important;
}
.stat-card:before,
.today-panel:after,
.calendar-panel:after{
  opacity:.16 !important;
}
.topbar .eyebrow,
.eyebrow{
  color:var(--tri-orange,#cf554e) !important;
  letter-spacing:.22em !important;
}
.topbar h1,
.page-title,
.calendar-panel h2,
.today-panel h2,
.login-panel h1,
.tri-login-panel h1,
.glass-card h1,
.tri-hero-card h1{
  color:var(--tri-ink,#15241f) !important;
}
.calendar{
  background:rgba(255,255,255,.50) !important;
  border:1px solid rgba(35,63,47,.10) !important;
  border-radius:24px !important;
  overflow:hidden !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80) !important;
}
.weekday{
  background:rgba(255,255,255,.68) !important;
  color:var(--tri-green,#233f2f) !important;
}
.day{
  background:rgba(255,255,255,.38) !important;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease !important;
}
.day:hover{
  background:rgba(255,255,255,.76) !important;
  box-shadow:inset 0 0 0 1px rgba(35,63,47,.08) !important;
}
.calendar-event{
  box-shadow:inset 3px 0 0 rgba(35,63,47,.24) !important;
}
.meeting-row{
  background:rgba(255,255,255,.70) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:0 14px 34px rgba(23,36,30,.075) !important;
}
.meeting-row:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 20px 46px rgba(23,36,30,.11) !important;
}
.meeting-row.now-meeting{
  background:linear-gradient(135deg,rgba(232,248,236,.94),rgba(255,255,255,.82)) !important;
  border-color:rgba(52,199,89,.48) !important;
  box-shadow:0 20px 52px rgba(52,199,89,.14) !important;
}
input,
select,
textarea{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(35,63,47,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(35,63,47,.34) !important;
  box-shadow:0 0 0 5px rgba(35,63,47,.10),inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.login-art,
.tri-login-art{
  background:
    radial-gradient(circle at 7% 8%,rgba(186,185,175,.40) 0 185px,transparent 188px),
    radial-gradient(circle at 78% 28%,rgba(207,85,78,.16) 0 145px,transparent 148px),
    radial-gradient(circle at 76% 84%,rgba(35,63,47,.12) 0 240px,transparent 244px),
    linear-gradient(135deg,#ffffff 0%,#fbfaf7 54%,#edebe9 100%) !important;
}
.glass-card,
.tri-hero-card{
  border-radius:34px !important;
  max-width:min(760px,86%) !important;
  width:fit-content !important;
  min-width:min(720px,86%) !important;
  padding:58px 64px !important;
}
.glass-card h1,
.tri-hero-card h1{
  max-width:100% !important;
  white-space:normal !important;
  line-height:1.14 !important;
}
.tri-login-logo-wrap{
  border-radius:30px !important;
  padding:34px 42px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(251,250,247,.80)) !important;
}
.tri-login-logo-wrap img,
.app-brand-logo{
  filter:none !important;
}
.toast.success,
.flash.success{
  background:linear-gradient(135deg,var(--tri-green,#233f2f),#1d6d4c) !important;
  color:#fff !important;
}
.toast.error,
.flash.error{
  background:linear-gradient(135deg,#b92d24,var(--tri-orange,#cf554e)) !important;
  color:#fff !important;
}
@media(max-width:1100px){
  .glass-card,
  .tri-hero-card{
    min-width:0 !important;
    width:88% !important;
    padding:42px 34px !important;
  }
}
@media(max-width:760px){
  .sidebar nav a:hover,
  .sidebar nav a:active{
    transform:scale(.985) !important;
  }
  .stat-card{
    min-height:112px !important;
  }
  .panel,
  .today-panel,
  .calendar-panel,
  .table-panel{
    border-radius:24px !important;
  }
}

/* Excel CSV import/export controls */
.header-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}
.topbar > .header-actions + .button,
.topbar > button.new-user{
  margin-left:10px;
}

/* Performance tune: make modal and button interactions feel lighter */
.modal::backdrop{
  background:rgba(20,22,26,.26) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.modal{
  box-shadow:0 18px 58px rgba(0,0,0,.18) !important;
  will-change:auto !important;
}
.button,
button{
  transition:transform .08s ease,background .12s ease,border-color .12s ease,box-shadow .12s ease !important;
}
.button:hover,
button:hover{
  transform:none !important;
}
.button:active,
button:active{
  transform:scale(.99) !important;
}
.button.is-submitting{
  opacity:.78 !important;
  pointer-events:none !important;
  transform:none !important;
}
.button.is-submitting::after{
  content:"";
  width:14px;
  height:14px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:button-spin .7s linear infinite;
}
@keyframes button-spin{
  to{transform:rotate(360deg)}
}
.bookable-day{
  cursor:pointer;
  transition:background .12s ease,box-shadow .12s ease !important;
}
.bookable-day:hover{
  background:rgba(35,63,47,.045) !important;
  box-shadow:inset 0 0 0 2px rgba(35,63,47,.22) !important;
}
.bookable-day:active{
  background:rgba(35,63,47,.075) !important;
}
@media(max-width:900px){
  .header-actions{
    justify-content:flex-start;
    width:100%;
    margin-top:14px;
  }
}

/* Mobile responsive mode */
@media(max-width:820px){
  html{
    -webkit-text-size-adjust:100%;
  }
  body{
    overflow-x:hidden;
  }
  body.app-shell{
    display:block !important;
    padding-bottom:86px !important;
  }
  .sidebar{
    position:sticky !important;
    top:0 !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 12px !important;
    background:rgba(255,255,255,.92) !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(35,63,47,.12) !important;
    box-shadow:0 10px 30px rgba(35,63,47,.08) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    z-index:50 !important;
  }
  .app-brand-logo{
    padding:0 !important;
    min-width:0 !important;
  }
  .app-brand-logo img{
    width:58px !important;
    height:auto !important;
    display:block !important;
  }
  .sidebar nav{
    grid-column:2 !important;
    display:flex !important;
    gap:6px !important;
    margin:0 !important;
    overflow-x:auto !important;
    overscroll-behavior-x:contain !important;
    scrollbar-width:none !important;
    padding:2px 0 !important;
  }
  .sidebar nav::-webkit-scrollbar{
    display:none !important;
  }
  .sidebar nav a{
    flex:0 0 auto !important;
    min-width:max-content !important;
    padding:9px 11px !important;
    border-radius:14px !important;
    gap:7px !important;
    white-space:nowrap !important;
    font-size:12px !important;
  }
  .sidebar nav a span{
    display:grid !important;
    line-height:1.15 !important;
  }
  .sidebar nav a span small{
    display:none !important;
  }
  .profile{
    grid-column:3 !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
  }
  .profile .avatar{
    width:34px !important;
    height:34px !important;
    flex:0 0 auto !important;
  }
  .profile div:not(.avatar){
    display:none !important;
  }
  .profile .logout-button{
    display:flex !important;
    grid-column:auto !important;
    min-height:34px !important;
    padding:8px 12px !important;
    border-radius:14px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }
  .main{
    grid-column:auto !important;
    width:100% !important;
    max-width:none !important;
    padding:18px 12px 96px !important;
    margin:0 !important;
  }
  .topbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    margin-bottom:16px !important;
  }
  .topbar h1{
    font-size:28px !important;
    line-height:1.12 !important;
    letter-spacing:-.6px !important;
    margin:4px 0 !important;
  }
  .topbar .muted{
    font-size:13px !important;
    line-height:1.45 !important;
  }
  .topbar .button[data-open="bookingModal"]{
    position:fixed !important;
    right:14px !important;
    bottom:16px !important;
    z-index:80 !important;
    width:auto !important;
    min-height:48px !important;
    padding:13px 18px !important;
    border-radius:999px !important;
    box-shadow:0 16px 42px rgba(35,63,47,.22) !important;
  }
  .stats-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-bottom:14px !important;
  }
  .stat-card{
    min-height:92px !important;
    padding:16px 18px !important;
    border-radius:22px !important;
  }
  .stat-card strong{
    font-size:30px !important;
  }
  .dashboard-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .panel,
  .today-panel,
  .calendar-panel,
  .my-bookings-panel,
  .table-panel{
    width:100% !important;
    padding:18px !important;
    border-radius:24px !important;
    overflow:hidden !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .panel-head{
    align-items:flex-start !important;
    gap:12px !important;
    flex-wrap:wrap !important;
    margin-bottom:16px !important;
  }
  .panel h2,
  .today-panel h2,
  .calendar-panel h2{
    font-size:21px !important;
    line-height:1.2 !important;
  }
  .today-panel .timeline{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .today-panel .meeting-row,
  .meeting-row{
    grid-template-columns:62px 4px minmax(0,1fr) !important;
    gap:12px !important;
    padding:14px 12px !important;
  }
  .today-panel .meeting-row .status,
  .meeting-row .status{
    grid-column:3 !important;
    justify-self:start !important;
    margin-top:6px !important;
  }
  .meeting-info strong,
  .meeting-info small{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  .user-booking-card{
    grid-template-columns:74px 4px minmax(0,1fr) !important;
    gap:12px !important;
    padding:14px 12px !important;
  }
  .user-booking-card .status{
    grid-column:3 !important;
    justify-self:start !important;
  }
  .feed-count{
    margin-left:0 !important;
  }
  .calendar-panel{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .calendar-panel .panel-head{
    min-width:0 !important;
  }
  .calendar-nav{
    width:100% !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:8px !important;
  }
  .calendar-month-picker{
    grid-column:1 / -1 !important;
    order:3 !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    padding:10px !important;
    border-radius:18px !important;
  }
  .calendar-month-picker label,
  .calendar-month-picker .room-picker-field{
    min-width:0 !important;
  }
  .calendar-month-picker .room-picker-field{
    grid-column:1 / -1 !important;
  }
  .calendar-month-picker select,
  .calendar-month-picker [data-room-select],
  .calendar-month-picker [data-year-select]{
    width:100% !important;
    min-width:0 !important;
    height:40px !important;
    font-size:13px !important;
  }
  .calendar-month-picker .button{
    grid-column:1 / -1 !important;
    height:42px !important;
    font-size:14px !important;
  }
  .selected-room-heading{
    max-width:100% !important;
    flex-wrap:wrap !important;
    line-height:1.35 !important;
  }
  .calendar{
    min-width:760px !important;
    border-radius:20px !important;
  }
  .day{
    min-height:116px !important;
    padding:8px !important;
  }
  .weekday{
    padding:9px 4px !important;
  }
  .calendar-event{
    min-height:24px !important;
    font-size:10px !important;
    padding:5px 7px !important;
  }
  .legend{
    min-width:760px !important;
    justify-content:flex-start !important;
    gap:10px !important;
    padding-bottom:4px !important;
  }
  .last-updated{
    right:10px !important;
    bottom:76px !important;
    font-size:9px !important;
    max-width:calc(100vw - 20px) !important;
  }
  .modal{
    width:calc(100vw - 20px) !important;
    max-width:none !important;
    max-height:92dvh !important;
    border-radius:24px !important;
    overflow:auto !important;
  }
  .modal form,
  .detail-modal > div{
    padding:20px !important;
  }
  .modal-head{
    margin-bottom:16px !important;
  }
  .modal h2{
    font-size:22px !important;
    line-height:1.2 !important;
  }
  .form-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .form-grid .full{
    grid-column:auto !important;
  }
  input,
  select,
  textarea{
    min-height:44px !important;
    font-size:16px !important;
  }
  .modal-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin-top:18px !important;
  }
  .modal-actions .button{
    width:100% !important;
    min-height:46px !important;
  }
  .detail-list{
    grid-template-columns:1fr !important;
  }
  .room-grid,
  .permission-grid,
  .approver-room-grid,
  .email-settings-grid{
    grid-template-columns:1fr !important;
  }
  .room-card,
  .settings-panel,
  .test-panel{
    width:100% !important;
  }
  .table-panel{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  table{
    min-width:760px !important;
  }
  .header-actions{
    justify-content:flex-start !important;
    width:100% !important;
  }
  .header-actions .button{
    flex:1 1 160px !important;
  }
}

@media(max-width:420px){
  .main{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .sidebar{
    grid-template-columns:auto 1fr !important;
  }
  .profile{
    grid-column:1 / -1 !important;
    width:100% !important;
    justify-content:space-between !important;
    padding-top:8px !important;
    border-top:1px solid rgba(35,63,47,.10) !important;
  }
  .profile div:not(.avatar){
    display:block !important;
    min-width:0 !important;
  }
  .profile strong{
    max-width:160px !important;
    font-size:12px !important;
  }
  .profile small{
    font-size:10px !important;
  }
  .topbar h1{
    font-size:25px !important;
  }
  .calendar-month-picker{
    grid-template-columns:1fr !important;
  }
  .calendar-month-picker .room-picker-field,
  .calendar-month-picker .button{
    grid-column:auto !important;
  }
  .user-booking-card{
    grid-template-columns:1fr !important;
  }
  .user-booking-card .room-line{
    width:100% !important;
    height:4px !important;
  }
  .user-booking-card .status{
    grid-column:auto !important;
  }
}

/* Booking report */
.report-topbar .header-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.report-selector-panel{margin-bottom:18px}.report-selector-panel .section-title{margin-bottom:14px}.report-type-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:14px}.report-type-card{display:flex;gap:16px;align-items:center;padding:18px 20px;border:1px solid rgba(18,63,49,.1);border-radius:22px;background:rgba(255,255,255,.72);color:#123f31;text-decoration:none;box-shadow:0 14px 36px rgba(18,63,49,.06);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}.report-type-card:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(18,63,49,.1);border-color:rgba(18,63,49,.28)}.report-type-card.active{background:linear-gradient(135deg,rgba(22,75,56,.96),rgba(78,57,44,.9));border-color:#164b38;color:#fff}.report-type-card.disabled{opacity:.58;cursor:not-allowed}.report-type-card strong,.report-type-card span{display:block}.report-type-card strong{font-size:18px}.report-type-card span:not(.report-type-number){margin-top:4px;color:inherit;opacity:.78}.report-type-number{width:48px;height:48px;border-radius:16px;background:rgba(203,82,57,.13);color:#cb5239;display:grid;place-items:center;font-weight:900;letter-spacing:1px;flex:0 0 auto}.report-type-card.active .report-type-number{background:rgba(255,255,255,.18);color:#fff}.report-filter-panel{margin-bottom:18px}.report-filter-form{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr)) auto;gap:14px;align-items:end}.report-print-page{display:grid;gap:18px}.report-document-head{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:22px 24px;border:1px solid rgba(18,63,49,.1);border-radius:24px;background:rgba(255,255,255,.78);box-shadow:0 18px 48px rgba(18,63,49,.08)}.report-document-head h2{margin:3px 0 7px;color:#123f31;font-size:28px;letter-spacing:-.7px}.report-logo-wrap{width:92px;height:92px;border-radius:22px;background:#fff;border:1px solid rgba(18,63,49,.08);display:grid;place-items:center;box-shadow:0 12px 30px rgba(18,63,49,.08)}.report-logo-wrap img{max-width:74px;max-height:74px}.report-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:12px}.report-summary-card{border:1px solid rgba(18,63,49,.08);border-radius:18px;padding:16px 18px;background:rgba(255,255,255,.82);box-shadow:0 12px 34px rgba(18,63,49,.06)}.report-summary-card span,.report-table small{display:block;color:var(--muted);font-size:11px}.report-summary-card strong{display:block;margin-top:6px;font-size:30px;line-height:1;color:#123f31}.report-summary-card.pending strong{color:#c47500}.report-summary-card.approved strong{color:#247a3b}.report-summary-card.rejected strong{color:#c0372d}.report-summary-card.cancelled strong{color:#777}.report-table-panel{padding:16px;overflow:auto}.report-table{min-width:1280px;border-collapse:separate;border-spacing:0}.report-table th{background:#f7f5ef;color:#123f31;border-bottom:1px solid rgba(18,63,49,.12);white-space:nowrap}.report-table th:first-child{border-top-left-radius:14px}.report-table th:last-child{border-top-right-radius:14px}.report-table td{vertical-align:top;background:rgba(255,255,255,.62)}.report-table tbody tr:hover td{background:#fff}.report-room-dot{display:inline-block;width:9px;height:28px;border-radius:10px;vertical-align:middle;margin-right:8px}.report-empty{text-align:center;color:var(--muted);padding:34px!important}.report-print-toolbar{position:sticky;top:12px;z-index:10;display:flex;justify-content:flex-end;gap:10px;margin-bottom:14px}
@media(max-width:900px){.report-type-grid{grid-template-columns:1fr}.report-filter-form{grid-template-columns:1fr}.report-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-document-head{grid-template-columns:1fr}}
@media print{body{background:#fff!important}.sidebar,.print-hidden,.toast,.last-updated{display:none!important}.app-shell{display:block!important}.main{grid-column:auto!important;padding:0!important;max-width:none!important}.report-print-page{gap:12px}.report-document-head,.report-summary-card,.report-table-panel{box-shadow:none!important;background:#fff!important;border-color:#d9ded8!important}.report-document-head{padding:10px 0 14px;border:0!important;border-bottom:2px solid #123f31!important;border-radius:0!important}.report-logo-wrap{width:70px;height:70px;box-shadow:none!important}.report-logo-wrap img{max-width:56px;max-height:56px}.report-document-head h2{font-size:22px}.report-summary-grid{grid-template-columns:repeat(5,1fr);gap:8px}.report-summary-card{padding:9px 10px;border-radius:10px}.report-summary-card strong{font-size:20px}.report-table-panel{padding:0;overflow:visible;border:0}.report-table{min-width:0;width:100%;font-size:10px;border-collapse:collapse}.report-table th,.report-table td{padding:6px;border:1px solid #dde2dc;background:#fff!important}.report-table th{color:#123f31!important;background:#eef2ec!important}.status{border:1px solid currentColor;background:#fff!important}}

/* Sidebar report submenu */
.sidebar nav .nav-group{display:grid;gap:6px}
.sidebar nav .nav-group>a{width:100%}
.sidebar nav .nav-heading{display:flex;align-items:center;gap:13px;min-height:58px;padding:12px 14px;border-radius:18px;color:var(--tri-green,#233f2f);font-weight:700;background:rgba(255,255,255,.54);border:1px solid rgba(35,63,47,.10);box-shadow:0 10px 24px rgba(35,63,47,.07);cursor:default}
.sidebar nav .nav-heading span{display:grid}
.sidebar nav .nav-heading small{font-size:9px;font-weight:400;opacity:.75}
.sidebar-subnav{display:grid;gap:6px;margin:0 0 4px 22px;padding-left:12px;border-left:2px solid rgba(35,63,47,.12)}
.sidebar nav .sidebar-subnav a{min-height:46px!important;padding:10px 12px!important;border-radius:14px!important;font-size:12px!important;background:rgba(255,255,255,.42)!important}
.sidebar nav .sidebar-subnav a span{display:grid!important}
.sidebar nav .sidebar-subnav a span small{font-size:9px!important;opacity:.68!important;margin-top:2px!important}
.sidebar nav .sidebar-subnav a.active{background:linear-gradient(135deg,rgba(35,63,47,.12),rgba(207,85,78,.08))!important;border-color:rgba(35,63,47,.20)!important;color:var(--tri-green,#233f2f)!important}
@media(max-width:760px){.sidebar nav .nav-group{display:flex!important;gap:6px}.sidebar-subnav{display:flex!important;margin:0!important;padding:0!important;border:0!important}.sidebar nav .sidebar-subnav a{min-height:42px!important}}

/* Report room cell cleanup */
.report-table .report-room-cell{display:flex;align-items:center;gap:9px;white-space:nowrap}
.report-table .report-room-cell .report-room-dot{margin-right:0;flex:0 0 auto}

/* Keep monthly calendar controls in view after changing month/year/room filters */
#monthCalendar,.calendar-panel{scroll-margin-top:22px}

/* Dashboard final order override: Calendar first, Today's Meetings second, My Upcoming third */
.dashboard-grid>.calendar-panel{order:1!important}
.dashboard-grid>.today-panel{order:2!important}
.dashboard-grid>.my-bookings-panel{order:3!important}