/* ===================================================================
   LingoList – Tailwind companion styles
   Only things Tailwind CDN can't handle: form widget classes from Django,
   dark-mode theme toggle icon visibility, HTMX indicators, animations,
   drag-and-drop ghost, and modal body lock.
   =================================================================== */

/* --- Form inputs (rendered by Django widgets with class="form-input") --- */

.form-input,
.form-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid #d6d3d1; /* stone-300 */
    border-radius: 0.5rem;
    background: white;
    color: #1c1917; /* stone-900 */
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
    font-family: inherit;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #0d9488; /* brand-600 */
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select {
    background: #1c1917; /* stone-900 */
    color: #fafaf9; /* stone-50 */
    border-color: #44403c; /* stone-700 */
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus {
    border-color: #2dd4bf; /* brand-400 */
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.12);
}

/* --- Theme toggle icon visibility --- */

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* --- HTMX indicator --- */

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }

/* --- Translating animation --- */

.translating-placeholder {
    animation: translating-glow 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .translating-placeholder { animation: none; }
}

@keyframes translating-glow {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* --- Drag and drop ghost --- */

.item-row-ghost {
    opacity: 0.4;
    background: #0d9488;
    border-radius: 0.5rem;
}

/* --- Modal body lock --- */

body.overflow-hidden {
    overflow: hidden;
}

/* --- Collapsible summary arrow rotation --- */

details[open] > summary .collab-summary-arrow {
    transform: rotate(90deg);
}

/* --- Mobile nav: show icons, hide text on small screens --- */

@media (max-width: 640px) {
    .nav-hide-label .nav-icon { display: block !important; }
    .nav-hide-label span { display: none; }
    .nav-my-lists { margin-right: 0.375rem; }
    .nav-hide-label,
    #theme-toggle,
    #lang-toggle { padding: 0.375rem; }
}

/* --- Better mobile touch targets --- */

@media (pointer: coarse) {
    button, a.inline-flex, .theme-toggle {
        min-height: 44px;
    }
}

/* --- Tap highlight for mobile --- */

a, button, input, select, textarea {
    -webkit-tap-highlight-color: rgba(13, 148, 136, 0.1);
}

/* --- Hidden attribute fix for modals --- */

.modal-backdrop[hidden] {
    display: none;
}