/* Beheer menu tab: search, category cards, item rows, edit panel. Tokens from beheer.css. */
/* ---- menu availability ---- */
.cat{background:#fff;border:1px solid var(--color-gray-200);border-radius:8px;margin-bottom:16px;overflow:hidden}
.cat__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--color-gray-50);border-bottom:1px solid var(--color-gray-200)}
.cat__head h2{font-size:16px;font-weight:600}
.cat__all{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--color-gray-600)}
.item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 16px 4px 4px;min-height:56px;border-top:1px solid var(--color-gray-100)}
.item:first-of-type{border-top:0}
.item__name{font-size:15px;min-width:0}
.item__name small{display:block;font-size:13px;color:var(--color-gray-500)}
.item.is-out .item__name{color:var(--color-gray-400);text-decoration:line-through}
.item__right{display:flex;align-items:center;gap:10px}
/* search: sticky under the topbar, filters as you type */
.menu-search{position:sticky;top:80px;z-index:5;display:flex;align-items:center;gap:8px;max-width:480px;margin-bottom:12px;padding:0 14px;background:#fff;border:1px solid var(--color-gray-300);border-radius:8px;box-shadow:var(--shadow-theme-xs);color:var(--color-gray-500)}
.menu-search:focus-within{border-color:var(--color-brand-500);box-shadow:var(--shadow-focus-ring)}
.menu-search input{flex:1;min-width:0;min-height:var(--tap);border:0;background:none;font:inherit;font-size:16px;color:var(--color-gray-900);outline:none}
.menu-empty{padding:24px 16px;text-align:center;font-size:14px;color:var(--color-gray-600);background:#fff;border:1px dashed var(--color-gray-300);border-radius:8px}
/* row: whole left part opens the edit panel (48px+), switch stays a quick toggle */
.item__open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:4px 12px;border:0;border-radius:8px;background:none;text-align:left}
.item__open:hover{background:var(--color-gray-50)}
.item__open .item__name{flex:1}
.item__pen{display:grid;place-items:center;width:40px;height:40px;border-radius:8px;color:var(--color-gray-500)}
.item__open:hover .item__pen{color:var(--color-brand-700);background:var(--color-brand-50)}
.item__code{margin-left:6px;padding:0 6px;border-radius:4px;background:var(--color-gray-100);color:var(--color-gray-700);font-size:12px;font-weight:600;letter-spacing:.02em;text-decoration:none}
.item.is-out .item__name small{text-decoration:none}

/* edit panel: right side sheet (Femke modal tokens), bottom sheet on phone */
.modal--panel{margin:0 0 0 auto;padding:0;width:min(440px,100vw);height:100dvh;max-height:100dvh;border-radius:var(--modal-radius) 0 0 var(--modal-radius)}
.modal--panel[open]{display:flex}
.panel{display:flex;flex-direction:column;width:100%}
.panel__body{flex:1;overflow:auto;padding:16px 24px;display:flex;flex-direction:column;gap:16px}
.panel__foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--color-gray-200);background:var(--color-gray-25)}
.panel__foot .btn--ghost{margin-right:auto;padding:0 8px;color:var(--color-gray-700)}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:14px;line-height:20px;font-weight:500;color:var(--color-gray-700)}
.field small{font-size:12px;line-height:18px;font-weight:400;color:var(--color-gray-600)}
.field input,.field textarea{width:100%;min-height:var(--tap);padding:10px 14px;border:1px solid var(--color-gray-300);border-radius:8px;background:#fff;font:inherit;font-size:16px;font-weight:400;color:var(--color-gray-900);box-shadow:var(--shadow-theme-xs)}
.field textarea{resize:vertical;line-height:22px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-brand-500);box-shadow:var(--shadow-focus-ring)}
.field input:invalid:not(:placeholder-shown){border-color:var(--color-error-500)}
.field__code{text-transform:uppercase;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.field__unit{display:flex;align-items:center;gap:8px;color:var(--color-gray-500);font-weight:400}
.field__unit input{flex:1;font-variant-numeric:tabular-nums}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field--switch{flex-direction:row;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--color-gray-200)}
@media (max-width:640px){
  .menu-search{top:72px}
  .modal--panel{margin:auto 0 0;width:100vw;max-width:100vw;height:auto;max-height:92dvh;border-radius:var(--modal-radius) var(--modal-radius) 0 0}
  .field-row{grid-template-columns:minmax(0,1fr)}
  .panel__body,.panel__foot{padding-left:16px;padding-right:16px}
}
.modal--panel::backdrop{backdrop-filter:blur(4px)}