@font-face{
  font-family:'Crimson Pro';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('/fonts/CrimsonPro-Variable.woff2') format('woff2');
}
@font-face{
  font-family:'Crimson Pro';
  font-style:italic;
  font-weight:200 900;
  font-display:swap;
  src:url('/fonts/CrimsonPro-Italic-Variable.woff2') format('woff2');
}

:root{
  --ink:#0F2D4A;
  --ink-soft:#4B5563;
  --ink-faint:#8b93a0;
  --paper:#F7F4EC;
  --paper-warm:#fcfaf4;
  --panel:#ffffff;
  --ledger-line:#e6ddc8;
  --border-input:#C8BFA6;

  --accent:#556B2F;
  --accent-light:#e1e8c7;
  --accent-deep:#3e4e22;

  --red:#9c3b2e;
  --red-bg:#f5e2de;
  --green:#556B2F;
  --gold:#8c7a4e;
  --gold-bg:#f3eedf;

  --shadow-sm:0 2px 6px rgba(15,45,74,0.07), 0 1px 2px rgba(15,45,74,0.05);
  --shadow-md:0 10px 22px rgba(15,45,74,0.09), 0 2px 6px rgba(15,45,74,0.06);
  --shadow-lg:0 20px 44px rgba(15,45,74,0.14), 0 4px 12px rgba(15,45,74,0.08);

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;

  --serif:'Crimson Pro',Georgia,'Iowan Old Style','Times New Roman',serif;
  --mono:'Cascadia Code','SF Mono',Consolas,'Courier New',monospace;
}

*{box-sizing:border-box;}
::selection{background:var(--accent-light);color:var(--ink);}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#ecdfc7;border-radius:8px;border:3px solid var(--paper);}
::-webkit-scrollbar-thumb:hover{background:var(--accent-light);}

body{
  margin:0;
  background:
    radial-gradient(1100px 420px at 12% -8%, rgba(85,107,47,0.07), transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1040px; margin:0 auto; padding:32px 24px 60px;}

h1{font-weight:600; font-size:1.9rem; margin:0 0 20px; letter-spacing:-0.01em;}
h2{font-weight:600; font-size:1.3rem; margin:28px 0 12px; letter-spacing:-0.01em;}

a{color:var(--accent-deep);}
a:hover{color:var(--accent);}

/* ---- Top nav ---- */
.topnav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 28px; gap:20px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--ink) 0%, #17395c 100%);
  color:#fff; box-shadow:var(--shadow-md);
  border-bottom:3px solid var(--accent);
}
.topnav .brand{
  display:flex; align-items:center; gap:14px; font-weight:600; font-size:1.2rem;
  letter-spacing:-0.01em; color:#fff; text-decoration:none; flex-shrink:0;
}
.topnav .brand img{height:56px; width:56px; display:block; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm);}
.topnav .brand-text{display:flex; flex-direction:column; gap:1px; line-height:1.15;}
.topnav .brand-name{font-size:1.3rem;}
.topnav .brand-tagline{
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:0.72rem;
  letter-spacing:0.03em; color:rgba(255,255,255,0.62); white-space:nowrap;
}
@media (max-width: 700px){
  .topnav .brand-tagline{display:none;}
}

.topnav .tabs{
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  border-radius:999px; padding:4px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.12);
}
.topnav .tab-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:999px;
  color:rgba(255,255,255,0.78); text-decoration:none;
  font-size:0.85rem; font-weight:600; letter-spacing:0.01em;
  transition:background 0.15s ease, color 0.15s ease;
}
.topnav .tab-btn svg{width:16px; height:16px; flex-shrink:0;}
.topnav .tab-btn:hover{color:#fff; background:rgba(255,255,255,0.1);}
.topnav .tab-btn.active{background:var(--accent); color:#fff; box-shadow:var(--shadow-sm);}

.topnav .nav-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.topnav .icon-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; margin:0; border-radius:50%;
  color:rgba(255,255,255,0.78); background:none; border:none; cursor:pointer;
  box-shadow:none; transform:none;
  transition:background 0.15s ease, color 0.15s ease;
}
.topnav .icon-link svg{width:18px; height:18px;}
.topnav .icon-link:hover, .topnav .icon-link.active{color:#fff; background:rgba(255,255,255,0.12); box-shadow:none; transform:none;}
.topnav .icon-link:active{transform:none; box-shadow:none;}
.topnav .nav-user{color:rgba(255,255,255,0.65); font-size:0.82rem;}
.topnav .nav-user em{font-style:italic;}

@media (max-width: 900px){
  .topnav .tab-btn span{display:none;}
  .topnav .tab-btn{padding:9px 11px;}
}

.banner{
  padding:10px 28px; background:var(--gold-bg); color:var(--gold);
  display:flex; align-items:center; gap:14px; font-size:0.92rem;
  border-bottom:1px solid var(--border-input);
}
.banner strong{color:var(--ink);}
.banner .link-button{color:var(--gold); font-weight:600;}

/* ---- Flash messages ---- */
.flash{padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:18px; box-shadow:var(--shadow-sm);}
.flash-success{background:var(--accent-light); color:var(--accent-deep);}
.flash-error{background:var(--red-bg); color:var(--red);}
.flash-warning{background:var(--gold-bg); color:var(--gold);}
.flash-warning a{color:var(--gold); font-weight:600;}
.flash p{margin:4px 0;}

/* ---- Tables (reserved for genuinely data-dense grids: hours, timestamps, reports —
   record lists use .list-rows below instead, which reads less like a spreadsheet) ---- */
table{width:100%; border-collapse:collapse; background:var(--panel); margin-top:14px; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--ledger-line);}
th, td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--ledger-line); font-size:0.95rem;}
th{background:var(--gold-bg); color:var(--accent-deep); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.03em;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--paper-warm);}

