@import url("./cyt-design-tokens.css");

/* CyT Ledger global foundation. Loaded after each legacy page's inline CSS. */
:root{
  --bg:var(--cyt-canvas);
  --paper:var(--cyt-surface);
  --ink:var(--cyt-ink-950);
  --muted:var(--cyt-ink-650);
  --line:var(--cyt-border);
  --green:var(--cyt-brand-700);
  --green-dark:var(--cyt-brand-700);
  --green-pale:var(--cyt-brand-50);
  --blue:var(--cyt-brand-700);
  --red:var(--cyt-danger);
  --gold:var(--cyt-copper-600);
  --orange:var(--cyt-copper-600);
  --purple:var(--cyt-info);
}

html{
  min-width:320px;
  background:var(--cyt-canvas);
  color:var(--cyt-ink-950);
  font-family:var(--cyt-font);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body,
body.cyt-ledger{
  margin:0;
  min-width:320px;
  background:var(--cyt-canvas);
  color:var(--cyt-ink-950);
  font-family:var(--cyt-font)!important;
  font-size:var(--cyt-text-md);
  line-height:1.5;
}

*,
*::before,
*::after{box-sizing:border-box}

body :where(button,input,select,textarea,option){
  font:inherit;
}

body :where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:0;
  box-shadow:var(--cyt-focus)!important;
}

body :where(button,a,input,select,textarea){
  transition:
    color var(--cyt-transition),
    background-color var(--cyt-transition),
    border-color var(--cyt-transition),
    box-shadow var(--cyt-transition);
}

::selection{
  background:var(--cyt-brand-100);
  color:var(--cyt-ink-950);
}

body h1,
body h2,
body h3,
body h4{
  color:var(--cyt-ink-950);
  font-family:var(--cyt-font);
  font-weight:700;
  letter-spacing:-.02em;
}

body h1{font-size:var(--cyt-text-2xl);line-height:1.2}
body h2{font-size:var(--cyt-text-xl);line-height:1.3}
body h3{font-size:var(--cyt-text-lg);line-height:1.35}
body p{color:var(--cyt-ink-650)}
body small{font-size:var(--cyt-text-xs);line-height:1.35}
body :where(.money,.num,[data-number],td[data-type="number"]){
  font-variant-numeric:tabular-nums slashed-zero;
}

/* Shared application shell */
body :where(.shell,.layout,.app){
  min-height:100dvh;
  background:var(--cyt-canvas);
}

body .shell,
body .layout{
  grid-template-columns:var(--cyt-sidebar-width) minmax(0,1fr)!important;
}

body .app:has(> aside),
body .app:has(> .side){
  grid-template-columns:var(--cyt-sidebar-width) minmax(0,1fr)!important;
}

body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side){
  background:var(--cyt-ink-950)!important;
  color:#F5FAF8!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  padding:20px 16px!important;
}

body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(.brand){
  min-height:auto!important;
  height:auto!important;
  margin:0 0 18px!important;
  padding:10px 10px 18px!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  background:transparent!important;
}

body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) .brand :where(b,strong),
body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) > .brand{
  color:#FFFFFF!important;
  font-size:20px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}

