/* theme.css - EVERY colour, font, size and spacing of Cozy Office lives here.
 *
 * The values come from the PM's mock-up (docs/client/mockup/Main.dc.html,
 * the style guide). The names in the comments (Oat, Paper, Leaf...) are the
 * names used there, so the two can be compared side by side.
 *
 * Why one file: a restyle should mean changing the values below, not hunting
 * through the other CSS files. auth.css and office.css only arrange things
 * on the page and use these values through var(--name).
 *
 * The map values (--map-*, --avatar-*, --tile-size) are read by
 * js/render.js with getComputedStyle, so the canvas follows this file too.
 *
 * The two fonts are loaded by a <link> to Google Fonts in each HTML page.
 * If that fails (offline), the system font after the comma is used.
 */

:root {
  /* ---- Page colours ---- */
  --color-bg: #F6EFE3;              /* Oat: page background */
  --color-surface: #FFFBF4;         /* Paper: panels, cards, inputs, top bar */
  --color-cream: #F1E7D6;           /* Cream: hover fill, chips, map box */
  --color-band: #EFE4D1;            /* Column: the deeper band */
  --color-border: #E3D6C3;          /* Biscuit: borders, dividers, panel shadow */
  --color-text: #3B2F2A;            /* Cocoa: body text, headings */
  --color-text-muted: #6E5D52;      /* Bark: secondary text, times, hints */
  --color-fence: #9C8774;           /* Fence: input and secondary button borders */
  --color-placeholder: #7A6858;

  --color-accent: #2F7D5B;          /* Leaf: THE accent - primary buttons, links, active tab, focus */
  --color-accent-hover: #256649;    /* Leaf Dark */
  --color-accent-press: #1F5A40;    /* Leaf Press */
  --color-accent-tint: #E3EFE6;     /* Leaf Tint: current nav item, "You" badge */
  --color-accent-ring: #CFE3D6;     /* Leaf Ring: input focus ring */
  --color-on-accent: #FFFBF4;       /* text on Leaf */

  --color-danger: #B23A3A;          /* Berry: errors */
  --color-danger-hover: #962F2F;
  --color-danger-tint: #FBE9E6;     /* error banner fill */
  --color-danger-border: #E8B9B3;
  --color-danger-text: #8E2B2B;     /* text on the error banner */
  --color-danger-input: #FFF7F5;    /* background of a field marked wrong */

  /* ---- Map colours (drawn on the canvas by js/render.js) ---- */
  --map-floor: #E9D7B8;             /* Plank: one flat colour, no grid lines (PM 2026-10-26) */
  --map-floor-speckle: rgba(170, 132, 88, 0.35); /* one faint speck per tile; "transparent" = none */
  --map-wall: #8C6B55;            /* Brick */
  --map-wall-dark: #6B4F3D;         /* Brick Dark: mortar, sign border, map frame */
  --map-wall-light: #A07E66;        /* lit left edge of a wall */
  --map-wall-shadow: rgba(59, 47, 42, 0.22);
  --map-outside: #6B4F3D;           /* office stage 2: the canvas outside the map (when the map is smaller
                                       than the canvas): the same dark wood as the map frame */
  --map-room: #DCE7D3;              /* Rug: room floor */
  --map-room-edge: #B9CDAE;         /* Rug Edge: room outline */
  --map-sign-bg: #FFFBF4;
  --map-text: #3B2F2A;
  --map-label-bg: #FFFBF4;          /* name pill */
  --map-label-border: #E3D6C3;
  --map-you-bg: #2F7D5B;            /* the current user's name pill: the only "you are here" cue */
  --map-you-text: #FFFBF4;
  --map-avatar-outline: #FFFBF4;
  --map-avatar-facing: #FFFBF4;     /* the small dot that shows which way an avatar walked last */

  /* Rank tiers (R27): the ring round an avatar, the badge by its name and the
     symbol in the Online list. Chosen from the rank: 100+ admin, 50-99
     manager, 10-49 staff, 0-9 guest. Staff draw no ring (the plain look). */
  --rank-owner: #8A2A6B;            /* Royal plum: owner ring and crown (rank 1000) */
  --rank-admin: #C98A12;            /* Honey: admin ring and star */
  --rank-manager: #2E6FA8;          /* Sky: manager ring and diamond */
  --rank-staff: #FFFBF4;            /* Paper: the same as the avatar outline */
  --rank-guest: #9C8774;            /* Fence: guest dotted ring and dot */

  /* Presence status (R19): the dot on an avatar (map and Online list) and in
     the legend. The server decides the status; these only colour it. */
  --status-available: #3E9B5F;      /* green: Available */
  --status-busy: #C8423A;           /* red: Busy */
  --status-away: #E0A526;           /* amber: Away (chosen, or auto after idle) */
  --status-meeting: #7E57C2;        /* purple: In meeting (server-set, R20 later) */

  /* Avatar fills, chosen by player id: id 1 = --avatar-1, ... id 7 = --avatar-1 again. */
  --avatar-1: #B05A1E;              /* Rust */
  --avatar-2: #3F6A99;              /* Lake */
  --avatar-3: #7A4E8C;              /* Plum */
  --avatar-4: #4E6E2E;              /* Moss */
  --avatar-5: #A8466A;              /* Rose */
  --avatar-6: #4D5B66;              /* Slate */
  /* v0.15 (R29): the six colour words a user picks on the Settings page
     (PATCH /api/me "color"). render.js colorToken() reads these; they are
     the same six colours, so a fresh account looks as before. */
  --theme-rust: var(--avatar-1);
  --theme-lake: var(--avatar-2);
  --theme-plum: var(--avatar-3);
  --theme-moss: var(--avatar-4);
  --theme-rose: var(--avatar-5);
  --theme-slate: var(--avatar-6);

  /* ---- Fonts ---- */
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Pixelify Sans", system-ui, sans-serif;  /* logo, screen titles, room signs; never below 18px */
  --font-size-small: 13px;
  --font-size-hint: 14px;
  --font-size-body: 16px;
  --line-height-body: 24px;
  --font-size-button: 15px;
  --font-size-card-title: 20px;
  --font-size-screen-title: 24px;
  --font-size-hero: 32px;

  /* ---- Sizes ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-small: 4px;              /* buttons, inputs, chips */
  --radius-medium: 8px;             /* panels, banners */
  --border-width: 2px;
  --control-height: 44px;           /* buttons and inputs: a comfortable touch target */
  --shadow-button: 0 3px 0 rgba(59, 47, 42, 0.25);   /* hard, blur-free, like a pixel game */
  --shadow-button-pressed: 0 1px 0 rgba(59, 47, 42, 0.25);
  --shadow-panel: 0 3px 0 #E3D6C3;
  --focus-ring: 0 0 0 3px #CFE3D6;
  --content-width: 1280px;          /* the login page column only (auth.css); R50a: the other pages span the window */
  --panel-width: 340px;
  --office-row-height: 560px;       /* smallest height of the side panel (chat scrolls inside it) */
  --page-padding: 32px 24px 48px;   /* Task Board and Admin: top, sides, bottom */

  /* ---- Dialogs, tables, task cards (Task Board and Admin) ---- */
  --color-backdrop: rgba(59, 47, 42, 0.45);   /* the dimmed page behind a dialog */
  --shadow-dialog: 0 6px 0 rgba(59, 47, 42, 0.25);
  --color-dash: #C9B79F;            /* dashed border of "+ Add task" */
  --color-row-hover: #FBF5EA;       /* table row under the mouse */
  --dialog-width: 520px;
  --dialog-small-width: 400px;
  --column-min-height: 420px;       /* a Task Board column, even when empty */

  /* ---- Map size ---- */
  --tile-size: 32;                  /* drawing units per tile (a plain number: no "px") */
  --map-overlay-height: 46px;       /* R50a: the see-through strip over the bottom of the map (emotes,
                                       key hint); the minimap sits just above it. The map canvas
                                       itself fills the whole stage (js/render.js) */

  /* ---- Phone control strip and thumbstick (R14), office.css .control-strip / .stick ----
     (Movement timing is no longer a token: speed and tick come from the
     server's welcome; smoothing constants are named in js/predict.js and js/world.js.) */
  --control-strip-height: 144px;    /* the band under the map on phones (at least 140 px) */
  --stick-size: 116px;              /* the base circle */
  --stick-knob-size: 48px;          /* the knob that follows the thumb */
  --stick-opacity: 0.85;            /* idle */
  --stick-opacity-held: 1;          /* while a thumb is on it */
  --stick-base: rgba(59, 47, 42, 0.30);  /* Cocoa, see-through */
  --stick-rim: #FFFBF4;             /* Paper ring around the base */
  --stick-knob: #FFFBF4;            /* Paper knob */
  --stick-knob-held: #2F7D5B;       /* Leaf knob while held */
  --toast-ms: 6000;                 /* office.js: how long a notice ("Alice asks you to leave Sales") stays */
  --control-height-small: 32px;     /* the small Ask / Kick buttons in the Online list */
}

