/*
  App styles – relies on public/assets/css/tokens.css for the actual token values.
  Keep this file focused on components and layout, not theme color definitions.
*/

html, body { height: 100%; overflow: hidden; }
body{
  background: var(--app-bg);
  font-family: var(--app-font-family);
  font-size: var(--app-font-size);
  color: var(--app-text);
}

/* App Shell */
/* Use a fixed viewport height so the footer never disappears (body does not scroll). */
.app-shell{ height: 100vh; display:flex; flex-direction: column; }
.app-sidebar{
  width: var(--app-sidebar-width);
  flex: 0 0 var(--app-sidebar-width);
  min-width: var(--app-sidebar-width);
  flex-shrink: 0;
  background: var(--app-sidebar-bg, var(--app-surface));
  border-right: 1px solid var(--app-sidebar-border, var(--app-border));
  position: relative; /* needed for grip handles */
  /* Sidebar sits BETWEEN header and footer. No sticky offset needed here. */
  height: 100%;
  overflow-y: hidden;
  overflow-x: visible;
  align-self: stretch;
}
.app-body{
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  overflow: hidden;
  /* lock the content area between topbar and footer */
  height: calc(100vh - var(--app-topbar-height) - var(--app-footer-height));
}
.app-logo{ height: 32px; width:auto; display:block; }

.app-topbar{
  height: var(--app-topbar-height);
  background: color-mix(in srgb, var(--app-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--app-border);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.app-main{ flex: 1 1 auto; min-width: 0; padding: 18px 18px 24px 18px; overflow: auto; height: 100%; }
.app-main.no-scroll{ overflow: hidden; }

/* Explorer layout: keep the page itself non-scrolling; only panels scroll internally */
.explorer-page{ height: 100%; min-height: 0; display:flex; flex-direction:column; }

/*
  The panels need a real height constraint; otherwise the tree card grows with its content
  and the inner scroll container never overflows.
*/
.explorer-panels{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display:flex;
  flex-direction: column;
  gap: 1rem;
}

.explorer-col{ min-height: 0; }

@media (min-width: 992px){
  .explorer-panels{ flex-direction: row; }
  .explorer-col-left{ flex: 0 0 34%; max-width: 34%; }
  .explorer-col-right{ flex: 1 1 auto; }
}

.explorer-tree-card{ min-height: 0; }
.explorer-tree-card .card-body{ flex: 1 1 auto; min-height: 0; overflow: hidden; }
.explorer-tree-scroll{ flex: 1 1 auto; min-height: 0; overflow: auto; }

.explorer-search-results{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  max-height: 280px;
  overflow: auto;
}

.explorer-search-results .list-group-item{
  border-left: 0;
  border-right: 0;
}

.app-footer{
  border-top: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-surface) 94%, transparent);
  height: var(--app-footer-height);
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 1020;
}
.app-footer .container-fluid{ height: 100%; align-items: center; }

/* Sidebar */
.sidebar-brand{
  padding: 16px 16px 10px 16px;
  border-bottom: 1px solid var(--app-border);
}
.sidebar-brand .brand-logo{ height: 28px; width:auto; }
.sidebar-nav{ padding: 8px; height: 100%; overflow-y: auto; overflow-x: hidden; }
.sidebar-section{ margin-top: 6px; }
.sidebar-section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Sidebar grip handles */
.sidebar-grip{
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: pointer;
  background: transparent;
}
.sidebar-grip:hover{ background: rgba(0,0,0,.03); }

