/* Mobile-first responsive styles for Cafe Menu */
:root {
  --bg: #111;
  --card: #1a1a1a;
  --text: #f5f5f5;
  --muted: #b0b0b0;
  --accent: #ff7f50;
  --accent-2: #ffd166;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display:block; }

.container { max-width: 960px; margin: 0 auto; padding: 12px; }
.brand { display:flex; align-items:center; gap:12px; padding: 12px 0; }
.brand h1 { margin:0; font-size: 1.6rem; letter-spacing:.5px; }
.brand small { color: var(--muted); }

.category { margin: 18px 0; }
.category .head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.category .title { font-size:1.2rem; margin: 0 0 8px 0; }
.items { display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) {
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@supports not (display: grid) {
  .items { display:flex; flex-wrap:wrap; gap:12px; }
  .items .item { flex: 1 1 300px; }
}
.item { background: var(--card); border-radius: 12px; overflow: hidden; border: 1px solid #222; }
.item .thumb { aspect-ratio: 4/3; background:#000; display:block; }
.item .body { padding: 10px 12px; }
.item .name { font-weight:600; font-size:1rem; margin:0 0 4px 0; }
.item .content { color: var(--muted); font-size:.95rem; line-height:1.35; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; background: #222; color: var(--muted); font-size:.8rem; }
.item .name .badge { margin-left:6px; background: var(--accent-2); color:#111; }

.footer { padding: 20px 0 40px 0; color: var(--muted); text-align:center; }

/* Admin basic layout */
.admin-nav { background:#0d0d0d; border-bottom:1px solid #222; }
.admin-nav .container { display:flex; align-items:center; justify-content:space-between; }
.admin-actions { display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0; }
button, .btn {
  background: var(--accent);
  color: #111;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.btn.secondary { background: #333; color: var(--text); }
.btn.danger { background: #e74c3c; color: #fff; }
input[type=text], input[type=password], input[type=email], textarea, select {
  width: 100%;
  background: #121212;
  color: var(--text);
  border: 1px solid #222;
  padding: 10px 12px;
  border-radius: 8px;
}
form .row { display:grid; grid-template-columns: 1fr; gap:10px; }
@media (min-width: 640px) {
  form .row.two { grid-template-columns: 1fr 1fr; }
}
.card { background: var(--card); border:1px solid #222; border-radius:12px; padding:12px; }
.table-like { display:grid; gap:8px; }
.table-like .item { padding: 8px; background:#121212; border-radius:10px; border:1px solid #222; display:flex; align-items:center; gap:10px; }
.table-like .item .grow { flex: 1; }
.muted { color: var(--muted); }
.spacer { height: 8px; }

.upload-zone {
  border: 2px dashed #333;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  background: #0f0f0f;
  cursor: pointer;
}
.upload-zone.drag { background:#121212; border-color:#555; }
.upload-preview {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 8px;
  border: 1px solid #222;
}
.crop-tools { display:flex; gap:8px; justify-content:center; margin-top:8px; }
.crop-area { position: relative; margin-top:8px; }
.crop-area img { display:block; width:100%; border-radius:10px; }
.crop-rect { position:absolute; border:2px solid var(--accent); background:rgba(255,127,80,0.2); border-radius:6px; touch-action:none; }
.hidden-file { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.file-input-wrap { display:flex; align-items:center; gap:10px; }
.file-input-name { min-height: 24px; padding: 6px 10px; border:1px solid #222; border-radius:8px; background:#0f0f0f; color: var(--muted); flex:1; }
.file-input-name.active { color: var(--text); }
.file-input-tip { font-size:.85rem; color: var(--muted); margin-top:6px; }
.file-input-tip.error { color:#e74c3c; }
.btn.icon { display:inline-flex; align-items:center; gap:8px; }
.btn.icon svg { width:18px; height:18px; }