/* SSY Styles – Bhagwa + Green – Responsive */
:root{
  --ssy-orange:#F44236;
  --ssy-green:#00BF31;
  --ssy-bg:#ffffff;
  --ssy-muted:#6b7280;
  --ssy-border:#e5e7eb;
  --ssy-shadow:0 10px 25px rgba(0,0,0,.08);
}

#ssy-card.ssy-card{
  max-width: 980px;
  margin: 8px auto;
  background: var(--ssy-bg);
  border-radius: 8px;
  box-shadow: var(--ssy-shadow);
  overflow: hidden;
  border: 1px solid var(--ssy-border);
  font-family: inherit;
}

.ssy-header{
  background: linear-gradient(135deg, var(--ssy-orange), #F44236);
  color:#fff;
  padding: 18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.ssy-header h2{
  margin:0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
}
.ssy-header small{
  opacity:.95;
  font-weight:600;
}

.ssy-section{ padding:16px 18px; }

/* Grid */
.ssy-grid{ display:grid; gap:14px; }
.ssy-grid-2{ grid-template-columns:1fr; }
.ssy-grid-3{ grid-template-columns:1fr; }
@media (min-width:640px){
  .ssy-grid-2{ grid-template-columns:1fr 1fr; }
  .ssy-grid-3{ grid-template-columns:1fr 1fr; }
}
@media (min-width:960px){
  .ssy-grid-3{ grid-template-columns:1fr 1fr 1fr; }
}

.ssy-field span{
  font-weight:700;
  color:var(--ssy-green);
  display:block;
}
.ssy-field input,
.ssy-field select{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--ssy-border);
  background:#fff;
  outline:none;
  transition: all .15s ease;
  font-size:15px;
}
.ssy-field input:focus,
.ssy-field select:focus{
  border-color: var(--ssy-green);
  box-shadow: 0 0 0 4px rgba(46,125,50,.12);
}

/* Actions */
.ssy-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:10px; align-items:center;
}
.btn{
  border:none; border-radius:12px; padding:10px 16px; font-weight:800; cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease;
  box-shadow: 0 6px 15px rgba(0,0,0,.08);
}
.btn:active{ transform: translateY(1px); }
.btn-green{ background:var(--ssy-green); color:#fff; }
.btn-orange{ background:var(--ssy-orange); color:#fff; }
.ssy-auto{ margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--ssy-muted); font-weight:600; }

/* Warning */
.ssy-warn{
  margin-top:10px; background:#FFF3CD; color:#7a5a00;
  border:1px solid #FBE69C; padding:10px 12px; border-radius:12px;
}

/* Stats */
.ssy-border{ border-top:1px dashed var(--ssy-border); }
.stat{ border-radius:16px; padding:14px; }
.stat-green-lite{ background:#F6FFF6; border:1px solid #cde7cf; }
.stat-orange-lite{ background:#FFF6ED; border:1px solid #ffd3ad; }
.stat-green-strong{ background:#F6FFF6; border:2px solid var(--ssy-green); }
.stat-label{ font-weight:800; color:var(--ssy-green); }
.stat-orange-lite .stat-label{ color:var(--ssy-orange); }
.stat-value{ font-size:22px; font-weight:900; margin-top:4px; }

/* Cards for charts */
.card{
  background:#fff; border:1px solid var(--ssy-border); border-radius:16px; padding:12px;
  box-shadow: 0 3px 8px rgba(0,0,0,.04);
}

/* Table */
.table-wrap{ overflow:auto; border:1px solid var(--ssy-border); border-radius:14px; }
.table-wrap table{ width:100%; border-collapse:collapse; font-size:14px; }
.table-wrap th, .table-wrap td{ padding:10px 8px; border-bottom:1px solid #f2f2f2; text-align:center; white-space:nowrap; }
.table-wrap thead th{ position:sticky; top:0; background:var(--ssy-orange); color:#fff; z-index:1; }

/* Mobile spacing */
@media (max-width:480px){
  #ssy-card.ssy-card{ margin:12px; border-radius:14px; }
  .stat-value{ font-size:20px; }
}