/* 62-attendance-hub-mobile-and-polish.css
   Attendance Hub: threshold colours, signature settings and the mobile redesign.
   Files in css/ load in filename order and the cascade depends on it: see docs/CSS.md. */

/* Attendance Hub: custom threshold colors, condensed alerts, signature settings (2026-08-11) */
.attendance-level {
  background: color-mix(in srgb, var(--tc, var(--muted)) 20%, transparent);
  color: var(--tc, var(--muted));
}

.attendance-scoreboard tbody tr:nth-of-type(even):not(:hover):not(:focus) {
  background: color-mix(in srgb, var(--card) 90%, black);
}

.attendance-alert-card {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 9px 12px !important;
  border-radius: 8px;
  background: var(--card);
  margin-bottom: 2px;
}
.attendance-alert-card:nth-of-type(even) {
  background: color-mix(in srgb, var(--card) 90%, black);
}
.attendance-alert-card .attendance-alert-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 160px;
}
.attendance-alert-card .attendance-alert-level {
  padding: 3px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--tc, var(--muted)) 22%, transparent);
  color: var(--tc, var(--muted));
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.attendance-alert-card .attendance-alert-fact {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.attendance-alert-card > .attendance-primary {
  white-space: nowrap;
  margin-left: auto;
}
@media (max-width: 640px) {
  .attendance-alert-card > .attendance-primary {
    width: 100%;
    margin-left: 0;
  }
}

.attendance-policy-row {
  grid-template-columns: minmax(0, 1fr) 56px 24px 26px !important;
  gap: 6px !important;
}
.attendance-policy-row-color {
  grid-template-columns: 34px minmax(0, 1fr) 56px 24px 26px !important;
}
.attendance-policy-row-color input[type="color"] {
  width: 34px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
@media (max-width: 520px) {
  .attendance-policy-row {
    grid-template-columns: minmax(0, 1fr) 50px 26px !important;
  }
  .attendance-policy-row-color {
    grid-template-columns: 28px minmax(0, 1fr) 50px 26px !important;
  }
  .attendance-policy-row-color input[type="color"] {
    width: 28px;
    height: 26px;
  }
}

.attendance-action-level {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--tc, var(--line));
  border-left-width: 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tc, var(--line)) 8%, transparent);
}
.attendance-action-level span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.attendance-action-level strong {
  font-size: 16px;
}
.attendance-action-level small {
  color: var(--muted);
  font-size: 11px;
}

