/* Portal right-column rebalance: hierarchy + spacing */

.portal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  width: 100%;
}

.portal-card {
  padding: 16px;
  border-radius: 18px;
  max-width: 100%;
  overflow: hidden;
}

.portal-card.is-primary {
  padding: 18px;
}

.portal-card.is-secondary {
  opacity: 0.95;
}

.portal-card.is-footer {
  grid-column: 1 / -1;
  padding: 14px 16px;
}

.portal-card .card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}

.portal-card .card-subtitle {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 12px;
}

.portal-card .card-actions {
  display: grid;
  gap: 10px;
}

.portal-card button,
.portal-card .btn {
  width: 100%;
  white-space: normal;
}

@media (max-width: 900px) {
  .portal-actions {
    grid-template-columns: 1fr;
  }
  .portal-card.is-footer {
    grid-column: auto;
  }
}


/* Overflow containment hardening */
#portal-view, .sbcr3-portal, .sbcr3-shell, .sbcr3-wrap {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.portal-actions {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.portal-actions > * {
  min-width: 0; /* critical: allow grid items to shrink instead of overflowing */
}

.portal-card, .sbcr3-card {
  min-width: 0;
  box-sizing: border-box;
}

/* Make sure buttons/links never force card width */
.portal-card a,
.portal-card button,
.sbcr3-card a,
.sbcr3-card button {
  max-width: 100%;
  box-sizing: border-box;
}

/* If any long strings appear, allow wrapping */
.portal-card,
.sbcr3-card {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Safety valve: prevent horizontal scroll within portal area */
#portal, #portal-view {
  overflow-x: hidden;
}


