/* ============================================================
 * app.css — legacy token map, now wired to the shared
 * design-system.css tokens. Kept so existing class names in
 * every template continue to work without template surgery.
 *
 * Load order in each base.html is:
 *   1) /static/css/design-system.css   (design tokens + shell)
 *   2) /static/css/app.css             (this file)
 * ============================================================ */

:root{
  --bg:           var(--ds-paper);
  --card:         var(--ds-surface);
  --text:         var(--ds-ink);
  --muted:        var(--ds-muted);
  --border:       var(--ds-line);
  --primary:      var(--ds-accent);
  --primary-600:  var(--ds-accent-hover);
  --danger:       var(--ds-danger);
  --shadow:       var(--ds-shadow-2);
  --radius:       var(--ds-radius-lg);
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family: var(--ds-font-sans);
  font-size: 14px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing: antialiased;
}

a{color:inherit;}

.topbar{
  background:var(--ds-surface);
  border-bottom:1px solid var(--ds-line);
  position:sticky;
  top:0;
  z-index:10;
}
.topbar__inner{
  max-width:1240px;
  margin:0 auto;
  padding:0 16px;
  height: var(--ds-topbar-h);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand__logo{
  font-family: var(--ds-font-display);
  font-weight:500;
    letter-spacing:-.02em;
  font-size:22px;
}
.brand__spark{color:var(--ds-amber); margin-left:4px;}
.userpill{
  display:inline-flex; gap:10px; align-items:center;
  padding: 5px 12px 5px 6px;
  background: var(--ds-stamp);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  font-size: 13px;
}
.userpill__name{font-weight:500; color: var(--ds-ink);}
.userpill::before{
  content: "";
  width: 22px; height: 22px;
  background: var(--ds-accent);
  border-radius: 50%;
  display: inline-block;
}

.page{padding:32px 0 48px;}
.container{max-width:1240px;margin:0 auto;padding:0 20px;}

.footer{
  color:var(--muted);
  font-size:12.5px;
  border-top: 1px solid var(--ds-line);
  background: var(--ds-paper-soft);
  margin-top: 40px;
  padding: 18px 0;
}
.footer__inner{max-width:1240px;margin:0 auto;padding:0 20px;}

.card{
  background:var(--card);
  border:1px solid var(--ds-line);
  border-radius:var(--radius);
  box-shadow: var(--ds-shadow-1);
  padding:24px;
}
.card__title{
  font-family: var(--ds-font-display);
  font-weight:500;
  font-size: 20px;
  margin-bottom:10px;
}
.cardInline{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px; border:1px solid var(--ds-line);
  border-radius:var(--ds-radius);
  background:var(--ds-surface);
}

.hero h1{
  font-family: var(--ds-font-display);
    font-weight: 750;
  margin:0 0 10px;
  font-size:40px;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.hero p{margin:0 0 18px; color:var(--muted); font-size: 15px; max-width: 60ch;}

h1{
  font-family: var(--ds-font-display);
    font-weight: 750;
  font-size:30px; margin:0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h2{
  font-family: var(--ds-font-display);
    font-weight: 720;
  font-size:22px; margin:0;
  letter-spacing: -0.015em;
}
h3{
  font-family: var(--ds-font-display);
    font-weight: 600;
  font-size: 17px; margin: 0 0 6px;
}

.muted{color:var(--muted);}
.small{font-size:12.5px;}

.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.row--space{justify-content:space-between; align-items:flex-start;}
.stack{display:grid; gap:16px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:14px 0 18px;}
@media (max-width: 860px){
  .grid2{grid-template-columns:1fr;}
}

.list{margin:8px 0 0; padding-left:18px; color:var(--muted);}

.flashwrap{max-width:1240px;margin:0 auto;padding:16px 20px 0;}
.flash{
  padding:10px 14px;
  border-radius:var(--ds-radius);
  border:1px solid var(--ds-line);
  background:var(--ds-surface);
  margin-bottom:10px;
  font-size: 13.5px;
}
.flash--error  {border-color:#ecc6c4; background: var(--ds-danger-soft);  color:#7a232a;}
.flash--success{border-color:#cfe0cd; background: var(--ds-success-soft); color:#2f5938;}
.flash--warning{border-color:#eedba7; background: var(--ds-warning-soft); color:#8a6900;}
.flash--info   {border-color:#ccd6e4; background: var(--ds-info-soft);    color:#2b4560;}

.btn{
  appearance:none;
  border:1px solid transparent;
  border-radius:var(--ds-radius);
  padding:10px 14px;
  font-family: var(--ds-font-sans);
  font-weight:500;
  font-size: 14px;
  line-height: 1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  text-decoration:none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  color: var(--ds-ink);
  background: var(--ds-surface);
  border-color: var(--ds-line);
  white-space: nowrap;
}
.btn:hover{ background: var(--ds-stamp); border-color: var(--ds-line-strong); }
.btn:focus-visible{ outline: 2px solid var(--ds-accent); outline-offset: 2px; }

.btn--primary{
  background:var(--ds-accent);
  color:var(--ds-accent-ink);
  border-color: var(--ds-accent);
}
.btn--primary:hover{
  background:var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
  color:var(--ds-accent-ink);
}
.btn--ghost{background:transparent; border:1px solid var(--ds-line); color:var(--ds-ink);}
.btn--ghost:hover{background:var(--ds-stamp); border-color: var(--ds-line-strong);}
.btn--danger{background:var(--ds-danger); color:#fff; border-color: var(--ds-danger);}
.btn--danger:hover{background:#7a2323; border-color:#7a2323; color:#fff;}
.btn--sm{padding:7px 10px; font-size:12.5px; border-radius:var(--ds-radius-sm); font-weight:500;}
.btn--lg{padding:12px 18px; font-size: 15px;}
.btn--disabled{opacity:.45; pointer-events:none;}

.link{color:var(--ds-accent); font-weight:500; text-decoration:none;}
.link:hover{text-decoration:underline; text-underline-offset: 3px;}

.auth{max-width:420px; margin:0 auto;}

.form{display:grid; gap:12px;}
.form--wide{max-width:560px;}
.label{
  font-weight:500;
  font-size:12.5px;
  margin-top:2px;
  color: var(--ds-ink-soft);
  letter-spacing: 0.01em;
}
.input,.select,.textarea{
  width:100%;
  padding:10px 12px;
  border-radius:var(--ds-radius-sm);
  border:1px solid var(--ds-line);
  outline:none;
  font-size:14px;
  font-family: var(--ds-font-sans);
  background: var(--ds-surface-alt);
  color: var(--ds-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus,.select:focus,.textarea:focus{
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px rgba(47, 66, 54, 0.12);
}
.textarea{resize:vertical; min-height: 96px;}

.inputRow{display:flex; gap:10px; align-items:center;}
.prefix{
  padding:10px 12px;
  border-radius:var(--ds-radius-sm);
  border:1px solid var(--ds-line);
  background: var(--ds-stamp);
  color:var(--ds-muted);
  font-family: var(--ds-font-mono);
  font-size: 13px;
}

.actions{margin-top:8px; display:flex; justify-content:flex-end;}
.actions--sticky{position:sticky; bottom:12px; background:transparent; padding-bottom:12px;}

.divider{height:1px;background:var(--border); margin:10px 0;}

.segmented{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.segmented--two .segmented__btn{min-width:120px;}
.segmented--stack{flex-direction:column; align-items:stretch;}
.segmented__btn{
  border:1px solid var(--border);
  background:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
.segmented__btn.is-active{
  border-color:rgba(109,92,231,.45);
  box-shadow:0 0 0 3px rgba(109,92,231,.12);
}

.checkbox{margin-top:8px; padding:14px; border:1px solid var(--border); border-radius:14px; background:#fff;}
.checkbox label{display:flex; gap:10px; font-weight:700;}
.checkbox input{width:18px;height:18px;}

.optionList{display:grid; gap:10px;}
.option{
  display:flex;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
}
.option input{margin-top:2px;}

.info{padding:12px; border-radius:14px; background:#eef4ff; border:1px solid #c7d7fe; color:#1d2939; margin:10px 0;}
.sectionTitle{font-weight:800; margin:12px 0 8px;}

.onboardingHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}
.avatar__circle{
  width:86px;
  height:86px;
  border-radius:50%;
  background:var(--ds-accent);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
  font-size:26px;
}

.onboardingLayout{
  display:grid;
  /* left nav ~1/3 smaller + responsive to monitor width */
  grid-template-columns:clamp(220px, 18vw, 260px) 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){
  .onboardingLayout{grid-template-columns:1fr;}
}

.onboardingNav{
  position:sticky;
  top:88px;
}
@media (max-width: 980px){
  .onboardingNav{position:relative; top:auto;}
}

.onboardingNav__title{font-weight:900; margin-bottom:10px;}
.navCards{display:grid; gap:10px;}
.navCard{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  text-decoration:none;
}
.navCard--active{border-color:rgba(109,92,231,.45); box-shadow:0 0 0 4px rgba(109,92,231,.10); background:var(--ds-accent-soft);}
.navCard__left{display:flex; gap:12px; align-items:center;}
.navCard__label{font-weight:800;}
.navCard__icon{width:34px;height:34px;border-radius:50%; position:relative;}
.navCard__icon{background:var(--ds-accent-soft); border:1px solid rgba(109,92,231,.12);}

.check{width:22px;height:22px;border-radius:50%; background:rgba(109,92,231,.10); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:900;}
.dot{width:10px;height:10px;border-radius:50%; background:#d0d5dd;}

.reviewBanner{
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  background:var(--ds-warning-soft);
  border:1px solid #fedf89;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.reviewBanner--disabled{opacity:.6;}
.reviewBanner__title{font-weight:900;}

.onboardingContent{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

.contentHeader{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:12px;}

.hint{margin-top:6px; font-size:12px; color:var(--muted);}
.hint--ok{color:#05603a;}
.hint--bad{color:#7a271a;}

.sigWrap{margin-top:12px;}
.sigLabel{font-weight:800; font-size:13px; margin-bottom:6px;}
.sigPad{border:1px solid var(--border); border-radius:14px; padding:10px; background:#fff;}
.sigCanvas{width:100%; height:140px; border:1px dashed #d0d5dd; border-radius:12px; display:block; touch-action:none;}
.sigPad__actions{display:flex; justify-content:flex-end; margin-top:10px;}

.smsfCenter{border:1px solid var(--border); border-radius:14px; padding:18px; background:#fbfbfe; text-align:center; display:grid; gap:12px;}
.smsfCenter__title{font-weight:900;}
.smsfCenter__muted{color:var(--muted); font-size:13px;}

.badge{display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px; border:1px solid var(--border); color:var(--muted); background:#fff;}
.badge--ok{border-color:#6ce9a6; background:#f6fffb; color:#05603a;}
.badge--warn{border-color:#f0c36a; background:#fffbeb; color:#92400e;}

.uploadCard{border:1px solid var(--border); border-radius:14px; padding:14px; background:#fff;}
.uploadCard__top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;}
.uploadCard__label{font-weight:900;}

.docCard{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px; border:1px solid var(--border); border-radius:14px; background:#fff;}
.docCard__title{font-weight:900;}

.choiceCards{display:grid; gap:10px; margin-top:10px;}
.choiceCard{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.choiceCard.is-active{border-color:rgba(109,92,231,.45); box-shadow:0 0 0 4px rgba(109,92,231,.10);}
.choiceCard input{margin-top:4px;}
.choiceCard__title{font-weight:900;}
.choiceCard__desc{color:var(--muted); font-size:13px; margin-top:4px;}

/* Simple dropdown (super fund search results) */
.superSearch{position:relative;}
.dropdown{
  position:absolute;
  top:44px;
  left:0;
  right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:20;
}
.dropdown.is-hidden{display:none;}
.dropdown__item{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:none;
  background:#fff;
  cursor:pointer;
}
.dropdown__item:hover{background:#f2f4f7;}
.dropdown__title{font-weight:900; font-size:13px;}
.dropdown__meta{font-size:12px; color:var(--muted); margin-top:2px;}

.is-hidden{display:none;}

.table{width:100%; border-collapse:collapse;}
.table th, .table td{padding:10px 8px; border-bottom:1px solid var(--border); text-align:left; font-size:13px;}
.table th{color:var(--muted); font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.04em;}

.pill{display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff; color:#101828; font-weight:800; font-size:12px;}
.clockPillLocked{background:#f5f7ff;border-color:#c7d7fe;color:#1d4ed8}

.kv{display:grid; gap:10px;}
/* Prevent horizontal overflow for long values by using a fixed-ish key column and wrapping values */
.kv > div{
  display:grid;
  grid-template-columns: minmax(140px, 240px) 1fr;
  gap:14px;
  align-items:start;
}
.k{color:var(--muted); font-weight:800; font-size:12px;}
.v{
  font-weight:700;
  min-width:0;
  text-align:left;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}

.sigImg{
  display:block;
  max-width:340px;
  width:100%;
  height:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}

/* ---------------- Admin UI (Deputy-like top nav) ---------------- */

.adminBody .page{padding-top:0;}
.adminBody{background: var(--ds-paper);}

.adminTopbar{
  background: var(--ds-surface);
  border-bottom:1px solid var(--ds-line);
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
}
.adminTopbar__inner{
  max-width:1240px;
  margin:0 auto;
  padding: 0 20px;
  height: var(--ds-topbar-h);
  display:flex;
  align-items:center;
  gap:24px;
}
.adminBrand{
  text-decoration:none;
  font-family: var(--ds-font-display);
  font-weight:750;
  letter-spacing:-.025em;
  font-size:20px;
  color: var(--ds-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.adminBrand::before{
  content: "";
  width: 10px; height: 10px;
  background: linear-gradient(135deg, var(--ds-accent), #0091ff);
  border-radius: 4px;
  transform: rotate(45deg) translateY(-1px);
  display: inline-block;
}
.adminBrand__spark{color:var(--ds-amber); margin-left:2px;}

.adminTopnav{
  display:flex;
  align-items:center;
  gap: 2px;
  flex:1;
  justify-content:center;
}
.adminTopnav__item{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  padding: 7px 12px;
  font-family: var(--ds-font-sans);
  font-weight:500;
  font-size: 13.5px;
  color: var(--ds-ink-soft);
  cursor:pointer;
  position:relative;
  border-radius: var(--ds-radius-sm);
  transition: background 120ms ease, color 120ms ease;
}
.adminTopnav__item:hover{color:var(--ds-ink); background: var(--ds-stamp);}
.adminTopnav__item.is-active{
  color:var(--ds-ink);
  background: transparent;
  border-color: transparent;
}
.adminTopnav__item.is-active::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:-10px;
  height:2px; border-radius:999px;
  background:var(--ds-accent);
}

.adminBadge{
  margin-left:8px;
  display:inline-flex;
  min-width:18px;
  height:18px;
  padding:0 6px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background: var(--ds-accent);
  color:#fff;
  font-size:11px;
  font-weight:600;
  font-family: var(--ds-font-mono);
}

.adminSubnav{
  background: var(--ds-paper-soft);
  border-bottom:1px solid var(--ds-line);
  overflow:hidden;
  transition: max-height .22s ease;
}
.adminSubnav__inner{
  max-width:1240px;
  margin:0 auto;
  padding: 8px 20px;
  min-height: var(--ds-subnav-h);
  display: flex;
  align-items: center;
}
.adminSubnav__panel{display:none; gap:4px; align-items:center; flex-wrap:wrap; width: 100%;}
.adminSubnav__panel.is-active{display:flex;}
.adminSubnav__link{
  text-decoration:none;
  font-weight:500;
  font-size: 13px;
  color: var(--ds-muted);
  padding: 6px 10px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease;
}
.adminSubnav__link:hover{color: var(--ds-ink); background: transparent;}
.adminSubnav__link.is-active{
  color: var(--ds-ink);
  border-bottom-color: var(--ds-accent);
  background: transparent;
  box-shadow: none;
  font-weight: 500;
}

.adminPage{padding:28px 0 48px;}

.adminLayout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){
  .adminLayout{grid-template-columns:1fr;}
}

.adminSidebar{
  position:sticky;
  top:124px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
@media (max-width: 980px){
  .adminSidebar{position:relative; top:auto;}
}
.adminSidebar__title{font-weight:900; font-size:16px;}
.adminSidebar__desc{font-size:13px; margin-top:4px;}
.adminSideList{display:grid; gap:10px; margin-top:14px;}
.adminSideItem{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  font-weight:900;
}
.adminSideItem:hover{background:#f8fafc;}
.adminSideItem.is-active{
  border-color:rgba(109,92,231,.45);
  box-shadow:0 0 0 4px rgba(109,92,231,.10);
  background:var(--ds-accent-soft);
}
.adminCount{
  display:inline-flex;
  min-width:26px;
  height:22px;
  padding:0 8px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#f2f4f7;
  color:#101828;
  font-size:12px;
  font-weight:900;
}

.adminMain{min-width:0;}


/* ---------------- Messaging (Chat UI) ---------------- */

.chatLayout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){
  .chatLayout{grid-template-columns:1fr;}
}

.chatSidebar{
  position:sticky;
  top:124px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}
@media (max-width: 980px){
  .chatSidebar{position:relative; top:auto;}
}
.chatSidebar__title{font-weight:900; font-size:14px; margin-bottom:10px;}

.chatPeer{
  display:block;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  text-decoration:none;
  color:#101828;
  background:#fff;
  margin-bottom:10px;
}
.chatPeer:hover{background:#f8fafc;}
.chatPeer.is-active{
  border-color:rgba(109,92,231,.45);
  box-shadow:0 0 0 4px rgba(109,92,231,.10);
  background:var(--ds-accent-soft);
}
.chatPeer__row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.chatPeer__name{font-weight:900; font-size:13px;}
.chatPeer__meta{color:var(--muted); font-size:12px; margin-top:2px;}
.chatPeer__snippet{color:#475467; font-size:12px; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.chatMain{min-width:0;}

.chatThread{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
}

.chatMsg{display:flex; margin:10px 0;}
.chatMsg.is-mine{justify-content:flex-end;}

.chatBubble{
  max-width: 78%;
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  background:#fff;
}
.chatMsg.is-mine .chatBubble{
  background:var(--ds-accent-soft);
  border-color:rgba(109,92,231,.25);
}
.chatText{font-weight:700; font-size:13px; white-space:pre-wrap;}
.chatMeta{margin-top:6px; font-size:11px; color:var(--muted); text-align:right;}

.chatComposer{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}
.chatComposer .input{flex:1;}
.chatComposer__textarea{width:100%; min-height:96px; resize:vertical;}
.chatComposer__actions{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.chatDropzone{position:relative; display:flex; align-items:center; justify-content:center; min-height:60px; padding:12px 16px; border:1px dashed #98a2b3; border-radius:16px; background:#f8fafc; color:#475467; font-size:13px; text-align:center; cursor:pointer; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;}
.chatDropzone:hover,.chatDropzone.is-dragover{border-color:var(--ds-accent); background:var(--ds-accent-soft); box-shadow:0 0 0 4px rgba(109,92,231,.08);}
.chatDropzone.has-files{border-style:solid; border-color:rgba(109,92,231,.35); background:var(--ds-accent-soft); color:#101828; font-weight:700;}
.chatDropzone.has-files::after{content:attr(data-file-summary); display:block; margin-top:6px; color:#475467; font-weight:600;}
.chatDropzone input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.chatAttachments{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.chatAttachment{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#f8fafc; border:1px solid var(--border); color:#344054; text-decoration:none; font-size:12px; font-weight:700;}
.chatAttachment:hover{background:#eef2ff; border-color:rgba(109,92,231,.25);}

/* ---------------- Employee detail (People → Employee → Detail) ---------------- */

.detailLayout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){
  .detailLayout{grid-template-columns:1fr;}
}

.detailSidebar{
  position:sticky;
  top:124px;
}
@media (max-width: 980px){
  .detailSidebar{position:relative; top:auto;}
}

.detailUser{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  margin-bottom:12px;
}
.detailUser__row{display:flex; gap:12px; align-items:center;}
.avatarMini{
  width:46px;height:46px;border-radius:50%;
  background:var(--ds-accent-soft);
  display:flex;align-items:center;justify-content:center;
  font-weight:900; color:var(--primary);
}
.detailUser__name{font-weight:900; line-height:1.1;}

.detailNav{display:grid; gap:6px;}
.detailNav__link{
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:900;
  color:#101828;
}
.detailNav__link:hover{background:#f8fafc;}
.detailNav__link.is-active{
  background:var(--ds-accent-soft);
  border-color:rgba(109,92,231,.25);
  box-shadow:0 0 0 4px rgba(109,92,231,.08);
  color:var(--primary);
}

.tabs{display:flex; gap:18px; border-bottom:1px solid var(--border); margin:10px 0 16px;}
.tab{
  display:inline-flex;
  padding:10px 2px;
  text-decoration:none;
  font-weight:900;
  color:#475467;
  border-bottom:3px solid transparent;
}
.tab.is-active{color:var(--primary); border-bottom-color:var(--primary);}

.fieldHelp{font-size:12px; color:var(--muted); margin-top:4px;}


/* File preview modal (admin review) */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;
}
.modalOverlay.is-open{display:flex;}
.modal{
  background:#fff;
  border-radius:14px;
  width:min(1100px, 100%);
  max-height:90vh;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(16,24,40,0.25);
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid #eef2f6;
}
.modalTitle{
  font-weight:600;
}
.modalBody{
  padding:0;
}
.modalBody iframe{
  width:100%;
  height:75vh;
  border:0;
}
.modalBody img{
  display:block;
  max-width:100%;
  max-height:75vh;
  margin:0 auto;
}


/* Schedule board (Planday-like demo) */
.scheduleCard{padding:16px;}
.scheduleTopbar{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.scheduleTopbar__left{min-width:260px;}
.scheduleTopbar__right{display:flex; align-items:center;}
.scheduleDateNav{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.scheduleDateLabel{display:grid; gap:2px; padding-left:6px;}
.scheduleDateLabel__main{font-weight:900;}
.scheduleDateForm{display:flex;}
.scheduleDateInput{width:auto; padding:10px 12px; border-radius:12px; font-weight:800;}

.scheduleGridWrap{border:1px solid var(--border); border-radius:14px; overflow:auto; background:transparent; max-height: calc(100vh - 260px);}
.scheduleGrid{min-width: 760px;}
.scheduleHeaderRow,.scheduleRow{display:grid; grid-template-columns:280px 1fr;}
.scheduleHeaderRow{border-bottom:1px solid var(--border); background:#fff; position:sticky; top:0; z-index:6;}
.scheduleSticky{position:sticky; left:0; z-index:7; background:#fff;}
.scheduleEmpHeader{padding:10px; border-right:1px solid var(--border);}
.scheduleSearch{border-radius:12px; padding:10px 12px;}

.scheduleTimeHeader{padding:0;}
.scheduleAxis{position:relative; height:50px; background:#fff;}
.scheduleHour{position:absolute; top:12px; transform:translateX(-50%); font-size:12px; font-weight:900; color:var(--muted);}
.scheduleGridLine{position:absolute; top:0; bottom:0; width:1px; background:#eef2f6;}

.scheduleBody{background:transparent;}
.scheduleRow{border-bottom:1px solid #f2f4f7;}

.scheduleEmpCell{display:flex; gap:10px; align-items:center; width:100%; padding:10px 12px; border:none; background:#fff; text-align:left; cursor:pointer; border-right:1px solid var(--border);}
.scheduleEmpBtn:hover{background:#fbfbfe;}
.scheduleEmpBtn.is-selected{background:var(--ds-accent-soft); box-shadow: inset 0 0 0 2px rgba(75,42,173,.14);}
.avatarSm{width:34px; height:34px; border-radius:50%; background:rgba(75,42,173,.12); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:900;}
.scheduleEmpMeta{display:grid; gap:2px; min-width:0;}
.scheduleEmpName{font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.scheduleEmpSub{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.scheduleLaneCell{padding:0;}
.scheduleLane{position:relative; height:56px; background:#fbfbfe;}

.shiftBlock{position:absolute; top:9px; height:38px; border-radius:12px; padding:6px 10px; background:#eafff2; border:1px solid #b7f0c8; border-left:6px solid var(--primary); box-shadow:0 8px 22px rgba(16,24,40,.08); overflow:hidden;}
.shiftBlock__time{font-size:12px; font-weight:900; color:#101828;}
.shiftBlock__title{font-size:12px; color:#344054; margin-top:1px; font-weight:700;}

/* Employee popover (Planday-like) */
.employeePopoverOverlay{position:fixed; inset:0; display:none; background:transparent; z-index:9998;}
.employeePopoverOverlay.is-open{display:block;}
.employeePopover{position:fixed; left:24px; top:24px; width:min(220px, 92vw); border-radius:18px; background:#0b1220; color:#fff; box-shadow:0 18px 60px rgba(16,24,40,0.45); border:1px solid rgba(255,255,255,0.08);}
.employeePopover__header{display:flex; justify-content:space-between; align-items:flex-start; padding:16px 18px 12px; gap:14px;}
.employeePopover__name{font-weight:900; font-size:16px; letter-spacing:-.02em;}
.employeePopover__role{color:rgba(255,255,255,0.70); font-weight:700; margin-top:2px;}
.employeePopover__close{appearance:none; border:none; width:36px; height:36px; border-radius:12px; background:rgba(255,255,255,0.10); color:#fff; font-size:22px; cursor:pointer;}
.employeePopover__close:hover{background:rgba(255,255,255,0.16);}
.employeePopover__actions{display:flex; gap:10px; padding:0 18px 18px; flex-wrap:wrap;}
.employeePopover__actions .btn{border-color:rgba(255,255,255,0.22); color:#fff;}
.employeePopover__actions .btn:hover{background:rgba(255,255,255,0.08);}

/* Schedule (week/fortnight grid) */
.scheduleRangeForm{display:flex; gap:10px; align-items:center;}
.scheduleRangeSelect{width:auto; padding:10px 12px; border-radius:12px; font-weight:900;}

.scheduleHeaderRow--days{align-items:stretch;}
.scheduleDayHeader{
  padding:10px 10px;
  border-left:1px solid var(--border);
  background:#fff;
  display:grid;
  gap:2px;
  align-content:center;
}
.scheduleDayHeader__dow{font-size:12px; font-weight:900; color:var(--muted);}
.scheduleDayHeader__date{font-size:13px; font-weight:900; color:#101828;}

.scheduleRow--days{align-items:stretch;}
.scheduleDayCell{
  border-left:1px solid #eef2f6;
  padding:8px 8px;
  background:transparent;
  min-height:72px;
}
.scheduleDayCell.is-dropover{outline:2px solid rgba(75,42,173,.22); outline-offset:-2px; background:var(--ds-accent-soft);}

.shiftCard{
  border-radius:12px;
  padding:6px 8px;
  border:1px solid #e5e7eb;
  box-shadow:0 8px 22px rgba(16,24,40,.06);
  cursor:pointer;
  user-select:none;
}
.shiftCard + .shiftCard{margin-top:8px;}
.shiftCard__line1{font-size:12px; font-weight:900; color:#101828; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.shiftCard__line2{font-size:12px; color:#344054; font-weight:700; margin-top:2px;}
.shiftCard__line3{margin-top:4px;}
.shiftPill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.shiftCard--approved{background:rgba(52,199,89,0.20); border-color:rgba(52,199,89,0.36);}
.shiftCard--approved .shiftPill{background:rgba(52,199,89,0.28); color:#0b4f22;}

.shiftCard--draft{background:rgba(152,162,179,0.20); border-color:rgba(152,162,179,0.36);}
.shiftCard--draft .shiftPill{background:rgba(152,162,179,0.28); color:#344054;}

.shiftCard--pending{background:rgba(255,159,10,0.20); border-color:rgba(255,159,10,0.36);}
.shiftCard--pending .shiftPill{background:rgba(255,159,10,0.28); color:#7a3e00;}

.shiftCard--completed{background:rgba(64,224,208,0.20); border-color:rgba(64,224,208,0.38);}
.shiftCard--completed .shiftPill{background:rgba(64,224,208,0.28); color:#0f4f4a;}

.shiftClockDot{position:absolute; left:8px; top:8px; z-index:2; width:10px; height:10px; border-radius:999px; background:rgba(255,214,10,0.70); border:1px solid rgba(255,214,10,0.95); box-shadow:0 0 0 2px rgba(255,255,255,0.85);}
.shiftCard{position:relative;}


/* Shift modal */
.shiftModalOverlay{position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(16,24,40,0.28); z-index:9999;}
.shiftModalOverlay.is-open{display:flex;}
.shiftModal{width:min(520px, 96vw); border-radius:18px; background:#fff; color:#101828; box-shadow:0 18px 60px rgba(16,24,40,0.25); border:1px solid rgba(16,24,40,0.08); overflow:hidden;}
.shiftModal__header{display:flex; justify-content:space-between; align-items:flex-start; padding:14px 16px 10px; gap:12px; border-bottom:1px solid #eef2f6;}
.shiftModal__title{font-weight:900; font-size:16px;}
.shiftModal__sub{font-size:12px; margin-top:2px;}
.shiftModal__close{appearance:none; border:none; width:36px; height:36px; border-radius:12px; background:#f2f4f7; color:#101828; font-size:22px; cursor:pointer;}
.shiftModal__close:hover{background:#e4e7ec;}

.shiftModal__body{padding:14px 16px 16px;}
.formGrid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width: 560px){
  .formGrid{grid-template-columns:1fr;}
}
.field .label{display:block; font-size:12px; color:var(--muted); font-weight:900; margin-bottom:6px;}

.shiftModal__actions{display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:14px; flex-wrap:wrap;}

/* --- Updates: Employee detail general merge + schedule modal (v2) --- */
.employeeGeneralGrid{display:grid; grid-template-columns:1.3fr .7fr; gap:16px; align-items:start;}
@media (max-width: 900px){
  .employeeGeneralGrid{grid-template-columns:1fr;}
}
.photoCard{display:flex; gap:14px; align-items:center; padding:12px; border:1px solid var(--border); border-radius:14px; background:#fbfbfe;}
.photoCard__avatar{width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:#f2f4f7; font-weight:900; color:#101828;}
.photoCard__image{width:64px; height:64px; border-radius:18px; object-fit:cover; border:1px solid var(--border); background:#f2f4f7;}

.shiftPill--ghost{background:#f2f4f7 !important; color:#344054 !important; text-transform:none; letter-spacing:0;}

.unavPill{display:block; margin-bottom:8px; padding:6px 8px; border-radius:12px; background:#fff3cd; border:1px solid #ffe69c; color:#7a5b00; font-size:12px; font-weight:800;}

.scheduleRow--open .scheduleDayCell{background:transparent;}
.scheduleEmpBtn--open{cursor:default;}

.shiftModal{width:min(920px, 96vw);}
.shiftModal__header{align-items:center;}
.shiftHeaderLeft{display:flex; gap:12px; align-items:center;}
.shiftAvatar{width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#f2f4f7; font-weight:900;}
.shiftHeaderTitle{font-weight:900; font-size:18px;}
.shiftHeaderSub{font-size:13px; margin-top:2px;}

.shiftFormLayout{display:grid; grid-template-columns:1fr 220px; gap:16px;}
@media (max-width: 860px){
  .shiftFormLayout{grid-template-columns:1fr;}
}
.shiftFormSide{display:flex; align-items:flex-start;}
.shiftSummary{width:100%; border:1px solid var(--border); border-radius:16px; padding:12px; background:#fbfbfe;}
.shiftSummaryRow{display:flex; justify-content:space-between; align-items:center; font-weight:900; padding:6px 0;}

.timeRow{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

.shiftTabPanes .shiftPane{min-height:88px;}
.shiftPane.is-hidden{display:none;}

/* Employee schedule list */
.empDayBlock{padding:10px 0; border-top:1px solid var(--border);}
.empDayBlock__header{display:flex; gap:10px; align-items:baseline; margin-bottom:8px;}
.empDayBlock__dow{font-weight:900; color:var(--muted); width:36px;}
.empDayBlock__date{font-weight:900;}
.empShiftList{display:grid; gap:10px;}
.empShiftItem{padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:#fbfbfe;}
.empShiftItem__title{font-weight:900;}
.empShiftItem__meta{font-size:12px; margin-top:2px;}

/* Tabs as buttons */
button.tab{appearance:none; background:none; border:none; cursor:pointer;}
button.tab:focus{outline:none;}

.scheduleSectionTitle{font-size:12px; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:10px 0 6px;}
.shiftSummaryField{margin-top:12px; padding-top:12px; border-top:1px solid var(--border);}
.shiftSummaryField .label{margin-bottom:8px;}
.shiftFormSide{display:block;}
.shiftSummary .input{width:100%;}
.shiftCard__line3{display:flex; flex-wrap:wrap; gap:6px;}

.scheduleTopbar__right{margin-left:auto; justify-content:flex-end; width:auto;}
.scheduleTopbar{align-items:flex-start;}
.scheduleDateNav{justify-content:flex-end;}
.scheduleDayCell{position:relative;}
.scheduleCellAdd{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:28px; height:28px; border:none; border-radius:999px; background:var(--ds-accent-soft); color:var(--primary); font-weight:900; display:none; cursor:pointer; z-index:1; box-shadow:0 4px 14px rgba(17,24,39,.12);}
.scheduleDayCell:hover .scheduleCellAdd{display:flex; align-items:center; justify-content:center;}
.scheduleDayCell .shiftCard{position:relative; z-index:2;}

.employeeSchedulePage{display:grid; gap:18px;}
.employeeScheduleSection__head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.employeeShiftCards{display:grid; gap:12px;}
.employeeShiftCard{display:grid; grid-template-columns:64px 1fr 18px; gap:14px; align-items:center; width:100%; border:1px solid var(--border); background:#fbfbfe; border-radius:18px; padding:14px 16px; text-align:left; cursor:pointer;}
.employeeShiftCard:hover{background:#fff; box-shadow:0 10px 24px rgba(16,24,40,.08);}
.employeeShiftCard.is-active{border-color:#b7a8ff; background:#fff; box-shadow:0 0 0 3px rgba(108,74,255,.08);}
.employeeShiftCard__date{text-align:center;}
.employeeShiftCard__day{font-size:34px; line-height:1; font-weight:900; color:#2563eb;}
.employeeShiftCard__sub{font-size:13px; color:var(--muted); font-weight:800; margin-top:4px;}
.employeeShiftCard__time{font-size:22px; font-weight:900; color:#101828;}
.employeeShiftCard__arrow{display:flex; justify-content:flex-end;}
.employeeShiftCard__arrowIcon{width:34px; height:34px; display:grid; place-items:center; border-radius:999px; background:#eef2ff; color:#475467; font-size:22px; font-weight:800;}
.employeeShiftModal{width:min(560px, 96vw);}
.employeeShiftDetailTop{padding:8px 0 16px; border-bottom:1px solid var(--border);}
.employeeShiftDetailTop__time{font-size:28px; font-weight:900; margin-bottom:8px;}
.employeeShiftDetailSummary{display:grid; gap:8px; padding:16px 0; border-bottom:1px solid var(--border);}
.employeeShiftNote{min-height:64px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:#fbfbfe; color:#344054;}

.employeeShiftAccordion{padding:16px 0 0; border-bottom:1px solid var(--border);}
.employeeShiftAccordion__toggle{width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 0 14px; background:none; border:none; cursor:pointer; text-align:left;}
.employeeShiftAccordion__summary{display:flex; align-items:center; gap:12px;}
.employeeShiftAccordion__icon,.employeeShiftTimeline__icon{width:34px; height:34px; border-radius:999px; display:grid; place-items:center; background:#eef2ff;}
.employeeShiftAccordion__title,.employeeShiftTimeline__title{font-size:20px; font-weight:800; color:#101828;}
.employeeShiftAccordion__chev{display:flex; align-items:center; justify-content:center;}
.employeeShiftAccordion__chevIcon{width:34px; height:34px; display:grid; place-items:center; border-radius:999px; background:#eef2ff; color:#475467; font-size:20px; line-height:1; transition:transform .18s ease;}
.employeeShiftAccordion__toggle.is-open .employeeShiftAccordion__chevIcon{transform:rotate(180deg);}
.employeeShiftAccordion__body{padding:10px 0 16px; border-top:1px solid var(--border);}
.employeeShiftAccordion__meta{margin-top:10px; font-weight:700; color:#344054;}
.employeeShiftTimeline{display:grid; gap:14px;}
.employeeShiftTimeline__row{display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start;}


.segBtn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border:1px solid #d5d9e3;border-radius:14px;background:#fff;color:#1f2a44;font-weight:700;text-decoration:none}
.segBtn.is-active{border-color:#b7a8ff;box-shadow:0 0 0 3px rgba(108,74,255,.08)}
.employeeDirectory__filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.employeeDirectory__filters .input{max-width:360px}.togglePill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid #d0d5dd;border-radius:999px;background:#fff;color:#344054;font-weight:700}.togglePill input{margin:0}.employeeDirectory__card{padding:18px}
.employeeDirectory__views{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.employeeDirectory__layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}
.employeeDirectory__sidebar{border-right:1px solid #eceff5;padding-right:16px}
.employeeDirectory__sidebarTitle{font-weight:800;color:#475467;margin-bottom:12px}
.directoryBucket{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;color:#344054;text-decoration:none;margin-bottom:8px}
.directoryBucket:hover{background:#f8f9fc}
.directoryBucket.is-active{background:#eef4ff;color:#1570ef}
.directoryBucket__count{min-width:28px;height:28px;border-radius:999px;background:#e4e7ec;color:#344054;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;padding:0 8px}
.directoryBucket.is-active .directoryBucket__count{background:#1570ef;color:#fff}
.employeeDirectory__tableWrap{overflow:auto}
.employeeDirectory__table th,.employeeDirectory__table td{white-space:nowrap}
@media (max-width: 900px){.employeeDirectory__layout{grid-template-columns:1fr}.employeeDirectory__sidebar{border-right:0;border-bottom:1px solid #eceff5;padding-right:0;padding-bottom:12px}}


/* Integrated clock lab */

.clockTwoCol{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}
.clockMetricGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.clockMetricValue{font-size:2rem;font-weight:800;margin-top:10px}
.clockStack{display:grid;gap:18px}
.clockInfoGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.clockDemoList,.clockMiniList{display:grid;gap:12px}
.clockDemoRow,.clockMiniCard{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--border);border-radius:18px;padding:14px 16px;background:#fbfbfe}
.clockMiniActions{display:flex;flex-direction:column;gap:10px;align-items:flex-end;min-width:120px}
.clockActiveCard{min-height:360px}
.clockTimerWrap{text-align:center;padding:28px 12px}
.clockTimerValue{font-size:clamp(2.2rem,6vw,4rem);font-weight:800;letter-spacing:-.03em}
.clockTimerMeta{margin-top:12px;font-size:1.25rem;font-weight:700}
.clockEmptyState{min-height:220px;display:grid;place-items:center;text-align:center;gap:10px}
.clockEmptyIcon{font-size:3rem}
.clockPillOk{background:#f6fffb;border-color:#6ce9a6;color:#05603a}
.clockPillOpen{background:#eef4ff;border-color:#c7d7fe;color:#1d4ed8}
.clockKioskBody{min-height:100dvh;background:#326fe4;color:#fff}
.clockKioskShell{min-height:100dvh;padding:22px}
.clockKioskTopbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.clockKioskTitle{font-size:clamp(1.4rem,4vw,2rem);font-weight:800}
.clockKioskGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.clockKioskCard{background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.24);border-radius:28px;padding:24px}
.clockKioskName{font-size:1.4rem;font-weight:800}
.clockKioskShift{font-size:1.2rem;margin-top:10px;font-weight:700}
.clockKioskTimer{font-size:1.5rem;font-weight:700;margin-top:.75rem}
.clockOverlay{position:fixed;inset:0;background:#326fe4;color:white;display:none;place-items:center;text-align:center;z-index:99;padding:24px}
.clockOverlay.active{display:grid}
.clockOverlayIcon{width:124px;height:124px;border-radius:50%;background:rgba(255,255,255,.85);color:#326fe4;display:grid;place-items:center;font-size:3rem;margin:0 auto 22px}
.clockOverlayTitle{font-size:clamp(2rem,6vw,3.3rem);font-weight:800}
.clockOverlaySub{font-size:1.5rem;margin-top:18px;font-weight:700}
.clockOverlayMeta{font-size:1.2rem;margin-top:8px;opacity:.95}
.clockOverlayFoot{position:absolute;bottom:40px;left:0;right:0;font-size:1rem;opacity:.9}
@media (max-width: 980px){.clockTwoCol,.clockMetricGrid,.clockInfoGrid{grid-template-columns:1fr}.clockDemoRow,.clockMiniCard,.clockKioskTopbar{flex-direction:column;align-items:stretch}.clockMiniActions{align-items:stretch}}

.shiftModal{
  max-height: calc(100vh - 48px);
  display:flex;
  flex-direction:column;
}
.shiftModal__body{
  overflow:auto;
}
[data-shift-segment-editor] th,
[data-shift-segment-editor] td{
  vertical-align:top;
}
[data-shift-segment-editor] .input,
[data-shift-segment-editor] select{
  min-width:120px;
}
[data-shift-segment-editor] [data-seg-task]{
  min-width:180px;
}
[data-shift-segment-editor] [data-seg-position]{
  min-width:160px;
}
.field.is-disabled .input,
.field.is-disabled select{
  background:#f2f4f7;
  color:#98a2b3;
}

/* Public holidays + responsive polish (v15) */
.scheduleDayHeader--holiday{
  background:#fff7ed;
  box-shadow: inset 0 -2px 0 rgba(234, 88, 12, 0.15);
}
.scheduleDayCell--holiday{
  background:#fffaf5;
}
.scheduleHolidayBadge,
.scheduleHolidayInline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  background:#ffedd5;
  color:#9a3412;
  font-size:11px;
  font-weight:900;
  line-height:1.2;
  white-space:normal;
  overflow-wrap:anywhere;
}
.scheduleHolidayBadge{margin-top:4px;}
.scheduleHolidayInline{margin:0 0 8px 0;}

.table th,
.table td{
  white-space:normal;
  overflow-wrap:anywhere;
}

@media (max-width: 1180px){
  .adminTopbar__inner{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .adminTopnav{
    order:3;
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:4px;
    gap:14px;
  }
  .adminSubnav__panel{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }
  .clockMetricGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .clockInfoGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 820px){
  .container,
  .flashwrap,
  .footer__inner,
  .topbar__inner,
  .adminTopbar__inner,
  .adminSubnav__inner{
    padding-left:12px;
    padding-right:12px;
  }
  .card{
    padding:16px;
  }
  .scheduleTopbar__right,
  .scheduleDateNav,
  .scheduleRangeForm,
  .row--space{
    width:100%;
  }
  .scheduleDateNav{
    justify-content:flex-start;
  }
  .scheduleRangeForm{
    flex-wrap:wrap;
  }
  .scheduleDateInput,
  .scheduleRangeSelect{
    width:100%;
  }
  .scheduleGridWrap{
    max-height:none;
  }
  .shiftModalOverlay,
  .modalOverlay{
    padding:10px;
  }
  .shiftModal,
  .modal{
    width:min(100%, 98vw);
    max-height:calc(100vh - 20px);
  }
  .shiftModal__body{
    padding:12px;
  }
  .photoCard{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width: 640px){
  .clockMetricGrid,
  .clockInfoGrid,
  .clockTwoCol,
  .employeeGeneralGrid,
  .detailLayout,
  .adminLayout,
  .chatLayout{
    grid-template-columns:1fr;
  }
  .kv > div{
    grid-template-columns:1fr;
    gap:4px;
  }
  .timeRow{
    grid-template-columns:1fr;
  }
  .employeeShiftCard{
    grid-template-columns:56px 1fr;
  }
  .employeeShiftCard__arrow{
    display:none;
  }
}


.clockActiveCard--centered{display:flex;flex-direction:column;}
.clockActionCenter{display:flex;justify-content:center;align-items:center;margin-top:auto;padding-top:12px;}
.clockActionCenter form{display:flex;justify-content:center;}
.clockActionCenter .btn{min-width:180px;}
.clockMiniCard .employeeShiftCard__arrow,.clockMiniList .employeeShiftCard__arrow{display:flex;justify-content:flex-end;align-items:center;}
[data-shift-segment-editor]{width:max-content;min-width:100%;table-layout:auto;border-collapse:separate;}
[data-shift-segment-editor] th,[data-shift-segment-editor] td{white-space:nowrap;}
[data-shift-segment-editor] th:nth-child(1),[data-shift-segment-editor] td:nth-child(1),[data-shift-segment-editor] th:nth-child(2),[data-shift-segment-editor] td:nth-child(2){min-width:116px;}
[data-shift-segment-editor] th:nth-child(3),[data-shift-segment-editor] td:nth-child(3){min-width:240px;}
[data-shift-segment-editor] th:nth-child(4),[data-shift-segment-editor] td:nth-child(4){min-width:180px;}
[data-shift-segment-editor] th:nth-child(5),[data-shift-segment-editor] td:nth-child(5){min-width:84px;text-align:center;}
[data-shift-segment-editor] th:nth-child(6),[data-shift-segment-editor] td:nth-child(6){min-width:120px;}


/* Schedule top UI refresh */
.scheduleTopbar--stacked{display:block; margin-bottom:16px;}
.scheduleTopbar__row--main{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.scheduleToolbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.scheduleToolbar__group{display:flex; align-items:center; gap:12px;}
.scheduleToolbar--actions{margin-left:auto; justify-content:flex-end;}
.scheduleIconBtn,.scheduleNavBtn{appearance:none; border:1px solid var(--border); background:#fff; color:#667085; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; box-shadow:0 1px 2px rgba(16,24,40,.04);}
.scheduleIconBtn{width:44px; height:44px; font-size:22px;}
.scheduleSearchWrap{position:relative; display:flex; align-items:center;}
.scheduleSearchBox{position:absolute; top:52px; left:0; z-index:40; width:260px; padding:8px; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 12px 32px rgba(16,24,40,.12);}
.scheduleSearchInput{width:100%; border-radius:12px; padding:12px 14px;}
.scheduleNavBtn{width:44px; height:44px; font-size:28px; line-height:1; text-decoration:none;}
.schedulePeriodNav{display:flex; align-items:center; gap:10px; padding:6px 8px; border:1px solid var(--border); border-radius:999px; background:#fff;}
.schedulePeriodNav__label{min-width:180px; text-align:center; font-weight:900; color:#344054; font-size:16px;}
.scheduleTodayBtn{border-radius:999px; min-width:96px;}
.scheduleToggleForm{margin:0;}
.scheduleInlineCheck{display:inline-flex; align-items:center; gap:10px; min-height:38px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:#fff; color:#344054; font-size:13px; font-weight:800; white-space:nowrap;}
.scheduleInlineCheck input{margin:0;}
.scheduleRangeSelect{min-width:140px; border-radius:16px; padding:12px 16px; font-size:18px;}
.scheduleEmpHeader--viewSelect{padding:12px 14px;}
.scheduleViewForm{margin:0;}
.scheduleViewSelect{width:100%; border-radius:16px; padding:14px 16px; font-size:18px; font-weight:700;}
.scheduleHeaderRow--days{background:#fff;}
.scheduleDayHeader{display:flex; align-items:center; justify-content:center; min-height:78px; padding:10px 8px;}
.scheduleDayHeader__pill{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; font-weight:900; color:#101828;}
.scheduleDayHeader__dow,.scheduleDayHeader__date{font-size:16px; font-weight:900; color:inherit;}
.scheduleDayHeader--today .scheduleDayHeader__pill{background:rgba(29,78,216,0.92); color:#fff; box-shadow:0 8px 18px rgba(29,78,216,0.24);}
.scheduleDayHeader--today.scheduleDayHeader--holiday .scheduleDayHeader__pill{background:rgba(30,64,175,0.96);}
.scheduleHolidayBadge{margin-top:6px; font-size:11px; font-weight:800; text-align:center; color:#0f4f4a;}
.scheduleGridWrap{max-height:calc(100vh - 220px);}
.scheduleEmpHeader,.scheduleSticky{background:#fff;}
@media (max-width: 900px){
  .scheduleTopbar__row--main{align-items:flex-start;}
  .scheduleToolbar--actions{margin-left:0; justify-content:flex-start;}
  .schedulePeriodNav__label{min-width:auto;}
}


.pendingRequestBoard{display:flex;flex-direction:column;gap:10px;}
.pendingRequestDateRow{font-size:16px;font-weight:900;color:#101828;padding:8px 10px 0;}
.pendingRequestGrid{display:grid;grid-template-columns:minmax(190px,1.2fr) minmax(210px,1.3fr) 120px 90px 170px 170px 120px;align-items:stretch;width:100%;box-sizing:border-box;}
.pendingRequestGrid--header{background:#f8f7ff;border:1px solid #e4defc;border-radius:18px;padding:0;font-weight:900;color:#101828;overflow:hidden;}
.pendingRequestGrid--header>div{padding:14px 12px;display:flex;align-items:center;box-sizing:border-box;}
.pendingRequestGrid--row{border:1px solid var(--border);border-radius:20px;background:#fff;overflow:hidden;}
.pendingRequestCell{padding:16px 14px;display:flex;flex-direction:column;justify-content:center;min-height:92px;box-sizing:border-box;}
.pendingRequestGrid--row .pendingRequestCell+.pendingRequestCell,.pendingRequestGrid--header>div+div{border-left:1px solid var(--border);}
.pendingRequestCell--center{align-items:center;text-align:center;}
.pendingRequestCell--action{align-items:center;justify-content:center;}
.pendingRequestEmployeeName,.pendingRequestShiftTitle{font-size:20px;font-weight:900;line-height:1.2;color:#101828;}
.pendingRequestValue{font-weight:900;color:#101828;}
.pendingRequestTick{width:28px;height:28px;border-radius:8px;border:2px solid #1d4ed8;background:#eaf2ff;color:#1d4ed8;display:grid;place-items:center;font-weight:900;font-size:18px;}
.pendingRequestDash{font-weight:900;color:#98a2b3;font-size:20px;}
@media (max-width: 1280px){.pendingRequestGrid{grid-template-columns:minmax(180px,1.1fr) minmax(200px,1.2fr) 100px 90px 150px 150px 110px;}}
@media (max-width: 1080px){.pendingRequestGrid{grid-template-columns:1fr;}.pendingRequestGrid--header{display:none;}.pendingRequestGrid--row .pendingRequestCell+.pendingRequestCell{border-left:none;border-top:1px solid var(--border);}.pendingRequestCell{min-height:auto;align-items:flex-start;text-align:left;}.pendingRequestCell--center,.pendingRequestCell--action{align-items:flex-start;text-align:left;}}

.timesheetDatePanel__form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end}
.timesheetDateCard,.timesheetDateStat{display:flex;flex-direction:column;gap:8px}
.timesheetDateInput{padding:16px 18px;border-radius:20px;font-size:18px;font-weight:900}
.timesheetDateStatValue{min-height:60px;display:flex;align-items:center;justify-content:center;padding:0 18px;border:1px solid var(--border);border-radius:20px;background:#fff;font-size:22px;font-weight:900;color:#101828}
.timesheetReviewWrap{overflow:auto}
.timesheetReviewTable{min-width:1800px;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:#fff}
.timesheetReviewHeader,.timesheetReviewRow{display:grid;grid-template-columns:52px 110px 130px 70px 110px 120px 120px 100px 190px 220px 120px 150px 170px 250px;align-items:stretch}
.timesheetReviewHeader{background:#f8f9fc}
.timesheetReviewCell{padding:14px 12px;border-top:1px solid var(--border);display:flex;align-items:center;color:#101828;font-weight:700}
.timesheetReviewHeader .timesheetReviewCell{border-top:none;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;color:#475467}
.timesheetReviewCell+.timesheetReviewCell{border-left:1px solid var(--border)}
.timesheetReviewCell--toggle{justify-content:center}
.timesheetReviewCell--actions{gap:8px;justify-content:flex-end;flex-wrap:wrap}
.timesheetReviewEntry{margin:0}
.timesheetReviewToggle{appearance:none;border:none;background:transparent;color:#1d4ed8;font-size:22px;line-height:1;cursor:pointer;font-weight:900;padding:0}
.timesheetReviewToggle.is-open{transform:rotate(90deg)}
.timesheetReviewDetail{padding:22px;border-top:1px solid #b9d4ff;background:#eef6ff}
.timesheetReviewDetailMeta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.timesheetBreakdownTable th,.timesheetBreakdownTable td{font-size:13px}
.timesheetBreakdownTotal td{font-weight:900;background:rgba(255,255,255,0.72)}
@media (max-width: 1180px){.timesheetDatePanel__form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 700px){.timesheetDatePanel__form,.timesheetReviewDetailMeta{grid-template-columns:1fr}.timesheetDateStatValue{justify-content:flex-start}}


/* Compact typography + layout refresh */
html{font-size:10pt;}
body,button,input,select,textarea,table,th,td{font-family:"Aptos Narrow","Aptos","Arial Narrow","Segoe UI",Arial,sans-serif;font-size:10pt;}
.topbar__inner,.container,.footer__inner,.flashwrap{max-width:100%;}
.container,.flashwrap,.footer__inner,.topbar__inner,.adminTopbar__inner,.adminSubnav__inner{padding-left:12px;padding-right:12px;}
.page{padding:14px 0 26px;}
.card{padding:14px;border-radius:14px;}
.card__title{font-size:15px;margin-bottom:6px;}
h1{font-size:18px;margin:0 0 4px;}
h2{font-size:14px;}
.hero h1{font-size:20px;}
.small,.label,.muted.small{font-size:9pt;}
.btn{padding:7px 10px;border-radius:10px;font-size:10pt;}
.btn--sm{padding:6px 8px;border-radius:10px;font-size:9.5pt;}
.input,.select,.textarea{padding:8px 10px;border-radius:10px;font-size:10pt;}
.prefix{padding:8px 10px;border-radius:10px;}
.scheduleGridWrap{max-height:calc(100vh - 185px);}
.scheduleHeaderRow,.scheduleRow{grid-template-columns:220px 1fr;}
.scheduleEmpHeader{padding:8px;}
.scheduleEmpCell{gap:8px;padding:8px 10px;min-height:54px;}
.avatarSm{width:30px;height:30px;min-width:30px;font-size:11pt;overflow:hidden;}
.avatarSm__image{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.scheduleEmpMeta{gap:1px;}
.scheduleEmpName{font-size:11pt;line-height:1.15;}
.scheduleEmpSub{font-size:10pt;line-height:1.15;}
.scheduleViewSelect,.scheduleRangeSelect{padding:9px 12px;font-size:11pt;border-radius:12px;}
.scheduleEmpHeader--viewSelect{padding:8px 10px;}
.scheduleDayHeader{min-height:54px;padding:6px 6px;}
.scheduleDayHeader__pill{padding:8px 12px;}
.scheduleDayHeader__dow,.scheduleDayHeader__date{font-size:11pt;}
.scheduleDayCell{padding:6px;min-height:60px;}
.shiftCard{padding:5px 6px;border-radius:10px;}
.shiftCard + .shiftCard{margin-top:6px;}
.shiftCard__line1,.shiftCard__line2{font-size:9.5pt;}
.shiftPill{padding:1px 6px;font-size:8.5pt;}
.unavPill{margin-bottom:6px;padding:4px 6px;font-size:9pt;}
.scheduleToolbar{gap:8px;}
.scheduleToolbar__group{gap:8px;}
.scheduleIconBtn,.scheduleNavBtn{width:38px;height:38px;}
.scheduleNavBtn{font-size:22px;}
.scheduleIconBtn{font-size:18px;}
.schedulePeriodNav{gap:8px;padding:4px 6px;}
.schedulePeriodNav__label{min-width:150px;font-size:11pt;}
.scheduleTodayBtn{min-width:74px;}

.pendingRequestBoard{gap:8px;}
.pendingRequestDateRow{font-size:12pt;padding:4px 6px 0;}
.pendingRequestGrid{grid-template-columns:minmax(155px,1.15fr) minmax(180px,1.15fr) 88px 72px 130px 130px 100px;width:100%;box-sizing:border-box;}
.pendingRequestGrid--header>div{padding:10px 8px;font-size:9.5pt;display:flex;align-items:center;box-sizing:border-box;}
.pendingRequestCell{padding:10px 9px;min-height:72px;box-sizing:border-box;}
.pendingRequestEmployeeName,.pendingRequestShiftTitle{font-size:11pt;}
.pendingRequestTick{width:22px;height:22px;font-size:12pt;}

.clockMetricGrid{gap:10px;}
.clockMetricValue{font-size:16px;}
.timesheetDatePanel__form{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end;}
.timesheetDateCard,.timesheetDateStat{gap:4px;}
.timesheetDateInput{padding:9px 10px;border-radius:12px;font-size:10pt;font-weight:700;}
.timesheetDateStatValue{min-height:40px;padding:0 12px;border-radius:12px;font-size:16px;}
.timesheetToolbarActions{display:flex;gap:8px;align-items:end;justify-content:flex-end;}
.timesheetFilterRow .select{max-width:180px !important;}
.timesheetReviewTable{min-width:1200px;border-radius:14px;}
.timesheetReviewHeader,.timesheetReviewRow{display:grid;grid-template-columns:36px 78px 84px 46px 74px 86px 86px 70px 140px 120px 80px 88px 112px 208px;align-items:stretch;}
.timesheetReviewCell{padding:8px 8px;font-size:9.5pt;}
.timesheetReviewHeader .timesheetReviewCell{font-size:8.5pt;letter-spacing:.02em;}
.timesheetReviewCell--actions{gap:6px;justify-content:flex-start;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;}
.timesheetReviewCell--actions .btn{font-size:8.5pt;padding:5px 7px;min-width:auto;}
.timesheetReviewToggle{color:#7fb1f2;font-size:16px;}
.timesheetReviewDetail{padding:12px;border-top:1px solid #d9dee7;background:var(--bg);}
.timesheetReviewDetailMeta{gap:12px;}
.timesheetBreakdownTable th,.timesheetBreakdownTable td{font-size:9.5pt;padding:8px 10px;}
.timesheetBreakdownTotal td{background:transparent;font-weight:800;}
.timesheetBreakdownTotal td:nth-child(3){text-align:right;}

@media (max-width: 1180px){.timesheetDatePanel__form{grid-template-columns:repeat(3,minmax(0,1fr));}.timesheetToolbarActions{grid-column:auto;justify-content:flex-start;}}
@media (max-width: 800px){.timesheetDatePanel__form{grid-template-columns:repeat(2,minmax(0,1fr));}.timesheetToolbarActions{grid-column:1 / -1;}.scheduleHeaderRow,.scheduleRow{grid-template-columns:180px 1fr;}.scheduleEmpCell{padding:7px 8px;}.scheduleEmpName{font-size:10pt;}.scheduleEmpSub{font-size:9pt;}}

/* v10 compact typography + schedule/timesheet refinements */
html,body{line-height:1;}
body,button,input,select,textarea,table,th,td,label,p,span,a,div,h1,h2,h3,h4,h5,h6,small,strong{line-height:1;}
p{margin:0;}
.card__title,.muted,.small,.label,.scheduleEmpName,.scheduleEmpSub,.pendingRequestEmployeeName,.pendingRequestShiftTitle,.timesheetReviewCell,.timesheetReviewHeader .timesheetReviewCell,.timesheetDateStatValue,.employeeShiftAccordion__title,.employeeShiftCard__time,.employeeShiftCard__main,.shiftModal__title,.shiftHeaderTitle,.scheduleHolidayBadge{line-height:1;}
.stack,.form,.optionList,.navCards,.employeeSchedulePage,.employeeShiftCards{gap:10px;}
.card{padding:12px;}
.btn,.btn--sm,.input,.select,.textarea{line-height:1;}

.scheduleDayHeader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.scheduleDayHeader__pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-wrap:nowrap;}
.scheduleHolidayBadge{display:block;max-width:100%;padding:4px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scheduleHolidayInline{display:none !important;}
.scheduleDayCell--holiday{background:transparent;}

.employeeShiftAccordion__chevIcon--triangle{width:20px;height:20px;border-radius:0;background:transparent;color:#7fb1f2;font-size:16px;display:grid;place-items:center;transform-origin:center;transition:transform .18s ease,color .18s ease;}
.employeeShiftAccordion__toggle.is-open .employeeShiftAccordion__chevIcon--triangle{transform:rotate(90deg);color:#5b8fd8;}
.employeeShiftAccordion__chevIcon{box-shadow:none;}

.timesheetReviewEntry--attention .timesheetReviewRow{background:#fee4e2;border-color:#f97066;}
.timesheetReviewEntry--checked .timesheetReviewRow{background:#eefcf2;}
.timesheetReviewEntry--attention .timesheetReviewCell,.timesheetReviewEntry--checked .timesheetReviewCell{background:transparent;}
.timesheetReviewRow--attention .timesheetReviewCell,.timesheetReviewRow--checked .timesheetReviewCell{background:transparent;}
.timesheetReviewCell--actions{align-items:center;}
.timesheetReviewCell--actions .btn{white-space:nowrap;}
.timesheetReviewToggle{color:#8bb8ee !important;font-size:15px;padding:0 2px;}
.timesheetReviewToggle.is-open{transform:rotate(90deg);}
.timesheetReviewDetail{background:var(--bg) !important;border-top:1px solid #d9dee7;}
.timesheetBreakdownTotal td:nth-child(3),.timesheetBreakdownTotal td:nth-child(4),.timesheetBreakdownTotal td:nth-child(5){font-weight:900;}
.timesheetDatePanel__form,.timesheetFilterRow{row-gap:8px;}
.timesheetReviewHeader,.timesheetReviewRow{grid-template-columns:34px 74px 82px 42px 72px 82px 82px 64px 132px 116px 78px 84px 110px 212px;}
.timesheetReviewCell{padding:7px 7px;}

@media (max-width: 800px){
  .scheduleDayHeader__pill{padding:7px 10px;}
  .scheduleHolidayBadge{font-size:8.5pt;padding:3px 8px;}
}


/* v12 employee open-shift filter + clock card/no-arrow + auto-width timesheet tables */
.employeeShiftCard{grid-template-columns:56px minmax(0,1fr) auto;}
.employeeShiftCard__aside{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;min-width:max-content;}
.employeeShiftCard__status{display:flex;justify-content:flex-end;}
.employeeShiftCard__arrow{display:flex;justify-content:flex-end;align-items:center;}
.employeeShiftCard__arrowIcon--triangle{width:18px;height:18px;border-radius:0;background:transparent;color:#8bb8ee;font-size:15px;line-height:1;display:grid;place-items:center;box-shadow:none;font-weight:900;}
.employeeShiftCard.is-active .employeeShiftCard__arrowIcon--triangle,.employeeShiftCard:hover .employeeShiftCard__arrowIcon--triangle{color:#5b8fd8;}
.employeeShiftCard--no-arrow .employeeShiftCard__aside{min-width:max-content;}

.employeeRecentTimesheetWrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff;}
.employeeRecentTimesheetTable{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;}
.employeeRecentTimesheetTable th,.employeeRecentTimesheetTable td{padding:7px 8px;border-top:1px solid var(--border);border-left:1px solid var(--border);color:#101828;font-size:8.6pt;line-height:1;white-space:nowrap;vertical-align:middle;}
.employeeRecentTimesheetTable th:first-child,.employeeRecentTimesheetTable td:first-child{border-left:none;}
.employeeRecentTimesheetTable thead th{border-top:none;background:#f8f9fc;font-size:7.3pt;font-weight:900;color:#475467;text-transform:uppercase;letter-spacing:.01em;text-align:center;}
.employeeRecentTimesheetTable tbody td{font-weight:700;text-align:center;}

.timesheetReviewTable{min-width:max-content;width:max-content;max-width:none;}
.timesheetReviewHeader,.timesheetReviewRow{grid-template-columns:34px 112px 94px 56px 84px 102px 102px 82px 172px 210px 110px 128px 140px 246px;}
.timesheetReviewHeader .timesheetReviewCell{white-space:nowrap;overflow:visible;text-overflow:clip;font-size:7.6pt;}
.timesheetReviewCell{font-size:8.7pt;white-space:nowrap;}
.timesheetReviewRow .timesheetReviewCell:nth-child(9),
.timesheetReviewRow .timesheetReviewCell:nth-child(10),
.timesheetReviewRow .timesheetReviewCell:nth-child(11),
.timesheetReviewRow .timesheetReviewCell:nth-child(13){white-space:nowrap;}
.employeeShiftModal--clock .employeeShiftAccordion__chev{display:flex;}
.employeeShiftModal--clock .employeeShiftAccordion__toggle{padding-right:0;}
.clockMiniList .employeeShiftCard__aside{flex-direction:row;align-items:center;gap:8px;}
.clockMiniList .employeeShiftCard__status{justify-content:flex-end;}
.clockMiniList .employeeShiftCard__aside{min-width:max-content;justify-content:flex-end;}
.clockMiniList .employeeShiftCard__arrow{display:none !important;}


/* v10.9 workforce header, kiosk pin contrast, timesheet row spacing */
.adminBrand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;}
.adminBrand__text{display:inline-block;line-height:1;}
.adminBrand__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid #ded5c4;
  background:#f5f0e6;
  color:#8a7c61;
  font-family:var(--ds-font-sans);
  font-size:12px;
  font-weight:600;
  line-height:1;
}
.clockKioskCard .label{color:#fff !important;}
.clockKioskCard .input{
  border:1px solid rgba(255,255,255,.9) !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  box-shadow:none;
}
.clockKioskCard .input::placeholder{color:rgba(255,255,255,.92) !important;opacity:1;}
.clockKioskCard .input:focus{
  border-color:#fff !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.18) !important;
}
.timesheetReviewTable{
  border:none !important;
  background:transparent !important;
  overflow:visible !important;
}
.timesheetReviewHeader{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#f8f9fc;
}
.timesheetReviewEntry{display:block;margin-top:10px;}
.timesheetReviewRow{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.timesheetReviewRow .timesheetReviewCell{border-top:none;}
.timesheetReviewEntry--attention .timesheetReviewRow{background:#fee4e2;border-color:#f97066;}
.timesheetReviewEntry--checked .timesheetReviewRow{background:#eefcf2;}
.timesheetReviewDetail{
  margin-top:-1px;
  border:1px solid #d9dee7;
  border-top:none;
  border-radius:0 0 14px 14px;
  overflow:hidden;
}


/* v11 module switcher + sticky subnav */
.adminSubnav{
  position:sticky;
  top:var(--ds-topbar-h);
  z-index:29;
}
.adminBrand.moduleSwitcher__button{
  border:0;
  background:transparent;
  padding:0;
}
.adminBrand.moduleSwitcher__button:focus-visible{
  outline:2px solid var(--ds-accent);
  outline-offset:4px;
  border-radius:12px;
}

/* ============================================================
 * v11.3 adaptive layout + reliable signature capture
 * ============================================================ */
:root{
  --app-sticky-header-height: var(--ds-topbar-h);
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
}

html{
  min-width:320px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  min-width:320px;
  min-height:var(--app-viewport-height, 100vh);
}
.container,
.adminTopbar__inner,
.adminSubnav__inner,
.topbar__inner,
.footer__inner,
.flashwrap{
  width:100%;
}
.onboardingContent,
.adminContent,
.detailContent,
.chatMain,
.scheduleCard,
.card,
.form,
.form--wide{
  min-width:0;
  max-width:100%;
}
.form--wide{width:100%;}

.topbar,
.adminTopbar{
  padding-left:var(--app-safe-left);
  padding-right:var(--app-safe-right);
}
.page,
.adminPage,
.clockKioskShell{
  padding-bottom:calc(48px + var(--app-safe-bottom));
}
.adminSubnav{
  top:var(--app-sticky-header-height, var(--ds-topbar-h));
}

.responsiveTableWrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:inherit;
}
.responsiveTableWrap:focus-visible{
  outline:2px solid var(--ds-accent);
  outline-offset:2px;
}
.responsiveTableWrap > .table{
  min-width:100%;
  margin-bottom:0;
}

.sigHelp{
  color:var(--muted);
  font-size:12.5px;
  margin:0 0 7px;
}
.sigPad{
  padding:10px;
  overflow:hidden;
}
.sigCanvas{
  width:100%;
  height:clamp(150px, 22vw, 190px);
  min-height:140px;
  background:#fff;
  cursor:crosshair;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:contain;
}
.sigCanvas:focus-visible{
  outline:2px solid var(--ds-accent);
  outline-offset:2px;
  border-color:var(--ds-accent);
}
.sigPad__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.sigPad__status{
  color:var(--muted);
  font-size:12px;
  min-height:18px;
}
.sigPad__status.is-complete{
  color:var(--ds-success);
  font-weight:700;
}
.sigPad__actions{margin-top:0;}

.has-coarse-pointer .btn,
.has-coarse-pointer .segmented__btn,
.has-coarse-pointer .adminTopnav__item,
.has-coarse-pointer .adminSubnav__link,
.has-coarse-pointer .navCard,
.has-coarse-pointer .option,
.has-coarse-pointer .choiceCard{
  min-height:44px;
}
.has-coarse-pointer .input,
.has-coarse-pointer .select,
.has-coarse-pointer .textarea{
  min-height:44px;
}

@media (max-width:1180px){
  .adminTopbar__inner{
    height:auto;
    min-height:var(--ds-topbar-h);
    padding-top:9px;
    padding-bottom:9px;
    align-items:center;
  }
  .adminTopnav{
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
  }
  .adminTopnav::-webkit-scrollbar,
  .adminSubnav__inner::-webkit-scrollbar,
  .adminSubnav__panel::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .navCards::-webkit-scrollbar{
    display:none;
  }
  .adminTopnav__item{
    flex:0 0 auto;
  }
  .adminTopnav__item.is-active::after{
    bottom:-5px;
  }
}

@media (max-width:980px){
  .onboardingHeader{
    align-items:flex-start;
  }
  .onboardingNav{
    display:grid;
    gap:10px;
  }
  .onboardingNav__title{display:none;}
  .navCards{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(190px, 34vw);
    gap:10px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    padding:2px 2px 6px;
    -webkit-overflow-scrolling:touch;
  }
  .navCard{
    scroll-snap-align:start;
    min-height:64px;
  }
  .reviewBanner{
    margin-top:0;
  }
  .detailSidebar,
  .adminSidebar,
  .chatSidebar{
    position:relative;
    top:auto;
  }
  .detailNav,
  .adminSideList{
    display:flex;
    overflow-x:auto;
    gap:8px;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .detailNav__link,
  .adminSideItem{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

@media (max-width:820px){
  .page{padding-top:22px;}
  .adminPage{padding-top:20px;}
  .topbar__inner{
    height:auto;
    min-height:var(--ds-topbar-h);
    padding-top:9px;
    padding-bottom:9px;
  }
  .contentHeader{
    align-items:flex-start;
    flex-direction:column;
  }
  .onboardingContent{
    padding:16px;
  }
  .onboardingHeader .avatar__circle{
    width:64px;
    height:64px;
    font-size:20px;
  }
  .tabs{
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    gap:12px;
    scrollbar-width:none;
  }
  .tab{flex:0 0 auto;white-space:nowrap;}
  .scheduleTopbar__left{min-width:0;width:100%;}
  .scheduleTopbar__right{align-items:stretch;}
  .scheduleDateNav > *,
  .scheduleRangeForm > *{
    min-width:0;
  }
  .modalBody iframe{
    height:calc(var(--app-viewport-height, 100vh) - 120px);
  }
  .shiftModal,
  .modal{
    max-height:calc(var(--app-viewport-height, 100vh) - 20px);
  }
  .shiftModal__body,
  .modalBody{
    max-height:calc(var(--app-viewport-height, 100vh) - 84px);
    overflow:auto;
    overscroll-behavior:contain;
  }
}

@media (max-width:640px){
  body{font-size:14px;}
  .container,
  .flashwrap,
  .footer__inner,
  .topbar__inner,
  .adminTopbar__inner,
  .adminSubnav__inner{
    padding-left:14px;
    padding-right:14px;
  }
  .page,
  .adminPage{
    padding-top:16px;
  }
  h1,
  .hero h1{
    font-size:clamp(25px, 8vw, 32px);
  }
  h2{font-size:21px;}
  .topbar__right,
  .adminTopbar__right{
    margin-left:auto;
  }
  .userpill{
    padding-right:8px;
    gap:7px;
  }
  .userpill__name{display:none;}
  .userpill::before{width:20px;height:20px;}
  .adminBrand{font-size:18px;}
  .adminTopbar__inner{gap:12px;}
  .adminTopnav{
    gap:4px;
    padding-bottom:2px;
  }
  .adminTopnav__item{
    padding:8px 10px;
    font-size:13px;
  }
  .adminSubnav__inner{
    padding-top:6px;
    padding-bottom:6px;
  }
  .adminSubnav__link{padding:7px 9px;}
  .onboardingHeader{
    margin-bottom:12px;
  }
  .onboardingHeader .avatar{display:none;}
  .navCards{
    grid-auto-columns:minmax(178px, 78vw);
  }
  .onboardingContent,
  .card{
    padding:14px;
    border-radius:12px;
  }
  .reviewBanner,
  .docCard,
  .cardInline,
  .uploadCard__top{
    align-items:stretch;
    flex-direction:column;
  }
  .reviewBanner .btn,
  .docCard .btn{
    width:100%;
  }
  .inputRow{
    align-items:stretch;
    flex-direction:column;
  }
  .inputRow .btn{width:100%;}
  .segmented{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .segmented--stack,
  .segmented--two{
    grid-template-columns:1fr;
  }
  .segmented__btn,
  .segmented--two .segmented__btn{
    width:100%;
    min-width:0;
  }
  .checkbox,
  .option,
  .choiceCard{
    padding:12px;
  }
  .actions{
    position:sticky;
    bottom:0;
    z-index:8;
    margin:8px -14px -14px;
    padding:12px 14px calc(12px + var(--app-safe-bottom));
    background:rgba(255,255,255,.96);
    border-top:1px solid var(--border);
    backdrop-filter:blur(10px);
  }
  .actions .btn{width:100%;min-height:46px;}
  .sigPad{padding:8px;}
  .sigCanvas{
    height:180px;
    min-height:180px;
  }
  .sigPad__footer{
    align-items:stretch;
    flex-direction:column;
  }
  .sigPad__actions,
  .sigPad__actions .btn{
    width:100%;
  }
  .sigPad__actions .btn{min-height:42px;}
  .input,
  .select,
  .textarea{
    font-size:16px;
  }
  .responsiveTableWrap > .table{
    min-width:640px;
  }
  .shiftModalOverlay,
  .modalOverlay{
    align-items:flex-end;
    padding:0;
  }
  .shiftModal,
  .modal{
    width:100%;
    max-width:none;
    max-height:calc(var(--app-viewport-height, 100vh) - var(--app-safe-top));
    border-radius:18px 18px 0 0;
  }
  .shiftModal__header,
  .modalHeader{
    position:sticky;
    top:0;
    z-index:2;
    background:#fff;
  }
  .shiftModal__actions{
    position:sticky;
    bottom:0;
    margin:14px -12px -12px;
    padding:12px calc(12px + var(--app-safe-right)) calc(12px + var(--app-safe-bottom)) calc(12px + var(--app-safe-left));
    background:#fff;
    border-top:1px solid var(--border);
  }
  .shiftModal__actions .btn{flex:1 1 100%;}
  .employeePopover{
    left:10px !important;
    right:10px !important;
    top:auto !important;
    bottom:calc(10px + var(--app-safe-bottom));
    width:auto;
  }
}

@media (max-width:420px){
  .brand__logo{font-size:19px;}
  .adminBrand::before{width:9px;height:9px;}
  .moduleSwitcher__menu{
    max-width:calc(100vw - 28px);
    min-width:170px;
  }
  .clockMetricGrid,
  .clockInfoGrid{
    grid-template-columns:1fr;
  }
  .employeeShiftCard{
    grid-template-columns:48px minmax(0,1fr);
    padding:12px;
    gap:10px;
  }
  .employeeShiftCard__aside{grid-column:2;align-items:flex-start;}
}

@media (orientation:landscape) and (max-height:560px){
  .shiftModal,
  .modal{
    max-height:calc(var(--app-viewport-height, 100vh) - 8px);
  }
  .sigCanvas{
    height:130px;
    min-height:130px;
  }
}

@media print{
  .actions{position:static;margin-top:8px;padding:0;border:0;background:transparent;}
  .responsiveTableWrap{overflow:visible;}
}

/* Flex-basis must be explicit when the top navigation moves to a second row. */
@media (max-width:1180px){
  .adminTopnav{flex:0 0 100%;}
}

/* Payroll payment details */
.payrollPaymentForm{
  width:100%;
  max-width:none;
  margin-top:10px;
}
.paymentDetailsSection{
  padding:18px 0 20px;
}
.paymentDetailsSection--summary{
  padding-top:0;
}
.payrollPaymentForm .sectionTitle{
  margin:10px 0 8px;
  font-size:16px;
  line-height:1.35;
  font-weight:800;
}
.paymentAccount{
  margin-top:0;
  border-top:1px solid var(--line);
}
.paymentDetailsGrid{
  width:min(100%, 900px);
  margin:14px auto 0;
  display:grid;
  grid-template-columns:minmax(190px, 230px) minmax(0, 1fr);
  gap:10px 12px;
  align-items:center;
}
.paymentDetailsGrid > .label{
  margin:0;
  text-align:right;
  color:var(--ds-ink-soft);
  font-size:12.5px;
  font-weight:500;
}
.paymentDetailsGrid > .input{
  width:min(100%, 586px);
  min-height:42px;
  font-size:14px;
}
.paymentBsbField{width:min(100%,586px)}
.paymentBsbField .input{width:100%;min-height:42px;font-size:14px}
.paymentDetailsGrid [data-bsb-status]{margin-top:5px}
.paymentInlineField{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.paymentInlineField .input{
  width:min(100%, 586px);
  max-width:586px;
  flex:0 1 586px;
  min-height:42px;
  font-size:14px;
}
.paymentInlineField span{
  white-space:nowrap;
  font-size:14px;
}
.paymentAllocation{
  width:min(100%, 586px);
  display:grid;
  grid-template-columns:minmax(150px, .8fr) minmax(140px, 1fr);
  gap:8px;
}
.paymentAllocation .input{
  min-height:42px;
  font-size:14px;
}
.paymentBalance{
  min-height:42px;
  display:flex;
  align-items:center;
  font-weight:400;
  color:var(--ink);
  font-size:14px;
}
.paymentDetailsActions{
  width:min(100%, 900px);
  margin:0 auto;
}

@media (max-width:900px){
  .paymentDetailsGrid{
    grid-template-columns:minmax(190px, 34%) minmax(0, 1fr);
  }
}

@media (max-width:700px){
  .paymentDetailsSection{padding:16px 0 18px;}
  .payrollPaymentForm .sectionTitle{font-size:16px;}
  .paymentDetailsGrid{grid-template-columns:1fr;gap:6px;margin-top:10px;}
  .paymentDetailsGrid > .label{text-align:left;margin-top:8px;}
  .paymentDetailsGrid > .input{width:100%;max-width:none;}
  .paymentInlineField{align-items:flex-start;flex-direction:column;gap:6px;}
  .paymentInlineField .input{width:100%;max-width:none;}
  .paymentInlineField span{white-space:normal;}
  .paymentAllocation{width:100%;grid-template-columns:1fr;}
}

/* v13 employee capability tags */
.tagSettingsPage{max-width:1080px}.tagSettingsLayout{display:grid;grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr);gap:18px;align-items:start}.tagCreateCard{position:sticky;top:112px}.tagSettingsList{display:grid;gap:9px}.tagSettingsRow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:10px;border:1px solid #e4e7ec;border-radius:10px;background:#f8fafc}.employeeTagChecklist{display:flex;gap:8px;flex-wrap:wrap}.employeeTagOption{padding:9px 11px;border:1px solid #d0d5dd;border-radius:999px;background:#fff}.employeeTagChips{display:flex;gap:5px;flex-wrap:wrap;margin:5px 0 3px}.employeeTagChip{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#f3f1ff;color:#5947d6;font-size:11px;font-weight:750}.faceAdminIntro{display:flex;justify-content:space-between;gap:16px}
@media(max-width:760px){.tagSettingsLayout{grid-template-columns:1fr}.tagCreateCard{position:static}.tagSettingsRow{grid-template-columns:1fr 1fr}.tagSettingsRow .input{grid-column:1/-1}}

/* v12 face registration */
.faceStatusGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.faceEmployeeNumber{font-size:1.25rem;font-weight:800;letter-spacing:.08em;margin-top:6px}.faceCaptureGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:18px;align-items:start}.faceCameraFrame{position:relative;overflow:hidden;width:100%;height:min(50vh,410px);min-height:300px;max-width:680px;justify-self:center;border-radius:16px;background:#101828;display:grid;place-items:center}.faceCameraFrame video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.faceCameraGuide{position:absolute;width:min(76%,430px);aspect-ratio:.84;border:4px solid rgba(255,255,255,.92);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.14)}.faceCapturePanel{display:flex;flex-direction:column;gap:10px}.faceCapturePanel [data-face-capture]{min-height:54px;font-size:1rem;font-weight:800}.faceSampleList{display:grid;gap:8px;margin-bottom:6px}.faceSample{display:flex;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #e4e7ec;border-radius:10px;background:#f8fafc}.faceSample strong{color:#667085}.faceSample.is-complete{border-color:#abefc6;background:#ecfdf3}.faceSample.is-complete strong{color:#067647}
.faceCaptureGuidance{margin-top:12px;padding:11px 13px;border:1px solid #d6bbfb;border-radius:10px;background:#f9f5ff;color:#42307d;font-size:.9rem;font-weight:700;line-height:1.4}
.mobileFaceClockNotice{max-width:560px;padding:12px 14px;border:1px solid #fedf89;border-radius:10px;background:#fffaeb;color:#7a2e0e;text-align:center}.mobileFaceClockTrigger{min-width:190px;min-height:56px;font-size:1rem;font-weight:850}.mobileFaceClockProcess{width:min(100%,440px);margin:16px auto 0;text-align:center}.mobileFaceClockProcess[hidden]{display:none!important}.mobileFaceClockCamera{position:relative;width:min(100%,420px);height:min(42vh,330px);margin:0 auto 10px;overflow:hidden;border-radius:16px;background:#101828}.mobileFaceClockCamera video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.mobileFaceClockCamera .faceCameraGuide{width:min(76%,300px)}.mobileFaceClockStatus{margin:8px 0 5px;font-weight:800;color:#344054}.mobileFaceClockActions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:10px}.privateKioskLivenessNote{margin-top:10px;text-align:center}
@media(max-width:760px){.faceStatusGrid,.faceCaptureGrid{grid-template-columns:1fr}.faceCameraFrame{height:330px;min-height:280px}.faceCameraGuide{width:min(80%,360px)}.faceCapturePanel [data-face-capture]{position:sticky;bottom:max(10px,env(safe-area-inset-bottom));z-index:3;box-shadow:0 8px 20px rgba(16,24,40,.18)}.mobileFaceClockCamera{height:300px}.mobileFaceClockActions{display:grid;grid-template-columns:1fr}.mobileFaceClockActions .btn{width:100%}}

/* v12 privacy-first employee-number Kiosk */
.clockKioskBody--private{background:#f2f4f7;color:#101828}.privateKioskShell{min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:flex;flex-direction:column}.privateKioskHeader{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:980px;width:100%;margin:0 auto}.privateKioskBrand{font-size:1.3rem;font-weight:800}.privateKioskDate{color:#667085;margin-top:3px}.privateKioskMain{flex:1;display:grid;place-items:center;padding:28px 0}.privateKioskCard{width:min(620px,100%);background:#fff;border:1px solid #e4e7ec;border-radius:24px;padding:clamp(24px,5vw,44px);box-shadow:0 12px 32px rgba(16,24,40,.08)}.privateKioskCard h1{margin:12px 0 8px;font-size:clamp(1.8rem,4vw,2.6rem)}.privateKioskCard p{color:#667085;margin:0 0 24px}.privateKioskStep{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f3f1ff;color:#5947d6;font-weight:800}.privateKioskLookup{display:grid;gap:12px}.privateKioskNumber{font-size:1.45rem;text-transform:uppercase;letter-spacing:.12em;text-align:center;min-height:62px}.privateKioskNotice{margin-top:16px;padding:12px 14px;border-radius:10px;background:#fffaeb;border:1px solid #fedf89;color:#7a2e0e}.privateKioskBack{display:inline-block;margin-bottom:18px;color:#5947d6;text-decoration:none;font-weight:650}.privateKioskNumberLabel{text-align:center;color:#667085;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}.privateKioskNumberValue{text-align:center;font-size:1.65rem;font-weight:800;letter-spacing:.12em;margin:5px 0 18px}.privateKioskActionSummary{display:grid;gap:4px;padding:14px;border:1px solid #d0d5dd;border-radius:12px;background:#f8fafc;margin-bottom:16px}.privateKioskActionSummary strong{font-size:1.15rem}.privateKioskActionSummary span{color:#667085}.privateKioskCamera{position:relative;height:min(52vh,400px);overflow:hidden;border-radius:16px;background:#101828}.privateKioskCamera video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.privateKioskCameraGuide{position:absolute;inset:12% 27%;border:3px solid rgba(255,255,255,.88);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.14)}.privateKioskCameraActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.privateKioskFallback{margin-top:18px;border-top:1px solid #e4e7ec;padding-top:14px}.privateKioskFallback summary{cursor:pointer;color:#475467;font-weight:650}.privateKioskPinForm{display:grid;gap:10px;margin-top:12px}.privateKioskPinForm .input{font-size:1.3rem;text-align:center;letter-spacing:.25em}
@media(max-width:600px){.privateKioskHeader{align-items:flex-start}.privateKioskCard{border-radius:18px;padding:22px}.privateKioskCameraActions{grid-template-columns:1fr}.privateKioskCamera{height:330px}}

/* v11.12 shift change audit */
.shiftAuditPage{max-width:1440px;margin:0 auto}.shiftAuditCard{padding:0;overflow:hidden}.shiftAuditTable{min-width:1040px;margin:0}.shiftAuditTable th{white-space:nowrap}.shiftAuditTable td{vertical-align:top}.shiftAuditDetails{margin-top:7px}.shiftAuditDetails summary{cursor:pointer;color:var(--color-primary,#6757e8);font-size:.82rem;font-weight:700}.shiftAuditDetails dl{margin:8px 0 0;display:grid;gap:6px}.shiftAuditDetails dl>div{display:grid;grid-template-columns:minmax(100px,150px) 1fr;gap:10px;padding:7px 9px;border:1px solid var(--color-border,#e4e7ec);border-radius:8px;background:var(--color-surface-muted,#f8fafc)}.shiftAuditDetails dt{font-size:.78rem;font-weight:700;color:var(--color-text-secondary,#475467)}.shiftAuditDetails dd{margin:0;display:flex;gap:8px;align-items:flex-start;word-break:break-word;font-size:.78rem}

/* v11.15 super-admin all-location Kiosk control */
.adminKioskBody{margin:0;background:#f4f6f8;color:#101828}.adminKioskShell{min-height:100dvh;padding:clamp(16px,2.5vw,30px)}.adminKioskHeader{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1500px;margin:0 auto 16px}.adminKioskTitle{font-size:1.55rem;font-weight:850}.adminKioskToolbar{max-width:1500px;margin:0 auto 16px;display:grid;grid-template-columns:minmax(190px,280px) minmax(190px,280px) 1fr;gap:14px;align-items:end}.adminKioskToolbar .field{margin:0}.adminKioskMetric{justify-self:end;display:grid;gap:4px;text-align:right}.adminKioskMetric span{font-size:.8rem;color:#667085}.adminKioskMetric strong{font-size:1.7rem}.adminKioskBoard{max-width:1500px;margin:0 auto;display:grid;gap:16px}.adminKioskLayer{padding:16px;border:1px solid #dfe3e8;border-radius:16px;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.04)}.adminKioskLayer>h2{margin:0 0 12px;font-size:1.15rem}.adminKioskSubLayer+ .adminKioskSubLayer{margin-top:14px;padding-top:14px;border-top:1px solid #e4e7ec}.adminKioskSubLayer h3{margin:0 0 9px;font-size:.9rem;color:#475467}.adminKioskGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}.adminKioskEmployee{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid #e4e7ec;border-left:4px solid #98a2b3;border-radius:12px;background:#fff}.adminKioskEmployee--clocked_in{border-left-color:#12b76a;background:#ecfdf3}.adminKioskEmployee--not_clocked_in{border-left-color:#f04438;background:#fff5f4}.adminKioskEmployee--scheduled{border-left-color:#7f56d9}.adminKioskEmployee--clocked_out{border-left-color:#667085;background:#f8fafc}.adminKioskEmployee__main{display:grid;gap:5px;min-width:0}.adminKioskEmployee__main>strong{font-size:1rem}.adminKioskEmployee__main>span{font-size:.78rem;color:#667085}.adminKioskEmployee__tags{display:flex;gap:5px;flex-wrap:wrap}.adminKioskEmployee__tags span{padding:3px 6px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:.7rem}.adminKioskEmployee__action{flex:0 0 auto}.adminKioskEmployee__action .btn{min-width:88px}
@media(max-width:760px){.adminKioskToolbar{grid-template-columns:1fr}.adminKioskMetric{justify-self:start;text-align:left}.adminKioskHeader{align-items:flex-start}.adminKioskGrid{grid-template-columns:1fr}.adminKioskEmployee{align-items:flex-start}.adminKioskEmployee__action .btn{min-width:82px}}

/* v11.15 manager clock anomaly reminders */
.clockAlertBackdrop{position:fixed;inset:0;z-index:120;background:rgba(16,24,40,.48);display:grid;place-items:center;padding:18px}.clockAlertModal{width:min(760px,100%);max-height:min(82dvh,760px);overflow:auto;border-radius:18px;background:#fff;padding:20px;box-shadow:0 24px 60px rgba(16,24,40,.24)}.clockAlertModal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}.clockAlertModal__head h2{margin:5px 0 0;font-size:1.35rem}.clockAlertModal__eyebrow{color:#b42318;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.clockAlertList{display:grid;gap:9px;margin-bottom:14px}.clockAlertItem{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;border:1px solid #fda29b;border-left:5px solid #f04438;border-radius:12px;background:#fff5f4}.clockAlertItem p{margin:5px 0 7px;color:#475467;line-height:1.35}.clockAlertItem--overdue_clock_out{border-color:#fec84b;border-left-color:#f79009;background:#fffaeb}.clockAlertItem--auto_midnight_clock_out{border-color:#d6bbfb;border-left-color:#7f56d9;background:#f9f5ff}
@media(max-width:620px){.clockAlertModal__head,.clockAlertItem{align-items:stretch;flex-direction:column}.clockAlertItem form .btn{width:100%}}

/* v11.17 schedule workload and estimated cost summaries */
.scheduleDayHeader__summary{
  width:100%;
  margin-top:4px;
  font-size:11px;
  line-height:1.35;
  font-weight:750;
  color:var(--ds-muted);
  text-align:center;
  overflow-wrap:anywhere;
}
.scheduleDayHeader--today .scheduleDayHeader__summary{color:#344054;}
.scheduleSectionTitle{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 12px 7px;
}
.scheduleSectionTitle__label{flex:0 0 auto;}
.scheduleSectionTitle__summary{
  flex:0 0 auto;
  font-size:11px;
  font-weight:750;
  letter-spacing:0;
  text-transform:none;
  color:var(--ds-ink-soft);
  white-space:nowrap;
}
@media (max-width: 800px){
  .scheduleDayHeader__summary{font-size:10px;}
  .scheduleSectionTitle{align-items:center;gap:7px;}
  .scheduleSectionTitle__summary{white-space:normal;}
}

/* v11.22 face camera runtime diagnostics */
.faceRuntimeNotice{margin-top:10px;padding:10px 12px;border:1px solid #ccd6e4;border-radius:10px;background:var(--ds-info-soft);color:#2b4560;font-size:13px;line-height:1.45;}
.faceRuntimeNotice[hidden]{display:none!important;}
.faceRuntimeNotice--error{border-color:#ecc6c4;background:var(--ds-danger-soft);color:#7a232a;}
.faceRuntimeNotice--ok{border-color:#cfe0cd;background:var(--ds-success-soft);color:#2f5938;}
.faceRuntimeNotice--info{border-color:#ccd6e4;background:var(--ds-info-soft);color:#2b4560;}