/* Participant layout CSS (templates/base.html), FL-042.
 *
 * Moved verbatim out of the <style> block in templates/base.html on 7
 * October 2026. An inline <style> block beats every stylesheet by load
 * order, which is how the fleet's nav bars drifted in July. The template
 * links this sheet at the exact place the block stood (in <head>, after
 * layoff-base.css and style.css, before the fonts, phronon-tokens.css and a
 * page's own extra_head), so every rule still wins the same cascade fights.
 * Layoff alone owns it: sync_shared_assets.py does not carry it.
 */

/* iOS Safari enlarges the text by about a third when the phone turns sideways
   unless the page pins it (seen in the iPhone pass, 27 October 2026, FL-058). */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Additional drag-and-drop styling */
.sortable-ghost {
    opacity: 0.4;
    background: #f0f0f0;
}

.sortable-chosen {
    background: #e3f2fd;
}

.sortable-drag {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* RTL Language Support */
[lang="ar"] {
    direction: rtl;
    text-align: right;
}

[lang="ar"] .container {
    direction: rtl;
}

[lang="ar"] .form-group label {
    text-align: right;
}

[lang="ar"] .employee-item {
    direction: rtl;
}

[lang="ar"] .language-switcher {
    left: 20px;
    right: auto;
}

/* Language switcher */
.language-switcher {
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 1001;
    display: flex;
    gap: 0.5rem;
}

/* On a phone the picker stays at the top of the page: fixed, it covered the
   text below it as the page scrolled (FL-058). */
@media (max-width: 900px) {
    .language-switcher { position: absolute; }
}

.lang-select {
    padding: .35rem .5rem;
    border: 1px solid #d0d0d0;
    border-radius: .5rem;
    background: #fff;
    font-size: .95rem;
}
/* On a touch screen the picker takes 16 px, or iOS Safari zooms the page in
   when it is tapped (FL-058). */
@media (pointer: coarse) {
    .lang-select { font-size: 1rem; }
}
.sr-only {
    position: absolute; 
    width: 1px; height: 1px; 
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); 
    white-space: nowrap; border: 0;
}