/* style.css — V8.0 (PHP+MySQL) */
:root{
  --bg:#0b0b12;
  --card:#121226;
  --muted:#b8b8d4;
  --text:#EEF0FF;
  --accent:#6c5ce7;
  --accent2:#00d4ff;
  --border: #23234a;
  --danger:#ff4757;
  --ok:#2ecc71;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(120deg, #0a0a16 0%, #0c0f2b 100%);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
.topbar{
  display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);
  background:linear-gradient(90deg, rgba(108,92,231,0.15), rgba(0,212,255,0.12));
  backdrop-filter: blur(6px);
}
.brand{display:flex;gap:12px;align-items:center}
.logo{font-size:28px;filter:drop-shadow(0 0 8px rgba(108,92,231,0.8))}
h1{margin:0;font-size:20px;letter-spacing:0.5px}
.muted{color:var(--muted)}
.small{font-size:12px}
.actions button{
  background:#0f0f20;border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;
}
.actions button:hover{border-color:var(--accent)}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:rgba(18,18,38,0.9);border:1px solid var(--border);border-radius:16px;padding:16px 16px 8px;margin-bottom:20px;box-shadow:0 10px 30px rgba(0,0,0,0.25)}
.card h2{margin:4px 0 12px 0}
.grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:12px}
.grid-1{grid-template-columns:1fr}
.grid label{display:flex;flex-direction:column;gap:6px;font-size:14px}
input,select{
  background:#0f0f20;border:1px solid var(--border);color:var(--text);padding:10px;border-radius:10px;outline:none;
}
input[readonly]{opacity:0.85}
input:focus,select:focus{border-color:var(--accent)}
.row{display:flex;align-items:center;gap:12px;margin-top:10px}
.spacer{flex:1}
.add{background:#0f0f20;border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:12px;cursor:pointer}
.add:hover{border-color:var(--accent)}
.pay{background:linear-gradient(135deg,#6c5ce7,#00d4ff);border:none;padding:10px 16px;border-radius:12px;color:white}
.ghost{background:#0f0f20;border:1px solid var(--border);color:var(--text);padding:10px 16px;border-radius:12px;cursor:pointer}
.smallbtn{padding:6px 10px;font-size:13px;border-radius:10px}
.danger{border-color:var(--danger);color:#ff8b94}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
tbody tr:hover{background:rgba(108,92,231,0.06)}
.footer{padding:24px;text-align:center;border-top:1px solid var(--border);opacity:0.9}
.del{background:transparent;border:1px solid var(--danger);color:#ff8b94;border-radius:8px;padding:4px 8px;cursor:pointer}
.del:hover{background:rgba(255,71,87,0.1)}
.summary{margin-top:16px;margin-bottom:4px}
.summary-card{
  max-width:1100px;margin:0 auto 8px auto;padding:12px;border-radius:16px;
  background:linear-gradient(90deg, rgba(108,92,231,0.12), rgba(0,212,255,0.12));
  border:1px solid var(--border);display:grid;gap:8px;grid-template-columns:repeat(5, 1fr);
}
.summary-item{padding:10px 12px;background:rgba(18,18,38,0.65);border:1px solid var(--border);border-radius:12px}
.summary-item .label{font-size:13px;color:var(--muted);margin-bottom:6px}
.summary-item .value{font-size:20px;font-weight:700}
.alert{max-width:1100px;margin:12px auto 0 auto;padding:10px 14px;border-radius:12px;border:1px solid #224a2e;background:rgba(46,204,113,0.12);color:#bdf7d0}
.hidden{display:none}

.air-tools{grid-column: span 3; background:#0f0f20;border:1px solid var(--border);border-radius:12px;padding:10px}
.air-top{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:6px}
.air-count{font-weight:700;opacity:0.9}
.air-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.mgr-list{max-height:320px;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:8px}
.mgr-item{display:flex;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:6px 0}
.mgr-item .name{font-weight:600}
.mgr-item .meta{font-size:12px;color:var(--muted)}

/* Modal */
@keyframes glowPulse{0%{box-shadow:0 0 0 rgba(108,92,231,0);}50%{box-shadow:0 0 24px rgba(108,92,231,0.6),0 0 48px rgba(0,212,255,0.35);}100%{box-shadow:0 0 0 rgba(108,92,231,0);}}
@keyframes popIn{0%{opacity:0;transform:scale(0.95)}100%{opacity:1;transform:scale(1)}}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn 180ms ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal.hidden{display:none}
.modal-box{background:#111229;border:1px solid var(--border);border-radius:16px;max-width:560px;width:94%;padding:16px;animation:popIn 180ms ease-out, glowPulse 1800ms ease-in-out 1}
.modal-title{font-weight:700;margin-bottom:10px}
.modal-content{color:var(--muted);margin-bottom:14px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.modal-actions .yes{background:#0f0f20;border:1px solid #2a5f3a;color:#bdf7d0;padding:8px 14px;border-radius:10px;cursor:pointer}
.modal-actions .no{background:#0f0f20;border:1px solid var(--danger);color:#ff8b94;padding:8px 14px;border-radius:10px;cursor:pointer}

@media (max-width: 1100px){ .summary-card{grid-template-columns:repeat(2, 1fr);} .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .summary-card{grid-template-columns:1fr;} .grid{grid-template-columns:1fr;} .air-tools{grid-column: span 1;} }