body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) .brand small{
  display:block;
  margin-top:4px;
  color:#B9D1CC!important;
  font-size:11px!important;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(nav,.nav){
  display:grid;
  gap:4px;
}

body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(nav,.nav) button{
  position:relative;
  display:flex;
  width:100%;
  min-height:40px;
  align-items:center;
  justify-content:flex-start;
  border:1px solid transparent!important;
  border-radius:var(--cyt-radius-control)!important;
  background:transparent!important;
  color:#DCE9E6!important;
  padding:8px 10px!important;
  text-align:left;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.25;
}

body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(nav,.nav) button:hover{
  background:rgba(255,255,255,.07)!important;
  color:#FFFFFF!important;
}

body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(nav,.nav) button:is(.active,.on,.selected,[aria-current="page"]){
  background:rgba(221,238,233,.14)!important;
  color:#FFFFFF!important;
  border-color:rgba(221,238,233,.16)!important;
}

body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(nav,.nav) button:is(.active,.on,.selected,[aria-current="page"])::before{
  content:"";
  position:absolute;
  left:-1px;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:3px;
  background:#8BC6B8;
}

body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(footer,.source,.admin,.db-label){
  margin-top:auto;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  background:transparent!important;
  color:#AFC6C1!important;
  font-size:11px!important;
  line-height:1.45;
  padding:14px 10px!important;
}

/* Canvas and context headers */
body :where(.main,.workspace,.content){
  min-width:0;
  width:100%;
  max-width:var(--cyt-content-max);
  margin-inline:auto;
  padding:32px!important;
  background:var(--cyt-canvas);
}

body :where(header.top,.top){
  min-height:68px!important;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin:0;
  padding:0 0 20px!important;
  border:0!important;
  border-bottom:1px solid var(--cyt-border)!important;
  background:transparent!important;
}

body :where(header.top,.top) h1{
  margin:0!important;
  color:var(--cyt-ink-950)!important;
  font-size:var(--cyt-text-2xl)!important;
  line-height:1.2!important;
  letter-spacing:-.025em!important;
}

body :where(header.top,.top) p{
  margin:6px 0 0!important;
  color:var(--cyt-ink-650)!important;
  font-size:var(--cyt-text-md)!important;
}

body :where(.selectors,.toolbar,.actions,.formactions,.modal-actions,.foot){
  gap:8px;
}

body :where(.selectors,.toolbar,.actions,.formactions,.modal-actions,.foot) > :where(button,.btn,.button,a.btn,input,select){
  flex:0 0 auto;
}

/* Panels, cards, KPI surfaces */
body :where(.panel,.block,.box,.listbox,.module,.stat,.kpi,.card,.ple article){
  background:var(--cyt-surface)!important;
  border:1px solid var(--cyt-border)!important;
  border-radius:var(--cyt-radius-panel)!important;
  box-shadow:none!important;
}

body :where(.panel,.block,.box,.listbox,.module,.stat,.kpi,.card){
  color:var(--cyt-ink-950);
}

body :where(.panel,.module,.stat,.kpi,.card){
  padding:16px!important;
}

body :where(.block,.box){
  overflow:clip;
}

body :where(.block,.box) > h2,
body :where(.panelhead){
  min-height:50px;
  margin:0!important;
  padding:14px 16px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--cyt-border)!important;
  color:var(--cyt-ink-950)!important;
  font-size:var(--cyt-text-lg)!important;
  font-weight:700!important;
}

body :where(.block,.box) > :where(.body){
  padding:16px!important;
}

body :where(.kpi,.stat) :where(span,label){
  display:block;
  color:var(--cyt-ink-650)!important;
  font-size:var(--cyt-text-xs)!important;
  font-weight:600!important;
}

body :where(.kpi,.stat) :where(strong,b){
  display:block;
  margin-top:8px!important;
  color:var(--cyt-ink-950)!important;
  font-size:22px!important;
  line-height:1.2!important;
  font-variant-numeric:tabular-nums;
}

body .kpi{
  min-height:88px!important;
  border-top:1px solid var(--cyt-border)!important;
}

body .module{
  min-height:150px;
  padding:18px!important;
}

body .module.disabled{
  background:var(--cyt-surface-sunken)!important;
  color:var(--cyt-neutral)!important;
}

/* Controls */
body :where(button,.btn,.button,.primary,.secondary,.back,.icon,a.btn){
  min-height:var(--cyt-control-dense);
  border:1px solid var(--cyt-border-strong);
  border-radius:var(--cyt-radius-control)!important;
  background:var(--cyt-surface);
  color:var(--cyt-ink-800);
  padding:7px 12px;
  font-family:var(--cyt-font)!important;
  font-size:var(--cyt-text-sm)!important;
  font-weight:600!important;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
}

body :where(button,.btn,.button,.secondary,.back,.icon,a.btn):hover{
  border-color:var(--cyt-brand-700);
  color:var(--cyt-brand-700);
  background:var(--cyt-brand-50);
}

body :where(.primary,.btn.primary,.button.primary,.module button:not(:disabled)){
  background:var(--cyt-brand-700)!important;
  border-color:var(--cyt-brand-700)!important;
  color:#FFFFFF!important;
}

body :where(.primary,.btn.primary,.button.primary,.module button:not(:disabled)):hover{
  background:var(--cyt-brand-600)!important;
  border-color:var(--cyt-brand-600)!important;
  color:#FFFFFF!important;
}

body :where(.button:not(.outline):not(.green):not(.danger):not(.violet)){
  background:var(--cyt-brand-700);
  border-color:var(--cyt-brand-700);
  color:#FFFFFF;
}

body :where(.button:not(.outline):not(.green):not(.danger):not(.violet)):hover{
  background:var(--cyt-brand-600);
  border-color:var(--cyt-brand-600);
  color:#FFFFFF;
}

body :where(.secondary,.btn:not(.primary):not(.green):not(.danger),.button.outline,.back){
  background:var(--cyt-surface)!important;
  border-color:var(--cyt-border-strong)!important;
  color:var(--cyt-ink-800)!important;
}

