/* ButlerOS theme: per-user variables driven by body[data-theme][data-mode][data-style][data-font] */
:root { --radius: 14px; --pad: 16px; }
html[data-fontsize="small"] { font-size: 14px; }
html[data-fontsize="medium"] { font-size: 16px; }
html[data-fontsize="large"] { font-size: 18.5px; }

body { --accent:#14213d; --accent-2:#c9a227; --bg:#f4f5f7; --surface:#ffffff; --surface-2:#eef0f3;
  --text:#171a21; --muted:#5c6470; --line:#d9dde3; --danger:#c0392b; --ok:#1e8449; --warn:#b7950b;
  --header-bg:#14213d; --header-text:#f5f6f8; --shadow:0 8px 28px rgba(16,24,40,.10);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); margin:0; }
body[data-theme="ocean"]   { --accent:#0b5563; --accent-2:#2aa198; --header-bg:#0b5563; }
body[data-theme="forest"]  { --accent:#1e5631; --accent-2:#7fb069; --header-bg:#1e5631; }
body[data-theme="burgundy"]{ --accent:#6d213c; --accent-2:#c08497; --header-bg:#6d213c; }
body[data-theme="slate"]   { --accent:#3d405b; --accent-2:#81b29a; --header-bg:#3d405b; }
body[data-mode="dark"] { --bg:#14161a; --surface:#1e2126; --surface-2:#262a31; --text:#eceef1; --muted:#a6adb8;
  --line:#343a43; --shadow:0 8px 28px rgba(0,0,0,.5); }
body[data-style="sharp"] { --radius:4px; }
body[data-style="soft"]  { --radius:16px; }
body[data-font="serif"]    { font-family: Georgia, "Times New Roman", serif; }
body[data-font="humanist"] { font-family: Verdana, Geneva, sans-serif; }
body[data-font="rounded"]  { font-family: "Trebuchet MS", "Segoe UI", sans-serif; }

* { box-sizing: border-box; }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.small { font-size:.85em; }
.error { color:var(--danger); }
.ok { color:var(--ok); }
.hint { color:var(--muted); font-size:.88em; }
.linklike { background:none; border:none; color:var(--accent-2); cursor:pointer; padding:0; font:inherit; text-decoration:underline; }
body[data-mode="dark"] .linklike { color:#9fd8cb; }

button { font:inherit; cursor:pointer; border-radius:calc(var(--radius) - 6px); border:1px solid var(--line);
  background:var(--surface); color:var(--text); padding:.5rem .9rem; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.primary.big { width:100%; padding:.8rem; font-size:1.05rem; }
button.ghost { background:transparent; }
button.small { padding:.3rem .6rem; font-size:.88em; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
input, select, textarea { font:inherit; width:100%; padding:.55rem .7rem; border:1px solid var(--line);
  border-radius:calc(var(--radius) - 6px); background:var(--surface); color:var(--text); }
label { display:block; margin:.6rem 0; font-weight:600; font-size:.92em; }
label input, label select, label textarea { margin-top:.25rem; font-weight:400; }
textarea { min-height:70px; resize:vertical; }

#toast { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:2000; background:var(--accent);
  color:#fff; padding:.7rem 1.1rem; border-radius:999px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s; max-width:92vw; text-align:center; }
#toast.show { opacity:1; }

/* login */
.login-wrap { min-height:100dvh; display:flex; align-items:flex-start; justify-content:center; padding:28px 14px; background:linear-gradient(160deg, var(--header-bg), var(--bg) 75%); }
.login-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 24px; width:100%; max-width:430px; }
.brand { text-align:center; }
.brand h1 { margin:.3rem 0 .1rem; letter-spacing:.5px; }
.brand-mark { width:64px; height:64px; margin:0 auto; border-radius:18px; background:var(--accent); color:var(--accent-2);
  display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; }
.login-logo { max-width:180px; max-height:90px; object-fit:contain; display:block; margin:0 auto; }
.welcome-back { text-align:center; margin:.6rem 0; }
.apply-box { margin-top:1.2rem; border-top:1px solid var(--line); padding-top:1rem; }
.login-help { margin-top:1rem; color:var(--muted); font-size:.9em; }

/* app shell */
.app-header { position:sticky; top:0; z-index:50; background:var(--header-bg); color:var(--header-text);
  display:flex; justify-content:space-between; align-items:center; padding:.55rem .9rem; gap:.6rem; }
.header-left { display:flex; align-items:center; gap:.6rem; min-width:0; }
.header-logo { height:32px; width:auto; max-width:110px; object-fit:contain; background:#fff; border-radius:6px; padding:2px; }
.header-title { font-weight:800; letter-spacing:.4px; }
.header-sub { font-size:.8rem; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-right { display:flex; align-items:center; gap:.45rem; }
.header-right button { color:var(--header-text); border-color:rgba(255,255,255,.35); }
.break-indicator { background:#f39c12; color:#221a00; border-radius:999px; padding:.15rem .6rem; font-size:.8rem; font-weight:700; }
.main-nav { position:sticky; top:57px; z-index:49; background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; gap:.3rem; overflow-x:auto; padding:.45rem .6rem; }
.main-nav button { white-space:nowrap; border:none; background:transparent; padding:.45rem .8rem; border-radius:999px; }
.main-nav button.active { background:var(--accent); color:#fff; }
.page { max-width:1100px; margin:0 auto; padding:var(--pad); }

/* cards & grids */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--pad); box-shadow:var(--shadow); margin-bottom:1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:1rem; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.8rem; margin-bottom:1rem; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.9rem; text-align:center; box-shadow:var(--shadow); }
.tile .num { font-size:1.7rem; font-weight:800; }
.tile .lbl { color:var(--muted); font-size:.85rem; }
.occupancy { display:flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:.4rem .9rem; margin-bottom:1rem; width:fit-content; box-shadow:var(--shadow); }
.occupancy .bar { width:110px; height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.occupancy .bar > div { height:100%; background:var(--accent-2); }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.spread { display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; }
.chip { display:inline-block; border-radius:999px; padding:.12rem .6rem; font-size:.8rem; font-weight:700; background:var(--surface-2); border:1px solid var(--line); }
.tag { display:inline-block; border-radius:999px; padding:.15rem .65rem; font-size:.8rem; font-weight:700; margin:.12rem; cursor:pointer; border:1px solid var(--line); background:var(--surface-2); color:var(--text); }
.tag.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.tag-dnd.on { background:#c0392b !important; border-color:#c0392b !important; color:#fff !important; }
.tag-service.on { background:#1e8449 !important; border-color:#1e8449 !important; color:#fff !important; }
.tag-dnd:not(.on) { border-color:#c0392b; color:#c0392b; }
.tag-service:not(.on) { border-color:#1e8449; color:#1e8449; }
.status-Pending { background:#fdf3d8; color:#7a5b00; }
.status-InProgress { background:#dbeafe; color:#1e40af; }
.status-Completed { background:#dcf5e3; color:#14532d; }
body[data-mode="dark"] .status-Pending { background:#4a3d10; color:#f5d76e; }
body[data-mode="dark"] .status-InProgress { background:#1e3a5f; color:#a8c8f0; }
body[data-mode="dark"] .status-Completed { background:#14532d; color:#b7f0c8; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.5rem .45rem; border-bottom:1px solid var(--line); vertical-align:top; }
.photorow { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.photorow img { width:76px; height:76px; object-fit:cover; border-radius:10px; border:1px solid var(--line); cursor:zoom-in; }
.photobtns { display:flex; gap:.5rem; margin:.4rem 0; }
.list-item { padding:.65rem 0; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom:none; }
.searchrow { display:flex; gap:.5rem; }
.searchrow input { flex:1; }

/* modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(10,12,16,.55); z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:4vh 10px; overflow-y:auto; }
.modal { background:var(--surface); color:var(--text); border-radius:var(--radius); width:100%; max-width:560px; box-shadow:var(--shadow); }
.modal.wide { max-width:760px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:.9rem 1.1rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); border-radius:var(--radius) var(--radius) 0 0; z-index:2; }
.modal-head h3 { margin:0; }
.modal-body { padding:1rem 1.1rem 1.2rem; }
.modal-x { border:none; background:transparent; font-size:1.2rem; line-height:1; }
img.full-photo { width:100%; border-radius:10px; }

/* translator */
.lang-row { display:flex; gap:.5rem; align-items:flex-end; }
.lang-row label { flex:1; }
.record-btn { display:block; margin:1rem auto; width:150px; height:150px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; font-size:1.05rem; font-weight:800; box-shadow:var(--shadow); touch-action:none; user-select:none; -webkit-user-select:none; }
.record-btn.recording { background:var(--danger); transform:scale(1.05); }
.big-result { font-size:1.6rem; font-weight:700; text-align:center; padding:1rem; }
.show-guest { font-size:2.3rem; font-weight:800; text-align:center; padding:2rem 1rem; line-height:1.35; }
.phrase { display:flex; justify-content:space-between; gap:.8rem; padding:.55rem 0; border-bottom:1px solid var(--line); cursor:pointer; }
.phrase:last-child { border-bottom:none; }

@media (max-width:640px) {
  .main-nav { top:53px; }
  .record-btn { width:128px; height:128px; }
}