/* Ilaris shared page design.
   Banking is the master reference for cards, controls, panels and tables.
   This file changes presentation only; page content and behaviour stay native. */
:root{
  --ilaris-radius-sm:8px;
  --ilaris-radius:12px;
  --ilaris-radius-lg:16px;
  --ilaris-border:#dce6ee;
  --ilaris-row-border:#e7edf2;
  --ilaris-table-head:#f5f8fb;
  --ilaris-card-shadow:0 1px 2px rgba(16,43,69,.025),0 8px 24px rgba(16,43,69,.025);
  --ilaris-blue:#607fd8;
  --ilaris-purple:#8068c9;
  --ilaris-orange:#d99258;
  --ilaris-green:#4f9675;
  --ilaris-red:#ca6262;
  --ilaris-focus:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}

body{font-size:14px;line-height:1.45}
.app-shell{grid-template-columns:232px minmax(0,1fr)}
.sidebar{padding:22px 12px 18px}
.brand{padding:0 8px 22px}
.brand img{width:142px}
.nav-label{margin:17px 10px 7px;font-size:9px;letter-spacing:.14em}
.nav-item,.org-item,.org-module{min-height:40px;border-radius:9px;padding:9px 11px}
.org-subnav button{min-height:34px;border-radius:7px;padding:7px 9px}
.sidebar-footer{border-radius:10px}

.topbar{height:64px;padding:0 30px}
.command-input{height:40px;border-radius:9px}
.content{padding:30px;max-width:1540px}
.page-heading{align-items:flex-start;margin-bottom:18px}
.page-heading h1{font-size:28px;line-height:1.15;letter-spacing:-.035em;margin:3px 0 6px}
.page-heading p{font-size:13px;line-height:1.5;max-width:900px}

