/* Insights: timesheets, attendance, sprints, activity, reports, analytics, automations */

/* ---- charts ---- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.ch-grid line { stroke: var(--border); stroke-dasharray: 3 4; }
.ch-axis { stroke: var(--border-strong); }
.ch-bar rect { transform-box: fill-box; transform-origin: bottom; }
.ch-anim { animation: ch-grow 700ms var(--ease) both; }
.ch-d1 { animation-delay: 40ms; } .ch-d2 { animation-delay: 80ms; } .ch-d3 { animation-delay: 120ms; } .ch-d4 { animation-delay: 160ms; }
.ch-d5 { animation-delay: 200ms; } .ch-d6 { animation-delay: 240ms; } .ch-d7 { animation-delay: 280ms; } .ch-d8 { animation-delay: 320ms; }
.ch-d9 { animation-delay: 360ms; } .ch-d10 { animation-delay: 400ms; } .ch-d11 { animation-delay: 440ms; }
.ch-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ch-draw 1100ms var(--ease) forwards; }
.ch-dashed { stroke-dasharray: 6 5 !important; stroke-dashoffset: 0 !important; animation: none; opacity: .55; stroke-width: 2; }
.ch-dot { stroke: var(--surface); stroke-width: 1.5; animation: pop-in var(--dur) var(--ease) both; animation-delay: 700ms; }
.ch-slice { transform-box: view-box; transform-origin: 100px 100px; animation: ch-spin 700ms var(--ease) both; stroke: var(--surface); stroke-width: 1; }
.ch-drill { cursor: pointer; }
.ch-drill:hover rect, .ch-drill:hover, .ch-drill:focus-visible { opacity: .82; }
.ch-c0 { fill: var(--brand); stroke: var(--brand); color: var(--brand); }
.ch-c1 { fill: #84cc16; stroke: #84cc16; color: #84cc16; }
.ch-c2 { fill: #10b981; stroke: #10b981; color: #10b981; }
.ch-c3 { fill: #f59e0b; stroke: #f59e0b; color: #f59e0b; }
.ch-c4 { fill: #ec4899; stroke: #ec4899; color: #ec4899; }
.ch-c5 { fill: #8b5cf6; stroke: #8b5cf6; color: #8b5cf6; }
.ch-c6 { fill: #14b8a6; stroke: #14b8a6; color: #14b8a6; }
.ch-c7 { fill: #64748b; stroke: #64748b; color: #64748b; }
.ch-line.ch-c0, .ch-line.ch-c1, .ch-line.ch-c2, .ch-line.ch-c3, .ch-line.ch-c4, .ch-line.ch-c5, .ch-line.ch-c6, .ch-line.ch-c7 { fill: none; }
.ch-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--muted); margin-top: .4rem; }
.ch-legend i, .pie-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; background: currentColor; }
.chart-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: .9rem; }
.pie-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.pie-wrap .chart-pie { width: 200px; flex: none; }
.pie-total { fill: var(--text) !important; font-size: 22px !important; font-weight: 700; }
.pie-sub { font-size: 10px !important; }
.pie-legend { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 180px; font-size: .86rem; }
.pie-legend li { display: flex; align-items: center; gap: .4rem; padding: .25rem 0; border-bottom: 1px dashed var(--border); }
.pie-legend .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ch-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ch-draw { to { stroke-dashoffset: 0; } }
@keyframes ch-spin { from { opacity: 0; transform: scale(.85) rotate(-12deg); } to { opacity: 1; transform: none; } }

.delta { font-size: .78rem; font-weight: 650; padding: .1rem .45rem; border-radius: 999px; }
.delta.good { color: var(--ok); background: var(--ok-soft); }
.delta.bad { color: var(--bad); background: var(--bad-soft); }
.delta.muted { color: var(--muted); background: var(--surface-hover); }

/* ---- timer ---- */
.timer-card { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.timer-clock { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 8ch; }
.timer-card.running .timer-clock { color: var(--brand); }
.timer-card.running .pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: pulse-red 1.4s infinite; }
@keyframes pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); } 50% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); } }

/* ---- weekly grid ---- */
.week-grid { min-width: 760px; }
.week-grid td, .week-grid th { text-align: center; }
.week-grid td:first-child, .week-grid th:first-child { text-align: left; min-width: 220px; }
.week-grid input.cell { width: 70px; text-align: center; padding: .3rem .4rem; font-variant-numeric: tabular-nums; margin: 0 auto; }
.week-grid input.cell.saved { animation: flash 900ms var(--ease); }
.week-grid .today { background: var(--brand-softer); }
.week-grid tfoot td { font-weight: 650; background: var(--surface-2); }

