:root{
  --shell-bg:#f3f7fc;
  --shell-surface:#ffffff;
  --shell-sidebar:#f7faff;
  --shell-border:#dfe7f1;
  --shell-shadow:0 10px 26px rgba(15, 23, 42, .045);
  --shell-text:#1b2738;
  --shell-muted:#6b7a92;
  --shell-accent:#2b5fb3;
  --shell-accent-soft:#edf3ff;
  --shell-radius:14px;
  --shell-sidebar-expanded-width:238px;
  --shell-sidebar-collapsed-width:82px;
  --shell-sidebar-width:var(--shell-sidebar-expanded-width);
}

body{
  min-height:100vh;
}

body.app-shell-body.app-shell-sidebar-collapsed{
  --shell-sidebar-width:var(--shell-sidebar-collapsed-width);
}

body.app-shell-body{
  margin:0;
  color:var(--shell-text);
  background:
    radial-gradient(1200px 620px at 98% -18%, rgba(215, 229, 249, .45), rgba(215, 229, 249, 0) 60%),
    linear-gradient(180deg, #f8fbff 0%, var(--shell-bg) 100%);
  font-family:"Manrope","Avenir Next","Segoe UI",sans-serif;
}

body.auth-shell-body{
  margin:0;
  color:var(--shell-text);
  background:linear-gradient(180deg, #f8fbff 0%, var(--shell-bg) 100%);
  font-family:"Manrope","Avenir Next","Segoe UI",sans-serif;
}

.app-shell{
  min-height:100vh;
}

.app-shell-sidebar{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--shell-sidebar-width);
  background:linear-gradient(180deg, #fbfdff 0%, var(--shell-sidebar) 100%);
  border-right:1px solid var(--shell-border);
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1rem .76rem 1rem;
  transition:width .2s ease,padding .2s ease;
  overflow-x:hidden;
  overflow-y:auto;
}

.app-shell-sidebar-header{
  display:flex;
  flex-direction:column;
  gap:.56rem;
}

.app-shell-brand-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.42rem;
}

.app-shell-brand{
  display:flex;
  align-items:center;
  gap:.56rem;
  min-width:0;
  color:var(--shell-text);
  text-decoration:none;
}

.app-shell-brand-mark{
  width:34px;
  height:34px;
  border-radius:10px;
  display:block;
  flex-shrink:0;
}

.app-shell-brand-text{
  font-size:.94rem;
  font-weight:680;
  line-height:1.2;
  letter-spacing:.012em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-shell-sidebar-toggle{
  width:30px;
  height:30px;
  align-self:flex-end;
  border:1px solid #d5dfed;
  border-radius:10px;
  background:#ffffff;
  box-shadow:0 4px 10px rgba(15, 23, 42, .04);
  color:#405472;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.app-shell-sidebar-toggle:hover{
  background:#edf3ff;
  border-color:#c7d5ea;
  box-shadow:0 6px 14px rgba(15, 23, 42, .07);
  color:#224f98;
}

.app-shell-sidebar-toggle-icon{
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(135deg);
  transition:transform .15s ease;
}

/* Expanded = left caret (collapse action), Collapsed = right caret (expand action). */
body.app-shell-body.app-shell-sidebar-collapsed .app-shell-sidebar-toggle-icon{
  transform:rotate(-45deg);
}

.app-shell-nav{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  min-height:0;
}

.app-shell-nav-group-label{
  color:var(--shell-muted);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  margin:.2rem .5rem .25rem;
  font-weight:600;
  opacity:.78;
}

.app-shell-nav-primary{
  display:flex;
  flex-direction:column;
  gap:.22rem;
}

.app-shell-nav-collapsed-groups{
  display:none;
  flex-direction:column;
  gap:.22rem;
}

.app-shell-nav-link{
  position:relative;
  border-radius:10px;
  color:#27364a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.92rem;
  font-weight:575;
  line-height:1.2;
  min-height:2.2rem;
  padding:.48rem .68rem;
  border:0;
  background:transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}

.app-shell-nav-link:hover{
  background:#f2f7ff;
  color:#2b5fb3;
}

.app-shell-nav-link.is-active{
  background:var(--shell-accent-soft);
  color:#224f98;
  box-shadow:inset 0 0 0 1px rgba(43, 95, 179, .12);
}

.app-shell-nav-link.is-active::before{
  content:"";
  position:absolute;
  left:.26rem;
  top:.42rem;
  bottom:.42rem;
  width:2px;
  border-radius:2px;
  background:currentColor;
  opacity:.7;
}

.app-shell-nav-link-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-shell-nav-link-collapsed-label{
  display:none;
}

.app-shell-nav-collapsed-icon{
  width:1rem;
  height:1rem;
  stroke-width:2.2;
}

.app-shell-nav-expandable{
  display:flex;
  flex-direction:column;
  gap:.16rem;
}

.app-shell-group-toggle,
.app-shell-account-toggle{
  position:relative;
  width:100%;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#2e3f59;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.91rem;
  font-weight:600;
  line-height:1.2;
  min-height:2.2rem;
  padding:.5rem .68rem;
  text-align:left;
  transition:background-color .18s ease,color .18s ease;
}

.app-shell-group-toggle:hover,
.app-shell-account-toggle:hover{
  background:#f2f7ff;
  color:#224f98;
}

.app-shell-group-toggle.is-active,
.app-shell-account-toggle.is-active{
  color:#1f4f97;
}

.app-shell-chevron{
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform .16s ease;
}

[data-group-container].is-open .app-shell-chevron{
  transform:rotate(-135deg) translateY(-1px);
}

/* My Account expands upward from the footer, so invert the action cue:
   closed = up (opens upward), open = down (collapses downward). */
.app-shell-account-menu .app-shell-chevron{
  transform:rotate(-135deg) translateY(-1px);
}

.app-shell-account-menu.is-open .app-shell-chevron{
  transform:rotate(45deg) translateY(-1px);
}

.app-shell-subnav,
.app-shell-account-panel{
  display:none;
  flex-direction:column;
  gap:.13rem;
  padding:0 0 0 .52rem;
}

[data-group-container].is-open .app-shell-subnav,
[data-group-container].is-open .app-shell-account-panel{
  display:flex;
}

.app-shell-subnav-link,
.app-shell-account-item{
  position:relative;
  border-radius:8px;
  border:0;
  background:transparent;
  color:#51627e;
  display:block;
  font-size:.84rem;
  font-weight:540;
  line-height:1.2;
  padding:.42rem .58rem .42rem .68rem;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}

.app-shell-subnav-link:hover,
.app-shell-account-item:hover{
  background:#f3f7ff;
  color:#224f98;
}

.app-shell-subnav-link.is-active,
.app-shell-account-item.is-active{
  background:#edf3ff;
  color:#224f98;
  box-shadow:inset 0 0 0 1px rgba(43, 95, 179, .12);
}

.app-shell-subnav-link.is-active::before,
.app-shell-account-item.is-active::before{
  content:"";
  position:absolute;
  left:.27rem;
  top:.36rem;
  bottom:.36rem;
  width:2px;
  border-radius:2px;
  background:currentColor;
  opacity:.7;
}

.app-shell-account-item-button{
  width:100%;
}

.app-shell-account-logout-form{
  margin:0;
}

.app-shell-nav-admin{
  margin-top:.12rem;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}

.app-shell-nav-link-admin{
  color:#334661;
  font-size:.85rem;
  font-weight:560;
  min-height:2.06rem;
}

.app-shell-sidebar-footer{
  margin-top:auto;
  padding:.22rem .18rem .1rem;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

.app-shell-account-menu{
  display:flex;
  flex-direction:column;
  gap:.16rem;
}

.app-shell-account-collapsed-trigger{
  display:none;
  width:100%;
  min-height:2.35rem;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#2d4c80;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}

.app-shell-account-collapsed-trigger:hover{
  background:#edf3ff;
  color:#1f4f97;
}

.app-shell-account-collapsed-avatar{
  width:2.2rem;
  height:2.2rem;
  border-radius:10px;
  border:1px solid #d7e1ef;
  background:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.04rem;
  box-shadow:0 6px 14px rgba(15,23,42,.04);
}

.app-shell-topbar-context{
  display:block;
  margin:0;
  color:#6f809b;
  font-size:.78rem;
  font-weight:560;
  line-height:1.2;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-collapsed-hidden{
  display:none !important;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-nav-collapsed-groups{
  display:flex;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-brand{
  justify-content:center;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-brand-text{
  display:none;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-brand-row{
  width:100%;
  justify-content:center;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-nav-link-primary{
  width:2.2rem;
  height:2.2rem;
  min-height:2.2rem;
  margin:0 auto;
  padding:0;
  justify-content:center;
  border-radius:11px;
  border:1px solid transparent;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-nav-link-primary .app-shell-nav-link-label{
  display:none;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-nav-link-collapsed-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.01em;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-nav-link-primary:hover{
  border-color:#d4dff0;
  background:#f2f7ff;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-nav-link-primary.is-active{
  border-color:#cddcf2;
  background:#e9f1ff;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-nav-link-primary.is-active::before{
  left:.2rem;
  top:.4rem;
  bottom:.4rem;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-account-collapsed-trigger{
  display:inline-flex;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-sidebar-footer{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding-top:.3rem;
}

body.app-shell-body.app-shell-sidebar-collapsed .app-shell-sidebar-toggle{
  align-self:center;
}

.app-shell-nav-link:focus-visible,
.app-shell-group-toggle:focus-visible,
.app-shell-account-toggle:focus-visible,
.app-shell-subnav-link:focus-visible,
.app-shell-account-item:focus-visible,
.app-shell-sidebar-toggle:focus-visible,
.app-shell-account-collapsed-trigger:focus-visible{
  outline:2px solid #89aee8;
  outline-offset:2px;
}

.app-shell-sidebar-toggle:focus-visible{
  border-color:#8eaee0;
  box-shadow:0 0 0 3px rgba(66, 120, 210, .18);
}

.app-shell-main{
  margin-left:var(--shell-sidebar-width);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.app-shell-topbar{
  height:60px;
  background:rgba(255, 255, 255, .56);
  backdrop-filter:blur(6px);
  border-bottom:1px solid #e8eef6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.1rem;
  padding:0 1.65rem;
}

.app-shell-title-block{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  min-width:0;
}

.app-shell-title{
  margin:0;
  color:#17263a;
  font-size:1rem;
  font-weight:650;
  line-height:1.2;
}

.app-shell-topbar-actions{
  min-width:140px;
  min-height:1.5rem;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.app-shell-content{
  flex:1;
  padding:1.45rem;
}

.app-shell-content-max{
  width:min(1140px, 100%);
  margin:0 auto;
}

body.app-shell-body.app-shell-body-wide .app-shell-content-max{
  width:min(1460px, 100%);
}

.app-shell-content-slot{
  background:rgba(255, 255, 255, .82);
  border:1px solid #e9eff7;
  border-radius:var(--shell-radius);
  box-shadow:var(--shell-shadow);
  padding:1.5rem;
}

.auth-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.auth-shell-main{
  width:100%;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}

.auth-shell-content-max{
  width:min(1060px, 100%);
  margin:0 auto;
}

.app-shell-footer{
  color:var(--shell-muted);
  text-align:center;
  font-size:.78rem;
  padding:1rem 1rem 1.1rem;
}

@media (max-width: 860px){
  .app-shell-sidebar{
    position:static;
    width:100%;
    border-right:0;
    border-bottom:1px solid var(--shell-border);
    padding-bottom:.8rem;
  }

  .app-shell-sidebar-toggle{
    display:none;
  }

  .app-shell-main{
    margin-left:0;
    min-height:auto;
  }

  .app-shell-topbar{
    padding:0 1rem;
  }

  .app-shell-content{
    padding:1rem;
  }

  .app-shell-content-slot{
    padding:1rem;
  }
}

.table-primary-subtle thead,
thead.table-primary-subtle{
  background-color:var(--bs-primary-bg-subtle);
}

.row-actions{
  opacity:0;
  transition:opacity .15s;
  white-space:nowrap;
}

tr:hover .row-actions{
  opacity:1;
}

.row-actions.is-active{
  opacity:1;
}

.cursor-pointer{
  cursor:pointer;
}

.badge-sm{
  font-size:.65rem;
  line-height:1;
  padding:.15rem .45rem;
}

.bg-purple{background-color:#6f42c1!important;color:#fff!important}
.bg-purple-100{background-color:#f1e7ff!important;color:#2e1b55!important}
.bg-violet-speculative{background-color:#a855f7!important;color:#fff!important}
.bg-cyan{background-color:#0dcaf0!important;color:#052c39!important}
.bg-cyan-100{background-color:#cff4fc!important;color:#083344!important}
.bg-blue-speculative{background-color:#2563eb!important;color:#fff!important}
.bg-teal-100{background-color:#d2f4ea!important;color:#0f5132!important}

.tag-with-weight .badge-sm{
  background-color:var(--bs-primary);
  color:#fff;
  border:1px solid var(--bs-primary);
}

/* Action button (doc-defined): uses info subtle palette */
.btn-action{
  --bs-btn-color:var(--bs-info-text-emphasis);
  --bs-btn-bg:var(--bs-info-bg-subtle);
  --bs-btn-border-color:var(--bs-info-border-subtle);
  --bs-btn-hover-color:var(--bs-info-text-emphasis);
  --bs-btn-hover-bg:var(--bs-info-bg-subtle);
  --bs-btn-hover-border-color:var(--bs-info-border-subtle);
  --bs-btn-active-color:var(--bs-info-text-emphasis);
  --bs-btn-active-bg:var(--bs-info-bg-subtle);
  --bs-btn-active-border-color:var(--bs-info-border-subtle);
  --bs-btn-disabled-color:var(--bs-info-text-emphasis);
  --bs-btn-disabled-bg:var(--bs-info-bg-subtle);
  --bs-btn-disabled-border-color:var(--bs-info-border-subtle);
}


/* Disabled delete icon styling (no border, disabled look) */
.icon-delete-row-disabled{
  opacity: .65;
  cursor: not-allowed;
  border: 0;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
}

/* Shared dark hover-over style for Bootstrap tooltips/popovers. */
.tooltip-dark{
  --bs-tooltip-bg:#0f172a;
  --bs-tooltip-color:#f8fafc;
  --bs-tooltip-opacity:1;
}

.tooltip-dark .tooltip-inner{
  text-align:center;
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 10px 20px rgba(2, 6, 23, .35);
}

.tooltip-dark .tooltip-inner strong{
  color:inherit;
}

.tooltip-sm{
  --bs-tooltip-font-size:.72rem;
}

.popover-dark{
  --bs-popover-bg:#0f172a;
  --bs-popover-border-color:rgba(148,163,184,.28);
  --bs-popover-header-bg:#0b1220;
  --bs-popover-header-color:#e2e8f0;
  --bs-popover-body-color:#f8fafc;
  --bs-popover-box-shadow:0 10px 24px rgba(2, 6, 23, .36);
}

.tooltip-anchor{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.25rem;
}

.tooltip-nowrap .tooltip-inner {
  white-space: pre;
  max-width: none;
}

.projection-modal{
  font-size:.95rem;
  color:#1f2937;
}
.projection-heading{
  margin-bottom:1rem;
}
.projection-summary strong{
  font-weight:600;
}
.projection-section{
  margin-top:1.5rem;
}
.projection-section-header h3{
  margin-bottom:.35rem;
}
.projection-meta{
  color:#475569;
  font-size:.85rem;
}
.projection-lever-grid{
  margin-top:.75rem;
  display:grid;
  gap:.5rem 1rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.projection-lever{
  border:1px solid #e2e8f0;
  border-radius:.25rem;
  padding:.35rem .5rem;
  background:#f7f9fc;
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  font-size:.85rem;
}
.projection-lever-label{
  font-weight:600;
}
.projection-steps{
  border-left:4px solid #3b82f6;
  padding-left:1rem;
}
.projection-step{
  margin:1rem 0;
}
.projection-step h4{
  font-size:1rem;
  margin-bottom:.35rem;
}
.projection-formula{
  font-family:var(--bs-font-monospace,ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace);
  background:#f8fafc;
  border:1px dashed #cbd5f5;
  padding:.65rem;
  border-radius:.25rem;
  font-size:.85rem;
  white-space:pre-wrap;
}
.projection-formula-inline{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
}
.projection-table{
  width:100%;
  border-collapse:collapse;
  margin-top:.5rem;
  font-size:.85rem;
}
.projection-table th,
.projection-table td{
  border:1px solid #e2e8f0;
  padding:.4rem .5rem;
  text-align:left;
}
.projection-modal-link{
  border:0;
  background:none;
  padding:0;
  margin:0;
  color:inherit;
  text-decoration:underline;
  cursor:pointer;
  font:inherit;
}
.projection-modal-link:focus-visible{
  outline:2px dashed currentColor;
  outline-offset:2px;
}
.projection-modal-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding:2rem 0;
}