:root {
  --nav: #103c37;
  --nav2: #1d554d;
  --ink: #172421;
  --muted: #71807c;
  --bg: #f5f6f2;
  --card: #fff;
  --line: #e1e7e3;
  --gold: #d9a63e;
  --red: #b84a3f;
  --shadow: 0 8px 25px #143c3510;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
.primary {
  border: 0 !important;
  background: var(--nav) !important;
  color: #fff !important;
}
.ghost {
  background: #fff;
  border: 1px solid var(--line) !important;
  color: var(--ink);
}
#appShell {
  width: 100%;
  min-height: 100vh;
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  padding: 24px 18px;
  background: linear-gradient(180deg, #0e3732, #123f39);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 0 8px 25px;
  font-weight: 750;
}
#mobileNavToggle{display:none;margin-left:auto;padding:9px 12px;border:1px solid #ffd868;border-radius:9px;background:#fff8df;color:#99151e;font-weight:750}
.brand > span,
.login-mark {
  width: 38px;
  height: 38px;
  border: 1px solid #789f99;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #ffe0a0;
  font: 700 20px Georgia;
}
.brand small,
.profile small {
  display: block;
  margin-top: 3px;
  color: #a8c0bc;
  font-size: 10px;
  font-weight: 400;
}
nav {
  display: grid;
  gap: 4px;
}
nav button {
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #bdd0cd;
  text-align: left;
  font-size: 13px;
}
nav button:hover,
nav button.active {
  background: #25584f;
  color: #fff;
}
.profile {
  margin-top: auto;
  border-top: 1px solid #346159;
  padding: 18px 8px 0;
  font-size: 12px;
}
.profile button {
  display: block;
  padding: 9px 0;
  border: 0;
  background: none;
  color: #b8cfcb;
}
main {
  width: calc(100% - 248px);
  margin-left: 248px;
  padding: 26px 30px 50px;
}
header,
.panel-title,
.setup-head,
.dialog-head,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header {
  margin-bottom: 20px;
}
h1,
h2 {
  font-family: Georgia, serif;
}
header h1 {
  margin: 3px 0;
  font-size: 28px;
}
header small,
.panel-title small,
.setup-head small,
.dialog-head small {
  color: var(--muted);
  letter-spacing: 0.08em;
}
.actions {
  display: flex;
  gap: 9px;
}
.actions button,
.dialog-actions button,
.setup-head button {
  padding: 10px 15px;
  border-radius: 9px;
  border: 1px solid var(--line);
}
.notice {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid #d4e5de;
  border-radius: 10px;
  background: #eaf3ee;
  font-size: 12px;
}
.notice span {
  color: var(--muted);
}
.notice i {
  margin-left: auto;
  color: #18705d;
  font-style: normal;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin: 16px 0;
}
.stat,
.panel,
.setup {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.stat {
  padding: 16px;
}
.stat small,
.row small,
.account small,
.mini-list small {
  color: var(--muted);
}
.stat strong {
  display: block;
  margin: 7px 0 2px;
  font: 700 25px Georgia;
}
.stat em {
  color: #327966;
  font-size: 11px;
  font-style: normal;
}
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 1fr);
  gap: 15px;
}
.panel {
  padding: 18px;
  min-width: 0;
}
.panel-title {
  margin-bottom: 15px;
}
.panel-title h2,
.setup-head h2 {
  margin: 3px 0 0;
  font-size: 20px;
}
.panel-title button {
  border: 0;
  background: none;
  color: var(--nav);
  font-size: 12px;
}
.panel-title em,
.badge {
  padding: 5px 8px;
  border-radius: 20px;
  background: #fff1d4;
  color: #826016;
  font-size: 10px;
  font-style: normal;
}
.room-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(60px, 1fr));
  gap: 8px;
}
.room {
  padding: 9px;
  border: 1px solid var(--line);
  border-left: 4px solid #61a38e;
  border-radius: 8px;
}
.room b {
  font-size: 12px;
}
.room small {
  display: block;
  font-size: 9px;
  margin-top: 3px;
}
.room.dirty {
  border-left-color: var(--gold);
  background: #fffaf0;
}
.room.occupied {
  border-left-color: #477fa4;
  background: #f2f8fb;
}
.tables {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}
.table {
  aspect-ratio: 1;
  border: 2px solid #c8dad4;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
}
.table.occupied {
  background: #245d55;
  color: #fff;
  border-color: #245d55;
}
.table.reserved {
  background: #fff3d9;
  border-color: #e3bc66;
}
.legend {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 9px;
}
.legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  background: #c8dad4;
}
.legend .occupied {
  background: #245d55;
}
.legend .reserved {
  background: #e3bc66;
}
.row {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.row:first-child {
  border-top: 0;
}
.row div {
  flex: 1;
}
.row b {
  display: block;
  font-size: 12px;
}
.row small,
.row time {
  font-size: 10px;
}
.danger,
.form-error {
  color: var(--red) !important;
}
.bar {
  height: 5px;
  margin-top: 5px;
  border-radius: 5px;
  background: #edf0ef;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--red);
}
.admin-panel {
  margin-top: 15px;
  min-height: auto;
}
.account {
  display: grid;
  grid-template-columns: 2fr 1.3fr 0.6fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 6px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.account:first-child {
  border-top: 0;
}
.account small {
  display: block;
  margin-top: 3px;
}
.account button {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--nav);
}
.empty {
  color: var(--muted);
}
.setup {
  margin-top: 15px;
  padding: 20px;
}
.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.compact {
  box-shadow: none;
}
.compact h3 {
  margin: 0 0 13px;
}
.stack {
  display: grid;
  gap: 9px;
}
.stack input,
.stack select,
.form-grid input,
.form-grid select,
.login-card input {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #d8e0dc;
  border-radius: 8px;
  background: #fff;
}
.stack button {
  padding: 10px;
  border: 0;
  border-radius: 8px;
}
.inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mini-list {
  margin-top: 12px;
  max-height: 160px;
  overflow: auto;
}
.mini-item {
  padding: 9px 3px;
  border-top: 1px solid var(--line);
  font-size: 11px;
}
.mini-item b {
  display: block;
}
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 10px;
}
.checks label {
  display: flex;
  gap: 5px;
  align-items: center;
}
.form-error {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
}
.login {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #0c2d29, #24645a);
}
.login-card {
  width: min(430px, 100%);
  padding: 36px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 25px 70px #061b1766;
}
.login-card h1 {
  margin: 8px 0;
  font-size: 28px;
}
.login-card p {
  color: var(--muted);
  line-height: 1.5;
}
.login-card label,
.form-grid label {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
}
.login-card button {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 0;
  border-radius: 9px;
}
dialog {
  width: min(690px, 92vw);
  padding: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 25px 80px #17222555;
}
dialog::backdrop {
  background: #102e2b99;
}
dialog form {
  padding: 24px;
}
.dialog-head h2 {
  margin: 3px 0;
}
.dialog-head button {
  border: 0;
  background: none;
  font-size: 25px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.dialog-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 1000px) {
  .sidebar {
    width: 82px;
  }
  .brand div,
  .profile b,
  .profile small,
  nav button {
    font-size: 0;
  }
  .brand {
    padding-left: 4px;
  }
  .brand > span {
    flex: none;
  }
  .profile button {
    font-size: 10px;
  }
  nav button {
    height: 38px;
    padding: 8px;
  }
  nav button::first-letter {
    font-size: 14px;
  }
  main {
    width: calc(100% - 82px);
    margin-left: 82px;
    padding: 22px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .room-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (max-width: 680px) {
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 12px;
  }
  .brand {
    padding: 0;
  }
  .sidebar nav,
  .profile {
    display: none;
  }
  #mobileNavToggle{display:block}
  .sidebar.nav-open nav{display:grid;margin-top:12px;padding-top:10px;border-top:1px solid #d74641;max-height:58vh;overflow:auto}
  .sidebar.nav-open nav button{min-height:44px;font-size:14px;padding:11px 13px;color:#fff;text-align:left}
  .sidebar.nav-open .profile{display:block;margin-top:12px;padding-top:12px}
  .sidebar.nav-open .profile b,.sidebar.nav-open .profile small{display:block}
  .sidebar.nav-open .profile button{min-height:44px;font-size:13px}
  #appShell {
    display: block;
  }
  main {
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .room-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .setup-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .account {
    grid-template-columns: 1fr 1fr;
  }
  .account > :first-child {
    grid-column: 1/-1;
  }
  .actions .ghost {
    display: none;
  }
  header h1 {
    font-size: 22px;
  }
}
/* ResortSuite red and yellow brand refresh */
:root {
  --nav: #a71920;
  --nav2: #cf2b2f;
  --ink: #2b1917;
  --muted: #7d6e68;
  --bg: #fff9eb;
  --card: #fff;
  --line: #f0dfbb;
  --gold: #f4b81f;
  --red: #b5161c;
  --shadow: 0 8px 25px #7f171510;
}
.sidebar {
  background: linear-gradient(180deg, #8f1118, #bd1d24);
}
.brand > span,
.login-mark {
  border-color: #ffd868;
  color: #ffd868;
}
.brand small,
.profile small {
  color: #ffd9b0;
}
.sidebar nav button {
  color: #ffe9ca;
}
.sidebar nav button:hover,
.sidebar nav button.active {
  background: #d33b36;
  color: #fff;
}
.profile {
  border-color: #d74641;
}
.profile button {
  color: #ffe1bf;
}
.primary {
  background: linear-gradient(135deg, #a71920, #cf2b2f) !important;
  box-shadow: 0 7px 16px #a7192030;
}
.primary:hover {
  filter: brightness(1.06);
}
.notice {
  border-color: #f0cf69;
  background: #fff7d7;
}
.notice i {
  color: #a71920;
}
.stat em,
.panel-title button,
.account button {
  color: #a71920;
}
.table.occupied {
  background: #b51d24;
  border-color: #b51d24;
}
.table.reserved {
  background: #fff0a8;
  border-color: #e7b528;
}
.legend .occupied {
  background: #b51d24;
}
.legend .reserved {
  background: #e7b528;
}
.login {
  background:
    radial-gradient(circle at 75% 25%, #ffd95c 0 11%, transparent 32%),
    linear-gradient(135deg, #7d0d13, #cf282d 58%, #f3b719);
}
.login-card {
  width: min(860px, 100%);
  min-height: 520px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 330px;
  overflow: hidden;
  box-shadow: 0 28px 80px #4d0b0b66;
}
.login-content {
  padding: 42px;
}
.login-content > small {
  color: #a71920;
  font-weight: 750;
  letter-spacing: 0.09em;
}
.login-content .login-mark {
  background: #a71920;
}
.login-content input:focus {
  outline: 3px solid #f4b81f55;
  border-color: #d29a12;
}
.chef-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(160deg, #ffc72b, #b5131b 72%);
}
.chef-panel::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid #ffe79a88;
  border-radius: 16px;
}
.chef-panel span {
  position: absolute;
  z-index: 2;
  top: 32px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #7d0d13;
  color: #fff3c4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chef-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  mix-blend-mode: multiply;
  transform: scale(1.02);
}
@media (max-width: 760px) {
  .login-card {
    width: min(430px, 100%);
    min-height: 0;
    display: block;
  }
  .login-content {
    padding: 34px;
  }
  .chef-panel {
    display: none;
  }
}
.portal-badge {
  display: inline-flex;
  margin-top: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff3c4;
  color: #97151c;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}
body[data-portal="platform"] .login {
  background: linear-gradient(135deg, #390608, #b5131b);
}
body[data-portal="reseller"] .login {
  background: linear-gradient(135deg, #6a3500, #e2a817);
}
body[data-portal="admin"] .login {
  background: linear-gradient(135deg, #4b0a0e, #d12028);
}
body[data-portal="customer"] .login {
  background: linear-gradient(135deg, #5e0b10, #f1b71c);
}
.hr-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.leave-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.leave-actions button {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff8df;
  color: var(--red);
}
@media (max-width: 760px) {
  .hr-kpis {
    grid-template-columns: 1fr 1fr !important;
  }
}
.wide-dialog {
  width: min(980px, 94vw);
  max-height: 92vh;
  overflow: auto;
}
.wide-dialog textarea {
  min-height: 76px;
  padding: 10px;
  border: 1px solid #d8e0dc;
  border-radius: 8px;
  resize: vertical;
}
.full-span {
  grid-column: 1/-1;
}
.upload-label {
  padding: 10px;
  border: 1px dashed #d7b968;
  border-radius: 9px;
  background: #fffaf0;
}
.upload-label input {
  margin-top: 7px;
}
.onboarding-result {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid #d2ab43;
  border-radius: 10px;
  background: #fff5c9;
  font-size: 12px;
}
.onboarding-result span {
  display: block;
}
.onboarding-result a {
  color: var(--red);
  word-break: break-all;
}
@media (max-width: 680px) {
  .full-span {
    grid-column: auto;
  }
}
.housekeeping-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.housekeeping-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}
.housekeeping-room {
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 5px solid #4ea36f;
  border-radius: 12px;
  background: #fff;
}
.housekeeping-room h3 {
  margin: 4px 0;
  font: 700 21px Georgia;
}
.housekeeping-room p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.housekeeping-room.status-dirty {
  border-left-color: #e0a700;
  background: #fffaf0;
}
.housekeeping-room.status-inspected {
  border-left-color: #337db5;
}
.housekeeping-room.status-occupied {
  border-left-color: #a71920;
  background: #fff5f4;
}
.housekeeping-room.status-out_of_order {
  border-left-color: #555;
  background: #f2f2f2;
}
.room-state {
  display: inline-block;
  margin: 12px 0 9px;
  padding: 5px 9px;
  border-radius: 20px;
  background: #fff1bd;
  color: #79211e;
  font-size: 10px;
  font-weight: 750;
  text-transform: capitalize;
}
.room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.room-actions button {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--nav);
  font-size: 10px;
  text-transform: capitalize;
}
.room-actions button:hover {
  background: #fff0b7;
}
.room-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 950px) {
  .housekeeping-board {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
  }
  .housekeeping-kpis {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 620px) {
  .housekeeping-board {
    grid-template-columns: 1fr;
  }
  .housekeeping-kpis {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* Online ordering operations */
.online-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  background: linear-gradient(110deg, #fff, #fff1b8);
}
.online-link h3 {
  margin: 0 0 5px;
}
.online-link p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.online-link a {
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--nav);
  color: #fff;
  text-decoration: none;
}
.online-order {
  padding: 15px 2px;
  border-top: 1px solid var(--line);
}
.online-order:first-child {
  border-top: 0;
}
.online-order-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.online-order-head h3 {
  margin: 4px 0;
}
.online-order-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.online-order-head > div:last-child {
  text-align: right;
}
.online-order-head strong,
.online-order-head span {
  display: block;
  margin-bottom: 6px;
}
.online-order-actions {
  display: flex;
  gap: 7px;
  margin-top: 11px;
}
.online-order-actions button {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff8df;
  color: var(--red);
  text-transform: capitalize;
}
@media (max-width: 620px) {
  .online-link,
  .online-order-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .online-order-head > div:last-child {
    text-align: left;
  }
}
/* CRM and enquiry calling */
.crm-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.crm-layout {
  grid-template-columns: 1.2fr 0.8fr;
}
.crm-filter {
  display: grid;
  gap: 9px;
}
.crm-filter input,
.crm-filter select {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.crm-note {
  padding: 10px;
  border-radius: 8px;
  background: #fff6ce;
  color: var(--muted);
  font-size: 11px;
}
.crm-contact {
  padding: 16px;
  border-top: 1px solid var(--line);
  border-left: 5px solid #c3b89e;
}
.crm-contact:first-child {
  border-top: 0;
}
.crm-contact.priority-hot {
  border-left-color: #d11e25;
  background: #fff8f5;
}
.crm-contact.priority-cold {
  border-left-color: #4c87b7;
}
.crm-person,
.crm-meta,
.crm-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.crm-person h3 {
  margin: 4px 0;
}
.crm-person p,
.crm-remark {
  margin: 3px 0;
  color: var(--muted);
  font-size: 11px;
}
.crm-person > div:last-child {
  text-align: right;
}
.crm-person > div:last-child span {
  display: block;
  margin-bottom: 5px;
}
.lead-badge {
  padding: 5px 9px;
  border-radius: 20px;
  background: #fff0b8;
  color: #861a1c;
  font-size: 10px;
  font-weight: 750;
  text-transform: capitalize;
}
.crm-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 11px 0;
  font-size: 10px;
}
.crm-meta span {
  padding: 6px 9px;
  border-radius: 7px;
  background: #fff8df;
}
.crm-actions {
  justify-content: flex-start;
  margin-top: 11px;
}
.crm-actions a {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
}
.crm-actions select {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.crm-call-log {
  display: grid;
  grid-template-columns: 1fr 100px 1.1fr 1.4fr auto;
  gap: 7px;
  margin-top: 10px;
}
.crm-call-log input,
.crm-call-log select,
.crm-call-log button {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.crm-call-log button {
  background: #fff0b7;
  color: var(--red);
  font-weight: 700;
}
@media (max-width: 1050px) {
  .crm-call-log {
    grid-template-columns: 1fr 1fr;
  }
  .crm-call-log button {
    grid-column: 1/-1;
  }
  .crm-kpis {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 680px) {
  .crm-layout {
    grid-template-columns: 1fr;
  }
  .crm-kpis {
    grid-template-columns: 1fr 1fr !important;
  }
  .crm-person {
    align-items: flex-start;
  }
  .crm-meta {
    display: grid;
    grid-template-columns: 1fr;
  }
  .crm-call-log {
    grid-template-columns: 1fr;
  }
}
/* Hierarchy account administration */
.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}
.account-actions button {
  white-space: nowrap;
}
.danger-outline {
  color: #a50f1a !important;
  border-color: #d9a2a6 !important;
  background: #fff !important;
}
.account-editor {
  width: min(760px, calc(100vw - 32px));
}
.account-editor .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.account-editor label {
  display: grid;
  gap: 6px;
}
.permission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 14px;
  border: 1px solid #ecd5ac;
  border-radius: 14px;
  background: #fffbf3;
}
.permission-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
@media (max-width: 700px) {
  .account-editor .form-grid,
  .permission-grid {
    grid-template-columns: 1fr;
  }
  .account-actions {
    justify-content: flex-start;
  }
}
.housekeeping-proof {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) auto;
  gap: 8px;
  align-items: end;
  width: 100%;
}
.housekeeping-proof label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
}
.housekeeping-proof input {
  width: 100%;
}
.job-actions {
  flex-wrap: wrap;
}
.staff-chat-form select:not([hidden]) {
  min-width: 180px;
}
@media (max-width: 720px) {
  .housekeeping-proof {
    grid-template-columns: 1fr;
  }
  .staff-chat-form {
    display: grid;
    grid-template-columns: 1fr;
  }
  .staff-chat-form select:not([hidden]) {
    width: 100%;
  }
}
.setup#setupPanel {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  background: #fffaf0;
}
.setup#setupPanel[hidden] {
  display: none !important;
}
.setup#setupPanel .setup-head {
  grid-column: 1/-1;
  padding-bottom: 18px;
  border-bottom: 1px solid #efd8a9;
}
.setup#setupPanel .settings-actions select {
  display: none;
}
.setup#setupPanel .settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.setup#setupPanel .settings-quick-nav {
  grid-column: 1;
  align-self: start;
  position: sticky;
  top: 18px;
  display: flex !important;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #ead7b0;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(91, 47, 19, 0.06);
}
.setup#setupPanel .settings-quick-nav button {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6c5550;
  text-align: left;
  font-size: 13px;
  font-weight: 650;
}
.setup#setupPanel .settings-quick-nav button:hover {
  background: #fff3d4;
  color: #99151e;
}
.setup#setupPanel .settings-quick-nav button.active {
  background: linear-gradient(135deg, #99151e, #c72832);
  color: #fff;
  box-shadow: 0 6px 14px rgba(153, 21, 30, 0.2);
}
.setup#setupPanel .settings-grid {
  grid-column: 2;
  display: block;
  margin: 0;
  min-width: 0;
}
.setup#setupPanel .settings-grid > article {
  width: 100%;
  min-height: 0;
  padding: 24px;
  border-color: #ead7b0;
  box-shadow: 0 8px 25px rgba(91, 47, 19, 0.05);
}
.setup#setupPanel .settings-grid > article + article:not([hidden]) {
  margin-top: 16px;
}
.setup#setupPanel .settings-grid > [data-setting][hidden] {
  display: none !important;
}
.setup#setupPanel #setupError {
  grid-column: 2;
}
.setup#setupPanel .settings-fieldset {
  border: 1px solid #ead7b0;
  border-radius: 12px;
  padding: 14px;
  display: grid;
  gap: 10px;
}
.setup#setupPanel .settings-fieldset legend {
  padding: 0 7px;
  color: #99151e;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .setup#setupPanel {
    grid-template-columns: 1fr;
  }
  .setup#setupPanel .setup-head,
  .setup#setupPanel .settings-quick-nav,
  .setup#setupPanel .settings-grid,
  .setup#setupPanel #setupError {
    grid-column: 1;
  }
  .setup#setupPanel .settings-quick-nav {
    position: static;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .setup#setupPanel .settings-quick-nav button {
    text-align: center;
  }
  .setup#setupPanel .settings-actions select {
    display: block;
    min-width: 210px;
  }
}
@media (max-width: 560px) {
  .setup#setupPanel {
    padding: 14px;
  }
  .setup#setupPanel .setup-head {
    align-items: flex-start;
    gap: 12px;
  }
  .setup#setupPanel .settings-quick-nav {
    grid-template-columns: 1fr;
  }
  .setup#setupPanel .settings-actions select {
    display: none;
  }
}
/* Assigned-service staff order workspace */
.staff-order-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(320px,1.3fr) minmax(280px,.9fr);gap:14px;margin-bottom:14px}.staff-order-layout .panel{margin:0}.staff-order-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-height:520px;overflow:auto}.staff-catalog-item{display:grid;grid-template-columns:1fr auto;gap:4px 10px;text-align:left;padding:13px;border:1px solid #ead4ae;border-radius:12px;background:#fff;box-shadow:none}.staff-catalog-item span{display:grid;gap:3px}.staff-catalog-item small{color:#796b65}.staff-catalog-item strong{color:#b21520}.staff-catalog-item em{grid-column:1/-1;font-style:normal;color:#b21520;font-weight:700}.staff-cart-line,.staff-recent-order{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid #ead4ae}.staff-cart-line>div:first-child,.staff-recent-order>div{display:grid;gap:3px}.staff-cart-line small,.staff-recent-order small{color:#796b65}.staff-qty{display:flex;align-items:center;gap:6px}.staff-qty button{min-width:30px;padding:5px 7px}.staff-qty .danger-link{color:#b21520;background:transparent;border:0}.staff-cart-total{display:flex;justify-content:space-between;font-size:1.15rem;padding:16px 0}.status-chip{background:#fff0bd;border-radius:999px;padding:5px 9px;font-size:.78rem}.empty-state{color:#796b65}.staff-catalog-panel .panel-title input{max-width:180px}
@media(max-width:1050px){.staff-order-layout{grid-template-columns:1fr 1fr}.staff-cart-panel{grid-column:1/-1}}@media(max-width:700px){.staff-order-layout{grid-template-columns:1fr}.staff-cart-panel{grid-column:auto}.staff-order-catalog{grid-template-columns:1fr;max-height:none}.staff-cart-line,.staff-recent-order{grid-template-columns:1fr auto}.staff-cart-line>strong,.staff-recent-order>strong{grid-column:2}.staff-qty{grid-row:1/3;grid-column:2}.staff-catalog-panel .panel-title{align-items:stretch}.staff-catalog-panel .panel-title input{max-width:none}}

/* Staff account management */
.setup#setupPanel #staffList{max-height:310px}.staff-manage-item{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:12px;align-items:center;padding:12px 3px}.staff-manage-item small{display:block;margin:3px 0 7px;color:#796b65}.staff-status{display:inline-flex;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:750}.staff-status.active{color:#176b4c;background:#e5f6ee}.staff-status.suspended{color:#a31520;background:#fde8e8}.staff-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.staff-actions button{padding:6px 9px;border:1px solid #d9c7a6;border-radius:7px;background:#fff;color:#402722;cursor:pointer}.staff-actions button:hover{border-color:#b51c26;color:#99151e}.staff-actions button.danger{border-color:#efb4b7;color:#b21520}.staff-editor .close{float:right;border:0;background:none;font-size:24px}.staff-editor label{display:grid;gap:6px;margin-top:12px;font-size:12px;font-weight:700}.staff-editor input,.staff-editor select{width:100%;padding:10px;border:1px solid #d8d8d2;border-radius:8px;background:#fff}.staff-editor .wide-field{grid-column:1/-1}
@media(max-width:700px){.staff-manage-item{grid-template-columns:1fr}.staff-actions{justify-content:flex-start}.staff-actions button{flex:1 1 calc(50% - 6px)}.staff-editor .form-grid{grid-template-columns:1fr}.staff-editor .wide-field{grid-column:auto}}
.front-office-approvals{border-top:4px solid #b91f29}.front-office-approvals .approval-row{grid-template-columns:minmax(220px,1.5fr) minmax(130px,.7fr) auto auto}.staff-chat-availability{margin:8px 0;padding:8px 10px;border-radius:8px;background:#fff4ca;color:#6f4d14;font-size:11px}.staff-chat-form button:disabled,.staff-chat-form input:disabled{cursor:not-allowed;opacity:.55}
@media(max-width:700px){.front-office-approvals .approval-row{grid-template-columns:1fr}.front-office-approvals .approval-row button{width:100%}}