/* DSE V7.8.4 — Annual Period & Automatic Book Closing
   Hanya menambah komponen periode. Desain inti V7.8.3 tidak diubah. */

.v784-period-info{
  margin:0 0 22px;
  padding:16px 18px;
  border:1px solid rgba(13,105,77,.15);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(239,250,245,.94),rgba(255,248,220,.92));
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.v784-period-info div{display:grid;gap:3px}
.v784-period-info strong{color:#075c45;font-size:15px}
.v784-period-info span{color:#6b7f77;font-size:12px}

.v784-status{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:31px;padding:6px 11px;border-radius:999px;
  font-size:10px;font-weight:900;letter-spacing:.07em;white-space:nowrap;
}
.v784-status.active{color:#08734f;background:#dff8ec}
.v784-status.closed{color:#53615b;background:#edf1ef}
.v784-status.awaiting_close{color:#9a6500;background:#fff1c4}
.v784-status.upcoming{color:#286390;background:#e7f3ff}

.v784-page-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0;
}
.v784-stat{
  border:1px solid rgba(14,88,67,.12);border-radius:20px;padding:17px;
  background:rgba(255,255,255,.88);box-shadow:0 10px 28px rgba(4,65,48,.06);
}
.v784-stat span{display:block;color:#789087;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.v784-stat strong{display:block;margin-top:7px;color:#0b4f3e;font-size:20px}
.v784-stat small{display:block;margin-top:5px;color:#80928b}

.v784-period-hero{
  padding:22px;border-radius:24px;
  background:linear-gradient(135deg,#075c45,#0e7b5c 62%,#caa637);
  color:white;box-shadow:0 14px 35px rgba(5,75,56,.18);
}
.v784-period-hero label{color:rgba(255,255,255,.8);font-size:11px;font-weight:800;letter-spacing:.08em}
.v784-period-hero select{margin-top:8px;background:rgba(255,255,255,.95)}
.v784-period-hero h3{font-size:27px;margin:13px 0 3px;color:#fff}
.v784-period-hero p{margin:0;color:rgba(255,255,255,.82)}
.v784-period-hero .v784-status{margin-top:13px;background:rgba(255,255,255,.92)}

.v784-closing-card{
  margin-top:18px;padding:20px;border-radius:22px;
  border:1px solid rgba(202,166,55,.28);
  background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(255,249,223,.91));
}
.v784-closing-card h3{margin:0 0 8px;color:#075c45}
.v784-closing-card p{margin:0 0 16px;line-height:1.7;color:#657a72}
.v784-closing-actions{display:flex;gap:10px;flex-wrap:wrap}
.v784-closing-actions button{flex:1;min-width:190px}

.v784-period-list{display:grid;gap:10px;margin-top:16px}
.v784-period-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid rgba(13,105,77,.13);border-radius:18px;padding:15px 16px;background:rgba(255,255,255,.9);
}
.v784-period-card span{display:block;color:#8a9b94;font-size:10px;text-transform:uppercase;font-weight:800}
.v784-period-card h4{margin:4px 0;color:#0b5743;font-size:17px}
.v784-period-card small{color:#7c8e87}
.v784-period-card-side{display:grid;justify-items:end;gap:7px}
.v784-period-card-side strong{font-size:16px;color:#0b5743}
.v784-period-card.active{border-color:rgba(13,130,91,.34);box-shadow:0 8px 20px rgba(9,101,72,.08)}
.v784-period-card.closed{background:rgba(246,248,247,.92)}
.v784-period-card.awaiting_close{background:rgba(255,249,226,.94)}

.v784-input-period-helper{
  margin:0 0 10px;padding:11px 13px;border-radius:14px;
  background:linear-gradient(135deg,#e9f8f1,#fff5cf);border:1px solid rgba(10,107,78,.12);
}
.v784-input-period-helper strong,.v784-input-period-helper span{display:block}
.v784-input-period-helper strong{font-size:12px;color:#075c45}
.v784-input-period-helper span{font-size:11px;color:#6f817a;margin-top:3px;line-height:1.45}

@media(max-width:760px){
  .v784-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v784-period-info{align-items:flex-start;flex-direction:column}
  .v784-period-card{align-items:flex-start}
}
@media(max-width:430px){
  .v784-page-grid{grid-template-columns:1fr 1fr;gap:9px}
  .v784-stat{padding:14px}
  .v784-stat strong{font-size:17px}
  .v784-period-hero h3{font-size:23px}
}