:root {
  color-scheme:light;
  --page:#fff5e5;
  --surface:#fffaf2;
  --ink:#402c23;
  --muted:#745e4e;
  --coffee:#704b38;
  --deep:#513727;
  --line:#e6d5bc;
  --gold:#edbd76;
  --sand:#f0dfc8;
  --accent:#815335;
  --shadow:0 2px 5px #573c1c0a;
  --side:228px;
  font-family:"DM Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--page);
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input,select,textarea {
  font:inherit;
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}
button,a {
  touch-action:manipulation;
}
button {
  cursor:pointer;
}
a {
  color:inherit;
  text-decoration:none;
}
button:disabled {
  cursor:not-allowed;
  opacity:.53;
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #d39229;
  outline-offset:3px;
}
svg.icon {
  height:18px;
  width:18px;
  flex-shrink:0;
  stroke-width:1.7;
  vertical-align:middle;
}
h1,h2,h3,p {
  margin:0;
}
.skip {
  position:fixed;
  left:12px;
  top:-120px;
  z-index:20;
  background:white;
  padding:12px 20px;
}
.skip:focus {
  top:12px;
}
.loading,.auth {
  padding:8vh 6vw;
}
.shell {
  min-height:100dvh;
  padding-left:var(--side);
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--side);
  display:flex;
  flex-direction:column;
  z-index:7;
  background:#fff0d9;
  border-right:1px solid var(--line);
  overflow-y:auto;
  color:#533b2e;
  padding:31px 17px 17px;
}
.brand {
  display:block;
  width:fit-content;
  margin:0 auto 30px;
}
.sol-logo {
  display:block;
  position:relative;
  width:82px;
  aspect-ratio:55/63;
  overflow:hidden;
}
.sol-logo img {
  position:absolute;
  width:181.82%;
  height:auto;
  left:-39.5%;
  top:-21%;
}

.nav-label {
  margin:0 13px 8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  color:#765e48;
  text-transform:uppercase;
}
.nav-group+.nav-group {
  margin-top:28px;
}
.nav-link {
  width:100%;
  border:0;
  background:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 13px;
  color:#593f2f;
  border-radius:8px;
  font-size:14px;
  font-weight:550;
  line-height:1.35;
  text-align:left;
  margin:2px 0;
}
.nav-link svg {
  width:17px;
  height:17px;
}
.nav-link:hover,.side-profile:hover {
  background:#f2dfbf;
}
.nav-link.active {
  background:#e8cda3;
  color:#4a301f;
}
.nav-link.active svg {
  color:#775232;
}
.nav-count {
  margin-left:auto;
  background:#e6bb64;
  color:#34280e;
  padding:1px 6px;
  border-radius:10px;
  font-size:11px;
  min-width:20px;
  text-align:center;
}
.side-bottom {
  margin-top:auto;
  padding-top:28px;
}
.demo-switch {
  width:100%;
  background:transparent;
  border:1px dashed #b79a76;
  border-radius:9px;
  color:#5d4936;
  padding:9px 10px;
  display:flex;
  align-items:center;
  text-align:left;
  gap:9px;
  font-size:12px;
}
.demo-switch strong,.side-profile strong {
  display:block;
}
.demo-switch small,.side-profile small {
  display:block;
  font-size:11px;
  font-weight:400;
  color:#725945;
  margin-top:3px;
}
.side-profile {
  display:flex;
  align-items:center;
  text-align:left;
  gap:10px;
  width:100%;
  background:none;
  border:0;
  border-top:1px solid #d9c2a4;
  margin-top:15px;
  padding:15px 3px 2px;
  color:var(--ink);
}
.side-profile .user-info {
  min-width:0;
  flex:1;
}
.side-profile strong {
  font-size:13px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}
