/* Theme mapping & per-page tweaks.
   Tokens live in /static/css/tokens.css
   Reusable components live in /static/css/components.css
   Compatibility: html.dark is still supported (Tailwind/Flowbite).
*/

/* LK boot mask: hide tab panels until lk.js calls showTab() and
   removes html.lk-boot. Without this, a server-rendered panel briefly
   flashes if JS later switches to a different tab (e.g. preferredTab
   from localStorage differs from active_nav). */
html.lk-boot .lk-tab-panel { visibility: hidden; }

/* DAY page spacing/sticky tuning */
:root{
  --topbar-h: 50px;
  --sidebar-collapsed-w: 50px;
}

.lk-day-page{
  --day-sticky-gap: 12px;
  --day-after-top-gap: 12px;
}

/* Base canvas */
html, body{
  background-color: var(--bg);
  color: var(--text-1);
}

body{
  background: var(--bg) !important;
}

/* The dashboard base template sets `body.bg-white` via Tailwind.
   Keep the page canvas on `--bg` while `.bg-white` is used for cards/panels. */
body.bg-white{
  background-color: var(--bg) !important;
}

/* Layout: topbar/sidebar as surfaces */
nav[aria-label="Topbar"]{
  background-color: var(--surface-1) !important;
  border-bottom-color: var(--border) !important;
}

/* Sidebar collapse: prevent flash on refresh by honoring the early head bootstrap
   `html[data-sidebar-collapsed="1"]` before layout.js toggles classes. */
@media (min-width: 1024px){
  html[data-sidebar-collapsed="1"] main[aria-label="Content"]{
    margin-left: var(--sidebar-collapsed-w, 50px) !important;
  }

  html[data-sidebar-collapsed="1"] #drawer-navigation{
    width: var(--sidebar-collapsed-w, 50px) !important;
  }

  html[data-sidebar-collapsed="1"] #drawer-navigation [data-sidebar-label],
  html[data-sidebar-collapsed="1"] #drawer-navigation .sidebar-collapsible,
  html[data-sidebar-collapsed="1"] #drawer-navigation [data-sidebar-hide-when-collapsed]{
    display: none !important;
  }

  html[data-sidebar-collapsed="1"] #sidebarHeaderBar{
    justify-content: center !important;
  }

  html[data-sidebar-collapsed="1"] #drawer-navigation [data-sidebar-item]{
    justify-content: center !important;
    gap: 0 !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  html[data-sidebar-collapsed="1"] #drawer-navigation [data-sidebar-icon]{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html[data-sidebar-collapsed="1"] #drawer-navigation [data-icon="collapse-left"]{
    display: none !important;
  }
  html[data-sidebar-collapsed="1"] #drawer-navigation [data-icon="collapse-right"]{
    display: block !important;
  }
}

aside[aria-label="Sidebar"],
#sidebarHeaderBar{
  background-color: var(--surface-1) !important;
  border-color: var(--border) !important;
}

/* Common panels/cards */
.bg-white{ background-color: var(--surface-1) !important; }
.bg-gray-50,
.bg-gray-100{ background-color: var(--surface-2) !important; }

html[data-theme="dark"] .dark\:bg-gray-900,
html.dark .dark\:bg-gray-900{ background-color: var(--bg) !important; }

html[data-theme="dark"] .dark\:bg-gray-800,
html.dark .dark\:bg-gray-800{ background-color: var(--surface-1) !important; }

html[data-theme="dark"] .dark\:bg-gray-700,
html.dark .dark\:bg-gray-700{ background-color: var(--surface-2) !important; }

/* Text mapping */
.text-gray-900{ color: var(--text-1) !important; }
.text-gray-700,
.text-gray-600,
.text-gray-500{ color: var(--text-2) !important; }

html[data-theme="dark"] .dark\:text-white,
html.dark .dark\:text-white,
html[data-theme="dark"] .dark\:text-gray-50,
html.dark .dark\:text-gray-50,
html[data-theme="dark"] .dark\:text-gray-100,
html.dark .dark\:text-gray-100,
html[data-theme="dark"] .dark\:text-gray-200,
html.dark .dark\:text-gray-200{ color: var(--text-1) !important; }

