/**
 * Eleplasht shell — desktop app (≥992px) + native mobile app (<992px)
 * Works with panel (admin/vendor/delivery/outlet) and customer storefront.
 */

/* ========== TOKENS ========== */
:root {
  --ep-shell-radius: 12px;
  --ep-shell-radius-lg: 16px;
  --ep-tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px));
  --ep-titlebar-h: 52px;
  --ep-sidebar-w: 248px;
  --ep-content-max: 1280px;
  --ep-desktop-frame-shadow: 0 0 0 1px rgba(22, 80, 45, 0.06), 0 8px 32px rgba(22, 60, 40, 0.08);
}

/* ========== PANEL — MOBILE NATIVE APP ========== */
@media (max-width: 991.98px) {
  body.pnl-body {
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
  }

  body.pnl-body.has-pnl-tabbar {
    padding-bottom: var(--ep-tabbar-h);
  }

  .pnl-wrap { min-height: 100dvh; }

  /* Native app header — green gradient, compact */
  .pnl-top {
    min-height: var(--ep-titlebar-h);
    padding: calc(.35rem + env(safe-area-inset-top, 0px)) .75rem .4rem;
    background: var(--ep-gradient) !important;
    border-bottom: 0 !important;
    box-shadow: 0 2px 16px rgba(22, 80, 45, 0.18);
    color: #fff;
  }

  .pnl-page-title {
    color: #fff !important;
    font-size: .95rem !important;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .pnl-menu-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 0 !important;
    color: #fff !important;
    width: 38px;
    height: 38px;
  }

  .pnl-top .text-muted { color: rgba(255, 255, 255, 0.85) !important; }

  .ep-logout-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
  }

  .ep-logout-btn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
  }

  .pnl-content {
    padding: .65rem .65rem calc(.75rem + var(--ep-tabbar-h));
    background: var(--ep-bg);
  }

  /* Slide-in drawer sidebar */
  .pnl-sidebar {
    width: min(86vw, 300px);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.12);
    border-right: 0;
  }

  .pnl-sidebar .brand {
    padding: calc(.85rem + env(safe-area-inset-top, 0px)) 1rem .85rem;
    background: var(--ep-gradient);
    color: #fff !important;
    border-bottom: 0;
  }

  .pnl-sidebar .brand img {
    background: #fff;
    border-radius: 8px;
    padding: 2px 6px;
  }

  /* iOS/Android style bottom tab bar */
  .pnl-bottom {
    display: flex !important;
    align-items: stretch;
    min-height: var(--ep-tabbar-h);
    padding: .35rem .25rem env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(220, 232, 222, 0.9);
    box-shadow: 0 -1px 0 rgba(22, 80, 45, 0.04);
  }

  .pnl-bottom a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    font-size: .58rem;
    font-weight: 700;
    color: var(--ep-muted);
    padding: .25rem .1rem;
    border-radius: 12px;
    margin: 0 .04rem;
    transition: color .15s, background .15s;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .pnl-bottom a i {
    font-size: 1.15rem !important;
    line-height: 1;
  }

  .pnl-bottom a.active {
    color: var(--ep-primary);
    background: var(--ep-primary-muted);
  }

  .pnl-bottom a.ep-tab-menu {
    color: var(--ep-primary-dark);
  }

  .pnl-backdrop.show {
    backdrop-filter: blur(2px);
  }
}

/* ========== PANEL — DESKTOP APP (laptop+) ========== */
@media (min-width: 992px) {
  body.pnl-body {
    background: linear-gradient(160deg, #e8f5ec 0%, var(--ep-bg) 40%, #eef2f0 100%);
  }

  .pnl-wrap {
    display: block;
    min-height: 100vh;
    padding: 12px 12px 12px 0;
  }

  /* Fixed sidebar — desktop app navigation rail */
  .pnl-sidebar {
    position: fixed;
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: var(--ep-sidebar-w);
    transform: none !important;
    z-index: 1040;
    border-radius: var(--ep-shell-radius-lg);
    border: 1px solid var(--ep-border-soft);
    box-shadow: var(--ep-desktop-frame-shadow);
    background: var(--ep-surface);
    display: flex;
    flex-direction: column;
  }

  .pnl-sidebar .brand {
    padding: 1rem 1rem .85rem;
    border-bottom: 1px solid var(--ep-border-soft);
    flex-shrink: 0;
  }

  .pnl-sidebar .brand img { height: 32px; }

  .pnl-sidebar nav {
    flex: 1;
    overflow-y: auto;
    padding-bottom: .5rem;
  }

  .pnl-sidebar .nav-link {
    margin: .1rem .55rem;
    padding: .48rem .75rem;
    font-size: .84rem;
  }

  .pnl-sidebar .nav-link.active {
    box-shadow: inset 3px 0 0 var(--ep-primary);
    font-weight: 700;
  }

  .pnl-main {
    margin-left: calc(var(--ep-sidebar-w) + 24px);
    margin-right: 12px;
    width: calc(100% - var(--ep-sidebar-w) - 36px);
    min-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    background: var(--ep-surface);
    border-radius: var(--ep-shell-radius-lg);
    border: 1px solid var(--ep-border-soft);
    box-shadow: var(--ep-desktop-frame-shadow);
    overflow: hidden;
  }

  /* Desktop title bar */
  .pnl-top {
    min-height: var(--ep-titlebar-h);
    padding: 0 1.25rem;
    background: linear-gradient(180deg, #fafdfb 0%, var(--ep-surface) 100%) !important;
    border-bottom: 1px solid var(--ep-border-soft) !important;
    box-shadow: none;
    flex-shrink: 0;
  }

  .pnl-page-title {
    font-size: 1rem !important;
    font-weight: 800;
    color: var(--ep-text);
  }

  .pnl-top .ep-user-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .65rem .28rem .35rem;
    border-radius: 999px;
    background: var(--ep-primary-muted);
    color: var(--ep-primary-dark);
    font-size: .78rem;
    font-weight: 700;
  }

  .pnl-top .ep-user-chip .ep-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ep-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 800;
  }

  .pnl-content {
    flex: 1;
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
    max-height: calc(100vh - var(--ep-titlebar-h) - 24px);
  }

  .pnl-content-inner {
    width: 100%;
    max-width: none;
  }

  .ep-list-page,
  .pnl-page {
    width: 100%;
  }

  .ep-list-card .ep-table-wrap {
    max-height: calc(100vh - var(--ep-titlebar-h) - 180px);
    overflow: auto;
  }

  .pnl-bottom { display: none !important; }

  body.pnl-body.has-pnl-tabbar { padding-bottom: 0; }

  /* Desktop: KPI grid wider */
  .pnl-kpi-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .pnl-catalog-grid:not(.pnl-catalog-grid--order) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Desktop tables feel like app data grids */
  .pnl-content .table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .pnl-content .table thead th:first-child { border-radius: 8px 0 0 0; }
  .pnl-content .table thead th:last-child { border-radius: 0 8px 0 0; }

  .pnl-chart-wrap { height: 120px; }
}

