/* HarborGate - supplerende styles ud over Tailwind (udviklet af MKN) */
@layer components {}
body { background: #f4f5f7; color: #0b0b0b; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.card { background: #fff; border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(11,11,11,.06); }
.label { display:block; font-size: .75rem; font-weight: 500; color: #52514e; margin-bottom: .25rem; }
.input, .select { border: 1px solid #c3c2b7; border-radius: .375rem; padding: .4rem .6rem; font-size: .875rem; background: #fff; }
.input:focus, .select:focus { outline: 2px solid #2a78d6; outline-offset: 1px; border-color: #2a78d6; }
.btn-primary { background: #1c5cab; color: #fff; border-radius: .375rem; padding: .45rem .9rem; font-size: .875rem; font-weight: 500; }
.btn-primary:hover { background: #184f95; } .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-secondary { background: #fff; color: #0b0b0b; border: 1px solid #c3c2b7; border-radius: .375rem; padding: .45rem .9rem; font-size: .875rem; font-weight: 500; }
.btn-secondary:hover { background: #f0efec; }
.btn-danger { background: #d03b3b; color: #fff; border-radius: .375rem; padding: .45rem .9rem; font-size: .875rem; font-weight: 500; }
.btn-danger:hover { background: #b53030; }
.btn-sm { padding: .25rem .6rem; font-size: .75rem; }
.plate { display:inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .03em;
  background: #fff; border: 2px solid #1a1a19; border-left: 10px solid #1c5cab; border-radius: .25rem; padding: .05rem .5rem; white-space: nowrap; color: #0b0b0b; }
.plate:hover { background: #f0efec; }
.plate.blacklisted { border-color: #d03b3b; border-left-color: #d03b3b; color: #d03b3b; }
.plate-lg { font-size: 1.6rem; padding: .2rem 1rem; border-left-width: 16px; }
table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data th { text-align: left; font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #52514e; padding: .5rem .75rem; border-bottom: 1px solid #e1e0d9; background: #fafaf9; }
table.data td { padding: .5rem .75rem; border-bottom: 1px solid #efeeea; vertical-align: middle; }
table.data tr:hover td { background: #fafaf9; }
.num { font-variant-numeric: tabular-nums; }
.kpi-value { font-size: 2rem; font-weight: 600; line-height: 1.1; }
.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #fff7cc; } to { background: transparent; } }
.alert-pulse { animation: pulse-red 1.5s ease-in-out infinite; }
@keyframes pulse-red { 0%,100% { box-shadow: 0 0 0 0 rgba(208,59,59,.5);} 50% { box-shadow: 0 0 0 8px rgba(208,59,59,0);} }
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content:""; position:absolute; left: .45rem; top: .5rem; bottom: .5rem; width: 2px; background: #e1e0d9; }
.timeline-dot { position:absolute; left: 0; top: .6rem; width: 1rem; height: 1rem; border-radius: 9999px; border: 3px solid #fff; box-shadow: 0 0 0 1px #c3c2b7; }
.tab { padding: .5rem .9rem; font-size: .875rem; font-weight: 500; color: #52514e; border-bottom: 2px solid transparent; }
.tab.active { color: #1c5cab; border-color: #1c5cab; }