.sidebar-midgrip{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 10px;
  height: 72px;
  border-radius: 10px 0 0 10px;
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.10);
  cursor: pointer;
  z-index: 6;
}
.sidebar-midgrip:hover{ background: rgba(0,0,0,.12); }
.sidebar-midgrip:focus{
  outline: 2px solid rgba(13,110,253,.6);
  outline-offset: 2px;
}
.sidebar-collapse-btn{
  width: 32px;
  height: 32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  color: rgba(var(--app-text-rgb), .70);
  border-radius: 12px;
  padding: 0;
}
.sidebar-collapse-btn:hover{
  background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface-2));
  color: rgba(var(--app-text-rgb), .90);
}
.sidebar-collapse-btn:focus{ outline: 0; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); }
.sidebar-section-title{
  color: rgba(var(--app-text-rgb), .86);
  font-weight: var(--app-nav-section-font-weight, 700);
  font-size: var(--app-nav-section-font-size, .875em);
  padding: 8px 10px 6px 10px;
  margin: 4px 0 6px 0;
  position: relative;
}
.sidebar-section-title:after{
  content:"";
  display:block;
  height:1px;
  background: var(--app-border);
  margin-top: 6px;
}
.sidebar-link{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding: var(--app-nav-item-py, 7px) var(--app-nav-item-px, 10px);
  border-radius: var(--app-nav-item-radius, 12px);
  color: rgba(var(--app-text-rgb), .86);
  text-decoration:none;
  font-size: var(--app-nav-font-size, .875em);
  font-weight: var(--app-nav-font-weight, 500);
}
.sidebar-link:hover{ background: var(--app-nav-hover-bg, color-mix(in srgb, var(--app-primary) 12%, transparent)); color: rgba(var(--app-text-rgb), .95); }
.sidebar-link.active{
  background: var(--app-nav-active-bg, color-mix(in srgb, var(--app-primary) 18%, transparent));
  color: rgba(var(--app-text-rgb), .98);
  font-weight: 600;
  box-shadow: var(--app-shadow-sm);
}
.sidebar-link .bi{ font-size: 1em; }
.sidebar-label{ display:inline-block; }
.sidebar-label{ display:inline-block; }

/* Content chrome */
.page-header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.page-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
.page-title{ font-size: 1.25rem; font-weight: 700; margin: 0; }
.page-subtitle{ margin: 2px 0 0 0; color: var(--app-muted); font-size: .9rem; }

.filter-card{
  background: var(--app-surface-2);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  padding: 12px;
}

.table-wrapper{ border: 1px solid var(--app-border); border-radius: var(--app-radius-md); overflow: hidden; }
.table-wrapper .table{ margin-bottom: 0; }

.table-sticky thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--app-surface);
  box-shadow: 0 1px 0 var(--app-border);
}

.btn-icon{
  width: var(--app-btn-icon-size);
  height: var(--app-btn-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--app-btn-icon-radius);
}

.btn-icon i{ font-size: 1.05rem; line-height: 1; }

/* Badges */
.badge-soft{
  background: var(--app-surface-2);
  color: var(--app-text);
  border: 1px solid var(--app-border);
}
.badge-soft-muted{ color: var(--app-muted); }

/* Light-only helper classes replaced */
.bg-app-surface{ background: var(--app-surface) !important; }
.bg-app-surface-2{ background: var(--app-surface-2) !important; }

.btn-icon.btn-sm{
  width: calc(var(--app-btn-icon-size) - 4px);
  height: calc(var(--app-btn-icon-size) - 4px);
  border-radius: calc(var(--app-btn-icon-radius) - 2px);
}

.fs-875{ font-size: .875em; }

/* Dense controls (Bootstrap sm variants) */
.form-control-sm, .form-select-sm{
  min-height: calc(var(--app-control-height) - 6px);
  border-radius: calc(var(--app-control-radius) - 2px);
}
.btn-sm{
  border-radius: calc(var(--app-control-radius) - 2px);
}

.empty-state{
  padding: 36px 16px;
  text-align: center;
  color: var(--app-muted);
}
.empty-state .empty-title{ color: rgba(var(--app-text-rgb), .82); font-weight: 700; margin-bottom: 4px; }

