/* ===== Compact sizing (10 Nov 2026, Sheig: "the portal is like this at 100%
   view, i think the entirety is too big? like the font, the heading, the
   filter area etc"). The Tasks page was done first (portal/tasks/task-visual.js);
   this does the same for the whole portal on a laptop or desktop.
   Loaded last, after calm-layer.css. Phones and small tablets (900px and
   under) keep their bigger, finger-sized controls. */
@media (min-width:901px){
  :root{--sidebar:236px;}
  body{font-size:13.5px;}

  /* Sidebar */
  .sb-brand{padding:14px 16px 12px;}
  .sb-logo{height:30px;}
  .sb-nav{padding:10px 10px;gap:1px;}
  .sb-nav .nav-item,.nav-parent{font-size:13.5px;padding:7px 10px;gap:9px;}
  .sb-nav .nav-item .ni svg,.nav-parent .ni svg{width:16px;height:16px;}
  .sb-nav .nav-item .ni,.nav-parent .ni{width:18px;height:18px;}
  .sb-nav .nav-item.nav-child,.nav-subgroup>.nav-parent.nav-child{font-size:12.5px;padding:5px 10px 5px 13px;}
  .sb-user{padding:6px 10px;}

  /* Top bar */
  .topbar{height:50px;padding:0 22px;}
  .topbar-title{font-size:15px;}

  /* Page frame and banner */
  .page{padding:16px 26px 56px;}
  .page-banner,.page-banner.pb-compact,.ph.page-banner,.cx-scope .page-banner,#page-tasks > .page-banner{min-height:48px;padding:8px 18px !important;margin:0 0 12px !important;border-radius:12px !important;}
  .page-banner h1,.cx-scope .page-banner h1,#page-tasks > .page-banner h1{font-size:16.5px !important;}
  .page-banner .pb-extra :is(.btn,button,label,select,input:not([type=checkbox]):not([type=radio])),.page-banner .pb-extra > a,.page-banner > .pb-extra:is(button,a,.btn){padding:5px 11px !important;font-size:12px !important;}

  /* Cards and number tiles */
  .card-header{padding:10px 14px;}
  .card-title{font-size:13.5px;}
  .card-body{padding:14px;}
  .kpi-grid{gap:8px;margin-bottom:14px;}
  .kpi-card{padding:10px 14px;}
  .kpi-value{font-size:21px;margin:3px 0 1px;}

  /* Search boxes, filters and buttons on the pages */
  :where(.page) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select){font-size:12.5px;}
  :where(.page) :where(input[type=text],input[type=search],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input:not([type]),select){padding-top:6px;padding-bottom:6px;min-height:0;height:auto;}
  .page .btn{font-size:12.5px;}
  .page .btn:not(.btn-sm):not(.btn-xs){height:32px;}

  /* Tables */
  :where(.page) th{font-size:10.5px;padding:7px 10px;}
  :where(.page) td{font-size:12.5px;padding:7px 10px;}
  /* Many pages size their own boxes and cells; the common big ones, smaller. */
  .krow{gap:8px;margin-bottom:12px;}
  .kc{padding:9px 13px;min-height:62px;}
  .kv{font-size:19px;}
  .page :is(input,select)[style*="padding:9px 11px"],.page :is(input,select)[style*="padding:9px 12px"],.page :is(input,select)[style*="padding:10px 12px"],.page :is(input,select)[style*="padding:8px 10px"]{padding-top:6px !important;padding-bottom:6px !important;}
  .page :is(input,select)[style*="font-size:13px"],.page :is(input,select)[style*="font-size:14px"]{font-size:12.5px !important;}
  .page :is(td,th)[style*="padding:10px 14px"]{padding:7px 11px !important;}
  .page :is(td,th)[style*="padding:9px 12px"]{padding:6px 10px !important;}
  .page :is(td,th)[style*="padding:8px 12px"]{padding:6px 10px !important;}
  .page table[style*="font-size:13px"]{font-size:12.5px !important;}
  /* Calendar has its own banner: the same height as the others. */
  #page-calendar > div:first-child{padding:9px 24px !important;}
  #page-calendar > div:first-child > div:first-child > div:first-child,#page-calendar > div:first-child > div:first-child > p{display:none;}
  #page-calendar #cal-title{font-family:var(--font) !important;font-size:16.5px !important;font-weight:600 !important;}
}