/* Warm palette shared by the team and restaurant panels. */
.menu-portal-body,.menu-login-body {
  --accent:#d9582b; --accent-strong:#c34b23; --accent-fg:#a94321; --accent-soft:#fbede4;
  --bg:#f8f6f1; --surface:#fff; --surface-2:#faf9f5; --surface-3:#f0eee6;
  --border:#e9e7df; --border-2:#dcded3; --text:#242c26; --text-2:#60685f; --muted:#747d70;
  --shadow-1:0 2px 5px #243c2805; --shadow-2:0 8px 26px #243c280a; --shadow-3:0 24px 80px #243c2829;
  --panel-width:248px;
  background:var(--bg); min-height:100vh; font-size:15px; font-weight:500; line-height:1.65;
}
.menu-portal-body h1,.menu-login-body h1 { font-weight:700; letter-spacing:-.035em; }
.menu-portal-body h2,.menu-portal-body h3,.menu-login-body h2 { font-weight:700; letter-spacing:-.025em; }
.menu-portal-body strong,.menu-login-body strong { font-weight:600; }
.menu-portal-body .btn,.menu-login-body .btn {
  min-height:44px; padding:10px 16px; gap:9px; font-size:14px; font-weight:600; line-height:1.4;
  border:1px solid var(--border-2); border-radius:10px; background:#fff; color:var(--text);
  box-shadow:0 1px 2px #243c2805; text-decoration:none;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.menu-portal-body .btn:hover,.menu-login-body .btn:hover { background:var(--surface-2); border-color:#bdc3b8; transform:translateY(-1px); box-shadow:0 3px 8px #243c280a; }
.menu-portal-body .btn:active,.menu-login-body .btn:active { transform:translateY(0); }
.menu-portal-body .btn-primary,.menu-login-body .btn-primary { background:var(--accent); color:white; border-color:var(--accent); box-shadow:0 3px 8px #d9582b18; }
.menu-portal-body .btn-primary:hover,.menu-login-body .btn-primary:hover { background:var(--accent-strong); color:#fff; border-color:var(--accent-strong); box-shadow:0 4px 12px #d9582b22; }
.menu-portal-body .btn-sm { min-height:36px; padding:7px 12px; font-size:13px; }
.menu-portal-body .btn:disabled { opacity:.6; cursor:wait; transform:none; }
.menu-portal-body .i { width:19px; height:19px; stroke-width:1.7; }
.menu-portal-body :focus-visible,.menu-login-body :focus-visible { outline:2px solid var(--accent); outline-offset:3px; box-shadow:none; }
.portal-brand { display:flex; align-items:center; gap:12px; font-size:19px; font-weight:600; letter-spacing:-.6px; color:var(--text); text-decoration:none!important; }
.portal-brand>span { width:40px; height:40px; flex:none; display:grid; place-items:center; background:var(--accent); color:#fff; border-radius:13px; font-size:30px; font-weight:600; padding-bottom:4px; }
.portal-brand small { display:block; margin-top:2px; font-size:11px; line-height:1.5; font-weight:600; letter-spacing:0; color:var(--text-2); }
.panel-sidebar { position:fixed; inset:0 auto 0 0; z-index:30; width:var(--panel-width); display:flex; flex-direction:column; padding:30px 18px 20px; background:#fffefa; border-right:1px solid var(--border); overflow-y:auto; }
.panel-sidebar .portal-brand { padding:0 8px 34px; }
.panel-nav-label { padding:8px 14px 12px; font-size:10px; font-weight:600; letter-spacing:1.5px; color:var(--muted); }
.panel-nav { display:grid; gap:6px; }
.panel-nav a { display:flex; align-items:center; gap:11px; padding:12px; border:1px solid transparent; border-radius:11px; color:var(--text-2); font-size:13px; font-weight:600; text-decoration:none; transition:background .2s ease,color .2s ease; }
.panel-nav a:hover { background:var(--surface-3); color:var(--text); }
.panel-nav a.is-active { background:var(--accent-soft); color:var(--accent-fg); border-color:#f1dccf; }
.panel-nav .nav-chevron { width:14px; height:14px; margin-left:auto; opacity:0; }
.panel-nav .is-active .nav-chevron { opacity:1; }
.panel-sidebar-note { margin:48px 8px 32px; padding:20px 16px; border:1px solid #e5e8dc; border-radius:14px; background:#f3f5ee; }
.panel-note-icon { display:grid; place-items:center; color:#4d6646; width:34px; height:34px; border-radius:10px; background:#e6ecdf; margin-bottom:14px; }
.panel-sidebar-note strong { font-size:12px; display:block; }
.panel-sidebar-note p { font-size:12px; line-height:1.75; color:var(--text-2); margin-top:7px; font-weight:600; }
.panel-profile { margin-top:auto; padding:18px 8px 0; border-top:1px solid var(--border); display:flex; gap:10px; align-items:center; }
.panel-avatar { display:grid; place-items:center; width:36px; height:36px; flex:none; background:var(--surface-3); border-radius:50%; color:#63725d; }
.panel-profile>div { min-width:0; }
.panel-profile strong { display:block; overflow-wrap:anywhere; font-size:12px; line-height:1.6; }
.panel-profile small { font-size:11px; color:var(--muted); font-weight:600; }
.panel-topbar { height:76px; margin-left:var(--panel-width); padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--border); background:#fffefa; }
.panel-breadcrumb { display:flex; align-items:center; gap:13px; font-size:13px; color:var(--muted); font-weight:600; }
.panel-breadcrumb strong { color:var(--text); font-weight:600; }
.panel-breadcrumb .i { width:13px; height:13px; }
.panel-utilities { display:flex; align-items:center; gap:20px; }
.panel-utilities form { margin:0; }
.panel-crm-link { display:flex; gap:8px; align-items:center; color:var(--text-2); font-size:13px; text-decoration:none; font-weight:600; }
.panel-logout { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text-2); cursor:pointer; }
.panel-logout:hover { color:var(--accent-fg); background:var(--accent-soft); }
.menu-panel-body .portal-content { max-width:none; margin-left:var(--panel-width); padding:38px 40px 70px; }
.panel-skip { position:fixed; left:16px; top:-100px; z-index:100; background:white; padding:12px; border-radius:8px; }
.panel-skip:focus { top:12px; }
.impersonation-banner { margin-left:var(--panel-width); background:#e8ecd9; color:#495b35; padding:12px 40px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px; font-weight:600; }
.impersonation-banner>span { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.impersonation-banner form { flex:none; }
.impersonation-banner button { display:flex; align-items:center; gap:8px; background:#ffffff99; border:1px solid #d2d9c3; border-radius:8px; padding:8px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.portal-alert { display:flex; align-items:flex-start; gap:10px; padding:15px 18px; border:1px solid #dae6d5; border-radius:12px; margin:0 auto 24px; max-width:1200px; font-size:14px; line-height:1.7; background:#e9f2e5; color:#3c5d30; }
.portal-alert .i { margin-top:3px; }
.portal-alert.error { color:#9c3c26; background:#fcece6; border-color:#f2d6cb; }
.menu-login-body { display:grid; place-items:center; padding:36px; }
.menu-login { width:min(100%,1040px); display:grid; grid-template-columns:1.05fr 1fr; background:#fff; border-radius:24px; border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow-2); min-height:650px; }
.login-story { background:#263c2d; color:#f7f3e8; padding:44px; display:flex; flex-direction:column; justify-content:space-between; gap:48px; }
.login-story .portal-brand { color:#f7f3e8; }
.login-story h1 { font-size:38px; line-height:1.22; margin:16px 0 20px; }
.login-eyebrow { font-size:11px; letter-spacing:1.5px; font-weight:600; color:#d9bd96; }
.login-story p { font-size:14px; line-height:1.85; color:#d0d7c9; max-width:350px; }
.login-detail { margin-top:28px; font-size:14px; line-height:2.7; }
.login-detail span { display:inline-block; width:25px; color:#d2af7d; font-size:12px; font-weight:600; margin-right:12px; }
.login-story>small { font-size:12px; color:#bac6b1; font-weight:600; }
.login-form-area { padding:56px 44px; display:flex; flex-direction:column; justify-content:center; }
.login-form-area .login-eyebrow { color:var(--accent-fg); }
.login-form-area h2 { font-size:29px; margin:14px 0; }
.login-form-area>p { font-size:14px; color:var(--text-2); line-height:1.8; margin-bottom:30px; }
.login-form-area form { display:flex; flex-direction:column; }
.login-form-area label { font-size:14px; font-weight:600; margin-bottom:9px; }
.login-form-area input { padding:13px 14px; min-height:48px; border:1px solid var(--border-2); border-radius:10px; background:var(--surface-2); margin-bottom:22px; width:100%; font-size:15px; }
.login-form-area .btn-primary { margin-top:6px; min-height:48px; }
.login-help { margin-top:25px; text-align:center; font-size:13px; color:var(--text-2); line-height:1.8; font-weight:600; }
.client-menu-panel { margin:20px 0; padding:26px; background:var(--surface); border:1px solid var(--border); border-radius:16px; }
.client-menu-panel h2 { font-size:18px; margin-bottom:8px; }
.client-menu-panel p { font-size:14px; color:var(--text-2); margin-bottom:16px; }
.client-menu-row,.client-menu-account { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-top:1px solid var(--border); flex-wrap:wrap; }
.client-menu-row strong { font-size:14px; }
.client-menu-row small,.client-menu-account small { display:block; font-size:13px; color:var(--text-2); overflow-wrap:anywhere; margin-top:4px; font-weight:600; }
.client-menu-actions { display:flex; gap:8px; flex-wrap:wrap; }
@media(max-width:1100px) {
  .menu-portal-body { --panel-width:222px; }
  .panel-topbar { padding-inline:28px; }
  .menu-panel-body .portal-content { padding:32px 28px 60px; }
  .panel-sidebar { padding-inline:12px; }
  .panel-sidebar .portal-brand { font-size:17px; }
}
@media(max-width:780px) {
  .panel-sidebar { position:relative; width:100%; padding:20px 20px 14px; border-right:0; border-bottom:1px solid var(--border); overflow:visible; }
  .panel-sidebar .portal-brand { padding:0 0 20px; font-size:19px; }
  .panel-nav-label,.panel-sidebar-note,.panel-profile { display:none; }
  .panel-nav { display:flex; gap:8px; }
  .panel-nav a { flex:1; padding:11px; justify-content:center; }
  .panel-nav .nav-chevron { display:none; }
  .panel-topbar { margin-left:0; height:58px; padding:0 20px; }
  .panel-breadcrumb { font-size:12px; gap:8px; font-weight:600; }
  .panel-utilities { gap:12px; }
  .panel-crm-link span { display:none; }
  .menu-panel-body .portal-content { margin-left:0; padding:24px 20px 48px; }
  .impersonation-banner { margin-left:0; padding:12px 20px; font-size:12px; align-items:flex-start; flex-wrap:wrap; font-weight:600; }
  .menu-login-body { padding:20px; }
  .menu-login { grid-template-columns:1fr; max-width:480px; min-height:0; }
  .login-story { padding:28px; gap:30px; }
  .login-story h1 { font-size:30px; margin:10px 0 0; }
  .login-story p,.login-detail,.login-story>small { display:none; font-weight:600; }
  .login-form-area { padding:32px 28px; }
  .login-form-area input { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { .menu-portal-body *, .menu-login-body * { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
.menu-portal-body:not(.menu-panel-body) .portal-content { max-width:900px; margin:0 auto; padding:48px 24px; }

/* Ambient food-paper background. Surfaces stay opaque for readable content. */
.menu-panel-body {
  isolation:isolate;
  background:#f5f0e7;
  --shadow-1:0 3px 8px #34422e0c,0 16px 28px -20px #34422e38;
  --shadow-2:0 8px 18px #34422e12,0 24px 46px -24px #34422e4d;
}
.menu-panel-body::before,.menu-panel-body::after {
  content:""; position:fixed; inset:0; pointer-events:none;
}
.menu-panel-body::before {
  z-index:-2;
  background:linear-gradient(125deg,#f8f4ec 4%,#e6ead8 33%,#f4e2d1 66%,#f7f2e7 96%);
  background-size:240% 240%;
  animation:panel-ambient 28s ease-in-out infinite alternate;
}
.menu-panel-body::after {
  z-index:-1; background:url('../img/food-pattern.svg') repeat; background-size:640px auto; opacity:.27;
}
.panel-sidebar {
  background:linear-gradient(180deg,#fffefa 0%,#faf8f0 100%);
  box-shadow:5px 0 20px -14px #34422e45;
}
.panel-topbar { background:#fffdf7ed; box-shadow:0 3px 14px -9px #34422e28; }
.panel-sidebar-note { background:linear-gradient(140deg,#f5f7ee,#e9eedf); box-shadow:inset 0 1px 0 #fff,0 7px 14px -10px #465b3640; }
.menu-portal-body .btn-primary { box-shadow:0 4px 10px -3px #c34b2338,inset 0 1px 0 #ffffff24; }
@keyframes panel-ambient { 0% { background-position:0% 25%; } 100% { background-position:100% 80%; } }
@media(prefers-reduced-motion:reduce) { .menu-panel-body::before { animation:none; background-position:45% 45%; } }