/* ------------------------------------------------------------
   Restaurants First — Mobile-first styles.css
   Optimized for phones & tablets; keeps your dark theme.
------------------------------------------------------------- */

:root{
  --bg:#0b0d12;
  --panel:#0f1217;
  --border:#263040;
  --muted:#9ca3af;
  --fg:#e5e7eb;
  --acc:#32dc65;         /* accent (green) */
  --link:#3b82f6;

  --radius:12px;
  --radius-pill:999px;

  --tap-min:44px;        /* min tap target */
  --gap:0.5rem;
  --gap-lg:1rem;

  color-scheme: dark;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font: 16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Cards/panels */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
}

/* Brand header */
header.brand{
  position:relative;
  display:flex; align-items:center; gap:.6rem;
  margin:.25rem 0 1rem;
}
header.brand h1{ margin:0; font-size:1.25rem; font-weight:700; }

/* Force circular logo regardless of inline height */
header.brand img{
  height:40px !important;
  width:40px; aspect-ratio:1/1; border-radius:50%;
  object-fit:cover; display:block;
}

/* Language switch */
.langswitch{
  position:absolute; top:12px; right:12px;
  display:inline-flex; background:var(--panel);
  border:1px solid var(--border); border-radius:var(--radius-pill); overflow:hidden;
}
.langswitch a{
  display:inline-block; padding:.35rem .6rem; text-decoration:none; font-size:.85rem; color:var(--muted);
  border-right:1px solid var(--border);
}
.langswitch a:last-child{ border-right:0; }
.langswitch a.active{ background:var(--acc); color:var(--bg); font-weight:700; }



/* Toolbar + pills + buttons */
.toolbar{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; justify-content:center; }
.pill{
  display:inline-block; padding:.35rem .6rem;
  border-radius:var(--radius-pill); border:1px solid var(--border);
  background:#111827; color:var(--fg);
}
.pill-cap{ display:inline-block; padding:.25rem .5rem; background:#111827; border:1px solid var(--border); border-radius:var(--radius-pill); }

.btn{
  display:inline-block; padding:.6rem .9rem; border-radius:10px;
  text-decoration:none; font-weight:700; background:#3b82f6; color:var(--bg);
  border:1px solid transparent; min-height:var(--tap-min);
}
.btn:hover{ filter:brightness(.95); }
.btn.secondary{ background:#6b7280; color:var(--bg); }
.btn.active{ background:var(--acc); color:var(--bg); }
.btn.ghost{ background:transparent; color:var(--fg); border-color:#374151; }
.btn.danger{ background:#ef4444; color:var(--bg); }

/* Forms */
label{ display:flex; flex-direction:column; gap:.35rem; margin:.5rem 0; }
input, select, textarea, button{
  font:inherit; color:var(--fg); background:#0b0d12;
  border:1px solid #374151; border-radius:8px;
  padding:.55rem .6rem; min-height:var(--tap-min);
}
textarea{ min-height:100px; resize:vertical; }
input[type="checkbox"]{ min-height:initial; }

/* Day grid (date shortcuts) */
.daygrid{
  display:grid; gap:.5rem; margin:.25rem 0 1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (min-width:380px){ .daygrid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width:560px){ .daygrid{ grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (min-width:720px){ .daygrid{ grid-template-columns: repeat(7, minmax(0,1fr)); } }

.daycell{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  min-height:56px; padding:.5rem .25rem; cursor:pointer; user-select:none;
}
.daycell .w{ font-size:.8rem; color:var(--muted); line-height:1; }
.daycell .d{ margin-top:2px; font-size:.95rem; font-weight:700; color:var(--fg); line-height:1.2; }
.daycell.sel{ outline:2px solid var(--acc); outline-offset:0; }
.daycell.disabled{ opacity:.45; cursor:not-allowed; }

/* Time grid */
.timegrid{
  display:grid; gap:.5rem; margin:.5rem 0 .25rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (min-width:420px){ .timegrid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width:640px){ .timegrid{ grid-template-columns: repeat(6, minmax(0,1fr)); } }

.timecell{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  min-height:52px; padding:.45rem .5rem; cursor:pointer; user-select:none; color:var(--fg) !important;
}
.timecell.sel{ outline:2px solid var(--acc); }
.timecell.disabled{ opacity:.45; cursor:not-allowed; color:var(--muted) !important; }
.timecell .badge{
  position:static; font-size:.72rem; padding:.12rem .45rem; border-radius:var(--radius-pill);
  background:#16181d; border:1px solid var(--border); color:var(--fg); line-height:1; margin-top:.1rem;
}
.timecell.warn .badge{ background:#1f2937; }

/* Skeleton shimmer */
.skeleton{
  border-radius:var(--radius);
  height:44px; border:1px solid var(--border);
  background: linear-gradient(90deg, #0f1217 25%, #2a2e3a 37%, #0f1217 63%);
  background-size:400% 100%; animation:shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* Muted text */
.muted{ color:var(--muted); }

/* Reveal-on-pick details section (used by your JS toggle) */
.details{ margin-top:.75rem; }
.details.hidden{ display:none; }
.details.animate{ animation: detailsFade .18s ease-out; }
@keyframes detailsFade{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

/* Tables (admin dashboard) */
table{ width:100%; border-collapse:collapse; }
th,td{ padding:.55rem .5rem; border-bottom:1px solid var(--border); text-align:left; }
th{ background:#111827; color:var(--fg); }
.full{ color:#ef4444; font-weight:700; }
.ok{ color:#22c55e; font-weight:700; }

/* Accessibility & motion */
:focus-visible{ outline:2px solid var(--link); outline-offset:2px; border-radius:8px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Safe-area padding for iOS notch */
@supports(padding:max(0px)){
  body{ padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); }
}

/* Utility */
.hidden{ display:none !important; }