html[data-theme="dark"] .dark\:text-gray-300,
html.dark .dark\:text-gray-300,
html[data-theme="dark"] .dark\:text-gray-400,
html.dark .dark\:text-gray-400,
html[data-theme="dark"] .dark\:text-gray-500,
html.dark .dark\:text-gray-500{ color: var(--text-2) !important; }

/* Borders / dividers */
.border-gray-100,
.border-gray-200,
.border-gray-300{ border-color: var(--border) !important; }

html[data-theme="dark"] .dark\:border-gray-700,
html.dark .dark\:border-gray-700,
html[data-theme="dark"] .dark\:border-gray-600,
html.dark .dark\:border-gray-600{ border-color: var(--border) !important; }

.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-gray-200 > :not([hidden]) ~ :not([hidden]){ border-color: var(--border) !important; }

html[data-theme="dark"] .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]),
html[data-theme="dark"] .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]),
html.dark .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]){ border-color: var(--border) !important; }

/* Shadows */
.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl{ box-shadow: var(--shadow) !important; }

/* (lift, segmented controls, apple-table and pills moved to components.css) */

/* Keep Sales deltas compact (JS may rewrite className) */
#salesOrderedDelta,
#salesDeliveredDelta{
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

/* Accent buttons (Tailwind blue-600) */
.bg-blue-600{ background-color: var(--accent) !important; }
html[data-theme="dark"] .dark\:bg-blue-600,
html.dark .dark\:bg-blue-600{ background-color: var(--accent) !important; }

.hover\:bg-blue-700:hover,
html[data-theme="dark"] .dark\:hover\:bg-blue-700:hover,
html.dark .dark\:hover\:bg-blue-700:hover{
  background-color: color-mix(in srgb, var(--accent) 88%, #000) !important;
}

/* Neutral hovers: light -> surface-2, dark -> surface-2 (gentle, no jumps) */
.hover\:bg-gray-100:hover,
.hover\:bg-gray-50:hover{ background-color: var(--surface-2) !important; }

html[data-theme="dark"] .dark\:hover\:bg-gray-700:hover,
html.dark .dark\:hover\:bg-gray-700:hover,
html[data-theme="dark"] .dark\:hover\:bg-gray-600:hover,
html.dark .dark\:hover\:bg-gray-600:hover,
html[data-theme="dark"] .dark\:hover\:bg-gray-800:hover,
html.dark .dark\:hover\:bg-gray-800:hover{ background-color: var(--surface-2) !important; }

/* Inputs */
input.bg-gray-50,
select.bg-gray-50,
textarea.bg-gray-50{ background-color: var(--surface-2) !important; }

html[data-theme="dark"] input.dark\:bg-gray-700,
html.dark input.dark\:bg-gray-700,
html[data-theme="dark"] select.dark\:bg-gray-700,
html.dark select.dark\:bg-gray-700,
html[data-theme="dark"] textarea.dark\:bg-gray-700,
html.dark textarea.dark\:bg-gray-700{ background-color: var(--surface-2) !important; }

input,
select,
textarea{
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}

::placeholder{ color: var(--text-3); }

/* Focus: soft ring from accent */
:is(input,select,textarea,button,a,[role="button"]):focus-visible{
  outline: none;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

:is(button,a,[role="button"]):focus:not(:focus-visible){
  outline: none;
  box-shadow: none !important;
}

:is(input,select,textarea):focus{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
}

/* DAY page: overflow must not be hidden/auto/scroll so that position:sticky on
   table headers works relative to the viewport.  Rounded corners are sacrificed
   (clip-path would clip the sticky header when it leaves the element bounds). */
.lk-day-page .apple-table-wrap{
  overflow: visible;
  clip-path: none;
  border-radius: 18px;
}

/* DAY page: keep visible rounded corners without clipping sticky header. */
.lk-day-page #dayThead tr:first-child th:first-child{ border-top-left-radius: 18px; }
.lk-day-page #dayThead tr:first-child th:last-child{ border-top-right-radius: 18px; }
.lk-day-page #dayTableBody tr:last-child td:first-child{ border-bottom-left-radius: 18px; }
.lk-day-page #dayTableBody tr:last-child td:last-child{ border-bottom-right-radius: 18px; }

/* DAY: keep table header above body rows but below the unified sticky top bar */
.lk-day-page .apple-table--day thead th.day-th{
  z-index: 35;
}

/* DAY page: vertical sticky is JS-driven via translateY on thead.
   Neutralize top-sticky from Tailwind classes; keep left-sticky for first columns. */
.lk-day-page #dayThead th.day-th{
  top: auto !important;
}

/* The JS-driven sticky thead needs will-change for smooth GPU compositing
   and a z-index high enough to cover rows scrolling underneath. */
.lk-day-page #dayThead{
  z-index: 35;
}

