.error-boundary {
    border: 2px dashed rgba(255, 0, 0, 0.3);
    position: relative;
}

.error-boundary::after {
    content: "⚠️";
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 0, 0, 0.1);
    color: red;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 0 0 0 4px;
    pointer-events: none;
}

.loading-spinner {
    @apply flex items-center justify-center;
    @apply min-h-[200px];
    @apply bg-gradient-to-br from-white/5 to-white/10;
    @apply rounded-xl;
    @apply backdrop-blur-sm;
}

.loading-spinner::after {
    content: '';
    @apply w-12 h-12;
    @apply border-4 border-primary/20;
    @apply border-t-primary;
    @apply rounded-full;
    @apply animate-spin;
    @apply shadow-lg;
}

/* Base text and background colors for all elements */
body {
    @apply bg-background text-foreground;
}

/* Form elements styling */
input,
textarea,
select {
    @apply bg-background text-foreground border-input;
    @apply placeholder:text-muted-foreground;
    @apply focus:outline-none focus:ring-2 focus:ring-ring;
}

/* Handle filled state */
input:not(:placeholder-shown),
textarea:not(:placeholder-shown),
select:not(:placeholder-shown) {
    @apply bg-background;
}

/* Ensure proper contrast in both modes */
.dark input,
.dark textarea,
.dark select {
    @apply bg-background/95;
}

input,
textarea,
select {
    @apply bg-background/95;
}

/* Handle disabled state */
input:disabled,
textarea:disabled,
select:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Button styling */
button {
    @apply bg-primary text-primary-foreground hover:bg-primary/90;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
}

/* Secondary button variant */
button.secondary {
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
}

/* Card styling */
.card {
    @apply bg-card text-card-foreground;
    @apply border border-border;
    @apply rounded-lg shadow-sm;
}

/* Popover and dropdown styling */
.popover {
    @apply bg-popover text-popover-foreground;
    @apply border border-border;
    @apply shadow-md rounded-md;
}

/* Link styling */
a {
    @apply text-primary hover:text-primary/80;
    @apply focus:outline-none focus:ring-2 focus:ring-ring;
}

/* Muted text */
.text-muted {
    @apply text-muted-foreground;
}

/* Accent backgrounds */
.bg-accent {
    @apply bg-accent text-accent-foreground;
}

/* Destructive elements */
.destructive {
    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
}

/* Code blocks and pre elements */
pre,
code {
    @apply bg-muted text-muted-foreground;
    @apply rounded px-[0.3em] py-[0.2em];
}

/* Table styling */
table {
    @apply border-collapse w-full;
}

th,
td {
    @apply border border-border;
    @apply p-2 text-left;
}

th {
    @apply bg-muted font-semibold;
}

/* Badge/tag styling */
.badge {
    @apply inline-flex items-center rounded-full;
    @apply px-2.5 py-0.5 text-xs font-semibold;
    @apply bg-primary/10 text-primary-foreground;
}

/* Focus outline for accessibility */
:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2;
}

/* Selection styling */
::selection {
    @apply bg-primary/20 text-foreground;
}

/* Custom styles from the second style block */
:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
}

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
}

/* Additional Tailwind overrides */
*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

/* LINE Brand Color */
.bg-line {
    background-color: #06C755;
    transition: background-color 0.2s;
}
.bg-line:hover {
    background-color: #05b34c;
}

/* Ensure sticky footer is above other content */
#sticky-footer {
    z-index: 9999;
}

/* Custom Background */
body {
    background-image: url('../assets/bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Overlay for readability */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: -1;
    pointer-events: none;
}