.avatar {
  border-radius:50%;
  width:33px;
  height:33px;
  background:var(--sand);
  color:#614531;
  display:inline-grid;
  place-items:center;
  flex:none;
  line-height:1;
  font-size:12px;
  font-weight:750;
}
.avatar.a1 {
  background:#f7dfb6;
  color:#6c4716;
}
.avatar.a2 {
  background:#e6e0ed;
  color:#574567;
}
.avatar.a3 {
  background:#d9e7eb;
  color:#38545c;
}
.avatar.a4 {
  background:#f0ded4;
  color:#764d37;
}
.topbar {
  border-bottom:1px solid var(--line);
  height:65px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(20px,3.1vw,54px);
  gap:15px;
  background:var(--surface);
}
.crumb,.top-actions,.actions,.inline,.card-tools,.status,.search,.badge,.btn,.btn-icon,.card-title,.date-text {
  display:inline-flex;
  align-items:center;
}
.crumb {
  gap:12px;
  color:var(--muted);
  font-size:12px;
}
.crumb strong {
  color:var(--ink);
  font-weight:650;
}
.crumb .icon {
  width:13px;
  height:13px;
}
.top-actions {
  gap:14px;
}
.date-text {
  font-size:12px;
  color:var(--muted);
  gap:7px;
}
.date-text .icon {
  width:16px;
  height:16px;
}
.mobile-toggle,.scrim {
  display:none;
}
.page {
  max-width:1720px;
  margin:auto;
  padding:clamp(24px,3vw,45px) clamp(20px,3.1vw,54px) 44px;
}
.title-row {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}
h1 {
  font-size:clamp(29px,3.05vw,49px);
  line-height:1.12;
  letter-spacing:-.049em;
  font-weight:680;
}
h2 {
  font-size:21px;
  letter-spacing:-.035em;
  line-height:1.2;
  font-weight:650;
}
h3 {
  font-size:16px;
  letter-spacing:-.02em;
}
.sub {
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin-top:7px;
}
.actions,.card-tools {
  gap:9px;
  flex-wrap:wrap;
}
.btn,.btn-icon,.month-chooser,.search,select.control,input.control,textarea.control {
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  border-radius:8px;
}
.btn {
  justify-content:center;
  font-size:13px;
  font-weight:600;
  gap:8px;
  min-height:38px;
  padding:8px 13px;
  transition:background .15s ease;
}
.btn .icon {
  width:16px;
  height:16px;
}
.btn:hover,.btn-icon:hover {
  background:#f5e7d3;
}
.btn.primary {
  background:var(--coffee);
  color:white;
  border-color:var(--coffee);
}
.btn.primary:hover {
  background:#583925;
}
.btn.gold {
  background:var(--gold);
  color:#37270d;
  border-color:var(--gold);
}
.btn.danger {
  color:#893820;
  border-color:#e7c5bd;
}
.btn-icon {
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
}
.btn-icon.flat {
  border-color:transparent;
  background:transparent;
}
.btn-icon.flat:hover {
  background:#f5e7d3;
}
.period-picker {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--surface);
  padding:3px 9px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--muted);
}
.period-picker input {
  color:var(--ink);
  font-size:13px;
  border:0;
  background:transparent;
  min-height:30px;
  max-width:155px;
  font-weight:600;
}
.period-picker svg {
  width:15px;
  height:15px;
}
.metrics {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:15px;
  margin-bottom:22px;
}
.metric,.panel,.punch-card {
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.metric {
  padding:20px 21px;
  position:relative;
  min-height:170px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.metric.feature {
  background:var(--coffee);
  border-color:var(--coffee);
  color:#fff8df;
}
.metric-head {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:600;
}
.metric-icon {
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  background:#f3e5ce;
  border-radius:9px;
  color:var(--accent);
}
.metric-icon.sun {
  background:#f9e9c5;
  color:#855e1f;
}
.feature .metric-icon {
  background:#876047;
  color:#f8c776;
}
.metric strong.big {
  font-size:clamp(32px,3.2vw,50px);
  letter-spacing:-.055em;
  line-height:1.1;
  font-weight:620;
  display:block;
  margin-top:13px;
  font-variant-numeric:tabular-nums;
}
.unit {
  font-size:15px;
  letter-spacing:-.02em;
  font-weight:500;
  margin-left:5px;
}
.metric-foot {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  padding-top:12px;
  color:var(--muted);
  font-size:12px;
}
.feature .metric-foot {
  color:#f3dfc6;
}
.metric-foot.link {
  background:transparent;
  border:0;
  color:var(--accent);
  padding-left:0;
  font-weight:600;
}
.metric-foot .icon {
  width:13px;
  height:13px;
}
.feature-stat {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin-top:5px;
}
.spark-wrap {
  width:40%;
  max-width:148px;
  margin-left:auto;
}
.spark {
  height:49px;
  width:100%;
  display:block;
  fill:#bc9372;
}
.spark rect:last-of-type {
  fill:var(--gold);
}
.spark-label {
  font-size:9px;
  color:#f9e5ca;
  text-align:right;
  margin-top:5px;
}
.panel {
  overflow:hidden;
}
.panel+.panel,.punch-card+.panel {
  margin-top:18px;
}
.panel-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:20px 21px;
}
.panel-head .sub {
  font-size:12px;
  margin-top:4px;
}
.panel-head h2,.section-head h2 {
  display:flex;
  align-items:center;
  gap:9px;
}
.section-head {
  padding:20px 21px 10px;
}
.count {
  display:inline-grid;
  place-items:center;
  min-width:24px;
  padding:3px 7px;
  font-size:11px;
  border:1px solid #e7d8c0;
  border-radius:15px;
  background:#f9edda;
  color:#77583c;
  letter-spacing:0;
}
.toolbar {
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  padding:0 21px 16px;
  flex-wrap:wrap;
}
.tabs {
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px;
  border:1px solid #e5d5bf;
  background:#f6ead6;
  border-radius:8px;
}
.tab {
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  padding:6px 10px;
  color:var(--muted);
  font-size:12px;
  font-weight:550;
  white-space:nowrap;
}
.tab.selected {
  color:#61412a;
  background:var(--surface);
  border-color:#e3cba7;
  box-shadow:0 1px 3px #704b3810;
}
.search {
  min-height:33px;
  padding:0 9px;
  gap:6px;
  color:var(--muted);
}
.search .icon {
  width:14px;
  height:14px;
}
.search input {
  border:0;
  background:none;
  min-width:0;
  width:150px;
  font-size:12px;
  padding:7px 0;
  color:var(--ink);
}
.table-wrap {
  overflow-x:auto;
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
thead {
  background:#f9efdf;
}
th {
  font-weight:650;
  font-size:11px;
  letter-spacing:.012em;
  color:#735c49;
  white-space:nowrap;
  padding:11px 12px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
td {
  padding:13px 12px;
  border-bottom:1px solid #eee2cf;
  white-space:nowrap;
}
tr:last-child td {
  border-bottom:0;
}
th:first-child,td:first-child {
  padding-left:21px;
}
th:last-child,td:last-child {
  padding-right:21px;
}
.name-cell {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:620;
}
.name-cell small {
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:450;
  margin-top:4px;
}
.badge {
  font-size:11px;
  border-radius:20px;
  font-weight:600;
  gap:6px;
  background:#e4efdc;
  color:#315e39;
  padding:5px 9px;
  white-space:nowrap;
}
.badge:before {
  content:"";
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}
.badge.gold {
  color:#795310;
  background:#fcf0cd;
}
.badge.gray {
  color:#58635a;
  background:#eceee8;
}
.badge.red {
  color:#8a4438;
  background:#fae6df;
}
.muted {
  color:var(--muted);
}
.empty {
  text-align:center;
  padding:34px 15px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}
.table-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:49px;
  padding:8px 21px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.table-foot .inline {
  gap:8px;
}
.table-foot .btn-icon {
  height:29px;
  width:29px;
}
.sr {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.two-col .panel {
  margin:0;
}
.inside {
  padding:0 21px 21px;
}
.report-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#f6e6cc;
  color:#79532f;
  margin:0 0 13px;
}
.report-actions {
  margin-bottom:20px;
}
.request-reason {
  white-space:normal;
  min-width:180px;
  max-width:380px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
.request-list table .actions {
  flex-wrap:nowrap;
}
.punch-card {
  padding:22px;
  margin-bottom:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}
.punch-card .badge {
  margin-bottom:10px;
}
.settings-row {
  padding:14px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
}
.settings-row:last-of-type {
  border:0;
}
.settings-row span {
  color:var(--muted);
}
.settings-row strong {
  text-align:right;
  overflow-wrap:anywhere;
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}
.field {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  font-weight:600;
  margin-bottom:14px;
}
.form-grid .field {
  min-width:0;
}
.field .hint {
  font-size:11px;
  color:var(--muted);
  font-weight:450;
  line-height:1.5;
}
.control {
  width:100%;
  padding:10px 11px;
  font-weight:450;
  font-size:14px;
  min-height:40px;
}
textarea.control {
  min-height:78px;
  resize:vertical;
}
.form-error {
  color:#913a29;
  font-size:13px;
  margin:5px 0 12px;
  line-height:1.5;
}
.form-error:empty {
  display:none;
}
dialog {
  color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  width:min(485px,calc(100% - 24px));
  max-height:88dvh;
  padding:0;
  box-shadow:0 20px 85px #5236243d;
}
dialog::backdrop {
  background:#35271e90;
}
.dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:19px 22px 15px;
  border-bottom:1px solid var(--line);
}
.dialog-body {
  padding:20px 22px;
}
.dialog-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.dialog-actions .push-left {
  margin-right:auto;
}
.auth {
  max-width:550px;
  margin:12vh auto;
  display:grid;
  justify-items:start;
  gap:15px;
}
.auth .sol-logo {
  width:86px;
  margin-bottom:10px;
}
.auth p {
  line-height:1.6;
}
.auth h1 {
  font-size:36px;
}
.auth a.btn {
  margin-top:6px;
}
#notice:not(:empty) {
  position:fixed;
  right:20px;
  bottom:18px;
  background:var(--deep);
  color:white;
  box-shadow:0 4px 14px #0002;
  border-radius:10px;
  padding:13px 18px;
  font-size:13px;
  line-height:1.5;
  max-width:min(420px,calc(100% - 32px));
  z-index:20;
}
.busy {
  opacity:.65;
  pointer-events:none;
}
@media(min-width:1600px) {
  :root {
    --side:255px;
  }
  .page {
    padding-top:45px;
  }
  .metric {
    min-height:185px;
  }
  .sidebar {
    padding-left:23px;
    padding-right:23px;
  }
}
@media(max-width:1150px) {
  :root {
    --side:195px;
  }
  .metrics {
    gap:10px;
  }
  .metric {
    padding:17px;
    min-height:152px;
  }
  .metric-head {
    gap:7px;
    font-size:12px;
  }
  .nav-link {
    font-size:13px;
  }
  .sidebar {
    padding-left:12px;
    padding-right:12px;
  }
  .page {
    padding-left:22px;
    padding-right:22px;
  }
  .topbar {
    padding-left:22px;
    padding-right:22px;
  }
  td,th {
    padding-left:9px;
    padding-right:9px;
  }
}
@media(max-width:850px) {
  :root {
    --side:0px;
  }
  .sidebar {
    width:240px;
    transform:translateX(-100%);
    transition:transform .2s ease;
    visibility:hidden;
  }
  .shell.nav-open .sidebar {
    transform:translateX(0);
    visibility:visible;
  }
  .mobile-toggle {
    display:inline-grid;
  }
  .scrim {
    display:block;
    position:fixed;
    inset:0;
    border:0;
    background:#35271e70;
    z-index:6;
    visibility:hidden;
    opacity:0;
  }
  .nav-open .scrim {
    visibility:visible;
    opacity:1;
  }
  .topbar {
    height:54px;
  }
  .crumb {
    gap:8px;
  }
  .two-col {
    grid-template-columns:1fr;
  }
  .title-row {
    align-items:flex-start;
  }
  .metric {
    min-height:150px;
  }
  .shell {
    padding:0;
  }
}
@media(max-width:600px) {
  .topbar {
    padding:0 13px;
  }
  .page {
    padding:23px 13px 35px;
  }
  .title-row {
    flex-wrap:wrap;
    gap:13px;
    margin-bottom:15px;
  }
  .title-row .actions {
    gap:6px;
  }
  .metrics {
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-bottom:14px;
  }
  .metric.feature {
    grid-column:1/-1;
    min-height:115px;
  }
  .feature-stat {
    margin-top:0;
    max-width:none;
  }
  .metric {
    min-height:121px;
    padding:14px;
    border-radius:12px;
  }
  .metric .big {
    margin-top:9px!important;
  }
  .metric-foot {
    font-size:11px;
    padding-top:5px;
  }
  .metric-head {
    font-size:12px;
  }
  .metric-icon {
    width:26px;
    height:26px;
    border-radius:7px;
  }
  .spark {
    height:37px;
  }
  .feature-stat strong.big {
    margin-top:5px!important;
  }
  .spark-wrap {
    max-width:150px;
  }
  .panel {
    border-radius:12px;
  }
  .panel-head {
    padding:16px;
    align-items:flex-start;
  }
  .panel-head h2 {
    font-size:18px;
  }
  .toolbar {
    padding:0 14px 12px;
    gap:9px;
  }
  .tab {
    padding:5px 8px;
  }
  .table-foot {
    padding:8px 14px;
  }
  th:first-child,td:first-child {
    padding-left:14px;
  }
  th:last-child,td:last-child {
    padding-right:14px;
  }
  .date-text {
    font-size:11px;
  }
  .brand {
    margin-bottom:35px;
  }
  .punch-card {
    align-items:flex-start;
    flex-direction:column;
    padding:17px;
  }
  .form-grid {
    grid-template-columns:1fr;
    gap:0;
  }
  .inside {
    padding:0 16px 16px;
  }
  .dialog-head {
    padding:15px 16px;
  }
  .dialog-body {
    padding:16px;
  }
  .top-actions {
    gap:5px;
  }
  .search input {
    width:125px;
  }
  .btn {
    font-size:12px;
  }
  .page h1 {
    font-size:30px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
  }
}
.mobile-demo {
  display:none;
}
@media(max-width:850px) {
  .mobile-demo {
    display:inline-flex;
    align-items:center;
    border:1px solid #dac38f;
    background:#fcf0cf;
    color:#674915;
    border-radius:20px;
    font-size:10px;
    padding:3px 8px;
    font-weight:650;
  }
}

.staff-account-actions{border-top:1px solid var(--line,#deded4);padding-top:1rem;justify-content:space-between;flex-wrap:wrap}
.dialog-body>.name-cell{margin-bottom:1rem}

.auth {background:#fff0d9;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,5vw,54px);width:min(485px,calc(100% - 32px));}
.btn.punch-button {min-height:45px;min-width:124px;font-size:15px;color:#fff;}
.btn.check-in {background:#267045;border-color:#267045;}
.btn.check-in:hover:enabled {background:#195b35;}
.btn.check-out {background:#ae3734;border-color:#ae3734;}
.btn.check-out:hover:enabled {background:#8c2725;}
.punch-card .badge {white-space:normal;}
@media(max-width:850px) {
  .topbar {background:#fff0d9;}
}
@media(max-width:600px) {
  .btn.punch-button {width:100%;}
}

.home-crumb,.recorded-link {text-decoration:none;}
.home-crumb:hover {text-decoration:underline;}
.recorded-link:hover {border-color:var(--accent);}
.recorded-link .metric-foot {color:var(--accent);font-weight:650;}
.overview-pay {font-size:14px;margin-top:9px;}
.overview-pay strong {margin-left:6px;}
.salary-value {font-size:clamp(23px,2.2vw,34px);margin-top:12px;}
.personal-totals {grid-template-columns:1fr 1fr 1.4fr;}
.personal-totals .metric-foot {line-height:1.45;}
@media(max-width:600px){.personal-totals {grid-template-columns:1fr 1fr;}}

.payroll-summary {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 21px;}
.payroll-summary .salary-value {margin:0;color:var(--coffee);}
.payroll-panel summary {cursor:pointer;padding:12px 21px;border-top:1px solid var(--line);font-size:13px;font-weight:650;}