/* Small additions on top of Tailwind (CDN). */
.nav-link { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: .5rem; }
.nav-link:hover { background: rgb(30 41 59); color: #fff; }
.nav-link.active { background: rgb(30 41 59); color: #fff; box-shadow: inset 3px 0 0 #f59e0b; }
.nav-badge { margin-left: auto; font-size: .7rem; padding: 0 .4rem; border-radius: 999px; background: #dc2626; color: #fff; }

.card { background: #fff; border: 1px solid rgb(226 232 240); border-radius: .75rem; }
.card-h { padding: .85rem 1rem; border-bottom: 1px solid rgb(241 245 249); display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; color: rgb(15 23 42); }

.tbl { width: 100%; font-size: .8rem; border-collapse: separate; border-spacing: 0; }
.tbl th { position: sticky; top: 0; background: rgb(248 250 252); text-align: left; font-weight: 600; color: rgb(71 85 105);
  padding: .55rem .6rem; border-bottom: 1px solid rgb(226 232 240); white-space: nowrap; cursor: pointer; user-select: none; }
.tbl th.num, .tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td { padding: .5rem .6rem; border-bottom: 1px solid rgb(241 245 249); vertical-align: top; white-space: nowrap; }
#drawer .tbl td { white-space: normal; }
.tbl tbody tr:hover td { background: rgb(248 250 252); }
.tbl tbody tr.clickable { cursor: pointer; }
.tbl-wrap { overflow: auto; max-height: 70vh; }

.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 500; white-space: nowrap; }
.dot { width: .6rem; height: .6rem; border-radius: 999px; display: inline-block; flex: none; }

/* Excel legend colours (mirror Import Data – BMAL) */
.c-released { background: #dc2626; } .c-arrived { background: #16a34a; } .c-claim { background: #0891b2; } .c-ongoing { background: #94a3b8; } .c-cancelled { background: #a1a1aa; }

.filter-btn { padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgb(226 232 240); background: #fff; font-size: .78rem; display: inline-flex; align-items: center; gap: .4rem; }
.filter-btn.active { background: rgb(15 23 42); color: #fff; border-color: rgb(15 23 42); }

a.lnk { color: rgb(37 99 235); } a.lnk:hover { text-decoration: underline; }