/* ═══════════════════════════════════════════════════════════
   Notice Board module — two tabs, same shape as Kitchen's Shopping
   List/Meal Planner/Pantry: a shared whiteboard (Board) and instant
   push-to-the-other-person messaging (Alerts, folded in from the
   former standalone Alert Centre module — same `alert_messages`
   table/trigger/Edge Function, just relocated UI). Isolated to
   #module-notice — zero shared selectors with Kitchen, The Bank,
   Utility Room, or the launcher/login ops theme.

   A shared whiteboard, not a corkboard: entries are written directly
   on the board in a marker colour the writer picks (not tied to who
   they are — author is identified separately via the monospace stamp
   under each entry), plus a marker tray along the bottom to pick a
   colour from.

   Deliberately full-bleed, unlike every other module: a wall-mounted
   whiteboard reads wrong as a rounded card floating with visible page
   margin around it — see the #module-notice rule below for why this
   is the one module that escapes .app-container's padding. The Alerts
   tab keeps its own distinct red/amber palette (--notice-alert-*)
   rather than the whiteboard tokens, same way Kitchen's Shop Mode has
   its own visual treatment distinct from the List tab it lives beside. ── */
:root {
  --notice-bg:      #F6F7F9;
  --notice-frame-lt: #FDFDFE;
  --notice-frame:   #EDEFF2;
  --notice-frame-dk: #D6DAE0;
  --notice-blue:    #1C6FEF;
  --notice-red:     #E0245E;
  --notice-green:   #1FA35C;
  --notice-black:   #2B2E33;
  --notice-orange:  #F2994A;
  --notice-ink:     #2B2E33;
  --notice-ink-dim: #9AA0A9;
  --notice-grid:    rgba(43,46,51,0.045);
  --notice-shadow:  0 1px 2px rgba(20,22,26,0.05), 0 4px 14px rgba(20,22,26,0.07);
  --notice-font-marker: 'Permanent Marker', cursive;

  --notice-alert-bg:        #FBF4F2;
  --notice-alert-card:      #FFFFFF;
  --notice-alert-red:       #DC2626;
  --notice-alert-red-dark:  #B91C1C;
  --notice-alert-amber:     #F59E0B;
  --notice-alert-text:      #2B1A17;
  --notice-alert-text-dim:  #8A6F69;
  --notice-alert-border:    #F0DAD5;
}

body.dark {
  --notice-bg:      #1B1D21;
  --notice-frame-lt: #2A2D32;
  --notice-frame:   #3A3E45;
  --notice-frame-dk: #202226;
  --notice-blue:    #4F94FF;
  --notice-red:     #FF5C86;
  --notice-green:   #3FCB80;
  --notice-black:   #C7CBD1;
  --notice-orange:  #FFA35C;
  --notice-ink:     #E8E9EB;
  --notice-ink-dim: #6B7078;
  --notice-grid:    rgba(255,255,255,0.04);
  --notice-shadow:  0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.4);

  --notice-alert-bg:        #150C0B;
  --notice-alert-card:      #241512;
  --notice-alert-text:      #F5EBE8;
  --notice-alert-text-dim:  #B99A93;
  --notice-alert-border:    #3A211C;
}

/* Full-bleed: cancel .app-container's padding on all four sides and grow
   to fill the reclaimed space, so the board is the whole screen rather
   than a rounded panel sitting on the app's own cream background. */
#module-notice {
  margin: calc(-1 * var(--s4));
  width: calc(100% + var(--s4) * 2);
  height: calc(100% + var(--s4) * 2);
  background-color: var(--notice-bg);
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0.9) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.5) 100%),
    radial-gradient(circle, var(--notice-grid) 1px, transparent 1.4px);
  background-size: auto, 18px 18px;
  color: var(--notice-ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
body.dark #module-notice {
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0.06) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.02) 100%),
    radial-gradient(circle, var(--notice-grid) 1px, transparent 1.4px);
  background-size: auto, 18px 18px;
}

/* ── Header — matches every other module's header construction:
   fully rounded, inset on all sides like a card floating on the board.
   #module-notice cancels .app-container's padding for the full-bleed
   board below, so this header needs its own top/side margin to get the
   same inset every other module gets for free from that padding.
   Corner brackets + monospace status come from .mod-header/.mod-header-status
   in shell.css — this just sets the module's own colours. ─────────────── */
