/* attendance screens: styles for this module only. Loaded after index.html and theme.css, so a plain selector here wins ties. */

/* small gradient icon tile (card titles, site cards, list rows) */
.att-tic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--c1, #5B4CF0), var(--c2, #8F7DF6)); box-shadow: 0 6px 12px -8px rgba(var(--cg, 111, 99, 240), .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.att-tic svg { width: 15px; height: 15px; }
.att-ttl { display: inline-flex; align-items: center; gap: 10px; }
.att-thing { display: inline-flex; align-items: center; gap: 10px; }
.att-thing .att-tic { width: 30px; height: 30px; }

/* a dot in a tone */
.att-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 3px rgba(var(--cg), .14); }
.att-dot.is-rest { background: #E4E2F5; box-shadow: none; }

/* an inline pill with an icon (exception kind, times asked for, roster rules) */
.att-xc { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px 3px 7px; border-radius: 999px; color: var(--c1); background: rgba(var(--cg), .09); }
.att-xc svg { width: 13px; height: 13px; flex: none; }

/* bars: the shared split bar gets two more colours and a bigger size; a thin meter */
html .att-bar .off { background: linear-gradient(90deg, #64748B, #94A3B8); }
html .att-bar .hol { background: linear-gradient(90deg, #7C3AED, #A78BFA); }
html .att-bar.att-bar-lg { height: 12px; border-radius: 12px; }
.att-meter { height: 6px; margin-top: 6px; border-radius: 6px; background: rgba(var(--cg), .12); overflow: hidden; }
.att-meter i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
html #page.page-in :is(.att-meter i, .att-bar i) { animation: db-grow .9s var(--t-ease) .15s both; transform-origin: left; }
.att-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: #64748B; }
.att-leg span { display: inline-flex; align-items: center; gap: 7px; }
.att-leg b { color: #1E1B4B; font-weight: 600; }

/* Today: status ring card, facts, punch timeline, the week strip */
.att-now { display: flex; align-items: center; gap: 28px; }
.att-ring { position: relative; width: 132px; height: 132px; flex: none; }
.att-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.att-ring .trk { fill: none; stroke: rgba(var(--cg), .12); stroke-width: 10; }
.att-ring .val { fill: none; stroke: var(--c1); stroke-width: 10; stroke-linecap: round; }
.att-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.att-ring-c b { font-size: 20px; font-weight: 600; color: #1E1B4B; letter-spacing: -.01em; }
.att-ring-c span { font-size: 11px; color: #64748B; }
.att-state { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 26px; font-weight: 600; color: #1E1B4B; letter-spacing: -.01em; }
.att-state .att-dot { width: 11px; height: 11px; }
.att-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.att-fact { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #FAFAFF; min-width: 0; }
.att-fact > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #8F7DF6; }
.att-tl { position: relative; display: flex; flex-direction: column; gap: 12px; }
.att-tl li { position: relative; display: flex; align-items: center; gap: 12px; }
.att-tl li + li::before { content: ""; position: absolute; left: 14px; top: -12px; height: 12px; width: 2px; background: #ECEAFB; }
.att-tl-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--c1); background: rgba(var(--cg), .12); }
.att-tl-ic svg { width: 15px; height: 15px; }
.att-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.att-week button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0; border-radius: 12px; font-size: 11px; color: #64748B; background: rgba(var(--cg), .06); transition: background-color .15s, transform .15s; }
.att-week button:hover { background: rgba(var(--cg), .14); transform: translateY(-1px); }
.att-week i { width: 70%; height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.att-week b { font-size: 13px; color: #1E1B4B; font-weight: 600; }
.att-dev .hr-kic { margin-bottom: 4px; }

/* Register calendar: tinted day cells in the status tone */
.att-day { position: relative; height: 96px; text-align: left; border-radius: 12px; padding: 8px 9px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  background: rgba(var(--cg), .07); border: 1px solid rgba(var(--cg), .14); transition: transform .15s, box-shadow .2s, border-color .15s; }
.att-day::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--c1), var(--c2)); }
button.att-day:hover { transform: translateY(-1px); border-color: rgba(var(--cg), .4); box-shadow: 0 10px 20px -14px rgba(var(--cg), .7); }
.att-day.is-quiet { background: #FAFAFC; border-color: #EEEDF6; }
.att-day.is-quiet::before { display: none; }
.att-day.is-today { border-color: #6F63F0; box-shadow: 0 0 0 3px rgba(111, 99, 240, .16); }
.att-dn { font-size: 14px; font-weight: 600; color: #1E1B4B; }
.att-ds { display: flex; align-items: center; gap: 6px; min-height: 14px; font-size: 10.5px; font-weight: 600; color: var(--c1); white-space: nowrap; overflow: hidden; }
.att-ds span { overflow: hidden; text-overflow: ellipsis; }
.att-day.is-quiet .att-ds { color: #64748B; }

/* Exceptions: kind tiles that filter */
.att-ex { display: flex; align-items: center; gap: 10px; padding: 12px; text-align: left; }
.att-ex b { display: block; font-size: 20px; line-height: 1.1; color: #1E1B4B; }
.att-ex span span { display: block; font-size: 12px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-ex.is-zero { opacity: .6; }

/* Roster: shift legend and cells */
.att-shleg { display: flex; flex-wrap: wrap; gap: 8px; }
.att-shleg > span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #475569; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--hr-line); }
.att-shleg b { color: #1E1B4B; }
.att-sh { border-radius: 10px; }

/* check lists (roster rules, period lock) */
.att-checks { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: #475569; }
.att-checks li { display: flex; gap: 10px; align-items: flex-start; }
.att-checks li > svg { width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 50%; }
.att-checks .is-ok > svg { color: #059669; background: #ECFDF5; }
.att-checks .is-warn > svg { color: #D97706; background: #FFFBEB; }
.att-checks .is-bad > svg { color: #E11D48; background: #FFF1F2; }

/* Period lock card */
.att-lock .att-foot { border-top: 1px solid rgba(111, 99, 240, .08); background: #FAFAFF; }
.att-hash { background: #FAFAFF; border: 1px solid var(--hr-line); color: #475569; }
.att-brk { word-break: break-all; }

/* Policies: icons beside the labels */
.att-dl dt svg { width: 13px; height: 13px; color: #8F7DF6; }

/* Processing runs: one bar per night */
.att-runs { display: flex; gap: 4px; align-items: flex-end; height: 34px; }
.att-runs i { flex: 1; height: 100%; border-radius: 5px; }
.att-runs .on { background: linear-gradient(180deg, #34D399, #059669); }
.att-runs .miss { background: linear-gradient(180deg, #FB7185, #E11D48); }

@media (max-width: 900px) {
  .att-today { flex-direction: column; align-items: stretch; }
  .att-today > .shrink-0 { width: 100%; max-width: 300px; margin: 0 auto; }
  .att-now { flex-direction: column; align-items: flex-start; gap: 16px; }
  .att-facts { grid-template-columns: minmax(0, 1fr); }
  .att-site { flex-direction: column; }
  #page .att-exc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page .att-tiles.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .att-cal { padding: 10px; }
  .att-cal .grid { gap: 4px; }
  .att-day { height: 54px; padding: 5px; border-radius: 9px; }
  .att-day .att-dt, .att-ds span, .att-day svg { display: none; }
  .att-dn { font-size: 12px; }
  #page .att-tiles.grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html #page.page-in :is(.att-meter i, .att-bar i) { animation: none; }
  .att-day, .att-week button { transition: none; }
}