/* ==========================================================================
   LH.legal – theme, matched by eye to the screenshot of www.lh.legal.
   All colours and fonts are in this block. For exact values, replace the hex
   codes (a browser colour picker on the website gives them).
   ========================================================================== */
:root {
  --brand: #007a78;        /* teal: sidebar, headings, links */
  --brand-dark: #005c5a;   /* hover / darker areas */
  --accent: #cfae52;       /* gold: buttons, highlights */
  --accent-dark: #b9953a;
  --bg: #f4f8f8;           /* page background */
  --surface: #ffffff;      /* panels */
  --ink: #17413f;          /* body text (dark teal, as on the website) */
  --muted: #6c7c7b;
  --line: #d8e4e3;
  --ok: #2e7d4f;
  --warn: #9a6200;
  --bad: #b3261e;
  --radius: 16px;

  /* The website uses a Lora-like serif for headings and a Mulish-like sans for text.
     If those fonts are installed on the computer they are used, otherwise the
     fallbacks apply. See README ("Fonts") to add them to the program. */
  --font-body: "Mulish", "Muli", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Lora", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.55; }
h1, h2 { font-family: var(--font-head); font-weight: 500; color: var(--brand); line-height: 1.2; }
h1 { font-size: 1.9rem; margin: 0; }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 3px solid var(--brand-dark); outline-offset: 2px; }
.side :focus-visible { outline-color: #fff; }

.shell { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; padding: 2rem 2.5rem; max-width: 1200px; }
.auth { background: var(--surface); }
.auth .main { max-width: none; display: flex; justify-content: center; align-items: center; padding: 1rem; }

/* Wordmark: "LH" + gold dot + "legal" */
.wordmark { font-family: var(--font-head); font-weight: 400; font-size: 1.7rem; letter-spacing: .01em; }
.wordmark .dot { color: var(--accent); }

/* Sidebar */
.side { width: 230px; flex-shrink: 0; background: var(--brand); color: #fff; display: flex; flex-direction: column; padding: 1.5rem 1rem; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
.brand { color: #fff; text-decoration: none; margin: 0 0 2rem .5rem; }
.brand:hover { color: #fff; }
.nav { display: flex; flex-direction: column; gap: .15rem; }
.nav a { color: #e8f4f3; text-decoration: none; padding: .55rem .85rem; border-radius: 999px; }
.nav a:hover { background: var(--brand-dark); color: #fff; }
.side-foot { margin-top: auto; font-size: .9rem; }
.who { margin: 0 0 .75rem .5rem; }
.muted-on-dark { color: #b6dbd9; font-size: .85rem; }
.lang { display: flex; gap: .35rem; margin: 0 0 .75rem .5rem; }
.lang button { background: transparent; color: #e8f4f3; border: 1px solid #5fb0ae; border-radius: 999px; padding: .2rem .6rem; cursor: pointer; font: inherit; font-size: .8rem; }
.lang button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.side form:last-child { margin-left: .5rem; }
.linklike { background: none; border: 0; color: #e8f4f3; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; }

/* Page structure */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.head-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ref { margin: 0 0 .25rem; color: var(--muted); font-size: .9rem; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.panel.highlight { border-left: 5px solid var(--accent); }
.empty, .muted { color: var(--muted); }
.pre { white-space: pre-wrap; }

/* Buttons: pill shaped, gold call to action as on the website */
.btn { display: inline-block; padding: .55rem 1.3rem; border: 1px solid var(--brand); border-radius: 999px; background: transparent; color: var(--brand); text-decoration: none; font: inherit; cursor: pointer; }
.btn:hover { background: var(--brand); color: #fff; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--ink); }

/* Tables */
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel .table { border: 0; border-radius: 0; }
.table th, .table td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-weight: 600; color: var(--muted); font-size: .85rem; background: #f7fbfb; }
.table tr:last-child td { border-bottom: 0; }
.overdue { color: var(--bad); font-weight: 700; }
.badge { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; background: #e6eeee; color: var(--ink); white-space: nowrap; }
.badge.s-open { background: #dff0e6; color: var(--ok); }
.badge.s-waiting { background: #fbefd5; color: var(--warn); }
.badge.s-closed { background: #e6eeee; color: var(--muted); }
.badge.ready { background: #f6ecd0; color: #7a5f1c; }
.badge.confidential { background: #f3dcdc; color: var(--bad); }

/* Facts list */
.facts { display: grid; grid-template-columns: 14rem 1fr; gap: .5rem 1.5rem; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* Forms */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filters .check { display: flex; align-items: center; gap: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: .55rem .8rem; border: 1px solid #bcd0cf; border-radius: 10px; font: inherit; background: #fff; color: var(--ink);
}
.filters input[type=search] { width: 18rem; max-width: 100%; }
.filters select { width: auto; }
.form { max-width: 640px; }
.field { margin-bottom: 1rem; }
.field[hidden] { display: none; }
.field label { display: block; font-weight: 600; margin-bottom: .25rem; }
.help { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--bad); }
.errorlist, .error { color: var(--bad); list-style: none; padding: 0; margin: .25rem 0 0; font-size: .9rem; }
.actions { display: flex; gap: .5rem; margin-top: 1.5rem; }
.field ul { list-style: none; margin: 0; padding: 0; }
.field ul label { display: flex; gap: .5rem; align-items: center; font-weight: 400; margin: 0 0 .25rem; }

/* Messages, pager, login */
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.msg { padding: .65rem 1rem; border-radius: 10px; background: #dff0e6; color: var(--ok); margin-bottom: .5rem; }
.msg.error { background: #f8dedc; color: var(--bad); }
.pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.login { width: 100%; max-width: 400px; padding: 2rem; }
.login .wordmark { display: block; font-size: 2.2rem; color: var(--muted); margin: 0 0 1.75rem; }
.login .dot-mark { display: block; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); margin-bottom: 1rem; }
.login h1 { margin-bottom: 1.25rem; }
.login .btn { width: 100%; }

/* Small screens: menu on top */
@media (max-width: 800px) {
  .shell { flex-direction: column; }
  .side { position: static; height: auto; align-self: auto; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1rem; }
  .brand { margin: 0; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .side-foot { margin: 0 0 0 auto; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
  .who { display: none; }
  .lang { margin: 0; }
  .main { padding: 1.25rem 1rem; }
  .facts { grid-template-columns: 1fr; gap: .1rem; }
  .facts dd { margin-bottom: .6rem; }
  .table { display: block; overflow-x: auto; }
}

/* Invoices and client account */
.form.wide { max-width: none; }
.lines td { padding: .4rem; }
.lines input, .lines select { min-width: 5rem; }
.lines td:first-child { min-width: 16rem; }
.amount { text-align: right; white-space: nowrap; }
.big-number { font-family: var(--font-head); font-size: 2.2rem; color: var(--brand); margin: 0; }
.voided td { color: var(--muted); text-decoration: line-through; }
.voided td:last-child { text-decoration: none; }
.badge.s-draft { background: #e6eeee; color: var(--muted); }
.badge.s-unpaid, .badge.s-partial { background: #fbefd5; color: var(--warn); }
.badge.s-paid { background: #dff0e6; color: var(--ok); }
.badge.s-overdue { background: #f3dcdc; color: var(--bad); }
.badge.s-credit { background: #e3eef6; color: #245a7c; }
.totals { margin-left: auto; width: 100%; max-width: 26rem; border-collapse: collapse; }
.totals td { padding: .3rem 0; }
.totals td:last-child { text-align: right; white-space: nowrap; }
.totals tr.grand td { border-top: 2px solid var(--brand); font-weight: 700; font-size: 1.1rem; padding-top: .5rem; }
details summary { cursor: pointer; color: var(--brand); }

/* Deadline colours: red = less than a week, orange = up to two weeks, yellow = later */
.badge.dl-red { background: #c8372d; color: #fff; }
.badge.dl-orange { background: #f0a030; color: #3a2500; }
.badge.dl-yellow { background: #f6e27a; color: #4a3d00; }
a.badge { text-decoration: none; }
a.badge:hover { filter: brightness(.95); }

/* Phone: dial code + number */
.phone-row { display: flex; gap: .5rem; }
.phone-row select { width: 11rem; flex: none; }

/* Package and quote status */
.badge.pk-none { background: #e6eeee; color: var(--muted); }
.badge.pk-offered, .badge.q-sent { background: #fbefd5; color: var(--warn); }
.badge.pk-accepted, .badge.q-accepted { background: #dff0e6; color: var(--ok); }
.badge.pk-declined, .badge.q-declined { background: #f3dcdc; color: var(--bad); }
.badge.q-draft { background: #e6eeee; color: var(--muted); }

/* Time counter */
.timer-box { margin: 1.25rem 0 0 .5rem; padding: .75rem; border: 1px solid var(--accent); border-radius: 12px; font-size: .9rem; }
.timer-box a { color: #fff; }
.timer-label { margin: 0; color: var(--accent); font-weight: 700; }
.timer-time { margin: .15rem 0 .5rem; font-size: 1.15rem; font-weight: 700; }
.btn.small { padding: .25rem .9rem; font-size: .85rem; background: var(--accent); border-color: var(--accent); color: var(--ink); }
.timer-running { background: #fbf4df; border-left: 5px solid var(--accent); border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.stop-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.stop-form input[type=text] { flex: 1; min-width: 14rem; }
.stop-form .check { display: flex; align-items: center; gap: .3rem; }

/* Client search field */
.client-picker { position: relative; }
.client-picker-results { position: absolute; z-index: 30; left: 0; right: 0; margin: .2rem 0 0; padding: .25rem; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); max-height: 18rem; overflow: auto; }
.client-picker-results[hidden] { display: none; }
.client-picker-results li { padding: .45rem .7rem; border-radius: 8px; cursor: pointer; }
.client-picker-results li:hover, .client-picker-results li:focus { background: #e8f3f3; outline: none; }
.client-picker-none { color: var(--muted); cursor: default; }
.contact-row td { background: #fafcfc; }

/* Catalogue: one block per language */
.lang-block { border: 1px solid var(--line); border-radius: 12px; padding: .5rem 1rem 0; margin: 0 0 1rem; background: #fff; }
.lang-block legend { padding: 0 .4rem; font-weight: 700; color: var(--brand); }
.badge.lang-badge { background: #e3eef6; color: #245a7c; font-size: .7rem; padding: 0 .4rem; }

/* To-dos: grey = new today, orange = after the first working day, red = after the second */
.badge.td-ok { background: #e3eef6; color: #245a7c; }
.badge.td-orange { background: #f0a030; color: #3a2500; }
.badge.td-red { background: #c8372d; color: #fff; }
.badge.msg-dot { background: var(--accent); color: var(--ink); }
.nav a .badge { margin-left: .25rem; font-size: .75rem; }
.panel.highlight-orange { border-left: 5px solid #f0a030; }
.panel.highlight-red { border-left: 5px solid #c8372d; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.message-list { list-style: none; margin: 0; padding: 0; }
.message-list li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.small-btn { padding: .2rem .8rem; font-size: .85rem; }
.timeline { list-style: none; margin: 0 0 1rem; padding: 0; }
.timeline li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.timeline .when { color: var(--muted); font-size: .85rem; margin-right: .5rem; }
.done-form { margin-top: 1rem; }
.done-form input[type=text] { flex: 1; min-width: 14rem; }

/* Notes */
.note-form textarea { width: 100%; padding: .6rem .8rem; border: 1px solid #bcd0cf; border-radius: 10px; font: inherit; }
.note-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 1rem; }
.note-row .check { display: flex; align-items: center; gap: .4rem; }
.note-row select { width: auto; }
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { padding: .75rem 0; border-top: 1px solid var(--line); }
.note-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .25rem; }
.note-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .35rem; font-size: .9rem; }
.note-actions .badge a { color: inherit; }

.badge.td-yellow { background: #f6e27a; color: #4a3d00; }
.inline-form { display: inline-flex; gap: .5rem; align-items: center; margin-left: 1rem; }
.inline-form input[type=date] { width: auto; padding: .25rem .5rem; }