:root {
  --blue: #0b5394;
  --blue-dark: #073763;
  --bg: #f4f6f8;
  --card: #ffffff;
  --border: #dde3e8;
  --text: #1f2933;
  --muted: #647485;
  --green: #1e8e3e;
  --red: #c5221f;
  --amber: #b25e00;
  --brand-green: #44aa00;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--blue); }
.topbar {
  background: var(--blue-dark);
  color: #fff;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 56px;
}
.topbar .brand { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 10px; justify-self: start; }
.brand-logo { height: 28px; width: auto; display: block; background: #fff; border-radius: 4px; padding: 2px 6px; }
.topbar nav { justify-self: center; }
.topbar nav a {
  color: #dce8f5;
  text-decoration: none;
  margin: 0 10px;
  font-size: 14px;
}
.topbar nav a:hover, .topbar nav a.active { color: #fff; text-decoration: underline; }
.topbar .user { font-size: 13px; color: #cfe0ef; justify-self: end; text-align: right; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 22px; margin: 0 0 18px; }
h2 { font-size: 17px; margin: 28px 0 10px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat { text-align: left; }
.stat .n { font-size: 20px; font-weight: 700; color: var(--blue-dark); }
.stat .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
/* Dashboard's "Remaining vs. schedule" count: red while hours are still
   owed (greater than zero), green once at or under the scheduled amount
   (zero or negative, i.e. on track or ahead). */
.stat .n.n-red { color: var(--red); }
.stat .n.n-green { color: var(--green); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
tr:hover td { background: #fafcfe; }
.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--blue-dark); }
.btn.secondary { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.btn.danger { background: #fff; color: var(--red); border: 1px solid var(--red); }
.btn.alt { background: #fff; color: var(--brand-green); border: 1px solid var(--brand-green); }
.btn.small { padding: 4px 10px; font-size: 12px; }
form.inline { display: inline; }
label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; margin-top: 12px; }
input[type=text], input[type=password], input[type=date], input[type=number], select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
}
input[readonly] { background: var(--bg); color: var(--muted); }

/* Day-of-week helper text shown under a date field (My Time and Reports:
   From, To). Left inset (border + input's own left padding) lines it up
   under the first character of the date typed into the box above it. */
.date-weekday {
  display: block;
  min-height: 15px;
  padding-left: 11px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}
/* Day-of-week for My Time's Log Time card specifically: shown as a large
   bold title centered at the top of the card instead of small text under
   the Date field. Same element id as the Date input's day-of-week used
   to use, so the existing generic JS (assets/app.js) keeps it updated
   live with no changes needed there. */
.log-time-weekday {
  display: block;
  min-height: 24px;
  margin-bottom: 14px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--blue-dark);
}
/* From/To on My Time and Reports (both pages' date fields share these
   ids): center the typed date and the day-of-week text under it, rather
   than the left-aligned default used elsewhere (e.g. the single Date
   field on My Time's Log Time card, which stays left-aligned). The ID
   selector outweighs .date-weekday's own padding-left, so this doesn't
   need to be reordered relative to it. */
#from, #to { text-align: center; }
#from-weekday, #to-weekday { padding-left: 0; text-align: center; }

/* "My time entries" on My Time: Hours/FTE/Difference sized to their
   content (width:1% is a standard trick to make a table column shrink
   to its narrowest possible width) rather than stretching, so Date and
   Project take the remaining room and the numeric columns stay compact
   and packed toward the right side of the table. FTE/Difference are
   centered (rather than right-aligned like Hours) so the header label
   sits centered over the Total row's value below it, since every other
   row in those two columns is blank. */
.tight-col { width: 1%; white-space: nowrap; }
.center { text-align: center; }
/* A little extra breathing room between Hours and FTE specifically
   (Difference sits right after FTE with the normal cell padding). */
.fte-col { padding-left: 22px; }
.actions { margin-top: 18px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; }
.flash.success { background: #e6f4ea; color: var(--green); }
.flash.error { background: #fce8e6; color: var(--red); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.active { background: #e6f4ea; color: var(--green); }
.badge.inactive { background: #f1f3f4; color: var(--muted); }
.login-wrap { max-width: 360px; margin: 80px auto; }
.login-wrap .card { text-align: left; }
.login-wrap h1 { text-align: center; }
.login-logo { display: block; height: 56px; width: auto; margin: 0 auto 18px; }
.center-card { max-width: 480px; margin-left: auto; margin-right: auto; }
.muted { color: var(--muted); font-size: 13px; }
/* Row gap (vertical, between wrapped lines) is deliberately smaller than
   column gap (horizontal, between items on the same line) — this is
   also what keeps the forced admin-view break below from opening up a
   big vertical gap (see .filters-break). */
.filters { display: flex; gap: 0 12px; align-items: end; flex-wrap: wrap; margin-bottom: 14px; }
.filters > div { min-width: 160px; }
/* Every label normally has margin-top:12px (its usual spacing from
   whatever's above it elsewhere on the site). Inside a wrapped second
   row of filters, that same 12px stacks on top of the row gap above,
   so it's trimmed down here for anything after the forced admin-view
   break — this only affects the second row; the first row's labels
   keep their normal spacing from the top of the card. */
.filters-break ~ div label { margin-top: 4px; }
/* Reports' Project filter: a <select> sizes itself to its widest OPTION,
   not just the one currently shown — so a single long engagement name
   in the list was enough to stretch this box wide and push Run
   report/Export onto their own line well before the row actually ran
   out of room. Giving the filter a small flex-basis (rather than
   letting its content dictate one) keeps it out of that wrap-line
   calculation, then flex-grow lets it actually render using whatever
   room is left on the line — wide when there's space, but without
   being the reason Run report/Export wrap early. It only grows up to
   max-width so it doesn't run edge-to-edge on very wide screens. */
.filters > div.project-filter { flex: 1 1 200px; max-width: 480px; }
.filters #project_id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Admin view of Reports has two extra filters (Staff, Position), which
   makes From/To/Staff/Position/Project/Run report/Export too crowded
   for one line. This forces Project (and Run report/Export after it)
   onto a deliberate second line, always — a zero-height, full-width
   flex item breaks the row wherever it sits, regardless of how much
   space is actually left. Non-admin view has no Staff/Position filters
   and never gets this element, so it's unaffected. */
.filters-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
.right { text-align: right; }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--blue);
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}
.link-btn:hover { color: var(--blue-dark); }

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 4px;
}
.label-row label { margin: 0; }

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  color: #fff;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  border: none;
  cursor: pointer;
  margin-left: 6px;
  padding: 0;
  vertical-align: middle;
}
.info-icon:hover { background: var(--blue); }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-header h3 { margin: 0; font-size: 17px; }
.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}
.modal-close:hover { color: var(--text); }