/* T2784: localization — language picker, script font fallbacks, right-to-left (ar, he) mirroring */

/* language picker: button (flag + current language) opening a popover of languages with their regions */
.ce-lang-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 6px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);white-space:nowrap}
.ce-lang-login{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:12px;color:var(--muted);margin:-4px 0 8px}
.ce-lang-pick{position:relative;display:inline-block}
.ce-lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 8px;font-size:12px;font-weight:500;white-space:nowrap}
.ce-flag{display:inline-block;width:16px;height:12px;flex:none;border-radius:2px;box-shadow:0 0 0 1px light-dark(#0003,#fff5);object-fit:cover;vertical-align:middle}
.ce-flag-none{box-shadow:none;display:inline-grid;place-items:center;color:var(--muted)}
.ce-flag-none svg{width:13px;height:13px}
/* the language popup: centred modal with search and a grid of languages, each with its regional variants as tiles */
.ce-lang-dlg{width:min(940px,calc(100vw - 32px));max-height:min(86vh,760px);padding:0;display:none;flex-direction:column;overflow:hidden}
.ce-lang-dlg[open]{display:flex}
.ce-lang-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 8px}
.ce-lang-top h2{display:flex;align-items:center;gap:8px;margin:0;font-size:18px}
.ce-lang-top h2 svg{width:20px;height:20px}
.ce-lang-x{font-size:16px;min-height:32px;padding:4px 10px}
.ce-lang-q{margin:4px 20px 12px;padding:8px 11px;font-size:14px}
.ce-lang-grid{overflow:auto;padding:4px 20px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px 16px;align-items:start;overscroll-behavior:contain}
.ce-lang-group h3{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--muted);text-transform:none}
.ce-lang-tile{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 4px;padding:6px 9px;min-height:34px;font-weight:450;text-align:start;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.ce-lang-tile:hover{border-color:var(--blue)}
.ce-lang-tile:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.ce-lang-tile.current{border-color:var(--blue);background:light-dark(#e8f3ff,#183d60);color:var(--blue);font-weight:650}
.ce-lang-tile.current::after{content:'✓';margin-inline-start:auto}
.ce-lang-none{grid-column:1/-1;text-align:center;color:var(--muted)}
@media(max-width:760px){.ce-lang-dlg{width:calc(100vw - 16px);max-height:92vh}.ce-lang-grid{grid-template-columns:1fr}.ce-lang-tile{min-height:42px}}

/* system fonts that carry each script (Windows, macOS, Linux/Android names) after the app's own font */
html:lang(ja) body{font-family:'Segoe UI',Arial,'Yu Gothic UI','Meiryo','Hiragino Sans','Noto Sans JP','Noto Sans CJK JP','IPAPGothic',sans-serif}
html:lang(zh-CN) body{font-family:'Segoe UI',Arial,'Microsoft YaHei','PingFang SC','Noto Sans SC','Noto Sans CJK SC','WenQuanYi Zen Hei',sans-serif}
html:lang(zh-TW) body{font-family:'Segoe UI',Arial,'Microsoft JhengHei','PingFang TC','Noto Sans TC','Noto Sans CJK TC','WenQuanYi Zen Hei',sans-serif}
html:lang(ko) body{font-family:'Segoe UI',Arial,'Malgun Gothic','Apple SD Gothic Neo','Noto Sans KR','Noto Sans CJK KR',sans-serif}
html:lang(th) body{font-family:'Segoe UI',Arial,'Leelawadee UI','Tahoma','Thonburi','Noto Sans Thai','Loma',sans-serif}
html:lang(hi) body{font-family:'Segoe UI',Arial,'Nirmala UI','Mangal','Kohinoor Devanagari','Noto Sans Devanagari',sans-serif}
html:lang(ar) body{font-family:'Segoe UI','Tahoma','Geeza Pro','Noto Sans Arabic','Noto Naskh Arabic',sans-serif}
html:lang(he) body{font-family:'Segoe UI','Arial','Noto Sans Hebrew',sans-serif}
/* letter-spaced capitals make no sense for scripts without case */
html:is(:lang(ja),:lang(zh-CN),:lang(zh-TW),:lang(ko),:lang(th),:lang(hi),:lang(ar),:lang(he)) :is(.navgroup,.nav-heading){letter-spacing:0}
/* CJK/Thai labels are short but can't break at spaces: let table headers wrap rather than overflow */
html:is(:lang(ja),:lang(zh-CN),:lang(zh-TW),:lang(ko)) h1{letter-spacing:0}
/* longer German/Russian/etc. labels: buttons may wrap instead of overflowing the bars */
html:not(:lang(en)) .pageactions,html:not(:lang(en)) .bulk{flex-wrap:wrap}

/* ---------- RTL ---------- */
[dir=rtl] body{text-align:right}
[dir=rtl] .sidebar{inset:0 0 0 auto}
[dir=rtl] #brandbar{left:auto;right:0}
[dir=rtl] main{margin-left:0;margin-right:182px}
[dir=rtl] .navclosed main{margin-right:0}
[dir=rtl] .top{padding-left:20px;padding-right:20px}
[dir=rtl] .top .navtoggle{margin-right:0;margin-left:8px}
[dir=rtl] .avatar{margin-right:0;margin-left:7px}
[dir=rtl] .navitem{text-align:right}
[dir=rtl] .navitem.active{border-left:0;border-right:3px solid #4cb3ff;padding-left:16px;padding-right:13px}
[dir=rtl] .sidebar .navitem:not(.nav-heading){padding-left:16px;padding-right:30px}
[dir=rtl] .sidebar .navitem.active:not(.nav-heading){padding-left:16px;padding-right:27px}
@media(min-width:761px){
 [dir=rtl] main{margin-left:0;margin-right:204px}
 [dir=rtl] .nav-open main,[dir=rtl] .navclosed main{margin-right:0}
 [dir=rtl] .nav-open .top{padding-left:20px;padding-right:224px}
 [dir=rtl] #brandbar{padding:0 5px 0 9px}
}
@media(max-width:1150px) and (min-width:761px){[dir=rtl] main{margin-right:204px}}
@media(max-width:760px){
 [dir=rtl] main,[dir=rtl] .navclosed main{margin-right:0}
 [dir=rtl] .top{padding-left:12px;padding-right:200px}
 [dir=rtl] .sidebar{box-shadow:-10px 0 50px #0006}
 [dir=rtl] #brandbar{border-radius:0 0 0 8px}
 [dir=rtl] .nav-open #brandbar{border-radius:0}
}
/* tables */
[dir=rtl] thead th{text-align:right}
[dir=rtl] td+td{border-left:0;border-right:1px solid var(--line)}
[dir=rtl] .numeric{text-align:left}
[dir=rtl] .groupmain .total{margin-left:0;margin-right:auto}
[dir=rtl] .line.vp-active>td:first-child{box-shadow:inset -3px 0 var(--blue)}
[dir=rtl] .vp-shell{left:auto;right:0;border-left:0;border-right:3px solid var(--blue)}
[dir=rtl] .vp-hint{margin-left:0;margin-right:9px}
[dir=rtl] .resultbar small{margin-left:0;margin-right:9px}
[dir=rtl] .bulk .selection{margin-right:0;margin-left:8px}
[dir=rtl] .part-toggle{text-align:right}
[dir=rtl] .part-details{margin-left:0;margin-right:3px}
/* popovers, toasts, dialogs */
[dir=rtl] .ce-pop{right:auto;left:0}
[dir=rtl] .toast{right:auto;left:20px}
[dir=rtl] dialog{text-align:right}
/* arrows that point "back" / "next" read the other way */
[dir=rtl] :is(#first,#prev,#next,#last){transform:scaleX(-1)}

/* formats step (language popup) and Settings → Language & formats */
.ce-lang-back{font-size:18px;min-height:30px;padding:0 8px;margin-inline-end:2px}
[dir=rtl] .ce-lang-back{transform:scaleX(-1)}
.ce-lang-fmt{overflow:auto;padding:0 20px 18px}
.ce-fmt-for{margin:0 0 12px;color:var(--muted)}
.ce-fmt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px}
.ce-fmt-f{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;color:var(--muted)}
.ce-fmt-f select{height:34px;padding:5px 8px;font-size:13px;font-weight:400;width:100%}
.ce-fmt-prev{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:16px 0 6px;padding:10px 12px;border:1px dashed var(--line);border-radius:6px;background:var(--stripe)}
.ce-fmt-prev span{font-size:11px;color:var(--muted);font-weight:600}
.ce-fmt-prev b{font-variant-numeric:tabular-nums;font-weight:600}
.ce-fmt-note{font-size:11px;color:var(--muted);margin:6px 0 0}
.ce-fmt-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.ce-fmt-reset{color:var(--blue);padding-inline:0}
.ce-fmt-reset:disabled{color:var(--muted)}
.ce-lang-set{border:0;padding:0;justify-content:flex-start}
/* user menu: the picker button sits in a menu whose buttons are block items */
.ce-pop .ce-lang-btn{display:inline-flex;width:auto;gap:7px;align-items:center}
/* T2827: page content follows the width #content has (container "main", base.css), not the viewport; the @media copy keeps dialogs/menus outside #content on the viewport */
@container main (max-width:736px){.ce-fmt-grid{grid-template-columns:1fr}}
@media (max-width:760px){.ce-fmt-grid:where(:not(#content *)){grid-template-columns:1fr}}
/* T2820 (Mike): space between the flag and the language name (the menu button rules dropped the flex gap) */
.ce-lang-btn .ce-flag{margin-inline-end:7px}
.ce-pop .ce-lang-btn,.ce-lang-btn{gap:0}