/* Tree look consistent with tokens */
#tree .tree-node{ padding: .35rem .5rem; border-radius: .75rem; cursor: pointer; }
#tree .tree-node:hover{ background: color-mix(in srgb, var(--app-primary) 12%, transparent); }
#tree .tree-node.is-selected{ background: color-mix(in srgb, var(--app-primary) 18%, transparent); }
#tree .tree-children{ margin-left: .75rem; border-left: 1px dashed color-mix(in srgb, var(--app-border) 75%, transparent); padding-left: .5rem; }

/* Cards / tables / forms */
.card{
  border-radius: var(--app-radius-md);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-sm);
}
.card-header{ background: var(--app-surface-2); border-bottom-color: var(--app-border); }
.table{
  --bs-table-bg: transparent;
}
.table thead th{ color: rgba(var(--app-text-rgb), .70); font-weight: 600; }
.table-hover>tbody>tr:hover>*{ background: rgba(13,110,253,.06); }

.form-control, .form-select{
  min-height: var(--app-control-height);
  border-radius: var(--app-control-radius);
  border-color: var(--app-border);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(13,110,253,.40);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.12);
}
.btn{ border-radius: 12px; }
.btn-primary{ background: var(--app-primary); border-color: var(--app-primary); }
.btn-outline-primary{ color: var(--app-primary); border-color: rgba(13,110,253,.35); }
.badge{ border-radius: 999px; }

/* Utilities already used */
.brand-bg { background: var(--brand-primary); }
.brand-text { color: var(--brand-primary); }
.pointer { cursor:pointer; }
.tree-node { padding: .35rem .5rem; border-radius: .75rem; }
.tree-node:hover { background: rgba(13,110,253,.08); }
.tree-node.is-selected { background: rgba(13,110,253,.14); }
.field-saving { opacity: .6; }


/* Sidebar collapse (desktop) */
.app-shell.sidebar-collapsed .app-sidebar{
  width: var(--app-sidebar-collapsed-width) !important;
  flex: 0 0 var(--app-sidebar-collapsed-width) !important;
  min-width: var(--app-sidebar-collapsed-width) !important;
  max-width: var(--app-sidebar-collapsed-width) !important;
  overflow-x: visible;
}

.app-shell.sidebar-collapsed .sidebar-label{ display:none; }
.app-shell.sidebar-collapsed .sidebar-section-title{ display:none; }
.app-shell.sidebar-collapsed .sidebar-section-title:after{ display:none; }

.app-shell.sidebar-collapsed .sidebar-section-title-row{ justify-content:center; }
.app-shell.sidebar-collapsed .sidebar-collapse-btn{ width: 36px; height: 36px; }
.app-shell.sidebar-collapsed .sidebar-nav{ padding: 10px 6px; }
.app-shell.sidebar-collapsed .sidebar-section{ margin-top: 10px; }
.app-shell.sidebar-collapsed .sidebar-link{
  justify-content:center;
  padding: 10px 0;
  gap: 0;
}
.app-shell.sidebar-collapsed .sidebar-link .bi{ font-size: 1.15em; }

.app-sidebar{
  transition: width .18s ease;
}


/* Pagination (Bootstrap) – match app cards */
.pagination{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin: 0;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-sm);
}
.pagination .page-link{
  border-radius: 10px;
  padding: .35rem .65rem;
  color: rgba(var(--app-text-rgb), .88);
}
.pagination .page-link:hover{
  background: color-mix(in srgb, var(--app-primary) 10%, transparent);
  color: rgba(var(--app-text-rgb), .95);
}
.pagination .page-link:focus{
  box-shadow: 0 0 0 .2rem var(--app-focus-ring);
}
.pagination .page-item.active .page-link{
  background: color-mix(in srgb, var(--app-primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--app-primary) 22%, var(--app-border));
  color: rgba(var(--app-text-rgb), .98);
  font-weight: 600;
}
.pagination .page-item.disabled .page-link{
  opacity: .55;
}