/* ---- attendance ---- */
.checkin-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; padding: 1.4rem; }
.checkin-btn { width: 132px; height: 132px; border-radius: 50%; border: 0; font-weight: 700; font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 55%, #34d399)); box-shadow: 0 14px 30px -12px rgba(var(--brand-rgb), .8); transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur); display: grid; place-items: center; text-align: center; line-height: 1.2; }
.checkin-btn:hover { transform: scale(1.04); }
.checkin-btn:active { transform: scale(.96); }
.checkin-btn.out { background: linear-gradient(135deg, #f97316, #dc2626); box-shadow: 0 14px 30px -12px rgba(220, 38, 38, .7); }
.checkin-btn:disabled { opacity: .6; }
.reg-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.reg-day { border-radius: 10px; padding: .4rem .35rem; min-height: 64px; font-size: .74rem; border: 1px solid var(--border); background: var(--surface); animation: rise var(--dur) var(--ease) both; }
.reg-day .d { font-weight: 700; font-size: .85rem; color: var(--text); }
.reg-day.st-present { background: var(--ok-soft); border-color: transparent; }
.reg-day.st-half_day { background: var(--warn-soft); border-color: transparent; }
.reg-day.st-absent { background: var(--bad-soft); border-color: transparent; }
.reg-day.st-leave { background: var(--violet-soft); border-color: transparent; }
.reg-day.st-holiday, .reg-day.st-weekly_off { background: var(--surface-hover); border-color: transparent; color: var(--muted); }
.reg-day.st-future { opacity: .55; }
.reg-day.blank { visibility: hidden; }
.reg-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); text-align: center; }

/* ---- sprints ---- */
.sprint-progress { height: 10px; border-radius: 999px; background: var(--surface-hover); overflow: hidden; }
.sprint-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #34d399)); transition: width 900ms var(--ease); border-radius: 999px; }
.plan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.plan-col { min-height: 260px; }
.plan-col .board-col-body { min-height: 200px; }
.points-badge { min-width: 28px; text-align: center; }
@media (max-width: 991.98px) { .plan-cols { grid-template-columns: 1fr; } }

/* ---- activity ---- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.feed li:last-child { border-bottom: 0; }
.feed li.fresh { animation: feed-in 600ms var(--ease) both; }
.feed .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.feed .grow { flex: 1; min-width: 0; }
.feed .when { color: var(--faint); font-size: .76rem; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-10px); background: var(--brand-softer); } to { opacity: 1; transform: none; background: transparent; } }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); display: inline-block; box-shadow: 0 0 0 3px var(--ok-soft); }

/* ---- report builder ---- */
.builder { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 1rem; align-items: start; }
.builder-side { position: sticky; top: calc(var(--topbar-h) + .75rem); max-height: calc(100vh - var(--topbar-h) - 1.5rem); overflow-y: auto; }
.builder-sec { padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.builder-sec:last-child { border-bottom: 0; }
.builder-sec h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 .55rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.chips { display: flex; flex-direction: column; gap: .35rem; }
.chip { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); font-size: .84rem; transition: box-shadow var(--dur-fast), transform var(--dur-fast); animation: pop-in var(--dur) var(--ease) both; }
.chip[draggable="true"] { cursor: grab; }
.chip.dragging { opacity: .4; }
.chip.drop-target { box-shadow: 0 -2px 0 var(--brand); }
.chip .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip input.form-control, .chip select.form-select { padding: .15rem .4rem; font-size: .8rem; height: auto; }
.chip .btn-icon.btn-sm { width: 24px; height: 24px; }
.field-type { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); border: 1px solid var(--border); border-radius: 5px; padding: 0 .25rem; flex: none; }
.filter-group { border: 1px dashed var(--border-strong); border-radius: 10px; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; background: var(--surface-2); }
.filter-group .filter-group { background: var(--surface); }
.filter-rule { display: grid; grid-template-columns: 1fr; gap: .3rem; padding: .4rem; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); }
.filter-group .filter-group .filter-rule { background: var(--surface-2); }
.filter-rule .row-2 { display: flex; gap: .3rem; }
.filter-rule .row-2 > * { flex: 1; min-width: 0; }
.report-table td.num, .report-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table tr.subtotal td { background: var(--surface-2); font-weight: 600; }
.report-table tr.grand td { background: var(--brand-softer); font-weight: 700; border-top: 2px solid var(--border-strong); }
.report-table tr.drillable { cursor: pointer; }
.cf-ok { background: var(--ok-soft) !important; color: var(--ok); font-weight: 600; }
.cf-warn { background: var(--warn-soft) !important; color: var(--warn); font-weight: 600; }
.cf-bad { background: var(--bad-soft) !important; color: var(--bad); font-weight: 600; }
.cf-info { background: var(--info-soft) !important; color: var(--info); font-weight: 600; }
.cf-brand { background: var(--brand-soft) !important; color: var(--brand); font-weight: 600; }
.lib-card { cursor: pointer; text-align: left; width: 100%; border: 1px solid var(--border); }
.lib-card h3 { font-size: .98rem; margin: .5rem 0 .25rem; }
@media (max-width: 991.98px) {
  .builder { grid-template-columns: 1fr; }
  .builder-side { position: static; max-height: none; }
}

/* ---- automations ---- */
.rule-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .84rem; }
.rule-flow .step { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 8px; background: var(--surface-hover); color: var(--text-2); }
.rule-flow .arrow { color: var(--faint); }
.action-card { border: 1px solid var(--border); border-radius: 10px; padding: .75rem; margin-bottom: .6rem; background: var(--surface-2); animation: rise var(--dur) var(--ease) both; }
.form-switch.big .form-check-input { width: 2.8em; height: 1.5em; }