/* Design tokens + component classes for The Linen Corkboard. */

:root {
  /* Paper & ink */
  --paper-50:   #fbf9f4;
  --paper-100:  #f7f2e8;
  --paper-200: #f1ead9;
  --paper-300: #e8dec8;
  --paper-400: #d6c9ad;
  --paper-500: #a99a7c;
  --paper-600: #7a6e55;
  --ink-700:   #3a342a;
  --ink-800:   #25211a;
  --ink-900:   #14110c;

  /* Accent */
  --accent-50:  oklch(0.96 0.02 40);
  --accent-100: oklch(0.90 0.04 40);
  --accent-300: oklch(0.75 0.07 40);
  --accent-500: oklch(0.58 0.10 40);
  --accent-700: oklch(0.44 0.09 40);

  /* State */
  --ok-bg: oklch(0.94 0.04 140); --ok-fg: oklch(0.38 0.08 140); --ok-line: oklch(0.82 0.08 140);
  --warn-fg: oklch(0.42 0.10 75);
  --err-bg: oklch(0.94 0.04 25); --err-fg: oklch(0.42 0.12 25); --err-line: oklch(0.78 0.10 25);

  /* Type — --f-serif/--f-mono aliased so .serif/.mono selectors still resolve. */
  --f-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-serif: var(--f-sans);
  --f-mono:  var(--f-sans);

  /* Radius / shadow / motion */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --shadow-paper: 0 1px 0 rgba(36,28,15,.04), 0 1px 2px rgba(36,28,15,.06), 0 8px 20px -12px rgba(36,28,15,.18);
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--accent-500) 30%, transparent);
  --dur-fast: 120ms; --dur: 200ms; --ease: cubic-bezier(.2,.7,.2,1);

  /* Paper grain */
  --paper-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.26  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- App base ---------------------------------------------- */
body {
  font-family: var(--f-sans);
  color: var(--ink-700);
  background-color: var(--paper-100);
  background-image: var(--paper-grain);
  background-size: 240px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
h1, h2, h3, .serif { font-family: var(--f-serif); color: var(--ink-800); font-weight: 500; letter-spacing: -0.01em; }
.mono, .num { font-family: var(--f-mono); font-feature-settings: "tnum" 1; }

.page-title { font-family: var(--f-serif); font-size: 28px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.015em; }
.eyebrow { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-600); }

/* ---- Form helpers ------------------------------------------ */
.form-label { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-600); margin-bottom: 6px; }
.form-input {
  width: 100%; padding: 8px 10px; font: inherit;
  color: var(--ink-800); background: var(--paper-50);
  border: 1px solid var(--paper-400); border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(36,28,15,.02);
}
.form-input:focus { outline: none; border-color: var(--accent-500); box-shadow: var(--shadow-focus); }
.form-error { margin-top: 4px; font-size: 13px; color: var(--err-fg); }

/* Signal text colors — for non-form status (overdue, remaining budget, etc.) */
.text-err  { color: var(--err-fg); }
.text-warn { color: var(--warn-fg); }
.text-ok   { color: var(--ok-fg); }

/* ---- Buttons ----------------------------------------------- */
.btn-primary, .btn-sm {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-sans); font-weight: 500;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary { padding: 8px 14px; font-size: 13px; color: white; }
.btn-primary:active, .btn-sm:active { transform: translateY(1px); }
.btn-green { background-color: var(--ink-800); }          /* re-tuned */
.btn-green:hover { background-color: var(--ink-900); }
.btn-blue  { background-color: var(--accent-500); }        /* re-tuned */
.btn-blue:hover  { background-color: var(--accent-700); }

.btn-sm { padding: 5px 10px; font-size: 12px; border: 1px solid var(--paper-400); background: var(--paper-50); color: var(--ink-800); }
.btn-sm-edit { color: var(--accent-700); background: var(--accent-50); border-color: var(--accent-100); }
.btn-sm-edit:hover { background: color-mix(in oklch, var(--accent-50) 50%, var(--accent-100)); }
.btn-sm-delete { color: var(--err-fg); background: var(--err-bg); border-color: var(--err-line); }
.btn-sm-delete:hover { background: color-mix(in oklch, var(--err-bg) 60%, var(--err-line)); }

.btn-nav {
  padding: 6px 12px; font-size: 13px; font-weight: 500;
  color: var(--ink-800); background: var(--paper-50);
  border: 1px solid var(--paper-400); border-radius: var(--r-md);
  text-decoration: none; transition: background var(--dur-fast);
}
.btn-nav:hover { background: var(--paper-200); }

.th-cell {
  padding: 10px 14px; text-align: left;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-600); font-weight: 500;
}

/* ---- Inline editing (inline-edit.js) ----------------------- */
.editable { cursor: pointer; border-radius: 3px; padding: 2px 4px; margin: -2px -4px; transition: background var(--dur-fast); }
.editable:hover { background: var(--accent-50); outline: 1px dashed var(--accent-300); }

.inline-editor {
  font: inherit; padding: 4px 8px;
  border: 2px solid var(--accent-500); border-radius: var(--r-sm);
  outline: none; box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent-500) 20%, transparent);
  background: var(--paper-50); color: var(--ink-800);
}
.inline-editor.inline-text { width: 220px; }
.inline-editor.inline-date { width: 160px; }
.inline-editor.inline-select { width: 150px; }
.inline-editor.inline-textarea {
  width: 280px; min-height: 70px; resize: vertical;
  font-family: inherit; line-height: 1.4;
}