/* ---- Expandable table rows: click a row to reveal a detail row right beneath it (fetched
   on demand), instead of navigating to a separate page. ---- */
.expandable-row{cursor:pointer;}
.expand-caret{display:inline-block; transition:transform 0.15s ease; color:var(--accent-deep);}
.expandable-row.expanded .expand-caret{transform:rotate(90deg);}
.expand-detail{display:none;}
.expand-detail.open{display:table-row;}
.expand-detail td{background:var(--paper-warm); padding:16px 22px;}
.expand-detail-content table{margin-top:0; box-shadow:none;}
.expand-detail-total{margin:12px 0 0;}

/* ---- List rows: warm, card-based alternative to <table> for "records + actions" lists
   (Employees, Jobs, Companies, Accountants, Timecards) — same visual language as the
   dashboard tiles (soft shadow, rounded corners, hover lift) rather than a dense grid. ---- */
.list-rows{display:flex; flex-direction:column; gap:12px; margin-top:20px;}
.list-row{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--ledger-line); border-radius:var(--radius-md);
  padding:16px 22px; box-shadow:var(--shadow-sm);
  transition:box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.list-row:hover{box-shadow:var(--shadow-md); border-color:var(--accent-light); transform:translateY(-1px);}
a.list-row{text-decoration:none; color:inherit;}
.list-row[data-href]{cursor:pointer;}
.list-row-icon{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-light); color:var(--accent-deep); flex-shrink:0;
}
.list-row-icon svg{width:21px; height:21px;}
.list-row-main{flex:1 1 200px; min-width:160px;}
.list-row-title{font-weight:600; font-size:1.05rem; color:var(--ink);}
.list-row-meta{font-size:0.85rem; color:var(--ink-soft); margin-top:2px;}
.list-row-badge{
  display:inline-block; padding:4px 12px; border-radius:999px; font-size:0.75rem; font-weight:600;
  letter-spacing:0.02em; flex-shrink:0;
}
.list-row-badge.active{background:var(--accent-light); color:var(--accent-deep);}
.list-row-badge.inactive{background:var(--red-bg); color:var(--red);}
.list-row-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex-shrink:0;}
.list-row-actions a, .list-row-actions .link-button{
  display:inline-flex; align-items:center; padding:7px 14px; border-radius:999px;
  background:var(--paper-warm); border:1px solid var(--border-input);
  color:var(--accent-deep); text-decoration:none; font-size:0.82rem; font-weight:600;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.list-row-actions a:hover, .list-row-actions .link-button:hover{background:var(--accent-light); border-color:var(--accent); color:var(--accent-deep);}
.list-row-empty{color:var(--ink-soft); font-style:italic; padding:20px 0;}

/* ---- Forms ---- */
.form{
  display:flex; flex-direction:column; gap:14px; max-width:480px;
  background:var(--panel); padding:24px; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); border:1px solid var(--ledger-line);
}
/* Wider variant for the two create-employer-login forms, which embed the permission pill grid —
   480px only fits 2 columns, forcing 3-pill rows to wrap and the boxes to grow tall. */