.lk-day-page #dayThead th.day-th{
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* DAY top controls are NOT sticky (only table header is sticky) */
.lk-day-page #dayTopSticky{
  position: static;
  top: auto;
  z-index: auto;
}

/* Native table thead is used (no duplicated sticky header layer) */

/* KPI subtle hover highlight + cursor */
.lk-day-page .day-kpi-item{
  border-radius: 12px;
  cursor: default;
  transition: background-color 180ms cubic-bezier(0.2,0.8,0.2,1);
}
@media (hover:hover) and (pointer:fine){
  .lk-day-page .day-kpi-item:hover{
    background-color: color-mix(in srgb, var(--surface-1) 70%, transparent);
  }
}

/* Day table: horizontal scroll only; page handles vertical scroll.
   JS handles sticky thead via transform. */
.lk-day-page #dayTableScroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* DAY: "Компактно" switch must stay green when ON in dark theme.
   Our theme overrides `dark:bg-gray-700` with `!important`, which can win over Tailwind's peer-checked rule.
   Force the checked track color for this specific control. */
html[data-theme="dark"] .lk-day-page #dayDenseToggle:checked + div,
html.dark .lk-day-page #dayDenseToggle:checked + div{
  background-color: rgb(34 197 94) !important; /* tailwind green-500 */
}

/* DAY: column picker checkboxes visibility (esp. light theme).
   Use accent-color so the checked state is clearly visible without fighting theme overrides. */
.lk-day-page #dayColsMenu input[type="checkbox"]{
  accent-color: var(--accent);
  -webkit-appearance: auto;
  appearance: auto;
}

.lk-day-page #dayColsMenu input[type="checkbox"]:not(:checked){
  background-color: var(--surface-1) !important;
  border-color: var(--border) !important;
}
.lk-day-page #dayColsMenu input[type="checkbox"]:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent) !important;
}

/* LK settings: Articles column picker — same treatment as DAY page. */
.lk-page #featuredColsMenu input[type="checkbox"]{
  accent-color: var(--accent);
  -webkit-appearance: auto;
  appearance: auto;
}
.lk-page #featuredColsMenu input[type="checkbox"]:not(:checked){
  background-color: var(--surface-1) !important;
  border-color: var(--border) !important;
}
.lk-page #featuredColsMenu input[type="checkbox"]:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent) !important;
}

/* SKU DeepDive: «Колонки»/«Метрики» пикеры — те же галочки, что на DAY
   (Tailwind CDN forms ставит appearance:none и галочка пропадает). */
.lk-sku-detail-page #skuMetricsMenu input[type="checkbox"],
.lk-sku-detail-page #skuCampaignsColsMenu input[type="checkbox"]{
  accent-color: var(--accent);
  -webkit-appearance: auto;
  appearance: auto;
}
.lk-sku-detail-page #skuMetricsMenu input[type="checkbox"]:not(:checked),
.lk-sku-detail-page #skuCampaignsColsMenu input[type="checkbox"]:not(:checked){
  background-color: var(--surface-1) !important;
  border-color: var(--border) !important;
}
.lk-sku-detail-page #skuMetricsMenu input[type="checkbox"]:focus-visible,
.lk-sku-detail-page #skuCampaignsColsMenu input[type="checkbox"]:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent) !important;
}

/* LK settings: featured SKU checkboxes (ВКЛ) must be clearly visible in light theme too. */
.lk-page #featuredSkuTbody input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.25rem;
  border: 2px solid #9ca3af;
  background-color: #ffffff;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8);
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

