.payruns-page{max-width:1040px;}
.payruns-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;}
.payruns-tabs{display:flex;gap:18px;border-bottom:1px solid #e5e7eb;flex:1;}
.pay-tab{
  background:none;border:none;padding:10px 0;font-size:16px;
  color:#6b7280;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;
}
.pay-tab.active{color:#111827;border-color:#3b82f6;}
.payruns-actions{display:flex;align-items:center;gap:10px;}
.btn-new{
  background:#fff;border:1px solid #d1d5db;border-radius:8px;
  padding:8px 12px;font-weight:600;color:#111827;display:flex;align-items:center;gap:8px;cursor:pointer;
}
.btn-new i:last-child{font-size:12px;color:#6b7280;}
.help-btn{background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:8px 10px;}

.nav-group{display:flex;flex-direction:column;gap:6px;}
.nav-sub{margin-left:32px;display:flex;flex-direction:column;gap:6px;}
.nav-sub-item{
  color:#cbd5f1;font-weight:600;font-size:13px;
  padding:8px 10px;border-radius:10px;display:block;
}
.nav-sub-item:hover{background:rgba(255,255,255,0.06);}

.pay-info{
  display:flex;align-items:center;gap:10px;
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;
  border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:13px;
}
.pay-info a{color:#2563eb;font-weight:600;}
.pay-info i{color:#f59e0b;}

.payrun-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px 20px;
  box-shadow:0 8px 18px rgba(15,23,42,0.06);
}
.payrun-title{font-weight:700;font-size:16px;margin-bottom:12px;}
.payrun-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:center;
}
.pay-label{font-size:12px;color:#6b7280;margin-bottom:4px;}
.pay-value{font-weight:700;color:#111827;}
.payrun-cta{display:flex;justify-content:flex-end;}
.btn-primary{
  background:#93c5fd;border:none;border-radius:8px;padding:8px 16px;
  font-weight:700;color:#fff;cursor:not-allowed;
}
.payrun-note{
  margin-top:12px;font-size:13px;color:#6b7280;display:flex;align-items:center;gap:8px;
}

.history-bar{
  display:flex;align-items:center;justify-content:space-between;margin:10px 0 20px;
}
.filter-group{display:flex;align-items:center;gap:8px;position:relative;}
.filter-label{font-size:13px;color:#6b7280;}
.filter-btn{
  background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:6px 10px;
  font-weight:600;color:#111827;display:flex;align-items:center;gap:6px;cursor:pointer;
}
.filter-icon{background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:8px 10px;}

.dropdown{position:relative;}
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:220px;
  background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 18px 40px rgba(15,23,42,0.12);
  padding:6px;display:none;z-index:50;
}
.dropdown-menu[aria-hidden="false"]{display:flex;flex-direction:column;gap:4px;}
.dropdown-menu button{
  background:transparent;border:none;text-align:left;padding:10px 12px;border-radius:8px;
  font-weight:600;color:#111827;cursor:pointer;
}
.dropdown-menu button:hover{background:#f3f4f6;}
.dropdown-menu.wide{min-width:260px;left:0;right:auto;}
.dropdown-search{
  display:flex;align-items:center;gap:8px;border:1px solid #e5e7eb;border-radius:8px;
  padding:8px 10px;margin:4px;background:#f9fafb;
}
.dropdown-search input{border:none;outline:none;width:100%;background:transparent;}

.history-empty{
  background:#fff;border:1px solid #e5e7eb;border-radius:14px;min-height:380px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.history-text{font-size:14px;color:#6b7280;}
.history-illus{position:relative;width:140px;height:140px;}
.history-illus .illus-person{
  width:70px;height:70px;border-radius:50%;background:#c7d2fe;position:absolute;left:0;bottom:0;
}
.history-illus .illus-sheet{
  width:90px;height:110px;border-radius:18px;background:#eef2ff;position:absolute;right:0;top:8px;
  box-shadow:0 10px 24px rgba(15,23,42,0.08);padding:16px;
}
.illus-line{height:8px;background:#dbeafe;border-radius:999px;margin-bottom:10px;}
.illus-line.short{width:60%;}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:80;}
.modal[aria-hidden="false"]{display:flex;}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.4);}
.modal-card{
  position:relative;background:#fff;border-radius:12px;width:min(560px,92vw);
  box-shadow:0 24px 60px rgba(15,23,42,0.2);padding:0;overflow:hidden;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e5e7eb;}
.modal-head h3{margin:0;font-size:18px;}
.modal-close{border:none;background:transparent;font-size:18px;cursor:pointer;color:#2563eb;}
.modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px;}
.modal-label{font-size:13px;font-weight:600;color:#374151;}
.modal-label span{color:#ef4444;}
.modal-input{
  border:1px solid #d1d5db;border-radius:8px;padding:10px 12px;font-size:14px;outline:none;
}
.modal-actions{display:flex;gap:10px;padding:12px 18px 18px;}
.btn-outline{
  background:#fff;border:1px solid #d1d5db;color:#374151;border-radius:8px;padding:8px 14px;font-weight:600;cursor:pointer;
}
.modal-text{margin:0;color:#6b7280;font-size:14px;}

.alert-err{
  background:#fce8e6;border:1px solid #f4b6b6;border-radius:8px;padding:12px 16px;
  color:#d93025;font-size:13px;margin-bottom:14px;
}
.alert-err ul{margin:8px 0 0 18px;}
.alert-err-title{font-weight:700;}
.alert-ok{
  background:#e6f4ea;border:1px solid #b2e7bb;border-radius:8px;padding:10px 16px;
  color:#137333;font-size:13px;margin-bottom:14px;
}
.history-table{
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;
}
.history-row{
  display:grid;grid-template-columns:1.2fr 1.2fr 1fr .8fr;
  gap:10px;padding:12px 16px;border-bottom:1px solid #eef2f7;font-size:13px;color:#111827;
}
.history-row.head{background:#f8fafc;font-weight:700;color:#6b7280;text-transform:uppercase;font-size:11px;}
.history-row:last-child{border-bottom:none;}
.status-pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:#e5e7eb;color:#374151;border-radius:999px;padding:4px 10px;font-weight:600;font-size:12px;
}

@media (max-width: 900px){
  .payrun-grid{grid-template-columns:repeat(2,1fr);}
  .payrun-cta{justify-content:flex-start;}
}
@media (max-width: 640px){
  .payruns-head{flex-direction:column;align-items:flex-start;}
  .payruns-tabs{width:100%;}
  .payrun-grid{grid-template-columns:1fr;}
  .history-bar{flex-direction:column;align-items:flex-start;gap:10px;}
}
