/* Personnel (pages/personnel.js): duty clock card, hours, roster, member profile, awards. Builds on ops.css (ops-*) and app.css tokens. */
:root {
  --pers-on: #1e9a52; --pers-on-bg: #e3f5ea; --pers-off: #5d6d7c; --pers-off-bg: #eef1f3;
  --pers-gold: #c8930a; --pers-gold-bg: #fff6dc; --pers-card: #fff;
}
:root[data-theme="dark"] {
  --pers-on: #6fd69a; --pers-on-bg: #173826; --pers-off: #9fb3c8; --pers-off-bg: #232d37;
  --pers-gold: #f3d36b; --pers-gold-bg: #3d3412; --pers-card: var(--bg, #1b232c);
}

.pers-pad { padding: 14px 16px; }
.pers-actions { display: flex; gap: 4px; white-space: nowrap; }
.pers-actions .btn .ico, .pers-tl-del .ico, .pers-award-del .ico { width: 15px; height: 15px; }
.pers-inline-check { margin: 0 0 0 auto; font-weight: 400; }

/* duty card */
.pers-duty { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 6px; border: 1px solid var(--line); border-left: 8px solid var(--pers-off); background: var(--pers-off-bg); margin-bottom: 18px; }
.pers-duty.on { border-left-color: var(--pers-on); background: var(--pers-on-bg); }
.pers-duty-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--pers-off); flex: none; }
.pers-duty.on .pers-duty-dot { background: var(--pers-on); box-shadow: 0 0 0 0 rgba(30, 154, 82, .6); animation: pers-pulse 2s infinite; }
@keyframes pers-pulse { 0% { box-shadow: 0 0 0 0 rgba(30, 154, 82, .55); } 70% { box-shadow: 0 0 0 12px rgba(30, 154, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 154, 82, 0); } }
@media (prefers-reduced-motion: reduce) { .pers-duty.on .pers-duty-dot { animation: none; } }
.pers-duty-main { flex: 1; min-width: 0; }
.pers-duty-kicker { font-size: 12px; font-weight: 800; letter-spacing: .8px; color: var(--text-2); text-transform: uppercase; }
.pers-duty.on .pers-duty-kicker { color: var(--pers-on); }
.pers-duty-title { font-size: 26px; font-weight: 700; color: var(--navy); margin: 2px 0 4px; overflow-wrap: anywhere; }
.pers-duty-sub { font-size: 14px; color: var(--text); }
.pers-clock-btn { font-size: 17px; padding: 12px 22px; display: inline-flex; align-items: center; gap: 8px; flex: none; }
.pers-clock-btn .ico { width: 20px; height: 20px; }
.pers-duty.compact { padding: 12px; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; border-left-width: 6px; }
.pers-duty.compact .pers-duty-title { font-size: 16px; }
.pers-duty.compact .pers-duty-sub { font-size: 12px; }
.pers-duty.compact .pers-clock-btn { width: 100%; justify-content: center; font-size: 15px; padding: 8px 12px; }
.pers-duty.compact .pers-duty-dot { width: 12px; height: 12px; }
.pers-dash-link { display: block; text-align: right; font-size: 13px; margin-top: 8px; }
.pers-kpis .kpi.good .kpi-value { color: var(--ops-ok); }
.pers-kpis .kpi.bad .kpi-value { color: var(--ops-bad); }

.pers-progress { margin: 4px 0; }
.pers-progress-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 5px; }
.pers-settings-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pers-entries tr.pers-open td { background: var(--pers-on-bg); }

/* who's on duty */
.pers-onduty { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pers-onduty-item { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--pers-on); border-radius: 4px; color: inherit; text-decoration: none; background: var(--pers-card); }
.pers-onduty-item:hover { border-color: var(--pers-on); }
.pers-av { width: 36px; height: 36px; font-size: 13px; flex: none; }
.pers-av-lg { width: 84px; height: 84px; font-size: 28px; flex: none; }

/* hours report */
.pers-hours-table tr.pers-below td:first-child { box-shadow: inset 4px 0 0 var(--ops-urgent); }

/* roster */
.pers-search .input { min-width: 220px; }
.pers-person { display: flex; gap: 10px; align-items: center; min-width: 200px; }
.pers-roster td { vertical-align: middle; }
.pers-loa-queue { border-left: 4px solid var(--ops-important); }
.pers-loa-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pers-loa-item:last-child { border-bottom: 0; }
.pers-loa-actions { display: flex; gap: 6px; }
.pers-head-ico { display: inline-flex; align-items: center; gap: 8px; }
.pers-head-ico .ico { width: 16px; height: 16px; }
.pers-warn-panel .panel-head .ico { width: 16px; height: 16px; color: var(--ops-important); }
.pers-cert-row { display: block; padding: 5px 0; color: inherit; text-decoration: none; }
.pers-cert-row:hover b { text-decoration: underline; }
.pers-ranks { display: flex; flex-direction: column; gap: 6px; }
.pers-rank-row { display: grid; grid-template-columns: 26px 1fr auto auto auto; gap: 6px; align-items: center; }
.pers-rank-num { font-weight: 700; color: var(--text-2); text-align: right; }

