:root{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#17212b;background:#eef2f5;
  --ink:#17212b;--muted:#5f6c78;--line:#d5dde4;--line-strong:#b9c5ce;
  --brand:#075e63;--accent:#0b776f;--nav:#101820;--panel:#fff;
  --danger:#a3343a;--focus:#45a0d7
}
html{font-family:var(--ui-font,Inter,system-ui,-apple-system,"Segoe UI",sans-serif);background:var(--bg,#eef2f5)}
*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--nav)}
button,input,select,textarea{font:inherit}
button,input,select,textarea{min-height:40px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;color:var(--ink)}
button{padding:.5rem .8rem;cursor:pointer}button:hover{border-color:#82939f;background:#f5f8fa}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}.primary:hover{background:#086960;border-color:#086960}
.skip-link{position:fixed;left:12px;top:-60px;z-index:50;background:#fff;color:var(--ink);padding:10px 14px;border-radius:5px}.skip-link:focus{top:12px}

.app-nav{position:fixed;inset:0 auto 0 0;width:252px;background:var(--nav);color:#fff;padding:18px 14px;display:flex;flex-direction:column;overflow:auto;z-index:20}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;padding:0 4px 18px;border-bottom:1px solid #ffffff24;margin-bottom:8px;font-size:1.02rem}
.brand img{width:42px;height:42px;border-radius:7px;background:#f0f4f5}.brand span{display:flex;flex-wrap:wrap;column-gap:.28rem;align-items:baseline}.brand small{display:block;flex-basis:100%;color:#aebbc5;font-size:.67rem;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.nav-section{color:#8799a8;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:14px 11px 5px}
.nav-link,.app-nav #apps a{display:flex;align-items:center;gap:10px;color:#dce4ea;text-decoration:none;padding:10px 11px;border-radius:6px;margin:2px 0;min-height:40px}
.nav-link:hover,.nav-link.active,.app-nav #apps a:hover{background:#22303c;color:#fff}
.nav-link span{width:18px;text-align:center;color:#9fb0bc}.app-nav #apps{display:grid;gap:2px}.app-nav #apps a::before{content:"◇";width:18px;text-align:center;color:#8fc5c0}.app-nav #apps a span{display:none}
.nav-footer{margin-top:auto;padding:16px 4px 0;border-top:1px solid #ffffff24;display:grid;gap:8px}.nav-footer span{font-size:.75rem;color:#aebbc5;overflow:hidden;text-overflow:ellipsis}.nav-footer button{background:#192631;border-color:#40505c;color:#fff;text-align:left}
.skin-control{display:grid;gap:6px;padding:4px 10px}.skin-control label{display:grid;gap:3px;color:#aebbc5;font-size:.68rem;font-weight:700}.skin-control select,.skin-control button{width:100%;min-width:0;color:var(--ink)}.skin-control .quiet-action{display:none}

.shell{min-height:100vh;margin-left:252px;background:var(--bg,#eef2f5)}
.topbar{min-height:76px;padding:12px clamp(18px,2.5vw,36px);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.page-context{display:flex;align-items:center;gap:12px}.page-context h1{font-size:1.35rem;margin:0}.page-context .eyebrow{margin:0 0 2px}.nav-toggle{display:none;font-size:1.25rem;padding:.35rem .65rem}
.context{display:flex;align-items:center;gap:.55rem}.context label{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.context select{min-width:230px;padding:0 .65rem}
#banner{min-height:0;padding:0 clamp(18px,2.5vw,36px);background:#fff2c7;color:#5f4700}#banner:not(:empty){padding:.7rem clamp(18px,2.5vw,36px);border-bottom:1px solid #e5c766}
main{max-width:1500px;margin:auto;padding:clamp(18px,2.4vw,34px)}
h1,h2,h3,p{margin-top:0}h2{font-size:1.15rem;margin-bottom:.25rem}.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--accent);font-weight:800}
.help,.section-title p,#identity{color:var(--muted)}.panel,.card{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:clamp(16px,2vw,24px);box-shadow:0 2px 8px #243b4a0a}
.narrow{max-width:500px;margin:7vh auto}.sign-in-logo{display:block;width:min(250px,75%);height:auto;margin:0 0 26px}.narrow label,.narrow input{display:block;width:100%}.narrow label{font-size:.78rem;font-weight:700;color:#3e4c57}.narrow input{margin:.35rem 0 1rem;padding:.6rem}.narrow .primary{width:100%}.narrow .help{font-size:.8rem;margin:18px 0 0}
.welcome,.section-title{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.welcome{margin-bottom:12px;background:linear-gradient(120deg,#fff,#f6fbfa)}.welcome h2{font-size:1.55rem}.welcome-actions{display:flex;gap:8px}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:12px;margin:12px 0}.metric{background:#fff;border:1px solid var(--line);border-radius:7px;padding:14px 16px}.metric span,.metric small{display:block;color:var(--muted)}.metric span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.metric strong{display:block;font-size:1.65rem;color:var(--brand);margin:4px 0}.metric small{font-size:.75rem}
.section-title{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}.section-title p{margin:0}.search-row{display:grid;grid-template-columns:auto minmax(240px,520px) auto;gap:10px;align-items:center;margin-bottom:12px}.search-row label{font-size:.8rem;font-weight:700}.search-row input{padding:.55rem .7rem}.keyboard-hint{color:var(--muted);font-size:.72rem}
.list{border-top:1px solid var(--line)}.row{padding:12px 6px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;align-items:center}.row:hover{background:#f8fafb}.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px}.row-actions button{min-height:34px}.roles{display:flex;flex-wrap:wrap;gap:5px}.tag{font-size:.72rem;background:#e6f2f1;color:#075e63;border:1px solid #c8e2df;border-radius:99px;padding:3px 7px}.empty{padding:30px 5px;color:var(--muted)}

/* Familiarity skins change composition independently from the selected theme. */
html[data-layout="desktop-task-pane"] .app-nav{width:292px}
html[data-layout="desktop-task-pane"] .shell{margin-left:292px}
html[data-layout="desktop-task-pane"] .app-nav #apps a span{display:block;font-size:.7rem;color:#9fb0bc}
html[data-layout="desktop-task-pane"] main{max-width:none;padding:16px}
html[data-layout="desktop-task-pane"] .panel{border-radius:2px;box-shadow:none}
html[data-layout="desktop-task-pane"] .row{padding-block:7px}
html[data-layout="desktop-task-pane"] dialog details{border-radius:2px}

html[data-layout="app-control-panel"] .app-nav{position:sticky;width:auto;height:auto;inset:0;display:flex;flex-direction:row;align-items:center;padding:7px 16px}
html[data-layout="app-control-panel"] .app-nav .brand{border:0;margin:0;padding:0 18px 0 0}
html[data-layout="app-control-panel"] .app-nav .nav-section,html[data-layout="app-control-panel"] .app-nav .nav-footer{display:none}
html[data-layout="app-control-panel"] .app-nav #apps{display:flex;overflow:auto}
html[data-layout="app-control-panel"] .app-nav #apps a{min-width:max-content}
html[data-layout="app-control-panel"] .shell{margin-left:0}
html[data-layout="app-control-panel"] .panel{border-radius:0;box-shadow:none}

html[data-layout="workspace-desk"] .app-nav{width:224px}
html[data-layout="workspace-desk"] .shell{margin-left:224px}
html[data-layout="workspace-desk"] main{max-width:1240px}
html[data-layout="workspace-desk"] .metrics{grid-template-columns:repeat(2,minmax(180px,1fr))}
html[data-layout="workspace-desk"] .row{border:1px solid var(--line);border-radius:var(--radius-control);margin:8px 0;padding:14px}

html[data-layout="role-centre"] .app-nav{width:78px;padding-inline:8px}
html[data-layout="role-centre"] .brand span,html[data-layout="role-centre"] .nav-section,html[data-layout="role-centre"] .nav-link:not(.active),html[data-layout="role-centre"] .app-nav #apps a{font-size:0}
html[data-layout="role-centre"] .nav-link span,html[data-layout="role-centre"] .app-nav #apps a::before{font-size:1rem}
html[data-layout="role-centre"] .shell{margin-left:78px}
html[data-layout="role-centre"] .welcome{border-bottom:3px solid var(--accent)}
html[data-layout="role-centre"] .metrics{grid-template-columns:repeat(3,minmax(150px,1fr))}
html[data-layout="role-centre"] .metric{border-left:4px solid var(--accent);border-radius:1px}

html[data-layout="role-centre-tabs"] .app-nav{position:sticky;width:auto;height:auto;inset:0;padding:0 18px;display:grid;grid-template-columns:auto 1fr}
html[data-layout="role-centre-tabs"] .brand{grid-row:1/3;border:0;margin:0 20px 0 0;padding:7px 20px 7px 0}
html[data-layout="role-centre-tabs"] .nav-section,html[data-layout="role-centre-tabs"] .nav-footer{display:none}
html[data-layout="role-centre-tabs"] .app-nav #apps{display:flex;grid-column:2;overflow:auto}
html[data-layout="role-centre-tabs"] .shell{margin-left:0}
html[data-layout="role-centre-tabs"] .panel{border-radius:0;border-top:3px solid var(--accent)}

html[data-layout="cockpit-menu"] .app-nav{width:286px}
html[data-layout="cockpit-menu"] .shell{margin-left:286px}
html[data-layout="cockpit-menu"] main{max-width:none}
html[data-layout="cockpit-menu"] #workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px}
html[data-layout="cockpit-menu"] #overview,html[data-layout="cockpit-menu"] .metrics{grid-column:1/-1}
html[data-layout="cockpit-menu"] #parties{grid-column:1}
html[data-layout="cockpit-menu"] #workspace::after{content:"Common functions\A New party\A Company details\A Search records\A Assigned applications";white-space:pre-line;grid-column:2;grid-row:3;padding:18px;background:var(--panel);border:1px solid var(--line)}
html[data-layout="cockpit-menu"] .panel,html[data-layout="cockpit-menu"] button{border-radius:1px}

html[data-layout="cloud-accounting"] .app-nav{position:sticky;width:auto;height:auto;inset:0;display:flex;flex-direction:row;align-items:center;padding:8px 20px}
html[data-layout="cloud-accounting"] .app-nav .brand{border:0;margin:0;padding:0 22px 0 0}
html[data-layout="cloud-accounting"] .app-nav .nav-section,html[data-layout="cloud-accounting"] .app-nav .nav-footer{display:none}
html[data-layout="cloud-accounting"] .app-nav #apps{display:flex;overflow:auto}
html[data-layout="cloud-accounting"] .shell{margin-left:0}
html[data-layout="cloud-accounting"] main{max-width:1600px}
html[data-layout="cloud-accounting"] .welcome-actions .primary{border-radius:999px}

html[data-layout="small-business"] .app-nav{width:190px}
html[data-layout="small-business"] .shell{margin-left:190px}
html[data-layout="small-business"] .welcome-actions .primary{border-radius:999px}
html[data-layout="small-business"] .metrics{grid-template-columns:1fr}

dialog{border:0;border-radius:8px;padding:0;box-shadow:0 24px 80px #0006;width:min(900px,calc(100% - 24px));max-height:calc(100vh - 30px);overflow:auto}
dialog::backdrop{background:#07141dc0}dialog form{padding:26px}dialog label:not(fieldset label){display:block;margin:12px 0}dialog label input,dialog label select{display:block;width:100%;margin-top:5px;padding:.55rem}
dialog details{border:1px solid var(--line);border-radius:6px;margin:10px 0;padding:0 12px 10px;background:#fff}dialog details[open]{box-shadow:inset 3px 0 0 #b9dcd8}dialog summary{cursor:pointer;font-weight:700;padding:12px 0}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.form-grid .full{grid-column:1/-1}
fieldset{border:1px solid var(--line);border-radius:6px;padding:12px;display:flex;gap:16px;flex-wrap:wrap}fieldset input{min-height:auto}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;position:sticky;bottom:0;background:#fff;padding:12px 0 0;border-top:1px solid var(--line)}
dialog textarea{display:block;width:100%;margin-top:5px;padding:.55rem;resize:vertical}.flags{margin:12px 0}.additional-contact{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr auto;gap:8px;align-items:end;margin:8px 0}.additional-contact label{margin:0!important}

@media(max-width:980px){
  .app-nav{transform:translateX(-100%);transition:transform .18s ease}.app-nav.open{transform:translateX(0)}.shell{margin-left:0}.nav-toggle{display:block}
  .context label,#editCompany{display:none}.context select{min-width:170px}.metrics{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
  .topbar{padding:10px 14px}.page-context .eyebrow{display:none}.context select{min-width:130px;max-width:42vw}
  main{padding:14px}.welcome,.section-title{align-items:stretch;flex-direction:column}.welcome-actions{width:100%}.welcome-actions button{flex:1}.metrics{grid-template-columns:1fr}
  .search-row{grid-template-columns:1fr}.keyboard-hint{display:none}.row{align-items:flex-start;flex-direction:column}.row-actions{width:100%;justify-content:space-between}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.additional-contact{grid-template-columns:1fr 1fr}.additional-contact button{grid-column:1/-1}
}