@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
	font-family: 'DM Sans', sans-serif;
	color: #242a26;
	background: #f6f5f1;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	--ink: #242a26;
	--muted: #8a918b;
	--line: #e9e9e3;
	--canvas: #f6f5f1;
	--panel: #fff;
	--green: #2e7158;
	--green-dark: #225a46;
	--green-soft: #e8f2ed;
	--blue: #507a99;
	--blue-soft: #edf3f7;
	--amber: #b9853c;
	--amber-soft: #fbf3e7;
	--coral: #c66f5d;
	--coral-soft: #faeeeb;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: linear-gradient(180deg, #f6f5f1, #f0f3ec); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #9cc9b2; outline-offset: 2px; }
[hidden] { display: none !important; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 252px; flex-direction: column; padding: 27px 17px 17px; border-right: 1px solid #e8e8e2; background: #fbfbf8; }
.brand { display: flex; align-items: center; gap: 11px; margin: 0 4px 27px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; background: var(--green); color: white; }
.brand-mark svg { width: 20px; height: 20px; stroke-width: 1.8; }
.brand-copy { display: grid; min-width: 0; gap: 5px; }
.brand-copy strong { font-family: 'Playfair Display', serif; font-size: 17px; line-height: 1.1; letter-spacing: 0; }
.brand-copy small { color: var(--coral); font-size: 8px; font-weight: 700; letter-spacing: .8px; }
.nav-label { margin: 30px 9px 10px; color: #a0a49f; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }
.nav-label-spaced { margin-top: 27px; }
.primary-nav { display: grid; gap: 3px; }
.nav-item { position: relative; display: flex; min-height: 41px; align-items: center; gap: 11px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: #68716b; cursor: pointer; text-align: left; transition: background .16s ease, color .16s ease; }
.nav-item:hover { background: #f1f3ef; color: var(--ink); }
.nav-item.active { background: #e7f1ed; box-shadow: inset 3px 0 #cf795f; color: var(--green-dark); font-weight: 600; }
.nav-item > svg { width: 17px; height: 17px; stroke-width: 1.8; }
.nav-item span:nth-child(2) { flex: 1; font-size: 12px; }
.nav-count { padding: 2px 6px; border-radius: 10px; background: #fff; color: #78827b; font-size: 10px; }
.sidebar-bottom { margin-top: auto; }
.profile-identity { display: grid; gap: 3px; margin-top: 15px; padding: 12px 5px 2px; border-top: 1px solid var(--line); }
.profile-identity strong { font-size: 11px; }
.profile-identity small { color: var(--muted); font-size: 10px; }
.sidebar-signout { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 8px; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: #68716b; cursor: pointer; font: inherit; font-size: 11px; text-align: left; }
.sidebar-signout:hover { background: #f1f3ef; color: var(--ink); }
.sidebar-signout svg { width: 16px; height: 16px; }
.avatar { display: inline-grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 50%; font-size: 10px; font-weight: 700; }
.avatar-soft { background: #edf1ec; color: #65756a; }
.login-screen {
	position: relative;
	display: grid;
	min-height: 100vh;
	place-items: center;
	padding: 36px 24px;
	background: linear-gradient(118deg, #f8f6f0 0%, #f0f5ee 55%, #e8f3f1 100%);
	overflow: hidden;
}
.login-screen::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(132deg, rgba(46, 89, 67, .025) 0 1px, transparent 1px 44px);
	pointer-events: none;
}
.hotel-select-screen {
	position: relative;
	display: grid;
	min-height: 100vh;
	place-items: center;
	padding: 36px 24px;
	background: radial-gradient(circle at 8% 12%, rgba(208, 139, 93, .17), transparent 30%), radial-gradient(circle at 92% 84%, rgba(83, 145, 153, .15), transparent 31%), linear-gradient(145deg, #f8f6f0, #edf3ee);
}
.hotel-select-card { width: min(940px, 100%); }
.hotel-select-card h1 { margin: 0 0 8px; color: #23332c; font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 500; line-height: 1.15; }
.hotel-select-card > p { margin: 0 0 25px; color: #68746d; font-size: 13px; }
.hotel-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hotel-choice { display: grid; min-height: 155px; grid-template-columns: 46px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 20px; border: 1px solid #dfe7df; border-radius: 8px; background: rgba(255,255,255,.92); box-shadow: 0 12px 32px rgba(35,58,49,.06); color: var(--ink); cursor: pointer; text-align: left; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.hotel-choice:hover { transform: translateY(-2px); border-color: #a9c5b2; box-shadow: 0 18px 38px rgba(35,58,49,.1); }
.hotel-choice-blank { background: linear-gradient(135deg, #fff, #f6f8f3); }
.hotel-choice-morioh { background: linear-gradient(135deg, #fffaf3, #fff 62%, #f0f7f5); }
.hotel-choice-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 7px; background: #e7f1e9; color: #3e7857; }
.hotel-choice-morioh .hotel-choice-icon { background: #fae9dc; color: #ad6748; }
.hotel-choice-icon svg { width: 22px; height: 22px; }
.hotel-choice-copy { display: grid; min-width: 0; gap: 7px; }
.hotel-choice-copy strong { color: #26352e; font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; }
.hotel-choice-copy small { color: #77827a; font-size: 11px; line-height: 1.5; }
.hotel-choice-arrow { width: 17px; color: #75867a; }
.hotel-select-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(112, 132, 117, .2); color: #7b867d; font-size: 10px; }
.hotel-select-actions { display: flex; align-items: center; gap: 8px; }
.add-hotel-dialog { width: min(480px, calc(100% - 30px)); }
.reset-default-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: #9d6257; cursor: pointer; font-size: 10px; font-weight: 600; }
.reset-default-trigger:hover { background: #faeeeb; color: #8d4c40; }
.reset-default-trigger svg { width: 14px; height: 14px; }
.hotel-back-button { display: inline-flex; align-items: center; gap: 6px; margin: -10px 0 18px; padding: 5px 0; border: 0; background: transparent; color: #607367; cursor: pointer; font-size: 11px; font-weight: 600; }
.hotel-back-button:hover { color: var(--coral); }
.hotel-back-button svg { width: 14px; height: 14px; }
.login-card {
	position: relative;
	z-index: 1;
	width: min(880px, 100%);
	padding: 32px 30px 28px;
	border: 1px solid rgba(192, 209, 195, 0.9);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(8px);
	box-shadow: 0 28px 90px rgba(35, 58, 49, 0.12);
}
.login-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	padding: 9px 14px 9px 10px;
	border: 1px solid rgba(215, 226, 217, 0.9);
	border-radius: 8px;
	background: rgba(246, 250, 247, 0.9);
}
.login-brand .brand-mark {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.login-brand strong {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 1.05rem;
	letter-spacing: 2px;
}
.login-brand small {
	color: #6e7b73;
	font-size: 10px;
	letter-spacing: 2px;
}
.login-card h1 {
	margin: 0 0 10px;
	font-family: 'Playfair Display', serif;
	font-size: 40px;
	line-height: 1.05;
	letter-spacing: 0;
}
.login-card p {
	margin: 0 0 26px;
	color: #657268;
	font-size: 1.02rem;
}
.role-picker {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.role-option {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 150px;
	padding: 18px 18px 16px;
	border: 1px solid #e3e9e3;
	border-radius: 8px;
	background: linear-gradient(180deg, #ffffff, #fafcf9);
	cursor: pointer;
	text-align: left;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.role-option:hover {
	transform: translateY(-2px);
	border-color: #bfd1c3;
	box-shadow: 0 18px 35px rgba(50, 67, 58, 0.09);
}
.role-option .role-user {
	display: block;
	margin-bottom: 6px;
	color: #1e2a25;
	font-family: 'Playfair Display', serif;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0;
}
.role-option .role-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #5b685f;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.role-option .role-name span:last-child {
	display: inline-grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 50%;
	background: rgba(56, 112, 83, 0.1);
	color: #3e7a57;
}
.role-option .role-text {
	color: #607064;
	font-size: .92rem;
	line-height: 1.5;
}
.role-option.manager { background: linear-gradient(180deg, #f4f9f3, #fbfcfb); }
.role-option.cleaner { background: linear-gradient(180deg, #f3f8fb, #fbfdff); }
.role-option.support { background: linear-gradient(180deg, #fffaf1, #fffcf9); }
.role-option.frontdesk { background: linear-gradient(180deg, #f8f3ff, #fdfcff); }
.role-option.valet { background: linear-gradient(180deg, #f1f8f4, #fbfdfb); }
.role-option.security { background: linear-gradient(180deg, #fbf3f0, #fdfbfa); }
.role-option.bellhop { background: linear-gradient(180deg, #fbf7ec, #fdfcf8); }
.role-option.roomservice { background: linear-gradient(180deg, #f0f7f8, #fbfdfd); }

@media (max-width: 760px) {
	.hotel-select-screen { padding: 25px 18px; }
	.hotel-select-card h1 { font-size: 32px; }
	.hotel-choice-grid { grid-template-columns: 1fr; }
	.hotel-choice { min-height: 125px; padding: 16px; }
	.hotel-select-footer { align-items: flex-start; flex-direction: column; }
	.hotel-select-actions { flex-wrap: wrap; }
	.login-screen { padding: 26px 18px; }
	.login-card { padding: 22px 18px; border-radius: 8px; }
	.login-brand { margin-bottom: 14px; }
	.login-card h1 { font-size: 32px; }
	.login-card p { margin-bottom: 20px; }
	.role-picker { grid-template-columns: 1fr; }
	.role-option { min-height: 150px; }
}
.main-area { min-height: 100vh; margin-left: 252px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; height: 67px; align-items: center; justify-content: space-between; padding: 0 38px; border-bottom: 1px solid #e9e9e3; background: rgba(251, 251, 248, .94); backdrop-filter: blur(12px); }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: #929991; font-size: 11px; }
.breadcrumb svg { width: 13px; height: 13px; }
.breadcrumb strong { color: #343a35; font-weight: 600; }
.icon-button { display: inline-grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #747d76; cursor: pointer; }
.icon-button:hover { background: #f0f2ed; color: var(--ink); }
.icon-button svg { width: 17px; height: 17px; }
.mobile-menu { display: none; }
.page-content { width: min(100%, 1510px); margin: 0 auto; padding: 33px 38px 55px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.eyebrow { color: #818a82; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }
.page-heading h1 { margin: 8px 0 5px; font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 500; line-height: 1.2; }
.page-heading p { margin: 0; color: #858d86; font-size: 12px; }
.heading-actions { display: flex; align-items: center; gap: 8px; }
.button { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font-size: 11px; font-weight: 600; transition: background .15s ease, border-color .15s ease; }
.button svg { width: 15px; height: 15px; }
.button-primary { background: var(--green); color: white; }
.button-primary:hover { background: var(--green-dark); }
.button-outline { border-color: #e3e5df; background: #fff; color: #525c54; }
.button-outline:hover { border-color: #b8c5bb; background: #f7faf7; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 17px; }
.metric-card { min-width: 0; padding: 16px 17px 14px; border: 1px solid #e9e9e3; border-radius: 7px; background: #fff; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #707971; font-size: 11px; }
.metric-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; }
.metric-icon svg { width: 15px; height: 15px; }
.metric-icon-green { background: var(--green-soft); color: var(--green); }
.metric-icon-blue { background: var(--blue-soft); color: var(--blue); }
.metric-icon-amber { background: var(--amber-soft); color: var(--amber); }
.metric-icon-coral { background: var(--coral-soft); color: var(--coral); }
.metric-value { margin: 13px 0 9px; font-family: 'Playfair Display', serif; font-size: 29px; line-height: 1; }
.metric-value small { margin-left: 2px; font-family: 'DM Sans', sans-serif; font-size: 16px; }
.metric-currency { font-size: 27px; }
.metric-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; color: #929991; font-size: 9px; }
.trend-up { color: #418060; font-weight: 600; }
.trend-neutral { color: #68756c; font-weight: 600; }
.metric-progress { height: 4px; overflow: hidden; margin-top: 12px; border-radius: 5px; background: #edf0eb; }
.metric-progress span { display: block; height: 100%; border-radius: inherit; background: #5e9a76; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .85fr); gap: 15px; margin-bottom: 15px; }
.panel { min-width: 0; border: 1px solid #e9e9e3; border-radius: 7px; background: #fff; }
.panel-heading { display: flex; min-height: 67px; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 17px; }
.panel-heading h2 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.panel-heading p { margin: 0; color: #929991; font-size: 10px; }
.subtle-link { display: inline-flex; align-items: center; gap: 4px; padding: 5px 0; border: 0; background: transparent; color: var(--green); cursor: pointer; font-size: 10px; font-weight: 600; white-space: nowrap; }
.subtle-link svg { width: 13px; height: 13px; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.data-table thead { background: #fafaf8; }
.data-table th { height: 35px; padding: 0 12px; border-top: 1px solid #efefeb; border-bottom: 1px solid #efefeb; color: #969c96; font-size: 8px; font-weight: 700; letter-spacing: .7px; }
.data-table th:first-child, .data-table td:first-child { padding-left: 17px; }
.data-table td { height: 55px; padding: 5px 12px; border-bottom: 1px solid #f0f0ec; color: #606a62; font-size: 10px; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fcfcfa; }
.compact-table td { height: 55px; }
.booking-id { color: #808981; font-size: 9px; font-weight: 600; }
.guest-cell { display: flex; align-items: center; gap: 8px; }
.guest-cell > span:last-child { display: grid; gap: 3px; }
.guest-cell strong { color: #303832; font-size: 10px; font-weight: 600; }
.guest-cell small { color: #969c96; font-size: 9px; }
.room-number { color: #38433b; font-size: 10px; font-weight: 700; }
.date-arrow { padding: 0 3px; color: #a3a9a2; }
.status-pill, .housekeeping-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 12px; font-size: 9px; font-weight: 600; }
.status-pill > span, .housekeeping-pill > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-confirmed { background: #edf3f7; color: #537b96; }
.status-checked-in { background: #e8f2ed; color: #3d7759; }
.status-checked-out { background: #f1f1ef; color: #737b74; }
.status-cancelled { background: #faeeeb; color: #b86c5d; }
.row-action-cell { text-align: right; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.row-action { padding: 5px 7px; border: 1px solid #dfe8e1; border-radius: 4px; background: #f7faf7; color: #387052; cursor: pointer; font-size: 9px; font-weight: 600; }
.row-action:hover { border-color: #aac3b2; background: #edf5ef; }
.row-cancel { border-color: transparent; background: transparent; color: #a56d60; }
.row-cancel:hover { border-color: #f0d9d3; background: #fbf3f1; }
.protected-employee { display: inline-flex; padding: 4px 7px; border-radius: 4px; background: #eef2f6; color: #63768a; font-size: 9px; font-weight: 600; }
.employee-table { min-width: 760px; }
.muted-dash { color: #b0b5ae; }
.empty-cell { height: 90px !important; color: #90978f !important; text-align: center; }
.activity-panel { padding-bottom: 5px; }
.pulse-row { display: flex; align-items: center; gap: 9px; min-height: 58px; margin: 0 16px; border-top: 1px solid #f0f0ec; }
.pulse-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 7px; }
.pulse-icon svg { width: 14px; height: 14px; }
.pulse-green { background: var(--green-soft); color: var(--green); }
.pulse-amber { background: var(--amber-soft); color: var(--amber); }
.pulse-row > span:nth-child(2) { display: grid; flex: 1; gap: 3px; }
.pulse-row strong { font-size: 10px; font-weight: 600; }
.pulse-row small { color: #969d96; font-size: 9px; }
.pulse-row > svg { width: 14px; height: 14px; color: #a7ada7; }
.occupancy-mini { margin: 9px 16px 14px; padding-top: 12px; border-top: 1px solid #f0f0ec; }
.occupancy-copy { display: flex; justify-content: space-between; color: #717a72; font-size: 9px; }
.occupancy-copy strong { color: #3c674c; font-size: 10px; }
.mini-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; margin: 9px 0 8px; }
.mini-bar { height: 7px; border-radius: 2px; background: #edf0eb; }
.bar-filled { background: #6ea17f; }
.bar-reserved { background: #8faec1; }
.legend { display: flex; gap: 11px; color: #929991; font-size: 8px; }
.legend span { display: flex; align-items: center; gap: 4px; }
.legend i { width: 6px; height: 6px; border-radius: 2px; }
.legend-occupied { background: #6ea17f; }
.legend-reserved { background: #8faec1; }
.legend-open { background: #e1e5df; }
.breakfast-panel {
	overflow: hidden;
	margin: 0 0 16px;
}
.breakfast-body {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 14px;
	padding: 0 17px 17px;
}
.breakfast-meta {
	display: grid;
	gap: 6px;
	padding: 12px 14px;
	border: 1px solid #e9efe5;
	border-radius: 10px;
	background: linear-gradient(180deg, #f5faf5, #f9fbf9);
}
.breakfast-meta span {
	color: #819084;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.breakfast-meta strong {
	color: #2f3a33;
	font-size: 14px;
}
.breakfast-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 14px;
	border: 1px solid #efe9de;
	border-radius: 10px;
	background: linear-gradient(180deg, #fffaf3, #fffdf9);
}
.breakfast-menu span {
	display: inline-flex;
	align-items: center;
	padding: 6px 9px;
	border-radius: 999px;
	background: #fff;
	color: #6a5744;
	font-size: 10px;
	font-weight: 600;
	border: 1px solid #efe4d0;
}
.room-board-panel { padding-bottom: 14px; }
.room-grid { display: grid; gap: 10px; }
.room-grid-preview { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 15px; }
.room-grid-full { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.room-card { min-width: 0; padding: 12px; border: 1px solid #e9eae4; border-radius: 6px; background: linear-gradient(145deg, #fff, #fdfdfb); }
.room-card-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.room-number-large { font-family: 'Playfair Display', serif; font-size: 19px; }
.room-status { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 6px; border-radius: 10px; font-size: 8px; font-weight: 600; white-space: nowrap; }
.room-status > span, .summary-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-room-occupied { background: #e8f2ed; color: #3d7759; }
.status-room-reserved { background: #edf3f7; color: #537b96; }
.status-room-available { background: #eef4ed; color: #60835f; }
.status-room-dirty { background: #fbf3e7; color: #a67834; }
.status-room-cleaning { background: #f0f0ed; color: #737b74; }
.room-type { overflow: hidden; margin-top: 5px; color: #737c74; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.room-type span { color: #b0b6af; }
.room-guest { display: flex; min-height: 27px; align-items: center; gap: 4px; margin-top: 9px; color: #58635a; font-size: 9px; }
.room-guest svg { width: 12px; height: 12px; }
.room-guest-muted { color: #9aa198; }
.room-card-bottom { display: flex; min-height: 24px; align-items: end; justify-content: flex-end; margin-top: 7px; padding-top: 6px; border-top: 1px solid #f0f0ec; }
.room-rate { color: #455449; font-size: 10px; font-weight: 700; }
.room-rate small { color: #9aa198; font-size: 8px; font-weight: 400; }
.room-task { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: transparent; color: #477656; cursor: pointer; font-size: 9px; font-weight: 600; }
.room-task svg { width: 12px; height: 12px; }
.full-panel { overflow: hidden; }
.list-toolbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 17px; }
.filter-tabs { display: flex; align-items: center; gap: 3px; overflow-x: auto; }
.filter-tab { display: inline-flex; min-height: 30px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #788078; cursor: pointer; font-size: 10px; }
.filter-tab:hover { background: #f6f7f4; }
.filter-tab.selected { background: #edf4ef; color: #3e7354; font-weight: 600; }
.filter-tab > span { padding: 2px 5px; border-radius: 8px; background: white; font-size: 9px; }
.guest-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 470px; }
.guest-table td { height: 62px; }
.guest-more { width: 27px; height: 27px; border: 1px solid #ebede7; }
.guest-more svg { width: 14px; height: 14px; }
.record-count { color: #909890; font-size: 10px; }
.room-summary { display: flex; flex-wrap: wrap; gap: 22px; margin: 4px 0 26px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.room-summary > div { display: flex; align-items: center; gap: 7px; color: #747d75; font-size: 10px; }
.room-summary strong { margin-right: -4px; color: #303932; font-size: 11px; }
.summary-dot { width: 7px; height: 7px; }
.dot-green { color: #5c9670; }
.dot-blue { color: #688fa8; }
.dot-amber { color: #c59752; }
.floor-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.floor-heading h2 { margin: 0; font-size: 14px; }
.floor-heading span { color: #939a93; font-size: 10px; }
.housekeeping-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.housekeeping-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.housekeeping-stats strong { font-family: 'Playfair Display', serif; font-size: 19px; }
.house-dirty { background: #fbf3e7; color: #a67834; }
.house-cleaning { background: #f0f0ed; color: #737b74; }
.house-clean { background: #eef4ed; color: #60835f; }
.house-inspected { background: #edf3f7; color: #537b96; }
.housekeeping-table td { height: 57px; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .8fr); gap: 14px; }
.report-panel { min-height: 265px; }
.metric-plain-icon { width: 16px; height: 16px; color: #89958a; }
.report-period { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #e8eae4; border-radius: 4px; color: #707a71; font-size: 9px; }
.report-period svg { width: 12px; height: 12px; }
.chart-wrap { display: flex; height: 175px; padding: 4px 19px 15px 12px; }
.chart-y-labels { display: flex; width: 35px; flex-direction: column; justify-content: space-between; padding: 0 0 17px; color: #9da39d; font-size: 8px; text-align: right; }
.chart-area { position: relative; flex: 1; }
.chart-grid-lines { position: absolute; inset: 0 0 17px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid-lines i { width: 100%; border-top: 1px dashed #eaebe6; }
.chart-bars { position: relative; z-index: 1; display: grid; height: 100%; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.chart-day { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: end; gap: 6px; color: #919990; font-size: 8px; }
.chart-bar-column { display: flex; width: 100%; height: calc(100% - 17px); align-items: end; justify-content: center; }
.chart-bar { width: min(23px, 72%); min-height: 4px; border-radius: 4px 4px 1px 1px; background: #cbdccf; }
.chart-bar-today { background: #4a8964; }
.mix-list { display: grid; gap: 16px; padding: 11px 17px 20px; }
.mix-item { display: grid; grid-template-columns: 8px minmax(90px, 1fr) 20px; align-items: center; gap: 8px; color: #6f786f; font-size: 10px; }
.mix-item strong { color: #3d453e; font-size: 10px; text-align: right; }
.mix-dot { width: 7px; height: 7px; border-radius: 2px; }
.mix-green { background: #5b966e; }
.mix-blue { background: #779db5; }
.mix-amber { background: #d3a359; }
.mix-coral { background: #ca806e; }
.mix-track { height: 4px; grid-column: 2 / 4; overflow: hidden; margin-top: -3px; border-radius: 5px; background: #f0f1ed; }
.mix-track i { display: block; height: 100%; border-radius: inherit; }
.settings-tabs { display: inline-flex; gap: 3px; margin: 0 0 14px; padding: 4px; border: 1px solid #e5e9e3; border-radius: 7px; background: #eef2ed; }
.settings-tab { min-height: 34px; padding: 0 15px; border: 0; border-radius: 4px; background: transparent; color: #6f786f; cursor: pointer; font-size: 11px; font-weight: 600; }
.settings-tab:hover { background: #f9fbf8; color: var(--ink); }
.settings-tab.selected { background: #fff; color: var(--green-dark); box-shadow: 0 1px 3px #253c2c1a; }
.settings-tab-panel { min-height: 275px; padding: 22px; border: 1px solid #e5e9e3; border-radius: 7px; background: #fff; }
.settings-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.settings-panel-heading h2 { margin: 0 0 5px; font-size: 14px; }
.settings-panel-heading p { margin: 0; color: #858f86; font-size: 11px; line-height: 1.5; }
.settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 0 0 20px; }
.settings-tab-panel > .button { margin-top: 2px; }
.request-panel { padding: 20px; }
.request-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 850px; }
.request-form > .button { justify-self: start; }
.request-history { margin-top: 14px; }
.frontdesk-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
.request-shortcut { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 14px 17px; }
.request-shortcut > div { display: flex; min-width: 0; align-items: center; gap: 11px; }
.request-shortcut > div > span:last-child { display: grid; gap: 4px; }
.request-shortcut strong { font-size: 11px; }
.request-shortcut small { color: #858f86; font-size: 10px; }
.config-room-row { cursor: pointer; }
.config-room-row:hover, .config-room-row:focus-within { background: #f3f8f4; }
.config-room-link { padding: 3px 4px; border: 0; border-radius: 3px; background: transparent; color: var(--green-dark); cursor: pointer; font: inherit; font-weight: 700; }
.config-room-link:hover { color: var(--coral); text-decoration: underline; }
.config-room-row:focus-visible { outline: 2px solid #9cc9b2; outline-offset: -2px; }
.room-delete-button { color: var(--coral); }
.room-delete-button:hover { border-color: #e7c4bb; background: var(--coral-soft); }
.service-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 0 0 19px; }
.service-setting { display: flex; min-width: 0; min-height: 74px; align-items: center; gap: 11px; padding: 12px; border: 1px solid #e6e9e3; border-radius: 6px; background: linear-gradient(135deg, #fff, #f8faf7); cursor: pointer; }
.service-setting > input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--green); }
.service-setting-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 6px; }
.service-setting-icon svg { width: 17px; height: 17px; }
.service-setting-breakfast { background: #fff1dc; color: #aa6b2d; }
.service-setting-pool { background: #e2f1f3; color: #397c88; }
.service-setting-copy { display: grid; min-width: 0; flex: 1; gap: 4px; }
.service-setting-copy strong { font-size: 11px; }
.service-setting-copy small { color: #858f86; font-size: 9px; line-height: 1.4; }
.field { display: grid; gap: 6px; color: #626c63; font-size: 10px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; min-height: 36px; padding: 8px 9px; border: 1px solid #e4e6e0; border-radius: 4px; background: white; color: #343b35; font-size: 11px; font-weight: 400; }
.field textarea { resize: vertical; }
.booking-dialog { width: min(540px, calc(100% - 30px)); max-height: min(90vh, 760px); padding: 0; overflow: auto; border: 1px solid #e5e8e1; border-radius: 9px; background: #fff; color: var(--ink); box-shadow: 0 24px 80px #26352c2b; }
.booking-dialog::backdrop { background: #202a2380; backdrop-filter: blur(3px); }
.booking-dialog form { padding: 21px; }
.reset-default-content { padding: 21px; }
.reset-default-content > p { margin: 0; color: #68746d; font-size: 12px; line-height: 1.6; }
.reset-default-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #eff0ec; }
.reset-confirm-button { border: 1px solid #b65f50; background: #bd6656; color: white; }
.reset-confirm-button:hover { border-color: #9e4f42; background: #a95245; }
.reset-confirm-button svg { width: 15px; height: 15px; }
.dialog-header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 19px; }
.dialog-header h2 { margin: 5px 0 0; font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 500; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field-wide { grid-column: 1 / -1; }
.dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 19px; padding-top: 15px; border-top: 1px solid #eff0ec; }
.form-note { display: flex; align-items: center; gap: 5px; color: #8b948b; font-size: 9px; }
.form-note svg { width: 14px; height: 14px; color: #578563; }
.toast-region { position: fixed; z-index: 40; right: 20px; bottom: 20px; display: grid; gap: 8px; }
.toast { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #dfe8e1; border-radius: 6px; background: #fff; color: #405147; box-shadow: 0 8px 30px #28372d1a; font-size: 11px; animation: toast-in .2s ease-out; }
.toast svg { width: 15px; height: 15px; color: #4c8a61; }
.mobile-menu { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1150px) {
	.sidebar { width: 224px; }
	.main-area { margin-left: 224px; }
	.topbar { padding: 0 26px; }
	.page-content { padding-right: 26px; padding-left: 26px; }
	.metric-grid { gap: 9px; }
	.metric-card { padding: 14px 12px; }
	.room-grid-preview, .room-grid-full { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dashboard-grid { grid-template-columns: minmax(0, 1.4fr) minmax(245px, .9fr); }
	.role-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
	.sidebar { width: 70px; align-items: center; padding: 19px 9px 12px; }
	.brand { margin: 0 0 24px; }
	.brand-copy, .nav-label, .nav-item span, .profile-identity, .sidebar-signout span { display: none; }
	.nav-item { width: 44px; height: 42px; justify-content: center; padding: 0; }
	.nav-item > svg { width: 19px; height: 19px; }
	.sidebar-bottom { width: 100%; }
	.sidebar-signout { justify-content: center; padding-inline: 0; }
	.main-area { margin-left: 70px; }
	.topbar { padding: 0 20px; }
	.page-content { padding: 27px 20px 45px; }
	.dashboard-grid { grid-template-columns: 1fr; }
	.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.metric-card { padding: 15px; }
	.room-grid-preview, .room-grid-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.report-grid { grid-template-columns: 1fr; }
	.role-picker { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.sidebar { width: 0; align-items: stretch; padding: 0; overflow: hidden; border: 0; transition: width .2s ease; }
	.sidebar.sidebar-open { width: 252px; padding: 20px 17px 14px; border-right: 1px solid #e8e8e2; box-shadow: 12px 0 30px #26352c1a; }
	.sidebar.sidebar-open .brand { margin: 0 4px 23px; }
	.sidebar.sidebar-open .brand-copy, .sidebar.sidebar-open .nav-label, .sidebar.sidebar-open .nav-item span, .sidebar.sidebar-open .profile-identity, .sidebar.sidebar-open .sidebar-signout span { display: initial; }
	.sidebar.sidebar-open .brand-copy, .sidebar.sidebar-open .profile-identity { display: grid; }
	.sidebar.sidebar-open .brand { display: flex; }
	.sidebar.sidebar-open .nav-item { width: auto; justify-content: start; padding: 0 11px; }
	.sidebar.sidebar-open .sidebar-bottom { margin-top: auto; }
	.sidebar.sidebar-open .sidebar-signout { justify-content: flex-start; padding-inline: 10px; }
	.main-area { margin-left: 0; }
	.topbar { height: 58px; gap: 8px; padding: 0 12px; }
	.mobile-menu { display: inline-grid; flex: 0 0 auto; }
	.breadcrumb { flex: 1; gap: 5px; overflow: hidden; font-size: 10px; white-space: nowrap; }
	.breadcrumb > span { overflow: hidden; text-overflow: ellipsis; }
	.page-content { padding: 22px 13px 35px; }
	.page-heading { align-items: start; gap: 10px; margin-bottom: 17px; }
	.page-heading h1 { font-size: 26px; }
	.page-heading p { max-width: 280px; font-size: 11px; line-height: 1.45; }
	.page-heading > .heading-actions { align-self: center; }
	.heading-actions .button { width: 36px; min-width: 36px; height: 36px; padding: 0; overflow: hidden; font-size: 0; }
	.heading-actions .button svg { flex: 0 0 auto; }
	.metric-grid { gap: 8px; }
	.metric-card { padding: 12px 11px; }
	.metric-top { font-size: 10px; }
	.metric-value { font-size: 26px; }
	.metric-currency { font-size: 22px; }
	.metric-foot { font-size: 8px; }
	.dashboard-grid { gap: 11px; }
	.panel-heading { padding-right: 12px; padding-left: 12px; }
	.subtle-link { font-size: 9px; }
	.room-grid-preview, .room-grid-full { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
	.room-grid-preview { padding: 0 10px; }
	.room-card { padding: 9px; }
	.room-status { font-size: 7px; }
	.list-toolbar { align-items: start; padding: 9px 10px; }
	.list-toolbar > .button { min-height: 31px; padding: 0 8px; font-size: 9px; }
	.filter-tab { padding: 0 7px; font-size: 9px; }
	.data-table { min-width: 710px; }
	.guest-table { min-width: 530px; }
	.housekeeping-table { min-width: 590px; }
	.room-summary { gap: 10px 15px; padding: 11px; }
	.room-summary > div { font-size: 9px; }
	.housekeeping-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
	.housekeeping-stats > div { padding: 10px 8px; }
	.housekeeping-pill { gap: 4px; padding: 4px 6px; font-size: 8px; }
	.report-panel { min-height: 245px; }
	.chart-bars { gap: 6px; }
	.settings-tab-panel { padding: 16px; }
	.settings-form { grid-template-columns: 1fr; gap: 12px; }
	.request-panel { padding: 14px; }
	.request-form { grid-template-columns: 1fr; gap: 12px; }
	.frontdesk-metrics { grid-template-columns: 1fr; max-width: none; }
	.request-shortcut { align-items: flex-start; flex-direction: column; }
	.service-settings { grid-template-columns: 1fr; }
	.settings-panel-heading { align-items: flex-start; }
	.dialog-footer { align-items: start; flex-direction: column; }
	.dialog-footer .button { align-self: stretch; }
	.toast-region { right: 10px; bottom: 10px; left: 10px; }
	.toast { justify-content: center; }
	.login-card { padding: 24px 18px; }
}

:root {
	--green: #2f805c;
	--green-dark: #246548;
	--green-soft: #e5f3e8;
	--blue-soft: #eaf3fa;
	--amber-soft: #fff3dc;
	--coral-soft: #fff0e9;
}
.button { transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.button-primary { box-shadow: 0 2px 0 #1d5e43; }
.button-primary:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #1d5e43; }
.metric-card { box-shadow: 0 2px 0 #e8eee6; }
.status-confirmed { background: #eaf3fa; color: #477a9c; }
.status-checked-in { background: #e5f3e8; color: #357651; }
.status-checked-out { background: #f2f0e9; color: #7d765d; }
.status-cancelled { background: #fff0e9; color: #b86c5d; }
.empty-welcome { position: relative; display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 20px 34px; min-height: 300px; padding: 28px 34px 20px; overflow: hidden; border: 1px solid #dfe9dc; border-radius: 9px; background: linear-gradient(115deg, #f1f8ed, #fff8eb 78%, #fff4e8); animation: welcome-in .38s ease-out both; }
.empty-welcome::before { position: absolute; inset: 0; background-image: radial-gradient(#8db39642 1px, transparent 1px); background-size: 19px 19px; content: ''; mask-image: linear-gradient(90deg, #000 0, transparent 72%); pointer-events: none; }
.welcome-art { position: relative; display: grid; width: 184px; height: 184px; place-self: center; place-items: center; border: 1px solid #cfdfd0; border-radius: 34px 34px 28px 28px; background: linear-gradient(145deg, #cce5d2, #b9d8c6); color: #367650; transform: rotate(-3deg); }
.welcome-art::before, .welcome-art::after { position: absolute; content: ''; }
.welcome-art::before { inset: 17px; border: 1px dashed #fff9; border-radius: 23px; }
.welcome-art::after { right: 24px; bottom: -7px; left: 24px; height: 8px; border-radius: 50%; background: #54835b35; filter: blur(4px); }
.welcome-building { display: grid; width: 105px; height: 105px; place-items: center; border: 1px solid #ffffffa6; border-radius: 24px; background: #f7fbef; box-shadow: 0 8px 18px #3a71461c; animation: building-bob 3s ease-in-out infinite; }
.welcome-building svg { width: 60px; height: 60px; stroke-width: 1.5; }
.welcome-spark { position: absolute; z-index: 1; display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid #fff; border-radius: 11px; background: #fff9e7; color: #bd8a38; box-shadow: 0 3px 8px #5866471c; }
.welcome-spark svg { width: 17px; height: 17px; }
.spark-one { top: 26px; right: 23px; transform: rotate(9deg); }
.spark-two { bottom: 24px; left: 21px; background: #ffede3; color: #c87658; transform: rotate(-8deg); }
.welcome-copy { position: relative; max-width: 510px; }
.welcome-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #e7d8ac; border-radius: 4px; background: #fff6d9; color: #8a702d; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.welcome-tag svg { width: 12px; height: 12px; }
.welcome-copy h2 { margin: 11px 0 8px; color: #283f31; font-family: 'Playfair Display', serif; font-size: 27px; font-weight: 500; }
.welcome-copy p { max-width: 450px; margin: 0; color: #68786b; font-size: 11px; line-height: 1.7; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.welcome-steps { position: relative; display: flex; grid-column: 1 / -1; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid #dce6d8; color: #6b796e; font-size: 9px; }
.welcome-steps span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.welcome-steps b { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #c9dbc9; border-radius: 50%; background: #ffffffa8; color: #528263; font-size: 8px; }
.welcome-steps i { width: 20px; height: 1px; background: #cbd9c9; }
.empty-list { display: flex; min-height: 230px; flex-direction: column; align-items: center; justify-content: center; padding: 25px; text-align: center; }
.empty-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; }
.empty-icon svg { width: 22px; height: 22px; }
.empty-icon-green { background: #e5f3e8; color: #39815c; }
.empty-icon-coral { background: #fff0e9; color: #c4775b; }
.empty-list h2 { margin: 13px 0 5px; font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 500; }
.empty-list p, .empty-inline { margin: 0 0 14px; color: #879087; font-size: 10px; line-height: 1.55; }
.empty-inline { padding: 14px 17px 17px; }
.room-empty { grid-column: 1 / -1; }
@keyframes welcome-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes building-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 650px) {
	.empty-welcome { grid-template-columns: 1fr; gap: 15px; padding: 20px 17px 15px; }
	.welcome-art { width: 142px; height: 142px; border-radius: 27px; }
	.welcome-art::before { inset: 13px; }
	.welcome-building { width: 84px; height: 84px; border-radius: 19px; }
	.welcome-building svg { width: 47px; height: 47px; }
	.spark-one { top: 18px; right: 16px; }
	.spark-two { bottom: 18px; left: 15px; }
	.welcome-copy h2 { font-size: 23px; }
	.welcome-steps { gap: 6px; font-size: 8px; }
	.welcome-steps i { width: 9px; }
}