/* @file public/app.css */
/* @version 0.8.0 (2025-10-06) */
/* @changelog
 * - 0.8.0: CRITICAL FIX - добавлен tw-layout-main-inner для dark theme support
 * - 0.7.7: расширены utility classes
 */
html { margin-right: -20px; overflow-x: hidden;}
html, body { height: 100%;  }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-y: scroll; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

/* фикс иконок */



span.me-2.subheader-tab-icon {
    font-size: 18px;
    padding: 0px!important;
    margin: 0px !important;
}

a.nav-link {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
}
span.subheader-tab-label {
    font-size: 10px!important;
    letter-spacing: -1px!important;
}
div#sidebar-menu {
    background: var(--tblr-bg-surface);
    border-right: 1px solid var(--tblr-border-color);
}
/* переносим сабхедер в левую фиксированную колонку */

aside.navbar.navbar-vertical.navbar-expand-lg.navbar-transparent {
    width: 88px!important;
    background: var(--tblr-bg-surface);
    border-right: 0px #dce1e7 solid;
}

.page-wrapper {
    margin-left: 100px!important;
    width: auto!important;
}
ul#layout-subheader-tabs {
    justify-content: top;
    padding-top: 0px !important;
    background: transparent!important;
    z-index: 2!important;
}

/* Стили для hover и активного состояния в сабхедере */
ul#layout-subheader-tabs .nav-link {
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 0.375rem;
    margin: 0.25rem 0.5rem;
}

ul#layout-subheader-tabs .nav-link:hover {
    background-color: var(--tblr-bg-surface-tertiary);
}

ul#layout-subheader-tabs .nav-link.active {
    background-color: var(--tblr-primary);
    color: #ffffff !important;
}

ul#layout-subheader-tabs .nav-link.active .subheader-tab-icon i,
ul#layout-subheader-tabs .nav-link.active .subheader-tab-label {
    color: #ffffff !important;
}

header.navbar.navbar-expand-md {
    z-index: 3!important;
    position: fixed!important;
    width:100%!important;
}

.page {
    margin-top: 56px!important;
}

aside.navbar.navbar-vertical.navbar-expand-lg.navbar-transparent {
    margin-top: 56px!important;
}

/* Расширение максимальной ширины кабинета */
.container-xl { max-width: 2000px; }

.container-narrow { max-width: 860px; margin: 0 auto; }
.container-login  { max-width: 420px; margin: 0 auto; }

/* ========== Breadcrumbs в Header ========== */
/* Компактные хлебные крошки для navbar (добавлено 2025-10-13) */
.breadcrumb-header {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
}

.breadcrumb-header .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--tblr-secondary);
  padding: 0 0.5rem;
}

.breadcrumb-header .breadcrumb-item a {
  color: var(--tblr-body-color);
  text-decoration: none;
}

.breadcrumb-header .breadcrumb-item a:hover {
  color: var(--tblr-primary);
}

.breadcrumb-header .breadcrumb-item.active {
  color: var(--tblr-muted);
}

.breadcrumb-header .breadcrumb-item {
  display: flex;
  align-items: center;
}


/* ============================================================================
 * CRITICAL: tw-layout-main-inner
 * Wrapper for main content area - ensures proper background in dark theme
 * Used in: Cabinet, Documents, Files, CRM, Sklad, and all admin views (27+ files)
 * ============================================================================ */
.tw-layout-main-inner {
	background-color: var(--tblr-body-bg);
	border-radius: var(--tblr-border-radius);
	padding: 1.5rem;
	min-height: 400px;
}

/* Dark theme: контент имеет тот же фон что и body */
[data-bs-theme="dark"] .tw-layout-main-inner {
	background-color: var(--tblr-body-bg) !important; /* Тёмный фон - !important чтобы переопределить cabinet.css */
}

/* Light theme: контент белый на светлом фоне */
[data-bs-theme="light"] .tw-layout-main-inner {
	background-color: #ffffff !important;
}

/* ============================================================================
 * Layout utilities
 * ============================================================================ */
.tw-layout-main {
	min-width: 0;
}

.layout-main-slot + .layout-main-slot {
	margin-top: 1.25rem;
}

@media (min-width: 768px) {
	#layout-row {
		flex-wrap: nowrap;
		align-items: flex-start;
	}
	#layout-main,
	.tw-layout-main {
		flex: 1 1 auto;
		min-width: 0;
	}
	#layout-sidebar-left,
	#layout-sidebar-right {
		flex: 0 0 auto;
	}
}