/* ---- Base ---- */

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  touch-action: manipulation; /* phones: no double-tap zoom, so taps are not delayed */
}

h1, h2, h3 { margin: 0; }

.pixel-font { font-family: var(--font-display); font-weight: 600; }

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }

/* Keyboard users must always see where they are. :focus-visible shows the
   ring for keyboard focus but not after a mouse click. */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* The hidden attribute must win even over classes that set display. */
[hidden] { display: none !important; }

/* Hidden on screen but still read by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Logo (pixel-art SVG + name) ---- */

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--control-height);
  color: var(--color-text);
  text-decoration: none;
}
.logo-text { font-family: var(--font-display); font-weight: 600; font-size: 22px; }

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 20px;
  border-radius: var(--radius-small);
  border: var(--border-width) solid transparent;
  font: 700 var(--font-size-button)/1 var(--font-body);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-button);
}
.btn:active { transform: translateY(2px); box-shadow: var(--shadow-button-pressed); }
.btn:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); }

.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-fence); }
.btn-secondary:hover { background: var(--color-cream); }

/* A button that looks like a link (e.g. "Create an account") */
.btn-link {
  font: inherit;
  font-weight: 700;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--color-accent-hover); }

/* ---- Form fields ---- */

.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-weight: 700; font-size: var(--font-size-hint); line-height: 20px; }
.hint { font-size: var(--font-size-hint); line-height: 20px; color: var(--color-text-muted); }