.form.form-wide{max-width:760px;}
.form label{display:flex; flex-direction:column; gap:5px; font-size:0.88rem; color:var(--ink-soft); font-weight:600;}
.form label.checkbox-label-inline{
  flex-direction:row; align-items:center; gap:8px; font-weight:500; color:var(--ink);
}
.form label.checkbox-label-inline input[type="checkbox"]{width:16px; height:16px; accent-color:var(--accent); flex:none;}
.form input, .form select, .form textarea,
select, input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number]{
  padding:9px 12px; border:1px solid var(--border-input); border-radius:var(--radius-sm);
  font:inherit; font-size:0.95rem; background:var(--paper-warm); color:var(--ink);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
select:focus, input:focus, textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(85,107,47,0.18);
}
select:hover, input:hover, textarea:hover{border-color:var(--ink-faint);}
.form textarea{min-height:80px; resize:vertical;}
/* ---- Grouped employer-login permission pills: 7 categories (Employer logins, Accountants,
   Employee Contact, Employee Pay, Jobs, Time entries, Timecards), each its own card. Each
   permission is a pill-shaped toggle button (checkbox visually hidden, its sibling <span> styled
   as the button) rather than a checkbox+label row — compact, touch-friendly, and lines up evenly
   regardless of label length, which matters since this also has to work well on mobile. ---- */
.permission-groups{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; align-items:flex-start;}
.permission-group{
  flex:1 1 200px; padding:10px 14px; border:1px solid var(--border-input); border-radius:var(--radius-md); background:var(--paper-warm);
}
.permission-group-title{font-weight:600; color:var(--ink); margin-bottom:6px; font-size:0.92rem;}
.permission-groups .pill-toggle-group{display:flex; flex-wrap:wrap; gap:8px;}
/* Scoped under .permission-groups so these win over the generic `.form label` (flex-column) and
   `.settings-edit-form input` (min-width:180px) rules that would otherwise leak in and break the
   pill layout — these pills live inside both a plain .form (create pages) and a .settings-edit-form
   (Manage Settings edit rows), and both ancestors style bare <label>/<input> descendants generically. */
.permission-groups .pill-toggle{position:relative; display:inline-flex; flex-direction:row; align-items:center; cursor:pointer;}
.permission-groups .pill-toggle input{
  position:absolute; opacity:0; width:1px; height:1px; min-width:0; margin:0; padding:0; border:none; flex:none;
}
.permission-groups .pill-toggle span{
  display:inline-block; padding:7px 16px; border-radius:999px; border:1px solid var(--border-input);
  background:var(--panel); color:var(--ink-soft); font-size:0.85rem; font-weight:600; line-height:1;
  user-select:none; transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.permission-groups .pill-toggle:hover span{border-color:var(--ink-faint);}
.permission-groups .pill-toggle input:checked + span{background:var(--accent); border-color:var(--accent); color:#fff;}
.permission-groups .pill-toggle input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.permission-chip{
  display:inline-block; padding:7px 16px; border-radius:999px; background:var(--accent); color:#fff;
  font-size:0.85rem; font-weight:600; line-height:1;
}
.permission-chip.muted{background:var(--panel); color:var(--ink-faint); border:1px solid var(--border-input);}

/* ---- Employee Notes & Activity feed: auto-generated audit entries mixed with the employer's
   own free-text notes, newest first. Auto entries read lighter/italic so the eye can quickly
   separate "the system logged this" from "a person wrote this." ---- */
.notes-list{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.note-entry{
  padding:12px 18px; border-radius:var(--radius-md); border:1px solid var(--ledger-line);
  background:var(--panel); box-shadow:var(--shadow-sm);
}
.note-entry.auto{background:var(--paper-warm); font-style:italic; color:var(--ink-soft);}
.note-entry.manual{background:var(--panel); color:var(--ink);}
.note-meta{font-size:0.78rem; color:var(--ink-faint); margin-bottom:4px; font-style:normal;}
.note-badge{
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:0.7rem; font-weight:600;
  letter-spacing:0.02em; margin-right:6px; text-transform:uppercase;
}
.note-badge.auto{background:var(--gold-bg); color:var(--gold);}
.note-badge.manual{background:var(--accent-light); color:var(--accent-deep);}
.note-body{white-space:pre-wrap;}

button, .form button{
  align-self:flex-start; padding:10px 22px; background:var(--accent); color:#fff;
  border:1px solid var(--accent); border-radius:999px; cursor:pointer; font:inherit;
  font-weight:600; font-size:0.92rem; box-shadow:var(--shadow-sm);
  transition:background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
button:hover{background:var(--accent-deep); border-color:var(--accent-deep); box-shadow:var(--shadow-md); transform:translateY(-1px);}
button:active{transform:translateY(0); box-shadow:var(--shadow-sm);}

.form-inline{display:flex; align-items:end; gap:14px; flex-wrap:wrap; margin-top:14px;}
.form-inline label{display:flex; flex-direction:column; gap:5px; font-size:0.85rem; color:var(--ink-soft); font-weight:600;}
.form-inline input, .form-inline select{padding:8px 10px;}
.form-inline button{padding:9px 18px;}

.inline-form{display:inline; margin-left:10px;}
.link-button{background:none; border:none; color:var(--accent-deep); cursor:pointer; text-decoration:underline; font:inherit; padding:0; font-weight:600;}
.link-button:hover{color:var(--accent);}

.hint{font-size:0.85em; color:var(--ink-faint); font-style:italic;}

/* ---- Read-only "settings" pages (Manage Employer/Accountant Settings) — each field is
   display-only with its own Edit link, so glancing at the page can never accidentally change
   or clear a value; only one field at a time becomes an editable form. ---- */
.settings-rows{display:flex; flex-direction:column; gap:10px; margin-top:20px;}

/* Two-column settings layout (currently just Manage Employer Settings): fields on the left at
   half width, a Notes & Activity feed on the right so both are visible without scrolling past
   one another. Stacks to a single column on narrow viewports. */
.settings-page-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; margin-top:12px;}
.settings-page-grid .settings-rows{margin-top:0;}
.settings-page-grid h2{margin-top:0;}
@media (max-width:800px){.settings-page-grid{grid-template-columns:1fr;}}
.settings-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--ledger-line); border-radius:var(--radius-md);
  padding:14px 20px; box-shadow:var(--shadow-sm);
}
.settings-label{font-weight:600; font-size:0.85rem; color:var(--ink-soft); min-width:140px; flex-shrink:0;}
.settings-value{flex:1; color:var(--ink); font-size:0.98rem;}
.settings-edit-link{flex-shrink:0; font-weight:600; font-size:0.85rem;}
.settings-edit-form{display:flex; align-items:center; gap:10px; flex:1; flex-wrap:wrap;}
.settings-edit-form input, .settings-edit-form select{padding:8px 10px; flex:1; min-width:180px;}
.settings-edit-form button{padding:8px 16px; font-size:0.85rem;}

/* Permissions panel (Manage Users right column) holds a full grid of checkbox groups, not a
   single inline value — stack pills/Save/Cancel vertically instead of the usual single-line row. */
.permissions-form{flex-direction:column; align-items:stretch; gap:12px;}
.permissions-form > button, .permissions-form > a{align-self:flex-start;}

/* ---- Dashboard tiles ---- */
.dashboard-intro{color:var(--ink-soft); margin:-8px 0 4px;}
.dashboard-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:18px; margin-top:20px;}
.dashboard-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  background:var(--panel); border:1px solid var(--ledger-line); border-radius:var(--radius-lg);
  padding:24px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dashboard-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--accent); color:var(--ink);}
