.traffic-page{display:grid;gap:16px}.traffic-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.traffic-heading>div{display:grid;gap:3px}.traffic-heading h2,.traffic-heading p{margin:0}.traffic-heading p{color:var(--muted);font-size:12px}.traffic-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.traffic-summary>button{display:grid;gap:5px;padding:14px 16px;border:1px solid #d8e3ef;border-left:4px solid #2466c9;border-radius:14px;background:#fff;text-align:left;box-shadow:0 5px 18px #1a2b480c;cursor:pointer}.traffic-summary>button.warning{border-left-color:#f59e0b}.traffic-summary>button.danger{border-left-color:#d92d20}.traffic-summary small{color:#65778d;font-size:9px;font-weight:850;text-transform:uppercase}.traffic-summary strong{color:#102f68;font-size:21px}.traffic-summary span{color:#65778d;font-size:10px}.traffic-filters{display:grid;grid-template-columns:minmax(260px,1fr) 240px auto;gap:10px;padding:14px;border:1px solid #dbe4ef;border-radius:14px;background:#fff}.traffic-filters input,.traffic-filters select{min-width:0}.traffic-list{display:grid;gap:9px}.traffic-row{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(230px,1.2fr) minmax(220px,1fr) minmax(160px,.7fr) 130px;align-items:center;gap:14px;padding:14px 16px;border:1px solid #dae4ef;border-radius:14px;background:#fff;box-shadow:0 4px 16px #172a4709;cursor:pointer}.traffic-row:hover,.traffic-row:focus{border-color:#9bbce8;box-shadow:inset 4px 0 #2466c9,0 7px 22px #172a4712;outline:0}.traffic-row>div{display:grid;gap:3px;min-width:0}.traffic-row small{color:#687b91;font-size:10px}.traffic-row strong{overflow:hidden;text-overflow:ellipsis}.traffic-row .amount{text-align:right}.traffic-empty{padding:38px;border:1px dashed #bfd0e4;border-radius:14px;background:#f8fbff;text-align:center}.traffic-infraction-modal{height:min(92vh,850px);max-height:92vh;overflow:hidden}.traffic-infraction-modal>.modal-body{height:calc(100% - 72px);overflow:hidden;padding:0}.traffic-form{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%}.traffic-form-scroll{display:grid;align-content:start;gap:14px;padding:18px 22px;overflow-y:auto}.traffic-form-card{padding:16px;border:1px solid #d7e2ef;border-radius:15px;background:#f8fafc}.traffic-form-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #dfe7f0}.traffic-form-card>header>div{display:flex;align-items:center;gap:9px}.traffic-step{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#e8f1ff;color:#174ea6;font-weight:850}.traffic-form-card h3{margin:0;color:#123f8c;font-size:14px}.traffic-form-card>header small{color:#6d7f94}.traffic-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.traffic-form-grid .span-2{grid-column:span 2}.traffic-form-grid .span-4{grid-column:1/-1}.traffic-responsibility{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:13px 14px;border:1px solid #d5e1ef;border-radius:13px;background:#fff}.traffic-responsibility>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#eef3f8;color:#64788e;font-weight:900}.traffic-responsibility.found{border-color:#a7d7bd;background:#f2fbf6}.traffic-responsibility.found>span{background:#dff4e8;color:#087443}.traffic-responsibility.warning{border-color:#f6cf8e;background:#fff9ed}.traffic-responsibility.warning>span{background:#ffedc7;color:#a15c00}.traffic-responsibility div{display:grid;gap:3px}.traffic-responsibility small{color:#64788e}.traffic-form>.form-actions{margin:0;padding:14px 22px 18px;border-top:1px solid #dce5ef;background:#fff}.traffic-detail{display:grid;gap:14px}.traffic-detail-identity{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #d9e4ef;border-radius:14px;overflow:hidden}.traffic-detail-identity>div{display:grid;gap:4px;padding:13px 15px;border-right:1px solid #e2e9f2}.traffic-detail-identity>div:last-child{border-right:0}.traffic-detail-identity small{color:#687a90;font-size:9px;font-weight:850;text-transform:uppercase}.traffic-detail-card{padding:16px;border:1px solid #d9e4ef;border-radius:14px;background:#f8fafc}.traffic-detail-card h3{margin:0 0 12px;color:#123f8c}.traffic-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.traffic-detail-grid>div{display:grid;gap:4px;padding:11px;border-radius:11px;background:#fff}.traffic-detail-grid small{color:#687a90;font-size:9px;text-transform:uppercase}.traffic-history{display:grid;gap:8px}.traffic-history>div{display:grid;grid-template-columns:150px 1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid #e2e8f0}.traffic-history small{color:#687a90}.traffic-history span{font-weight:750}.traffic-history em{color:#687a90;font-size:10px;font-style:normal}.traffic-tooltip{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:4px;border:1px solid #9db3cc;border-radius:50%;color:#51708f;font-size:10px;cursor:help}
@media(max-width:1100px){.traffic-summary{grid-template-columns:1fr 1fr}.traffic-row{grid-template-columns:1fr 1fr 1fr}.traffic-row .amount{text-align:left}.traffic-form-grid{grid-template-columns:1fr 1fr}.traffic-form-grid .span-4{grid-column:1/-1}}
@media(max-width:700px){.traffic-heading{align-items:stretch;flex-direction:column}.traffic-heading button{width:100%}.traffic-summary,.traffic-filters,.traffic-row,.traffic-detail-identity,.traffic-detail-grid{grid-template-columns:1fr}.traffic-row{gap:8px}.traffic-form-scroll{padding:14px}.traffic-form-grid{grid-template-columns:1fr}.traffic-form-grid .span-2,.traffic-form-grid .span-4{grid-column:auto}.traffic-form-card>header{align-items:flex-start;flex-direction:column}.traffic-form>.form-actions{flex-wrap:wrap;padding:14px}.traffic-form>.form-actions button{flex:1}.traffic-detail-identity>div{border-right:0;border-bottom:1px solid #e2e9f2}.traffic-detail-identity>div:last-child{border-bottom:0}.traffic-history>div{grid-template-columns:1fr}}