/*
 * EPHARO AI 2060 – PRODUCT DRAWER SURFACES
 *
 * Vzhladova vrstva.
 * Nesmie menit:
 * - display,
 * - visibility,
 * - pointer-events,
 * - polohu stlpcov,
 * - open/active/selected logiku.
 */

:root {
  color-scheme: light;

  --eph-drawer-level-2-top: #f3f7f4;
  --eph-drawer-level-2-bottom: #eaf1ec;

  --eph-drawer-level-3-top: #f8faf8;
  --eph-drawer-level-3-bottom: #f0f5f2;

  --eph-drawer-ai-top: #eef5f0;
  --eph-drawer-ai-bottom: #e6efe9;

  --eph-drawer-border: rgba(21, 91, 52, 0.19);
  --eph-drawer-divider: rgba(21, 91, 52, 0.25);

  --eph-drawer-text: #173d29;
  --eph-drawer-muted: #52685a;
}

/*
 * Aktuálne EPHARO je vedome Light.
 * Dark sa nespusta automaticky podla Macu.
 * Neskor ho aktivuje iba:
 *
 * html[data-eph-theme="dark"]
 */

#eph-nav-drawer .eph-nav-children {
  background:
    linear-gradient(
      180deg,
      var(--eph-drawer-level-2-top),
      var(--eph-drawer-level-2-bottom)
    ) !important;

  border-right:
    1px solid var(--eph-drawer-divider) !important;
}

#eph-nav-drawer .eph-nav-children-2 {
  background:
    linear-gradient(
      180deg,
      var(--eph-drawer-level-3-top),
      var(--eph-drawer-level-3-bottom)
    ) !important;

  border-right:
    1px solid var(--eph-drawer-divider) !important;
}

/*
 * AI karta patri do rovnakeho systemu,
 * ale je opticky oddelena ako vysledok vyberu.
 */
#eph-nav-preview {
  background:
    linear-gradient(
      155deg,
      var(--eph-drawer-ai-top) 0%,
      var(--eph-drawer-ai-bottom) 100%
    ) !important;

  border:
    1px solid var(--eph-drawer-border) !important;

  box-shadow:
    0 18px 44px rgba(18, 55, 34, 0.13) !important;

  color:
    var(--eph-drawer-text) !important;
}

#eph-nav-preview :is(
  h1,
  h2,
  h3,
  h4,
  .eph-preview-title,
  .eph-product-preview-title
) {
  color:
    var(--eph-drawer-text) !important;
}

#eph-nav-preview :is(
  p,
  .eph-preview-description,
  .eph-product-preview-description
) {
  color:
    var(--eph-drawer-muted) !important;
}

/*
 * Produktovy kontext.
 */
#eph-nav-preview .eph-ai2060-product-meta {
  display: grid;
  gap: 5px;
  margin: 14px 0 16px;
  padding: 12px 14px;

  border:
    1px solid rgba(21, 91, 52, 0.14);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.48);
}

#eph-nav-preview .eph-ai2060-product-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;

  font-size: 13px;
  line-height: 1.35;
}

#eph-nav-preview .eph-ai2060-product-meta-label {
  color: #63766a;
}

#eph-nav-preview .eph-ai2060-product-meta-value {
  color: #173d29;
  font-weight: 700;
  text-align: right;
}

#eph-nav-preview .eph-ai2060-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 17px;
}

#eph-nav-preview .eph-ai2060-action {
  min-height: 40px;
  padding: 9px 15px;

  border:
    1px solid rgba(17, 99, 55, 0.24);

  border-radius: 999px;

  font: inherit;
  font-size: 13px;
  font-weight: 750;

  cursor: pointer;
}

#eph-nav-preview .eph-ai2060-action-primary {
  background: #146b3b;
  color: #fff;
}

#eph-nav-preview .eph-ai2060-action-secondary {
  background: rgba(255, 255, 255, 0.66);
  color: #145c33;
}

#eph-nav-preview .eph-ai2060-action-ai {
  background: #0d5430;
  color: #fff;
}

#eph-nav-preview .eph-ai2060-action:hover {
  transform: translateY(-1px);
}

#eph-nav-preview .eph-ai2060-status {
  margin-top: 10px;
  min-height: 18px;

  color: #496052;
  font-size: 12px;
  font-weight: 650;
}

/*
 * Buduci explicitny dark rezim.
 * Zatial sa neaktivuje automaticky.
 */
html[data-eph-theme="dark"] {
  color-scheme: dark;

  --eph-drawer-level-2-top: #18271f;
  --eph-drawer-level-2-bottom: #14231b;

  --eph-drawer-level-3-top: #203129;
  --eph-drawer-level-3-bottom: #1a2a22;

  --eph-drawer-ai-top: #273b30;
  --eph-drawer-ai-bottom: #1e3027;

  --eph-drawer-border: rgba(151, 214, 174, 0.20);
  --eph-drawer-divider: rgba(151, 214, 174, 0.21);

  --eph-drawer-text: #e8f3eb;
  --eph-drawer-muted: #b5c7ba;
}

