/* AGI Increment Software — additions on top of style.css */
.sec-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.sec-head h2 { margin:0; border:0; padding:0; }

/* Quiet secondary buttons (the base `button` style is the big green one). */
button.btn-outline {
  background:#fff; color:#1e40af; border:1.5px solid #93c5fd; box-shadow:none; margin:0;
  padding:8px 16px; min-height:38px; font-size:.86rem;
}
button.btn-outline:hover { background:#eff6ff; box-shadow:none; transform:none; }
button.btn-outline:disabled { opacity:.5; cursor:not-allowed; }
button.btn-x {
  background:#fff; color:#b91c1c; border:1.5px solid #fecaca; box-shadow:none; margin:0;
  padding:4px 10px; min-height:30px; font-size:.78rem;
}
button.btn-x:hover { background:#fee2e2; box-shadow:none; transform:none; }

.count-pill { display:inline-block; background:#1e40af; color:#fff; border-radius:999px; font-size:.75rem; padding:1px 9px; vertical-align:middle; margin-left:6px; }

.save-box { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px; padding:10px 14px; margin-top:6px; }
.save-box .save-q { font-weight:600; font-size:.86rem; }
.save-box label.radio { display:flex; align-items:center; gap:6px; margin:0; font-weight:600; }
.save-box label.radio input { width:auto; margin:0; display:inline-block; }
.save-state.ok { color:#16a34a; font-weight:700; font-size:.86rem; }

.emp-card { border:1.5px solid #dbeafe; background:#f8fbff; border-radius:10px; padding:12px 14px 4px; margin-bottom:12px; }
.emp-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#1e3a8a; }
.inc-line { font-size:.84rem; color:#0f5c46; background:#ecfdf5; border-radius:6px; padding:0 10px; margin:-4px 0 10px; }
.inc-line:not(:empty) { padding:6px 10px; }
.arrear-only { border-top:1px dashed #bfdbfe; padding-top:10px; }

.big-actions { margin:16px 0 8px; }

/* Modal */
.modal[hidden] { display:none; }
.modal { position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal-box { background:#fff; border-radius:12px; padding:20px; width:100%; max-width:400px; box-shadow:0 20px 40px rgba(0,0,0,.25); }
.modal-box h3 { margin:0 0 6px; }
.modal-msg { min-height:20px; font-size:.84rem; margin-bottom:6px; }
.modal-msg.bad { color:#b91c1c; }
.modal-msg.ok { color:#16a34a; }

/* Preview page */
.prev-sec { margin-bottom:16px; }
.mini-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.mini-table th, .mini-table td { border:1px solid #e2e8f0; padding:6px 8px; text-align:left; }
.mini-table th { background:#eff6ff; color:#1e3a8a; }
.mini-table td.n, .mini-table th.n { text-align:right; }
.dl-group.agi { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.note-box { background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:8px; padding:10px 14px; font-size:.84rem; margin:10px 0; }
@media (max-width:640px) { .grid3 { grid-template-columns:1fr; } }

/* ---- Gradient call-to-action buttons (Open My Details, payslip upload) ---- */
.grad-row { display:flex; justify-content:center; margin:6px 0 10px; }
button.btn-grad {
  width:60%; min-width:min(100%, 300px); min-height:48px; padding:12px 22px; margin:0;
  font-size:.98rem; letter-spacing:.2px; line-height:1.3; text-align:center;
  color:#fff; border:0; border-radius:10px;
  background:linear-gradient(120deg,#1e40af 0%,#6d28d9 55%,#db2777 100%);
  box-shadow:0 6px 16px rgba(109,40,217,.30);
}
button.btn-grad:hover { background:linear-gradient(120deg,#1e3a8a 0%,#5b21b6 55%,#be185d 100%); box-shadow:0 8px 20px rgba(109,40,217,.40); transform:translateY(-1px); }
button.btn-grad.btn-grad-alt { background:linear-gradient(120deg,#047857 0%,#0891b2 55%,#1d4ed8 100%); box-shadow:0 6px 16px rgba(8,145,178,.30); }
button.btn-grad.btn-grad-alt:hover { background:linear-gradient(120deg,#065f46 0%,#0e7490 55%,#1e40af 100%); }
@media (max-width:640px) { button.btn-grad { width:100%; } }

/* ---- Payslip import ---- */
.payslip-box { background:#f0fdfa; border:1.5px dashed #5eead4; border-radius:10px; padding:12px 14px; margin:4px 0 14px; }
.payslip-box[hidden] { display:none; }
.payslip-box p { margin:0 0 6px; font-size:.88rem; }
.payslip-box input[type=file] { width:100%; margin:4px 0; background:#fff; }

.modal-box.ps-box { max-width:1040px; max-height:94vh; display:flex; flex-direction:column; padding:0; overflow:hidden; }
.ps-top { padding:16px 18px 8px; border-bottom:1px solid #e2e8f0; }
.ps-top .hint { margin:0 0 8px; }
.ps-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ps-tools input[type=search] { flex:1 1 220px; margin:0; }
.ps-def { margin:8px 0 4px; }
.ps-def label { font-size:.8rem; }
.ps-def input { margin:2px 0 0; }
.ps-list { flex:1 1 auto; overflow:auto; padding:6px 12px; -webkit-overflow-scrolling:touch; }
.ps-row { display:grid; grid-template-columns:28px minmax(150px,1.4fr) 76px minmax(130px,1fr) minmax(150px,1.1fr); gap:6px 10px; align-items:center; padding:7px 4px; border-bottom:1px solid #eef2f7; font-size:.84rem; }
.ps-row.on { background:#ecfdf5; }
.ps-row.bad { background:#fef2f2; color:#7f1d1d; }
.ps-row input[type=checkbox] { width:18px; height:18px; margin:0; }
.ps-row .ps-who b { display:block; font-size:.88rem; }
.ps-row small { color:#64748b; display:block; }
.ps-row .ps-pay { font-variant-numeric:tabular-nums; }
.ps-row .ps-pay b { color:#0f5c46; }
.ps-row input[type=text] { margin:0; padding:5px 8px; min-height:32px; font-size:.82rem; width:100%; }
.ps-row select { margin:0; padding:4px; min-height:32px; font-size:.82rem; width:100%; }
.ps-row .ps-warn { grid-column:2 / -1; font-size:.76rem; color:#b45309; }
.ps-row.bad .ps-warn { color:#b91c1c; }
.ps-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 18px; border-top:1px solid #e2e8f0; background:#f8fafc; }
.ps-foot-btns { display:flex; gap:8px; align-items:center; }
.ps-foot-btns button { margin:0; }
.ps-count { font-weight:700; font-size:.9rem; color:#1e3a8a; }
.ps-count.over { color:#b91c1c; }
@media (max-width:760px) {
  .ps-row { grid-template-columns:28px 1fr 76px; }
  .ps-row .ps-warn { grid-column:2 / -1; }
  .ps-row .ps-pay, .ps-row .ps-off { grid-column:2 / -1; }
}
.emp-card.flash { box-shadow:0 0 0 3px #f59e0b; }