/**
 * Eleplasht unified compact UI — green brand system (customer + all panels).
 * Brand hue comes from --ep-primary (set in layout from admin brand_color).
 */
:root {
  --ep-radius: 14px;
  --ep-radius-sm: 10px;
  --ep-bg: #f3f7f4;
  --ep-surface: #ffffff;
  --ep-border: #dce8de;
  --ep-border-soft: #e8f0ea;
  --ep-text: #1a2e22;
  --ep-muted: #64748b;
  --ep-shadow: 0 2px 10px rgba(22, 80, 45, 0.07);
  --ep-primary-muted: color-mix(in srgb, var(--ep-primary) 14%, white);
  --ep-primary-soft: color-mix(in srgb, var(--ep-primary) 10%, transparent);
  --ep-gradient: linear-gradient(135deg, var(--ep-primary-deep, var(--ep-primary-dark)), var(--ep-primary), var(--ep-primary-light));
}

/* ---------- Bootstrap brand overrides ---------- */
.text-primary { color: var(--ep-primary) !important; }
.bg-primary { background-color: var(--ep-primary) !important; }
.border-primary { border-color: var(--ep-primary) !important; }
.btn-primary {
  --bs-btn-bg: var(--ep-primary);
  --bs-btn-border-color: var(--ep-primary);
  --bs-btn-hover-bg: var(--ep-primary-dark);
  --bs-btn-hover-border-color: var(--ep-primary-dark);
  --bs-btn-active-bg: var(--ep-primary-dark);
  --bs-btn-active-border-color: var(--ep-primary-dark);
  --bs-btn-disabled-bg: var(--ep-primary);
  --bs-btn-disabled-border-color: var(--ep-primary);
  font-weight: 700;
  border-radius: var(--ep-radius-sm);
}
.btn-success { border-radius: var(--ep-radius-sm); font-weight: 700; }
.btn-outline-primary {
  --bs-btn-color: var(--ep-primary);
  --bs-btn-border-color: var(--ep-primary);
  --bs-btn-hover-bg: var(--ep-primary);
  --bs-btn-hover-border-color: var(--ep-primary);
  border-radius: var(--ep-radius-sm);
  font-weight: 700;
}
.btn-outline-secondary { border-radius: var(--ep-radius-sm); }
.badge.bg-primary { background-color: var(--ep-primary) !important; }
a { color: var(--ep-primary); }
a:hover { color: var(--ep-primary-dark); }

/* ---------- Shared icon chip ---------- */
.ep-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--ep-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ep-primary-muted);
  color: var(--ep-primary);
  font-size: 1rem;
  flex-shrink: 0;
}
.ep-ico-lg { width: 40px; height: 40px; font-size: 1.1rem; }

/* ---------- Customer app shell ---------- */
body { background: var(--ep-bg); color: var(--ep-text); }
.app-container { background: var(--ep-bg); }
.app-header {
  background: var(--ep-gradient) !important;
  box-shadow: 0 2px 12px rgba(22, 80, 45, 0.15);
}
.bottom-nav {
  border-top-color: var(--ep-border-soft);
  background: var(--ep-surface);
}
.bottom-nav a.active { color: var(--ep-primary); }
.card-soft, .product-card, .flash-card {
  border-radius: var(--ep-radius);
  border-color: var(--ep-border-soft);
}
.btn-accent, .btn-checkout {
  background: var(--ep-primary) !important;
  border-color: var(--ep-primary) !important;
}

/* ---------- Panel shell (admin / vendor / delivery / outlet) ---------- */
body.pnl-body {
  background: var(--ep-bg);
  color: var(--ep-text);
}
.pnl-sidebar {
  background: var(--ep-surface);
  border-right-color: var(--ep-border-soft);
}
.pnl-sidebar .brand {
  color: var(--ep-primary);
  border-bottom-color: var(--ep-border-soft);
  font-size: .95rem;
}
.pnl-sidebar .nav-link {
  font-size: .86rem;
  font-weight: 600;
  border-radius: var(--ep-radius-sm);
  margin: .12rem .45rem;
  padding: .5rem .85rem;
}
.pnl-sidebar .nav-link.active {
  background: var(--ep-primary-muted);
  color: var(--ep-primary);
  box-shadow: inset 3px 0 0 var(--ep-primary);
}
.pnl-sidebar .nav-link:hover:not(.active) {
  background: var(--ep-primary-soft);
  color: var(--ep-primary-dark);
}
.pnl-sidebar .nav-link i { font-size: 1.05rem; opacity: .9; }
.pnl-top {
  background: var(--ep-surface);
  border-bottom-color: var(--ep-border-soft);
  box-shadow: 0 1px 0 var(--ep-border-soft);
}
.pnl-top .btn-outline-secondary {
  border-color: var(--ep-border);
  color: var(--ep-muted);
  font-size: .78rem;
  padding: .25rem .65rem;
}
.pnl-bottom {
  background: var(--ep-surface);
  border-top-color: var(--ep-border-soft);
  box-shadow: 0 -2px 12px rgba(22, 80, 45, 0.06);
}
.pnl-bottom a.active { color: var(--ep-primary); }

