/* =====================================================================
   ZONBOS UI Foundation 2.3.4
   Global bidi/layout mirroring + readable typography for AR / FR / EN.
   Loaded last on every surface so one rule-set controls the experience.
   ===================================================================== */
:root{
  --font-caption:12px;
  --font-meta:13px;
  --font-small:14px;
  --font-body:16px;
  --font-input:15px;
  --font-nav:14px;
  --line-body:1.68;
  --line-ar:1.8;
}

html{font-size:16px;text-rendering:optimizeLegibility}
html[dir="rtl"]{direction:rtl}
html[dir="ltr"]{direction:ltr}
body{font-size:var(--font-body);line-height:var(--line-body);text-align:start}
html[lang="ar"] body{font-family:Tahoma,"Segoe UI",Arial,sans-serif;line-height:var(--line-ar)}
html[lang="fr"] body,html[lang="en"] body{font-family:"Segoe UI",Inter,Arial,sans-serif;line-height:var(--line-body)}

/* Locale direction contract: the app must inherit the selected document direction.
   This explicitly neutralizes legacy Arabic-only direction hacks. */
body,.topbar,.topbar-inner,.app-shell,.sidebar,.side-nav,.main-content,
.topbar-inner>*,.app-shell>*{direction:inherit}
.side-nav a,.side-nav-label,.main-content,.main-content>*{direction:inherit;text-align:start}
.side-nav a>span{min-width:0;text-align:start}
.global-search,.global-search input,.account-center-trigger,.sidebar-identity-card{direction:inherit;text-align:start}
html[dir="ltr"] :is(.side-nav a,.sidebar-identity-card,.account-center-trigger,.global-search){direction:ltr}
html[dir="rtl"] :is(.side-nav a,.sidebar-identity-card,.account-center-trigger,.global-search){direction:rtl}

/* Readability floor: UI secondary copy must remain comfortably legible. */
small{font-size:var(--font-meta);line-height:1.55}
button,input,textarea,select{font-size:var(--font-input);line-height:1.45}
p,li,dd,dt,label{line-height:1.7}
.main-content p,.zb-content p,.admin-content p,.studio-content p{font-size:15px}
.main-content small,.zb-content small,.admin-content small,.studio-content small{font-size:var(--font-meta)!important;line-height:1.55}
.side-nav a,.zb-nav a,.admin-nav a{font-size:var(--font-nav)}
.side-nav-label,.zb-nav-group-label,.zb-settings-group-title{font-size:var(--font-caption)}
.btn,.zb-btn{font-size:14px}
.btn.small,.zb-btn-compact{font-size:var(--font-meta)}
.account-chip-copy b,.zb-switcher b{font-size:14px}
.account-chip-copy small,.zb-switcher small{font-size:var(--font-meta)}

/* Logical alignment is mandatory on every translated surface. */
:where(body,header,main,aside,nav,section,article,form,div,p,h1,h2,h3,h4,h5,h6,label,small,strong,span){text-align:start}
:where(input,textarea,select){text-align:start}
[dir="ltr"] :where(code,kbd,.ltr,.handle-input,.tracking-code){direction:ltr}
[dir="rtl"] :where(code,kbd,.ltr,.handle-input,.tracking-code){direction:ltr;text-align:left}

/* Directional icons mirror; semantic/non-directional icons remain untouched. */
[dir="rtl"] .icon[data-icon="chevron-left"],
[dir="rtl"] .icon[data-icon="chevron-right"],
[dir="rtl"] .icon[data-icon="arrow-left"],
[dir="rtl"] .icon[data-icon="arrow-right"]{transform:scaleX(-1)}

/* =========================== MAIN ZONBOS ============================ */
.brand{grid-area:brand}
.global-search{grid-area:search}
.top-actions{grid-area:actions}
.sidebar{grid-area:sidebar}
.main-content{grid-area:main}

