/* ---------- My Attendance & Leaves (Figma 22316:139915 home · 138198 logs · 138377 types · 138427 history ·
   141323 request · 140045 request sheet · 139862 holidays) ---------- */
.screen.at { background: var(--goku); scrollbar-width: none; }
.screen.at::-webkit-scrollbar { display: none; }
.at-head { display: flex; align-items: center; gap: 8px; height: 40px; }
.at-head h1 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-back, .at-icon-btn { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.at-back:hover, .at-icon-btn:hover { background: var(--heles); }
.at-card { background: var(--gohan); border-radius: var(--radius-s-sm); overflow: hidden; }
.at-rule { display: block; height: 1px; background: var(--beerus); }
.at-empty { padding: 12px 0; text-align: center; font: 400 14px/20px var(--font); color: var(--trunks); }
.at .hscroll { scroll-snap-type: none; }

/* Home */
.at-home { display: flex; flex-direction: column; gap: 24px; padding: calc(var(--sb-dash) + 24px) 20px 24px; }
.at-home-body { display: flex; flex-direction: column; gap: 24px; }
.at-qas { display: flex; gap: 8px; padding: 12px 0; }
.at-qa { width: 87.5px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.at-qa-ico {
  display: grid; place-items: center; padding: 12px; border: 1px solid var(--gohan); border-radius: 16px; background: var(--gohan);
  filter: drop-shadow(0 1px 4.95px rgba(111, 111, 111, 0.15)); transition: background .15s;
}
.at-qa:hover .at-qa-ico { background: #FAFAFA; }
.at-qa-label { height: 32px; font: 500 12px/16px var(--font); color: var(--bulma); text-align: center; }

.at-today { display: flex; flex-direction: column; gap: 16px; padding: 12px; }
.at-today-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.at-today-head span { flex: 1; min-width: 0; font: 700 14px/24px var(--font); color: var(--bulma); }
.at-punch { display: flex; align-items: center; }
.at-punch > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.at-punch > div.r { align-items: flex-end; text-align: right; }
.at-punch span { font: 400 14px/24px var(--font); color: var(--trunks); }
.at-punch b { font: 700 18px/28px var(--font); white-space: nowrap; }
.at-punch b.in { color: var(--roshi); }
.at-punch b.missing { color: rgba(211, 48, 48, 0.56); }

.at-card-head { display: flex; align-items: center; gap: 12px; padding: 12px; }
.at-card-title { font: 700 16px/24px var(--font); color: var(--bulma); white-space: nowrap; }
.at-pending .at-card-title + .at-count { margin-left: -4px; }
.at-count {
  width: 20px; height: 20px; border-radius: 100px; background: var(--piccolo); display: grid; place-items: center;
  font: 500 12px/16px var(--font); color: var(--gohan);
}
.at-link { margin-left: auto; font: 700 16px/24px var(--font); color: var(--piccolo); white-space: nowrap; }
.at-link.sm { font-size: 14px; line-height: 20px; }
.at-link:hover { text-decoration: underline; }
.at-pending-list { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.at-pend {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border-radius: 12px; text-align: left;
  background: linear-gradient(var(--krillin-10), var(--krillin-10)), var(--gohan);
}
.at-pend:hover { background: linear-gradient(rgba(255, 179, 25, 0.2), rgba(255, 179, 25, 0.2)), var(--gohan); }
.at-pend-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.at-pend-type { font: 700 10px/16px var(--font); color: var(--trunks); }
.at-pend-date { font: 400 16px/24px var(--font); color: var(--bulma); }
.at-pend-date b { font-weight: 700; }

.at-balance { display: flex; flex-direction: column; gap: 16px; width: 100%; padding: 16px; border-radius: 16px; text-align: left; }
.at-balance-head { display: flex; justify-content: space-between; gap: 2px; font: 700 16px/24px var(--font); color: var(--bulma); }
.at-chart { display: flex; align-items: center; gap: 40px; width: 100%; }
.at-donut { position: relative; flex: none; width: 124px; height: 124px; }
.at-donut-svg { display: block; }
.at-donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap; }
.at-donut-mid b { margin-bottom: -2px; font: 700 14px/24px var(--font); color: var(--bulma); }
.at-donut-mid span { font: 400 12px/16px var(--font); color: var(--trunks); }
.at-stats { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.at-stat { min-width: 0; display: flex; flex-direction: column; }
.at-stat-label { display: flex; align-items: center; gap: 4px; font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.at-stat-value { font: 700 18px/28px var(--font); color: var(--bulma); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-dot { width: 6px; height: 6px; border-radius: 100px; flex: none; }

.at-hols { display: flex; flex-direction: column; }
.at-hol-row { gap: 8px; padding: 12px; }
.at-hol-card { width: 259px; display: flex; align-items: center; gap: 24px; padding: 16px; border-radius: 8px; background: var(--goku); text-align: left; }
.at-hol-card:hover { background: #EFEFEF; }
.at-hol-card img, .at-hol-item img { flex: none; object-fit: cover; }
.at-hol-text { min-width: 0; display: flex; flex-direction: column; gap: 8px; white-space: nowrap; }
.at-hol-card .at-hol-text b { font: 700 14px/20px var(--font); color: var(--bulma); }
.at-hol-card .at-hol-text span { font: 400 12px/16px var(--font); color: var(--zeno); }

/* Pills (logs + history switchers) */
.at-pills { gap: 8px; padding: 12px 20px; margin: 0 -20px; }
.at-pill {
  flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px;
  font: 700 14px/24px var(--font); color: var(--trunks); white-space: nowrap;
}
.at-pill:hover { color: var(--bulma); }
.at-pill.is-on { background: var(--gohan); color: var(--bulma); }
.at-badge {
  min-width: 16px; max-width: 34px; padding: 0 4px; border-radius: 100px; background: var(--piccolo);
  font: 500 12px/16px var(--font); color: var(--gohan); text-align: center;
}

/* Logs */
.at-logs { padding: calc(var(--sb-dash) + 8px) 20px 24px; }
.at-logs .at-head { height: 42px; gap: 16px; }
.at-logs-body { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.at-logs .at-pills { position: sticky; top: 0; z-index: 2; background: var(--goku); }
.at-logs .at-today { padding: 12px; }
.at-logstats { display: flex; align-items: stretch; gap: 16px; padding: 16px; }
.at-logstats .at-stat { flex: 1; gap: 2px; }
.at-logstats .at-stat-label { font: 700 14px/24px var(--font); }
.at-vrule { flex: none; width: 1px; background: var(--beerus); }
.at-table { padding: 12px 0 24px; }
.at-table-head {
  display: flex; justify-content: space-between; gap: 24px; padding: 4px 16px; border-radius: 12px 12px 0 0;
  background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); font: 400 14px/24px var(--font); color: var(--trunks);
}
.at-table-body { display: flex; flex-direction: column; align-items: center; background: var(--gohan); border-radius: 0 0 12px 12px; overflow: hidden; padding-bottom: 4px; }
.at-log {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px;
  font: 400 16px/24px var(--font); color: var(--trunks); white-space: nowrap;
}
.at-log:not(.in) { width: calc(100% - 8px); border-radius: 8px; }
.at-log.reg { width: 100%; border-radius: 0; }
.at-log-date { flex: none; width: 100px; overflow: hidden; text-overflow: ellipsis; }
.at-log-times { flex: none; width: 172px; display: flex; justify-content: flex-end; gap: 8px; text-align: right; }
.at-log-tag { display: flex; align-items: center; gap: 4px; font: 400 12px/16px var(--font); }
.at-log-note { font: 400 12px/16px var(--font); color: rgba(0, 0, 0, 0.25); }
.at-log.off { background: var(--goku); }
.at-log.leave { background: #E9F6F6; }
.at-log.leave .at-log-tag { color: var(--hit); }
.at-log.missing { background: rgba(211, 48, 48, 0.12); }
.at-log.missing .at-log-tag, .at-log.missing .pin { color: var(--dodoria); }
.at-log.late { background: var(--roshi-10); }
.at-log.late .at-log-tag, .at-log.late .pin { color: var(--roshi); }
.at-log.holiday { background: #FFFACD; }
.at-log.holiday .at-log-tag { color: var(--bulma); }
.at-log.reg .at-log-tag { color: var(--whis); }
.at-range { display: flex; flex-direction: column; gap: 12px; }
.at-range-field { display: flex; flex-direction: column; gap: 4px; font: 400 12px/16px var(--font); color: var(--trunks); }
.at-range-field input {
  height: 48px; padding: 0 12px; border: 1px solid var(--beerus); border-radius: 8px; background: var(--gohan);
  font: 400 16px/24px var(--font); color: var(--bulma);
}
.at-range-field input:focus { outline: none; border-color: var(--piccolo); }
.at-range-err { font: 400 12px/16px var(--font); color: var(--dodoria); }

/* Leave Balance — types */
.at-types { display: flex; flex-direction: column; gap: 32px; padding: calc(var(--sb-dash) + 8px) 20px 24px; }
.at-types .at-head { height: 42px; gap: 16px; }
.at-type-list { display: flex; flex-direction: column; gap: 6px; }
.at-type { display: flex; align-items: center; gap: 8px; width: 100%; padding: 16px; border-radius: 16px; background: var(--gohan); text-align: left; }
.at-type:hover { background: #FAFAFA; }
.at-type-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.at-type-text b { font: 700 16px/24px var(--font); color: var(--bulma); }
.at-type-text span { font: 400 14px/20px var(--font); color: var(--trunks); }

/* History */
.at-hist { padding: calc(var(--sb-dash) + 12px) 20px 24px; }
.at-hist .at-pills { margin-top: 12px; }
.at-hist-body { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.at-chips { display: flex; gap: 4px; }
.at-chip {
  display: flex; align-items: center; gap: 4px; height: 32px; padding: 4px 8px 4px 12px; border-radius: 4px; background: var(--gohan);
  font: 400 14px/24px var(--font); color: var(--bulma); white-space: nowrap;
}
.at-chip:hover { background: #FAFAFA; }
.at-chip.is-on { background: var(--piccolo); color: var(--gohan); }
.at-summary { padding: 16px; border-radius: 16px; }
.at-apps { display: flex; flex-direction: column; gap: 8px; }
.at-app { display: flex; align-items: flex-start; gap: 16px; width: 100%; padding: 12px 16px; border-radius: 8px; background: var(--gohan); text-align: left; }
.at-app:hover { background: #FAFAFA; }
.at-app-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.at-app-text b { font: 700 16px/24px var(--font); color: var(--bulma); }
.at-app-text span { font: 400 14px/24px var(--font); color: #5D626C; }
.at sup { font-size: 10.32px; line-height: 0; vertical-align: 5px; }
.at-tag { flex: none; padding: 4px 8px; border-radius: 4px; font: 400 12px/16px var(--font); white-space: nowrap; }
.at-tag.approved { background: var(--roshi-10); color: var(--roshi); }
.at-tag.pending { background: var(--krillin-10); color: var(--krillin); }
.at-tag.rejected { background: rgba(211, 48, 48, 0.12); color: var(--dodoria); }
.at-tag.withdrawn { background: var(--heles); color: var(--trunks); }
.at-tag.solid { color: var(--gohan); }
.at-tag.solid.approved { background: var(--roshi); }
.at-tag.solid.pending { background: var(--krillin); }
.at-tag.solid.rejected { background: var(--dodoria); }
.at-tag.solid.withdrawn { background: var(--trunks); }

/* Request detail page */
.at-req-page { display: flex; flex-direction: column; gap: 16px; padding: calc(var(--sb-dash) + 24px) 20px 20px; }
.at-req-head { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.at-req-head .at-back img { transform: rotate(180deg); }
.at-req-head .at-icon-btn { width: 40px; height: 40px; }
.at-req-details { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }
.at-banner { padding: 12px 24px; border-radius: 4px; font: 400 12px/16px var(--font); color: var(--bulma); }
.at-banner.pending { background: var(--krillin-10); }
.at-banner.approved { background: var(--roshi-10); color: var(--roshi); }
.at-banner.rejected { background: rgba(211, 48, 48, 0.12); color: var(--dodoria); }
.at-banner.withdrawn { background: var(--heles); color: var(--trunks); }
.at-req-sec { display: flex; flex-direction: column; gap: 8px; }
.at-sec-title { font: 700 14px/24px var(--font); color: var(--bulma); }
.at-req-sec > .at-sec-title { padding: 0 16px; }
.at-req-inner { display: flex; flex-direction: column; gap: 24px; padding: 0 16px; }
.at-dbox-wrap { display: flex; flex-direction: column; gap: 4px; }
.at-dbox { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 8px; background: var(--goku); }
.at-dbox-row { display: flex; align-items: center; gap: 8px; font: 400 16px/24px var(--font); color: var(--bulma); }
.at-dbox-row span:first-child { flex: 1; min-width: 0; }
.at-dbox-row span:last-child { white-space: nowrap; }
.at-dbox-rule { height: 2px; background: var(--gohan); }
.at-dbox-note { padding: 0 12px; font: 400 14px/24px var(--font); color: var(--trunks); }
.at-reason { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; font: 400 12px/16px var(--font); color: var(--trunks); }
.at-reason b { font-weight: 700; color: var(--bulma); }
.at-box { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.at-files { display: flex; flex-direction: column; gap: 16px; }
.at-file { display: flex; align-items: center; gap: 12px; }
.at-file-thumb { flex: none; border: 0.5px solid rgba(0, 0, 0, 0.25); border-radius: 4px; object-fit: cover; }
.at-file-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 400 14px/24px var(--font); color: var(--bulma); }
.at-file-text small { font: 400 12px/16px var(--font); color: var(--trunks); }
.at-view { flex: none; font: 400 12px/16px var(--font); color: var(--piccolo); text-decoration: underline; }
.at-timeline { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.at-timeline li { position: relative; display: grid; grid-template-columns: 12px 1fr; column-gap: 12px; row-gap: 4px; align-items: center; }
.at-timeline li i { width: 12px; height: 12px; border-radius: 9999px; background: rgba(92, 51, 207, 0.56); }
.at-timeline li.pending i { background: rgba(255, 179, 25, 0.56); }
.at-timeline li.approved i { background: rgba(46, 125, 50, 0.56); }
.at-timeline li.rejected i { background: rgba(211, 48, 48, 0.56); }
.at-timeline li p { font: 400 14px/24px var(--font); color: var(--bulma); }
.at-timeline li p b { font-weight: 700; }
.at-timeline li small { grid-column: 2; font: 400 12px/16px var(--font); color: #5D626C; }
.at-timeline li:not(:last-child)::after {
  content: ""; position: absolute; left: 5px; top: 20px; bottom: -20px; width: 2px; background: var(--beerus);
}
.at-peers { display: flex; flex-direction: column; gap: 8px; }
.at-peers-title { padding: 0 8px; font: 700 16px/24px var(--font); color: var(--bulma); }
.at-peer-row { display: flex; }
.at-peer { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; text-align: center; }
.at-peer-av {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--beerus); background: var(--jiren);
  display: grid; place-items: center; font: 700 18px/24px var(--font); color: var(--bulma);
}
.at-peer-name { width: 100%; font: 400 12px/16px var(--font); color: var(--bulma); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-peer-kind { width: 100%; font: 400 10px/16px var(--font); color: var(--piccolo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-final { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 8px; }
.at-final.approved { background: var(--roshi-10); }
.at-final.rejected { background: rgba(211, 48, 48, 0.12); }
.at-final p { font: 700 14px/24px var(--font); color: var(--bulma); }
.at-final span { font: 400 14px/24px var(--font); color: var(--trunks); }
.at-danger { background: var(--dodoria); }

/* Request Detail sheet */
.at-sheet { display: flex; flex-direction: column; gap: 24px; padding-top: 0; }
.at-person { display: flex; align-items: center; gap: 8px; }
.at-person-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #F2A28F; }
.at-person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.at-person-row { display: flex; align-items: center; gap: 10px; }
.at-person-row b { flex: 1; min-width: 0; font: 700 16px/24px var(--font); color: #0C1322; }
.at-person-text > span { font: 400 12px/16px var(--font); color: #5D626C; }
.at-sbox-wrap { display: flex; flex-direction: column; gap: 4px; }
.at-sbox {
  display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 16px; border: 1.32px solid var(--beerus); border-radius: 8px;
  font: 400 16px/24px var(--font); color: var(--bulma);
}
.at-sbox img { flex: none; }
.at-sbox-date { min-height: 50px; }
.at-sbox-date span { white-space: nowrap; }
.at-dash { flex: 1; text-align: center; }
.at-sbox-note { padding: 0 8px; font: 400 14px/24px var(--font); color: var(--trunks); }
.at-sbox-text { flex: 1; min-width: 0; }
.at-sbox-files { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
.at-sbox-files-head { display: flex; align-items: center; gap: 8px; }
.at-sfile { display: flex; align-items: center; gap: 4px; padding-left: 24px; }
.at-sfile img { flex: none; border: 0.5px solid rgba(0, 0, 0, 0.25); border-radius: 4px; object-fit: cover; }
.at-sfile span { flex: 1; min-width: 0; font: 400 14px/24px var(--font); color: var(--trunks); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-sreason { display: flex; flex-direction: column; gap: 8px; }
.at-sreason > span { padding: 0 8px; font: 400 14px/20px var(--font); color: var(--trunks); }
.at-sreason p { padding: 16px; border-radius: 8px; background: var(--goku); font: 400 16px/24px var(--font); color: var(--bulma); }
.at-sheet-more { align-self: center; font: 700 14px/20px var(--font); color: var(--piccolo); }
.at-sheet-more:hover { text-decoration: underline; }
.at-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.at-preview img { width: 220px; height: auto; border: 0.5px solid rgba(0, 0, 0, 0.25); border-radius: 8px; }

/* Holidays */
.at-holidays { display: flex; flex-direction: column; gap: 24px; padding: calc(var(--sb-dash) + 12px) 20px 24px; }
.at-hol-list { display: flex; flex-direction: column; gap: 8px; }
.at-hol-item { display: flex; align-items: center; gap: 24px; padding: 16px; border-radius: 8px; background: var(--gohan); }
.at-hol-item .at-hol-text b { font: 700 16px/24px var(--font); color: var(--bulma); }
.at-hol-item .at-hol-text span { font: 400 14px/20px var(--font); color: var(--zeno); }

/* Tall pages scroll: never let flex columns squash their rows. */
.screen.at > *, .at-home-body > *, .at-logs-body > *, .at-type-list > *, .at-hist-body > *, .at-apps > *,
.at-req-page > *, .at-hol-list > *, .at-table-body > * { flex-shrink: 0; }