/* Compat: map legacy Bootstrap 3 / Metronic classes into Tabler styles */

/* Portlet → card */
.portlet { border-radius: var(--tblr-border-radius); background: var(--tblr-card-bg, #fff); border: var(--tblr-border-width) solid var(--tblr-border-color); margin-bottom: 1rem; }
.portlet.light { box-shadow: none; }
.portlet-title { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: var(--tblr-border-width) solid var(--tblr-border-color); flex-wrap: wrap; gap: .5rem; }
.portlet-title .caption { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--tblr-heading-color); }
.portlet-title .actions { display: flex; gap: .25rem; flex-wrap: wrap; }
.portlet-body { padding: 1rem; min-height: 200px; }
.portlet-footer { padding: .75rem 1rem; border-top: var(--tblr-border-width) solid var(--tblr-border-color); }
/* Footer action chooser (getOperations select) — compact, don't stretch the flex row */
.portlet-footer #operation { width: auto; min-width: 11rem; }

/* JASPER report (BWebReport): the JasperReports HTML export uses fixed-width zoomed
   tables — let them scroll horizontally within the card instead of overflowing. */
#reports { overflow-x: auto; }
#reports table { max-width: none; }

/* FORMVIEW read-only record view: Tabler datagrid (responsive key/value) + a footer
   toolbar for actions/navigation. Tabler styles .datagrid/.datagrid-title already. */
.viewform .datagrid { padding: .25rem 0; }
.viewform .datagrid-content { color: var(--tblr-body-color); min-height: 1.25rem; word-break: break-word; }
.viewform .datagrid-actions { align-items: center; }
.note.note-info { background: #e7f3fe; border-left: 4px solid #0d6efd; padding: .5rem 1rem; }

/* Bootstrap 3 grid helpers Bootstrap 5 already covers most; add gap-less cols */
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-12 { padding-left: 8px; padding-right: 8px; }

/* Drill-down breadcrumb (BWeb.getBreadcrumb, above the tab rows): give it room
   above so it sits a little higher under the topbar, and clear separation below
   so it isn't squeezed against the tab menus (Tabler zeroes .breadcrumb margins). */
nav[aria-label="Data navigation"] { margin: .5rem 0 1rem; }
nav[aria-label="Data navigation"] .breadcrumb { margin-bottom: 0; }

/* Tabs — clear Tabler-style underline active state (drill-down + form-section +
   filter tabs all emit .nav-tabs). Scoped to .nav-tabs so the sidebar
   (.navbar-vertical .navbar-nav) is unaffected. */
.tabbable { margin-bottom: .75rem; }
.nav-tabs { border-bottom: 1px solid var(--tblr-border-color); }
.nav-tabs .nav-link {
  color: var(--tblr-secondary);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* sit on the row's bottom border */
  font-size: .875rem;
  font-weight: 500;
}
.nav-tabs .nav-link:hover {
  color: var(--tblr-primary);
  border-bottom-color: var(--tblr-border-color);
}
.nav-tabs .nav-link.active {
  color: var(--tblr-primary);
  background: transparent;
  border-bottom-color: var(--tblr-primary);
  font-weight: 600;
}
/* tab.count badge (getTabs emits .badge.bg-success): force legible text so it
   doesn't inherit the muted/active nav-link colour (gray/blue) on the green fill. */
.nav-tabs .nav-link .badge { color: #fff; }

/* Drill-down tabs: single scrollable row (no multi-row wrap) at every breakpoint.
   The thin horizontal scrollbar is the affordance; touch users swipe. The active
   tab is scrolled into view by index.jsp. (Scoped to .tabbable so in-form section
   tabs are untouched.) */
.tabbable .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tabbable .nav-tabs .nav-link { white-space: nowrap; }
.tabbable .nav-tabs::-webkit-scrollbar { height: 4px; }
.tabbable .nav-tabs::-webkit-scrollbar-thumb { background: var(--tblr-border-color); border-radius: 4px; }
.tabbable .nav-tabs::-webkit-scrollbar-track { background: transparent; }

/* Legacy btn colours from Bootstrap 3 / Metronic */
.btn.green, .btn-green { --bs-btn-bg: #26a65b; --bs-btn-border-color: #26a65b; --bs-btn-color: #fff; --bs-btn-hover-bg: #1e8449; }
.btn.blue,  .btn-blue  { --bs-btn-bg: #337ab7; --bs-btn-border-color: #337ab7; --bs-btn-color: #fff; --bs-btn-hover-bg: #286090; }
.btn.red,   .btn-red   { --bs-btn-bg: #c0392b; --bs-btn-border-color: #c0392b; --bs-btn-color: #fff; --bs-btn-hover-bg: #a93226; }

/* AG Grid inside portlet — height comes from AG Grid (domLayout:'autoHeight'),
   so the grid grows to its page of rows and the window owns the single scroll.
   Do NOT set a CSS height here (it would conflict with autoHeight).
   Density: tighter rows/header than the Alpine default (was 42/48) to read as a
   compact app grid; rounded corners so it sits like a Tabler card. */
#jqlist.ag-theme-alpine {
  font-size: .8125rem;
  --ag-row-height: 38px;
  --ag-header-height: 40px;
  --ag-cell-horizontal-padding: 12px;
  border-radius: var(--tblr-border-radius);
  overflow: hidden;
}
/* Boolean pill (CHECKBOX columns) sits centred within the AG cell line */
#jqlist .ag-cell .badge { vertical-align: middle; }

/* Drillable rows (grids with a child view): pointer + a dim chevron pinned right
   that brightens on hover. Hint only — double-click still drills. */
.ob-grid-drillable .ag-row { cursor: pointer; }
.ob-drill-cell { display: flex; align-items: center; justify-content: center; }
.ob-drill-chevron { color: var(--tblr-secondary); opacity: .35; transition: opacity .12s ease, color .12s ease; }
.ag-theme-alpine .ag-row-hover .ob-drill-chevron { opacity: 1; color: var(--tblr-primary); }

/* Grid overlays: give autoHeight grids room so loading/empty overlays show, and let
   our full-width templates fill the overlay (drop AG's default centred white box). */
#jqlist.ag-theme-alpine .ag-overlay { min-height: 200px; }
.ag-theme-alpine .ag-overlay-loading-center,
.ag-theme-alpine .ag-overlay-no-rows-center {
  width: 100%; background: transparent; border: 0; box-shadow: none; padding: 0;
}
/* Skeleton shimmer (loading overlay) */
.ob-grid-skeleton { width: 100%; padding: .5rem 1.25rem; }
.ob-skel-row {
  height: 14px; margin: .65rem 0; border-radius: 4px;
  background: linear-gradient(90deg, #eef1f4 25%, #f6f8fa 37%, #eef1f4 63%);
  background-size: 400% 100%;
  animation: ob-shimmer 1.2s ease infinite;
}
.ob-skel-row:nth-child(2n) { width: 85%; }
.ob-skel-row:nth-child(3n) { width: 70%; }
@keyframes ob-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* Empty state (mirrors .dashboard-empty) */
.ob-grid-empty { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--tblr-secondary); }
.ob-grid-empty i { font-size: 2rem; opacity: .4; }

/* Select2 inside Tabler forms */
.select2-container { width: 100% !important; }

/* Sidebar active state */
.navbar-vertical .nav-link.active,
.navbar-vertical .nav-item.active > .nav-link { color: var(--tblr-primary) !important; }

/* Page footer */
.page-footer { font-size: .8125rem; color: var(--tblr-muted); text-align: center; padding: .4rem 1rem; border-top: var(--tblr-border-width) solid var(--tblr-border-color); margin-top: auto; }

/* Desk layout — single window scrollbar (document flow).
   The viewport is NOT locked: the window owns the one vertical scroll. Topbar and
   footer flow with the page (not pinned). The sidebar stays pinned (Tabler owns its
   position: it is fixed at lg+ and a full-width top bar below — see media query). */
html, body { min-height: 100%; }
.wrapper { display: flex; align-items: flex-start; min-height: 100vh; }
.page-wrapper { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 100vh; }
.page-body { flex: 1 1 auto; padding: .5rem 0; }

/* Sidebar: full height with its own scroll for long menus while the page scrolls
   independently. (Positioning is Tabler's fixed navbar-vertical — we only guarantee
   the scroll here.) */
.navbar-vertical { height: 100vh; overflow-y: auto; }

/* Portlet view: size to content — no inner scroll, no min-height floor. */
.portlet-container { display: flex; flex-direction: column; }
.portlet.box { display: flex; flex-direction: column; margin-bottom: 0; }

/* Below lg: stop the side-by-side flex squeeze. Sidebar becomes a full-width top
   bar (navbar-expand-lg already collapses the menu) and content goes full width. */
@media (max-width: 991.98px) {
  .wrapper { display: block; }
  .navbar-vertical { position: static; height: auto; overflow: visible; }
}

/* Phones: AG Grid's pagination panel is a fixed-height single flex row that overflows
   on narrow screens. Let it reflow/wrap (keeping all controls, incl. Page Size). */
@media (max-width: 575.98px) {
  #jqlist .ag-paging-panel {
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    padding: .5rem .25rem;
    gap: .25rem .75rem;
  }
  #jqlist .ag-paging-panel > * { margin-left: 0; margin-right: 0; }
  #jqlist .ag-paging-row-summary-panel { white-space: nowrap; }
}

/* Forms: native Tabler field styling (top labels + fill-column controls) */
.form-body .form-label { font-weight: 500; margin-bottom: .25rem; }
/* Tame full-bleed controls in single-column forms without clipping multi-column
   (col-md-6 ≈ 540px stays under 40rem so it still fills its column). */
.form-body .form-control,
.form-body .form-select,
.form-body .input-group { max-width: 40rem; }
.form-body textarea,
.form-body .ckeditor,
.form-body .input-group .form-control,
.form-body .input-group .form-select { max-width: none; }

/* Date field: make the calendar trigger read as an inline icon inside the field
   (Tabler input-icon look) rather than a bordered button. */
.form-body .input-group.date > .form-control { border-right: 0; }
.form-body .input-group.date > .btn {
  background: transparent;
  border-color: var(--tblr-border-color);
  border-left: 0;
  color: var(--tblr-secondary);
  padding-left: .5rem;
  padding-right: .75rem;
}
.form-body .input-group.date > .btn:hover,
.form-body .input-group.date > .btn:focus {
  background: transparent;
  color: var(--tblr-primary);
  box-shadow: none;
}

/* Tom Select — align the searchable select to Tabler form-control look */
.form-body .ts-wrapper { max-width: 40rem; }
.form-body .ts-wrapper.multi { max-width: 40rem; }
.ts-control {
  /* Tom Select's BS5 theme uses --bs-* vars Tabler doesn't define, so bg resolves to
     transparent — pin it to Tabler's surface colour. */
  background-color: var(--tblr-bg-surface, #fff);
  border-color: var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  min-height: calc(1.4285714em + .875rem + 2px);
}
.ts-wrapper.focus .ts-control,
.ts-control:focus-within {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb, 31,119,204), .2);
}
.ts-dropdown {
  background-color: var(--tblr-bg-surface, #fff);
  border-color: var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-box-shadow-dropdown, 0 .5rem 1rem rgba(0,0,0,.12));
  z-index: 1056;
}
.ts-dropdown .option:hover { background-color: var(--tblr-bg-surface-secondary, #f6f8fb); }
.ts-dropdown .option.active { background-color: var(--tblr-primary); color: #fff; }
.form-body .ts-wrapper.multi .ts-control > .item {
  background: var(--ob-accent-lt, #e8f1fb);
  color: var(--tblr-primary);
  border-color: transparent;
}

/* Dashboard view: natural flow with spacing */
.dashboard-container { padding: 1rem 1.25rem; }
.dashboard-container > .row { margin-bottom: 1rem; }
.dashboard-container > .row:last-child { margin-bottom: 0; }

/* Dashboard section heading (above tile rows) */
.dashboard-section-title { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-secondary); font-weight: 600; margin: 0 0 .5rem; }

/* Tile card: flat, static (no hover lift / accent strip) — matches Tabler combo preview. */
.dashboard-tile { position: relative; overflow: hidden; }
/* Icon badge: solid brand colour (bg-* from markup) with a high-contrast white icon,
   rounded square to match the preview chips (overrides the markup's .avatar-rounded). */
.dashboard-tile .avatar { color: #fff; border-radius: var(--tblr-border-radius); }
.dashboard-tile .tile-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--tblr-heading-color); }
.dashboard-tile .tile-label { font-size: .8125rem; color: var(--tblr-secondary); }
.dashboard-tile .tile-label a { color: inherit; text-decoration: none; }
.dashboard-tile .tile-label a:hover { color: var(--tblr-primary); text-decoration: underline; }

/* Dashboard list card-tables: bolder header row + tighter rows */
.dashboard-container .card-table thead th { font-weight: 600; color: var(--tblr-secondary); }
.dashboard-container .card-table > :not(caption) > * > * { padding-top: .4rem; padding-bottom: .4rem; }

/* Empty list state (no rows) */
.dashboard-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 120px; color: var(--tblr-secondary); text-align: center; }
.dashboard-empty i { font-size: 1.75rem; opacity: .4; }

/* KPI bar: row of value/label pairs with vertical dividers */
.dashboard-kpi-bar { display: flex; flex-wrap: wrap; gap: 0; align-items: stretch; }
.dashboard-kpi-bar .kpi-item { flex: 1 1 auto; padding: .5rem 1rem; border-right: 1px solid var(--tblr-border-color); min-width: 140px; }
.dashboard-kpi-bar .kpi-item:last-child { border-right: 0; }
.dashboard-kpi-bar .kpi-value { font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.dashboard-kpi-bar .kpi-label { font-size: .8125rem; color: var(--tblr-secondary); margin-top: .125rem; }
.dashboard-kpi-bar .kpi-label a { color: inherit; text-decoration: none; }
.dashboard-kpi-bar .kpi-label a:hover { color: var(--tblr-primary); text-decoration: underline; }

/* Links card: dense quick-action strip */
.dashboard-links .card-header { padding: .5rem 1rem; }
.dashboard-links .card-body { padding: .75rem 1rem; }

/* Attendance / task widgets */
.attendance-widget .clock-status { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem .75rem; border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface-secondary, #f6f8fb); font-size: .8125rem; font-weight: 500; }
.attendance-widget .row + .row { margin-top: .5rem; }
/* Clock action buttons read as real buttons (override the .btn-sm the JS re-applies). */
.attendance-widget .d-grid .btn { padding: .5rem .75rem; font-size: .875rem; font-weight: 500; }

/* Top navbar */
.navbar-brand-logo { max-height: 50px; max-width: 200px; object-fit: contain; }
.user-org-label { max-width: 160px; }