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

/* Dark mode foundation — html background prevents white bleed on overscroll/short pages */
html {
    background-color: white;
}
html.dark {
    background-color: theme('colors.zinc.950');
    color-scheme: dark; /* native browser elements (scrollbar, inputs) go dark too */
}
body {
    @apply bg-white dark:bg-zinc-950 text-zinc-950 dark:text-white;
}

a {
    @apply cursor-pointer;
}

.btn {
    @apply inline-flex items-center gap-x-1.5 rounded-md bg-zinc-900 px-3 py-2 text-sm/6 font-semibold text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-900 active:bg-zinc-900 active:text-white/80 dark:bg-zinc-800 dark:hover:bg-zinc-700 dark:focus-visible:outline-zinc-600 dark:active:bg-zinc-800 dark:active:text-white/80;
}

.btn-secondary {
    @apply bg-zinc-100 text-zinc-700 hover:bg-zinc-200 active:bg-zinc-100 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 focus-visible:outline-zinc-500;
}

/* Globální třídy pro formulářové inputy */
.form-input {
    @apply block w-full rounded-md border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-zinc-800/50 px-3 py-2 text-zinc-950 dark:text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-600 sm:text-sm/6 disabled:opacity-50 disabled:cursor-not-allowed;
}

.form-input:focus {
    @apply border-zinc-950/20 dark:border-white/20;
}

.form-label {
    @apply block text-sm/6 font-medium text-zinc-950 dark:text-white;
}

.form-error {
    @apply mt-1 text-sm text-red-600 dark:text-red-400;
}

.form-checkbox {
    appearance: none;
    -webkit-appearance: none;
    @apply h-5 w-5 shrink-0 rounded border border-zinc-300 dark:border-zinc-600
           bg-white dark:bg-zinc-900
           cursor-pointer transition-colors duration-150
           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-900 dark:focus-visible:ring-zinc-300 dark:focus-visible:ring-offset-zinc-900
           disabled:cursor-not-allowed disabled:opacity-50;
}
.form-checkbox:checked {
    @apply bg-zinc-900 border-zinc-900 dark:bg-zinc-50 dark:border-zinc-50;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5L4 7.5L8.5 2.5' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}
.dark .form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5L4 7.5L8.5 2.5' stroke='%2309090b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Toggle switch */
.toggle-input {
    @apply sr-only;
}
.toggle-label {
    @apply relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-zinc-200 dark:bg-zinc-700 transition-colors duration-200 focus-within:ring-2 focus-within:ring-zinc-900 dark:focus-within:ring-zinc-600;
}
.toggle-input:checked + .toggle-label {
    @apply bg-zinc-900 dark:bg-zinc-300;
}
.toggle-knob {
    @apply pointer-events-none inline-block h-5 w-5 translate-x-0 rounded-full bg-white shadow ring-0 transition-transform duration-200;
}
.toggle-input:checked ~ .toggle-label .toggle-knob,
.toggle-input:checked + .toggle-label .toggle-knob {
    @apply translate-x-5;
}

.form-select {
    @apply block w-full rounded-md border border-zinc-950/10 dark:border-white/10
           bg-white dark:bg-zinc-800/50
           pl-3 pr-10 py-2
           text-zinc-950 dark:text-white
           shadow-sm
           focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-600
           focus:border-zinc-950/20 dark:focus:border-white/20
           sm:text-sm/6
           disabled:opacity-50 disabled:cursor-not-allowed
           appearance-none;
    /* Custom chevron — zinc-500 works on both light and dark backgrounds */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2371717a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1rem;
}

/* Tom Select – sladění s form-input (zinc, dark mode) */
.ts-wrapper .ts-control {
    @apply border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-zinc-800/50 rounded-md shadow-sm min-h-[38px] text-zinc-950 dark:text-white text-sm;
}
.ts-wrapper.focus .ts-control,
.ts-wrapper .ts-control:focus-within {
    @apply border-zinc-950/20 dark:border-white/20 ring-2 ring-zinc-900/20 dark:ring-zinc-600 outline-none;
}
.ts-wrapper .ts-control input {
    @apply text-zinc-950 dark:text-white;
}
.ts-dropdown {
    @apply rounded-md border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-zinc-800 shadow-lg;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header {
    @apply text-zinc-950 dark:text-white py-2 px-3 text-sm;
}
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    @apply bg-zinc-100 dark:bg-zinc-700;
}
.ts-dropdown .option.selected {
    @apply bg-zinc-200 dark:bg-zinc-600;
}
/*
.badge{
    @apply inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline ;

}
.badge.success{
    @apply bg-lime-400/20 text-lime-700 group-data-hover:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-hover:bg-lime-400/15;
}
.badge.pending{
    @apply bg-zinc-600/10 text-zinc-700 group-data-hover:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-hover:bg-white/10
}
.badge.danger{
    @apply bg-purple-500/15 text-purple-700 group-data-hover:bg-purple-500/25 dark:text-purple-400 dark:group-data-hover:bg-purple-500/20;
}
    */

/* Mobilní sidebar: při otevření posunout drawer doprava a zobrazit backdrop */
@media (max-width: 1023px) {
    body.sidebar-open #sidebar-drawer {
        transform: translateX(0);
    }
    body.sidebar-open #sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    body.sidebar-open {
        overflow: hidden;
    }
}