/* Responsive: collapse sidebar */
@media (max-width: 992px){
  .app-sidebar{ position: fixed; left: -110%; top: 0; z-index: 2000; transition: left .2s ease; box-shadow: var(--app-shadow-md); }
  .app-sidebar.open{ left: 0; }
  .app-topbar{ position: sticky; }
}


/* Action bars: icon-first */
.actionbar{ display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.actionbar .btn{ white-space:nowrap; }

/* Compact tables */
.table-compact{ --bs-table-cell-padding-y: .35rem; --bs-table-cell-padding-x: .55rem; }
.table-compact td, .table-compact th{ vertical-align: middle; }
.table-actions{ width: 1%; white-space: nowrap; }

/* Status chips */
.status-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem; border-radius: 999px; font-weight: 600; font-size: .75rem; border: 1px solid var(--app-border); background: rgba(255,255,255,.7); }
.status-chip .dot{ width:8px; height:8px; border-radius: 99px; background: var(--app-muted); display:inline-block; }
.status-open .dot{ background: var(--app-warning); }
.status-paid .dot{ background: var(--app-success); }
.status-partial .dot{ background: var(--app-info); }
.status-overdue .dot{ background: var(--app-danger); }

/* Command palette */
.cmdk-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--app-border); border-radius: 12px; text-decoration:none; color: rgba(var(--app-text-rgb), .92); background: var(--app-surface); }
.cmdk-item:hover{ background: color-mix(in srgb, var(--app-primary) 10%, transparent); }
.cmdk-kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .75rem; padding: .15rem .35rem; border:1px solid var(--app-border); border-radius: 8px; color: var(--app-muted); background: var(--app-surface-2); }

/* Quick search (topbar) */
.quicksearch .quicksearch-addon{
  border-color: var(--app-border);
  background: var(--app-surface);
  border-radius: var(--app-control-radius) 0 0 var(--app-control-radius);
}
.quicksearch .quicksearch-input{
  width: 300px;
  border-left: 0;
}

.quicksearch-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: 420px;
  overflow: auto;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-md);
  z-index: 1500;
}
.quicksearch-item{
  display:block;
  padding: .55rem .75rem;
  text-decoration:none;
  color: var(--app-text);
  border-bottom: 1px solid color-mix(in srgb, var(--app-border) 75%, transparent);
  border-left: 3px solid transparent;
}
.quicksearch-item:hover{ background: color-mix(in srgb, var(--qs-accent, var(--app-primary)) 7%, transparent); }
.quicksearch-item.active{ background: color-mix(in srgb, var(--qs-accent, var(--app-primary)) 11%, transparent); }
.quicksearch-item:last-child{ border-bottom:0; }
.quicksearch-header{
  padding: .45rem .75rem;
  font-size: .74rem;
  color: var(--app-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid color-mix(in srgb, var(--app-border) 75%, transparent);
  background: var(--app-surface-2);
}
.quicksearch-empty{ padding: .65rem .75rem; color: var(--app-muted); }
.qs-title{ font-weight: 600; line-height: 1.1; }
.qs-sub{ font-size: .78rem; color: var(--app-muted); margin-top: .1rem; }
.qs-row{ display:flex; align-items:flex-start; gap:.55rem; }
.qs-icon{ width: 1.1rem; flex: 0 0 1.1rem; color: var(--qs-accent, var(--app-muted)); line-height: 1.2; margin-top: .05rem; }
.quicksearch-group{ display:flex; align-items:center; gap:.45rem; }
.quicksearch-group i{ opacity: .8; }

/* Quick search subtle type accents */
.quicksearch-item.qs-type-owner{ --qs-accent: var(--app-primary); border-left-color: var(--qs-accent); }

/* Owner tag picker (multi-select as badges + checkbox dropdown) */
.owner-tag-picker .owner-badges{ min-height: 24px; }
.owner-tag-picker .badge{ font-weight: 500; }
.owner-tag-picker .btn-close.btn-close-sm{ width: 0.5rem; height: 0.5rem; }
.owner-tag-picker .dropdown-menu{ border-radius: var(--app-radius-md); }
.quicksearch-item.qs-type-property{ --qs-accent: var(--app-info); border-left-color: var(--qs-accent); }
.quicksearch-item.qs-type-apartment{ --qs-accent: var(--app-secondary); border-left-color: var(--qs-accent); }
.quicksearch-item.qs-type-unit{ --qs-accent: var(--app-success); border-left-color: var(--qs-accent); }
.quicksearch-item.qs-type-tenancy{ --qs-accent: var(--app-warning); border-left-color: var(--qs-accent); }
.quicksearch-item.qs-type-tenant{ --qs-accent: var(--app-primary); border-left-color: var(--qs-accent); }
.quicksearch-item.quicksearch-more .qs-title{ font-weight: 700; }

/* Action overflow dropdown */
.actionbar .dropdown-toggle::after{ display:none; }

/* =========================
   Tree – Detail-Ansicht
   ========================= */

/* Standard-Schriftgröße für alle Inhalte der rechten Detail-Ansicht */
#detail-card{ font-size: .875em; }

/* Tabs */
#detail-card .nav-tabs .nav-link{
  font-size: 1em;
  padding: .45rem .75rem;
}

