/*
 * startpage.css - C-Startpage Styles
 *
 * Sections:
 *   1. CSS Variables      - Theme colors and grid dimensions (set by JS from config)
 *   2. Page & Grid        - Base page, grid container, cells, images
 *   3. Bottom Bar         - Edit toggle area
 *   4. UI Controls        - Global form defaults (h3, label, input, button, etc.)
 *   5. Edit Panel         - Sidebar layout, sections, session controls
 *   6. Edit Mode          - Cell hover/drag indicators when editing
 *   7. Cell Dialog        - Modal for editing individual cell content
 *   8. Toast              - Save/error notification
 */


/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS VARIABLES
   JS updates these on load from startpage-config.json.
   Changing values here has no effect -- they're overwritten at runtime.
═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #222428;
  --grad-start: #DDDDDD;
  --grad-end: #333333;
  --hover-highlight: rgba(191, 160, 128, 0.5);  /* consumed by .tile-box::before in Section 2 */
  --panel-bg: #1a1a1e;
  --panel-color: #ccc;
  --panel-font: sans-serif;
  --panel-font-size: 14px;
  --col-count: 5;
  --row-count: 13;
  --col-max: 300px;
  --img-scale: 90%;        /* image width as % of cell — controls proportional gap */
  --img-max-w: 200px;      /* image width hard cap */
  --row-height: min(36px, calc((100vw - 16px) / var(--col-count) * 0.16215));
               /* 36px cap when columns >= 222px, scales proportionally below */
               /* 0.16215 = 36 / 222; large cells span 2 rows = 72px total   */
               /* at cap: image fills 83.3% of cell height (60px / 72px)      */
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. PAGE & GRID
═══════════════════════════════════════════════════════════════════════════ */

body {
  background-color: var(--bg);
  margin: 0;
  font-family: sans-serif;
}

/* Grid container - holds the gradient background */
.grid-container {
  border: 8px solid var(--bg);
  display: grid;
  grid-template-columns: repeat(var(--col-count), minmax(0, var(--col-max)));
  grid-template-rows: repeat(var(--row-count), var(--row-height));
  justify-content: center;
  background-image: linear-gradient(var(--grad-start), var(--grad-end));
}

/* Grid cell - transparent over the gradient; --highlight-bg set by JS for highlight zones */
.cell {
  background-color: var(--highlight-bg, transparent);
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* ── Tile link: wraps tile-box for link cells ── */
.tile-link {
  text-decoration: none;
  display: contents;
}

/* ── Tile box: the clickable container (all cell types) ── */
/* Link cells: 200x60 via aspect-ratio.  Header/empty cells: 24px tall. */
/* No overflow:hidden -- the 6px hover halo must extend beyond the box. */
.tile-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: min(var(--img-scale), var(--img-max-w));
  aspect-ratio: 200 / 60;
  border-radius: 8px;
  background: transparent;          /* tile-bg moved to ::after layer */
}

/* Header, small, and empty cells: 24px tall (+ 6px halo each side = 36px = 1 row) */
.cell.header .tile-box,
.cell.small .tile-box,
.cell:not(.header):not(.small):not(.large) .tile-box {
  aspect-ratio: auto;
  height: 24px;
}

