/* Fintax App — custom styles on top of PicoCSS */

.login-box {
  max-width: 420px;
  margin: 8vh auto;
}

/* Branding — the logo is a white-background JPG, so give it a white chip
   that disappears in light mode and looks deliberate in dark mode */
.login-logo {
  display: block;
  margin: 0 auto 0.25rem;
  width: 100%;
  max-width: 300px;
  height: auto;
  background: #fff;
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
}
.login-sub {
  text-align: center;
  color: var(--pico-muted-color, #777);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.8em;
  margin-bottom: 1.5rem;
}
.brand { padding: 0; }
.brand-logo {
  display: block;
  height: 110px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
}
@media (max-width: 768px) {
  .brand-logo { height: 64px; }
}

.flash {
  padding: 0.6rem 1rem;
  border-radius: 6px;
}
.flash-success { background: #e6f4ea; color: #1e7e34; }
.flash-error { background: #fdecea; color: #b02a37; }

.table-wrap {
  overflow-x: auto;
}

/* Use the WHOLE window, flush-left — Pico caps the container and centres it, which left a big
   empty gutter on the left while the tables crammed into the capped width. Drop the cap and the
   auto-centering so everything starts near the left edge and the data spreads across the full
   width (Peter 2026-06-19: "shift the whole thing left, the right crams a lot in"). */
.container { max-width: none; margin-left: 0; margin-right: 0; padding-left: 1.5rem; padding-right: 1.5rem; }

table td, table th {
  white-space: nowrap;
}
table td[title] {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ===== Universal layout rule (2026-06-14) =====
   Each table fills its width; every column sizes to its content (nowrap, above) and
   ONE column — tagged .grow-col, the notes/description column by default — soaks up
   all the spare width. Specificity (table td.grow-col) is set to beat the td[title]
   truncation cap above. Never hand-tune individual column widths; just pick the grower. */
table td.grow-col, table th.grow-col { width: 100%; max-width: none; white-space: normal; }
/* A name column that shows the FULL name (lifts the 320px td[title] cap) but sizes to its content
   rather than growing page-wide — Client column on /unbilled, so names aren't squashed (Peter 2026-06-19). */
table td.client-col { max-width: none; }
/* The Who column on /emails: the FULL email address, ALWAYS — never truncated (Peter 2026-07-04).
   Lifts the td[title] 320px cap above (equal specificity, later rule wins — same mechanism as
   client-col); the cell simply sizes to its content. */
table td.email-who-cell { max-width: none; }
/* Page header with a headline figure pinned top-right (Peter 2026-06-24: total WIP on /unbilled,
   "there every time I see it, makes me want to invoice it out"). */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.wip-card {
  flex: 0 0 auto;
  text-align: right;
  border: 2px solid #4472C4;          /* the app's accent blue (Excel header) */
  border-radius: 10px;
  padding: 0.5rem 1.1rem;
  background: #eef3fb;
  line-height: 1.35;
}
.wip-card small { display: block; color: #4a5a75; letter-spacing: 0.04em; }
.wip-card .wip-amount { display: block; font-size: 1.9rem; font-weight: 700; color: #1d3f7a; }

/* Per-client Notes field on /unbilled — fills the spare width on the right (Peter 2026-06-19) */
.note-form { display: flex; gap: 0.4rem; align-items: center; }
.note-form .client-note { flex: 1 1 auto; margin: 0; padding: 0.25rem 0.5rem; }
.note-form .small-button { flex: 0 0 auto; }

.status {
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.85em;
}
.status-unbilled { background: #fff3cd; color: #856404; }
.status-invoiced { background: #e6f4ea; color: #1e7e34; }
.status-written_off { background: #eceff1; color: #546e7a; }

.status-select {
  margin: 0;
  padding: 0.2rem 1.6rem 0.2rem 0.5rem;
  font-size: 0.85em;
  width: auto;
}

.inline { display: inline; margin: 0; }

.link-button {
  background: none;
  border: none;
  color: #b02a37;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  width: auto;
  text-decoration: underline;
}

.small-button {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.85em;
  width: auto !important;   /* override Pico's full-width button default (higher specificity) */
  margin: 0;
}
/* destructive action — same button shape, red */
.small-button.danger {
  background: #b02a37;
  border-color: #b02a37;
  color: #fff;
}
/* Contacts row actions sit in a .btn-group — one line, never stacked */
.contact-actions .small-button { min-width: 92px; }

.rate-input {
  width: 90px;
  margin: 0;
  padding: 0.25rem 0.5rem;
}

.actions a { margin-right: 0.5rem; }

.filter-bar {
  background: var(--pico-card-background-color, #fff);
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  background: var(--pico-card-background-color, #fff);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
/* bulk bars follow the same rule: floor each control, one .grow field absorbs slack */
.bulk-bar > * { flex: 0 0 auto; margin: 0; }
.bulk-bar input { padding: 0.25rem 0.5rem; min-width: 160px; }
.bulk-bar .small-button, .bulk-bar button { min-width: 96px; }
.bulk-bar .bulk-pick { min-width: 220px; }
.bulk-bar .bulk-pick .client-picker { width: 100%; }
.bulk-bar .cp-search { width: 100%; margin: 0; padding: 0.25rem 0.5rem; }
.bulk-bar .grow { flex: 1 1 auto; }
#sel-count, #csel-count { min-width: 6.5em; }

table input[type="checkbox"] { margin: 0; }

/* Searchable client picker */
.client-picker { position: relative; }
.cp-list {
  position: absolute;
  z-index: 100;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  background: var(--pico-card-background-color, #fff);
  border: 1px solid var(--pico-form-element-border-color, #ccc);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  max-height: 320px;
  overflow-y: auto;
}
.cp-item {
  margin: 0;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}
.cp-item.active { background: var(--pico-primary-focus, rgba(2, 154, 232, 0.18)); }
.cp-type { color: var(--pico-muted-color, #777); margin-left: 0.5rem; }
.cp-holding { border-left: 4px solid #e6a700; }
.cp-hint { display: block; color: var(--pico-muted-color, #777); }
.cp-empty, .cp-more {
  margin: 0;
  padding: 0.4rem 0.75rem;
  color: var(--pico-muted-color, #777);
  font-style: italic;
}

/* Duplicate-warning panel on Clients screen */
.dup-warning { border-left: 5px solid #e6a700; }
/* Pico makes submit buttons full-width; the risky "Add anyway" shouldn't be the loudest thing in a warning */
.dup-warning button[type="submit"] { width: auto; }
.dup-warning .match-exact { color: #b02a37; font-weight: bold; }
.dup-warning .match-similar { color: #856404; }

.muted { color: var(--pico-muted-color, #777); }

/* Tasks */
.task-overdue { background: #fdecea; }
.task-due-today { background: #fff3cd; }
.overdue-count { color: #b02a37; }

/* Clients screen: Name | Type | Rename | Status | Deactivate.
   Rename + Deactivate share a width so they line up down the list. */
.client-btn { min-width: 104px; text-align: center; }
.client-rename-cell { white-space: nowrap; }
input.rename-input {
  display: inline-block;
  width: 280px;
  max-width: 100%;
  margin: 0 0.4rem 0 0;
  padding: 0.25rem 0.5rem;
  vertical-align: middle;
}

/* Staff page: keep the password reset box from stretching to full cell width */
input[name="new_password"] { width: 200px; max-width: 100%; }

/* Calls + contacts */
/* the allocate dropdown must not be clipped by the table scroller */
.table-wrap-open { overflow-x: visible; overflow-y: visible; }
.tab-bar a { margin-right: 1rem; }
.tab-bar a.active { font-weight: bold; text-decoration: underline; }
.call-missed { background: #fdecea; }
.ans {
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.85em;
  white-space: nowrap;
}
.ans-human { background: #e6f4ea; color: #1e7e34; }
.ans-voicemail { background: #fff3cd; color: #856404; }
.ans-none { background: #fdecea; color: #b02a37; }
/* ===== Call action cells: fields grow, buttons travel together =============
   The fields form (.alloc-form / .call-update) grows to fill the row and holds
   the picker + note (+ minutes) — the note is the grower. The buttons sit in a
   sibling .btn-group so they stay together at the end of the line and drop to the
   next line as ONE unit when the row is narrow — never a button on a stub line.
   Allocate/Save reach their form via the HTML form="..." attribute, so they live
   in the button group instead of inside the form. */
.call-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.call-actions .alloc-form,
.call-actions .call-update {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 320px;
  min-width: 0;
  margin: 0;
}
.call-actions .client-picker { flex: 0 0 168px; min-width: 0; }
.call-actions .cp-search { width: 100%; margin: 0; padding: 0.25rem 0.5rem; }
.call-actions .call-note { flex: 1 1 140px; min-width: 120px; margin: 0; padding: 0.25rem 0.5rem; }
.call-actions .ans { flex: 0 0 auto; }
input.min-input { flex: 0 0 76px; width: 76px; margin: 0; padding: 0.25rem 0.3rem; text-align: center; }

/* Emails rows (2026-07-04, Peter's spec): columns When | Who | Customer | Subject | buttons | Note.
   WIDTH PRIORITY: (1) the ADDRESS shows IN FULL — no cap on the Who cell, it sizes to content;
   (2) Subject next — generous cap, full text on hover; (3) everything else holds its size and the
   NOTE on the far right is the page's grower, absorbing all remaining slack. */
.email-cust-cell { min-width: 330px; }
.email-cust-cell form { display: flex; align-items: center; gap: 0.3rem; margin: 0; }
/* FIXED picker width on every row — identical with or without the Save button beside it, so the
   column reads perfectly justified (Peter 2026-07-04: "make the customer field fixed"). */
.email-cust-cell .client-picker { flex: 0 0 260px; }
.email-cust-cell form .small-button { flex: 0 0 auto; }   /* the Save (allocate + remember) button */
.email-cust-cell .cp-search { margin: 0; padding: 0.25rem 0.5rem; }
.email-btns { white-space: nowrap; }
.email-btns .btn-group { display: inline-flex; }
table td.note-cell { display: flex; align-items: center; gap: 0.4rem; }
.note-cell .note-cell-form { display: flex; flex: 1 1 auto; align-items: center; gap: 0.4rem; margin: 0; }
.note-cell .call-note { flex: 1 1 auto; min-width: 140px; margin: 0; padding: 0.25rem 0.5rem; }

/* Subject on /emails: second priority — wide but capped, full text on hover */
table td.email-subject-cell {
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Make task from email" — opens in a popup (#task-dialog); the row just carries the button or a
   "done" marker, so the triage screen stays uncluttered (Peter 2026-06-19) */
.call-actions .task-open { flex: 0 0 auto; }
.call-actions .task-made { flex: 1 1 100%; margin-top: 0.4rem; color: #2e7d32; font-size: 0.9em; }
#task-dialog article { overflow: visible; }   /* let the client-picker dropdown escape the dialog box */
#task-dialog .client-picker, #task-dialog .cp-search { width: 100%; }

/* Button groups — the height rule: buttons travel together and never split
   across a partial line. Used in call rows, bulk bars and contact rows. */
.btn-group { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
.btn-group > form.inline { margin: 0; }
.btn-group .small-button, .btn-group button { flex: 0 0 auto; min-width: 88px; margin: 0; text-align: center; }

/* Client-name columns truncate (recognisable from the first letters) so they never
   crowd out the controls. Full name shows on hover via the title attribute. */
/* 'save addr' tick on the emails allocate form — remembers address -> client at filing time */
.remember-tick { flex: 0 0 auto; white-space: nowrap; font-size: 0.85em; margin: 0; display: inline-flex; align-items: center; gap: 0.25rem; }
.remember-tick input[type="checkbox"] { margin: 0; }

.client-name-cell {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ext-input {
  width: 70px;
  margin: 0;
  padding: 0.25rem 0.5rem;
}

/* Search-as-you-type list filter (Clients, Contacts) */
.table-filter { max-width: 360px; margin: 0 0 1rem; }

/* Collapsible "+ Add a contact" panel */
details.add-contact { margin: 0.5rem 0 1rem; }
details.add-contact > summary { cursor: pointer; font-weight: bold; padding: 0.3rem 0; }
.self-end { align-self: end; }

/* Contact edit: number rows (remove-checkbox + value on one line) */
.point-row { display: flex; gap: 0.5rem; align-items: center; }

/* Clients: inline type dropdown in the Edit reveal; action buttons share a row */
.type-select {
  display: inline-block;
  width: auto;
  min-width: 130px;
  margin: 0 0.4rem 0 0;
  padding: 0.25rem 0.5rem;
  vertical-align: middle;
}
.client-actions { white-space: nowrap; }
.client-actions form { display: inline; margin-right: 0.3rem; }

/* Mobile: tighten things up */
@media (max-width: 768px) {
  nav ul li { padding: 0.3rem; }
  main.container { padding: 0.5rem; }
}