/*
 * EPHARO AI 2060 – compact notebook preview
 *
 * Keeps the existing preview logic and actions.
 * Only reduces vertical consumption on common notebook screens.
 */

@media (
  min-width: 1100px
) and (
  max-height: 900px
) {
  #eph-nav-preview {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  #eph-nav-preview :is(
    .eph-preview-inner,
    .eph-product-preview-content,
    [data-preview-content]
  ) {
    padding-top: 14px !important;
    padding-bottom: 16px !important;
  }

  #eph-nav-preview :is(
    .eph-preview-image,
    .eph-product-preview-image,
    [data-preview-image]
  ) {
    width: auto !important;
    max-width: 190px !important;
    max-height: 175px !important;
    margin-top: 6px !important;
    margin-bottom: 8px !important;
    object-fit: contain !important;
  }

  #eph-nav-preview :is(
    .eph-preview-title,
    .eph-product-preview-title
  ) {
    margin-top: 7px !important;
    margin-bottom: 7px !important;

    font-size: 19px !important;
    line-height: 1.16 !important;
  }

  #eph-nav-preview :is(
    .eph-preview-description,
    .eph-product-preview-description
  ) {
    display: -webkit-box;

    margin-top: 0 !important;
    margin-bottom: 9px !important;

    overflow: hidden;

    font-size: 13px !important;
    line-height: 1.38 !important;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  #eph-nav-preview .eph-ai2060-product-meta {
    gap: 3px;
    margin: 8px 0 9px;
    padding: 9px 11px;
  }

  #eph-nav-preview .eph-ai2060-product-meta-row {
    font-size: 12px;
    line-height: 1.28;
  }

  #eph-nav-preview .eph-ai2060-product-actions {
    gap: 7px;
    margin-top: 9px;
  }

  #eph-nav-preview .eph-ai2060-action {
    min-height: 35px;
    padding: 7px 12px;
    font-size: 12px;
  }

  #eph-nav-preview .eph-ai2060-status {
    margin-top: 6px;
    min-height: 14px;
    font-size: 11px;
  }
}

/* EPHARO_PREVIEW_CLOSE_X_ONLY_V1
 * Scope: ONLY the existing data-preview-close-all control in the 4th column.
 * No DOM creation, no JS, no category icons, no product logic.
 */
#eph-nav-preview .eph-preview-top [data-preview-close-all]{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 38px !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  max-width:38px !important;
  max-height:38px !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(14,82,49,.20) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.96) !important;
  color:#145c39 !important;
  box-shadow:0 3px 12px rgba(14,82,49,.08) !important;
  cursor:pointer !important;
  line-height:1 !important;
  opacity:1 !important;
  visibility:visible !important;
}

#eph-nav-preview .eph-preview-top [data-preview-close-all] > span{
  position:relative !important;
  display:block !important;
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  font-size:0 !important;
  line-height:0 !important;
}

#eph-nav-preview .eph-preview-top [data-preview-close-all] > span::before,
#eph-nav-preview .eph-preview-top [data-preview-close-all] > span::after{
  content:"" !important;
  position:absolute !important;
  left:7px !important;
  top:1px !important;
  width:2px !important;
  height:14px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:2px !important;
  background:currentColor !important;
  opacity:1 !important;
  transform-origin:center !important;
}

#eph-nav-preview .eph-preview-top [data-preview-close-all] > span::before{
  transform:rotate(45deg) !important;
}

#eph-nav-preview .eph-preview-top [data-preview-close-all] > span::after{
  transform:rotate(-45deg) !important;
}

#eph-nav-preview .eph-preview-top [data-preview-close-all]:hover,
#eph-nav-preview .eph-preview-top [data-preview-close-all]:focus-visible{
  background:#eef8f2 !important;
  border-color:rgba(14,82,49,.38) !important;
  outline:none !important;
}

/* EPHARO_DRAWER_CLOSE_X_PLATFORM_UI_V1
 * Reuses ONLY the existing data-preview-close-all button.
 * Visual contract copied from the existing Product Assistant / Solution Viewer close UI.
 */
#eph-nav-preview .eph-preview-top [data-preview-close-all]{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  max-width:38px !important;
  max-height:38px !important;
  flex:0 0 38px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid rgba(21,91,52,.15) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.82) !important;
  color:#194a30 !important;
  box-shadow:none !important;
  opacity:1 !important;
  visibility:visible !important;
  cursor:pointer !important;
  font-size:0 !important;
  line-height:1 !important;
}

#eph-nav-preview .eph-preview-top [data-preview-close-all] > span{
  display:none !important;
}

#eph-nav-preview .eph-preview-top [data-preview-close-all]::before{
  content:"×" !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  color:inherit !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:25px !important;
  font-weight:400 !important;
  line-height:1 !important;
  transform:translateY(-1px) !important;
}

#eph-nav-preview .eph-preview-top [data-preview-close-all]:hover,
#eph-nav-preview .eph-preview-top [data-preview-close-all]:focus-visible{
  background:#eef8f2 !important;
  border-color:rgba(21,91,52,.30) !important;
  outline:none !important;
}