:root {
  color-scheme: light;
  --background: #f4f6f8;
  --surface: #fff;
  --text: #18212b;
  --muted: #667382;
  --border: #d9e0e7;
  --primary: #155eef;
  --primary-dark: #0d47bd;
  --danger: #b42318;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); line-height: 1.5; }
.container { width: min(1280px, calc(100% - 1rem)); margin: 1rem auto; }
h1 { margin: 0 0 1rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
h2 { margin-top: 2rem; }
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: .6rem; overflow: hidden; }
th, td { padding: .35rem .45rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; white-space: nowrap; }
th { background: #eef2f6; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
.timesheet-table { font-size: .84rem; }
.timesheet-scroll { max-height: calc(100vh - 9rem); overflow: auto; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); }
.timesheet-scroll table { border: 0; border-radius: 0; border-collapse: separate; border-spacing: 0; overflow: visible; }
.timesheet-scroll th { position: sticky; top: 0; z-index: 3; }
.timesheet-table input, .timesheet-table select { width: auto; min-width: 5rem; padding: .25rem .35rem; font-size: .82rem; }
.timesheet-table input[name=code] { width: 16rem; }
.timesheet-table textarea { width: 10rem; min-height: 1.7rem; padding: .25rem .35rem; font-size: .82rem; }
.timesheet-table button { padding: .28rem .55rem; font-size: .8rem; }
.timesheet-table .comment { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.weekday-row.day-light { background: #fafbfd; }
.weekday-row.day-dark { background: #edf1f5; }
.weekend-row.day-light { background: #fff5e7; }
.weekend-row.day-dark { background: #f7e5ca; }
.month-divider td { height: 2.15rem; padding: .45rem .6rem; background: #dfe7f1; color: #344054; border-top: .45rem solid var(--background); border-bottom: 1px solid #c5d0dc; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.entry-input-row:target, .timesheet-table tr.focus-day { background: #eaf1ff; }
.locked { color: var(--muted); font-size: .78rem; }
.toolbar { display: flex; gap: 1rem; }
.row-submit-form { display: none; }
.autocomplete-menu { position: absolute; z-index: 20; max-height: 16rem; overflow-y: auto; padding: .25rem; background: #fff; border: 1px solid #aebbc9; border-radius: .35rem; box-shadow: 0 .5rem 1.25rem rgb(15 23 42 / 18%); }
.autocomplete-menu[hidden] { display: none; }
.autocomplete-option { display: block; width: 100%; padding: .38rem .5rem; border: 0; border-radius: .25rem; background: transparent; color: var(--text); text-align: left; font-size: .84rem; font-weight: 500; }
.autocomplete-option:hover, .autocomplete-option:focus { background: #eaf1ff; color: var(--primary-dark); }
.autosave-status { display: inline-block; min-width: 4.7rem; color: var(--muted); font-size: .76rem; }
.new-row-status:empty { display: none; }
.autosave-status.saving { color: #7a5d00; }
.autosave-status.saved { color: #287a47; }
.autosave-status.error { color: var(--danger); font-weight: 600; }
.shortcut-toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; padding: .7rem .9rem; border: 1px solid #26384b; border-radius: .55rem; background: #18212b; color: #fff; box-shadow: 0 .75rem 2rem rgb(15 23 42 / 24%); opacity: 0; transform: translateY(.5rem); transition: opacity .18s ease, transform .18s ease; pointer-events: none; font-size: .86rem; font-weight: 650; }
.shortcut-toast.visible { opacity: 1; transform: translateY(0); }

form { max-width: 38rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: .6rem; }
form.same-day-entry { max-width: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; align-items: end; padding: .8rem; }
form.same-day-entry p { margin: 0; }
label { display: block; margin-bottom: .25rem; font-weight: 600; font-size: .9rem; }
input, select, textarea { width: 100%; padding: .55rem .65rem; border: 1px solid #b9c4d0; border-radius: .35rem; background: #fff; color: inherit; font: inherit; }
textarea { min-height: 2.5rem; resize: vertical; }
button { padding: .55rem .85rem; border: 0; border-radius: .35rem; background: var(--primary); color: #fff; cursor: pointer; font: inherit; font-weight: 600; }
button:hover { background: var(--primary-dark); }
form + form { margin-top: .75rem; }
.errorlist { margin: .25rem 0; padding-left: 1.2rem; color: var(--danger); font-size: .9rem; }

.auth-page { min-height: 100vh; background: #eaf0f5; }
.auth-page .container { width: 100%; min-height: 100vh; margin: 0; }
.auth-shell { display: grid; grid-template-columns: minmax(20rem, .85fr) minmax(28rem, 1.15fr); min-height: 100vh; }
.auth-intro { display: flex; align-items: flex-start; padding: clamp(2rem, 5vw, 5rem); overflow: hidden; color: #fff; background: linear-gradient(145deg, #0b2341 0%, #123d6a 58%, #155eef 145%); position: relative; }
.auth-intro::after { content: ""; position: absolute; right: -9rem; bottom: -11rem; width: 26rem; height: 26rem; border: 1px solid rgb(255 255 255 / 14%); border-radius: 50%; box-shadow: 0 0 0 4rem rgb(255 255 255 / 4%), 0 0 0 8rem rgb(255 255 255 / 3%); }
.auth-brand { display: inline-flex; align-items: center; gap: .75rem; width: fit-content; color: #fff; text-decoration: none; font-size: 1.1rem; font-weight: 750; letter-spacing: -.01em; position: relative; z-index: 1; }
.auth-brand:hover { color: #fff; }
.auth-brand-mark { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1px solid rgb(255 255 255 / 35%); border-radius: .7rem; background: rgb(255 255 255 / 12%); }
.auth-panel { display: grid; place-items: center; padding: 2rem; }
.auth-card { width: min(100%, 27rem); padding: clamp(1.5rem, 4vw, 2.6rem); border: 1px solid rgb(15 35 60 / 8%); border-radius: 1rem; background: rgb(255 255 255 / 92%); box-shadow: 0 1.5rem 4rem rgb(15 35 60 / 11%); }
.auth-card-heading { margin-bottom: 1.6rem; }
.auth-card-heading h1 { margin: 0; font-size: 1.65rem; line-height: 1.2; letter-spacing: -.025em; }
.auth-form, .google-login-form { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.auth-form { display: grid; gap: 1rem; }
.auth-field label { margin-bottom: .4rem; color: #26384b; font-size: .84rem; }
.auth-field input { min-height: 2.85rem; border-color: #c8d3df; border-radius: .55rem; background: #fff; transition: border-color .15s, box-shadow .15s; }
.auth-field input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(21 94 239 / 13%); }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.auth-label-row a { font-size: .78rem; text-decoration: none; }
.auth-remember { display: flex; align-items: center; gap: .55rem; width: fit-content; margin: -.1rem 0 0; color: var(--muted); cursor: pointer; font-size: .83rem; font-weight: 500; }
.auth-remember input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--primary); }
.auth-submit, .google-login-button { display: flex; width: 100%; min-height: 2.9rem; align-items: center; justify-content: center; border-radius: .55rem; }
.auth-submit { margin-top: .15rem; box-shadow: 0 .4rem 1rem rgb(21 94 239 / 18%); }
.google-login-button { gap: .7rem; border: 1px solid #c8d3df; background: #fff; color: #26384b; box-shadow: 0 1px 2px rgb(15 35 60 / 5%); }
.google-login-button:hover { border-color: #9eafc1; background: #f8fafc; color: #152638; }
.google-mark { display: grid; width: 1.3rem; height: 1.3rem; place-items: center; border-radius: 50%; color: #1a73e8; font-size: 1rem; font-weight: 800; }
.auth-divider { display: flex; align-items: center; gap: .8rem; margin: 1.25rem 0; color: #8190a0; font-size: .74rem; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: #dce3ea; }
.auth-divider span { white-space: nowrap; }
.auth-errors, .auth-messages { margin: 0 0 1rem; padding: .7rem .8rem; border-radius: .5rem; background: #fff1f0; color: var(--danger); font-size: .84rem; }
.auth-messages p { margin: 0; }
.auth-errors .errorlist { margin: 0; padding-left: 1rem; }

.invoice-header p { color: var(--muted); }
.invoice-summary-table { max-width: 36rem; }
.invoice-summary-table th:last-child, .invoice-summary-table td:last-child { text-align: right; }
.invoice-details { margin-top: 2rem; }
.invoice-actions { display: flex; gap: .75rem; margin-top: 1.5rem; }
.invoice-actions form { margin: 0; padding: 0; border: 0; background: transparent; }

@media print {
  body { background: #fff; }
  .container { width: 100%; margin: 0; }
  .invoice-summary { break-after: page; page-break-after: always; }
  .invoice-actions { display: none; }
}

@media (max-width: 800px) {
  .container { width: min(100% - 1rem, 1180px); margin: 1rem auto; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  form.same-day-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-intro { min-height: 8rem; padding: 1.5rem; }
  .auth-panel { padding: 1.25rem; }
}

@media (max-width: 480px) {
  form.same-day-entry { grid-template-columns: 1fr; }
}