/* ========================================
   expenses.css
   GFI 経費精算
   Attendance page visual system aligned
======================================== */
:root{
  --exp-blue:#1597cf;
  --exp-blue-dark:#0676ad;
  --exp-soft:#eef7fc;
  --exp-border:#d8e8ef;
  --exp-ink:#18323f;
  --exp-muted:#667984;
  --exp-danger:#c93a3a;
  --exp-danger-bg:#fff4f4;
  --exp-ok:#23835b;
  --exp-ok-bg:#f1fbf6;
}

[id]{ scroll-margin-top:100px; }
.expenses-page{ max-width:1200px; padding-bottom:56px; }
.expenses-hero{ margin-bottom:1.25rem; }
.expenses-hero .page-header-title{ margin-bottom:.7rem; }
.expenses-hero .page-header-lead strong{ color:#79bfde; }
.expenses-version{
  margin-top:.7rem;
  font-family:var(--font-head);
  font-size:.78rem!important;
  letter-spacing:.08em;
  opacity:.72!important;
}

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

.expenses-message{
  margin-top:1rem;
  padding:1rem;
  background:var(--exp-soft);
  border-radius:14px;
  border-left:4px solid var(--exp-blue);
  display:grid;
  gap:.25rem;
}
.expenses-message strong{ color:#0b3858; font-size:1.05rem; }
.expenses-message span{ color:#334155; font-size:.92rem; line-height:1.7; }

/* quick cards */
.expenses-quick-grid{ display:grid; grid-template-columns:1fr; gap:.8rem; }
.expenses-quick-card{
  padding:1.1rem;
  border:1px solid var(--exp-border);
  border-radius:15px;
  background:#fff;
}
.expenses-card-label{
  display:inline-flex;
  padding:.25rem .55rem;
  border-radius:999px;
  margin-bottom:.65rem;
  background:var(--exp-soft);
  color:var(--exp-blue-dark);
  font-size:.72rem;
  font-weight:900;
  line-height:1.3;
}
.expenses-quick-card h3{ margin:0 0 .35rem; color:var(--navy); font-size:1.03rem; }
.expenses-quick-card p{ margin:0; color:var(--text-light); font-size:.88rem; line-height:1.65; }
.expenses-quick-card.is-primary{ border-color:#bfe4f4; background:#f8fdff; }
.expenses-quick-card.is-danger{ border-color:#fecdd3; background:#fff1f2; }
.expenses-quick-card.is-danger .expenses-card-label{ background:#ffe4e6; color:#be123c; }

/* ok / ng */
.expenses-judge-grid{ display:grid; grid-template-columns:1fr; gap:.8rem; }
.expenses-judge-card{ padding:1.1rem; border-radius:15px; border:1px solid var(--exp-border); background:#fff; }
.expenses-judge-card.is-ok{ background:#f0fdf4; border-color:#bbf7d0; }
.expenses-judge-card.is-ng{ background:#fff1f2; border-color:#fecdd3; }
.expenses-judge-title{ display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem; }
.expenses-judge-title span{ display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:999px; font-weight:900; }
.is-ok .expenses-judge-title span{ background:var(--exp-ok); color:#fff; }
.is-ng .expenses-judge-title span{ background:var(--exp-danger); color:#fff; }
.expenses-judge-title h3{ margin:0; color:var(--navy); font-size:1.02rem; }
.expenses-judge-card ul{ margin:0; padding-left:1.25rem; line-height:1.8; color:#334155; }

/* related rule */
.related-rule-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem;
  border:1px solid var(--exp-border);
  border-radius:15px;
  background:#f8fafc;
  color:inherit;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.related-rule-card:hover{ border-color:#9bd4ed; background:#faffff; transform:translateY(-2px); }
.related-rule-card span{ font-size:.72rem; font-weight:800; letter-spacing:.08em; color:var(--exp-blue-dark); }
.related-rule-card h3{ margin:.25rem 0; color:var(--navy); }
.related-rule-card p{ margin:0; color:var(--text-light); font-size:.88rem; line-height:1.65; }
.related-rule-card>strong{ white-space:nowrap; color:var(--exp-blue-dark); font-size:.86rem; }

/* regulations */
.regulation-section{ scroll-margin-top:90px; }
.regulation-nav{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.regulation-nav a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid var(--exp-border);
  background:#f8fafc;
  color:var(--exp-blue-dark);
  font-size:.76rem;
  font-weight:800;
  text-decoration:none;
}
.regulation-item{
  margin:.65rem 0;
  border:1px solid var(--exp-border);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  scroll-margin-top:90px;
}
.regulation-item summary{
  position:relative;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1rem 2.8rem 1rem 1rem;
  cursor:pointer;
  list-style:none;
  font-weight:900;
  color:var(--navy);
  background:#fff;
}
.regulation-item summary::-webkit-details-marker{ display:none; }
.regulation-item summary::after{
  content:"+";
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  width:1.8rem;
  height:1.8rem;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--exp-soft);
  color:var(--exp-blue-dark);
  font-size:1.05rem;
  font-weight:800;
}
.regulation-item[open] summary::after{ content:"−"; }
.regulation-item summary span{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  min-width:3.5rem;
  min-height:1.8rem;
  padding:.2rem .5rem;
  border-radius:8px;
  background:var(--exp-soft);
  color:var(--exp-blue-dark);
  font-size:.74rem;
  text-align:center;
}
.regulation-item.important-item{ border-color:#fecdd3; }
.regulation-item.important-item summary{ background:#fff7f7; }
.regulation-item.important-item summary span{ background:#ffe4e6; color:#be123c; }
.regulation-body{
  padding:0 1rem 1rem;
  border-top:1px solid #edf2f4;
  color:#334155;
  line-height:1.9;
}
.regulation-body p{ margin:1rem 0 0; }
.regulation-body ol,.regulation-body ul{ margin:.6rem 0 0; padding-left:1.45rem; }
.regulation-body li{ margin:.42rem 0; }

/* final */
.expenses-final{
  margin:0 0 1.5rem;
  padding:1.45rem;
  border-radius:18px;
  background:linear-gradient(145deg,#0b1220,#172033);
  color:#fff;
  box-shadow:var(--shadow-card);
  text-align:center;
}
.expenses-final .expenses-kicker{ color:#79bfde; }
.expenses-final h2{ margin:.35rem 0 .6rem; color:#fff; }
.expenses-final p{ margin:0 0 .6rem; color:rgba(255,255,255,.75); }
.expenses-final>strong{ color:#fff; }

@media (min-width:700px){
  .expenses-intro,.expenses-section{ padding:1.7rem; }
  .expenses-quick-grid{ grid-template-columns:repeat(2,1fr); }
  .expenses-judge-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:699px){
  .expenses-page{ padding-bottom:40px; }
  .expenses-intro,.expenses-section{ padding:1.1rem; border-radius:15px; }
  .expenses-version{ font-size:.7rem!important; }
  .related-rule-card{ align-items:flex-start; flex-direction:column; }
  .regulation-item summary{ align-items:flex-start; gap:.55rem; padding:.9rem 2.65rem .9rem .85rem; font-size:.9rem; }
  .regulation-item summary span{ min-width:3.1rem; }
  .regulation-body{ padding:0 .9rem .95rem; font-size:.91rem; line-height:1.85; }
}