@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import Shoelace styles for the light theme */
@import "@shoelace-style/shoelace/dist/themes/light.css";

/* Override Shoelace theme variables with our edoc green theme */
:root {
    /* Primary color - using our edoc green */
    --sl-color-primary-50: theme("colors.edoc.50");
    --sl-color-primary-100: theme("colors.edoc.100");
    --sl-color-primary-200: theme("colors.edoc.200");
    --sl-color-primary-300: theme("colors.edoc.300");
    --sl-color-primary-400: theme("colors.edoc.400");
    --sl-color-primary-500: theme("colors.edoc.500");
    --sl-color-primary-600: theme("colors.edoc.600");
    --sl-color-primary-700: theme("colors.edoc.700");
    --sl-color-primary-800: theme("colors.edoc.800");
    --sl-color-primary-900: theme("colors.edoc.900");
    --sl-color-primary-950: theme("colors.edoc.950");

    /* Other colors can also be customized if needed */
    --sl-panel-background-color: theme("colors.white");
    --sl-input-background-color: theme("colors.white");

    /* Focus rings */
    --sl-focus-ring-color: theme("colors.edoc.600");
    --sl-focus-ring-width: 3px;
}

/* Our custom edoc styles */
.edoc-container {
    @apply max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-md;
}

.signature-section {
    @apply bg-edoc-100 p-4 rounded mb-6 border border-edoc-200;
}

.document-section {
    @apply bg-edoc-100 p-4 rounded mb-6 border border-edoc-200;
}

.metadata-section {
    @apply bg-edoc-100 p-4 rounded mb-6 border border-edoc-200;
}

.section-title {
    @apply font-semibold mb-3 text-lg text-edoc-800;
}

.file-item {
    @apply py-3 px-4 border-b border-edoc-200 flex justify-between items-center;
}

.file-item:last-child {
    @apply border-b-0;
}

.valid {
    @apply text-edoc-700 font-semibold;
}

.invalid {
    @apply text-red-600 font-semibold;
}

/* Enhancement for Shoelace components */
sl-button::part(base) {
    @apply rounded transition-all;
}

sl-button[variant="primary"]::part(base) {
    @apply bg-edoc-700 text-white hover:bg-edoc-800;
}

sl-button[variant="text"]::part(base) {
    @apply text-edoc-700 hover:text-edoc-800 hover:bg-edoc-100;
}

sl-select::part(base) {
    min-width: auto;
}

/* Force visibility settings for custom elements */
edoc-app {
    display: none;
}

html.js-loaded edoc-app {
    display: block !important;
}

/* Static content visibility */
#static-content {
    display: block;
}

html.js-loaded #static-content {
    display: none !important;
}

/* Hide the app when JS is disabled (for graceful degradation) */
noscript ~ #app {
    display: none !important;
}
