/*
  Global UI defaults (elements + component baselines)
  - This file defines how standard HTML elements should look application-wide.
  - It relies on tokens.css for sizes/colors.
*/

:root{
  color-scheme: light dark;
}

/* Typography */
body, p, li, td, th, label, input, select, textarea, button, a, span, div {
  font-size: inherit;
}

h1, .h1 { font-size: var(--app-h1); }
h2, .h2 { font-size: var(--app-h2); }
h3, .h3 { font-size: var(--app-h3); }
h4, .h4 { font-size: var(--app-h4); }
h5, .h5 { font-size: var(--app-h5); }
h6, .h6 { font-size: var(--app-h6); }

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  line-height: 1.2;
  letter-spacing: -0.01em;
}

small, .small { font-size: var(--app-font-size-sm); }

/* App font helpers (used in several views to avoid inline styles) */
.wg-font-sm{ font-size: var(--app-font-size-sm) !important; }
.wg-font-xs{ font-size: 11px !important; }

/* Links */
a { color: var(--app-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Tables */
table { font-size: inherit; }
.table, .table td, .table th { font-size: inherit; }
.table thead th { font-weight: 600; }

/* Forms */
.form-control, .form-select, .form-check-label, .input-group-text{
  font-size: inherit;
}
.form-label{
  font-size: var(--app-font-size-sm);
  margin-bottom: .25rem;
}
.form-text{ font-size: var(--app-font-size-sm); }

/* Buttons */
.btn{
  font-size: inherit;
  line-height: 1.2;
}
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-primary) 30%, transparent);
}

/* Icon buttons */
.btn-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--app-btn-icon-size);
  height: var(--app-btn-icon-size);
  padding: 0;
  border-radius: var(--app-btn-icon-radius);
}
.btn-icon i, .btn-icon svg{
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* Cards */
.card, .card-app{
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  border-radius: var(--app-radius-md);
}
.card-header{
  background: color-mix(in srgb, var(--app-surface) 90%, var(--app-border));
  border-bottom-color: var(--app-border);
  font-weight: 600;
}

/* Modals */
.modal-content{
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
  border-radius: var(--app-radius-md);
}
.modal-header, .modal-footer{
  border-color: var(--app-border);
}

/* Lists */
.list-group-item{
  background: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}

/* Badges (neutral) */
.badge-soft{
  background: color-mix(in srgb, var(--app-text) 10%, transparent);
  color: var(--app-text);
  border: 1px solid color-mix(in srgb, var(--app-border) 60%, transparent);
}

/* Small utility helpers (avoid inline styles in views) */
.w-auto{ width: auto !important; }
.minw-180{ min-width: 180px; }
.minw-220{ min-width: 220px; }
.w-140{ width: 140px !important; }
.w-320{ width: 320px !important; }
.cursor-pointer{ cursor: pointer !important; }
.user-select-none{ user-select: none !important; }
.maxw-130{ max-width: 130px; }
.maxw-240{ max-width: 240px; }
.border-dashed{ border-style: dashed !important; }
.media-thumb{ object-fit: cover; height: 150px; }


/* Tables */
.table.table-app{
  --bs-table-color: var(--app-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--app-border);
}
.table.table-app th{
  font-weight: 600;
  color: var(--app-text);
}
.table.table-app td, .table.table-app th{
  padding: var(--app-space-2) var(--app-space-3);
  vertical-align: middle;
}
.table.table-app thead th{
  background: var(--app-surface-2);
  border-bottom-color: var(--app-border);
}



/* Explorer: Documents tab – only table scrolls, header/footer fixed inside card */
.exp-docs-card{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.exp-docs-card .card-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.exp-docs-table-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.exp-docs-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bs-body-bg);
}


/* When a documents tab manages its own scrolling, hide the outer detail scroll bar
   and stretch the tab content so the inner card can own the height. */
.exp-detail-scroll.exp-docs-scroll-only{
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
.exp-detail-scroll.exp-docs-scroll-only > .p-3{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.exp-detail-scroll.exp-docs-scroll-only > .p-3 > .tab-content{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.exp-detail-scroll.exp-docs-scroll-only > .p-3 > .tab-content > .tab-pane.active{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Documents tab root should stretch to available height */
[data-exp-docs-tab]{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Documents footer: compact single-row layout */
.exp-docs-card .card-footer{
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.exp-docs-footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.exp-docs-footer-count{
  min-height: 31px; /* align to .form-select-sm height */
  display:flex;
  align-items:center;
  white-space: nowrap;
}
.exp-docs-footer-actions{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap: nowrap;
}
.exp-docs-footer-vis{
  width: 360px;
  max-width: 360px;
}