/*
 * Webtrixia Hub Professional UI
 * Shared visual layer for the classic Hub and the operational modules.
 */
:root{
  --hub-font:'Sofia Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --hub-mono:'DM Mono','SFMono-Regular',Consolas,monospace;
  --hub-accent:#5b4be8;
  --hub-accent-hover:#493bd0;
  --hub-success:#16834f;
  --hub-warning:#c97808;
  --hub-danger:#d43d3d;
  --hub-info:#1477b8;
  --hub-radius:8px;
  --hub-radius-sm:6px;
  --hub-shadow:0 8px 24px rgba(28,35,52,.07);
  --hub-shadow-hover:0 12px 30px rgba(28,35,52,.11);
}

html{scroll-behavior:smooth}
body.hub-pro{
  font-family:var(--hub-font);
  letter-spacing:0;
  text-rendering:optimizeLegibility;
}
body.hub-pro::before{display:none!important}
body.hub-pro button,
body.hub-pro input,
body.hub-pro select,
body.hub-pro textarea{font-family:var(--hub-font);letter-spacing:0}
body.hub-pro :is(.mono,.kv,.at,.fv,.fig .v,.tile-k .v,.num){font-family:var(--hub-mono)}

/* Stable, compact controls */
body.hub-pro :is(button,.btn,.lbtn,.tbtn,.tbtn2,.pa,.task-icon){
  min-height:34px;
  border-radius:var(--hub-radius-sm)!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,
    box-shadow .16s ease,transform .16s ease,opacity .16s ease;
}
body.hub-pro :is(button,.btn,.lbtn,.tbtn,.tbtn2,.pa):not(:disabled):hover{
  transform:translateY(-1px);
}
body.hub-pro :is(button,.btn,.lbtn,.tbtn,.tbtn2,.pa):not(:disabled):active{
  transform:translateY(0);
}
body.hub-pro :is(.btn.p,.btn-primary,.lbtn){
  background:var(--hub-accent)!important;
  border-color:var(--hub-accent)!important;
  color:#fff!important;
  box-shadow:0 2px 8px rgba(91,75,232,.22)!important;
}
body.hub-pro :is(.btn.p,.btn-primary,.lbtn):hover{
  background:var(--hub-accent-hover)!important;
  filter:none!important;
  box-shadow:0 5px 14px rgba(91,75,232,.27)!important;
}
body.hub-pro .btn-win{background:var(--hub-success)!important}
body.hub-pro :is(.btn,.pa,.task-icon,.tt,.tbtn,.tbtn2):focus-visible,
body.hub-pro :is(input,select,textarea):focus-visible{
  outline:2px solid var(--hub-accent)!important;
  outline-offset:2px;
}
body.hub-pro :is(input,select,textarea){
  border-radius:var(--hub-radius-sm)!important;
  min-height:36px;
}
body.hub-pro input[type="checkbox"],
body.hub-pro input[type="radio"]{min-height:0}