[dir="ltr"] .topbar-inner{
  grid-template-columns:var(--sidebar) minmax(300px,650px) 1fr;
  grid-template-areas:"brand search actions";
}
[dir="rtl"] .topbar-inner{
  grid-template-columns:1fr minmax(300px,650px) var(--sidebar);
  grid-template-areas:"actions search brand";
}
[dir="ltr"] .brand{justify-self:start}
[dir="rtl"] .brand{justify-self:end}
[dir="ltr"] .top-actions{justify-content:flex-end}
[dir="rtl"] .top-actions{justify-content:flex-start}

[dir="ltr"] .app-shell{
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  grid-template-areas:"sidebar main";
}
[dir="rtl"] .app-shell{
  grid-template-columns:minmax(0,1fr) var(--sidebar);
  grid-template-areas:"main sidebar";
}

/* 2.3.4 navigation placement contract.
   Arabic keeps the complete primary/account navigation rail on the physical right
   and the page content on the physical left. French and English use the exact
   opposite placement. This rule is intentionally tied to both lang + dir so a
   translated label can never move without its surrounding layout. */
@media (min-width:721px){
  html[lang="ar"][dir="rtl"] .app-shell{
    grid-template-columns:minmax(0,1fr) var(--sidebar);
    grid-template-areas:"main sidebar";
  }
  html[lang="ar"][dir="rtl"] .sidebar{grid-column:2;grid-row:1;justify-self:stretch}
  html[lang="ar"][dir="rtl"] .main-content{grid-column:1;grid-row:1;min-width:0}

  html:is([lang="fr"],[lang="en"])[dir="ltr"] .app-shell{
    grid-template-columns:var(--sidebar) minmax(0,1fr);
    grid-template-areas:"sidebar main";
  }
  html:is([lang="fr"],[lang="en"])[dir="ltr"] .sidebar{grid-column:1;grid-row:1;justify-self:stretch}
  html:is([lang="fr"],[lang="en"])[dir="ltr"] .main-content{grid-column:2;grid-row:1;min-width:0}
}

/* Navigation rows follow the reading direction as a unit: icon first at the
   reading edge, then the label. Counters remain on the opposite edge. */
html[lang="ar"][dir="rtl"] .side-nav a{direction:rtl;text-align:right}
html:is([lang="fr"],[lang="en"])[dir="ltr"] .side-nav a{direction:ltr;text-align:left}
html[lang="ar"][dir="rtl"] .side-nav-label{text-align:right}
html:is([lang="fr"],[lang="en"])[dir="ltr"] .side-nav-label{text-align:left}

/* Shared content + secondary-aside layouts. */
.page-grid>aside,.profile-content-grid>aside,.account-page-grid>aside,.listing-page-grid>aside,
.catalog-layout>aside,.bank-grid>aside,.jobs-layout>aside,.job-detail-grid>aside,.content-detail-grid>aside,
.profile-editor-grid>aside,.pro-editor-grid>aside,.workspace-create-grid>aside,.pro-layout>aside,.resume-layout>aside,
.zac-layout>aside{grid-area:aside}
.page-grid>:first-child,.profile-content-grid>:first-child,.account-page-grid>main,.listing-page-grid>main,
.catalog-layout>main,.bank-grid>main,.jobs-layout>main,.job-detail-grid>main,.content-detail-grid>main,
.profile-editor-grid>main,.pro-editor-grid>main,.workspace-create-grid>main,.pro-layout>main,.resume-layout>main,
.zac-layout>main{grid-area:content}

