/* =====================================================================================
   ManbiTech "Horizon" design – SAP BTP cockpit look for the back office, service desk,
   accounting and customer portal (+ form fields on the website).
   Loaded last; everything is driven by tokens so light and dark themes stay readable.
   ===================================================================================== */

/* ---------- fonts (self-hosted, SIL Open Font License) ---------- */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-display:swap;src:url("../fonts/ibm-plex-sans-latin-700-normal.c277d7b83f8a.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url("../fonts/source-sans-3-latin-400-normal.27ab01c4cb50.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:500;font-display:swap;src:url("../fonts/source-sans-3-latin-500-normal.b3b7577030b9.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url("../fonts/source-sans-3-latin-600-normal.9a35cba76eda.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-weight:700;font-display:swap;src:url("../fonts/source-sans-3-latin-700-normal.9b13bd3653e3.woff2") format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:400;font-display:swap;src:url("../fonts/noto-sans-latin-400-normal.876b269d87ea.woff2") format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:500;font-display:swap;src:url("../fonts/noto-sans-latin-500-normal.03e3200a759d.woff2") format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:600;font-display:swap;src:url("../fonts/noto-sans-latin-600-normal.4d5bf5348b83.woff2") format("woff2")}
@font-face{font-family:"Noto Sans";font-weight:700;font-display:swap;src:url("../fonts/noto-sans-latin-700-normal.8a4f634102a0.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-weight:400;font-display:swap;src:url("../fonts/roboto-latin-400-normal.4279528ce0e7.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-weight:500;font-display:swap;src:url("../fonts/roboto-latin-500-normal.55cfeb5304f0.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-weight:600;font-display:swap;src:url("../fonts/roboto-latin-600-normal.6714c03eb3c0.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-weight:700;font-display:swap;src:url("../fonts/roboto-latin-700-normal.10a07810f28f.woff2") format("woff2")}
:root{--font:Inter,"72",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html[data-font="plex"]{--font:"IBM Plex Sans",system-ui,sans-serif}html[data-font="source"]{--font:"Source Sans 3",system-ui,sans-serif}
html[data-font="noto"]{--font:"Noto Sans",system-ui,sans-serif}html[data-font="roboto"]{--font:Roboto,system-ui,sans-serif}
html[data-font="system"]{--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
html[data-fsize="compact"]{font-size:15px}html[data-fsize="normal"]{font-size:16px}html[data-fsize="large"]{font-size:17.5px}

/* ---------- tokens (SAP Horizon light = default) ---------- */
:root{--hz-ln2:#D9D9D9;--hz-hover:#EAECEE;--hz-fld:#fff;--hz-fld-hov:#fff;--hz-fld-bd:#8396A8;--hz-fld-bd2:#556B82;--hz-focus:#0032A5;--hz-req:#AA0808;
  --hz-btn-bd:#BCC3CA;--hz-link:#0064D9;--hz-title:#1D2D3E;--hz-shadow:0 0 .125rem 0 rgba(34,53,72,.15),0 .125rem .5rem 0 rgba(34,53,72,.15);
  --hz-nav-tx:#1D2D3E;--hz-nav-ic:#556B82;--hz-nav-hov:#EAECEE;--hz-nav-sel:#EBF8FF;--hz-nav-sel-bd:#0064D9;--hz-nav-sel-tx:#0A2E5C}
/* SAP Horizon dark ("evening") */
html[data-theme="evening"]{--sh:#1D232A;--shtx:#F5F6F7;--shln:#2E3A47;--ac:#0070F2;--ac2:#4DB1FF;--acs:#1B3A5C;--nav:#1D232A;--navtx:#EAECEE;--navic:#A9B4BE;
  --card:#1D232A;--tx:#F5F6F7;--mu:#A9B4BE;--ln:#2E3A47;--canvas:#12171C;--canvas-tx:#F5F6F7;color-scheme:dark}
html[data-theme="evening"][data-canvas]{--canvas:#12171C;--canvas-tx:#F5F6F7}
html:is([data-theme="evening"],[data-theme="midnight"]){--hz-ln2:#3B4754;--hz-hover:#26303A;--hz-fld:#29313A;--hz-fld-hov:#2E3A47;--hz-fld-bd:#8396A8;--hz-fld-bd2:#A9B4BE;
  --hz-focus:#4DB1FF;--hz-req:#FF8888;--hz-btn-bd:#5B6B7B;--hz-link:#4DB1FF;--hz-title:#F5F6F7;--hz-shadow:0 0 .125rem 0 rgba(0,0,0,.4),0 .125rem .5rem 0 rgba(0,0,0,.35);
  --hz-nav-tx:#EAECEE;--hz-nav-ic:#A9B4BE;--hz-nav-hov:#26303A;--hz-nav-sel:#1B3A5C;--hz-nav-sel-bd:#4DB1FF;--hz-nav-sel-tx:#F5F6F7}
html[data-theme="midnight"]{--hz-fld:#1E293B;--hz-fld-hov:#24324A}
html[data-theme="contrast"]{--hz-fld-bd:#000;--hz-fld-bd2:#000;--hz-focus:#0000C8;--hz-nav-sel:#FFF59D;--hz-nav-sel-tx:#000;--hz-link:#0000C8}
html:not([data-theme="ocean"]):not([data-theme="evening"]):not([data-theme="midnight"]):not([data-theme="contrast"]){--hz-nav-sel-bd:var(--ac);--hz-link:var(--ac2)}

/* ---------- base typography inside the apps ---------- */
:is(body.cockpit,body.app,body.mt-cockpit){font-family:var(--font)!important;font-size:.875rem;color:var(--tx);background:var(--canvas)!important;-webkit-font-smoothing:antialiased}
:is(body.cockpit,body.app,body.mt-cockpit) :is(h1,h2,h3,h4,h5,p,a,span,b,strong,small,label,li,td,th,div,button,input,select,textarea,summary,em,legend,option):not(.ms):not(.material-symbols-outlined){font-family:var(--font)!important}
:is(body.cockpit,body.app) :is(.app-main,.pmain,main) a:not(.btn-c):not(.btn):not(.tile):not(.mt-tile):not([class*="bg-"]){color:var(--hz-link)}
:is(body.cockpit,body.app) :is(.pg-head h1,.pmain h1,main h1),body.mt-cockpit #content h1{font-weight:700!important;font-size:1.5rem!important;letter-spacing:-.01em;color:var(--hz-title)!important;line-height:1.25}
:is(body.cockpit,body.app,body.mt-cockpit) :is(h2,h3){color:var(--hz-title)}
:is(body.cockpit,body.app) .pg-head p,:is(body.cockpit,body.app) .muted{color:var(--mu)!important}
:is(body.cockpit,body.app) .app-main,body.app main.pmain{padding:1rem 1.5rem 3rem}

/* ---------- shell bar (white, like BTP) ---------- */
:is(body.cockpit,body.app,body.mt-cockpit) .shell{box-shadow:0 0 .125rem rgba(34,53,72,.15),0 .125rem .5rem rgba(34,53,72,.10)}
:is(body.cockpit,body.app,body.mt-cockpit) .shell .sh-product{font-weight:700}

/* ---------- side navigation (tokens; readable in dark) ---------- */
html body :is(.sidenav,.sidenav.pnav){background:var(--nav)!important;border-color:var(--ln)!important}
html body :is(.sidenav,.sidenav.pnav) :is(a,details.sn-g>summary,.sn-out){color:var(--hz-nav-tx)!important;font-size:.875rem}
html body :is(.sidenav,.sidenav.pnav) .ms{color:var(--hz-nav-ic)!important}
html body :is(.sidenav,.sidenav.pnav) :is(a,details.sn-g>summary,.sn-out):hover{background:var(--hz-nav-hov)!important}
html body :is(.sidenav,.sidenav.pnav) a[aria-current="page"]{background:var(--hz-nav-sel)!important;border-color:var(--hz-nav-sel-bd)!important;color:var(--hz-nav-sel-tx)!important}
html body :is(.sidenav,.sidenav.pnav) a[aria-current="page"] .ms{color:var(--hz-nav-sel-bd)!important}
html body .sn-tools button{color:var(--hz-nav-ic)!important}html body .sn-tools button:hover{background:var(--hz-nav-hov)!important}
html body.mt-cockpit #nav-sidebar,html body.mt-cockpit #nav-sidebar-inner{background:var(--nav)!important;border-color:var(--ln)!important}
html body.mt-cockpit #nav-sidebar-apps div[class*="mb-1.5"] h2{color:var(--hz-nav-tx)!important}
html body.mt-cockpit #nav-sidebar-apps div[class*="mb-1.5"] h2:hover,html body.mt-cockpit #nav-sidebar-apps ol a:hover{background:var(--hz-nav-hov)!important}
html body.mt-cockpit #nav-sidebar-apps ol a{color:var(--hz-nav-tx)!important}
html body.mt-cockpit #nav-sidebar-apps :is(h2,ol a) .material-symbols-outlined{color:var(--hz-nav-ic)!important}
html body.mt-cockpit #nav-sidebar-apps ol a.active{background:var(--hz-nav-sel)!important;border-color:var(--hz-nav-sel-bd)!important;color:var(--hz-nav-sel-tx)!important}
html body.mt-cockpit #nav-sidebar-apps ol a.active .material-symbols-outlined{color:var(--hz-nav-sel-bd)!important}
html body.mt-cockpit #nav-sidebar input{background:var(--hz-fld)!important;color:var(--tx)!important;border-color:var(--hz-fld-bd)!important}

/* ---------- cards / panels / tiles ---------- */
:is(body.cockpit,body.app) :is(.card,.panel,.stat,.tbl-wrap,.tile,.upi-card),body.mt-cockpit :is(.mt-tile,.mt-card){background:var(--card)!important;color:var(--tx);border:1px solid transparent!important;border-radius:.75rem!important;box-shadow:var(--hz-shadow)!important}
:is(body.cockpit,body.app) .card>header{padding:.75rem 1rem;border-bottom:1px solid var(--ln)}
:is(body.cockpit,body.app) .card>header h2,:is(body.cockpit,body.app) .panel h2{font-size:1rem!important;font-weight:700!important;color:var(--hz-title)!important}
:is(body.cockpit,body.app) .card .body{padding:.875rem 1rem}
:is(body.cockpit,body.app) .tile .v{color:var(--ac)}

/* ---------- tables (compact list report) ---------- */
:is(body.cockpit,body.app) :is(.ft,.tbl) th,body.mt-cockpit #result_list th,body.mt-cockpit table thead th{font-size:.875rem!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;color:var(--tx)!important;
  background:var(--card)!important;border-bottom:1px solid var(--hz-ln2)!important;padding:.625rem .875rem!important}
:is(body.cockpit,body.app) :is(.ft,.tbl) td,body.mt-cockpit #result_list td{font-size:.875rem;color:var(--tx);border-bottom:1px solid var(--ln)!important;padding:.5625rem .875rem!important;background:transparent}
:is(body.cockpit,body.app) :is(.ft,.tbl) tbody tr:hover td,body.mt-cockpit #result_list tbody tr:hover td{background:var(--hz-hover)!important}
:is(body.cockpit,body.app) :is(.ft,.tbl) td a,body.mt-cockpit #result_list td a{color:var(--hz-link)}

/* ---------- form fields (Horizon) ---------- */
:is(body.cockpit,body.app,body.mt-cockpit) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]),select){
  height:2.25rem!important;min-height:2.25rem;padding:0 .625rem!important;font-size:.875rem!important;font-weight:400!important;color:var(--tx)!important;background:var(--hz-fld)!important;
  border:1px solid var(--hz-fld-bd)!important;border-radius:.375rem!important;box-shadow:inset 0 -1px 0 var(--hz-fld-bd2)!important;transition:border-color .12s,background .12s}
:is(body.cockpit,body.app,body.mt-cockpit) textarea{min-height:4.5rem;padding:.5rem .625rem!important;font-size:.875rem!important;color:var(--tx)!important;background:var(--hz-fld)!important;
  border:1px solid var(--hz-fld-bd)!important;border-radius:.375rem!important;box-shadow:inset 0 -1px 0 var(--hz-fld-bd2)!important}
:is(body.cockpit,body.app,body.mt-cockpit) :is(input,select,textarea):hover:not(:disabled){border-color:var(--hz-link)!important;background:var(--hz-fld-hov)!important}
:is(body.cockpit,body.app,body.mt-cockpit) :is(input,select,textarea):focus{outline:2px solid var(--hz-focus)!important;outline-offset:1px;border-color:var(--hz-link)!important;box-shadow:none!important}
:is(body.cockpit,body.app,body.mt-cockpit) :is(input,select,textarea):disabled{opacity:.6}
:is(body.cockpit,body.app,body.mt-cockpit) input[type=file]{font-size:.875rem;color:var(--tx)}
:is(body.cockpit,body.app,body.mt-cockpit) :is(input[type=checkbox],input[type=radio]){accent-color:var(--ac);width:1rem;height:1rem}
:is(body.cockpit,body.app,body.mt-cockpit) ::placeholder{color:var(--mu)!important;opacity:.8}
/* labels above fields, muted and compact */
:is(body.cockpit,body.app) :is(.formgrid,.fstack,.stack,.payform,.row2) label,:is(body.cockpit,body.app) form>label,:is(body.cockpit,body.app) .panel label{font-size:.875rem!important;font-weight:400!important;color:var(--mu)!important}
:is(body.cockpit,body.app) :is(.formgrid,.payform){gap:.75rem 2rem!important}
:is(body.cockpit,body.app) .stack{gap:.75rem!important}
body.app .panel{padding:1.125rem 1.25rem!important}
/* buttons */
:is(body.cockpit,body.app) :is(.btn-c,.btn){min-height:2.25rem;height:auto;padding:.4rem .875rem!important;border-radius:.5rem!important;font-size:.875rem!important;font-weight:600!important;
  background:var(--ac)!important;color:#fff!important;border:1px solid var(--ac)!important;box-shadow:none!important;background-image:none!important}
:is(body.cockpit,body.app) :is(.btn-c,.btn):hover{filter:brightness(.92)}
:is(body.cockpit,body.app) :is(.btn-c.ghost,.btn.ghost){background:var(--card)!important;color:var(--hz-link)!important;border:1px solid var(--hz-btn-bd)!important}
:is(body.cockpit,body.app) :is(.btn-c.ghost,.btn.ghost):hover{background:var(--hz-hover)!important;filter:none}
:is(body.cockpit,body.app) :is(.btn-c.sm,.btn.sm){min-height:1.75rem;padding:.2rem .625rem!important;font-size:.8125rem!important}

/* ---------- back office (admin) forms: section cards, labels on top, two columns ---------- */
body.mt-cockpit #content fieldset.module{background:var(--card);border-radius:.75rem;box-shadow:var(--hz-shadow);padding:1rem 1.25rem .5rem;margin:0 0 1rem}
body.mt-cockpit #content fieldset.module>h2{background:none!important;height:auto!important;padding:0!important;margin:0 0 .5rem!important;font-size:1rem!important;font-weight:700!important;color:var(--hz-title)!important}
body.mt-cockpit #content .aligned.form-rows{border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
@media(min-width:1100px){body.mt-cockpit #content .aligned.form-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
  body.mt-cockpit #content .aligned.form-rows>.form-row:has(textarea),body.mt-cockpit #content .aligned.form-rows>.form-row:has(.field-line+.field-line),body.mt-cockpit #content .aligned.form-rows>.form-row:has(.readonly img){grid-column:1/-1}}
body.mt-cockpit #content .form-row .field-line{flex-direction:column!important;align-items:stretch!important;min-height:0!important;border:0!important;padding:.375rem 0!important;gap:.25rem}
body.mt-cockpit #content .form-row .field-line>div:first-child{width:auto!important;min-width:0!important;height:auto!important;line-height:1.4!important}
body.mt-cockpit #content .form-row .field-line label{font-weight:400!important;color:var(--mu)!important;margin:0 0 .125rem!important;font-size:.875rem!important}
body.mt-cockpit #content .form-row .field-line label .text-red-600,body.mt-cockpit #content .form-row .field-line label span[class*="red"]{color:var(--hz-req)!important}
body.mt-cockpit #content .form-row .field-line .max-w-2xl{max-width:none!important}
body.mt-cockpit #content .form-row .field-line .readonly{min-height:0!important;padding:.375rem 0!important;color:var(--tx)}
body.mt-cockpit #content .form-row :is(.help,[class*="text-font-subtle"]){font-size:.75rem!important;color:var(--mu)!important}
body.mt-cockpit #content .form-row:has(.field-line+.field-line){display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));column-gap:2rem}
/* admin inline tables (contacts, lines) */
body.mt-cockpit #content .tabular table td,body.mt-cockpit #content .tabular table th{padding:.375rem .5rem!important}
/* admin dark: make every text follow the tokens */
html.dark body.mt-cockpit #content :is(label,td,th,p,span,div,h1,h2,h3){border-color:var(--ln)}
html.dark body.mt-cockpit #content,html.dark body.mt-cockpit #content :is(td,th,p,li){color:var(--tx)}

/* ---------- portal on dark themes: website tokens follow the app tokens ---------- */
html.dark body.app{--ink:var(--tx);--muted:var(--mu);--line:var(--ln);--surface:var(--card);--bg:var(--canvas);--accent-soft:var(--acs)}
html.dark body.app :is(h1,h2,h3,h4,b,strong,dt,dd,td,th,p,li,label,summary){color:var(--tx)}
html.dark body.app :is(.muted,small,.lead){color:var(--mu)!important}
html.dark body.app :is(.panel,.stat,.tbl-wrap,.tbl td,.tbl th){background:var(--card)!important;border-color:var(--ln)!important}
html.dark body.app pre,html.dark body.app code{background:#12171C;color:#F5F6F7}
html.dark body.cockpit :is(.pill){filter:brightness(1.15)}
html.dark :is(body.cockpit,body.app) .flash-c,html.dark :is(body.cockpit,body.app) .flash{background:var(--card);color:var(--tx);border-color:var(--ln)}

/* ---------- appearance menu: font + size choices ---------- */
.sh-menu .ft-sw,.sh-menu .fs-sw{grid-template-columns:repeat(2,1fr)!important}
.sh-menu .ft-sw button,.sh-menu .fs-sw button{height:2rem!important;min-height:0;background:var(--card)!important;color:var(--tx)!important;border:1px solid var(--ln)!important;font-size:.8rem!important;font-weight:500!important}
.sh-menu .ft-sw button.on,.sh-menu .fs-sw button.on{border-color:var(--ac)!important;background:var(--acs)!important;color:var(--tx)!important}
.sh-menu .ft-sw .f-plex{font-family:"IBM Plex Sans"!important}.sh-menu .ft-sw .f-source{font-family:"Source Sans 3"!important}.sh-menu .ft-sw .f-noto{font-family:"Noto Sans"!important}
.sh-menu .ft-sw .f-roboto{font-family:Roboto!important}.sh-menu .ft-sw .f-system{font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important}.sh-menu .ft-sw .f-inter{font-family:Inter!important}
.sh-menu{max-height:calc(100vh - 70px);overflow-y:auto}

/* ---------- website forms: same Horizon field style ---------- */
body:not(.cockpit):not(.app):not(.mt-cockpit) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=range]),select){
  min-height:2.5rem;padding:.5rem .75rem;border:1px solid #8396A8;border-radius:.375rem;box-shadow:inset 0 -1px 0 #556B82;background:#fff;font-size:.95rem}
body:not(.cockpit):not(.app):not(.mt-cockpit) textarea{padding:.5rem .75rem;border:1px solid #8396A8;border-radius:.375rem;box-shadow:inset 0 -1px 0 #556B82;font-size:.95rem}
body:not(.cockpit):not(.app):not(.mt-cockpit) :is(input,select,textarea):hover{border-color:#0064D9}
body:not(.cockpit):not(.app):not(.mt-cockpit) :is(input,select,textarea):focus{outline:2px solid #0032A5;outline-offset:1px;border-color:#0064D9;box-shadow:none}

/* ---------- fixes: portal forms in two columns, admin text areas, language switch ---------- */
@media(min-width:900px){
  body.app form.stack:has(> div:nth-of-type(3)){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 2rem!important;align-items:start}
  body.app form.stack:has(> div:nth-of-type(3)) > :is(.actions,.check,.flash,h2,h3,p,ul,.full,button,.row2,.hint),
  body.app form.stack:has(> div:nth-of-type(3)) > div:has(textarea){grid-column:1/-1}}
body.app form.stack .helptext{display:block;font-size:.75rem;color:var(--mu);margin-top:.25rem}
body.mt-cockpit #content textarea{height:5.5rem;resize:vertical}
:is(body.cockpit,body.app) .shell .lang{background:var(--card)!important;border-color:var(--ln)!important}
:is(body.cockpit,body.app) .shell .lang a{color:var(--mu)!important}
:is(body.cockpit,body.app) .shell .lang a[aria-current="true"]{background:var(--ac)!important;color:#fff!important}
@media(min-width:900px){body.app form.stack:has(> div:nth-of-type(3))[style*="max-width"]{max-width:980px!important}}