/* ── Tile icon: favicon or letter circle inside link tile-box ── */
.tile-icon {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.icon-favicon {
  display: block;
  width: 16px;
  height: 16px;
}

.icon-letter {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

/* ── Tile pseudo layers: shared base ── */
.tile-box::before,
.tile-box::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* ── Hover overlay (::before) ── */
/* Always at opacity 0; toggled via .tile-hovered class.                 */
/* inset: -6px creates the 6px halo beyond the tile-box edges.           */
/* Transition on base = fade-out; overridden to none on active.          */
.tile-box::before {
  inset: -6px;
  background: var(--hover-highlight);
  border-radius: 14px;              /* 8px box radius + 6px outset */
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

body:not(.edit-mode) .tile-box.tile-hovered::before {
  opacity: 1;
  transition: none;                  /* instant on */
}

/* Hover disabled: suppress all hover overlays */
body.hover-disabled .tile-box::before {
  display: none;
}

/* Preview hover: force all tile-box halos visible while editing.
   Overrides hover-disabled's display:none when both classes are on body --
   the two toggles are independent (page hover vs editor preview). */
body.edit-mode.show-hover-preview .tile-box::before {
  display: block;
  opacity: 1;
}

/* ── Tile background layer (::after) ── */
/* Sits above hover overlay, below image/label content.                  */
.tile-box::after {
  inset: 0;
  background: var(--tile-bg, transparent);
  border-radius: inherit;
  z-index: 1;
}

/* ── Tile image: fills the box ── */
.tile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: inherit;           /* match tile-box 8px rounding */
  position: relative;
  z-index: 2;
}

/* ── Tile label overlay ── */
/* Default: single-line, truncated. is-large overrides to allow wrapping. */
.tile-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: var(--label-valign, center);
  justify-content: var(--label-halign, center);
  padding: 4px 6px;
  font-family: sans-serif;
  font-weight: 600;
  font-size: calc(var(--row-height) * var(--label-size, 0.389));
  color: var(--label-color, #FFFFFF);
  text-shadow: var(--label-shadow, 1px 1px 2px rgba(0,0,0,0.7));
  text-transform: var(--label-transform, uppercase);
  letter-spacing: 0.5px;
  text-align: var(--label-text-align, left);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 2;
}

/* Large link labels: allow wrapping, flex centering preserved */
.cell.large .tile-label {
  white-space: normal;
  text-overflow: clip;
}

/* When an icon is present, push label text right to clear it */
.tile-box.has-icon .tile-label {
  padding-left: 28px;
}

/* Link cells: grid-row set inline by JS as "N / span 2" to span two rows */

/* Header cells - category labels, one row tall.
   Constrained to same visual width as images so text aligns with link boxes.
   Uses same --label-* vars as link labels (headers ARE labels). */
.cell.header {
  font-family: sans-serif;
  font-weight: 600;
  text-transform: var(--label-transform, uppercase);
  letter-spacing: 1.5px;
  font-size: calc(var(--row-height) * var(--label-size, 0.389));
  color: var(--label-color, #FFFFFF);
  text-shadow: var(--label-shadow, 1px 1px 2px rgba(0,0,0,0.5));
}

/* Header text: above hover and bg layers.
   Constrained to image width so text aligns with link boxes.
   nowrap/overflow/ellipsis needed here -- header-text is a span inside
   .cell.header, not inside .tile-label, so cannot inherit those rules. */
.header-text {
  position: relative;
  z-index: 2;
  display: block;
  width: min(var(--img-scale), var(--img-max-w));
  text-align: var(--label-halign, left);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Highlight underline: colored bottom border on headers with active highlights.
   --highlight-color is set by JS on cells that have highlightRows enabled. */
.cell.header.highlight-active .header-text {
  border-bottom: 2px solid var(--highlight-color, transparent);
  padding-bottom: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. BOTTOM BAR
═══════════════════════════════════════════════════════════════════════════ */

#bottom-bar {
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  font-size: 14px;
  font-family: sans-serif;
}

#edit-toggle {
  cursor: pointer;
  user-select: none;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: calc(var(--row-height) * var(--edit-size, 0.389));
  color: var(--edit-color, #FFFFFF);
  text-shadow: var(--edit-shadow, none);
  text-transform: var(--edit-transform, uppercase);
}

#edit-toggle:hover {
  color: var(--edit-color, #FFFFFF);
  background: #444;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. UI CONTROLS
   Global form defaults inherited by both the Edit Panel and Cell Dialog.
   Every element is styled by what it IS, not where it LIVES.
   Specialization requires justification.
   These selectors are safe unscoped: none of these elements exist in
   the grid content (which uses .cell, .tile-box, .tile-img, etc).
═══════════════════════════════════════════════════════════════════════════ */

h3 {
  margin: 0 0 10px 0;
  font-size: var(--panel-font-size);
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
}

label {
  flex-shrink: 0;
  color: #aaa;
  font-size: 13px;
}

input[type="text"],
input[type="number"],
input[type="password"],
select,
textarea {
  padding: 4px;
  border: 1px solid #555;
  border-radius: 3px;
  background: #2a2a2e;
  color: var(--panel-color);
  font-family: var(--panel-font);
  font-size: 13px;
  box-sizing: border-box;
}

input[type="text"],
select,
textarea { flex: 1; }
input[type="number"] { width: 64px; text-align: center; }
select option:disabled { color: #555; }

input[type="color"] {
  width: 50px;
  height: 28px;
  border: 1px solid #555;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}

input[type="file"] {
  min-width: 0;
  flex: 1;
  font-size: 12px;
  color: #aaa;
}

button {
  padding: 6px 14px;
  border: 1px solid #555;
  border-radius: 3px;
  background: #2a2a2e;
  color: var(--panel-color);
  cursor: pointer;
  font-size: 13px;
  margin-right: 6px;
}
button:hover { background: #3a3a3e; color: #fff; }
button:disabled { opacity: 0.4; cursor: default; }
button:disabled:hover { background: #2a2a2e; color: var(--panel-color); }

/* ── Justified specializations ────────────────────────────────────────
   Each class passes the "why" test: describes what it IS or DOES. */

input.hex {
  width: 64px;
  font-family: monospace;
  font-size: 12px;
  flex: none;
}

.btn-confirm { border-color: #4a8; color: #8fc; }
.btn-confirm:hover { background: #253; }
.btn-danger { border-color: #a33; color: #f88; }
.btn-danger:hover { background: #522; }

.spacer { flex: 1; }

/* ── Layout containers ────────────────────────────────────────────────
   Two row types based on content pattern, not location.
   .panel-row: label + control pair (space-between pushes input right)
   .checkbox-row: group of checkbox labels (flex-start, stay together) */

.panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. EDIT PANEL
   Fixed sidebar, shown only in edit mode.
═══════════════════════════════════════════════════════════════════════════ */

#edit-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 100vh;
  background: var(--panel-bg);
  color: var(--panel-color);
  border-left: 2px solid #444;
  overflow-y: auto;
  z-index: 1000;
  font-family: var(--panel-font);
  font-size: var(--panel-font-size);
  padding: 16px;
  box-sizing: border-box;
}

body.edit-mode #edit-panel {
  display: flex;
  flex-direction: column;
}

body.edit-mode .grid-container {
  margin-right: 320px;
}

body.edit-mode #bottom-bar {
  margin-right: 320px;
}

/* Section containers and separators */
.panel-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #888;
}

hr.section-separator {
  border: 0;
  border-top: 1px solid #888;
  margin: 20px 0 16px 0;
}

.panel-btn-row {
  margin-top: 8px;
}

/* Grid resize warning */
#grid-resize-warning {
  display: none;
  color: #f88;
  margin-top: 8px;
  font-size: 12px;
}

/* Upload status */
#upload-status {
  margin-top: 6px;
  font-size: 12px;
}

/* Token input: inherits base from input[type="password"].
   Overrides: full-width, wider padding for long tokens, monospace. */
#input-token {
  width: 100%;
  padding: 4px 8px;
  font-family: monospace;
  font-size: 12px;
}

.token-hint {
  margin-top: 4px;
  font-size: 11px;
  color: #777;
}


/* Push auth + session blocks to bottom of sidebar */
.panel-bottom {
  margin-top: auto;
}

/* Session controls: stacked full-width buttons + side-by-side pair */
.panel-session {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.panel-session .panel-btn-row button {
  width: 100%;
  text-align: center;
  margin-right: 0;
}

.panel-session .btn-pair {
  display: flex;
  gap: 6px;
}

.panel-session .btn-pair button {
  flex: 1;
  width: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. EDIT MODE
   Styles only visible when body has class "edit-mode".
═══════════════════════════════════════════════════════════════════════════ */

/* 1x1 drop-target layer: invisible grid of drop targets.
   Sits behind content (added first in DOM order).
   pointer-events toggled by .dragging on body. */
.drop-target {
  pointer-events: none;
}

/* During drag: events pass through content to drop-target layer */
body.dragging .cell {
  pointer-events: none;
}

body.dragging .drop-target {
  pointer-events: auto;
}

body.edit-mode .cell {
  cursor: pointer;
}

body.edit-mode .cell:hover {
  outline: 2px dashed rgba(255, 255, 255, 0.6);
  outline-offset: -2px;
}

/* Drag feedback: overlay element placed on grid to show drop target.
   Sized to match the dragged item's row/col span, independent of
   whatever cells exist underneath. */
.drag-preview {
  outline: 2px solid #4CAF50;
  outline-offset: -2px;
  background-color: rgba(76, 175, 80, 0.15);
  pointer-events: none;
  z-index: 5;
}

body.edit-mode .cell.dragging {
  opacity: 0.4;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. CELL DIALOG
   Modal overlay for editing individual cell content.
═══════════════════════════════════════════════════════════════════════════ */

#cell-dialog-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: transparent;
  z-index: 2000;
}

#cell-dialog-overlay.visible {
  display: block;
}

#cell-dialog {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: var(--panel-bg);
  color: var(--panel-color);
  border: 2px solid #e8c84a;
  border-radius: 6px;
  box-shadow: 0 0 12px 2px rgba(232, 200, 74, 0.5);
  padding: 20px;
  width: 400px;
  max-width: 90vw;
  max-height: 100vh;
  overflow-y: auto;
  font-family: var(--panel-font);
  font-size: var(--panel-font-size);
  z-index: 2001;
}

/* Dialog positioning: left/right within grid area */
#cell-dialog-overlay.dialog-left #cell-dialog {
  left: 8px;
  right: auto;
}
#cell-dialog-overlay.dialog-right #cell-dialog {
  right: 320px;
  left: auto;
}

/* Live preview: highlight the cell being edited */
.cell.previewing {
  outline: 2px solid #e8c84a;
  outline-offset: -2px;
}

#cell-dialog textarea {
  height: 80px;
  resize: vertical;
}

/* Logo picker grid inside dialog */
/* Logo picker: square viewing area (width matches dialog content) */
#logo-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid #333;
  border-radius: 3px;
  background: #222;
}

.logo-option {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 3px;
  padding: 4px;
  background: #2a2a2e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-option:hover { border-color: #666; }
.logo-option.selected { border-color: #4CAF50; background: #253; }
.logo-option img { width: 100%; height: 30px; object-fit: contain; }

/* Dialog button row */
.dialog-buttons {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}

/* Dialog toggle classes: is-link, is-large, is-paid, is-header.
   Each class is independent. Elements with multiple classes (e.g. "is-large is-paid")
   are hidden if ANY controlling condition fails -- no compound classes needed. */
#cell-dialog.type-header .is-link,
#cell-dialog.type-header .is-large { display: none; }
#cell-dialog.type-small .is-header,
#cell-dialog.type-small .is-large { display: none; }
#cell-dialog.type-large .is-header { display: none; }
#cell-dialog:not(.tier-paid) .is-paid { display: none; }

/* Dialog hint text */
.hint {
  color: #666;
  font-size: 12px;
  margin: -4px 0 6px 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. TOAST
   Brief save/error notification at bottom of screen.
═══════════════════════════════════════════════════════════════════════════ */

#toast {
  display: none;
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 20px;
  border-radius: 4px;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  z-index: 3000;
}

#toast.success { background: #2a6; display: block; }
#toast.warning { background: #a80; display: block; }
#toast.error   { background: #a33; display: block; }

/* Center toast over content area (not sidebar) in edit mode */
body.edit-mode #toast {
  left: calc((100vw - 320px) / 2);
}