[dir="ltr"] .page-grid,[dir="ltr"] .account-page-grid{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"content aside"}
[dir="rtl"] .page-grid,[dir="rtl"] .account-page-grid{grid-template-columns:320px minmax(0,1fr);grid-template-areas:"aside content"}
[dir="ltr"] .profile-content-grid{grid-template-columns:minmax(0,1fr) 310px;grid-template-areas:"content aside"}
[dir="rtl"] .profile-content-grid{grid-template-columns:310px minmax(0,1fr);grid-template-areas:"aside content"}
[dir="ltr"] .listing-page-grid{grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"content aside"}
[dir="rtl"] .listing-page-grid{grid-template-columns:330px minmax(0,1fr);grid-template-areas:"aside content"}
[dir="ltr"] .catalog-layout{grid-template-columns:minmax(0,1fr) 285px;grid-template-areas:"content aside"}
[dir="rtl"] .catalog-layout{grid-template-columns:285px minmax(0,1fr);grid-template-areas:"aside content"}
[dir="ltr"] :is(.bank-grid,.jobs-layout,.job-detail-grid,.content-detail-grid,.profile-editor-grid,.pro-editor-grid){grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"content aside"}
[dir="rtl"] :is(.bank-grid,.jobs-layout,.job-detail-grid,.content-detail-grid,.profile-editor-grid,.pro-editor-grid){grid-template-columns:320px minmax(0,1fr);grid-template-areas:"aside content"}
[dir="ltr"] .workspace-create-grid{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"content aside"}
[dir="rtl"] .workspace-create-grid{grid-template-columns:300px minmax(0,1fr);grid-template-areas:"aside content"}
[dir="ltr"] .resume-layout{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"content aside"}
[dir="rtl"] .resume-layout{grid-template-columns:300px minmax(0,1fr);grid-template-areas:"aside content"}
[dir="ltr"] .pro-layout{grid-template-columns:minmax(0,1fr) 310px;grid-template-areas:"content aside"}
[dir="rtl"] .pro-layout{grid-template-columns:310px minmax(0,1fr);grid-template-areas:"aside content"}
[dir="ltr"] .zac-layout{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"content aside"}
[dir="rtl"] .zac-layout{grid-template-columns:320px minmax(0,1fr);grid-template-areas:"aside content"}

/* Messenger: list stays at inline-start, thread at inline-end. */
.zms-sidebar,.conversation-list{grid-area:conversation-list}
.zms-main,.chat-panel{grid-area:conversation-thread}
[dir="ltr"] .zms-shell,[dir="ltr"] .messages-shell{grid-template-columns:360px minmax(0,1fr);grid-template-areas:"conversation-list conversation-thread"}
[dir="rtl"] .zms-shell,[dir="rtl"] .messages-shell{grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"conversation-thread conversation-list"}

/* Search: filters/discovery also mirror as a full layout, not text only. */
.z-search-filter-panel{grid-area:filters}.z-search-results{grid-area:results}
[dir="ltr"] .z-search-layout{grid-template-columns:235px minmax(0,1fr);grid-template-areas:"filters results"}
[dir="rtl"] .z-search-layout{grid-template-columns:minmax(0,1fr) 235px;grid-template-areas:"results filters"}
.z-search-start{grid-area:search-start}.z-search-discovery-card{grid-area:search-discovery}
[dir="ltr"] .z-search-discovery-grid{grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);grid-template-areas:"search-start search-discovery"}
[dir="rtl"] .z-search-discovery-grid{grid-template-columns:minmax(290px,.65fr) minmax(0,1.35fr);grid-template-areas:"search-discovery search-start"}
.z-search-page-form input{font-size:15px}
.z-search-start>p{font-size:15px;line-height:1.75}
.z-search-mini-head b,.z-search-filter-title b{font-size:14px}
.z-search-mini-head a,.z-search-mini-head button,.z-search-chip,.z-search-history-list a{font-size:13px}
.z-search-tabs a,.z-search-filter-panel nav a{font-size:13px;min-height:42px}
.z-search-tabs em,.z-search-filter-panel nav em{font-size:12px}
.z-search-summary p,.z-search-sort label{font-size:13px}
.z-search-filter-note p{font-size:12.5px;line-height:1.7}
.z-search-section-head span,.z-search-section-head>a{font-size:13px}
.z-search-result-top>b{font-size:15px}
.z-search-result-top em{font-size:12px}
.z-search-result-copy>small,.z-search-result-copy>p,.z-search-result-meta{font-size:13px}
.z-search-related>span,.z-search-related>a{font-size:13px}
.z-search-suggest-title{font-size:13px}
.z-search-suggest-copy b{font-size:14px}.z-search-suggest-copy small,.z-search-suggest-kind{font-size:12.5px}
.z-search-suggest-all{font-size:14px}

