/*
 * LeisureOS Menu & Pricing — balanced layout and practical edit controls.
 * Scoped exclusively to #menu and new management dialogs. Works with
 * existing light and dark themes; the customer's public menu is unchanged.
 */
#menu .menu-admin-head{align-items:center;gap:20px;flex-wrap:wrap}
#menu .menu-admin-head h2{font-size:clamp(21px,2.1vw,27px);letter-spacing:-.03em}
#menu .menu-admin-head p{font-size:12px;line-height:1.5}
#menu .menu-admin-actions{flex-wrap:wrap}
#menu .menu-admin-grid{
  display:grid!important;
  grid-template-columns:minmax(300px, 39%) minmax(0, 1fr)!important;
  align-items:start;
  gap:16px;
}
#menu .menu-category-panel,
#menu .menu-items-panel{
  min-width:0;
  border-radius:17px;
  padding:18px;
}
#menu .menu-category-panel{min-height:300px}
#menu .menu-items-panel{min-height:300px}
#menu .lo-menu-panel-heading{display:flex;align-items:center;gap:10px;margin-bottom:15px}
#menu .lo-menu-panel-heading h3{margin:0;font-size:15px;letter-spacing:-.01em}
#menu .lo-menu-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:27px;
  padding:5px 8px;
  border-radius:999px;
  background:#eef2f0;
  color:#475e57;
  font-size:11px;
  font-weight:800;
}
#menu #menuCategoryList{display:grid;gap:8px;align-content:start}
#menu .menu-category-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  border:1px solid #d9e1dd;
  border-radius:13px;
  padding:12px;
  background:#fbfcfb;
}
#menu .menu-category-row:first-child{border-top:1px solid #d9e1dd}
#menu .menu-category-row.lo-selected{border-color:#9cbeb0;background:#f0f6f2}
#menu .lo-category-copy{flex:1 1 165px;min-width:0;max-width:100%}
#menu .lo-category-copy .lo-category-select{
  display:block;
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
  font:inherit;
  font-size:13px;
  line-height:1.4;
  font-weight:800;
  color:#1a342d;
  white-space:normal;
  overflow-wrap:anywhere;
}
#menu .lo-category-copy>span{display:block;margin-top:3px;font-size:11px;color:#667b73}
#menu .lo-category-actions{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
#menu :is(.lo-menu-edit,.lo-menu-delete,.lo-menu-toggle){
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;
  border:1px solid #d3ded9;
  padding:8px 11px;
  min-height:34px;
  font:700 11px/1.2 system-ui,sans-serif;
  background:#fff;
  color:#2d5144;
  white-space:nowrap;
  cursor:pointer;
}
#menu .lo-menu-edit{background:#edf4f0;border-color:#d1e2d9;color:#214b3c}
#menu .lo-menu-delete{background:#fff5f3;border-color:#f3dad5;color:#a44639}
#menu :is(.lo-menu-edit,.lo-menu-delete,.lo-menu-toggle):focus-visible,
.lo-mgmt-dialog :is(button,input,select,textarea):focus-visible{
  outline:2px solid #b99b56;
  outline-offset:3px;
}
#menu .menu-items-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(130px,175px);
  gap:10px;
  margin:0 0 15px;
}
#menu .menu-items-toolbar :is(input,select){width:100%;min-width:0;min-height:41px}
#menu #adminMenuItems{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  align-items:start;
  gap:12px;
}
#menu .admin-menu-item{
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  align-content:start;
  column-gap:10px;
  row-gap:10px;
  min-width:0;
  padding:14px;
  border:1px solid #d8e0dc;
  background:#fff;
  border-radius:14px;
}
#menu .admin-menu-item>div:first-child{flex:1 1 175px;min-width:0}
#menu .admin-menu-item strong{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
#menu .admin-menu-item span{font-size:11px;line-height:1.45;overflow-wrap:anywhere}
#menu .admin-menu-item .price{
  margin-left:auto;
  font-size:15px;
  font-weight:850;
  color:#1d4a36;
  white-space:nowrap;
}
#menu .admin-menu-item :is(button,.stock-link-button){
  min-height:34px;
  padding:8px 10px;
  border-radius:9px;
  font-size:11px;
  line-height:1.25;
}
#menu .admin-menu-item .lo-menu-edit-item{margin-left:0;background:#edf4f0;color:#24523f;border-color:#d1e2d9}
#menu .admin-menu-item > button,
#menu .admin-menu-item :is(.photo-change-btn,.change-photo,[data-change-photo],[data-upload-photo]){
  width:auto!important;
  max-width:100%;
  flex:0 0 auto;
}
#menu .admin-menu-item.inactive{opacity:.7}
#menu .admin-menu-item img{object-fit:cover;border-radius:10px}
#menu .admin-menu-item :is([data-change-photo],[data-upload-photo],.photo-change-btn,.change-photo){
  flex:0 1 auto;
  min-height:32px;
}

/* The deployed staging image uploader sometimes wraps media in a full-width
   block. Let text and action controls wrap without becoming 100%-width rows. */
#menu .admin-menu-item :is(.menu-item-photo,.menu-item-thumbnail,.menu-photo-thumb,.menu-item-image,.menu-thumb){
  flex:0 0 auto;
  max-width:96px;
}
#menu .menu-category-panel .empty-state,
#menu .menu-items-panel .empty-state{padding:28px 14px;text-align:center}