/* profile */
.pers-back { display: inline-block; margin-bottom: 10px; font-size: 14px; }
.pers-profile-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 18px 20px; border: 1px solid var(--line); border-top: 5px solid var(--navy); border-radius: 4px; background: var(--pers-card); margin-bottom: 18px; }
.pers-profile-main { flex: 1; min-width: 220px; }
.pers-profile-main h2 { margin: 2px 0 6px; font-size: 26px; }
.pers-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pers-links { margin: -6px 0 14px; font-size: 14px; }
.pers-links a { display: inline-flex; align-items: center; gap: 6px; }
.pers-links .ico { width: 16px; height: 16px; }
.pers-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pers-timeline { display: flex; flex-direction: column; }
.pers-tl-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: start; }
.pers-tl-item:last-child { border-bottom: 0; }
.pers-tl-date { font-size: 13px; font-weight: 700; color: var(--text-2); }
.pers-certs { display: flex; flex-direction: column; gap: 8px; }
.pers-cert { display: flex; gap: 8px; justify-content: space-between; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--ops-ok); border-radius: 4px; }
.pers-cert.expiring { border-left-color: var(--ops-important); }
.pers-cert.expired { border-left-color: var(--ops-urgent); }
.pers-cert-main b { margin-right: 6px; }
.pers-cert-main .ico { width: 13px; height: 13px; vertical-align: -2px; }
.pers-courses { display: flex; flex-direction: column; gap: 6px; }
.pers-course { display: flex; gap: 8px; align-items: center; font-size: 14px; flex-wrap: wrap; }
.pers-course .ico { width: 16px; height: 16px; color: var(--text-2); }
.pers-course.done .ico { color: var(--ops-ok); }
.pers-course .ops-muted { margin-left: auto; }
.pers-note-form { display: grid; grid-template-columns: 140px 1fr auto; gap: 8px; align-items: start; margin-bottom: 12px; }
.pers-note { border: 1px solid var(--line); border-left: 4px solid var(--line-2, #c3ccd4); border-radius: 4px; padding: 8px 12px; margin-bottom: 8px; }
.pers-note.k-disciplinary { border-left-color: var(--ops-urgent); }
.pers-note.k-counseling { border-left-color: var(--ops-important); }
.pers-note-head { display: flex; align-items: center; gap: 8px; }
.pers-note-head .btn { margin-left: auto; }
.pers-note-text { white-space: pre-wrap; margin-top: 4px; font-size: 14px; }

/* awards */
.pers-chips { border-bottom: 1px solid var(--line); }
.pers-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pers-award-list { display: flex; flex-direction: column; gap: 10px; }
.pers-award { position: relative; display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line); border-top: 4px solid var(--pers-gold); border-radius: 4px; background: var(--pers-card); }
.pers-award.compact { padding: 10px 12px; border-top-width: 1px; border-left: 4px solid var(--pers-gold); }
.pers-award-medal { width: 48px; height: 48px; border-radius: 50%; background: var(--pers-gold-bg); color: var(--pers-gold); display: flex; align-items: center; justify-content: center; flex: none; border: 2px solid var(--pers-gold); }
.pers-award.compact .pers-award-medal { width: 36px; height: 36px; }
.pers-award-medal .ico { width: 24px; height: 24px; }
.pers-award-main { min-width: 0; flex: 1; }
.pers-award-type { font-weight: 800; color: var(--navy); font-size: 16px; }
.pers-award-name { display: block; font-weight: 700; margin: 2px 0; }
.pers-award-reason { font-size: 14px; margin: 4px 0; overflow-wrap: anywhere; }
.pers-award-del { position: absolute; top: 8px; right: 8px; }
.pers-achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pers-ach { text-align: center; padding: 12px 8px; border: 1px dashed var(--line-2, #c3ccd4); border-radius: 6px; opacity: .6; }
.pers-ach.earned { opacity: 1; border-style: solid; border-color: var(--pers-gold); background: var(--pers-gold-bg); }
.pers-ach-icon { width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ops-soft); color: var(--text-2); }
.pers-ach.earned .pers-ach-icon { background: var(--pers-gold); color: #fff; }
.pers-ach-icon .ico { width: 20px; height: 20px; }
.pers-ach-title { font-weight: 700; font-size: 13px; }
.pers-ach-sub { font-size: 12px; color: var(--text-2); }

@media (max-width: 900px) {
  .pers-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pers-duty { flex-wrap: wrap; padding: 16px; }
  .pers-duty-title { font-size: 20px; }
  .pers-clock-btn { width: 100%; justify-content: center; }
  .pers-note-form { grid-template-columns: 1fr; }
  .pers-tl-item { grid-template-columns: 1fr auto; }
  .pers-tl-date { grid-column: 1 / -1; }
}