/* Card spacing (Detailbereich insgesamt kompakter) */
#detail-card .card-header{ padding: .65rem .85rem; }
#detail-card .card-body{ padding: .85rem; }
#detail-card .tab-content{ padding-top: .65rem; }

/* Leere Zustände in Tabs */
#detail-card .empty-state{
  padding: 1rem;
  border: 1px dashed rgba(0,0,0,.15);
  border-radius: .5rem;
  color: rgba(0,0,0,.6);
  background: rgba(0,0,0,.02);
}

/* Labels / Hilfstexte */
#detail-card .form-label{ margin-bottom: .25rem; }
#detail-card .form-text{ font-size: .95em; }

/* Inputs / Selects / Input-Groups */
#detail-card .form-control,
#detail-card .form-select,
#detail-card .input-group-text{
  font-size: 1em;
}

/* Inputs wirken sonst "zu groß" (Bootstrap Default-Padding/Heights). */
#detail-card .form-control,
#detail-card .form-select{
  padding: .30rem .55rem;
  line-height: 1.25;
  /* kompaktere Höhe innerhalb der Detail-Ansicht */
  min-height: calc(1.25em + .60rem + 2px);
}

#detail-card .input-group-text{
  padding: .30rem .55rem;
  line-height: 1.25;
}

/* "sm" Varianten ebenfalls konsistent */
#detail-card .form-control-sm,
#detail-card .form-select-sm{
  padding: .25rem .50rem;
  line-height: 1.25;
  min-height: calc(1.25em + .50rem + 2px);
}

/* Textareas bleiben inhaltlich steuerbar (Rows), aber optisch passend */
#detail-card textarea.form-control{
  min-height: unset;
}

/* Buttons */
#detail-card .btn{ font-size: 1em; }
#detail-card .btn.btn-sm{ padding: .35rem .6rem; line-height: 1.2; }
#detail-card .btn.btn-icon{ padding: .35rem .45rem; }

/* Tabellen in Detail-Tabs */
#detail-card table{ font-size: 1em; }


/* Release 215: Detail view polish */
#detail-card .detail-chip{
  font-weight: 500;
}

#detail-card .nav-tabs .nav-link{
  padding: .35rem .6rem;
}

#detail-card .empty-state{
  border: 1px dashed rgba(0,0,0,.15);
  border-radius: .75rem;
  padding: .75rem;
  margin-bottom: .75rem;
}

#detail-card .empty-state .empty-state-inner{
  font-size: 1em;
}

#detail-card .form-control,
#detail-card .form-select,
#detail-card .input-group-text{
  padding: .25rem .45rem;
  line-height: 1.2;
  min-height: calc(1.2em + .5rem + 2px);
}