/* ===================== BUSINESS / STUDIO / ADMIN =================== */
.zb-sidebar{grid-area:zb-sidebar}.zb-app{grid-area:zb-app;grid-column:auto}
[dir="ltr"] .zb-shell{grid-template-columns:var(--sidebar) minmax(0,1fr);grid-template-areas:"zb-sidebar zb-app"}
[dir="rtl"] .zb-shell{grid-template-columns:minmax(0,1fr) var(--sidebar);grid-template-areas:"zb-app zb-sidebar"}

.zb-topbar-left{grid-area:zb-left}.zb-topbar-center{grid-area:zb-center}.zb-topbar-actions{grid-area:zb-actions}
[dir="ltr"] .zb-topbar{grid-template-columns:auto minmax(220px,620px) auto;grid-template-areas:"zb-left zb-center zb-actions"}
[dir="rtl"] .zb-topbar{grid-template-columns:auto minmax(220px,620px) auto;grid-template-areas:"zb-actions zb-center zb-left"}
[dir="ltr"] .zb-topbar-actions{justify-content:flex-end}
[dir="rtl"] .zb-topbar-actions{justify-content:flex-start}
.studio-primary-nav{grid-area:zb-center}
[dir="ltr"] .studio-topbar{grid-template-columns:minmax(300px,auto) minmax(260px,1fr) auto;grid-template-areas:"zb-left zb-center zb-actions"}
[dir="rtl"] .studio-topbar{grid-template-columns:auto minmax(260px,1fr) minmax(300px,auto);grid-template-areas:"zb-actions zb-center zb-left"}

.admin-side{grid-area:admin-side}.admin-main{grid-area:admin-main;grid-column:auto}
[dir="ltr"] .admin-shell{grid-template-columns:264px minmax(0,1fr);grid-template-areas:"admin-side admin-main"}
[dir="rtl"] .admin-shell{grid-template-columns:minmax(0,1fr) 264px;grid-template-areas:"admin-main admin-side"}
[dir="rtl"] .admin-top{flex-direction:row-reverse}
[dir="rtl"] .admin-apps{flex-direction:row-reverse}

/* Business activity outer layout. */
.zba-layout>.zba-feed{grid-area:zba-feed}.zba-layout>.zba-side{grid-area:zba-side}
[dir="ltr"] .zba-layout{grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"zba-feed zba-side"}
[dir="rtl"] .zba-layout{grid-template-columns:330px minmax(0,1fr);grid-template-areas:"zba-side zba-feed"}

/* Tables and forms follow the language direction while machine identifiers stay LTR. */
[dir="ltr"] :is(.zb-table,.admin-table) th,[dir="ltr"] :is(.zb-table,.admin-table) td{text-align:left}
[dir="rtl"] :is(.zb-table,.admin-table) th,[dir="rtl"] :is(.zb-table,.admin-table) td{text-align:right}
input[dir="ltr"],textarea[dir="ltr"],code{direction:ltr;text-align:left;unicode-bidi:plaintext}

/* Business/admin readability. */
.zb-page-head p,.studio-hero p,.admin-hero p{font-size:14px;line-height:1.75}
.zb-kpi small,.zb-panel-head p,.zb-entity small,.studio-content-copy small,.studio-boundary small,.admin-domain{font-size:13px}
.zb-table th,.admin-table th{font-size:12.5px}
.zb-table td,.admin-table td{font-size:14px;line-height:1.55}
.zb-status,.trust-badge,.admin-runtime-state,.zb-live-count{font-size:12px}
.zb-field>span{font-size:13px}.zb-field>small{font-size:12.5px}.zb-field input,.zb-field textarea,.zb-field select{font-size:14px}

