/* OCB2X Phase 8 — Professional responsive system
   Shared by the public landing page, Portal, Social App and business modules. */
:root{--oc-r8-radius:18px;--oc-r8-radius-sm:12px;--oc-r8-shadow:0 12px 32px rgba(15,23,42,.08);--oc-r8-line:#dfe7f1;--oc-r8-gap:16px}
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
button,input,select,textarea{font:inherit}

/* Public landing page */
@media(max-width:900px){
 body .topbar .nav{max-width:none!important}
 body .hero{min-height:auto!important}
 body .directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body .feed-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
 body .topbar{position:sticky!important;top:0!important;z-index:4000!important}
 body .topbar .nav{display:grid!important;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)!important;align-items:center!important;gap:8px!important;height:auto!important;min-height:0!important;padding:10px!important}
 body .topbar .brand{grid-column:1!important;grid-row:1!important}
 body .topbar .brand-logo{width:112px!important;height:40px!important;border-radius:11px!important}
 body .topbar .nav-actions{display:contents!important}
 body .topbar .nav-actions>.btn-ghost{grid-column:2!important;grid-row:1!important}
 body .topbar .nav-actions>.btn-light{grid-column:3!important;grid-row:1!important}
 body .topbar .nav-actions>.btn{min-width:0!important;width:100%!important;height:40px!important;padding:0 8px!important;border-radius:11px!important;font-size:11px!important;justify-content:center!important}
 body .topbar .nav-actions>.btn span{display:inline!important;white-space:nowrap!important}
 body .topbar .nav-search{grid-column:1/-1!important;grid-row:2!important;order:initial!important;width:100%!important;margin:0!important}
 body .topbar .nav-search input{height:44px!important;border-radius:12px!important;font-size:13px!important}
 body .topbar .landing-region-controls{grid-column:1/-1!important;grid-row:3!important;position:static!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;width:100%!important;height:auto!important;padding:6px!important;border-radius:13px!important;background:rgba(255,255,255,.09)!important}
 body .topbar .landing-language-picker{display:flex!important;min-width:0!important;width:100%!important;height:38px!important;padding:0 7px!important;border-radius:9px!important;background:rgba(255,255,255,.08)!important}
 body .topbar .landing-language-picker>i{font-size:11px!important;flex:0 0 12px!important}
 body .topbar .landing-language-picker select{width:100%!important;max-width:none!important;min-width:0!important;height:36px!important;padding:0!important;font-size:10px!important;text-overflow:ellipsis!important}
 body .hero-wrap{padding:12px 9px!important}
 body .hero{border-radius:20px!important;overflow:hidden!important}
 body .hero-copy{padding:28px 20px 30px!important}
 body .hero h1{font-size:clamp(30px,9vw,42px)!important;line-height:1.08!important;letter-spacing:-.035em!important}
 body .hero-copy>p{font-size:13px!important;line-height:1.65!important}
 body .hero-cta{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
 body .hero-cta .btn{width:100%!important;justify-content:center!important}
 body .hero-visual{display:none!important}
 body .section-shell{padding:38px 10px!important}
 body .section-head h2{font-size:27px!important;line-height:1.15!important}
 body .directory-grid{grid-template-columns:1fr!important;gap:11px!important}
 body .directory-card{min-height:auto!important;padding:17px!important;border-radius:16px!important}
 body .feed-toolbar{padding:9px!important;border-radius:14px!important;overflow-x:auto!important;flex-wrap:nowrap!important}
 body .chips{flex-wrap:nowrap!important;min-width:max-content!important}
 body .result-count{white-space:nowrap!important}
 body .feed-grid{grid-template-columns:1fr!important;gap:13px!important}
 body .post-card{display:block!important;min-height:0!important;height:auto!important;border-radius:17px!important}
 body .post-media{height:210px!important}
 body .post-body,body .post-card[data-category="marketplace"] .post-body{padding:15px!important}
 body .post-card h3{font-size:16px!important}
 body .post-card p{font-size:11px!important}
 body .modal-shell{align-items:flex-end!important;padding:0!important}
 body .modal-card{width:100%!important;max-height:94dvh!important;border-radius:22px 22px 0 0!important}
 body .auth-panel{padding:28px 18px max(26px,env(safe-area-inset-bottom))!important}
 body .auth-tabs{position:sticky!important;top:0!important;z-index:2!important}
 body .name-grid{grid-template-columns:1fr!important}
}
@media(max-width:390px){
 body .topbar .brand-logo{width:100px!important}
 body .topbar .nav-actions>.btn{font-size:10px!important;padding:0 5px!important}
 body .topbar .landing-region-controls{grid-template-columns:1fr!important}
 body .topbar .landing-language-picker{height:36px!important}
 body .topbar .landing-language-picker select{height:34px!important;font-size:11px!important}
}

/* Portal shell */
@media(max-width:992px){
 body .master-topbar{height:58px!important;padding:0 10px!important;gap:7px!important}
 body .topbar-left{width:auto!important;gap:6px!important}
 body .topbar-center{display:none!important}
 body .topbar-right{gap:4px!important;min-width:0!important}
 body .portal-language-switch{width:min(120px,31vw)!important;max-width:none!important;height:38px!important;border-radius:11px!important;padding:0 8px!important}
 body .ai-jinni-btn{width:38px!important;height:38px!important;padding:0!important;margin:0!important;border-radius:11px!important;justify-content:center!important}
 body .ai-jinni-btn span{display:none!important}
 body .topbar-icon-btn{width:38px!important;height:38px!important;border-radius:11px!important}
 body .sidebar-wrapper{top:58px!important;width:min(86vw,320px)!important;left:calc(-1 * min(86vw,320px) - 20px)!important;box-shadow:none!important}
 body .sidebar-wrapper.open{left:0!important;box-shadow:18px 0 50px rgba(15,23,42,.28)!important}
 body .sidebar-menu{padding:10px 8px 24px!important}
 body .menu-link{min-height:43px!important;padding:9px 12px!important;border-radius:10px!important;border-left:0!important;margin:2px 0!important;font-size:12px!important}
 body .menu-link.active{box-shadow:inset 3px 0 0 var(--primary-color)!important}
 body .sidebar-group-title{padding:15px 12px 6px!important}
 body .main-frame{width:100%!important;min-width:0!important}
 body .viewport-scroller{width:100%!important;max-width:none!important;padding:12px!important;margin:0!important}
 body .spa-section{min-width:0!important;max-width:100%!important}
 body .settings-panel{top:58px!important;width:min(92vw,340px)!important;right:calc(-1 * min(92vw,340px))!important}
 body .settings-panel.open{right:0!important}
 body .floating-settings-btn{width:40px!important;height:40px!important;border-radius:11px 0 0 11px!important}
 body .portal-modal-overlay{align-items:flex-end!important;padding:0!important}
 body .portal-modal-box{width:100%!important;max-width:none!important;max-height:92dvh!important;border-radius:20px 20px 0 0!important}
 body .portal-modal-header{padding:15px 17px!important}
 body .portal-modal-body{padding:15px!important}
}
@media(max-width:600px){
 body .master-topbar{height:56px!important}
 body .topbar-brand{width:38px!important;height:38px!important;min-width:38px!important}
 body .portal-language-switch{width:min(112px,32vw)!important;font-size:10px!important}
 body .topbar-profile-wrapper{margin-left:0!important}
 body .portal-profile-trigger{width:38px!important;height:38px!important}
 body .viewport-scroller{padding:8px!important}
 body .topbar-dropdown.portal-profile-popover{top:58px!important;right:7px!important;width:calc(100vw - 14px)!important;max-width:330px!important;border-radius:15px!important}
 body .tools-pane-wrapper{max-width:100%!important;width:100%!important}
}

/* Social App */
#social-app-module{max-width:100%;overflow-x:hidden}
#social-app-module .top-navbar{border-radius:14px!important;box-shadow:0 5px 18px rgba(15,23,42,.06)!important}
#social-app-module .app-card{border-radius:16px!important;box-shadow:0 5px 18px rgba(15,23,42,.045)!important}
#social-app-module .social-feed-col{min-width:0!important}
@media(min-width:1201px){
 #social-app-module .social-layout{max-width:1540px!important;margin:0 auto!important;grid-template-columns:250px minmax(0,1fr) 275px!important}
}
@media(max-width:1200px){#social-app-module .social-layout{gap:14px!important;padding-inline:14px!important}}
@media(max-width:900px){
 #social-app-module{border-radius:0!important;padding-bottom:max(76px,env(safe-area-inset-bottom))!important}
 #social-app-module .top-navbar{height:58px!important;margin:0!important;padding:0 10px!important;border-radius:0!important;position:sticky!important;top:0!important}
 #social-app-module .social-layout{display:block!important;width:100%!important;padding:10px 8px 90px!important}
 #social-app-module .social-feed-col{width:100%!important;max-width:760px!important;margin:0 auto!important}
 #social-app-module .app-card{width:100%!important;margin:0 0 11px!important;padding:13px!important;border-radius:15px!important}
 #social-app-module .social-mobile-drawer{width:min(88vw,350px)!important}
 #social-app-module .floating-widget{width:50px!important;height:50px!important;right:14px!important;bottom:max(16px,env(safe-area-inset-bottom))!important}
 #social-app-module .local-modal-overlay,#social-app-module .oc-post-composer-overlay{padding:0!important;align-items:flex-end!important}
 #social-app-module .local-modal-box,#social-app-module .oc-post-composer-box{width:100%!important;max-width:none!important;max-height:94dvh!important;border-radius:22px 22px 0 0!important}
}
@media(max-width:480px){
 #social-app-module .social-layout{padding:7px 5px 86px!important}
 #social-app-module .app-card{padding:11px!important;border-radius:13px!important}
 #social-app-module .oc-pro-composer{gap:8px!important}
 #social-app-module .oc-pro-composer-avatar{width:38px!important;height:38px!important}
 #social-app-module .oc-pro-composer-input{padding:11px 12px!important;font-size:11px!important}
 #social-app-module .oc-pro-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}
 #social-app-module .oc-pro-stat{padding:10px 5px!important}
 #social-app-module .oc-pro-stat b{font-size:17px!important}
 #social-app-module .oc-pro-stat span{font-size:8px!important}
}

/* Shared module framework */
.oc-hr-app,.ocscr-app,.ocfa-app,.oci-app,.ocmr-app{max-width:100%!important;overflow-x:hidden!important}
.oc-hr-hero,.ocscr-hero,.ocfa-hero,.oci-hero,.ocmr-hero{border-radius:20px!important;box-shadow:var(--oc-r8-shadow)!important}
.oc-hr-shell,.ocscr-shell,.ocfa-shell,.oci-shell,.ocmr-shell{min-width:0!important;max-width:100%!important}
.oc-hr-kpis,.ocscr-kpis,.oci-kpis,.ocmr-kpis{gap:12px!important}
.oc-hr-tabs,.ocscr-tabs,.ocfa-nav,.oci-tabs,.ocmr-tabs,.cfg-tab-nav{overflow-x:auto!important;overscroll-behavior-inline:contain!important;scrollbar-width:thin!important;flex-wrap:nowrap!important}
.oc-hr-tabs>*,.ocscr-tabs>*,.ocfa-nav>*,.oci-tabs>*,.ocmr-tabs>*,.cfg-tab-nav>*{flex:0 0 auto!important;white-space:nowrap!important}
.oc-hr-table-wrap,.ocscr-table-wrap,.ocfa-table-wrap,.oci-table-wrap,.ocmr-records,.w3-responsive{overflow:auto!important;-webkit-overflow-scrolling:touch!important}
table{max-width:100%}
@media(max-width:980px){
 .oc-hr-hero,.ocscr-hero,.ocfa-hero,.oci-hero,.ocmr-hero{padding:24px!important}
 .oc-hr-hero-actions,.ocscr-hero-actions,.ocfa-hero-actions,.oci-hero-actions,.ocmr-hero-actions{flex-wrap:wrap!important}
 .oc-hr-kpis,.ocscr-kpis,.oci-kpis,.ocmr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .ocfa-shell{grid-template-columns:1fr!important}
 .ocfa-nav{display:flex!important;position:static!important;width:100%!important;padding:8px!important;border-radius:14px!important}
}
@media(max-width:640px){
 .oc-hr-app,.ocscr-app,.ocfa-app,.oci-app,.ocmr-app{padding:0!important}
 .oc-hr-hero,.ocscr-hero,.ocfa-hero,.oci-hero,.ocmr-hero{padding:20px 16px!important;border-radius:17px!important}
 .oc-hr-hero-copy h1,.ocscr-hero-copy h1,.ocfa-hero-copy h1,.oci-hero-copy h1,.ocmr-hero h1{font-size:25px!important;line-height:1.15!important}
 .oc-hr-hero-actions,.ocscr-hero-actions,.ocfa-hero-actions,.oci-hero-actions,.ocmr-hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
 .oc-hr-hero-actions button,.ocscr-hero-actions button,.ocfa-hero-actions button,.oci-hero-actions button,.ocmr-hero-actions button{width:100%!important;justify-content:center!important}
 .oc-hr-kpis,.ocscr-kpis,.oci-kpis,.ocmr-kpis{grid-template-columns:1fr 1fr!important;gap:8px!important}
 .oc-hr-kpi,.ocscr-kpi,.oci-kpi,.ocmr-kpi{padding:12px!important;min-width:0!important}
 .oc-hr-shell,.ocscr-shell,.ocfa-shell,.oci-shell,.ocmr-shell{border-radius:15px!important}
 .oc-hr-content,.ocscr-content,.ocfa-content,.oci-content,.ocmr-content{padding:12px!important}
 .oc-hr-toolbar,.ocscr-toolbar,.ocfa-toolbar,.oci-toolbar,.ocmr-tools{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
 .oc-hr-toolbar input,.oc-hr-toolbar select,.ocscr-toolbar input,.ocscr-toolbar select,.ocfa-toolbar input,.ocfa-toolbar select,.oci-toolbar input,.oci-toolbar select,.ocmr-tools input,.ocmr-tools select{width:100%!important;max-width:none!important}
 .c-modal-overlay,.oc-hr-modal-overlay,.ocscr-modal-overlay,.ocfa-modal-overlay,.oci-modal-overlay{align-items:flex-end!important;padding:0!important}
 .c-modal-box,.oc-hr-modal,.ocscr-modal,.ocfa-modal,.oci-modal{width:100%!important;max-width:none!important;max-height:94dvh!important;border-radius:20px 20px 0 0!important}
 .c-modal-body,.oc-hr-modal-body,.ocscr-modal-body,.ocfa-modal-body,.oci-modal-body{padding:14px!important}
 .w3-row-padding{margin-left:0!important;margin-right:0!important}
 .w3-col.m2,.w3-col.m3,.w3-col.m4,.w3-col.m5,.w3-col.m6,.w3-col.m7,.w3-col.m8,.w3-col.m9,.w3-col.m10{width:100%!important;padding:0!important}
 .cfg-tab-nav{display:flex!important;padding-bottom:5px!important}
 .cfg-tab-btn{min-height:42px!important}
}
@media(max-width:390px){
 .oc-hr-kpis,.ocscr-kpis,.oci-kpis,.ocmr-kpis{grid-template-columns:1fr!important}
}


@media(max-width:520px) and (min-width:391px){
 body .topbar .landing-region-controls{grid-template-columns:1fr 1fr!important}
 body .topbar .landing-region-controls .landing-language-picker:first-child{grid-column:1/-1!important}
}
.portal-mobile-scrim{display:none}
@media(max-width:992px){
 body.oc-r8-sidebar-open{overflow:hidden!important}
 .portal-mobile-scrim{position:fixed;inset:58px 0 0;z-index:9998;background:rgba(15,23,42,.48);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;display:block;transition:opacity .2s ease}
 .portal-mobile-scrim.show{opacity:1;pointer-events:auto}
 .oc-r8-table-scroll{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
 .oc-r8-table-scroll>table{min-width:680px}
}

/* Direction-aware refinements */
html[dir="rtl"] .sidebar-wrapper{border-right:0!important;border-left:1px solid var(--border-color)!important}
html[dir="rtl"] .menu-link i{margin-right:0!important;margin-left:10px!important}
html[dir="rtl"] #social-app-module .nav-link i{margin-right:0!important;margin-left:8px!important}
html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select{text-align:right}