@media (min-width: 1400px) {
  .pnl-wrap { padding: 16px 16px 16px 0; }
  .pnl-sidebar { left: 16px; top: 16px; bottom: 16px; }
  .pnl-main {
    margin-left: calc(var(--ep-sidebar-w) + 32px);
    margin-right: 16px;
    width: calc(100% - var(--ep-sidebar-w) - 48px);
    min-height: calc(100vh - 32px);
  }
}

/* ========== CUSTOMER STOREFRONT — MOBILE NATIVE ========== */
@media (max-width: 991.98px) {
  .app-header {
    padding-top: calc(.4rem + env(safe-area-inset-top, 0px));
    border-radius: 0 0 18px 18px;
  }

  .bottom-nav {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(220, 232, 222, 0.95);
    box-shadow: 0 -4px 24px rgba(22, 60, 40, 0.06);
    padding-top: .45rem;
  }

  .bottom-nav a {
    border-radius: 14px;
    margin: 0 .08rem;
    transition: background .15s, color .15s;
  }

  .bottom-nav a.active {
    background: var(--ep-primary-muted, color-mix(in srgb, var(--mp-primary) 14%, white));
    color: var(--mp-primary);
  }

  .has-bottom-nav {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .float-cart-fab {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--mp-primary) 35%, transparent);
  }

  .section { padding-left: .65rem; padding-right: .65rem; }
}

/* ========== CUSTOMER STOREFRONT — DESKTOP APP ========== */
@media (min-width: 992px) {
  body.has-bottom-nav {
    background: linear-gradient(160deg, #e8f5ec 0%, var(--mp-bg) 45%, #eef2f0 100%);
  }

  .app-container {
    max-width: min(100%, 1440px);
    margin: 16px auto;
    min-height: calc(100vh - 32px);
    background: var(--mp-card);
    border-radius: var(--ep-shell-radius-lg);
    border: 1px solid var(--ep-border-soft, var(--mp-border));
    box-shadow: var(--ep-desktop-frame-shadow);
    overflow: hidden;
  }

  .app-header {
    border-radius: 0;
    padding: .65rem 1.25rem 1rem;
    background: var(--ep-gradient, linear-gradient(135deg, var(--mp-primary), var(--mp-primary-dark))) !important;
  }

  .desk-nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 100%;
    padding: 0;
  }

  main {
    min-height: 50vh;
    padding-bottom: 1rem;
  }

  .section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .desk-footer {
    border-top: 1px solid var(--ep-border-soft, var(--mp-border));
    margin-top: auto;
  }

  /* Product grid — desktop catalog density */
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  }
}

/* ========== SHARED PREMIUM POLISH ========== */
.pnl-content-inner,
.pnl-page,
.ep-page {
  animation: epFadeIn .25s ease;
}

@keyframes epFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 992px) {
  .float-cart-fab {
    right: max(1.25rem, calc((100vw - 1440px) / 2 + 1.25rem));
  }
}
@media (hover: none) {
  .pnl-item-card:active,
  .pnl-kpi-card:active,
  .pnl-kpi-mini:active,
  .product-card:active {
    transform: scale(0.98);
    transition: transform .1s;
  }
}

/* Scrollbars — desktop app subtle */
@media (min-width: 992px) {
  .pnl-sidebar nav::-webkit-scrollbar,
  .pnl-content::-webkit-scrollbar {
    width: 6px;
  }
  .pnl-sidebar nav::-webkit-scrollbar-thumb,
  .pnl-content::-webkit-scrollbar-thumb {
    background: var(--ep-border);
    border-radius: 99px;
  }
}

.ep-user-chip { display: none; }

@media (min-width: 992px) {
  .pnl-top .ep-user-chip { display: inline-flex; }
  .pnl-top .d-md-inline.text-muted { display: none !important; }
}