.attendance-signature-options {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.attendance-signature-option {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.attendance-signature-option strong {
  font-size: 13px;
}
.attendance-signature-option span {
  color: var(--muted);
  font-size: 11px;
}
.attendance-signature-option.active {
  border-color: #e4a72b;
  background: color-mix(in srgb, var(--card) 88%, #e4a72b);
}
.attendance-signature-option.coming-soon {
  cursor: not-allowed;
  opacity: 0.7;
}
.attendance-signature-option:disabled {
  cursor: not-allowed;
}
.attendance-settings-grid label[hidden] {
  display: none !important;
}

/* Attendance Hub: discipline/completed tables, settings section backgrounds (2026-08-11) */
/* iPadOS/touch: dragging a finger over any text reads to WebKit as a
   text-selection drag rather than a scroll gesture, painting distracting
   highlight bands mid-scroll. Text selection by drag isn't a real interaction
   on a touch kiosk, so disable it suite-wide for coarse-pointer/no-hover
   (touch) input — desktop mouse users are unaffected. Actual text-entry
   fields stay selectable/editable, including Quill's contenteditable area. */
@media (hover: none) and (pointer: coarse) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  input,
  textarea,
  [contenteditable="true"],
  .ql-editor {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}
.attendance-hub-table {
  width: 100%;
  border-collapse: collapse;
}
.attendance-hub-table th {
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
}
.attendance-hub-table td {
  padding: 11px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  font-size: 12px;
  vertical-align: middle;
}
.attendance-hub-table tbody tr:last-child td {
  border-bottom: 0;
}
.attendance-hub-table tbody tr:nth-of-type(even) {
  background: color-mix(in srgb, var(--card) 90%, black);
}
.attendance-hub-table .attendance-member-link {
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}
.attendance-hub-table-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.attendance-hub-table th:last-child,
.attendance-hub-table td:last-child {
  text-align: right;
}

.attendance-policy-section {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 96%, white);
}
.attendance-settings-grid-stacked {
  grid-template-columns: 1fr !important;
}
.attendance-settings fieldset {
  background: color-mix(in srgb, var(--card) 96%, white);
}
:root[data-theme="light"] .attendance-policy-section,
:root[data-theme="light"] .attendance-settings fieldset {
  background: color-mix(in srgb, var(--card) 96%, black);
}

/* Reserve enough bottom room so the floating Tools/Settings buttons never sit over the last row of content (2026-08-11) */
.attendance-app,
.training-app,
.team-hub-app,
.equipment-app {
  padding-bottom: 150px;
}

/* Fix: activity/excused-absence table's non-sticky columns had no background on odd rows, so the darker page background showed through and broke the zebra match with the sticky Date/Team member columns (2026-08-12) */
.attendance-activity-table tbody tr:not(:nth-child(even)):not(:hover):not(:focus) td {
  background: var(--card);
}

/* Per-threshold "requires team member signature" toggle in Disciplinary thresholds settings (2026-08-12) */
.attendance-policy-sig-toggle {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.attendance-policy-sig-toggle input {
  width: auto;
  margin: 0;
  accent-color: var(--at-accent, #e4a72b);
}

/* Sleeker primary button variant for compact table row actions (2026-08-12) */
.attendance-primary-compact {
  padding: 7px 11px;
  font-size: 11px;
  border-radius: 7px;
}

/* Mobile-only Attendance Hub redesign: dense info-first rows on Overview/Activity/Excused Absences, Discipline hidden entirely on phones (2026-08-12) */
.attendance-row-meta {
  display: none;
}
@media (max-width: 700px) {
  /* Override desktop-oriented fixed-width table rules that would otherwise force horizontal scroll/clipping at phone widths */
  .attendance-scoreboard table,
  .attendance-activity-table:not(.attendance-excused-table),
  .attendance-excused-table {
    table-layout: auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .attendance-activity-table:not(.attendance-excused-table) tbody tr td,
  .attendance-excused-table tbody tr td {
    background: transparent !important;
  }
  /* Overview: one dense row per team member instead of a stacked label/value card */
  .attendance-scoreboard tbody tr {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 11px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .attendance-scoreboard tbody tr td {
    background: transparent !important;
  }
  .attendance-scoreboard tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--card) 65%, black) !important;
  }
  .attendance-scoreboard td {
    display: block !important;
    grid-template-columns: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .attendance-scoreboard td:nth-child(n)::before {
    content: none !important;
  }
  .attendance-scoreboard td:first-child {
    order: 1;
    flex: 1;
    min-width: 0;
  }
  .attendance-scoreboard td:first-child .attendance-scoreboard-member strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }
  .attendance-scoreboard td:nth-child(2) {
    order: 2;
    text-align: right;
    white-space: nowrap;
  }
  .attendance-scoreboard td:nth-child(2) b {
    font-size: 15px;
  }
  .attendance-scoreboard td:nth-child(3) {
    order: 3;
    max-width: 100px;
    text-align: right;
  }
  .attendance-scoreboard td:nth-child(3) .attendance-level {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
  }
  .attendance-scoreboard td:nth-child(4),
  .attendance-scoreboard td:nth-child(5) {
    display: none !important;
  }

  /* Activity: dense card per entry, name+points on one line. Flexbox (not grid) — table-cell-origin elements don't reliably stretch to fill a grid track. */
  .attendance-activity-table:not(.attendance-excused-table) tbody tr {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px;
    margin: 8px 10px !important;
    padding: 12px 80px 12px 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: var(--bg) !important;
  }
  .attendance-activity-table:not(.attendance-excused-table) tbody tr:nth-child(even) {
    background: var(--bg) !important;
  }
  .attendance-activity-table:not(.attendance-excused-table) td {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(n)::before {
    content: none !important;
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(1) {
    display: none !important;
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(2) {
    order: 1;
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(2) .attendance-member-link {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    font-size: 16px;
    text-align: left;
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(3) {
    order: 2;
    font-size: 14px;
    color: var(--muted);
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(4) {
    position: absolute !important;
    top: 12px;
    right: 14px;
    width: 64px !important;
    text-align: center;
    font-weight: 850;
    font-size: 18px;
    white-space: nowrap;
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(5) {
    order: 4;
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(5):empty {
    display: none !important;
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(6) {
    display: none !important;
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(7) {
    position: absolute !important;
    top: 40px;
    right: 14px;
    width: 64px !important;
    text-align: center;
  }
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(7) .attendance-delete-pill {
    width: 100%;
    min-width: 0;
  }
  .attendance-activity-table:not(.attendance-excused-table) td.attendance-row-meta {
    display: block !important;
    order: 3;
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 750;
  }

  /* Excused absences: same dense card treatment */
  .attendance-excused-table tbody tr {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px;
    margin: 8px 10px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    background: var(--bg) !important;
  }
  .attendance-excused-table tbody tr:nth-child(even) {
    background: var(--bg) !important;
  }
  .attendance-excused-table td {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }
  .attendance-excused-table td:nth-child(n)::before {
    content: none !important;
  }
  .attendance-excused-table td:nth-child(1) {
    display: none !important;
  }
  .attendance-excused-table td:nth-child(2) {
    order: 1;
  }
  .attendance-excused-table td:nth-child(2) .attendance-member-link {
    display: block;
    text-align: left;
    font-weight: 800;
    font-size: 16px;
  }
  .attendance-excused-table td:nth-child(3) {
    order: 2;
    font-size: 14px;
    color: var(--muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .attendance-excused-table td:nth-child(4) {
    display: none !important;
  }
  .attendance-excused-table td:nth-child(5) {
    order: 4;
    font-size: 11px;
  }
  .attendance-excused-table td:nth-child(6) {
    order: 5;
    width: auto !important;
    align-self: flex-end !important;
    margin-top: 2px;
  }
  .attendance-excused-table td.attendance-row-meta {
    display: block !important;
    order: 3;
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 750;
  }

  /* Discipline isn't a mobile task: hide the tab and its content entirely on phones */
  .attendance-tabs [data-attendance-view="discipline"] {
    display: none !important;
  }
  .attendance-discipline {
    display: none !important;
  }
  .attendance-summary-card.warning {
    display: none !important;
  }

  /* Override old desktop fixed-column-width rules (higher specificity via "body" prefix) that were still pinning the name cell to 139px and breaking left alignment */
  body .attendance-activity-table:not(.attendance-excused-table) td:nth-child(2),
  body .attendance-excused-table td:nth-child(2) {
    width: 100% !important;
    left: auto !important;
    position: static !important;
  }
}

/* Whole-record click: Activity, Excused Absences, and Discipline rows open the team member's record from anywhere in the row, not just the name (2026-08-12) */
.attendance-activity-table tbody tr[data-attendance-detail],
.attendance-hub-table tbody tr[data-attendance-detail] {
  cursor: pointer;
}
@media (hover: hover) {
  .attendance-activity-table tbody tr[data-attendance-detail]:hover,
  .attendance-hub-table tbody tr[data-attendance-detail]:hover {
    background: color-mix(in srgb, var(--card) 88%, #e4a72b);
  }
}

/* Quick visual fixes batch (2026-08-12) */
.attendance-tabs {
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}
.attendance-alert-list .attendance-alert-list .attendance-hub-table th:nth-child(3),
.attendance-alert-list .attendance-hub-table td:nth-child(3) {
  max-width: 80px;
  white-space: normal;
  line-height: 1.3;
}
.attendance-discipline-top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.attendance-discipline-top .attendance-alert-list {
  flex: 1 1 420px;
  min-width: 0;
  margin-top: 0;
}
.attendance-thresholds-panel {
  min-width: 240px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.attendance-thresholds-panel h3 {
  margin: 0 0 12px;
  font-size: 13px;
}
.attendance-thresholds span {
  border-color: var(--tc, var(--line));
}
.attendance-thresholds b {
  color: var(--tc, var(--at-accent));
}
@media (max-width: 900px) {
  .attendance-thresholds-panel {
    flex-basis: 100%;
  }
}
@media (max-width: 520px) {
  .attendance-thresholds-panel .attendance-thresholds {
    grid-template-columns: 1fr;
  }
}

/* The sticky Date/Team member columns paint their own opaque background on every row (needed so scrolled content doesn't show through), which was masking row hover on those two cells. Match the hover tint there explicitly. (2026-08-12) */
.attendance-activity-table tbody tr:focus td:first-child,
.attendance-activity-table tbody tr:focus td:nth-child(2) {
  background: color-mix(in srgb, var(--card) 88%, #e4a72b) !important;
}
@media (hover: hover) {
  .attendance-activity-table tbody tr:hover td:first-child,
  .attendance-activity-table tbody tr:hover td:nth-child(2) {
    background: color-mix(in srgb, var(--card) 88%, #e4a72b) !important;
  }
}

/* Days-since-threshold-crossed color coding on the Pending Actions table (2026-08-12) */
.attendance-days-green b {
  color: #63c99e;
}
.attendance-days-yellow b {
  color: #e4a72b;
}
.attendance-days-red b {
  color: #ed6b62;
}

/* "Mark signed" was relying on a barely-visible var(--line) border that blended into the row, unlike the bold blue Reprint/View button beside it (2026-08-12) */
.attendance-hub-table-actions [data-attendance-sign] {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
@media (hover: hover) {
  .attendance-hub-table-actions [data-attendance-sign]:hover {
    border-color: color-mix(in srgb, var(--at-accent, #e4a72b) 60%, var(--line));
    color: var(--at-accent, #e4a72b);
  }
}
/* When the whole row is hovered, the button's own var(--line) border reads as a stray seam against the row's orange tint — blend it in instead (2026-08-12) */
.attendance-hub-table tbody tr:focus [data-attendance-sign] {
  border-color: color-mix(in srgb, #e4a72b 45%, var(--line));
}
@media (hover: hover) {
  .attendance-hub-table tbody tr:hover [data-attendance-sign] {
    border-color: color-mix(in srgb, #e4a72b 45%, var(--line));
  }
}