/* Management dialogs use native focus trap/Escape behaviour, not custom
   overlays that can fall behind the existing admin notification/menu UI. */
.lo-mgmt-dialog{
  width:min(470px,calc(100vw - 30px));
  max-height:min(85vh,740px);
  margin:auto;
  border:1px solid #d9e3dd;
  border-radius:20px;
  padding:0;
  background:#fff;
  color:#1c322b;
  box-shadow:0 22px 80px rgba(12,31,24,.25);
}
.lo-mgmt-dialog::backdrop{background:rgba(12,27,25,.58);backdrop-filter:blur(3px)}
.lo-mgmt-form{padding:24px;display:grid;gap:13px}
.lo-mgmt-form h2{margin:0;font-size:20px;letter-spacing:-.025em}
.lo-mgmt-description{margin:0;font-size:12px;line-height:1.6;color:#5e7169}
.lo-mgmt-fields{display:grid;gap:13px;margin:4px 0}
.lo-mgmt-label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#3e594c}
.lo-mgmt-label :is(input,select,textarea){
  display:block;
  width:100%;
  padding:12px 13px;
  border:1px solid #cadad1;
  border-radius:10px;
  color:#19352a;
  background:#fff;
  font:500 13px system-ui,sans-serif;
}
.lo-mgmt-label textarea{resize:vertical}
.lo-mgmt-notice{margin:0;font-size:12px;line-height:1.5}
.lo-mgmt-notice.error{color:#a23933}
.lo-mgmt-notice.warning{padding:12px;background:#fff5e5;border-radius:10px;color:#8a571c}
.lo-mgmt-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:7px}
.lo-mgmt-actions button{min-height:42px;border-radius:10px;padding:10px 16px;font-weight:750;font-size:12px;border:1px solid #c9d8d1;cursor:pointer}
.lo-mgmt-cancel{background:#f4f7f5;color:#39554a}
.lo-mgmt-submit{background:#183e34!important;border-color:#183e34!important;color:#fff!important}
.lo-mgmt-submit.is-danger{background:#ad4039!important;border-color:#ad4039!important}
.lo-mgmt-actions button:disabled{opacity:.55;cursor:not-allowed}

@media(max-width:1200px){
 #menu .menu-admin-grid{grid-template-columns:minmax(275px,38%) minmax(0,1fr)!important}
 #menu .admin-menu-item{padding:12px}
}
@media(max-width:860px){
 #menu .menu-admin-grid{grid-template-columns:1fr!important}
 #menu .menu-category-panel{min-height:0}
 #menu #menuCategoryList{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
 #menu #adminMenuItems{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
}
@media(max-width:550px){
 #menu .menu-category-panel,#menu .menu-items-panel{padding:13px}
 #menu .menu-items-toolbar{grid-template-columns:1fr}
 #menu #menuCategoryList,#menu #adminMenuItems{grid-template-columns:1fr}
 #menu .lo-category-actions{width:100%;justify-content:flex-start}
 #menu .menu-admin-actions{width:100%}
 #menu .menu-admin-actions button{flex:1}
 .lo-mgmt-form{padding:18px}
}
html[data-leisure-contrast="dark"] #menu .lo-menu-panel-heading .lo-menu-count{
 background:#34474b!important;color:#f6fbf9!important;
}
html[data-leisure-contrast="dark"] #menu .menu-category-row,
html[data-leisure-contrast="dark"] #menu .admin-menu-item{
 background:#223036!important;border-color:#4f6267!important;color:#f5faf8!important;
}
html[data-leisure-contrast="dark"] #menu .lo-category-copy .lo-category-select{
 color:#f6faf8!important;background:transparent!important;border:0!important;
}
html[data-leisure-contrast="dark"] #menu .lo-category-copy>span{color:#c4d4d1!important}
html[data-leisure-contrast="dark"] #menu .admin-menu-item .price{color:#f7e4b6!important}
html[data-leisure-contrast="dark"] #menu :is(.lo-menu-edit,.lo-menu-delete,.lo-menu-toggle){
 background:#314247!important;border-color:#5a7073!important;color:#f8faf9!important;
}
html[data-leisure-contrast="dark"] #menu .lo-menu-delete{color:#ffc4ba!important}
html[data-leisure-contrast="dark"] #menu .menu-category-row.lo-selected{border-color:#9bb4ac!important}
html[data-leisure-contrast="dark"] .lo-mgmt-dialog{
 background:#202f34;color:#f6faf8;border-color:#536a6c;
}
html[data-leisure-contrast="dark"] .lo-mgmt-description{color:#c6d5d2}
html[data-leisure-contrast="dark"] .lo-mgmt-label{color:#ecf5f2}
html[data-leisure-contrast="dark"] .lo-mgmt-label :is(input,select,textarea){
 background:#2d4145;color:#f6faf8;border-color:#64797c;color-scheme:dark;
}
html[data-leisure-contrast="dark"] .lo-mgmt-cancel{
 background:#2d4145;color:#f5faf8;border-color:#61797c;
}
html[data-leisure-contrast="dark"] .lo-mgmt-notice.warning{
 background:#473a29;color:#ffdfb0;
}