.input {
  height: var(--control-height);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-fence);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font: 400 var(--font-size-body)/var(--line-height-body) var(--font-body);
  width: 100%;
}
.input::placeholder { color: var(--color-placeholder); }
.input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.input.is-error { border-color: var(--color-danger); background: var(--color-danger-input); }

/* ---- Error banner (wrong password, connection lost, ...) ---- */

.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-danger-tint);
  border: var(--border-width) solid var(--color-danger-border);
  border-radius: var(--radius-medium);
  color: var(--color-danger-text);
  font-weight: 700;
  font-size: var(--font-size-button);
  line-height: 22px;
}
.alert-icon { flex-shrink: 0; }
.alert-text { flex: 1; }

/* ---- Panel ---- */

.panel {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-panel);
}

/* ---- Tabs: an underline marks the chosen one ---- */

.tabs { display: flex; gap: var(--space-1); border-bottom: var(--border-width) solid var(--color-border); }
.tab {
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;              /* sit on top of the strip's own border */
  font: 700 var(--font-size-button)/1 var(--font-body);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.tab:hover { color: var(--color-text); }
.tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--color-accent); }

/* Count bubble on a tab (people online, unread messages) */
.count {
  display: inline-flex;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  justify-content: center;
  align-items: center;
  border-radius: 11px;
  background: var(--color-border);
  font-size: var(--font-size-small);
  color: var(--color-text);
}
.count-new { background: var(--color-accent); color: var(--color-on-accent); }

/* ---- Small pieces ---- */

/* Round avatar with the first letter. Size and colour are set per use. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-on-accent);
  font-weight: 800;
  border: var(--border-width) solid var(--color-surface);
  flex-shrink: 0;
  line-height: 1;
}
.avatar-small { width: 32px; height: 32px; font-size: 15px; }
.avatar-large { width: 36px; height: 36px; font-size: 16px; }

/* Department tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-small);
  background: var(--color-cream);
  color: var(--color-text);
  font: 700 var(--font-size-small)/1 var(--font-body);
  white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; background: var(--color-text-muted); }

/* "You" badge */
.you-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-small);
  background: var(--color-accent-tint);
  color: var(--color-accent-hover);
  font-weight: 800;
  font-size: 12px;
  vertical-align: 2px;
}

/* A keyboard key drawn in the help line */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: var(--border-width) solid var(--color-fence);
  border-bottom-width: 4px;
  border-radius: var(--radius-small);
  background: var(--color-surface);
  font: 800 var(--font-size-small)/1 var(--font-body);
  color: var(--color-text);
}

/* ---- Top bar (every page) ---- */

.topbar { background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border); }
/* R50a: every page spans the window (no centred column); 24 px gutter. */
.topbar-inner {
  padding: 10px var(--space-5);
  display: flex;
  flex-wrap: wrap;                 /* on a phone the nav drops to a second row */
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.main-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  padding: 0 14px;
  border-radius: var(--radius-small);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
}
.nav-link:hover { background: var(--color-cream); color: var(--color-text); }
.nav-link.is-current { background: var(--color-accent-tint); color: var(--color-accent-hover); }

