/* ============================================================================ expedicao.css — a grade de cartoes da Expedicao. Porte de D2Kbal\Web\wwwroot\src\css\pages\expedicao.css + a toolbar que no original era Tailwind inline no expedicao.html. As classes dos cartoes (.shipment-card, .semaforo-*) sao as mesmas do D2Kbal; as cores saem dos tokens do tema herdado do D2SCI. --grid-columns e escrita pelo runtime (patch attr:style no proprio container), como o updateGridColumns() do expedicao.js fazia no . ============================================================================ */ .exp-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; } .exp-campo { display: flex; flex-direction: column; gap: .25rem; min-width: 9.5rem; } .exp-campo > span { font-size: .7rem; font-weight: 600; color: var(--text-muted); } .exp-campo select, .exp-campo input { padding: .5rem .65rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text); font: inherit; font-size: .82rem; outline: none; } .exp-campo select:focus, .exp-campo input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .exp-acoes { display: flex; align-items: center; gap: .4rem; margin-left: auto; } .exp-btn { min-width: 2.25rem; height: 2.25rem; padding: 0 .6rem; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--card-bg); color: var(--text-muted); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .exp-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); } .exp-pager { font-size: .8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; padding: 0 .25rem; } .exp-info-linha { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; } .exp-info { font-size: .78rem; color: var(--text-muted); } /* ---- grade de cartoes --------------------------------------------------- */ .exp-grid { display: grid; grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr)); gap: .9rem; } @media (max-width: 900px) { .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .exp-grid { grid-template-columns: 1fr; } } .shipment-card { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: .9rem 1rem .9rem 1.15rem; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: var(--shadow); cursor: pointer; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .shipment-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--primary); } /* faixa lateral colorida = o "semaforo" da SP (1 no prazo, 2 atencao, 3 atrasado). Mesmas classes do expedicao.css do D2Kbal. */ .shipment-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--text-muted); } .shipment-card.semaforo-success::before { background: var(--success); } .shipment-card.semaforo-warning::before { background: var(--warning); } .shipment-card.semaforo-danger::before { background: var(--danger); } .shipment-card.semaforo-secondary::before{ background: var(--text-muted); } .shipment-card-id { font-size: .72rem; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; } .shipment-card-cliente { font-size: .98rem; font-weight: 700; color: var(--text); line-height: 1.25; word-break: break-word; } .shipment-card-info { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .76rem; color: var(--text-muted); } .shipment-card-info strong { font-weight: 600; color: var(--text); } .shipment-card-grupo { margin-top: .15rem; } .shipment-badge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; } /* ---- estado vazio ------------------------------------------------------- */ .exp-vazio { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 3rem 1rem; text-align: center; color: var(--text-muted); } .exp-vazio i { font-size: 2.5rem; opacity: .5; } .exp-vazio strong { color: var(--text); font-size: 1rem; } .exp-vazio span { font-size: .82rem; }