.notice-header {
  background: linear-gradient(165deg, var(--notice-frame-lt) 0%, var(--notice-frame) 60%, var(--notice-frame-dk) 100%);
  border-radius: var(--r-xl);
  margin: calc(var(--s4) + env(safe-area-inset-top)) var(--s4) var(--s3);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 14px rgba(20,22,26,0.18);
  --mod-header-accent: var(--notice-blue);
}
body.dark .notice-header {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.4);
}

.notice-header .mod-header-title {
  font-family: var(--font-ui);
  font-weight: 800;
  color: var(--notice-ink);
  letter-spacing: -0.01em;
}

.notice-header .mod-header-status {
  color: var(--notice-ink-dim);
}

.notice-header .home-btn {
  color: var(--notice-ink);
  opacity: 0.7;
}

.notice-alert-clear-all-btn {
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--notice-ink-dim);
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.02em;
}
.notice-alert-clear-all-btn:hover { color: var(--notice-alert-red); }

/* ── Tabs — Board vs Alerts. Each <main> below is its own flex column +
   scroll container (same shape #module-notice/#module-alert used to be
   individually, before the merge), since #module-notice is now just the
   outer non-scrolling shell holding header + tabs + whichever page is
   active. ─────────────────────────────────────────────────────────── */
.notice-tabs {
  flex-shrink: 0;
  display: flex;
  gap: var(--s2);
  padding: 0 var(--s4) var(--s3);
}

.notice-tab-btn {
  flex: 1;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--notice-frame);
  border-radius: var(--r-md);
  padding: 10px var(--s2);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--notice-ink-dim);
  cursor: pointer;
}
body.dark .notice-tab-btn {
  background: rgba(255,255,255,0.04);
}
.notice-tab-btn--active {
  background: var(--notice-ink);
  border-color: var(--notice-ink);
  color: var(--notice-bg);
}

#notice-page-board,
#notice-page-alerts {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* ── Board ──────────────────────────────────────────────────── */
#notice-board-container {
  flex: 1;
  padding: var(--s5) var(--s4);
  padding-bottom: 190px; /* clears the fixed form dock + pen tray */
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.notice-empty-card {
  padding: 64px var(--s5);
  text-align: center;
}
.notice-empty-card p {
  font-family: var(--notice-font-marker);
  font-size: 20px;
  color: var(--notice-ink-dim);
  line-height: 1.5;
}

/* ── Pinned divider ───────────────────────────────────────── */
.notice-pinned-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--notice-ink-dim);
  margin: 0 0 var(--s1) 2px;
}
.notice-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--notice-frame) 0%, transparent 90%);
  margin: var(--s3) 0;
}

/* ── Entries — written directly on the board, no card chrome ─
   Ink colour is per-note (whichever pen was selected when it was
   written), set inline from JS via --notice-ink-color — not tied to
   who wrote it. Authorship is the stamp line below, always. */
.notice-note {
  position: relative;
  padding: var(--s2) 44px var(--s3) 2px;
  border-bottom: 1px dashed var(--notice-grid);
}
.notice-note:last-child {
  border-bottom: none;
}

.notice-note-message {
  font-family: var(--notice-font-marker);
  font-size: 21px;
  line-height: 1.4;
  color: var(--notice-ink-color, var(--notice-blue));
  white-space: pre-wrap;
  word-break: break-word;
}

.notice-note-stamp {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--notice-ink-dim);
}

.notice-note-pin,
.notice-note-delete {
  position: absolute;
  top: var(--s2);
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  color: var(--notice-ink-dim);
}
.notice-note-pin {
  right: 26px;
  font-size: 15px;
}
.notice-note-delete {
  right: 0;
  font-size: 19px;
  padding: 2px 4px;
}

/* ── Marker tray / add-note dock ─────────────────────────────
   A literal marker tray: a row of pens to pick up (see the SVG marker
   glyph built in ui-notice.js), then the well the writing happens in. */
.notice-form-dock {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, var(--notice-frame-lt) 0%, var(--notice-frame) 100%);
  border-top: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 -4px 14px rgba(20,22,26,0.1);
  padding: var(--s2) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