/* ---------- Compact components inside all panel pages ---------- */
.pnl-content .card,
.pnl-content > .card {
  background: var(--ep-surface);
  border: 1px solid var(--ep-border-soft);
  border-radius: var(--ep-radius);
  box-shadow: var(--ep-shadow);
}
.pnl-content .card.p-3,
.pnl-content .card.p-4 { padding: .85rem !important; }
.pnl-content h5 { font-size: .95rem; font-weight: 800; }
.pnl-content h6 { font-size: .88rem; font-weight: 800; }
.pnl-content .form-control,
.pnl-content .form-select {
  border-radius: var(--ep-radius-sm);
  border-color: var(--ep-border);
  font-size: .88rem;
  padding: .5rem .75rem;
}
.pnl-content .form-control:focus,
.pnl-content .form-select:focus {
  border-color: var(--ep-primary);
  box-shadow: 0 0 0 3px var(--ep-primary-soft);
}
.pnl-content .btn { font-size: .82rem; font-weight: 700; }
.pnl-content .btn-sm { font-size: .75rem; padding: .28rem .55rem; }
.pnl-content .alert {
  border-radius: var(--ep-radius-sm);
  font-size: .82rem;
  border-color: var(--ep-border-soft);
}
.pnl-content .table {
  font-size: .82rem;
  --bs-table-bg: transparent;
}
.pnl-content .table thead th {
  background: var(--ep-primary-muted);
  color: var(--ep-primary-dark);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-bottom-color: var(--ep-border);
  white-space: nowrap;
}
.pnl-content .table-hover tbody tr:hover {
  background: var(--ep-primary-soft);
}
.pnl-content .stat-card {
  background: var(--ep-surface);
  border: 1px solid var(--ep-border-soft);
  border-radius: var(--ep-radius);
  box-shadow: var(--ep-shadow);
}
.pnl-content .stat-card .ico {
  width: 36px;
  height: 36px;
  border-radius: var(--ep-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ep-primary-muted);
  color: var(--ep-primary);
}

/* Panel lazy-list components */
.pnl-item-card,
.pnl-catalog-card,
.pnl-kpi-card,
.pnl-kpi-mini {
  border-color: var(--ep-border-soft);
  background: var(--ep-surface);
}
.pnl-search-wrap .form-control:focus {
  border-color: var(--ep-primary);
  box-shadow: 0 0 0 3px var(--ep-primary-soft);
}
.pnl-fab-btn {
  background: var(--ep-primary);
  box-shadow: 0 4px 14px var(--ep-primary-soft);
}
.pnl-filter-chip.active {
  background: var(--ep-primary);
  border-color: var(--ep-primary);
}
.pnl-chart-total,
.pnl-catalog-price { color: var(--ep-primary); }
.pnl-lazy-loader .pnl-dot { background: var(--ep-primary); }

/* POS uses same green accent */
.pos-section-head h2 i,
.pos-badge,
.pos-quick-item:hover { color: var(--ep-primary); }
.pos-search-wrap .form-control:focus { border-color: var(--ep-primary); }

/* Auth pages */
.auth-panel-body .btn-primary,
.auth-app-body .btn-primary {
  background: var(--ep-primary);
  border-color: var(--ep-primary);
}

.pnl-kpi-card .ico,
.pnl-kpi-card .ep-ico { margin: 0 auto .25rem; }

.ep-logout-btn {
  border-color: var(--ep-primary);
  color: var(--ep-primary);
  font-weight: 700;
}
.ep-logout-btn:hover {
  background: var(--ep-primary);
  color: #fff;
}

@media (max-width: 991px) {
  .pnl-content .table-responsive {
    border-radius: var(--ep-radius-sm);
    border: 1px solid var(--ep-border-soft);
  }
}

/* ---------- Compact list pages (tables + mobile rows) ---------- */
.ep-list-page { width: 100%; }
.ep-list-card {
  overflow: hidden;
  padding: 0 !important;
}
.ep-list-card > .ep-list-toolbar {
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--ep-border-soft);
  background: linear-gradient(180deg, #fafdfb 0%, var(--ep-surface) 100%);
}
.ep-list-meta {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.ep-count-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ep-primary-dark);
  background: var(--ep-primary-muted);
  border-radius: 999px;
  padding: .35rem .7rem;
  white-space: nowrap;
}
.ep-data-table thead th { position: sticky; top: 0; z-index: 1; }

.ep-mobile-rows {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .65rem;
}
.ep-mobile-row {
  display: block;
  position: relative;
  padding: .7rem 2.4rem .7rem .75rem;
  border: 1px solid var(--ep-border-soft);
  border-radius: var(--ep-radius-sm);
  background: var(--ep-surface);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--ep-shadow);
  transition: transform .12s, border-color .12s;
}
.ep-mobile-row:active { transform: scale(0.99); border-color: var(--ep-primary); }
.ep-mobile-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .2rem;
}
.ep-mobile-row-title {
  font-size: .84rem;
  font-weight: 800;
  color: var(--ep-text);
}
.ep-mobile-row-sub {
  font-size: .78rem;
  color: var(--ep-muted);
  margin-bottom: .35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ep-mobile-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .65rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--ep-muted);
}
.ep-mobile-row-meta i { color: var(--ep-primary); margin-right: .15rem; }
.ep-mobile-row-action {
  position: absolute;
  right: .65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ep-primary-muted);
  color: var(--ep-primary);
  font-size: .95rem;
}
.ep-mobile-empty { padding: 2rem 1rem; }

@media (min-width: 992px) {
  .ep-list-toolbar .row { --bs-gutter-x: .65rem; }
  .ep-list-card .ep-table-wrap { padding: 0 .5rem .5rem; }
}