/* Light ("daylight sky"): sky-blue glow top-left, lavender bottom-right.
   --bg is the inner panels (notes, inputs); --page-bg is behind everything. */
:root {
  --page-bg:
    radial-gradient(ellipse 70% 60% at 0% 0%, #c4daf5 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 100% 100%, #dccff3 0%, transparent 70%),
    #e6e9f0;
  --bg: #eef3fb;
  --surface: #ffffff;
  --text: #1c1f24;
  --muted: #6b7280;
  --border: #cdd6e4;
  --card-shadow: 0 1px 2px rgba(30, 45, 90, .06), 0 8px 24px rgba(30, 45, 90, .10);
  --accent: #2563eb;
  --accent-text: #ffffff;
  --free: #16a34a;
  --free-bg: #e8f7ee;
  --occupied: #c2570c;
  --occupied-bg: #fff1e3;
  --occupied-edge: #f5b97f;
  --danger: #dc2626;
  --note-bg: #fff4d6;
  --chip-bg: #e2e9f5;
  --chip-selected-bg: #d3e0fb;
  --toast-bg: #1c1f24;
  --toast-text: #ffffff;
  --gold: #c79a1e;
  color-scheme: light;
}

/* Dark: follows the computer's setting unless the toggle says otherwise.
   The same values are repeated below for the "Dark" toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* "Night sky": blue glow top-left, violet glow bottom-right. */
    --page-bg:
      radial-gradient(ellipse 70% 60% at 0% 0%, #17345a 0%, transparent 70%),
      radial-gradient(ellipse 70% 60% at 100% 100%, #2a1f4d 0%, transparent 70%),
      #0a0c12;
    --bg: #111522;
    --surface: #161b28;
    --text: #e8eaee;
    --muted: #9aa1ac;
    --border: #283046;
    --card-shadow: 0 0 #0000;
    --accent: #4f8cff;
    --free: #34c46c;
    --free-bg: #173322;
    --occupied: #f59e4b;
    --occupied-bg: #3a2614;
    --occupied-edge: #7a4a1d;
    --danger: #f05252;
    --note-bg: #3a3218;
    --chip-bg: #222a3c;
    --chip-selected-bg: #22345c;
    --toast-bg: #e8eaee;
    --toast-text: #121418;
    --gold: #e0b84a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    /* "Night sky": blue glow top-left, violet glow bottom-right. */
    --page-bg:
      radial-gradient(ellipse 70% 60% at 0% 0%, #17345a 0%, transparent 70%),
      radial-gradient(ellipse 70% 60% at 100% 100%, #2a1f4d 0%, transparent 70%),
      #0a0c12;
    --bg: #111522;
    --surface: #161b28;
    --text: #e8eaee;
    --muted: #9aa1ac;
    --border: #283046;
    --card-shadow: 0 0 #0000;
    --accent: #4f8cff;
    --free: #34c46c;
    --free-bg: #173322;
    --occupied: #f59e4b;
    --occupied-bg: #3a2614;
    --occupied-edge: #7a4a1d;
    --danger: #f05252;
    --note-bg: #3a3218;
    --chip-bg: #222a3c;
    --chip-selected-bg: #22345c;
    --toast-bg: #e8eaee;
    --toast-text: #121418;
    --gold: #e0b84a;
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg, var(--bg));
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 1.4rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }

button, input, textarea { font: inherit; color: inherit; }

input[type="text"], input[type="password"], textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

button {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .45rem .9rem;
  background: var(--surface);
}
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.ghost { background: transparent; }
button.link { border: 0; padding: 0; background: none; color: var(--accent); }
button.release { color: var(--occupied); border-color: var(--occupied); background: transparent; }

.screen { padding: 16px; }
#login-screen, #name-screen { min-height: 100vh; display: grid; place-items: center; }
#login-screen[hidden], #name-screen[hidden] { display: none; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
.narrow { width: 100%; max-width: 360px; display: grid; gap: .75rem; }

.muted { color: var(--muted); font-weight: normal; }
.error { color: var(--danger); margin: 0; }

/* Top bar */
.topbar {
  max-width: 1200px; margin: 0 auto 1.25rem; padding: .75rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.topbar > div { display: flex; align-items: baseline; gap: .75rem; }
.topbar-right { align-items: center !important; position: relative; }
.menu { display: contents; } /* on desktop the menu items just sit in the bar */
.menu-btn { display: none; }
.live { font-size: .85rem; color: var(--free); }
.live::before { content: "●"; margin-right: .3rem; }
.live.off { color: var(--muted); }

main { max-width: 1200px; margin: 0 auto; display: grid; gap: 1.25rem; }

/* PC cards: every card has the same fixed height, whatever happens inside it. */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

.pc-card {
  height: 275px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); /* info 60% / notes 40% */
  overflow: hidden;
}
.pc-card.occupied { border-color: var(--occupied-edge); }
/* The PC's own color, used for its name. */
.pc-color-text { color: var(--pc, var(--text)); }
.pc-card.dim { opacity: .35; }
.pc-card { transition: opacity .15s; }

.pc-info { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; min-height: 0; }

.pc-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-width: 0; }
.pc-name { font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; white-space: nowrap; }
/* Always two lines tall, so the card never shifts when the text changes. */
.pc-sub {
  font-size: .82rem; color: var(--muted); line-height: 1.3; height: 2.6em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.status {
  border-radius: 6px; padding: .15rem .55rem; font-weight: 600; font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.status.free { color: var(--free); background: var(--free-bg); }
.status.busy { color: var(--occupied); background: var(--occupied-bg); }

.chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: .35rem; overflow-y: auto; min-height: 0; flex: 1; }
.chip {
  border: 1px solid transparent;
  background: var(--chip-bg);
  border-radius: 999px;
  padding: .2rem .65rem;
  font-size: .85rem;
  white-space: nowrap;
}
.chip.selected { background: var(--chip-selected-bg); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.chip:disabled { opacity: 1; cursor: default; color: var(--muted); }

.pc-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.pc-foot > button { margin-left: auto; flex-shrink: 0; }
.long-warning { color: var(--danger); font-size: .8rem; font-weight: 600; line-height: 1.25; }

/* Above the cards */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
#summary { font-size: 1rem; }
#summary strong { color: var(--free); font-size: 1.15rem; }
.filter { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.filter .chips { flex: 0 1 auto; min-width: 0; overflow: visible; }
.filter .chip { cursor: pointer; }

#mine-bar { display: grid; gap: .5rem; }
#mine-bar[hidden] { display: none; }
.mine-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 2px solid var(--gold); border-radius: 12px; padding: .6rem 1rem;
}

/* Pop-up messages */
#toasts {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  display: grid; gap: .5rem; justify-items: center; z-index: 10; width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  background: var(--toast-bg); color: var(--toast-text); border-radius: 10px; padding: .6rem 1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); font-weight: 600; animation: toast-in .2s ease-out;
  transition: opacity .4s, transform .4s;
}
.toast.error { background: var(--danger); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

#confirm-text { margin: 0 0 .25rem; font-size: 1rem; }
.hint { font-size: .78rem; }

/* Notes panel: fixed size, scrolls when there's more. */
.pc-notes {
  border-left: 1px solid var(--border);
  background: var(--bg);
  display: flex; flex-direction: column; min-height: 0;
}
.notes-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .8rem .4rem; font-size: .8rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.notes-list { flex: 1; overflow-y: auto; padding: 0 .8rem .8rem; display: flex; flex-direction: column; gap: .45rem; }
.note-add { align-self: flex-start; font-size: .88rem; padding: .1rem 0; }
.note-new { display: grid; gap: .25rem; flex-shrink: 0; }
.note-new-row { display: flex; gap: .35rem; align-items: stretch; }
.note-new-btns { display: flex; flex-direction: column; gap: .3rem; }
.note-new-btns button { padding: .15rem .5rem; line-height: 1.2; font-size: .85rem; flex: 1; }
.note-save { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.note-cancel { background: var(--surface); color: var(--muted); }
.note-cancel:hover { color: var(--danger); }
.note-input { resize: none; font-size: .88rem; padding: .45rem .6rem; background: var(--surface); }
.note-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.note-new-hint { font-size: .7rem; color: var(--muted); }

.note { position: relative; background: var(--note-bg); border-radius: 8px; padding: .45rem 1.8rem .45rem .6rem; flex-shrink: 0; }
.note-text {
  display: block; width: 100%; text-align: left; border: 0; padding: 0; background: none;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem;
}
.note-meta { font-size: .72rem; color: var(--muted); margin-top: .2rem; }
.note-x {
  position: absolute; top: .2rem; right: .2rem;
  border: 0; background: none; padding: .15rem .4rem; color: var(--muted); font-size: .95rem; line-height: 1;
}
.note-x:hover { color: var(--danger); }

/* Activity log */
.logs { padding: 1rem 1.25rem; }
#log-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
#log-list li { padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
#log-list li:last-child { border-bottom: 0; }
.log-when { color: var(--muted); font-size: .8rem; margin-right: .5rem; }
.log-details { color: var(--muted); font-size: .85rem; margin-top: .1rem; white-space: pre-wrap; }

/* Dialogs */
dialog {
  border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem;
  background: var(--surface); color: var(--text);
  width: min(420px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(0, 0, 0, .4); }
dialog form { display: grid; gap: .6rem; }
dialog .muted { margin: 0; }
.checks { display: grid; gap: .35rem; }
.check { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem; }

@media (max-width: 960px) { .grid { grid-template-columns: 1fr; } }

/* Phone: notes go under the info instead of beside it; height stays fixed. */
@media (max-width: 560px) {
  .pc-card { height: 400px; grid-template-columns: 1fr; grid-template-rows: 240px 1fr; }
  .pc-notes { border-left: 0; border-top: 1px solid var(--border); }
  .topbar h1 { font-size: 1.2rem; }
  .topbar { flex-wrap: nowrap; }

  /* Live: just the dot. Theme + Lock: inside the ☰ menu. */
  .live { font-size: 0; }
  .live::before { font-size: .95rem; margin: 0; }
  .menu-btn { display: inline-block; font-size: 1.15rem; line-height: 1; padding: .35rem .6rem; }
  .menu {
    display: none; position: absolute; right: 0; top: calc(100% + .4rem); z-index: 5;
    flex-direction: column; min-width: 150px; padding: .4rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  }
  .menu.open { display: flex; }
  .menu button { text-align: left; padding: .55rem .6rem; border-radius: 6px; }

  /* "Need:" on its own line above the programs. */
  .filter { flex-direction: column; align-items: flex-start; }
}

/* Big containers: corner roundness and shadow in one place. */
:root { --box-radius: 0; }
.pc-card, .mine-row, .logs { border-radius: var(--box-radius); box-shadow: var(--card-shadow, none); }

/* Filter chips sit on the page background, so give them the card color. */
.filter .chip:not(.selected) { background: var(--surface); border-color: var(--border); }

/* Place photo behind the info side of each card (Supabase "Places" bucket, see loadPhotos in app.js).
   Lighter in light mode, darker in dark mode. It's dimmer behind the name and "since" line
   at the top (--photo-top = how much of the photo shows there), then full strength from
   about the middle down. */
.pc-info { position: relative; overflow: hidden; }
.pc-info > :not(.pc-photo) { position: relative; z-index: 1; }
.pc-photo {
  --photo-top: .65;
  position: absolute; inset: 0; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: .42; filter: saturate(.9) brightness(1.15);
  --photo-mask: linear-gradient(to bottom, rgb(0 0 0 / var(--photo-top)) 0%, rgb(0 0 0 / var(--photo-top)) 22%, #000 52%);
  -webkit-mask-image: var(--photo-mask);
  mask-image: var(--photo-mask);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pc-photo { --photo-top: .47; opacity: .5; filter: saturate(.9) brightness(.8); }
}
:root[data-theme="dark"] .pc-photo { --photo-top: .47; opacity: .5; filter: saturate(.9) brightness(.8); }

/* Program chips and status tags on the cards: a slight border, like the filter row. */
.pc-card .chip:not(.selected) { border-color: color-mix(in srgb, var(--text) 28%, var(--border)); }
.status { border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }

/* Release: a slightly see-through tinted background, so it stands out on photos. */
button.release { background: color-mix(in srgb, var(--occupied-bg) 75%, transparent); }

/* Photo hover: hovering anywhere on a card (info, chips, buttons, notes) makes its photo
   clearer. It also stays clearer while a new note is being typed in that card. */
.pc-photo { transition: opacity .3s ease, filter .3s ease; }
:is(.pc-card:hover, .pc-card:has(.note-input)) .pc-photo {
  --photo-top: .8; opacity: .62; filter: saturate(1) brightness(1.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.pc-card:hover, .pc-card:has(.note-input)) .pc-photo {
    --photo-top: .7; opacity: .72; filter: saturate(1) brightness(.95);
  }
}
:root[data-theme="dark"] :is(.pc-card:hover, .pc-card:has(.note-input)) .pc-photo {
  --photo-top: .7; opacity: .72; filter: saturate(1) brightness(.95);
}

/* Empty space in the notes panel is clickable (starts a new note). */
.pc-notes { cursor: pointer; }
.pc-notes .note, .pc-notes .note-new { cursor: auto; }

/* Unavailable PCs: dimmed and grayed, same place on the board. */
.pc-card.unavailable { opacity: .55; filter: grayscale(.7); }
.pc-card.unavailable .pc-notes { cursor: default; }
.status.off { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }

/* ---------- Chat ---------- */

.chat-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 15;
  width: 58px; height: 58px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.chat-btn[hidden] { display: none; }
.chat-btn.open { background: var(--surface); color: var(--text); border-color: var(--border); }
.chat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--danger); color: #fff;
  font-size: .75rem; font-weight: 700; line-height: 22px; text-align: center;
}
.chat-badge[hidden] { display: none; }

.chat-panel {
  position: fixed; right: 20px; bottom: 90px; z-index: 15;
  width: 360px; height: min(520px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.chat-close { margin-left: auto; border: 0; background: none; color: var(--muted); padding: .1rem .4rem; font-size: 1rem; }

#chat-list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: .6rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.chat-empty { margin: auto; font-size: .9rem; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.chat-msg.first { margin-top: .5rem; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-meta { font-size: .72rem; color: var(--muted); margin: 0 .3rem .15rem; }
.chat-bubble {
  background: var(--chip-bg); padding: .45rem .7rem; border-radius: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem;
}
.chat-msg.mine .chat-bubble { background: var(--accent); color: var(--accent-text); }

.chat-form { display: flex; gap: .4rem; padding: .6rem .9rem 0; border-top: 1px solid var(--border); }
#chat-input { resize: none; max-height: 120px; font-size: .92rem; }
#chat-send { flex-shrink: 0; padding: .4rem .8rem; }
.chat-hint { font-size: .7rem; color: var(--muted); padding: .3rem .9rem .6rem; }

/* Phone: the panel takes the whole screen. */
@media (max-width: 560px) {
  .chat-btn { right: 16px; bottom: 16px; }
  .chat-panel { inset: 0; width: auto; height: auto; border: 0; z-index: 30; }
}