/* ============================================================
   TKL Design System — CSS Custom Properties & Utilities
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ---- Light Mode ---- */
:root {
  /* Backgrounds & surfaces */
  --background:       210 20% 98%;
  --foreground:       215 25% 15%;
  --card:             0 0% 100%;
  --card-foreground:  215 25% 15%;
  --popover:          0 0% 100%;
  --popover-foreground: 215 25% 15%;

  /* Primary — TKL Teal */
  --primary:          199 89% 35%;
  --primary-foreground: 0 0% 100%;

  /* Secondary */
  --secondary:        210 15% 93%;
  --secondary-foreground: 215 25% 25%;

  /* Muted */
  --muted:            210 15% 96%;
  --muted-foreground: 215 15% 45%;

  /* Accent (teal light) */
  --accent:           199 89% 95%;
  --accent-foreground: 199 89% 25%;

  /* Semantic */
  --destructive:      0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success:          142 76% 36%;
  --success-foreground: 0 0% 100%;
  --warning:          38 92% 50%;
  --warning-foreground: 0 0% 100%;

  /* Borders & inputs */
  --border:           214 20% 90%;
  --input:            214 20% 90%;
  --ring:             199 89% 35%;

  /* Border-radius */
  --radius:           0.5rem;

  /* TKL Brand */
  --tkl-navy:         215 50% 20%;
  --tkl-teal:         199 89% 35%;
  --tkl-teal-light:   199 70% 50%;
  --tkl-green:        142 76% 36%;
  --tkl-red:          0 84% 60%;
  --tkl-orange:       38 92% 50%;

  /* Transport types */
  --transport-express: 10 75% 55%;
  --transport-truck:   215 55% 30%;
  --transport-train:   195 70% 45%;
  --transport-air:     25 85% 55%;
  --transport-sea:     210 70% 55%;
  --transport-other:   210 15% 60%;

  /* Sidebar */
  --sidebar-background:          215 50% 15%;
  --sidebar-foreground:          210 20% 95%;
  --sidebar-primary:             199 89% 55%;
  --sidebar-primary-foreground:  0 0% 100%;
  --sidebar-accent:              215 50% 22%;
  --sidebar-accent-foreground:   210 20% 95%;
  --sidebar-border:              215 40% 25%;
  --sidebar-ring:                199 89% 55%;
}

/* ---- Dark Mode ---- */
.dark {
  --background:       215 50% 8%;
  --foreground:       210 20% 95%;

  --card:             215 45% 12%;
  --card-foreground:  210 20% 95%;

  --popover:          215 45% 12%;
  --popover-foreground: 210 20% 95%;

  --primary:          199 89% 50%;
  --primary-foreground: 215 50% 10%;

  --secondary:        215 40% 18%;
  --secondary-foreground: 210 20% 90%;

  --muted:            215 40% 15%;
  --muted-foreground: 215 15% 55%;

  --accent:           199 50% 18%;
  --accent-foreground: 199 89% 70%;

  --destructive:      0 70% 50%;
  --destructive-foreground: 0 0% 100%;

  --success:          142 70% 45%;
  --success-foreground: 0 0% 100%;

  --warning:          38 90% 55%;
  --warning-foreground: 0 0% 100%;

  --border:           215 40% 20%;
  --input:            215 40% 20%;
  --ring:             199 89% 50%;

  --sidebar-background:         215 50% 6%;
  --sidebar-foreground:         210 20% 95%;
  --sidebar-primary:            199 89% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent:             215 50% 12%;
  --sidebar-accent-foreground:  210 20% 95%;
  --sidebar-border:             215 40% 15%;
  --sidebar-ring:               199 89% 55%;
}

/* ---- Body Reset ---- */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Select .input-field — custom arrow (beats Tailwind Preflight via specificity 0,1,1 > 0,0,1) ----
   Tailwind Preflight already sets appearance:none + background-image:none on all selects.
   We restore the SVG arrow only for .input-field selects using a more specific selector. ---- */
select.input-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%236b7280' d='M6 8L1 3h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

.dark select.input-field {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%239ca3af' d='M6 8L1 3h10z'/></svg>");
}

/* ---- Scrollbar — Dark mode global ---- */
.dark {
  scrollbar-width: thin;
  scrollbar-color: hsl(215 40% 30%) transparent;
}

.dark *::-webkit-scrollbar { width: 8px; height: 8px; }
.dark *::-webkit-scrollbar-track { background: transparent; }
.dark *::-webkit-scrollbar-thumb {
  background: hsl(215 40% 28%);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.dark *::-webkit-scrollbar-thumb:hover {
  background: hsl(199 60% 35%);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* ---- .scrollbar-thin utility (light + dark) ---- */
.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
  transition: background 0.2s;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
}

/* ---- Text Gradient ---- */
.text-gradient {
  background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--tkl-teal-light)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Semantic trend colors ---- */
.trend-up   { color: hsl(var(--success)); }
.trend-down { color: hsl(var(--destructive)); }

/* ---- Transport / Status badge utilities ---- */
.transport-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
}
.transport-sea     { background: hsl(var(--transport-sea) / 0.15);     color: hsl(var(--transport-sea));     }
.transport-air     { background: hsl(var(--transport-air) / 0.15);     color: hsl(var(--transport-air));     }
.transport-road    { background: hsl(var(--success) / 0.15);           color: hsl(var(--success));           }
.transport-rail    { background: hsl(var(--warning) / 0.15);           color: hsl(var(--warning));           }
.transport-cancelled { background: hsl(var(--destructive) / 0.15);    color: hsl(var(--destructive));       }
.transport-default { background: hsl(var(--muted-foreground) / 0.15); color: hsl(var(--muted-foreground)); }

/* ---- Button system (matches shadcn/ui spec) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  transition: all 150ms ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-primary:hover { background: hsl(var(--primary) / 0.9); }

.btn-outline {
  border-color: hsl(var(--border));
  background: transparent;
  color: hsl(var(--foreground));
}
.btn-outline:hover { background: hsl(var(--muted)); }

.btn-ghost {
  background: transparent;
  color: hsl(var(--foreground));
}
.btn-ghost:hover { background: hsl(var(--muted)); }

.btn-destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
.btn-destructive:hover { background: hsl(var(--destructive) / 0.9); }

.btn-success {
  background: hsl(var(--success));
  color: hsl(var(--success-foreground));
}
.btn-success:hover { background: hsl(var(--success) / 0.9); }

.btn-sm { height: 2rem; padding: 0 0.5rem; font-size: 0.75rem; }
.btn-icon { height: 2.25rem; width: 2.25rem; padding: 0; }

/* ---- Input / Label system ---- */
.input-field {
  width: 100%;
  height: 2.25rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input-field::placeholder { color: hsl(var(--muted-foreground)); }
.input-field:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.25);
}
.input-field:disabled { opacity: 0.5; cursor: not-allowed; }

/* padding-right for select.input-field is set above in the custom arrow block */

.input-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.125rem;
}

/* ---- Number input — hide spinners ---- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* ---- PWA / Notch support ---- */
@supports (padding-top: env(safe-area-inset-top)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  header.sticky { padding-top: env(safe-area-inset-top); }
}

/* ============================================================
   Blazor framework styles
   ============================================================ */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Validation styles */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid hsl(var(--success));
}

.invalid {
    outline: 1px solid hsl(var(--destructive));
}

.validation-message {
    color: hsl(var(--destructive));
}