.user-block { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.user-text { display: flex; flex-direction: column; line-height: 18px; }
.user-name { font-weight: 800; }
.user-role { font-size: var(--font-size-small); color: var(--color-text-muted); font-weight: 600; }
.user-text + .btn { margin-left: var(--space-2); }   /* a little more air before the first button */

@media (max-width: 719px) {
  .topbar-inner { padding: var(--space-2) var(--space-3); }
  .main-nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; }   /* nav links on row two, ONE row: it scrolls sideways when the links do not fit (R20 added Meetings) */
  .nav-link { flex: none; padding: 0 10px; }
  #map-editor-link { display: none; }    /* the map editor needs a wide screen (stage 3b) */
  .user-text { display: none; }          /* not enough room: avatar + buttons stay */
  .user-block { gap: var(--space-2); }
  .user-block .btn { padding: 0 var(--space-3); }
}

/* ---- Page heading (Task Board, Admin): title + hint, button on the right ---- */

/* R50a: full width with the 24 px gutter of --page-padding. A form keeps a
   readable width inside its own section (settings.css, admin.css). */
.page {
  padding: var(--page-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.page-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.page-heading { display: flex; flex-direction: column; }
.page-title { font-size: var(--font-size-hero); line-height: 40px; }
.page-header-button { margin-left: auto; }

/* Small uppercase heading: column names, table headers, form sections */
.section-label {
  font: 700 var(--font-size-small)/16px var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 719px) {
  .page { padding: var(--space-4) var(--space-3) var(--space-6); gap: var(--space-4); }
}

/* ---- More buttons ---- */

.btn-danger { background: var(--color-danger); color: var(--color-on-accent); }
.btn-danger:hover { background: var(--color-danger-hover); }

/* "Delete" inside a form: red text, no box until hovered */
.btn-ghost-danger { background: transparent; color: var(--color-danger); box-shadow: none; padding: 0 var(--space-3); }
.btn-ghost-danger:hover { background: var(--color-danger-tint); color: var(--color-danger-hover); }

/* Square icon-only button (Close, Edit, Delete in a table row) */
.btn-icon { width: var(--control-height); padding: 0; background: transparent; color: var(--color-text-muted); box-shadow: none; }
.btn-icon:hover { background: var(--color-cream); color: var(--color-text); }
.btn-icon.is-danger:hover { background: var(--color-danger-tint); color: var(--color-danger); }

/* ---- More form fields ---- */

textarea.input { height: 96px; padding: 10px var(--space-3); resize: vertical; }

/* A <select> drawn like the inputs, with our own arrow. The arrow is a tiny
   SVG picture in the CSS; its colour is Cocoa (#3B2F2A), written in the URL
   because a picture cannot read var(). */
select.input {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233B2F2A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}
.input:disabled { background: var(--color-cream); color: var(--color-text-muted); }

/* Fields side by side that wrap on a narrow screen (status / assignee / department) */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-4); }

.checkbox-label { display: inline-flex; align-items: center; gap: 10px; min-height: var(--control-height); font-weight: 700; }
.checkbox-label input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); }

/* ---- Dialogs (<dialog> + showModal()) ---- */

.dialog {
  width: calc(100% - 2 * var(--space-4));   /* a 16 px gutter on a phone */
  max-width: var(--dialog-width);
  padding: 0;                               /* see ui.js closeOnBackdropClick() */
  border: 0;
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-dialog);
}
.dialog::backdrop { background: var(--color-backdrop); }
.dialog-small { max-width: var(--dialog-small-width); }

.dialog-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) 0 var(--space-5); }
.dialog-title { flex: 1; font-size: var(--font-size-card-title); line-height: 28px; font-weight: 800; }
.dialog-form { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: 18px; }
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: 20px;
  border-top: var(--border-width) solid var(--color-border);
}
.spacer { flex: 1; }

.confirm-box { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.confirm-text { margin: 0; color: var(--color-text-muted); }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* Tiny avatar on a task card */
.avatar-tiny { width: 24px; height: 24px; font-size: 12px; border: 0; }

/* Phones: dialogs use the narrow screen fully, so the buttons stay on one row. */
@media (max-width: 719px) {
  .dialog-header { padding: var(--space-3) var(--space-3) 0 var(--space-4); }
  .dialog-form { padding: var(--space-3) var(--space-4) var(--space-4); gap: var(--space-4); }
  .dialog-actions .btn { padding: 0 var(--space-3); }
  .confirm-box { padding: var(--space-4); }
}