*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f4f7f6;color:#1d2b27;font-size:15px}
header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:#fff;padding:8px 16px;border-bottom:3px solid #0b6e4f;position:sticky;top:0;z-index:5}
.logo{height:42px}nav{display:flex;gap:4px;flex-wrap:wrap}nav button{background:#eef5f2;color:#0b6e4f;border:0;padding:9px 14px;border-radius:8px;font-size:15px;cursor:pointer}
nav button.on{background:#0b6e4f;color:#fff}.status{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:13px;flex-wrap:wrap}
.status span{padding:3px 8px;border-radius:12px;background:#eef}.on-line{background:#d7f5e3!important}.off-line{background:#ffe0d6!important}.dry{background:#fff3c4!important}
main{max-width:1150px;margin:18px auto;padding:0 14px}h2{margin:6px 0 12px;color:#0b6e4f}h3{margin:16px 0 8px}
.card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 3px #0001;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}label{display:flex;flex-direction:column;font-size:13px;color:#456;gap:3px}
input,select,textarea{font-size:15px;padding:8px;border:1px solid #c9d6d1;border-radius:7px;background:#fff}input:focus,select:focus{outline:2px solid #0b6e4f55}
button{font-size:15px;padding:9px 16px;border-radius:8px;border:0;background:#0b6e4f;color:#fff;cursor:pointer}button.small{padding:5px 10px;font-size:13px}
button.ghost{background:#eef5f2;color:#0b6e4f}button.warn{background:#c0392b}button.wa{background:#25d366}button.big{font-size:17px;padding:12px 22px}
table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:7px 8px;border-bottom:1px solid #e3ebe8;text-align:left;font-size:14px}th{background:#eef5f2}
tr.click:hover{background:#f3fbf7;cursor:pointer}.right{text-align:right}.muted{color:#789;font-size:13px}.tot{font-size:20px;font-weight:700;color:#0b6e4f}
.badge{padding:2px 8px;border-radius:10px;font-size:12px;background:#eee}.b-neachitat{background:#ffe0d6}.b-avans{background:#fff3c4}.b-integral{background:#d7f5e3}.b-pending{background:#dde6ff}
.b-simulare{background:#fff3c4}.b-emisa{background:#d7f5e3}.b-eroare{background:#ffd6d6}.b-coada{background:#dde6ff}
.row{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.trav{display:grid;grid-template-columns:28px 1fr 130px 40px;gap:6px;align-items:center;margin-bottom:6px}
#modal{position:fixed;inset:0;background:#0006;display:flex;align-items:flex-start;justify-content:center;overflow:auto;z-index:20;padding:30px 10px}
#modal .box{background:#fff;border-radius:12px;max-width:900px;width:100%;padding:20px;position:relative}.close{position:absolute;right:10px;top:10px;background:#eee;color:#333}
pre{background:#0f1b17;color:#c8f7dc;padding:12px;border-radius:8px;overflow:auto;font-size:12px;max-height:380px}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1d2b27;color:#fff;padding:12px 20px;border-radius:10px;z-index:30;max-width:90%}
.login{max-width:380px;margin:60px auto;text-align:center}.login img{width:240px}.login .card{text-align:left}
.chk{flex-direction:row;align-items:center;gap:6px;font-size:14px;color:#1d2b27}
@media(max-width:640px){.trav{grid-template-columns:24px 1fr 90px 34px}th:nth-child(n+5),td:nth-child(n+5){display:none}}
[hidden]{display:none!important}

.obsrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;margin:4px 0 8px 22px}.obsrow .to{flex:1;min-width:260px;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:4px}.chip{background:#eef5f2;color:#0b6e4f;padding:3px 9px;font-size:12px;border-radius:14px;border:1px solid #cfe3da}
table.plist td,table.plist th{border-bottom:1px solid #e3ebe8;padding:5px 6px;text-align:left;vertical-align:top}
@media print{header,nav,.noprint,#toast{display:none!important}body{background:#fff;font-size:11px}main{margin:0;max-width:none}.card{box-shadow:none;padding:0}}
.trav .obsrow{grid-column:1/-1;margin:0 0 6px 34px;width:auto}
@media(max-width:640px){table.plist th,table.plist td{display:table-cell!important}}

.warnbox{background:#fff6e0;border-left:4px solid #e0a000;padding:8px 10px;border-radius:6px}.b-anulat{background:#f3c6c6;color:#7a0000;font-weight:600}
button.warn{background:#b3261e}table.diff td.old{background:#fde8e8}table.diff td.new{background:#e5f7ea}table.diff td,table.diff th{padding:4px 6px;vertical-align:top}
/* clienti: sugestii (autocomplete) */
.acbox{position:absolute;z-index:1000;background:#fff;border:1px solid #b9d3c8;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.15);max-height:340px;overflow:auto}
.aci{padding:6px 10px;cursor:pointer;border-bottom:1px solid #eef3f1;font-size:14px}.aci:hover,.aci.on{background:#e8f4ee}.acfoot{padding:4px 10px;font-size:11px}
/* mod de pret */
.seg{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.seg>span{font-weight:600;margin-right:6px}
.seg label{display:inline-flex;align-items:center;gap:6px;border:1px solid #b9d3c8;border-radius:20px;padding:5px 12px;cursor:pointer;background:#fff}
.seg label:has(input:checked){background:#0b6e4f;color:#fff;border-color:#0b6e4f}
#cf.mode-total .trav .tp{display:none}
.invl label{display:block;margin-top:4px}.invl input,.invl textarea{width:100%}
.invl.neg{background:#fff4f4}
/* confirmare + trimitere */
#cfm{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2000;display:flex;align-items:center;justify-content:center;padding:12px}
#cfm .box{background:#fff;border-radius:12px;max-width:520px;width:100%;padding:18px 20px;box-shadow:0 10px 30px rgba(0,0,0,.3)}#cfm h2{margin:0 0 4px}#cfm td{padding:3px 8px 3px 0;vertical-align:top}
button.busy{opacity:.75;cursor:progress}.spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}
/* feedback la apasare pentru toate butoanele */
button{position:relative;overflow:hidden;transition:transform .08s ease,filter .08s ease,box-shadow .08s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:active:not(:disabled){transform:scale(.96);filter:brightness(.88)}
button:focus-visible{outline:3px solid #f5b301;outline-offset:2px}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:ripple .45s ease-out;pointer-events:none}
@keyframes ripple{to{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled){transform:none}.spin{animation-duration:2s}}
.invl textarea,#cfm textarea{font-family:inherit;font-size:14px}