body :where(.btn.green,.button.green){
  background:var(--cyt-success)!important;
  border-color:var(--cyt-success)!important;
  color:#FFFFFF!important;
}

body :where(.btn.danger,.button.danger,.danger){
  border-color:#E7B9B9!important;
  background:var(--cyt-danger-bg)!important;
  color:var(--cyt-danger)!important;
}

body :where(.icon){
  min-width:36px;
  padding-inline:10px;
  background:transparent!important;
}

body :where(button,.btn,.button,input,select,textarea):disabled{
  cursor:not-allowed!important;
  background:var(--cyt-surface-sunken)!important;
  border-color:var(--cyt-border)!important;
  color:#687874!important;
  opacity:1!important;
}

/* Forms */
body label{
  color:var(--cyt-ink-650);
  font-size:var(--cyt-text-xs);
  font-weight:600;
}

body :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  width:100%;
  min-height:var(--cyt-control-standard)!important;
  border:1px solid var(--cyt-border)!important;
  border-radius:var(--cyt-radius-control)!important;
  background:var(--cyt-surface)!important;
  color:var(--cyt-ink-950)!important;
  padding:8px 11px!important;
  font-family:var(--cyt-font)!important;
  font-size:var(--cyt-text-md)!important;
  line-height:1.35;
}

body textarea{
  min-height:88px!important;
  resize:vertical;
}

body :where(input,select,textarea)::placeholder{
  color:#7A8D88;
  opacity:1;
}

body :where(input,select,textarea):hover{
  border-color:var(--cyt-border-strong)!important;
}

body :where(input,select,textarea):focus{
  border-color:var(--cyt-brand-700)!important;
}

body :where(.form,.formgrid,.fields){
  gap:12px!important;
}

body :where(.form,.formgrid,.fields) label{
  gap:5px!important;
}

/* Tables and dense data */
body :where(.table,.tablewrap){
  width:100%;
  overflow:auto;
  border-radius:var(--cyt-radius-panel);
  scrollbar-width:thin;
  scrollbar-color:var(--cyt-border-strong) transparent;
}

body table{
  width:100%;
  border-collapse:separate!important;
  border-spacing:0!important;
  border:1px solid var(--cyt-border)!important;
  border-radius:var(--cyt-radius-panel);
  background:var(--cyt-surface)!important;
  color:var(--cyt-ink-950);
  font-size:var(--cyt-text-sm)!important;
}

body thead th{
  position:sticky;
  top:0;
  z-index:1;
  height:40px;
  padding:9px 11px!important;
  border:0!important;
  border-bottom:1px solid var(--cyt-border)!important;
  background:var(--cyt-surface-subtle)!important;
  color:var(--cyt-ink-650)!important;
  text-align:left;
  font-size:var(--cyt-text-xs)!important;
  font-weight:700!important;
  letter-spacing:.01em;
  white-space:nowrap;
}

body tbody td{
  min-height:44px;
  padding:10px 11px!important;
  border:0!important;
  border-bottom:1px solid #E7ECE9!important;
  vertical-align:middle;
  background:var(--cyt-surface);
}

body tbody tr:last-child td{border-bottom:0!important}
body tbody tr:hover td{background:var(--cyt-brand-50)!important}
body :where(th.money,td.money,th.num,td.num){text-align:right!important}
body td :where(small,.muted){color:var(--cyt-ink-650)!important}

/* Feedback and states */
body :where(.tag,.badge){
  display:inline-flex;
  min-height:24px;
  align-items:center;
  gap:6px;
  border-radius:var(--cyt-radius-pill)!important;
  padding:3px 8px!important;
  background:var(--cyt-neutral-bg)!important;
  color:var(--cyt-neutral)!important;
  font-size:var(--cyt-text-xs)!important;
  font-weight:700!important;
  line-height:1.2;
}

body :where(.good,.paid,.success){
  color:var(--cyt-success)!important;
}

body :where(.pending,.warning){
  color:var(--cyt-warning)!important;
}

body :where(.bad,.error,.danger-text){
  color:var(--cyt-danger)!important;
}

body :where(.notice){
  border:1px solid #E6D2AF!important;
  border-left:3px solid var(--cyt-copper-600)!important;
  border-radius:var(--cyt-radius-control)!important;
  background:var(--cyt-warning-bg)!important;
  color:#654A23!important;
  padding:12px 14px!important;
  font-size:var(--cyt-text-sm)!important;
}

body :where(.status,.error,#err){
  min-height:18px;
  font-size:var(--cyt-text-xs)!important;
  font-weight:600!important;
}

