/* ========================================
   attendance.css
   GFI 勤怠・現場規律制度
   Mobile first / 2026-09
======================================== */
:root{ --att-blue:#2563eb; --att-red:#dc2626; --att-amber:#d97706; }
[id]{ scroll-margin-top: 100px; }
.attendance-page{ max-width: 1200px; }
.attendance-hero{ margin-bottom:1.25rem; }
.attendance-hero .page-header-title{ margin-bottom:.7rem; }
.attendance-hero .page-header-lead strong{ color:#79bfde; }
.attendance-version{ margin-top:.7rem; font-family:var(--font-head); font-size:.78rem!important; letter-spacing:.12em; opacity:.72!important; }

.attendance-intro,.attendance-section{
  background:#fff; border:1px solid rgba(15,23,42,.07); border-radius:18px;
  box-shadow:var(--shadow-card); padding:1.35rem; margin-bottom:1.25rem;
}
.attendance-intro{ border-top:4px solid var(--emerald); }
.attendance-section-head{ margin-bottom:1rem; }
.attendance-kicker{ display:block; margin-bottom:.25rem; color:var(--emerald-dark); font-family:var(--font-head); font-size:.72rem; font-weight:800; letter-spacing:.12em; }
.attendance-section-head h2{ margin:0 0 .35rem; color:var(--navy); font-size:1.32rem; font-weight:900; line-height:1.45; }
.attendance-section-head p,.attendance-intro>p{ color:var(--text-light); line-height:1.8; }

.attendance-message{ margin-top:1rem; padding:1rem; background:var(--emerald-light); border-radius:14px; border-left:4px solid var(--emerald); display:grid; gap:.25rem; }
.attendance-message strong{ color:#0b3858; font-size:1.05rem; }
.attendance-message span{ color:#334155; font-size:.92rem; }

.flow-grid{ display:grid; grid-template-columns:1fr; gap:.75rem; counter-reset:flow; }
.flow-card{ position:relative; padding:1rem 1rem 1rem 4rem; border:1px solid var(--border); border-radius:14px; background:#fff; }
.flow-no{ position:absolute; left:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:10px; background:var(--navy); color:#fff; font-family:var(--font-head); font-weight:800; font-size:.8rem; }
.flow-card h3{ color:var(--navy); margin:0 0 .15rem; font-size:1rem; font-weight:900; }
.flow-card p{ margin:0; color:var(--text-light); font-size:.9rem; line-height:1.6; }

.alert-box{ margin-top:1rem; padding:1rem; border-radius:14px; border:1px solid var(--border); }
.alert-box strong{ display:block; margin-bottom:.2rem; font-weight:900; }
.alert-box p{ margin:0; line-height:1.7; }
.alert-box--danger{ background:#fff1f2; border-color:#fecdd3; color:#9f1239; }
.alert-box--warning{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
.alert-box--plain{ background:#f8fafc; color:var(--navy); }

.case-grid{ display:grid; grid-template-columns:1fr; gap:.8rem; }
.case-card{ display:block; padding:1.1rem; border:1px solid var(--border); border-radius:15px; text-decoration:none; color:var(--text); background:#fff; transition:border-color .2s ease, background .2s ease; }
.case-card:hover{ border-color:rgba(7,132,198,.45); background:#fafffd; }
.case-label{ display:inline-flex; padding:.25rem .55rem; border-radius:999px; margin-bottom:.65rem; font-size:.72rem; font-weight:900; line-height:1.3; }
.case-card h3{ margin:0 0 .35rem; font-size:1.03rem; color:var(--navy); }
.case-card p{ margin:0 0 .55rem; color:var(--text-light); font-size:.88rem; line-height:1.65; }
.case-link{ color:var(--emerald-dark); font-weight:800; font-size:.86rem; }
.case-card--late .case-label{ background:#eef2ff; color:#075e99; }
.case-card--health .case-label{ background:#ecfdf5; color:#08699f; }
.case-card--serious .case-label{ background:#fff1f2; color:#be123c; }

.evaluation-formula{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin-top:1rem; padding:1rem; border-radius:14px; background:#0b1220; color:#fff; }
.evaluation-formula span{ font-weight:900; font-size:.9rem; }
.evaluation-formula b{ color:#79bfde; }

.step-list{ list-style:none; padding:0; margin:0; display:grid; gap:.65rem; counter-reset:step; }
.step-list li{ position:relative; padding:1rem 1rem 1rem 3.7rem; border:1px solid var(--border); border-radius:14px; background:#f8fafc; }
.step-list li::before{ counter-increment:step; content:counter(step); position:absolute; left:1rem; top:1rem; width:2rem; height:2rem; display:grid; place-items:center; border-radius:999px; background:var(--emerald); color:#fff; font-family:var(--font-head); font-weight:800; }
.step-list strong,.step-list span{ display:block; }
.step-list strong{ color:var(--navy); margin-bottom:.2rem; }
.step-list span{ color:var(--text-light); font-size:.88rem; line-height:1.65; }

.stage-grid{ display:grid; gap:.9rem; }
.stage-card{ border:1px solid var(--border); border-top:4px solid #64748b; border-radius:16px; padding:1.1rem; }
.stage-card--strong{ border-top-color:var(--warning); }
.stage-card--danger{ border-top-color:var(--danger); }
.stage-head{ display:flex; justify-content:space-between; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.stage-head span{ font-weight:900; color:var(--navy); }
.stage-head strong{ font-family:var(--font-head); font-size:.68rem; color:var(--text-light); letter-spacing:.08em; }
.stage-card h3{ margin:0 0 .65rem; color:var(--navy); font-size:1.05rem; }
.stage-card ul{ margin:0; padding-left:1.25rem; line-height:1.75; }
.stage-card li{ margin:.25rem 0; }
.stage-note{ margin-top:.7rem; padding-top:.7rem; border-top:1px dashed var(--border); color:#9f1239; font-size:.85rem; font-weight:700; }
.reset-rule{ margin-top:1rem; padding:1rem; border-radius:14px; background:#f1f5f9; }
.reset-rule strong{ color:var(--navy); }
.reset-rule p{ margin:.25rem 0 0; color:var(--text-light); font-size:.9rem; }

.training-grid{ display:grid; gap:.65rem; }
.training-item{ display:flex; align-items:center; gap:.75rem; padding:.8rem; border-radius:12px; background:#f8fafc; border:1px solid var(--border); }
.training-item span{ display:grid; place-items:center; flex:0 0 2rem; height:2rem; border-radius:9px; background:var(--navy); color:#fff; font-family:var(--font-head); font-size:.72rem; font-weight:800; }
.training-item p{ margin:0; font-weight:700; color:var(--navy); font-size:.9rem; }

.health-route{ display:grid; gap:.45rem; }
.health-step{ display:flex; gap:.85rem; align-items:flex-start; padding:1rem; border:1px solid #bbf7d0; background:#f0fdf4; border-radius:14px; }
.health-step>span{ display:grid; place-items:center; flex:0 0 2.1rem; height:2.1rem; border-radius:999px; background:var(--emerald); color:#fff; font-family:var(--font-head); font-size:.72rem; font-weight:800; }
.health-step strong{ color:#0b3858; }
.health-step p{ margin:.15rem 0 0; color:#475569; font-size:.88rem; line-height:1.65; }
.health-arrow{ text-align:center; color:var(--emerald); font-weight:900; }
.health-branch{ display:grid; gap:.65rem; }
.health-result{ padding:1rem; border-radius:14px; border:1px solid var(--border); }
.health-result strong{ display:block; margin-bottom:.2rem; }
.health-result p{ margin:0; color:var(--text-light); font-size:.88rem; }
.health-result--work{ background:#eff6ff; border-color:#bfdbfe; }
.health-result--work strong{ color:#08699f; }
.health-result--rest{ background:#f8fafc; }

.ng-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1rem; }
.ng-grid div{ min-height:66px; display:grid; place-items:center; text-align:center; padding:.7rem; border-radius:12px; background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; font-weight:800; font-size:.85rem; }
.section-footnote{ margin-top:1rem; color:var(--text-light); font-size:.88rem; }

.attendance-section--danger{ border-top:4px solid var(--danger); }
.serious-list{ margin:0; padding:0; list-style:none; display:grid; gap:.55rem; }
.serious-list li{ display:flex; align-items:flex-start; gap:.6rem; padding:.8rem; background:#fff7f7; border:1px solid #fee2e2; border-radius:12px; line-height:1.6; }
.serious-list li::before{ content:"!"; display:grid; place-items:center; flex:0 0 1.2rem; width:1.2rem; height:1.2rem; margin-top:.2em; border-radius:999px; background:var(--danger); color:#fff; font-weight:900; font-size:.72rem; line-height:1; }

.trust-card{ padding:1.1rem; border-radius:15px; background:#0b1220; color:#fff; margin-bottom:1rem; }
.trust-card p{ margin:0 0 .35rem; color:rgba(255,255,255,.75); }
.trust-card strong{ color:#79bfde; font-size:1.05rem; }

.check-list{ list-style:none; padding:0; margin:0; display:grid; gap:.65rem; }
.check-list li{ padding:.9rem 1rem; border-left:4px solid var(--emerald); background:#f8fafc; border-radius:0 12px 12px 0; }
.check-list strong,.check-list span{ display:block; }
.check-list strong{ color:var(--navy); margin-bottom:.15rem; }
.check-list span{ color:var(--text-light); font-size:.88rem; }


.operation-section{ margin-bottom:1.5rem; }

@media (min-width:700px){
  .attendance-intro,.attendance-section{ padding:1.7rem; }
  .flow-grid{ grid-template-columns:repeat(4,1fr); }
  .flow-card{ padding:4rem 1rem 1rem; text-align:center; }
  .flow-no{ left:50%; transform:translateX(-50%); }
  .case-grid{ grid-template-columns:repeat(2,1fr); }
  .stage-grid{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
  .training-grid{ grid-template-columns:repeat(2,1fr); }
  .health-branch{ grid-template-columns:1fr 1fr; }
  
}
@media (min-width:1024px){
  .attendance-section-head h2{ font-size:1.5rem; }
  .training-grid{ grid-template-columns:repeat(3,1fr); }
  .case-grid{ grid-template-columns:repeat(4,1fr); }
  .ng-grid{ grid-template-columns:repeat(4,1fr); }
  
}


/* =========================================================
   再発防止報告メール フォーマット
   ========================================================= */
.report-format{
  margin:1.15rem 0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 26px rgba(15,23,42,.05);
}

.report-format-head{
  padding:1rem 1.1rem;
  background:var(--navy);
  color:#fff;
}

.report-format-head span{
  display:block;
  margin-bottom:.2rem;
  color:#79bfde;
  font-family:var(--font-head);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
}

.report-format-head h3{
  margin:0;
  color:#fff;
  font-size:1rem;
  font-weight:900;
  line-height:1.45;
}

.report-subject{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.85rem 1rem;
  border-bottom:1px solid var(--border);
  background:#f8fafc;
}

.report-subject span{
  flex:0 0 auto;
  padding:.23rem .55rem;
  border-radius:999px;
  background:var(--emerald);
  color:#fff;
  font-size:.68rem;
  font-weight:900;
  line-height:1.3;
}

.report-subject strong{
  min-width:0;
  color:var(--navy);
  font-size:.86rem;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.report-body{
  padding:1rem;
}

.report-body > p{
  margin:0;
  color:var(--text);
  font-size:.9rem;
  line-height:1.75;
}

.report-field{
  margin-top:.7rem;
  padding:.8rem .9rem;
  border-left:3px solid var(--emerald);
  border-radius:8px;
  background:#f8fafc;
}

.report-field strong,
.report-field span{
  display:block;
}

.report-field strong{
  margin-bottom:.25rem;
  color:var(--navy);
  font-size:.88rem;
  font-weight:900;
  line-height:1.55;
}

.report-field span{
  color:var(--text-light);
  font-size:.8rem;
  line-height:1.65;
}

.report-closing{
  margin-top:1rem!important;
  padding-top:1rem;
  border-top:1px solid var(--border);
}

/* mail section: small distinction from normal content */
#prevention-report{
  border-top:4px solid var(--emerald);
}

/* FIRST ACTION wording may wrap on narrow screens */
.flow-card p br{
  display:block;
}

/* Keep linked training item visually identical to cards */
.training-item--link{
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.training-item--link:hover{
  transform:translateY(-2px);
  border-color:rgba(7,132,198,.38);
  box-shadow:0 8px 22px rgba(16,55,78,.10);
}

@media (min-width:700px){
  .report-format-head{
    padding:1.1rem 1.25rem;
  }

  .report-subject{
    padding:.95rem 1.25rem;
  }

  .report-body{
    padding:1.25rem;
  }

  .report-field{
    padding:.9rem 1rem;
  }

  .report-field strong{
    font-size:.92rem;
  }

  .report-field span{
    font-size:.84rem;
  }
}

@media (max-width:520px){
  .report-subject{
    align-items:flex-start;
    flex-direction:column;
  }
}