/* Global theme variables and base theming */
:root {
  --color-bg-body: #f8f9fa;
  --color-text: #212529;
  --color-bg-alt: #e9ecef;
  --color-border: #ced4da;
  --color-accent: #0066cc;
  --color-accent-hover: #0052a3;
  --color-accent-rgb: 0, 102, 204;
  --color-header-bg: #ffffff;
  --color-header-text: #212529;
  --color-footer-bg: #ffffff;
  --color-footer-text: #6c757d;
  --color-panel-bg: #ffffff;
  --color-panel-border: #dee2e6;
  --color-panel-header-bg: #f1f3f4;
  --color-link: #0066cc;
  --color-link-hover: #0052a3;
  --color-toggle-bg: #e9ecef;
  --color-toggle-icon: #495057;
  /* New shared form variables (light defaults) */
  --color-input-bg: #ffffff;
  --color-input-bg-focus: #ffffff;
  --color-input-text: #212529;
  --color-input-border: #ced4da;
  --color-label: #495057;
  --app-header-height: 74px;
  --app-header-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Light theme explicitly defined - improved colors */
body.theme-light {
  --color-bg-body: #f8f9fa;
  --color-text: #212529;
  --color-bg-alt: #e9ecef;
  --color-border: #ced4da;
  --color-accent: #0066cc;
  --color-accent-hover: #0052a3;
  --color-accent-rgb: 0, 102, 204;
  --color-header-bg: #ffffff;
  --color-header-text: #212529;
  --color-footer-bg: #ffffff;
  --color-footer-text: #6c757d;
  --color-panel-bg: #ffffff;
  --color-panel-border: #dee2e6;
  --color-panel-header-bg: #f1f3f4;
  --color-link: #0066cc;
  --color-link-hover: #0052a3;
  --color-toggle-bg: #e9ecef;
  --color-toggle-icon: #495057;
  /* Light theme form variables */
  --color-input-bg: #ffffff;
  --color-input-bg-focus: #ffffff;
  --color-input-text: #212529;
  --color-input-border: #ced4da;
  --color-label: #495057;
  
  /* Override Bootstrap nav CSS variables for light theme */
  --bs-nav-tabs-border-color: #dee2e6;
  --bs-nav-tabs-link-hover-border-color: #dee2e6 #dee2e6 transparent;
  --bs-nav-tabs-link-active-color: #0066cc;
  --bs-nav-tabs-link-active-bg: #ffffff;
  --bs-nav-tabs-link-active-border-color: #0066cc #0066cc #ffffff;
  --bs-body-bg: #f8f9fa;
  --bs-border-color: #dee2e6;
}

body.theme-dark {
  --color-bg-body: #0d1117;
  --color-text: #e6edf3;
  --color-bg-alt: #21262d;
  --color-border: #30363d;
  --color-accent: #0969da;
  --color-accent-hover: #0550ae;
  --color-accent-rgb: 9, 105, 218;
  --color-header-bg: #161b22;
  --color-header-text: #e6edf3;
  --color-footer-bg: #161b22;
  --color-footer-text: #8b949e;
  --color-panel-bg: #21262d;
  --color-panel-border: #30363d;
  --color-panel-header-bg: #2d333b;
  --color-link: #58a6ff;
  --color-link-hover: #79c0ff;
  --color-toggle-bg: #30363d;
  --color-toggle-icon: #f0f6fc;
  /* Dark theme form variables */
  --color-input-bg: #21262d;
  --color-input-bg-focus: #161b22;
  --color-input-text: #ffffff;
  --color-input-border: #30363d;
  --color-label: #d0d7de;
  --app-header-shadow: 0 4px 14px rgba(0,0,0,0.4);
  
  /* Override Bootstrap nav CSS variables for dark theme */
  --bs-nav-tabs-border-color: #30363d;
  --bs-nav-tabs-link-hover-border-color: #30363d #30363d transparent;
  --bs-nav-tabs-link-active-color: #58a6ff;
  --bs-nav-tabs-link-active-bg: #21262d;
  --bs-nav-tabs-link-active-border-color: #58a6ff #58a6ff #21262d;
  --bs-body-bg: #0d1117;
  --bs-border-color: #30363d;
}

/* This rule is replaced by UNIVERSAL LAYOUT section above */

body { transition: background-color .25s ease, color .25s ease; }

/* UNIVERSAL CONTAINER STYLES - remove Bootstrap constraints */
.container-fluid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* UNIVERSAL LAYOUT - Same for all themes */
html, body { 
  background: var(--color-bg-body) !important; 
  color: var(--color-text); 
  margin: 0; 
  padding: 0; 
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Ensure all page backgrounds use theme colors */
body {
  transition: background-color .25s ease, color .25s ease;
}

/* Remove any potential white gaps */
body * {
  box-sizing: border-box;
}

/* UNIVERSAL LAYOUT - Same for all themes */
.header-and-nav-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1030 !important;
  background: var(--color-header-bg) !important;
  box-shadow: var(--app-header-shadow);
}

/* UNIVERSAL HEADER LAYOUT */
.business-header {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* MoySklad specific full width */
body.theme-dark.moysklad-page .moysklad-content-wrapper { width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; }

/* Remove any Bootstrap breakpoint constraints */
@media (min-width: 576px) {
  body.theme-dark .container-fluid { max-width: 100% !important; }
}
@media (min-width: 768px) {
  body.theme-dark .container-fluid { max-width: 100% !important; }
}
@media (min-width: 992px) {
  body.theme-dark .container-fluid { max-width: 100% !important; }
}
@media (min-width: 1200px) {
  body.theme-dark .container-fluid { max-width: 100% !important; }
}
@media (min-width: 1400px) {
  body.theme-dark .container-fluid { max-width: 100% !important; }
}

/* Header / navigation overrides based on variables */
.business-header { background: var(--color-header-bg) !important; border-bottom: 1px solid var(--color-border) !important; }
.business-brand { color: var(--color-header-text) !important; }
.nav-default { color: var(--color-header-text) !important; }
.nav-default:hover { background: var(--color-bg-alt); border-color: var(--color-border); }
.nav-active { background: var(--color-bg-body); border: 1px solid var(--color-border) !important; color: var(--color-header-text) !important; }

/* UNIVERSAL CONTENT LAYOUT */
.main-content { 
  background: var(--color-bg-body); 
  color: var(--color-text); 
  padding-top: var(--app-header-height, 74px) !important;
  padding-bottom: 2rem !important; 
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  transition: padding-top .18s ease;
}

/* =============================================
   Универсальные адаптивные отступы контента
   Перенесено из раздела Продажи для остальных страниц
   .app-section-container можно использовать вокруг основного row
   Ширина всегда 100%, но внутренние горизонтальные отступы адаптивны
   ============================================= */
.app-section-container {
  width: 100%;
  margin: 0 auto;
  /* clamp: min 0.75rem, предпочтительно 2vw, макс 1.6rem */
  padding-left: clamp(0.75rem, 2vw, 1.6rem);
  padding-right: clamp(0.75rem, 2vw, 1.6rem);
}

/* Вариант узкого контейнера (если понадобится позже) */
.app-section-narrow { max-width: 1400px; }

/* На очень маленьких экранах немного уплотняем */
@media (max-width: 420px) {
  .app-section-container { padding-left: 0.65rem; padding-right: 0.65rem; }
}

/* Если включён полноэкранный режим (скрыта шапка) – ничего особого не нужно, но оставляем правило для ясности */
body.main-nav-hidden .app-section-container { padding-top: 0; }

/* =============================================
   Глобально фиксированная шапка (кроме Продажи уже реализованного)
   и адаптивный верхний отступ контента
   ============================================= */
/* Dark theme header/navigation contrast improvements */
body.theme-dark .business-header { 
  background: #161b22 !important; 
  border-bottom: 1px solid #30363d !important; 
}

body.theme-dark .business-brand { 
  color: #ffffff !important; 
}

body.theme-dark .business-brand:hover { 
  color: #58a6ff !important; 
}

body.theme-dark .nav-default { 
  color: #e6edf3 !important; 
}

body.theme-dark .nav-default:hover { 
  background: #21262d !important; 
  border-color: #30363d !important; 
  color: #ffffff !important;
}

body.theme-dark .nav-active { 
  background: #21262d !important; 
  border: 1px solid #58a6ff !important; 
  color: #ffffff !important;
}

/* User dropdown improvements for dark theme */
body.theme-dark .btn-outline-primary { 
  border-color: #58a6ff !important; 
  color: #58a6ff !important; 
}

body.theme-dark .btn-outline-primary:hover { 
  background: #58a6ff !important; 
  color: #ffffff !important; 
}

body.theme-dark .dropdown-menu { 
  background: #21262d !important; 
  border: 1px solid #30363d !important; 
}

body.theme-dark .dropdown-item { 
  color: #e6edf3 !important; 
}

body.theme-dark .dropdown-item:hover { 
  background: #58a6ff !important; 
  color: #ffffff !important; 
}

body.theme-dark .dropdown-header { 
  color: #ffffff !important; 
}

body.theme-dark .dropdown-item-text { 
  color: #8b949e !important; 
}

body.theme-dark .dropdown-divider { 
  border-color: #30363d !important; 
}

footer.footer-fixed, .footer-fixed { background: var(--color-footer-bg); color: var(--color-footer-text); transition: background-color .25s ease, color .25s ease; }

/* Generic panel support */
.panel, .card { background: var(--color-panel-bg); border-color: var(--color-panel-border); }

/* Links */
a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

/* Theme toggle button */
.theme-toggle-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--color-border); background: var(--color-toggle-bg); color: var(--color-toggle-icon); padding:4px 10px; border-radius:20px; font-size:12px; cursor:pointer; transition: background .2s, color .2s, border-color .2s; }
.theme-toggle-btn:hover { border-color: var(--color-accent); }
.theme-toggle-btn i { font-size:14px; }