/* Surfaces and information density */
body.hub-pro :is(.panel,.card,.kc,.erp-kpi,.task-project,.task-box,.task-table-wrap,
  .task-project-headbar,.hcard,.cc,.tile-k,.rail,.lane,.sheet,.modal-box,.dialog,
  .form-card,.list-card,.stat-card,.summary-card){
  border-radius:var(--hub-radius)!important;
  box-shadow:none;
}
body.hub-pro :is(.panel,.card,.kc,.erp-kpi,.task-project,.task-box,.hcard,.cc,.tile-k,
  .form-card,.list-card,.stat-card,.summary-card){
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
body.hub-pro :is(.kc,.erp-kpi,.task-project,.hcard,.cc,.tile-k,.card.lift):hover{
  transform:translateY(-2px);
  box-shadow:var(--hub-shadow-hover)!important;
}
body.hub-pro :is(.panel,.card,.task-box,.task-table-wrap,.form-card,.list-card){
  box-shadow:0 1px 2px rgba(28,35,52,.025);
}
body.hub-pro :is(.ph,.card-h,.task-project-headbar,.sheet-h){
  letter-spacing:0;
}
body.hub-pro :is(.nsec,label,.kl,.tile-k .k,.fig .k,.tbl th){
  letter-spacing:.045em!important;
}

/* Navigation */
body.hub-pro .sb{box-shadow:4px 0 18px rgba(28,35,52,.035)}
body.hub-pro .ni{
  min-height:35px;
  border-radius:var(--hub-radius-sm)!important;
  font-weight:500;
}
body.hub-pro .ni:hover{transform:translateX(2px)}
body.hub-pro .ni.active{
  box-shadow:inset 3px 0 0 var(--acc,var(--hub-accent));
  font-weight:600;
}
body.hub-pro .topbar{box-shadow:0 3px 14px rgba(28,35,52,.035)}
body.hub-pro .seg{
  border-radius:var(--hub-radius)!important;
  border:1px solid var(--line,rgba(20,20,43,.09));
}
body.hub-pro .seg button{
  min-height:32px;
  height:32px;
  max-height:32px;
  border-radius:5px!important;
  gap:7px;
  flex:0 0 auto;
  overflow:hidden;
  contain:layout paint;
  transform:none!important;
}
body.hub-pro .seg button:hover,
body.hub-pro .seg button:active{transform:none!important}
body.hub-pro .seg button[aria-selected="true"]{
  box-shadow:0 1px 4px rgba(28,35,52,.10)!important;
}

/* Tables */
body.hub-pro :is(table,.tbl,.task-table){font-variant-numeric:tabular-nums}
body.hub-pro :is(.tbl,.task-table) th{
  font-weight:600;
  letter-spacing:.04em!important;
}
body.hub-pro :is(.tbl,.task-table) tbody tr{
  transition:background-color .14s ease,box-shadow .14s ease;
}
body.hub-pro :is(.tbl,.task-table) tbody tr:hover{
  box-shadow:inset 3px 0 0 var(--hub-accent);
}
body.hub-pro .tbl td{padding-top:10px;padding-bottom:10px}

/* Modals, drawers and useful states */
body.hub-pro :is(.modal,.scrim){backdrop-filter:blur(5px) saturate(.85)}
body.hub-pro .sheet{transition:transform .28s cubic-bezier(.22,.8,.24,1)}
body.hub-pro :is(.blank,.emp){min-height:150px;display:grid;place-content:center}
body.hub-pro .blank .g{animation:none!important}
body.hub-pro .loading{min-height:92px;display:flex;align-items:center;justify-content:center}
body.hub-pro .toast{border-radius:var(--hub-radius)!important}

/* File upload is a real control instead of the browser's cramped default. */
body.hub-pro .hub-file-control{
  width:100%;
  min-height:48px;
  padding:6px;
  border:1px dashed var(--brd2,var(--line-2,#ccd4da));
  border-radius:var(--hub-radius-sm);
  background:var(--sur2,var(--card-2,#f4f5f8));
  color:var(--tx2,var(--ink-2,#4b4b6b));
  display:flex;
  align-items:center;
  gap:10px;
  transition:border-color .16s ease,background-color .16s ease;
}
body.hub-pro .hub-file-control:hover{border-color:var(--hub-accent)}
body.hub-pro .hub-file-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.hub-pro .hub-file-pick{
  min-height:34px;
  padding:7px 12px;
  border-radius:var(--hub-radius-sm);
  background:var(--hub-accent);
  color:#fff;
  font:600 12px/20px var(--hub-font);
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
body.hub-pro .hub-file-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

/* Animation hooks, applied by hub-polish.js. */
body.hub-pro .hub-enter{
  opacity:0;
  transform:translateY(8px);
}
body.hub-pro .hub-enter.hub-entered{
  opacity:1;
  transform:none;
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,.8,.24,1);
  transition-delay:calc(var(--hub-order,0) * 28ms);
}
body.hub-pro .hub-ripple{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.38);
  transform:translate(-50%,-50%) scale(0);
  animation:hub-ripple .48s ease-out forwards;
}
body.hub-pro :is(.btn,button){position:relative;overflow:hidden}
@keyframes hub-ripple{to{transform:translate(-50%,-50%) scale(16);opacity:0}}

/* The operational modules use the same sober ERP rhythm. */
body.hub-pro .shell{max-width:1760px;padding-bottom:32px}
body.hub-pro .bar-top{padding-top:12px;padding-bottom:12px}
body.hub-pro .brand .mark{border-radius:var(--hub-radius-sm)!important;background:#242637}
body.hub-pro .card{padding:16px}
body.hub-pro .lane{padding:10px}
body.hub-pro .tile{border-radius:var(--hub-radius)!important}
body.hub-pro .tile:hover{transform:translateY(-2px)}
body.hub-pro .tile-k .spark{opacity:.08}
body.hub-pro .scan{background:#242637!important;color:#fff!important}
html[data-theme="dark"] body.hub-pro .scan{background:#202033!important;border:1px solid var(--line)}
body.hub-pro .mode button[aria-pressed="true"]{
  background:var(--hub-accent)!important;
  border-color:var(--hub-accent)!important;
  color:#fff!important;
}

@media(max-width:820px){
  body.hub-pro{overflow-x:hidden}
  body.hub-pro .bar-top{align-items:stretch}
  body.hub-pro .bar-top .brand{width:100%;margin-right:0}
  body.hub-pro .bar-top .seg{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  body.hub-pro .bar-top .seg::-webkit-scrollbar{display:none}
  body.hub-pro .bar-top .seg button{flex:0 0 auto}
  body.hub-pro .hub-enter{opacity:1;transform:none}
  body.hub-pro :is(.btn,button){max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.hub-pro *,body.hub-pro *::before,body.hub-pro *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  body.hub-pro .hub-enter{opacity:1;transform:none}
}