:root { --subheader-gap: 16px; }
.subheader-bar { margin-top: var(--subheader-gap); }
.subheader-tabs { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space: nowrap; }

.page-header {
	border-bottom: 1px solid rgba(var(--tblr-border-color-rgb), 0.65);
	padding-bottom: 1rem;
}

.page-header-text {
	flex: 1 1 auto;
	min-width: 0;
}

.page-header-actions .btn {
	white-space: nowrap;
}

/* Скрыть лишние скроллбары у горизонтальных вкладок, сохранив прокрутку на мобильных */
.subheader-tabs { scrollbar-width: none; }
.subheader-tabs::-webkit-scrollbar { height: 0; }
.nav.nav-tabs.flex-nowrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.nav.nav-tabs.flex-nowrap { scrollbar-width: none; }
.nav.nav-tabs.flex-nowrap::-webkit-scrollbar { height: 0; }

.icon-sun, .icon-moon { display:inline-block; width:20px; height:20px; line-height:0; }
[data-bs-theme="dark"]  .icon-sun  { display:none; }
[data-bs-theme="dark"]  .icon-moon { display:inline-block; }
[data-bs-theme="light"] .icon-sun  { display:inline-block; }
[data-bs-theme="light"] .icon-moon { display:none; }

.btn-icon { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

.card-link { text-decoration: none; }
.card-link .card-body { transition: transform .12s ease; }
.card-link:hover .card-body { transform: translateY(-1px); }

/* Avatar (header): placeholder + image layered, circle via big radius */
.tw-avatar {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: transparent;
	border: 1px solid var(--tblr-border-color);
	border-radius: 250px; /* максимально круглый */
	overflow: hidden;
}
.tw-avatar-40 { width: 40px; height: 40px; }
.tw-avatar-ph { width: 20px; height: 20px; line-height: 0; }
.tw-avatar-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Utility classes to replace inline styles (CSP compliant) */
.tw-minw-0 { min-width: 0 !important; }
.tw-maxw-120 { max-width: 120px !important; }
.tw-maxw-240 { max-width: 240px !important; }
.tw-chart-240 { height: 240px; }
/* Table width helpers (approximate) */
.tw-w-18 { width: 18% !important; }
.tw-w-12 { width: 12% !important; }
.tw-w-10 { width: 10% !important; }
.tw-w-15 { width: 15% !important; }
.tw-w-20 { width: 20% !important; }

/* Utility widths to replace inline style attributes (CSP-friendly) */
.tw-w-10 { width: 10%; }
.tw-w-15 { width: 15%; }
.tw-w-18 { width: 18%; }

/* Max width utility for narrow forms/cards */
.tw-maxw-480 { max-width: 480px; }

/* Global Search MVP */
.tw-global-search { max-width: 720px; min-width: 0; }
.tw-global-search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	z-index: 1050;
	background: var(--tblr-bg-surface);
	border: 1px solid var(--tblr-border-color);
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.08);
	max-height: 300px;
	overflow: auto;
}
.tw-gs-item { cursor: pointer; }
.tw-gs-item:hover { background: var(--tblr-bg-surface-secondary); }
.tw-gs-item.active { background: var(--tblr-active-bg); }
.tw-gs-empty { font-style: italic; }

/* Search icon inside input */
.tw-global-search .tw-gs-ico {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tblr-secondary);
}
.tw-global-search input.form-control {
	padding-left: 34px;
	height: 38px;
	padding-right: 170px; /* место под контролы */
}

/* Inline controls inside input (right side) */
.tw-global-search .tw-global-search-controls {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.tw-header-presets-inline .dropdown > .btn {
	height: 28px;
	padding: 2px 10px;
}
#tw-gs-filters-toggle.btn {
	height: 28px;
	padding: 2px 10px;
}

/* Header presets and chips */
.tw-header-presets { display: flex; align-items: center; gap: 8px; }
.tw-header-filters [data-role="hf-chips"] .btn { min-width: 90px; }
.tw-header-filters .btn.btn-primary { color: #fff; }

/* Dark theme adjustments */
[data-bs-theme="dark"] .tw-global-search-panel {
	background: var(--tblr-body-bg);
	border-color: rgba(255,255,255,0.08);
	box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
[data-bs-theme="dark"] .tw-gs-item:hover { background: rgba(255,255,255,0.06); }
[data-bs-theme="dark"] .tw-gs-item.active { background: rgba(255,255,255,0.1); }
[data-bs-theme="dark"] .tw-gs-subtitle { color: var(--tblr-secondary); }