/* Crete Cafe: staff dashboard */
.muted { color: var(--muted); }

.admin-bar { background: var(--coffee-900); color: var(--cream); padding-block: 0.8rem; }
.admin-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-bar .brand { color: var(--cream); font-family: var(--font-display); font-size: 1.3rem; text-decoration: none; }
.brand-sub { font-family: var(--font-ui); font-size: 0.85rem; color: var(--beige); margin-left: 0.4rem; }
.admin-user { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--beige); }
.btn.on-dark { color: var(--cream); border-color: rgba(247, 241, 231, 0.55); }
.btn.on-dark:hover { background: rgba(247, 241, 231, 0.14); color: var(--paper); border-color: var(--cream); }

.dash-head { padding-block: 1.8rem 1rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.dash-head h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); color: var(--coffee-900); }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 3vw, 1.75rem); margin-bottom: 3rem; }
.narrow { max-width: 34rem; }

.tabs { display: flex; gap: 0.25rem; overflow-x: auto; margin-bottom: -1px; position: relative; z-index: 1; }
.tab { min-height: 2.75rem; padding: 0.55rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--muted); background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-m) var(--radius-m) 0 0; }
.tab:hover { color: var(--coffee-900); background: var(--beige); }
.tab[aria-selected="true"] { color: var(--coffee-900); background: var(--paper); border-color: var(--line); }
.tabs + .panel { border-top-left-radius: 0; }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1.25rem; }
.toolbar .field { margin: 0; }
.toolbar .grow { flex: 1 1 14rem; }
.toolbar select { min-width: 11rem; }

.toast { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: var(--radius-m); font-weight: 500; border: 1.5px solid; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.toast.is-success { color: #36502f; background: #eef3ea; border-color: var(--success); }
.toast.is-error { color: #7d2c21; background: #faeeeb; border-color: var(--error); }
.toast button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; text-decoration: underline; min-height: 2.25rem; padding: 0 0.4rem; }

.form-error { color: var(--error); font-weight: 600; margin-bottom: 1rem; }

/* Login */
.login-view { display: grid; place-items: start center; padding-block: 3rem; }
.login-card { width: min(100%, 26rem); margin-bottom: 0; }
.login-card h1 { font-size: 2rem; color: var(--coffee-900); margin-bottom: 0.4rem; }
.login-card .muted { margin-bottom: 1.5rem; }
.login-card .btn { width: 100%; }

/* Items table (turns into stacked cards on phones) */
.table-wrap { overflow-x: auto; }
table.items { width: 100%; border-collapse: collapse; }
table.items th { text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--muted); padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--line); }
table.items td { padding: 0.75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.items tr.is-off td { background: #f7f1e7; }
.item-cell { display: flex; align-items: center; gap: 0.8rem; min-width: 14rem; }
.thumb { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-s); background: var(--beige); object-fit: cover; flex: none; display: grid; place-items: center; font-family: var(--font-display); color: var(--coffee-700); }
.item-name { font-weight: 600; }
.item-desc { color: var(--muted); font-size: 0.875rem; max-width: 26rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.price-cell { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* On/off switch */
.switch { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; padding: 0; font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--ink); background: none; border: 0; cursor: pointer; }
.switch .track { position: relative; width: 2.8rem; height: 1.6rem; flex: none; border-radius: 999px; background: var(--line-strong); transition: background-color 0.15s; }
.switch .track::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--paper); transition: transform 0.15s; }
.switch[aria-checked="true"] .track { background: var(--success); }
.switch[aria-checked="true"] .track::after { transform: translateX(1.2rem); }
.switch:disabled { opacity: 0.6; cursor: wait; }

/* Category list */
.cat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.cat-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--cream); }
.cat-name { font-weight: 600; font-size: 1.05rem; }
.cat-meta { color: var(--muted); font-size: 0.875rem; }
.cat-row .row-actions .btn-sm { min-width: 2.25rem; }

.radio-group { border: 0; padding: 0; margin: 0 0 1rem; }
.radio-group legend { padding: 0; margin-bottom: 0.4rem; }
.radio { display: flex; align-items: center; gap: 0.6rem; font-weight: 400; min-height: 2.5rem; cursor: pointer; }
.radio input { width: 1.25rem; height: 1.25rem; accent-color: var(--coffee-700); flex: none; }
input[type="checkbox"] { min-height: 0; }

.empty { padding: 2rem 0; color: var(--muted); }

/* Dialogs */
dialog { width: min(100% - 1.5rem, 34rem); max-height: calc(100dvh - 1.5rem); overflow-y: auto; padding: 1.5rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); }
dialog::backdrop { background: rgba(43, 36, 31, 0.55); }
dialog h2 { font-size: 1.6rem; color: var(--coffee-900); margin-bottom: 1.1rem; }
dialog p { margin-bottom: 1rem; }
.two-col { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }
@media (min-width: 34rem) { .two-col { grid-template-columns: 1fr 1fr; } }

@media (max-width: 47.99rem) {
  table.items, table.items tbody, table.items tr, table.items td { display: block; width: 100%; }
  table.items thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.items tr { border: 1px solid var(--line); border-radius: var(--radius-m); margin-bottom: 0.9rem; padding: 0.4rem 0.2rem; background: var(--paper); }
  table.items tr.is-off { background: var(--cream); }
  table.items td { border: 0; padding: 0.4rem 0.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  table.items td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 0.85rem; font-weight: 600; }
  table.items td.cell-main { display: block; }
  table.items td.cell-main::before { content: none; }
}