body.dark .notice-form-dock {
  border-top-color: rgba(255,255,255,0.06);
}

.notice-pen-tray {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
  padding: 0 2px;
}

.notice-pen-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(6px) scale(0.9);
  opacity: 0.7;
  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease), filter 0.15s var(--ease);
}
.notice-pen-btn svg {
  display: block;
  width: 16px;
  height: 48px;
}
.notice-pen-btn--active {
  transform: translateY(-6px) scale(1.08);
  opacity: 1;
  filter: drop-shadow(0 6px 6px rgba(20,22,26,0.3));
}

#notice-message-input {
  background: var(--notice-bg);
  border: none;
  border-radius: var(--r-sm);
  padding: var(--s3);
  font-family: var(--notice-font-marker);
  font-size: 18px;
  color: var(--notice-ink-color, var(--notice-blue));
  resize: none;
  box-shadow: inset 0 1px 3px rgba(20,22,26,0.12);
}
#notice-message-input::placeholder {
  color: var(--notice-ink-dim);
  font-family: var(--font-ui);
  font-size: 14px;
}

#notice-add-btn {
  background: linear-gradient(180deg, var(--notice-frame-dk) 0%, #4A4F58 100%);
  color: #F6F7F9;
  border: none;
  border-radius: 999px;
  padding: var(--s3);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(20,22,26,0.25);
}
#notice-add-btn:active {
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.35);
  transform: translateY(1px);
}

/* ── Alerts tab — instant push-to-the-other-person messaging, folded
   in from the former standalone Alert Centre module. Its own red/amber
   palette (--notice-alert-*), deliberately not the whiteboard tokens. ── */
#alert-history-container {
  flex: 1;
  padding: var(--s4) var(--s4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding-bottom: var(--s2);
}
#alert-history-container .no-items {
  color: var(--notice-alert-text-dim);
}

.alert-history-item {
  position: relative;
  background: var(--notice-alert-card);
  border: 1px solid var(--notice-alert-border);
  border-radius: var(--r-lg);
  padding: var(--s3) 40px var(--s3) var(--s4);
}

.alert-history-delete {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  font-size: 19px;
  padding: 2px 4px;
  color: var(--notice-alert-text-dim);
}
.alert-history-delete:hover { color: var(--notice-alert-red); }

.alert-history-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--notice-alert-text-dim);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.alert-history-sender { font-weight: 700; color: var(--notice-alert-red); }
.alert-history-arrow { opacity: 0.6; }
.alert-history-time { margin-left: auto; }

.alert-history-message {
  font-size: 15px;
  line-height: 1.4;
  color: var(--notice-alert-text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Composer dock — sticky at the bottom of #notice-page-alerts, same
   shape as the Board tab's own .notice-form-dock. */
.alert-composer-dock {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: var(--notice-alert-card);
  border-top: 1px solid var(--notice-alert-border);
  box-shadow: 0 -4px 14px rgba(120,30,20,0.08);
  padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.alert-recipient-row {
  display: flex;
  gap: var(--s2);
}

.alert-recipient-btn {
  flex: 1;
  min-width: 0;
  background: var(--notice-alert-bg);
  border: 1px solid var(--notice-alert-border);
  border-radius: var(--r-md);
  padding: var(--s2);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--notice-alert-text-dim);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-recipient-btn--active {
  background: var(--notice-alert-red);
  border-color: var(--notice-alert-red);
  color: #ffffff;
}

#alert-message-input {
  width: 100%;
  min-height: 44px;
  resize: vertical;
  border: 1px solid var(--notice-alert-border);
  border-radius: var(--r-md);
  padding: var(--s2) var(--s3);
  font-family: var(--font-ui);
  font-size: 15px;
  background: var(--notice-alert-bg);
  color: var(--notice-alert-text);
  box-sizing: border-box;
}

#alert-send-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--notice-alert-red) 0%, var(--notice-alert-amber) 150%);
  color: #ffffff;
  border: none;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  padding: var(--s3);
  border-radius: var(--r-md);
  cursor: pointer;
}
#alert-send-btn:active { transform: scale(0.99); }
#alert-send-btn:disabled { opacity: 0.6; cursor: default; }