/* Time Off app: dashboard balances, month calendar, team calendar, request page. Tokens only; logical properties for RTL. */
.off-sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--lc, var(--accent)); flex: 0 0 auto; }
.off-sw.pending { background: repeating-linear-gradient(45deg, var(--info) 0 3px, var(--panel) 3px 6px); border: 1px solid var(--info); }
.off-sw.hol { background: var(--warn); opacity: .75; }
.off-type { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.off-reason { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.off-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; min-height: 38px; }
.off-asof { display: inline-flex; align-items: center; gap: 8px; }
.off-sub { margin: 14px 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.off-empty { padding: 30px 0; }
.data-table tr.off-row-pending td { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.off-bal-cell { display: grid; justify-items: end; line-height: 1.15; }

/* balances cards */
.off-bal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.off-bal { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-top: 4px solid var(--lc, var(--accent)); border-radius: var(--r); background: var(--panel-2); }
.off-bal-top { display: flex; align-items: center; gap: 8px; }
.off-bal-num { display: flex; align-items: baseline; gap: 8px; }
.off-bal-num span { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.off-bal-track { height: 8px; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.off-bal-track i { display: block; height: 100%; background: var(--lc, var(--accent)); border-radius: 999px; }
.off-bal-empty { display: grid; gap: 4px; padding: 14px; }

/* approval queue */
.off-queue { display: grid; gap: 10px; }
.off-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }
.off-q-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 260px; }
.off-q-txt { display: grid; line-height: 1.3; min-width: 0; }
.off-q-act { display: flex; gap: 8px; }
.off-list { display: grid; gap: 8px; }
.off-li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.off-li div { display: grid; line-height: 1.25; min-width: 0; }

/* month grid (Saturday first) */
.off-week, .off-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.off-week { margin-bottom: 6px; text-align: center; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.off-day { min-height: 92px; padding: 6px 7px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); display: grid; gap: 3px; align-content: start; min-width: 0; }
.off-day.pad { border: 0; background: transparent; }
.off-day.rest { background: var(--panel-2); }
.off-day.hol { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.off-day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.off-day-top { display: flex; justify-content: space-between; gap: 4px; align-items: baseline; }
.off-day-top b { font-size: 13px; }
.off-hol { color: var(--warn-ink); font-weight: 700; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.off-chip { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 1px 6px; border-radius: 6px; border: 0; background: color-mix(in srgb, var(--lc) 18%, var(--panel)); color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; text-align: start; }
.off-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--lc); flex: 0 0 auto; }
.off-chip.pending { border: 1px dashed var(--lc); }

/* team calendar (reuses the .att-table look) */
.off-gantt .att-table .off-h-name { position: sticky; inset-inline-start: 0; z-index: 3; background: var(--panel); text-align: start; min-width: 170px; padding-inline: 4px 10px; border-inline-end: 1px solid var(--line-2); }
.off-h-day { min-width: 28px; }
.off-h-day span { display: block; color: var(--ink); } .off-h-day small { font-weight: 500; opacity: .7; }
.off-h-day.hol span { color: var(--warn-ink); } .off-h-day.today span { color: var(--accent-d); font-weight: 800; }
.off-h-day.rest, .off-g.rest { background: var(--panel-2); }
.off-g.hol { background: var(--warn-soft); }
.off-g { height: 38px; padding: 4px 1px !important; }
.off-bar { display: block; height: 100%; min-height: 24px; border-radius: 6px; background: var(--lc); }
.off-bar.pending { background: repeating-linear-gradient(45deg, var(--lc) 0 4px, color-mix(in srgb, var(--lc) 35%, var(--panel)) 4px 8px); }
.off-bar.half { height: 50%; margin-top: 6px; }
.off-gantt-wrap .att-legend { margin-bottom: 12px; }

/* request page */
.off-days { display: flex; align-items: baseline; gap: 8px; } .off-days b { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.off-preview { display: grid; gap: 4px; }
.off-tiers { display: grid; gap: 8px; }
.off-tiers input { width: 90px; }

@media (max-width: 720px) {
  .off-day { min-height: 64px; padding: 4px; }
  .off-chip { font-size: 10.5px; padding: 1px 4px; }
  .off-hol { display: none; }
  .off-week { font-size: 10px; }
  .off-q-act { width: 100%; } .off-q-act .btn { flex: 1; min-height: 44px; }
  .off-gantt .att-table .off-h-name { min-width: 120px; }
  .off-bal-grid { grid-template-columns: 1fr 1fr; }
}