/* Screen languages. The language button (top right of the header) is the only place to choose one. With English
   (the default) nothing in this file applies except the button itself. With another language <html> gets
   class="screen-lang screen-lang-<code>" (and screen-rtl for Arabic and Urdu, which run right to left); the QC
   inspector screens are also wrapped in .i18n with lang / dir. Numbers, PO numbers, codes, colours, sizes,
   measurements and anything typed stay left to right. */

/* Fonts that show Arabic and Chinese well on Android, iPhone and Windows. Latin letters and digits keep the app's font. */
.i18n-ar{font-family:"Noto Sans Arabic","Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,Arial,Helvetica,sans-serif}
.i18n-ar :is(input,textarea,select,button){font-family:inherit}
.i18n-zh{font-family:Arial,Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC",sans-serif}
.i18n-zh :is(input,textarea,select,button){font-family:inherit}
.i18n bdi[dir="ltr"],.i18n [dir="ltr"]{unicode-bidi:isolate}

/* Right to left: the browser mirrors rows and grids; these rules mirror what was placed by hand. */
.i18n[dir="rtl"] :is(.qcw-steps button,.qcw-menu-list button,.qcw-cam-menu button,.qck-head,.qcw-aql-table th,.qcw-aql-table td){text-align:right}
.i18n[dir="rtl"] :is(.qc-guide-card ul,.qcw-outlist){padding-left:0;padding-right:18px}
.i18n[dir="rtl"] .qcw-req{margin-left:0;margin-right:2px}
.i18n[dir="rtl"] :is(.qcw-menu-list,.qcw-cam-menu){right:auto;left:0}
.i18n[dir="rtl"] input[dir="ltr"],.i18n[dir="rtl"] textarea[dir="ltr"]{text-align:left}

/* "(write in English)" after a free-text box's label. */
.qcw-in-en{font-size:var(--fs-label,12px);color:var(--fg-secondary,#6b7280);font-weight:400}

/* "Translations" under a check's English name (Settings → QC lists, trims): compact, collapsed by default. */
.tr-boxes{margin:2px 0 0;font-size:var(--fs-label,12px)}
.tr-boxes>summary{cursor:pointer;color:var(--fg-secondary,#6b7280);font-size:var(--fs-label,12px);min-height:24px;line-height:24px;width:max-content;max-width:100%}
.tr-boxes[open]{padding:4px 0 2px}
.tr-box{display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);align-items:center;gap:6px;margin:4px 0 0}
.tr-box>span{font-size:var(--fs-label,12px);color:var(--fg-secondary,#6b7280);white-space:nowrap}
.tr-box>input{height:var(--ctl-h,32px);font-size:var(--fs-field,13px);min-width:0;width:100%;box-sizing:border-box}
.tr-box>input[lang="ar"]{font-family:"Noto Sans Arabic","Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,Arial,sans-serif}
@media (max-width:520px){.tr-box{grid-template-columns:minmax(0,1fr)}}

/* ---- The language button and its list (header, top right) ---- */
.falcon-lang-wrap{position:relative;display:flex;align-items:center;flex:0 0 auto}
.falcon-lang-btn{display:inline-flex;align-items:center;gap:5px;height:38px;min-height:38px;padding:0 9px!important;border:1px solid #d1d5db!important;border-radius:9px!important;background:#fff!important;color:#111827!important;font-size:var(--fs-field,13px);font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;box-shadow:none!important}
.falcon-lang-btn:hover,.falcon-lang-btn[aria-expanded="true"]{background:#f1f5f9!important;border-color:#94a3b8!important}
.falcon-lang-btn:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
.falcon-lang-btn>svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.falcon-lang-chev{font-size:10px;color:#64748b}
.falcon-lang-menu{position:absolute;z-index:45;top:calc(100% + 8px);right:0;width:250px;max-height:min(70vh,560px);overflow-y:auto;padding:4px;border:1px solid #b8c3cf;border-radius:8px;background:#fff;box-shadow:0 10px 28px rgba(15,35,63,.18)}
.falcon-lang-menu[hidden]{display:none}
.falcon-lang-opt{display:grid!important;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:8px;width:100%;min-height:32px;margin:0!important;padding:4px 8px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#10233f!important;font-size:var(--fs-field,13px);font-weight:400;text-align:left;cursor:pointer;box-shadow:none!important}
.falcon-lang-opt:hover,.falcon-lang-opt:focus-visible{background:#f1f5f9!important;outline:none}
.falcon-lang-opt.is-on{background:#eff6ff!important;color:#1d4ed8!important;font-weight:500}
.falcon-lang-opt>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.falcon-lang-opt>span[dir="rtl"]{text-align:left}
.falcon-lang-opt>small{font-size:var(--fs-label,12px);color:#64748b;font-weight:400}
.falcon-lang-opt>i{font-style:normal;color:#1d4ed8;text-align:center}
.falcon-lang-opt>span[lang="ar"],.falcon-lang-opt>span[lang="ur"],.falcon-lang-code[lang="ar"],.falcon-lang-code[lang="ur"]{font-family:"Noto Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif}
body.dark-theme .falcon-lang-btn{background:#172033!important;border-color:#526176!important;color:#f8fafc!important}
body.dark-theme .falcon-lang-btn:hover,body.dark-theme .falcon-lang-btn[aria-expanded="true"]{background:#24344b!important}
body.dark-theme .falcon-lang-menu{background:#172033;border-color:#526176}
body.dark-theme .falcon-lang-opt{color:#f8fafc!important}
body.dark-theme .falcon-lang-opt:hover,body.dark-theme .falcon-lang-opt:focus-visible{background:#24344b!important}
body.dark-theme .falcon-lang-opt.is-on{background:#1e3a5f!important;color:#bfdbfe!important}
body.dark-theme .falcon-lang-opt>small{color:#94a3b8}
@media (max-width:720px){.falcon-lang-wrap{margin-left:auto}.falcon-lang-menu{width:min(250px,calc(100vw - 32px))}}

/* ---- Fonts for each script (Latin letters and digits keep the app's font) ---- */
/* Arabic and Urdu: Latin fonts first (so buttons keep their height), the Arabic font for Arabic letters. */
html.screen-lang-ar,html.screen-lang-ar :is(body,button,input,select,textarea,table,th,td,label,.sidebar,.main,.modal,.panel,.card){font-family:Calibri,"Segoe UI",Arial,"Noto Sans Arabic","Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif!important}
html.screen-lang-ur,html.screen-lang-ur :is(body,button,input,select,textarea,table,th,td,label,.sidebar,.main,.modal,.panel,.card){font-family:Calibri,"Segoe UI",Arial,"Noto Sans Arabic","Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif!important}
html.screen-lang-zh,html.screen-lang-zh :is(body,button,input,select,textarea,table,th,td,label,.sidebar,.main,.modal,.panel,.card){font-family:Calibri,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC",Arial,sans-serif!important}
html.screen-lang-ja,html.screen-lang-ja :is(body,button,input,select,textarea,table,th,td,label,.sidebar,.main,.modal,.panel,.card){font-family:Calibri,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans CJK JP","Noto Sans JP",Arial,sans-serif!important}
html.screen-lang-ko,html.screen-lang-ko :is(body,button,input,select,textarea,table,th,td,label,.sidebar,.main,.modal,.panel,.card){font-family:Calibri,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans CJK KR","Noto Sans KR",Arial,sans-serif!important}
html.screen-lang-hi,html.screen-lang-hi :is(body,button,input,select,textarea,table,th,td,label,.sidebar,.main,.modal,.panel,.card){font-family:Calibri,"Noto Sans Devanagari","Nirmala UI","Kohinoor Devanagari","Mangal",Arial,sans-serif!important}
html.screen-lang-bn,html.screen-lang-bn :is(body,button,input,select,textarea,table,th,td,label,.sidebar,.main,.modal,.panel,.card){font-family:Calibri,"Noto Sans Bengali","Nirmala UI","Kohinoor Bangla","Vrinda",Arial,sans-serif!important}
/* Longer words (German, Russian…) wrap instead of running out of their box. */
html.screen-lang :is(.nav-label,.panel-head h3,th,label,.btn,button){overflow-wrap:break-word}

/* ---- Right to left (Arabic, Urdu): the page mirrors; typed text, codes and tables keep their order ---- */
html.screen-rtl :is(input,textarea){direction:ltr;text-align:left}
html.screen-rtl select{direction:rtl}
/* Tables keep their column order (pinned first columns, totals) and each cell reads right to left. */
html.screen-rtl table{direction:ltr}
html.screen-rtl :is(th,td){direction:rtl;text-align:right}
html.screen-rtl .falcon-lang-menu{right:auto;left:0}
html.screen-rtl .falcon-lang-opt{text-align:right}
html.screen-rtl .nav-menu-chevron{margin-left:0;margin-right:auto}