/* Notes column cell — wraps, clamps to 3 lines, full text on hover */
.notes-cell { max-width: 14rem; }
.notes-display {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85em;
  line-height: 1.35;
}
.inline-editor.inline-designers {
  position: absolute; background: var(--paper-50);
  border: 2px solid var(--accent-500); border-radius: var(--r-md);
  padding: 10px; z-index: 100;
  box-shadow: 0 10px 30px -8px rgba(36,28,15,.35);
  min-width: 190px;
}
.inline-editor-buttons { display: flex; gap: 6px; margin-top: 10px; justify-content: flex-end; }
.btn-save-inline, .btn-cancel-inline {
  padding: 5px 12px; border: 1px solid transparent;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: 12px; font-weight: 500;
}
.btn-save-inline { background: var(--ink-800); color: var(--paper-50); }
.btn-save-inline:hover { background: var(--ink-900); }
.btn-cancel-inline { background: var(--paper-200); color: var(--ink-800); border-color: var(--paper-400); }
.btn-cancel-inline:hover { background: var(--paper-300); }

/* ---- Feedback toast ---------------------------------------- */
.inline-feedback {
  position: fixed; top: 72px; right: 22px;
  padding: 10px 16px; border-radius: var(--r-md);
  font-size: 13px; z-index: 1000;
  box-shadow: 0 10px 30px -8px rgba(36,28,15,.35);
  animation: cb-fadeIn .2s var(--ease);
}
.inline-feedback-success { background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-line); }
.inline-feedback-error   { background: var(--err-bg); color: var(--err-fg); border: 1px solid var(--err-line); }
@keyframes cb-fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Sort header arrows ------------------------------------ */
.sort-header { text-decoration: none; color: inherit; }
.sort-header:hover { color: var(--ink-900); }
.sort-header.sort-asc::after  { content: " ▲"; font-size: .7em; color: var(--accent-500); }
.sort-header.sort-desc::after { content: " ▼"; font-size: .7em; color: var(--accent-500); }

/* ---- Timesheet cell states (timesheet.js) ------------------ */
input.timesheet-cell {
  width: 58px; height: 32px; padding: 0 6px;
  font-family: var(--f-mono); font-size: 13px;
  text-align: center; color: var(--ink-800);
  background: var(--paper-50);
  border: 1px solid var(--paper-300); border-radius: var(--r-sm);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
input.timesheet-cell:hover { border-color: var(--paper-400); }
input.timesheet-cell:focus { outline: none; border-color: var(--accent-500); box-shadow: var(--shadow-focus); }
input.timesheet-cell.timesheet-cell-saving { border-color: var(--warn-fg); }
input.timesheet-cell.timesheet-cell-saved  { border-color: var(--ok-line); background: var(--ok-bg); }
input.timesheet-cell.timesheet-cell-error  { border-color: var(--err-line); background: var(--err-bg); }
.timesheet-cell::-webkit-outer-spin-button,
.timesheet-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.timesheet-cell { -moz-appearance: textfield; }

/* Card surface. Callers add their own overflow utility. */
.cb-card {
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-paper);
}

/* Page header: flex row with title + trailing actions. */
.cb-pagehead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; }

/* Week/month navigation bar: prev button — title — next button, on a card surface. */
.cb-navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; margin-bottom: 20px;
  background: var(--paper-50);
  border: 1px solid var(--paper-300);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-paper);
}

/* Back-to-X footer link. */
.cb-backlink { font-size: 13px; color: var(--paper-600); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.cb-backlink:hover { color: var(--ink-800); }

/* --- Top nav ----------------------------------------------- */
.cb-topnav {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 24px;
  background: var(--paper-50);
  border-bottom: 1px solid var(--paper-300);
  background-image: var(--paper-grain); background-size: 240px;
}
.cb-brand { display: flex; align-items: center; gap: 10px; }
.cb-brand__mark {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d97757 0%, #a84a2e 65%, #6a2c18 100%);
  box-shadow: 0 1px 2px rgba(36,28,15,.25), inset 0 -1px 2px rgba(0,0,0,.2);
}
.cb-brand__name { font-family: var(--f-serif); font-size: 20px; color: var(--ink-900); letter-spacing: -0.01em; }

.cb-navlink {
  display: inline-flex; align-items: center;
  padding: 6px 12px; font-size: 13px;
  color: var(--paper-600);
  border-radius: var(--r-md);
  text-decoration: none;
}
.cb-navlink:hover { background: var(--paper-200); color: var(--ink-800); }
.cb-navlink.is-active { color: var(--ink-900); background: var(--paper-200); box-shadow: inset 0 -2px 0 var(--accent-500); }

.cb-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px; font-size: 10.5px;
  font-family: var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--paper-600); background: var(--paper-200);
  border: 1px solid var(--paper-300); border-radius: 3px;
}
.cb-badge--admin { color: var(--accent-700); background: var(--accent-50); border-color: var(--accent-100); }

/* --- Budget visibility toggle (admin nav) ----------------- */
.budget-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; font-size: 11px;
  font-family: var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--paper-600); background: var(--paper-100);
  border: 1px solid var(--paper-300); border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.budget-toggle:hover { background: var(--paper-200); color: var(--ink-800); }
.budget-toggle__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper-400);
  transition: background var(--dur-fast);
}
.budget-toggle.is-on { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-line); }
.budget-toggle.is-on:hover { background: var(--ok-bg); filter: brightness(0.97); }
.budget-toggle.is-on .budget-toggle__dot { background: var(--ok-fg); }

/* --- Flash messages --------------------------------------- */
.flash {
  margin-bottom: 14px; padding: 10px 14px;
  border-radius: var(--r-md); font-size: 13px;
  border: 1px solid transparent;
}
.flash--success { background: var(--ok-bg);  color: var(--ok-fg);  border-color: var(--ok-line); }
.flash--danger  { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-line); }
.flash--info    { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-100); }