body :where(.empty){
  border:1px dashed var(--cyt-border-strong)!important;
  border-radius:var(--cyt-radius-panel)!important;
  background:var(--cyt-surface-subtle)!important;
  color:var(--cyt-ink-650)!important;
  padding:24px!important;
  text-align:center;
}

/* Dialogs */
body dialog.dialog{
  width:min(720px,calc(100vw - 32px));
  max-height:90dvh;
  overflow:auto;
  border:1px solid var(--cyt-border)!important;
  border-radius:var(--cyt-radius-modal)!important;
  background:var(--cyt-surface)!important;
  color:var(--cyt-ink-950)!important;
  box-shadow:var(--cyt-modal-shadow)!important;
  padding:22px!important;
}

body dialog.dialog::backdrop{
  background:rgba(12,32,37,.48);
  backdrop-filter:none;
}

body .modal{
  background:rgba(12,32,37,.48)!important;
  padding:16px!important;
}

body .modal > .dialog,
body .dialog > .box,
body #modal.dialog > .box{
  border:1px solid var(--cyt-border)!important;
  border-radius:var(--cyt-radius-modal)!important;
  background:var(--cyt-surface)!important;
  box-shadow:var(--cyt-modal-shadow)!important;
}

body #modal.dialog:not([hidden]){
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(12,32,37,.48)!important;
}

/* Portal login */
body .login{
  width:min(440px,calc(100vw - 32px));
  margin:10dvh auto!important;
  padding:28px!important;
  border:1px solid var(--cyt-border)!important;
  border-top:3px solid var(--cyt-copper-600)!important;
  border-radius:var(--cyt-radius-panel)!important;
  background:var(--cyt-surface)!important;
  box-shadow:none!important;
}

body .login .brand{
  color:var(--cyt-ink-950)!important;
  font-size:24px!important;
  font-weight:700;
  letter-spacing:-.025em;
}

body .login .brand small{
  display:block;
  margin-top:4px;
  color:var(--cyt-ink-650)!important;
  font-size:11px!important;
  letter-spacing:.06em;
}

body a{color:var(--cyt-brand-700)}
body a:hover{color:var(--cyt-brand-600)}

/* Responsive */
@media (max-width:1279px){
  :root{--cyt-sidebar-width:var(--cyt-sidebar-compact)}
  body :where(.main,.workspace,.content){padding:24px!important}
}

@media (max-width:899px){
  body .shell,
  body .layout,
  body .app:has(> aside),
  body .app:has(> .side){
    grid-template-columns:1fr!important;
  }

  body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side){
    position:relative;
    width:100%!important;
    min-height:auto!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    padding:12px 16px!important;
  }

  body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(.brand){
    margin-bottom:10px!important;
    padding:4px 4px 10px!important;
  }

  body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(nav,.nav){
    display:flex!important;
    grid-template-columns:none!important;
    gap:6px!important;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    padding-bottom:4px;
  }

  body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(nav,.nav) button{
    width:auto!important;
    min-width:max-content;
    white-space:nowrap;
  }

  body :where(.shell > .side,.shell > aside,.layout > aside,.layout > .side,.app > aside,.app > .side) :where(footer,.source,.admin,.db-label){
    display:none!important;
  }

  body :where(.main,.workspace,.content){padding:20px!important}
  body :where(header.top,.top){display:block!important}
  body :where(header.top,.top) > :last-child{margin-top:14px}
  body :where(.selectors,.toolbar,.actions,.formactions,.modal-actions,.foot){
    flex-wrap:wrap;
    justify-content:flex-start!important;
    text-align:left!important;
    min-width:0!important;
  }
  body :where(.kpis,.stats){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body :where(.split,.admin-grid){grid-template-columns:1fr!important}
}

@media (max-width:639px){
  body :where(.main,.workspace,.content){padding:16px!important}
  body h1,
  body :where(header.top,.top) h1{font-size:24px!important}
  body :where(.form,.formgrid,.fields){grid-template-columns:1fr!important}
  body :where(.form,.formgrid,.fields) .wide{grid-column:auto!important}
  body :where(.kpis,.stats,.grid){grid-template-columns:1fr!important}
  body :where(button,.btn,.button,.primary,.secondary,.back,.icon,a.btn){
    min-height:var(--cyt-touch-target);
  }
  body :where(.selectors,.toolbar,.actions,.formactions,.modal-actions,.foot) > :where(button,.btn,.button,a.btn){
    max-width:100%;
  }
  body dialog.dialog,
  body .modal > .dialog,
  body #modal.dialog > .box{
    width:calc(100vw - 32px)!important;
    max-height:90dvh!important;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}