.lk-page #featuredSkuTbody input[type="checkbox"]:checked{
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4 6.7 12l6.1-7.2' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.8rem 0.8rem;
  box-shadow: none;
}

.lk-page #featuredSkuTbody input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}

html[data-theme="dark"] .lk-page #featuredSkuTbody input[type="checkbox"],
html.dark .lk-page #featuredSkuTbody input[type="checkbox"]{
  border-color: #6b7280;
  background-color: #111827;
  box-shadow: none;
}

/* DAY page: make group totals a bit more noticeable (esp. revenue & DRR) */
.lk-day-page .day-total-emph{
  font-size: 14px;
  letter-spacing: -0.01em;
}
@media (min-width: 768px){
  .lk-day-page .day-total-emph{
    font-size: 15px;
  }
}

/* Settings page: featured SKU table header sticks under topbar via JS translate. */
.lk-page #featuredSkuThead{
  z-index: 35;
}

.lk-page #featuredSkuThead th.featured-sku-th{
  position: relative;
  z-index: 35;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Pills moved to components.css */

/* ===== PERIOD page (РНП Период) ===== */
.lk-period-page{
  --day-sticky-gap: 12px;
  --day-after-top-gap: 12px;
}

.lk-period-page .apple-table-wrap{
  overflow: visible;
  clip-path: none;
  border-radius: 18px;
}

.lk-period-page #periodThead tr:first-child th:first-child{ border-top-left-radius: 18px; }
.lk-period-page #periodThead tr:first-child th:last-child{ border-top-right-radius: 18px; }
.lk-period-page #periodTableBody tr:last-child td:first-child{ border-bottom-left-radius: 18px; }
.lk-period-page #periodTableBody tr:last-child td:last-child{ border-bottom-right-radius: 18px; }

.lk-period-page #periodThead{
  z-index: 35;
}

.lk-period-page #periodThead th.period-th{
  z-index: 35;
  top: auto !important;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Frozen header cells: higher z so they stay above siblings during h-scroll */
.lk-period-page #periodThead th.period-th[data-col="image"]{
  z-index: 40;
}
.lk-period-page #periodThead th.period-th[data-col="article"]{
  z-index: 39;
}

/* Frozen body cells: stay above siblings during h-scroll */
.lk-period-page #periodTableBody td[data-col="image"]{
  position: sticky;
  left: 0;
  z-index: 3;
}
.lk-period-page #periodTableBody td[data-col="article"]{
  position: sticky;
  left: 32px;
  z-index: 2;
}

/* Pill cells (status, priority, abc) must not clip their badges */
.lk-period-page #periodTable td[data-col="status"],
.lk-period-page #periodTable td[data-col="priority"],
.lk-period-page #periodTable td[data-col="abc"]{
  overflow: visible;
}

/* Status pill uniform width */
.lk-period-page #periodTable td[data-col="status"] .apple-pill{
  min-width: 68px;
  text-align: center;
  display: inline-block;
}

/* Priority: lightweight border-only badge */
.period-priority-badge{
  display: inline-block;
  min-width: 52px;
  text-align: center;
  font-size: 9px;
  line-height: 1.4;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid rgb(209 213 219); /* gray-300 */
  color: rgb(156 163 175);            /* gray-400 */
  background: transparent;
}
.period-priority-badge--medium{
  border-color: rgb(251 146 60);  /* orange-400 */
  color: rgb(234 88 12);          /* orange-600 */
}
.period-priority-badge--high{
  border-color: rgb(248 113 113); /* red-400 */
  color: rgb(220 38 38);         /* red-600 */
}

.lk-period-page #periodTopSticky{
  position: static;
  top: auto;
  z-index: auto;
}

.lk-period-page #periodTableScroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html[data-theme="dark"] .lk-period-page #periodDenseToggle:checked + div,
html.dark .lk-period-page #periodDenseToggle:checked + div{
  background-color: rgb(34 197 94) !important;
}

.lk-period-page #periodColsMenu input[type="checkbox"]{
  accent-color: var(--accent);
  -webkit-appearance: auto;
  appearance: auto;
}

.lk-period-page #periodColsMenu input[type="checkbox"]:not(:checked){
  background-color: var(--surface-1) !important;
  border-color: var(--border) !important;
}