/* Dark theme navigation contrast enhancements */
body.theme-dark .business-header { border-bottom:1px solid #30363d !important; }
body.theme-dark .nav-default:hover { background:#21262d; border-color:#30363d; color:#ffffff !important; }
body.theme-dark .nav-active { background:#21262d !important; border-color:#58a6ff !important; color:#ffffff !important; }
body.theme-dark .moysklad-nav-wrapper { background: var(--color-header-bg) !important; border-bottom:1px solid var(--color-border); position: relative; top: auto; z-index: auto; }
body.theme-dark .main-navigation .nav-tabs { background:#161b22 !important; }
body.theme-dark .main-navigation .nav-link { color:#e6edf3; background:transparent !important; }
body.theme-dark .main-navigation .nav-link:hover { background:#21262d !important; border-color:#30363d !important; color:#ffffff !important; }
body.theme-dark .main-navigation .nav-link.active { background:#21262d !important; color:#58a6ff !important; border-color:#58a6ff !important; }
body.theme-dark .main-navigation .nav-link.active::after { background:#58a6ff; }

/* Light theme navigation contrast enhancements */
body.theme-light .business-header { border-bottom:1px solid #dee2e6 !important; }
body.theme-light .nav-default:hover { background:#f8f9fa; border-color:#dee2e6; color:#0066cc !important; }
body.theme-light .nav-active { background:#ffffff !important; border-color:#0066cc !important; color:#0066cc !important; }
body.theme-light .moysklad-nav-wrapper { background: var(--color-header-bg) !important; border-bottom:1px solid var(--color-border); position: relative; top: auto; z-index: auto; }
body.theme-light .main-navigation .nav-tabs { background:#ffffff !important; }
body.theme-light .main-navigation .nav-link { color:#212529; background:transparent !important; }
body.theme-light .main-navigation .nav-link:hover { background:#f8f9fa !important; border-color:#dee2e6 !important; color:#0066cc !important; }
body.theme-light .main-navigation .nav-link.active { background:#ffffff !important; color:#0066cc !important; border-color:#0066cc !important; }
body.theme-light .main-navigation .nav-link.active::after { background:#0066cc; }

/* Force Bootstrap nav-tabs to use dark theme variables */
body.theme-dark .nav-tabs {
  --bs-nav-tabs-border-color: #30363d !important;
  --bs-nav-tabs-link-hover-border-color: #30363d #30363d transparent !important;
  --bs-nav-tabs-link-active-color: #58a6ff !important;
  --bs-nav-tabs-link-active-bg: #21262d !important;
  --bs-nav-tabs-link-active-border-color: #58a6ff #58a6ff #21262d !important;
  background: #161b22 !important;
  border-bottom-color: #30363d !important;
}

body.theme-dark .nav-tabs .nav-link {
  color: #e6edf3 !important;
  background: transparent !important;
}

body.theme-dark .nav-tabs .nav-link:hover {
  background: #21262d !important;
  border-color: #30363d #30363d transparent !important;
  color: #ffffff !important;
}

body.theme-dark .nav-tabs .nav-link.active {
  color: #58a6ff !important;
  background: #21262d !important;
  border-color: #58a6ff #58a6ff #21262d !important;
}

/* Force Bootstrap nav-tabs to use light theme variables */
body.theme-light .nav-tabs {
  --bs-nav-tabs-border-color: #dee2e6 !important;
  --bs-nav-tabs-link-hover-border-color: #dee2e6 #dee2e6 transparent !important;
  --bs-nav-tabs-link-active-color: #0066cc !important;
  --bs-nav-tabs-link-active-bg: #ffffff !important;
  --bs-nav-tabs-link-active-border-color: #0066cc #0066cc #ffffff !important;
  background: #ffffff !important;
  border-bottom-color: #dee2e6 !important;
}

body.theme-light .nav-tabs .nav-link {
  color: #212529 !important;
  background: transparent !important;
}

body.theme-light .nav-tabs .nav-link:hover {
  background: #f8f9fa !important;
  border-color: #dee2e6 #dee2e6 transparent !important;
  color: #0066cc !important;
}

body.theme-light .nav-tabs .nav-link.active {
  color: #0066cc !important;
  background: #ffffff !important;
  border-color: #0066cc #0066cc #ffffff !important;
}

/* Fix remaining white elements in dark theme */
body.theme-dark .main-tab-content { background: var(--color-bg-body) !important; border-top-color: var(--color-border) !important; }
body.theme-dark .container-fluid { background: transparent !important; }
body.theme-dark .nav { background: transparent !important; }
body.theme-dark .nav li { background: transparent !important; }

/* Fix remaining elements in light theme */
body.theme-light .main-tab-content { background: var(--color-bg-body) !important; border-top-color: var(--color-border) !important; }
body.theme-light .container-fluid { background: transparent !important; }
body.theme-light .nav { background: transparent !important; }
body.theme-light .nav li { background: transparent !important; }

/* Ensure buttons and dropdowns use theme colors in light theme */
body.theme-light .btn-outline-primary { 
  border-color: #0066cc !important; 
  color: #0066cc !important; 
}

body.theme-light .btn-outline-primary:hover { 
  background: #0066cc !important; 
  color: #ffffff !important; 
}

body.theme-light .dropdown-menu { 
  background: #ffffff !important; 
  border: 1px solid #dee2e6 !important; 
}

body.theme-light .dropdown-item { 
  color: #212529 !important; 
}

body.theme-light .dropdown-item:hover { 
  background: #f8f9fa !important; 
  color: #0066cc !important; 
}

body.theme-light .dropdown-header { 
  color: #212529 !important; 
}

body.theme-light .dropdown-item-text { 
  color: #6c757d !important; 
}

body.theme-light .dropdown-divider { 
  border-color: #dee2e6 !important; 
}

/* Store items styling */
.store-name {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.store-address {
  font-size: 0.85rem;
  line-height: 1.2;
}

.store-address {
  font-size: 0.85rem;
  line-height: 1.2;
}

/* Light theme (default) */
.store-name {
  color: #2c3e50;
}

.store-address {
  color: #9ca3af;  /* Еще более блеклый серый для подписи */
  opacity: 0.8;    /* Дополнительная прозрачность */
}

.no-stores-message {
  color: #6c757d;
}

.no-stores-message i {
  color: #adb5bd;
}

/* Dark theme */
body.theme-dark .store-name {
  color: #ffffff !important;
}

body.theme-dark .store-address {
  color: #6b7280 !important;  /* Более блеклый серый для подписи в темной теме */
  opacity: 0.7 !important;    /* Дополнительная прозрачность */
}

body.theme-dark .no-stores-message {
  color: #f8f9fa !important;
}

body.theme-dark .no-stores-message i {
  color: #e9ecef !important;
}