/* 
  Shadcn UI Design System Implementation 
  Adapted for Vanilla CSS (No Build Step)
*/

:root {
  /* Base Colors (Slate-like) */
  --background: 255 255 255; /* white */
  --foreground: 15 23 42;    /* slate-900 */

  --card: 255 255 255;
  --card-foreground: 15 23 42;

  --popover: 255 255 255;
  --popover-foreground: 15 23 42;

  /* Primary Brand Color (Blue-600) */
  --primary: 37 99 235;      /* blue-600 */
  --primary-foreground: 255 255 255;

  /* Secondary (Emerald/Green-700 for trust/action - darker for WCAG contrast) */
  --secondary: 4 120 87;     /* emerald-700 - 4.58:1 contrast with white */
  --secondary-foreground: 255 255 255;

  /* Muted / Neutral */
  --muted: 241 245 249;      /* slate-100 */
  --muted-foreground: 100 116 139; /* slate-500 */

  /* Accent (Amber for Featured) */
  --accent: 251 191 36;      /* amber-400 */
  --accent-foreground: 15 23 42;

  --destructive: 239 68 68;  /* red-500 */
  --destructive-foreground: 255 255 255;

  --border: 226 232 240;     /* slate-200 */
  --input: 226 232 240;
  --ring: 37 99 235;         /* blue-600 */

  --radius: 0.5rem; /* rounded-md */
}

/* Base Styles */
body {
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Component Classes - Replicating Tailwind/Shadcn styles in pure CSS */

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  line-height: 1.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  height: 2.5rem; /* h-10 */
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(var(--ring)), 0 0 0 4px rgb(var(--background));
}

.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

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

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

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

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

.btn-destructive {
  background-color: rgb(var(--destructive));
  color: rgb(var(--destructive-foreground));
}

.btn-sm {
  height: 2.25rem; /* h-9 */
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
}

.btn-lg {
  height: 2.75rem; /* h-11 */
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1rem;
}

.btn-icon {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
}

/* INPUTS */
.input {
  display: flex;
  height: 2.5rem; /* h-10 */
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid rgb(var(--input));
  background-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(var(--ring)), 0 0 0 4px rgb(var(--background));
  border-color: rgb(var(--ring));
}
.input::placeholder {
  color: rgb(var(--muted-foreground));
}
.input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.select {
  /* Similar to input but often with a dropdown arrow which we leave to browser or custom SVG */
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid rgb(var(--input));
  background-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
}

/* CARDS */
.card {
  border-radius: 0.75rem; /* rounded-xl to match user pref, or 0.5rem for standard */
  border: 1px solid rgb(var(--border));
  background-color: rgb(var(--card));
  color: rgb(var(--card-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
}

/* BADGES */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  font-weight: 600;
  transition-property: color, background-color;
  transition-duration: 150ms;
}
.badge-default {
  background-color: rgb(var(--primary));
  color: rgb(var(--primary-foreground));
}
.badge-secondary {
  background-color: rgb(var(--secondary));
  color: rgb(var(--secondary-foreground));
}
.badge-outline {
  border-color: rgb(var(--foreground));
  color: rgb(var(--foreground));
}
.badge-featured {
  background-color: rgb(var(--accent));
  color: rgb(var(--accent-foreground));
}

/* TABLES */
.table-container {
  width: 100%;
  overflow: auto;
  border-radius: var(--radius);
  border: 1px solid rgb(var(--border));
  background-color: rgb(var(--card));
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.table thead tr {
  border-bottom: 1px solid rgb(var(--border));
  background-color: rgb(var(--muted) / 0.5);
}
.table th {
  height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: left;
  vertical-align: middle;
  font-weight: 500;
  color: rgb(var(--muted-foreground));
}
.table tbody tr {
  border-bottom: 1px solid rgb(var(--border));
}
.table tbody tr:hover {
  background-color: rgb(var(--muted) / 0.5);
}
.table td {
  padding: 1rem;
  vertical-align: middle;
}

/* Custom Gradients/Effects */
.featured-card-gradient {
  background: linear-gradient(135deg, rgb(255 251 235) 0%, rgb(255 255 255) 100%); /* amber-50 to white */
  border-color: rgb(var(--accent));
}

.font-chinese {
  font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
}