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


/* volitelnì: promìnná pro font (normální CSS místo @theme) */
:root {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/* tvoje vlastní styly */
nav a { transition: 0.2s; }
nav a:hover,
nav a:focus-visible { color: #1d4ed8; }

.card { transition: .2s; }
.card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.15); }

[x-cloak]{display:none!important}

/* Vstupní pole formulářů - obyčejné CSS, nezávislé na Tailwind buildu/purge,
   takže funguje hned i bez rebuildu app.css po úpravě šablony. */
.form-input,
.form-select {
    width: 100%;
    background-color: #fff;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.5rem;     /* rounded-lg */
    padding: 0.5rem 0.75rem;   /* py-2 px-3 */
    outline: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.form-select {
    padding: 0.75rem 1rem;     /* py-3 px-4 - o dost prostornější než běžný input */
    border-radius: 0.75rem;    /* rounded-xl */
}

.form-input:hover,
.form-select:hover {
    background-color: #f9fafb; /* gray-50 */
    border-color: #9ca3af;     /* gray-400 */
}

.form-input:focus,
.form-select:focus {
    background-color: #fff;
    border-color: #2563eb;     /* blue-600 */
    box-shadow: 0 0 0 1px #2563eb;
}

.form-input.is-invalid,
.form-select.is-invalid {
    border-color: #ef4444;     /* red-500 */
}