/* ===========================================================
   Homeboard design system — extracted from index.html
   Source: D:\Projects\homeboard\homepage\index.html
   To use: <link rel="stylesheet" href="/css/homeboard.css">
   =========================================================== */

/* ===========================================================
   Design tokens — dark mode (verbatim from tickets.html).
   Light mode placeholders sourced from portfolio clean palette
   (D:\Projects\portfolio\css\clean.css). HB-041 wires real values.
   =========================================================== */
:root,
:root[data-theme="dark"] {
  --bg: #14181c;
  --panel: #1c2126;
  --panel-2: #232931;
  --border: #2c333c;
  --row-hover: #1f252b;
  --fg: #e6e8eb;
  --fg-dim: #9aa3ad;
  --accent: #6aa3ff;
  --accent-home: #6aa3ff;
  --accent-away: #4ade80;
  --pill-green: #047857;
  --pill-grey:  #4b5563;
  --pill-amber: #b45309;
  --pill-blue:  #1d4ed8;
  --pill-red:   #b91c1c;
  --pill-pistachio: #93c572;
  --input-bg: #1c2126;
  --error: #f87171;
  --btn: #2a313a;
  --btn-hover: #343c47;
}

:root[data-theme="light"] {
  --bg: #f4efe6;          /* clean-paper */
  --panel: #ebe4d6;       /* clean-paper-2 */
  --panel-2: #ffffff;     /* clean-surface */
  --border: #d5ccb8;      /* clean-rule */
  --row-hover: #ebe4d6;
  --fg: #1a1a22;          /* clean-ink */
  --fg-dim: #6d685f;      /* clean-ink-3 */
  --accent: #a84424;      /* clean-primary */
  --accent-home: #2d5e7a;
  --accent-away: #2b8a48;
  --pill-green: #2b8a48;
  --pill-grey:  #6d685f;
  --pill-amber: #a97100;
  --pill-blue:  #2d5e7a;
  --pill-red:   #7a2d22;
  --input-bg: #ffffff;
  --error: #b42318;
  --btn: #ebe4d6;
  --btn-hover: #ffffff;
}

/* In Away mode the global --accent flips to green. */
:root[data-mode="away"] { --accent: var(--accent-away); }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: 'DINosaur', 'Arial Narrow', Arial, sans-serif;
  font-size: 14px; line-height: 1.4;
  min-height: 100vh;
}

/* ===========================================================
   Page title
   =========================================================== */
.page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}

/* ===========================================================
   Tab panels
   =========================================================== */
main { padding: 0; }
.tab-content {
  display: none;
  padding: 18px 22px;
  max-width: 1400px;
  margin: 0 auto;
}
.tab-content.active { display: block; }
.tab-content .placeholder {
  color: var(--fg-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===========================================================
   Home tab layout
   =========================================================== */
.home-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.dashboard-stack { display: grid; gap: 22px; }
.home-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.home-top-left {
  display: grid;
  gap: 22px;
  min-width: 0;
  align-content: start;
}
.home-top-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.home-top-right .scratchpad-textarea {
  flex: 1;
  min-height: 180px;
}
@media (max-width: 860px) {
  .home-top-grid { grid-template-columns: 1fr; }
  .home-top-right .scratchpad-textarea { min-height: 140px; }
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: 16px;
}
.dashboard-section {
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.section-title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ===========================================================
   Tiles (Quicklinks, Live sites)
   =========================================================== */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 8px;
  padding: 0;
  list-style: none;
}
.tile {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.tile:hover, .tile:focus {
  background: var(--panel-2);
  border-color: var(--accent);
  color: var(--fg);
  text-decoration: none;
}

/* ===========================================================
   Project cards
   =========================================================== */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.project-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  background: var(--panel);
}
.project-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.project-card-title {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
.project-links {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0; margin: 0;
  list-style: none;
}
.project-links a {
  display: inline-block;
  color: var(--fg);
  text-decoration: none;
  background: var(--btn);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.project-links a:hover,
.project-links a:focus-visible {
  background: var(--btn-hover);
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
  outline: none;
}

/* ===========================================================
   Scratchpad
   =========================================================== */
.scratchpad-textarea {
  display: block; width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--fg);
  font: inherit;
  line-height: 1.45;
  padding: 10px 12px;
}
.scratchpad-textarea:focus { border-color: var(--accent); outline: none; }
.scratchpad-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

/* ===========================================================
   Buttons
   =========================================================== */
.action-button {
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.action-button:hover, .action-button:focus-visible {
  background: transparent; color: var(--accent); outline: none;
}
.save-state {
  margin: 0;
  color: var(--fg-dim);
  font-size: 12px;
}
.save-state.error { color: var(--error); }

/* ===========================================================
   Error banner
   =========================================================== */
.error-message {
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 14px 18px;
  margin-top: 14px;
  font-size: 13px;
}
.error-message strong { color: var(--fg); }
.error-message p { margin: 6px 0 0; color: var(--fg-dim); font-size: 12px; }

/* ===========================================================
   Pills
   =========================================================== */
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pill-grey);
  color: #fff;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.pill[data-color="green"] { background: var(--pill-green); }
.pill[data-color="grey"]  { background: var(--pill-grey); }
.pill[data-color="amber"] { background: var(--pill-amber); }
.pill[data-color="blue"]  { background: var(--pill-blue); }
.pill[data-color="red"]   { background: var(--pill-red); }
.pill[data-color="pistachio"] { background: var(--pill-pistachio); color: #000000; }

/* ===========================================================
   Generic table / row pattern (shared across tabs)
   =========================================================== */
.table {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 14px;
}
.row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: none; }
.row.body:hover { background: var(--row-hover); }
.row.head {
  background: var(--panel-2);
  color: var(--fg-dim);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding-top: 9px; padding-bottom: 9px;
}

/* Generic row button */
.row-btn {
  background: var(--btn);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--fg);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  font-family: inherit;
}
.row-btn:hover { background: var(--btn-hover); }
.row-btn.copied { background: var(--pill-green); color: #fff; border-color: var(--pill-green); }
.row-btn.danger-arm { background: var(--pill-red); color: #fff; border-color: var(--pill-red); }

/* Pagination */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 0 0;
  color: var(--fg-dim);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.pagination button {
  background: var(--btn);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
}
.pagination button:hover:not(:disabled) { background: var(--btn-hover); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Header strip (top of full-bleed tabs) */
header.top {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.meta { color: var(--fg-dim); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Filter bar */
.filters {
  padding: 10px 22px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}
.filters label {
  color: var(--fg-dim);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  margin-right: 6px;
}
.filters select, .filters input[type=text], .filters input[type=search] {
  background: var(--input-bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 9px;
  font-family: inherit;
  font-size: 13px;
}
.filters select:focus, .filters input:focus { outline: 1px solid var(--accent); }
.filters .group { display: flex; align-items: center; }
.filters .group.grow { flex: 1 1 220px; }
.filters .group.grow input { width: 100%; min-width: 0; }

/* Tab footer */
footer {
  padding: 12px 22px;
  color: var(--fg-dim);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 480px) {
  .overview-grid, .project-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  header.top, .filters, footer { padding-left: 12px; padding-right: 12px; }
}