#ed-app{--brand:#800000;--green:#22c55e;--yellow:#eab308;color:#111;font-family:Arial,sans-serif}
#ed-app *{box-sizing:border-box}

#ed-app header{background:var(--brand);color:#fff;padding:14px 16px;font-size:1.25rem;font-weight:700;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
#ed-app header .title{display:flex;gap:10px;align-items:center}
#ed-app header .controls{display:flex;gap:8px;align-items:center}
#ed-app header input[type="number"]{width:90px;padding:6px;border-radius:6px;border:1px solid #ddd}
/* header buttons */
#ed-app header .controls button{padding:8px 12px;border-radius:8px;border:0;background:#fff;color:#111;cursor:pointer}
#ed-app header .controls button.secondary{background:#f4f4f4}
#ed-app header .controls button:hover{filter:brightness(.95)}

#ed-app nav{display:flex;justify-content:center;gap:8px;padding:10px;background:#fff;border-bottom:1px solid #eee}
#ed-app nav button{border:0;background:var(--brand);color:#fff;padding:10px 16px;border-radius:8px;cursor:pointer}
#ed-app nav button.secondary{background:#444}

#ed-app .container{max-width:1100px;margin:20px auto;padding:0 16px}
#ed-app .cards{display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0}
@media (min-width:680px){#ed-app .cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){#ed-app .cards{grid-template-columns:repeat(4,1fr)}}
#ed-app .card{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.06)}
#ed-app .card h3{margin:0;color:var(--brand);font-size:1rem}
#ed-app .card p{margin:6px 0 0;font-size:1.35rem;font-weight:700}
#ed-app .card.highlight{background:linear-gradient(180deg,#fff, #fff6f6); border-color:#f1d8d8}

#ed-app h2{margin:6px 0 10px}
#ed-app h3{margin:18px 0 8px}

#ed-app .row{display:flex;gap:8px;flex-wrap:wrap}
#ed-app .row input,#ed-app .row select,#ed-app .row button{padding:10px 12px;border-radius:10px;border:1px solid #ddd}
#ed-app .row input:focus,#ed-app .row select:focus{outline:2px solid rgba(0,0,0,.1)}
#ed-app .row button.primary{background:var(--brand);border:0;color:#fff;cursor:pointer}
#ed-app .row button.secondary{background:#f4f4f4;color:#111;border:0}
#ed-app .row button:hover{filter:brightness(.98)}

#ed-app table{width:100%;border-collapse:separate;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #eee}
#ed-app th,#ed-app td{padding:10px;border-bottom:1px solid #eee;text-align:center}
#ed-app th{background:#fafafa;position:sticky;top:0;z-index:1}
#ed-app tbody tr:nth-child(odd){background:#fcfcfc}

/* Responsive tables: enable horizontal scroll on small screens */
#ed-app .resp{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
#ed-app .resp thead tr{display:table; width:100%}
#ed-app .resp tbody{display:block}
#ed-app .resp tbody tr{display:table; min-width:560px}
#ed-app .resp th,#ed-app .resp td{white-space:nowrap}

@media (max-width:480px){
  #ed-app .row input,#ed-app .row select,#ed-app .row button{flex:1 1 100%}
  #ed-app header{padding:10px 12px;font-size:1.05rem}
  #ed-app .container{padding:0 10px}
  #ed-app .wallet-kpis{grid-template-columns:1fr}
  #ed-app .wallet-balance-row{flex-direction:column;align-items:flex-start}
  #ed-app .btn-redeem{width:100%;margin-top:10px}
  #ed-app .referral-row{flex-direction:column;align-items:flex-start}
  #ed-app .referral-row-right{text-align:left;margin-top:8px}
}
#ed-app tr:last-child td{border-bottom:0}
#ed-app .meta{font-size:.85rem;color:#666;margin-top:4px}

#ed-app .split{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){#ed-app .split{grid-template-columns:1fr 1fr}}

#ed-app .progress-wrap{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px}
#ed-app .progressbar{height:10px;background:#f0f0f0;border-radius:999px;overflow:hidden}
#ed-app .progressbar>div{height:100%;background:var(--green);width:0%}
#ed-app .progress-text{display:flex;justify-content:space-between;margin-top:8px;font-size:.95rem}

#ed-app #toast{visibility:hidden;min-width:240px;background:#333;color:#fff;text-align:center;border-radius:8px;padding:10px 14px;position:fixed;z-index:9999;left:50%;transform:translateX(-50%);bottom:26px}
#ed-app #toast.show{visibility:visible;animation:fadein .3s,fadeout .3s 2.7s}
@keyframes fadein{from{opacity:0;bottom:10px}to{opacity:1;bottom:26px}}
@keyframes fadeout{from{opacity:1;bottom:26px}to{opacity:0;bottom:10px}}

#ed-app .pill{padding:3px 8px;border-radius:999px;font-size:.8rem;color:#111;background:#f2f2f2;border:1px solid #eaeaea}

#ed-app footer{margin:18px auto 24px auto;max-width:1100px;padding:0 16px;text-align:center;color:#555}
#ed-app footer a{color:#0a7c2f;text-decoration:none}
#ed-app footer a:hover{text-decoration:underline}

#ed-app .filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid #eee;border-radius:12px;padding:10px;margin:12px 0}

/* Wallet Card Styles */
#ed-app .wallet-card{background:#111a2b;border:1px solid #22304a;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:16px;margin:16px 0;color:#e7ecf6}
#ed-app .wallet-card h3{margin:0 0 12px 0;font-size:18px;color:#e7ecf6}
#ed-app .wallet-card input{background:#0e182a;border:1px solid #20304d;color:#e7ecf6;padding:10px;border-radius:8px}
#ed-app .wallet-card input:focus{outline:2px solid #3b82f6;border-color:#3b82f6}
#ed-app .wallet-card input::placeholder{color:#99a3b4}
#ed-app .wallet-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
@media (min-width:680px){#ed-app .wallet-kpis{grid-template-columns:repeat(4,1fr)}}
#ed-app .wallet-kpi{background:#0e182a;border:1px solid #21314e;padding:12px;border-radius:14px}
#ed-app .wallet-label{font-size:12px;color:#99a3b4;margin-bottom:6px}
#ed-app .wallet-value{font-weight:800;font-size:20px;color:#e7ecf6}
#ed-app .wallet-sep{height:1px;background:#1e2a44;margin:12px 0}
#ed-app .wallet-balance-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
#ed-app .wallet-label-muted{font-size:12px;color:#99a3b4}
#ed-app .wallet-balance-value{font-weight:800;font-size:26px;margin-top:6px;color:#23c55e}
#ed-app .wallet-note{font-size:12px;color:#99a3b4;margin-top:6px}
#ed-app .btn-redeem{cursor:pointer;background:linear-gradient(180deg,#1d874b,#15803d);border:0;color:white;padding:10px 20px;border-radius:12px;font-weight:700;font-size:14px}
#ed-app .btn-redeem:disabled{opacity:0.5;cursor:not-allowed}
#ed-app .btn-redeem:not(:disabled):hover{filter:brightness(1.1)}
#ed-app .wallet-progress{height:8px;background:#17233b;border-radius:8px;margin-top:8px;overflow:hidden}
#ed-app .wallet-progress>span{display:block;height:100%;background:#23c55e;transition:width 0.3s ease}
#ed-app .referral-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
#ed-app .referral-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px;border:1px solid #20304d;border-radius:12px;background:#0e182a}
#ed-app .referral-row-left{display:flex;flex-direction:column;gap:4px}
#ed-app .referral-row-right{text-align:right}
#ed-app .referral-customer{color:#e7ecf6;font-weight:600}
#ed-app .referral-meta{font-size:12px;color:#99a3b4}
#ed-app .referral-amount{font-weight:800;font-size:18px;color:#e7ecf6}
#ed-app .referral-payout{font-size:12px;color:#23c55e}

/* Customer Notice */
#ed-app .customer-notice{margin-top:20px;padding:14px;border:1px solid #243352;background:#0e182a;border-radius:12px;font-size:14px;line-height:1.5;color:#e7ecf6}
#ed-app .customer-notice h4{margin:0 0 8px 0;color:#23c55e;font-size:16px}
#ed-app .customer-notice ul{margin:8px 0;padding-left:24px}
#ed-app .customer-notice li{margin:6px 0;color:#99a3b4}

/* Smaller contractor pie chart */
#ed-app .chart-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid #eee;border-radius:12px;padding:10px}
#ed-app #contractorChart{max-width:420px;height:160px !important;display:block;margin:8px auto}
#ed-app #adminChart{max-height:240px;max-width:720px}

@media (max-width:480px){
  #ed-app #contractorChart{max-width:320px;height:150px !important}
  #ed-app #adminChart{max-width:480px}
}


/* Mobile-first stacked tables for better readability */
@media (max-width:680px){
  #ed-app .resp{display:block;overflow:visible}
  #ed-app .resp thead{display:none}
  #ed-app .resp tbody{display:block}
  #ed-app .resp tbody tr{display:block;min-width:auto;margin:10px 0;border:1px solid #eee;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04)}
  #ed-app .resp td{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px;border-bottom:1px dashed #f0f0f0;white-space:normal}
  #ed-app .resp td:last-child{border-bottom:0}
  #ed-app .resp td::before{content:attr(data-label);font-weight:600;color:#555}
  #ed-app .resp select{width:100%}
  #ed-app .resp button{width:100%}
}