/* =========================================================
   AUTONEER – TABBED PAGE LAYOUT COMPONENT
   Standard layout for all pages with tabs.
   
   Pattern: Fixed header/tabs, scrollable content only.
   Reference: Stock → Analytics tab pattern.
   
   Structure:
   <div class="app-container tabbed-page">
     <div class="tabbed-page-header">
       <!-- page header + logo + title + tabs -->
     </div>
     <div class="tabbed-page-body">
       <!-- tab content, optionally wrapped in .tabbed-page-scroll -->
     </div>
   </div>
   ========================================================= */

/* Main container: full viewport, no scroll on body */
.tabbed-page {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Header area: fixed at top, does not scroll */
.tabbed-page-header {
	flex: 0 0 auto;
	/* Header respects left navbar margin via .app-container inheritance */
}

/* Body/content area: fills remaining space, manages inner scroll */
.tabbed-page-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background-color: #FAF9F5;
}

/* Generic scroll wrapper for content that doesn't have its own scroll container */
.tabbed-page-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}

/* Some pages (e.g., Customers/Reception list views) need the scroll wrapper to behave like a flex column
   so that inner flex layouts can stretch to full height (prevents dropdowns being clipped when tables are short). */
.tabbed-page-scroll--flex {
	display: flex;
	flex-direction: column;
}

.tabbed-page-scroll--flex>* {
	flex: 1 1 auto;
	min-height: 0;
}

/* Allow Bootstrap dropdown menus to overflow their reception containers (the table itself still scrolls). */
.tabbed-page-scroll--flex .reception-container,
.tabbed-page-scroll--flex .reception-right-panel {
	overflow: visible;
}

/* Detail pages inside tabbed layout: align cards with navbar */
.tabbed-page .tabbed-page-detail {
	margin-left: 0 !important;
}

/* Configuration pages: align primary actions and header buttons */
.configuration-page .config-actions {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1rem;
}

.configuration-page .config-actions.config-actions-left {
	justify-content: flex-start;
}

/* Tab buttons (non-table): match nav-buttons styling */
.tabbed-page .btn {
	background-color: #f4f4f4e2;
	border: 1px solid #999;
	margin-right: 4px;
	padding: 4px 12px;
	cursor: pointer;
	color: #003366;
	box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.1);
	transition: background 0.2s;
	font-weight: 100;
	font-size: 14px;
	border-radius: 5px;
}

.tabbed-page .btn:hover {
	background-color: goldenrod;
	color: #003366;
}

/* Ensure tabbed detail pages inside reception layout can scroll */
.tabbed-page .tabbed-page-detail.reception-container {
	flex-direction: column;
}

.tabbed-page .tabbed-page-detail .reception-right-panel {
	overflow: visible;
	min-height: auto;
}

/* =========================================================
   INTEGRATION WITH EXISTING COMPONENTS
   ========================================================= */

/* When .table-scroll-container is inside .tabbed-page-body, 
   it becomes the scrolling region (no change needed, already has proper styles) */

/* Reception container within tabbed pages should fill available space */
.tabbed-page-body .reception-container {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Right panel should also be flex to allow table container to grow */
.tabbed-page-body .reception-right-panel {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* When table-scroll-container is in the right panel, let it fill space */
.tabbed-page-body .reception-right-panel>.table-scroll-container {
	flex: 1 1 auto;
	min-height: 0;
}

/* Accounting report "View" pages render full report content without an inner table-scroll-container.
   Let the tabbed-page-scroll wrapper own scrolling and avoid clipping long report output. */
.tabbed-page-body.accounting-report-view .reception-container,
.tabbed-page-body.accounting-report-view .reception-right-panel {
	flex: 0 0 auto;
	min-height: auto;
	overflow-x: hidden;
	overflow-y: visible;
}

/* Support report partials that place the marker class on the reception container itself. */
.tabbed-page-body .reception-container.accounting-report-view,
.tabbed-page-body .reception-container.accounting-report-view .reception-right-panel {
	flex: 0 0 auto;
	min-height: auto;
	overflow-x: hidden;
	overflow-y: visible;
}

/* =========================================================
   DETAIL PAGE ACTIONS (Save/Delete buttons etc.)
   ========================================================= */

/* Action buttons container within fixed header for detail pages */
.tabbed-page-actions {
	padding: 8px 16px 0px;
	background: #FAF9F5;
	/* border-bottom: 1px solid #e5e7eb; */
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Sticky actions variant (if actions need to scroll with content but stay at top) */
.tabbed-page-sticky-actions {
	position: sticky;
	top: 0;
	z-index: 5;
	padding: 8px 16px;
	background: white;
	border-bottom: 1px solid #e5e7eb;
	display: flex;
	justify-content: space-between;
	align-items: center;
}