.dashboard-icon{
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--accent-light); color:var(--accent-deep); flex-shrink:0;
}
.dashboard-icon svg{width:25px; height:25px;}
.dashboard-card-label{font-weight:600; font-size:1.08rem;}
.dashboard-card-desc{font-size:0.85rem; color:var(--ink-soft); margin:0; line-height:1.4;}

.dashboard-card[data-accent="navy"] .dashboard-icon{background:#e1e8f0; color:var(--ink);}
.dashboard-card[data-accent="gold"] .dashboard-icon{background:var(--gold-bg); color:var(--gold);}
.dashboard-card[data-accent="rust"] .dashboard-icon{background:var(--red-bg); color:var(--red);}

/* A dashboard tile that's really a POST action (e.g. "enter management mode") — the <form>
   itself is display:contents so it drops out of layout and the <button> becomes the actual
   grid/flex item, styled identically to the <a> tiles. */
.dashboard-grid form{display:contents;}
button.dashboard-card{width:100%; text-align:left; cursor:pointer; font:inherit; box-shadow:var(--shadow-sm); margin:0;}
/* Overrides the generic button:hover (background/shadow/lift) so this reuses the same subtle
   lift-and-shadow hover as the <a>-based tiles instead of turning solid green like a normal button. */
button.dashboard-card:hover{background:var(--panel); box-shadow:var(--shadow-lg); transform:translateY(-3px);}

/* ---- Login page ---- */
.login-wrap{display:flex; flex-direction:column; align-items:center; padding-top:40px;}
.login-wrap .brand-header{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:8px;}
.login-wrap .brand-header img{height:96px; width:96px;}
.login-wrap .brand-header h1{margin:0;}
.login-wrap .tagline{color:var(--ink-soft); font-style:italic; font-size:0.95rem; letter-spacing:0.02em; margin:0 0 24px;}
.login-wrap .form{width:100%; max-width:360px;}