/* Mobile: preserve direction, but collapse side-by-side structures. */
@media (max-width:1200px){
  [dir] .page-grid,[dir] .account-page-grid,[dir] .catalog-layout{grid-template-columns:1fr;grid-template-areas:"content" "aside"}
}
@media (max-width:1120px){
  [dir="ltr"] .zms-shell{grid-template-columns:320px minmax(0,1fr);grid-template-areas:"conversation-list conversation-thread"}
  [dir="rtl"] .zms-shell{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"conversation-thread conversation-list"}
}
@media (max-width:1100px){
  [dir] .z-search-layout{grid-template-columns:1fr;grid-template-areas:"results"}
  [dir] .z-search-discovery-grid{grid-template-columns:1fr;grid-template-areas:"search-start"}
  [dir] .zba-layout{grid-template-columns:1fr;grid-template-areas:"zba-feed" "zba-side"}
  [dir="ltr"] .studio-topbar{grid-template-columns:minmax(240px,1fr) auto;grid-template-areas:"zb-left zb-actions"}
  [dir="rtl"] .studio-topbar{grid-template-columns:auto minmax(240px,1fr);grid-template-areas:"zb-actions zb-left"}
}
@media (max-width:1000px){
  [dir] .resume-layout,[dir] .pro-layout,[dir] .profile-editor-grid,[dir] .pro-editor-grid,[dir] .zac-layout{grid-template-columns:1fr;grid-template-areas:"content" "aside"}
}
@media (max-width:960px){
  [dir="ltr"] .topbar-inner{grid-template-columns:72px minmax(220px,1fr) auto;grid-template-areas:"brand search actions"}
  [dir="rtl"] .topbar-inner{grid-template-columns:auto minmax(220px,1fr) 72px;grid-template-areas:"actions search brand"}
  [dir="ltr"] .messages-shell{grid-template-columns:260px minmax(0,1fr);grid-template-areas:"conversation-list conversation-thread"}
  [dir="rtl"] .messages-shell{grid-template-columns:minmax(0,1fr) 260px;grid-template-areas:"conversation-thread conversation-list"}
}
@media (max-width:900px){
  [dir] .profile-content-grid,[dir] .listing-page-grid,[dir] .bank-grid,[dir] .jobs-layout,[dir] .job-detail-grid,[dir] .content-detail-grid,[dir] .workspace-create-grid{grid-template-columns:1fr;grid-template-areas:"content" "aside"}
  [dir="ltr"] .zb-topbar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"zb-left zb-center zb-actions"}
  [dir="rtl"] .zb-topbar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"zb-actions zb-center zb-left"}
}
@media (max-width:760px){
  [dir="ltr"] .studio-topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"zb-left zb-actions"}
  [dir="rtl"] .studio-topbar{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"zb-actions zb-left"}
}
@media (max-width:800px){
  [dir] .admin-shell{display:block}
}
@media (max-width:720px){
  body{font-size:15.5px}
  [dir="ltr"] .topbar-inner{grid-template-columns:auto 1fr auto;grid-template-areas:"brand search actions"}
  [dir="rtl"] .topbar-inner{grid-template-columns:auto 1fr auto;grid-template-areas:"actions search brand"}
  [dir] .app-shell{display:block;direction:inherit}
  .global-search{justify-self:center}
  [dir] .zms-shell,[dir] .messages-shell{grid-template-columns:1fr;grid-template-areas:"conversation-list"}
  .mobile-nav{direction:inherit}
  .mobile-nav>a,.mobile-nav>button,.zb-bottom-nav a,.zb-bottom-nav>button{font-size:12px}
  .z-search-page-form input{font-size:15px}
  .z-search-start h1{font-size:24px}
  .z-search-start>p{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
.readable-note{font-size:14px!important;line-height:1.75}
.readable-code{font-size:13px!important;line-height:1.6}