button,input,select,textarea{font:inherit}
button{transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
button:hover{transform:translateY(-1px)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:0!important;border-color:var(--accent)!important;box-shadow:var(--ilaris-focus)!important
}
input,select,textarea{
  min-height:38px;border:1px solid var(--ilaris-border)!important;
  border-radius:var(--ilaris-radius-sm)!important;background:#fff;color:var(--ink)
}
textarea{min-height:92px}
.primary,.secondary,.danger,.small-action,.toolbar button,.panel-title button{
  min-height:38px;border-radius:var(--ilaris-radius-sm)!important
}
.secondary{background:#fff!important;border:1px solid var(--ilaris-border)!important;color:var(--ink)!important}

/* Every page keeps its natural number of cards; the Banking card language is shared. */
.stat-grid,.summary-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px!important;
  margin-bottom:16px!important
}
.stat-card{
  position:relative!important;display:flex!important;flex-direction:column!important;
  min-width:0!important;min-height:118px!important;padding:17px 54px 15px 17px!important;
  border:1px solid var(--ilaris-border)!important;border-radius:var(--ilaris-radius)!important;
  background:#fff!important;box-shadow:var(--ilaris-card-shadow)!important;text-align:left!important
}
.stat-card:nth-child(5n+1){--card-tone:var(--ilaris-blue)}
.stat-card:nth-child(5n+2){--card-tone:var(--ilaris-purple)}
.stat-card:nth-child(5n+3){--card-tone:var(--ilaris-orange)}
.stat-card:nth-child(5n+4){--card-tone:var(--ilaris-green)}
.stat-card:nth-child(5n+5){--card-tone:var(--ilaris-red)}
.stat-card small{
  max-width:calc(100% - 40px);color:var(--card-tone,var(--accent))!important;
  font-size:8px!important;font-weight:800!important;letter-spacing:.045em!important
}
.stat-card strong{font-size:20px!important;line-height:1.15!important;margin:12px 0 5px!important}
.stat-card span{font-size:8.5px!important;line-height:1.4!important;color:var(--muted)!important}
.stat-card>i{
  position:absolute!important;top:17px!important;right:17px!important;
  display:grid!important;place-items:center!important;width:32px!important;height:32px!important;
  border-radius:50%!important;background:color-mix(in srgb,var(--card-tone,var(--accent)) 12%,white)!important;
  color:var(--card-tone,var(--accent))!important
}

/* Banking-style white surfaces are the standard on every page. */
.panel,.settings-panel,.cash-panel,.workspace-panel,.booking-panel,
.credit-accounts-list,.credit-activity-panel,.credit-account-card,.credit-account-strip,
.budget-table,.bookkeeping-widget,.admin-widget{
  border:1px solid var(--ilaris-border)!important;
  border-radius:var(--ilaris-radius)!important;
  background:#fff!important;
  box-shadow:var(--ilaris-card-shadow)!important
}
.panel{padding:18px}
.panel h2,.panel h3{letter-spacing:-.015em}

.toolbar,.filters,.search-panel,.search-bar,.form-panel{
  border:1px solid var(--ilaris-border)!important;border-radius:var(--ilaris-radius)!important;
  background:#fff!important;box-shadow:0 1px 2px rgba(16,43,69,.025)!important
}

.table-wrap,.table-shell,.data-table-wrap{
  overflow:auto;border:1px solid var(--ilaris-border);border-radius:var(--ilaris-radius);
  background:#fff;box-shadow:var(--ilaris-card-shadow)
}
table{border-collapse:separate;border-spacing:0}
th{position:sticky;top:0;z-index:1;background:var(--ilaris-table-head);font-size:11px;color:var(--muted);font-weight:700}
th,td{padding:12px 11px;border-bottom:1px solid var(--ilaris-row-border)}
tbody tr:hover td{background:#f8fbfd}
.badge,.status,.status-pill,.chip{border-radius:999px!important;padding:5px 9px!important}

/* Forms, pop-ups and detail views use the same surface treatment. */
.detail-backdrop,.modal-backdrop{backdrop-filter:blur(3px)}
.detail-modal,.modal,.dialog{
  border:1px solid var(--ilaris-border)!important;border-radius:var(--ilaris-radius-lg)!important;
  box-shadow:0 24px 70px rgba(8,29,47,.22)!important
}
.detail-head,.modal-head{padding:18px 22px!important}
.detail-body,.modal-body{padding:22px!important}
.detail-foot,.modal-foot{padding:15px 22px!important;background:#f7f9fb}

.cash-account-icon,.cash-category-icon,.bank-icon{
  display:inline-grid!important;place-items:center;width:30px;height:30px;
  border-radius:8px;background:var(--soft);color:var(--accent)
}
.cash-transfer,.cash-transfer-panel,.cash-inline-transfer,
.cash-reconciliation,.cash-reconciliation-panel{
  border:1px solid var(--ilaris-border)!important;border-radius:var(--ilaris-radius)!important;
  background:#fff!important;box-shadow:var(--ilaris-card-shadow)!important
}
.cash-transfer-grid,.cash-inline-transfer-form{
  display:grid!important;grid-template-columns:minmax(210px,1fr) minmax(210px,1fr) minmax(120px,.45fr) auto;
  gap:14px!important;align-items:end
}
.use-with-caution{color:var(--ilaris-orange)!important;font-weight:700}
.empty-state{border-radius:var(--ilaris-radius-lg);padding:64px 28px}
.notice,.alert,.success,.warning,.error{border-radius:var(--ilaris-radius)!important}

@media(max-width:1100px){
  .stat-grid,.summary-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cash-transfer-grid,.cash-inline-transfer-form{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .app-shell{display:block}.content{padding:20px 14px}.topbar{padding:0 13px}
  .page-heading h1{font-size:24px}
  .cash-transfer-grid,.cash-inline-transfer-form{grid-template-columns:1fr}
  .detail-modal,.modal,.dialog{width:min(100%,calc(100vw - 20px))!important}
}
@media(max-width:520px){
  .stat-grid,.summary-card-grid{grid-template-columns:1fr}
}

/* My Command Centre cards contain longer operational messages than bookkeeping totals. */
.master-status-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch;
}
.master-status{
  width:100%!important;
  min-height:134px!important;
  padding:18px 52px 17px 18px!important;
  overflow:hidden!important;
  cursor:pointer!important;
}
.master-status>div{min-width:0!important;width:100%!important}
.master-status strong{
  display:block!important;
  max-width:100%!important;
  margin:12px 0 6px!important;
  font-size:17px!important;
  line-height:1.22!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.master-status span{
  display:block!important;
  max-width:100%!important;
  line-height:1.35!important;
  white-space:normal!important;
}
.master-status:hover{border-color:color-mix(in srgb,var(--card-tone,var(--accent)) 36%,var(--ilaris-border))!important}
@media(max-width:1250px){
  .master-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  .master-status-grid{grid-template-columns:1fr!important}
}