/*
 * Timesheet — styles shared by every page.
 *
 * Loaded first; css/index.css, css/entries.css and css/charts.css load after
 * it and hold each page's own rules, including the deliberate differences
 * (label and input sizing, panel padding, page width, the extra login-view
 * rules on the charts page). Keep those overrides in the page files.
 */

:root {
  --bg: #f4f5f3;
  --panel: #ffffff;
  --ink: #1b2321;
  --ink-soft: #5c655f;
  --line: #dfe3e0;
  --accent: #1f5f52;
  --accent-soft: #e4efec;
  --error: #a4342a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* --- Page shell ----------------------------------------------------------- */
.page { min-height: 100vh; padding: 40px 36px 72px; }
/* max-width is per page: 1100px on entries, 1280px on charts. */
.wrap { margin: 0 auto; }

/* --- Typography ----------------------------------------------------------- */
h1 { font-size: 21px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 4px; }
.subhead { color: var(--ink-soft); font-size: 13px; margin: 0 0 24px; }
.topbar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }

/* --- Panels --------------------------------------------------------------- */
/* padding is per page: 26px on index, 22px 24px on entries, 20px 22px on charts. */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* --- Form controls -------------------------------------------------------- */
label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 18px 0 6px;
}
label:first-of-type { margin-top: 0; }

input, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}
input:hover, select:hover { border-color: #b9c1bc; }
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
input[type="number"] { font-variant-numeric: tabular-nums; }

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235c655f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

.row { display: flex; gap: 12px; }
.row > div { flex: 1; }

/* --- Buttons -------------------------------------------------------------- */
/* Width/flex is per page: index and charts stretch it, entries flexes it
   alongside a Cancel button. */
button.primary {
  padding: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
button.primary:hover { background: #17493f; }
button.primary:disabled { background: #9fb3ae; cursor: default; }

button.text, a.text {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
a.text:hover, button.text:hover { color: var(--accent); }

/* --- Tables --------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
/* Cell padding is per page: 11px 8px here, 10px 10px on entries. */
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--ink-soft); font-weight: 600; font-size: 11.5px; padding-top: 0; }
tbody tr:last-child td { border-bottom: none; }
td.hours { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* --- Messages ------------------------------------------------------------- */
.msg { margin-top: 14px; font-size: 13px; padding: 9px 11px; border-radius: 7px; }
.msg.ok { background: var(--accent-soft); color: var(--accent); }
.msg.err { background: #f7e6e4; color: var(--error); }
.msg.hidden { display: none; }

/* --- Empty states --------------------------------------------------------- */
/* Padding and alignment are per page. */
.empty { color: var(--ink-soft); font-size: 13.5px; }

/* --- Login view ----------------------------------------------------------- */
#login-view { display: flex; flex-direction: column; align-items: center; margin-top: 100px; }
#login-view main { max-width: 340px; }

.hidden { display: none !important; }