/* Rebuilt rebalance overrides (ensure our grid rules win) */
.portal-actions{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.portal-card.is-footer{
  grid-column: 1 / -1 !important;
}


/* Sleek dashboard tweaks */
.sbcr3-pendingbar { padding: 16px; }
.sbcr3-pendingbar-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sbcr3-k { font-size: 14px; letter-spacing: .2px; opacity: .92; }
.sbcr3-apptitle { font-size: 16px; }

.sbcr3-pendinglist { display:grid; gap:10px; }
.sbcr3-pendingitem {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.02);
}
.sbcr3-pendingitem-top { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.sbcr3-pendingitem-title { font-weight: 750; text-transform: capitalize; }
.sbcr3-pendingitem-amt { font-weight: 800; }
.sbcr3-pendingitem-sub { margin-top:6px; }
.sbcr3-pendingitem-chips { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* Buttons: slightly slimmer + consistent */
.sbcr3-btn, .sbcr3-btn-primary, .sbcr3-btn-ghost {
  border-radius: 14px;
  padding: 10px 12px;
  line-height: 1.1;
}

/* Mini button variant (used for per-row receipt printing links) */
.sbcr3-btn-mini{
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.1;
}

/* Right column: a bit more breathing room */
.portal-actions { gap: 14px; }
.portal-card { padding: 16px; }
.portal-card.is-primary { padding: 16px; }
.portal-card .card-title { font-size: 14px; }
.portal-card .card-subtitle { font-size: 12.5px; }

/* Recent activity footer: compact */
.portal-card.is-footer { padding: 12px 14px; }


/* === Status badge colors (read-only UI) === */
.sbcr3-chip{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}

.sbcr3-chip-mini{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.2;
}

.sbcr3-chip-paid,
.sbcr3-chip-approved{
  background: rgba(46, 204, 113, .16);
  border-color: rgba(46, 204, 113, .30);
}

.sbcr3-chip-pending,
.sbcr3-chip-submitted{
  background: rgba(241, 196, 15, .16);
  border-color: rgba(241, 196, 15, .30);
}

.sbcr3-chip-rejected,
.sbcr3-chip-failed{
  background: rgba(231, 76, 60, .16);
  border-color: rgba(231, 76, 60, .30);
}

/* Method chips */
.sbcr3-chip-method{
  background: rgba(52, 152, 219, .14);
  border-color: rgba(52, 152, 219, .26);
}

/* Keep existing warn chip compatible */
.sbcr3-chip-warn{
  background: rgba(241, 196, 15, .16);
  border-color: rgba(241, 196, 15, .30);
}


/* === Activity power filters (client-side only) === */
.sbcr3-act-power{
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  padding: 10px 0 14px;
}
.sbcr3-act-power-left{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  flex: 1;
  min-width: 260px;
}
.sbcr3-act-power-right{
  display:flex;
  gap:10px;
  align-items:center;
}


/* === Micro-animations (safe CSS only) === */
.sbcr3-card, .sbcr3-soft, .sbcr3-wrap {
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

/* Activity rows: animate filter hide/show */
.sbcr3-rrow{
  transition: opacity .12s ease, transform .12s ease, max-height .12s ease;
  will-change: opacity, transform;
}
.sbcr3-rrow.is-filtered-out{
  opacity: 0;
  transform: translateY(4px);
  max-height: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}


/* Dashboard inline grid support */
@media (max-width: 900px){
  .sbcr3-summary-cards[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  .sbcr3-grid.sbcr3-grid-2x2.portal-actions[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
}


/* === Pending approvals compact rows === */
.sbcr3-pendinglist{ display:flex; flex-direction:column; gap:10px; }

.sbcr3-pendingrow{
  display:grid;
  grid-template-columns: 1.2fr 1.6fr .9fr auto;
  gap: 10px;
  align-items:center;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.sbcr3-pr-title{ font-weight: 900; }
.sbcr3-pr-sub{ font-size: 12px; opacity: .8; margin-top: 2px; }
.sbcr3-pr-label{ font-size: 11px; letter-spacing: .4px; opacity: .7; text-transform: uppercase; }
.sbcr3-pr-value{ font-weight: 800; margin-top: 2px; }
.sbcr3-pr-amt .sbcr3-pr-value{ font-size: 16px; }

@media (max-width: 900px){
  .sbcr3-pendingrow{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "type status"
      "date date"
      "amt amt";
  }
  .sbcr3-pr-type{ grid-area: type; }
  .sbcr3-pr-status{ grid-area: status; justify-self:end; }
  .sbcr3-pr-date{ grid-area: date; }
  .sbcr3-pr-amt{ grid-area: amt; }
}


/* === Settings UI (safe, no-save) === */
.sbcr3-settings-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sbcr3-settings-card{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 12px 12px 14px;
}
.sbcr3-field{ margin-top: 10px; }
.sbcr3-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 8px 0;
  opacity: .85;
}
.sbcr3-check input{ margin-top: 3px; }
@media (max-width: 900px){
  .sbcr3-settings-grid{ grid-template-columns: 1fr; }
}


/* === Payments billing center (safe UI) === */
.sbcr3-paygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.sbcr3-paycard{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:18px;padding:12px 12px 14px;min-height:120px;}
.sbcr3-paybig{font-size:28px;font-weight:950;margin-top:8px;line-height:1.05;}
.sbcr3-payrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.sbcr3-paygrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
@media (max-width: 980px){.sbcr3-paygrid{grid-template-columns:1fr;}.sbcr3-paygrid2{grid-template-columns:1fr;}}


/* Ledger (History) power filters */
.sbcr3-ledger-power.is-custom .sbcr3-ledger-custom{display:block !important;}


/* === Ledger Trust Pack (read-only polish) === */
.sbcr3-ledger-summary-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.sbcr3-ledger-range{
  font-size:16px;
  font-weight:900;
  letter-spacing:.2px;
}
.sbcr3-ledger-summary-right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.sbcr3-ledger-metric{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 10px 12px;
  min-width: 140px;
}
.sbcr3-ledger-metric-label{
  font-size:12px;
  opacity:.8;
}
.sbcr3-ledger-metric-value{
  font-size:18px;
  font-weight:950;
  margin-top:2px;
}
.sbcr3-ledger-metric.sbcr3-paid{ }
.sbcr3-ledger-metric.sbcr3-pending{ }
.sbcr3-ledger-metric.sbcr3-rejected{ }

.sbcr3-ledger-power .sbcr3-act-power{
  position: sticky;
  top: 10px;
  z-index: 20;
  /* Match dashboard surface cards (avoid the “black slab” look) */
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  padding: 12px;
}

/* Ledger filter bar: make controls feel like the rest of the portal */
.sbcr3-ledger-power .sbcr3-act-power-left{
  gap: 12px;
}
.sbcr3-ledger-power .sbcr3-act-power-left label{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sbcr3-ledger-power .sbcr3-act-power-right{
  gap: 10px;
}

/* Tighten the table header so it matches other tables */
.sbcr3-ledger-table thead th{
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.sbcr3-ledger-table tbody tr:nth-child(even){
  background: rgba(255,255,255,.02);
}
.sbcr3-ledger-table tbody tr:hover{
  background: rgba(255,255,255,.05);
}
.sbcr3-ledger-table tbody tr.is-filtered-out{
  display:none;
}

.sbcr3-ledger-table thead th.sbcr3-sortable{
  cursor:pointer;
  user-select:none;
}
.sbcr3-ledger-table thead th.sbcr3-sortable .sbcr3-sort-ind{
  display:inline-block;
  margin-left:6px;
  opacity:.65;
}
.sbcr3-ledger-table thead th.sbcr3-sortable.is-asc .sbcr3-sort-ind::before{ content:"▲"; }
.sbcr3-ledger-table thead th.sbcr3-sortable.is-desc .sbcr3-sort-ind::before{ content:"▼"; }

@media (max-width: 900px){
  .sbcr3-ledger-metric{ min-width: 120px; }
}

@media (max-width: 720px){
  /* Sticky filter bars get chunky on small screens; keep it clean */
  .sbcr3-ledger-power .sbcr3-act-power{ position: relative; top: auto; box-shadow: none; }
  .sbcr3-ledger-power .sbcr3-act-power-left{ gap: 10px; }
  .sbcr3-ledger-power .sbcr3-act-power-left label{ min-width: 0; }
  .sbcr3-ledger-power .sbcr3-act-power-right{ width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .sbcr3-ledger-power .sbcr3-act-power-right .sbcr3-btn{ flex: 1 1 48%; justify-content:center; }
}

@media print{
  .sbcr3-ledger-power, .sbcr3-btn, .sbcr3-act-power-right button{ display:none !important; }
  .sbcr3-col-receipt{ display:none !important; }
  .sbcr3-ledger-summary{ padding-top:0 !important; }
  .sbcr3-wrap, .sbcr3-card{ box-shadow:none !important; background:#fff !important; color:#000 !important; }
  .sbcr3-ledger-table{ min-width:0 !important; }
  .sbcr3-ledger-table th, .sbcr3-ledger-table td{ color:#000 !important; }
  .sbcr3-ledger-table tbody tr{ page-break-inside: avoid; }
  .sbcr3-col-receipt{ display:none !important; }
}



/* === Flat dashboard surface (global): remove stacked panels, keep inner cards === */
:root{ --sbcr3-flat-gap: 14px; }

.sbcr3-shell{ background: transparent !important; }

/* Outer portal container card (login + main router wrapper) */
.sbcr3-shell > .sbcr3-card.sbcr3-center{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* Per-tab wrapper card (the one that created the “panel-in-panel” look) */
.sbcr3-wrap > .sbcr3-card.sbcr3-soft{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* Keep spacing consistent now that wrappers are flat */
.sbcr3-wrap{ padding-top: 6px; }


/* v3.2.4 Calm + Guidance */
.sbcr3-dot-new{
  display:inline-block;
  width:10px;height:10px;
  border-radius:999px;
  margin-left:8px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
  vertical-align: middle;
}
.sbcr3-ledger-detailbox{
  padding:12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}
.sbcr3-ledger-detailgrid{
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:10px 14px;
}
tr.sbcr3-ledger-group td{
  padding:12px 10px;
  font-weight:600;
  letter-spacing:.2px;
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.10);
}
tr.sbcr3-ledger-subtotal td{
  padding:10px 10px;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.sbcr3-ledger-subtotals{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.sbcr3-statement-mode .sbcr3-ledger-power{ display:none !important; }
.sbcr3-statement-mode .sbcr3-col-receipt{ display:none !important; }
.sbcr3-statement-mode .sbcr3-ledger-detail{ display:none !important; }

.sbcr3-statement-action{ display:none; }
.sbcr3-statement-mode .sbcr3-statement-action{ display:inline-flex; }
.sbcr3-statement-toggle{ display:none; }
.sbcr3-statement-mode .sbcr3-statement-toggle{ display:inline-flex; }