:root{--blue:#062b5c;--blue-2:#0c3b78;--gold:#f5b400;--gold-2:#fff4cf;--green:#138a57;--green-bg:#e7f6ee;--red:#c2413b;--red-bg:#fdeceb;--orange:#b86616;--orange-bg:#fff2df;--ink:#172033;--muted:#687386;--line:#dfe5ee;--soft:#f4f7fb;--white:#fff;--shadow:0 18px 48px #062b5c1f;--radius:8px;color:var(--ink);background:var(--soft);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--soft);min-width:320px;margin:0}button,input,select{font:inherit}button:disabled{cursor:not-allowed;opacity:.68}a{color:inherit}#root{min-height:100svh}.app-shell{grid-template-columns:268px minmax(0,1fr);min-height:100svh;display:grid}.sidebar{background:var(--blue);height:100svh;color:var(--white);z-index:20;padding:20px 16px;position:sticky;top:0}.brand{align-items:center;gap:12px;min-height:48px;text-decoration:none;display:flex}.brand-mark{border-radius:var(--radius);background:var(--gold);width:42px;height:42px;color:var(--blue);flex:0 0 42px;place-items:center;font-weight:900;display:inline-grid}.brand strong,.brand small{display:block}.brand small{color:#ffffffb3;margin-top:2px;font-size:12px}.nav-list{gap:4px;margin-top:28px;display:grid}.nav-list a{border-radius:var(--radius);color:#ffffffbd;align-items:center;gap:12px;min-height:42px;padding:0 12px;text-decoration:none;display:flex}.nav-list a.active,.nav-list a:hover{color:var(--white);background:#ffffff1f}.workspace{min-width:0}.topbar{z-index:12;border-bottom:1px solid var(--line);background:#fffffff0;align-items:center;gap:12px;min-height:68px;padding:12px 26px;display:flex;position:sticky;top:0}.topbar-company{color:var(--blue);white-space:nowrap;align-items:center;gap:8px;font-weight:800;display:inline-flex}.global-search,.search-box,.select-filter{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);min-height:40px;color:var(--muted);align-items:center;gap:8px;display:flex}.global-search{flex:1;max-width:520px;margin-left:auto;padding:0 12px}.global-search input,.search-box input,.field input,.field select,.select-filter select{width:100%;color:var(--ink);background:0 0;border:0;outline:0}.icon-button,.avatar-button,.primary-button,.secondary-button,.danger-button{border-radius:var(--radius);border:1px solid var(--line);background:var(--white);min-height:38px;color:var(--blue);cursor:pointer;white-space:nowrap;justify-content:center;align-items:center;gap:8px;text-decoration:none;display:inline-flex}.icon-button{width:38px;padding:0}.icon-button:hover,.secondary-button:hover{border-color:var(--blue)}.icon-button.danger,.danger-button{color:var(--red)}.avatar-button{background:var(--blue);width:38px;color:var(--white);border-color:var(--blue);padding:0;font-weight:800}.primary-button,.secondary-button,.danger-button{padding:0 14px;font-weight:800}.primary-button{background:var(--gold);border-color:var(--gold);color:var(--blue)}.danger-button{background:var(--red-bg);border-color:#f5c4c0}.full{width:100%}.notification-button{position:relative}.notification-dot,.notification-count{position:absolute}.notification-dot{background:var(--red);border:2px solid var(--white);border-radius:999px;width:9px;height:9px;top:8px;right:8px}.notification-count{background:var(--red);min-width:18px;height:18px;color:var(--white);border:2px solid var(--white);border-radius:999px;place-items:center;padding:0 5px;font-size:11px;font-weight:800;display:inline-grid;top:-6px;right:-6px}.mobile-menu,.scrim{display:none}.content{padding:28px}.page-stack{gap:22px;display:grid}.page-header{justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.header-actions,.card-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:inline-flex}.page-header span{color:var(--muted);text-transform:uppercase;font-size:13px;font-weight:800}h1,h2,h3,p{margin:0}h1{letter-spacing:0;color:var(--blue);font-size:30px;line-height:1.15}h2{letter-spacing:0;font-size:17px;line-height:1.25}h3{letter-spacing:0;font-size:16px}.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.metric-grid.reports{grid-template-columns:repeat(4,minmax(0,1fr))}.metric-card,.panel,.record-card,.form-panel,.table-wrap,.empty-state,.detail-grid{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px #062b5c0a}.metric-card{align-items:center;gap:12px;min-height:92px;padding:16px;display:flex}.metric-card>span{border-radius:var(--radius);place-items:center;width:42px;height:42px;display:inline-grid}.metric-card small,td small,.compact-list small,.brand small,.record-card p{color:var(--muted)}.metric-card strong{color:var(--ink);margin-top:4px;font-size:22px;display:block}.tone-blue>span{color:var(--blue);background:#e8f0fb}.tone-green>span{background:var(--green-bg);color:var(--green)}.tone-gold>span{background:var(--gold-2);color:#8a5d00}.tone-red>span{background:var(--red-bg);color:var(--red)}.dashboard-grid,.two-column{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.panel{padding:18px}.panel>header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.panel>header a{color:var(--blue);font-size:13px;font-weight:800;text-decoration:none}.compact-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.compact-list li{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;min-height:54px;padding-bottom:10px;display:flex}.compact-list li:last-child{border-bottom:0;padding-bottom:0}.compact-list strong,.compact-list small,td small{display:block}.unread-pill{background:var(--gold-2);color:#7a5400;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800}.toolbar{justify-content:space-between;align-items:center;gap:12px;display:flex}.search-box{flex:1;max-width:420px;padding:0 12px}.select-filter{padding:0 10px}.select-filter select{min-width:140px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:780px}th,td{text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;padding:14px 16px}th{color:var(--muted);text-transform:uppercase;font-size:12px}tr:last-child td{border-bottom:0}.table-link{color:var(--blue);font-weight:900;text-decoration:none}.table-actions{justify-content:flex-end;gap:8px;display:flex}.badge{white-space:nowrap;color:#405069;background:#edf1f7;border-radius:999px;align-items:center;min-height:26px;padding:0 10px;font-size:12px;font-weight:900;display:inline-flex}.badge-available,.badge-active,.badge-paid,.badge-completed,.badge-clear{background:var(--green-bg);color:var(--green)}.badge-booked,.badge-confirmed,.badge-partial,.badge-due-soon,.badge-upcoming,.badge-pending{background:var(--gold-2);color:#7a5400}.badge-under-maintenance,.badge-overdue,.badge-expired,.badge-unpaid,.badge-cancelled,.badge-watchlist,.badge-suspended{background:var(--red-bg);color:var(--red)}.badge-scheduled,.badge-inactive{color:var(--blue-2);background:#e9eef6}.detail-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;display:grid;overflow:hidden}.detail-grid div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px}.detail-grid dt{color:var(--muted);text-transform:uppercase;margin-bottom:6px;font-size:12px;font-weight:800}.detail-grid dd{overflow-wrap:anywhere;margin:0}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.record-card{gap:12px;padding:18px;display:grid}.record-card-head{color:var(--blue);justify-content:space-between;align-items:center;display:flex}.record-card dl,.expense-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;display:grid}.record-card dt,.expense-item span{color:var(--muted);text-transform:uppercase;font-size:12px;font-weight:800}.record-card dd{margin:2px 0 0}.expense-item{border-radius:var(--radius);background:var(--soft);min-height:74px;padding:14px}.expense-item strong{margin-top:8px;display:block}.bar-list{gap:14px;display:grid}.bar-row{grid-template-columns:110px 1fr 100px;align-items:center;gap:12px;display:grid}.bar-row div{background:#e7edf5;border-radius:999px;height:12px;overflow:hidden}.bar-row i{background:var(--gold);border-radius:999px;height:100%;display:block}.calendar-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.calendar-strip a{border-radius:var(--radius);border:1px solid var(--line);background:var(--white);gap:4px;min-height:84px;padding:14px;text-decoration:none;display:grid}.calendar-strip strong{color:var(--blue)}.calendar-strip small{color:var(--muted)}.modal-layer{z-index:40;background:#0614286b;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal,.confirm-box{background:var(--white);border-radius:var(--radius);width:min(720px,100%);max-height:calc(100svh - 40px);box-shadow:var(--shadow);overflow:auto}.modal>header{border-bottom:1px solid var(--line);background:var(--white);justify-content:space-between;align-items:center;gap:12px;padding:18px;display:flex;position:sticky;top:0}.modal-form,.auth-form,.form-panel{gap:14px;display:grid}.modal-form{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px}.modal-form .full,.modal-form button,.auth-form button{grid-column:1/-1}.field{color:var(--muted);gap:7px;font-size:13px;font-weight:800;display:grid}.field input,.field select{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);min-height:40px;color:var(--ink);padding:0 11px;font-weight:500}.form-panel{max-width:720px;padding:18px}.settings-grid{gap:16px;display:grid}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.settings-avatar-row{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:14px;margin-bottom:14px;display:grid}.avatar-preview{border-radius:var(--radius);background:var(--blue);width:78px;height:78px;color:var(--white);place-items:center;font-weight:900;display:inline-grid;overflow:hidden}.avatar-preview img{object-fit:cover;width:100%;height:100%}.field span{align-items:center;gap:6px;display:inline-flex}.settings-actions{justify-content:flex-start}.form-actions{justify-content:flex-end;display:flex}.confirm-box{text-align:center;width:min(420px,100%);padding:22px}.confirm-box svg{color:var(--red)}.confirm-box p{color:var(--muted);margin:10px 0 18px}.confirm-box div{justify-content:center;gap:10px;display:flex}.empty-state{min-height:170px;color:var(--muted);text-align:center;place-items:center;gap:8px;padding:24px;display:grid}.auth-shell{background:linear-gradient(90deg, #06142894, #062b5c2e), url(https://metrobeezfms-media-prod.s3.ap-southeast-1.amazonaws.com/prod-media/assets/login-background.jpeg) center / cover no-repeat, var(--soft);place-items:center;min-height:100svh;padding:24px;display:grid;position:relative}.auth-panel{z-index:1;border-radius:var(--radius);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff0;width:min(440px,100%);padding:28px;position:relative;box-shadow:0 22px 60px #0614283d}.auth-brand{color:var(--blue);margin-bottom:22px}.auth-brand small{color:var(--muted)}.auth-panel h1{margin-bottom:18px;font-weight:500}.auth-form a{color:var(--blue);justify-self:center;font-weight:500;text-decoration:none}.auth-form .primary-button{font-weight:500}.toast{z-index:60;border-radius:var(--radius);background:var(--blue);width:min(360px,100vw - 44px);color:var(--white);box-shadow:var(--shadow);align-items:center;gap:12px;padding:14px;display:flex;position:fixed;bottom:22px;right:22px}.toast small,.toast strong{display:block}.toast small{color:#ffffffc2}@media (width<=1120px){.metric-grid,.metric-grid.reports,.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=840px){.app-shell{grid-template-columns:1fr}.sidebar{width:280px;transition:transform .2s;position:fixed;left:0;transform:translate(-100%)}.sidebar.is-open{transform:translate(0)}.scrim{z-index:18;background:#0614285c;border:0;display:block;position:fixed;inset:0}.mobile-menu{display:inline-flex}.topbar{padding:10px 14px}.global-search{display:none}.topbar-company{flex:1;min-width:0;overflow:hidden}.content{padding:18px}.page-header{flex-direction:column;align-items:flex-start}.dashboard-grid,.two-column,.card-grid,.calendar-strip,.form-grid{grid-template-columns:1fr}}@media (width<=640px){.metric-grid,.metric-grid.reports,.detail-grid,.record-card dl,.expense-grid,.modal-form{grid-template-columns:1fr}.toolbar{flex-direction:column;align-items:stretch}.search-box{max-width:none}.bar-row{grid-template-columns:84px 1fr}.bar-row strong{grid-column:1/-1}}