#detail-card .btn{
  padding: .25rem .5rem;
  line-height: 1.2;
}

#detail-card .btn.btn-icon{
  padding: .25rem .4rem;
}

#detail-card .card-body .card{
  border-radius: .75rem;
}

#detail-card [data-tab="aktionen"] .btn-outline-danger{
  border-width: 1px;
}

/* Release 216: Weitere UI-Konsolidierung (Detailansichten) */

/* KPI cards */
#detail-card .kpi-grid .kpi-card{
  height: 100%;
  border-radius: .75rem;
}
#detail-card .kpi-grid .kpi-card .card-body{
  padding: .5rem .65rem;
}
#detail-card .kpi-grid .kpi-label{
  font-size: .92em;
  color: rgba(0,0,0,.6);
}
#detail-card .kpi-grid .kpi-value{
  font-weight: 600;
  line-height: 1.15;
}

/* Tabellen/Liste im Detailbereich kompakter & einheitlich */
#detail-card .table{ margin-bottom: 0; }
#detail-card .table > :not(caption) > * > *{
  padding: .30rem .40rem;
  vertical-align: middle;
}
#detail-card .table thead th{
  font-size: .95em;
  font-weight: 600;
  color: rgba(0,0,0,.75);
}
#detail-card .table tbody td{ color: rgba(0,0,0,.88); }

#detail-card .detail-list .list-group-item{
  padding: .45rem 0;
}

/* Section helpers */
#detail-card .detail-section-title{
  font-weight: 600;
  margin-bottom: .35rem;
}
#detail-card .detail-section{
  margin-bottom: .85rem;
}

/* Form layout tightening */
#detail-card .form-control,
#detail-card .form-select{
  border-radius: .5rem;
}
#detail-card .input-group .form-control,
#detail-card .input-group .form-select,
#detail-card .input-group .input-group-text{
  border-radius: .5rem;
}

/* Buttons: icon alignment */
#detail-card .btn .bi{ vertical-align: -0.12em; }

/* Explorer detail cards: footer styling */
.card-footer.exp-card-footer{
  background: color-mix(in srgb, var(--app-surface) 92%, transparent);
  border-top: 0;
}
.card-footer.exp-card-footer:empty{ display:none; }
.card-footer.exp-card-footer .btn{ white-space: nowrap; }


/* Explorer detail bottom footer */
.exp-detail-footer{
  /* footer styled like card-header and placed outside the scroll area */
  background: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-bottom-left-radius: var(--bs-card-border-radius);
  border-bottom-right-radius: var(--bs-card-border-radius);
}

/*
  Explorer detail shell (right panel):
  - Header + tabs + footer are fixed
  - Only the tab-content area scrolls
  - Inner cards should have breathing room to the outer card
*/
.exp-detail-layout{ min-height: 0; }
.exp-detail-top{ flex: 0 0 auto; }
.exp-detail-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* scroll happens inside .exp-detail-scroll */
  padding: 0;
}

.exp-detail-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0; /* padding comes from inner .p-3 to avoid double padding */
  background: var(--app-surface-2);
  /* Draw a full frame so header/tabs/footer don't look like they float.
     This also closes the "missing line" gaps at the left/right edges. */
  border: 1px solid var(--app-border);
}

/* Stretch the tab separator line to the full width of the detail panel (no gaps at the edges) */
.exp-detail-top .nav-tabs{
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Explorer: inner cards inside detail tabs should be visually separated */
.exp-detail-scroll .card{
  background: var(--app-surface);
  border: 1px solid var(--app-border);
}

/* Ensure the inner card header visually carries the top border into the rounded corners */
.exp-detail-scroll .card > .card-header{
  border-top: 1px solid var(--app-border);
}

/* Inner footers are layout-only; do not draw a top border and hide if empty */
.exp-card-footer{
  border-top: 0 !important;
}
.exp-card-footer:empty{ display:none; }