/* Admin UI - Minimal (RTL) with collapsible sidebar
   Theme uses CSS variables injected from settings (settings.admin.appearance).
*/
:root{
  --card-bg: var(--surface);
  --bg: #f7f7f8;
  --surface: #ffffff;
  --border: rgba(17,17,17,.10);
  --text: #111111;
  --muted: rgba(17,17,17,.62);
  --shadow: 0 10px 30px rgba(17,17,17,.06);
  --radius: 14px;
  --radius-sm: 12px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 74px;
  --pad: 18px;

  /* accent vars injected dynamically:
     --accent, --accent-contrast, --accent-8, --accent-12, --accent-20, --focus-ring
  */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Vazirmatn", Arial, sans-serif);
}

.wrap{ max-width: 1200px; margin: 0 auto; padding: var(--pad); }

button,input,select,textarea{ font-family: inherit; }

/* Layout */
.admin-app{
  min-height:100vh;
  display:flex;
}
.sidebar{
  width: var(--sidebar-w);
  background: var(--surface);
  border-left: 1px solid var(--border);
  position: sticky;
  top:0;
  height: 100vh;
  display:flex;
  flex-direction: column;
  z-index: 20;
}
body.sidebar-collapsed .sidebar{
  width: var(--sidebar-w-collapsed);
}
.sidebar__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.sidebar__brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.sidebar__logo{
  width: 34px; height:34px;
  border-radius: 10px;
  background: var(--accent-12, rgba(37,99,235,.12));
  display:flex; align-items:center; justify-content:center;
  color: var(--accent, #2563eb);
  flex:0 0 auto;
}
.sidebar__title{
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__toggle{
  border:1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  height: 34px; width: 34px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.sidebar__toggle:hover{ background: rgba(17,17,17,.04); }

/* Icon sizing (inline SVG) */
.btn .icon{ width:16px; height:16px; }
.icon{ display:inline-flex; align-items:center; justify-content:center; }
.icon svg{ width:100%; height:100%; display:block; }
.sidebar__toggle .icon, .topbar__menu .icon{ width:18px; height:18px; }
.topbar__right .btn.icon-only .icon{ width:18px; height:18px; }
.nav-link .icon{ display:inline-flex; }


.sidebar__nav{
  padding: 10px 10px 14px 10px;
  overflow:auto;
}
.nav-group{ margin-top: 10px; }
.nav-group-title{
  font-size: 11px;
  color: var(--muted);
  padding: 10px 10px 6px 10px;
}
.nav-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--text);
  text-decoration:none;
  border:1px solid transparent;
}
.nav-link:hover{
  background: rgba(17,17,17,.04);
}
.nav-link.is-active{
  background: var(--accent-8, rgba(37,99,235,.08));
  border-color: var(--accent-20, rgba(37,99,235,.2));
  color: var(--text);
}
.nav-link .icon{
  width: 18px; height: 18px;
  color: var(--muted);
  flex:0 0 auto;
}
.nav-link.is-active .icon{ color: var(--accent, #2563eb); }
.nav-link .label{
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sidebar-collapsed .nav-group-title{ display:none; }
body.sidebar-collapsed .sidebar__title{ display:none; }
body.sidebar-collapsed .nav-link{ justify-content:center; }
body.sidebar-collapsed .nav-link .label{ display:none; }
body.sidebar-collapsed .nav-group-title{ display:none; }
body.sidebar-collapsed .sidebar__title{ display:none; }
body.sidebar-collapsed .nav-link{ justify-content:center; }
body.sidebar-collapsed .nav-link .label{ display:none; }
body.sidebar-collapsed .sidebar__header{
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  gap: 8px;
}
body.sidebar-collapsed .sidebar__brand{ justify-content:center; flex-direction: column; gap: 6px; }
body.sidebar-collapsed .sidebar__toggle{ position: static; margin-top: 2px; }
body.sidebar-collapsed .sidebar__toggle svg{ transform: rotate(180deg); }

.main{
  flex:1;
  min-width: 0;
  display:flex;
  flex-direction: column;
}
.topbar{
  position: sticky;
  top:0;
  z-index: 10;
  background: rgba(247,247,248,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner{
  padding: 12px var(--pad);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.topbar__left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.topbar__menu{
  display:none;
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  height: 36px; width: 36px;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.topbar__menu:hover{ background: rgba(17,17,17,.04); }
.page-title{
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__right{
  display:flex; align-items:center; gap: 10px;
}

.content{
  padding: var(--pad);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* Overlay for mobile sidebar */
.overlay{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 15;
}

/* Components (keep existing class names for pages) */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: none;
}
h1{ font-size:18px; margin:0 0 10px 0; }
h2{ font-size:15px; margin:0 0 10px 0; }

a.btn, button.btn{
  border:1px solid var(--border);
  background: var(--accent, #2563eb);
  color: var(--accent-contrast, #fff);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13px;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  gap: 8px;
  align-items:center;
  transition: transform .02s ease, background .12s ease, border-color .12s ease;
}
a.btn:hover, button.btn:hover{ transform: translateY(-1px); }
a.btn:focus, button.btn:focus,
input:focus, select:focus, textarea:focus{
  outline:none;
  box-shadow: 0 0 0 4px var(--focus-ring, rgba(37,99,235,.35));
}
a.btn.ghost, button.btn.ghost{
  background: var(--surface);
  color: var(--text);
}
a.btn.danger, button.btn.danger{
  background: #b91c1c;
  color: #fff;
  border-color: rgba(185,28,28,.3);
}

table{ width:100%; border-collapse: collapse; }
th, td{
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th{
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}
tr:hover td{ background: rgba(17,17,17,.02); }

input, select, textarea{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}
textarea{ min-height: 90px; resize: vertical; }

.grid{ display:grid; gap: 10px; grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid.two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px){
  .grid.two{ grid-template-columns: 1fr; }
}
.col-6{ grid-column: span 6; }
.col-8{ grid-column: span 8; }
.col-4{ grid-column: span 4; }
.col-3{ grid-column: span 3; }
.col-12{ grid-column: span 12; }

/* Product edit: keep sidebar column usable on mid screens */
@media (max-width: 1100px){
  .product-edit-grid .col-8,
  .product-edit-grid .col-4{
    grid-column: span 12;
  }
}
/* Marketing dashboard: stack columns on mid screens */
@media (max-width: 1100px){
  .marketing-grid .col-8,
  .marketing-grid .col-4{
    grid-column: span 12;
  }
}


.row{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }

.small{ font-size: 12px; color: var(--muted); }

.badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border:1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  background: var(--surface);
}
.badge.info{
  background: var(--accent-8, rgba(37,99,235,.08));
  border-color: var(--accent-20, rgba(37,99,235,.2));
}
.badge.ok{
  background: rgba(22,163,74,.08);
  border-color: rgba(22,163,74,.2);
  color: #145a2a;
}
.badge.warn{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.25);
  color: #7a4a00;
}
.badge.danger{
  background: rgba(185,28,28,.08);
  border-color: rgba(185,28,28,.2);
  color: #8a1f1f;
}

.alert{
  border: 1px solid rgba(185,28,28,.25);
  background: rgba(185,28,28,.06);
  color: #8a1f1f;
  border-radius: 14px;
  padding: 10px 12px;
}
.ok{
  border: 1px solid rgba(22,163,74,.25);
  background: rgba(22,163,74,.06);
  color: #145a2a;
  border-radius: 14px;
  padding: 10px 12px;
}

/* Fields */
.field > span{
  display:block;
  margin: 0 0 6px 0;
  font-size: 12px;
  color: var(--muted);
}
.muted{ color: var(--muted); }

/* Density */
body.density-compact th, body.density-compact td{ padding: 8px; }
body.density-compact input, body.density-compact select, body.density-compact textarea{
  padding: 9px 10px;
}

/* Mobile */
@media (max-width: 900px){
  .sidebar{
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    transform: translateX(105%);
    box-shadow: var(--shadow);
  }
  body.sidebar-mobile-open .sidebar{ transform: translateX(0); }
  /* collapse not used on mobile */
  .topbar__menu{ display:flex; }
  .overlay{ display:block; opacity:0; pointer-events:none; transition: opacity .12s ease; }
  body.sidebar-mobile-open .overlay{ opacity: 1; pointer-events:auto; }
}

/* Brand page helper */
.grid2{ display:grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media(max-width:700px){ .grid2{ grid-template-columns: 1fr; } }

/* Page patterns */
.page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin: 0 0 12px 0;
}
.page-header h1{ margin:0; font-size: 20px; }
.page-subtitle{ margin-top: 4px; font-size: 12px; color: var(--muted); }

.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(17,17,17,.02);
  margin: 10px 0 12px 0;
}
.toolbar .toolbar__left,
.toolbar .toolbar__right{ display:flex; align-items:center; gap:10px; flex-wrap: wrap; }
.toolbar .toolbar__right{ justify-content:flex-end; }
.toolbar .field-inline{ display:flex; flex-direction:column; gap:6px; min-width: 180px; }

/* Buttons: sizes */
a.btn.small, button.btn.small{ padding: 7px 10px; font-size: 12px; border-radius: 11px; }

/* Chips */
.chips{ display:flex; gap: 8px; flex-wrap:wrap; }
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
}
.chip input{ width:auto; }
.chip--muted{ background: rgba(17,17,17,.03); color: var(--muted); }

/* Avatar/thumb */
.thumb{
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(17,17,17,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.table-actions{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.row-actions{ flex-wrap:nowrap; }
.row-actions form{ margin:0; }

/* Empty state */
.empty-state{
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 18px;
  background: rgba(17,17,17,.01);
  text-align:center;
  color: var(--muted);
}
.empty-state .empty-title{ color: var(--text); font-weight:700; font-size: 14px; margin-bottom: 6px; }
.empty-state .empty-actions{ margin-top: 12px; display:flex; justify-content:center; gap: 10px; flex-wrap:wrap; }

/* Stats */
.stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.stat{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.stat .k{ font-size: 12px; color: var(--muted); }
.stat .v{ font-size: 22px; font-weight: 800; margin-top: 6px; }
.stat .hint{ font-size: 12px; color: var(--muted); margin-top: 4px; }
@media(max-width: 1000px){ .stats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width: 560px){ .stats{ grid-template-columns: 1fr; } }

/* Toast */
.toast{
  position: fixed;
  left: 16px;
  bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  font-size: 13px;
  color: var(--text);
  z-index: 50;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .14s ease, transform .14s ease;
}
.toast.is-show{ opacity: 1; transform: translateY(0); }
.toast.ok{ border-color: rgba(22,163,74,.25); }
.toast.err{ border-color: rgba(185,28,28,.25); }

/* Section titles inside forms */
.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin: 0 0 10px 0;
}
.section-title h2{ margin:0; }

.title-with-range{ display:flex; align-items:center; gap: 10px; }
.pl-range select{
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 34px 8px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.pl-range{
  position: relative;
}
.pl-range::after{
  content: "▾";
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}


/* Draggable cards (product edit) */
.draggable-card{ position: relative; }
.drag-handle{
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  cursor: grab;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  line-height: 1;
}
.drag-handle:hover{ background: rgba(17,17,17,.03); }
.drag-handle:active{ cursor: grabbing; }
.draggable-card.is-dragging{ opacity: .65; }
.product-edit-zone.is-drag-over{ outline: 2px dashed var(--border); outline-offset: 8px; border-radius: 16px; }




/* Draggable table rows (categories) */
tbody.sort-zone.is-drag-over{ outline: 2px dashed var(--border); outline-offset: 6px; border-radius: 12px; }
tr.draggable-row.is-dragging{ opacity: .65; }

/* Subtle zebra */
tbody tr:nth-child(2n) td{ background: rgba(17,17,17,.01); }


/* Bulk percent panel (bulk edit) */
.bulk-percent-panel{
  border: 1px solid var(--accent-20);
  background: var(--accent-8);
  border-radius: 16px;
  padding: 12px;
}
.bulk-percent-panel__title{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}
.bulk-percent-panel__hint{
  font-size: 12px;
  color: var(--muted);
}
.bulk-percent-panel .field-inline input,
.bulk-percent-panel .field-inline select{
  background: var(--surface);
}


/* Pagination (Products) */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap:wrap;
}
.pagination__pages{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap:wrap;
  justify-content:center;
}
.page-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration:none;
  color: var(--text);
  background: var(--surface);
  font-size: 13px;
  min-width: 34px;
}
.page-chip.is-active{
  background: var(--accent-12);
  border-color: var(--accent-20);
  font-weight: 700;
}

/* Modal (Quick Edit) */
.pl-modal{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}
.pl-modal.is-open{ display:block; }
.pl-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}
.pl-modal__panel{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  max-width: 820px;
  margin: 6vh auto;
  padding: 14px;
  box-shadow: 0 20px 55px rgba(0,0,0,.18);
  max-height: 88vh;
  overflow: auto;
}
.pl-modal__head{
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.pl-modal__title{ font-size: 14px; font-weight: 800; }
.pl-modal__section{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.pl-modal__section-title{
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
}
.qe-prices{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px){
  .qe-prices{ grid-template-columns: 1fr; }
  .pl-modal__panel{
    margin: 0;
    border-radius: 0;
    max-width: none;
    max-height: 100vh;
    height: 100vh;
  }
}


/* Icon-only button */
.btn.icon-only{ padding: 0; width: 38px; height: 38px; display:inline-flex; align-items:center; justify-content:center; }
.btn.icon-only.small{ width: 34px; height: 34px; }

.sidebar__logo img{ width: 22px; height: 22px; object-fit: contain; display:block; }

/* Dark mode */
body.theme-dark{
  --bg: #0b1020;
  --surface: #0f172a;
  --border: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.60);
  --shadow: 0 12px 34px rgba(0,0,0,.35);
}
body.theme-dark .sidebar__toggle:hover{ background: rgba(255,255,255,.06); }
body.theme-dark .nav-link:hover{ background: rgba(255,255,255,.06); }
body.theme-dark .btn:hover{ filter: brightness(1.05); }
body.theme-dark .card{ box-shadow: none; }
body.theme-dark .toolbar{ background: transparent; }
body.theme-dark table tr:hover{ background: rgba(255,255,255,.04); }

body.theme-dark .topbar{
  background: rgba(15,23,42,.88);
}
body.theme-dark .topbar__menu:hover{ background: rgba(255,255,255,.06); }
body.theme-dark .topbar__right .btn.icon-only:hover{ background: rgba(255,255,255,.06); }

/* Minimal icon button (e.g., modal close) */
.icon-btn{ border:0; background: transparent; color: var(--muted); width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius: 10px; cursor:pointer; }
.icon-btn:hover{ background: rgba(17,17,17,.05); color: var(--text); }
body.theme-dark .icon-btn:hover{ background: rgba(255,255,255,.06); }

/* Jalali Date Picker */
.jdp{ display:flex; align-items:center; gap:8px; position:relative; max-width: 360px; }
.jdp input[type="text"]{ width: 220px; direction:ltr; text-align:left; }
.jdp .jdp-trigger{ padding: 8px 10px; line-height: 1; }

.jdp-popup{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 280px;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px;
  display:none;
}
.jdp-popup.open{ display:block; }

.jdp-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: 8px; }
.jdp-head .jdp-title{ font-weight: 700; font-size: 14px; }
.jdp-head .jdp-nav{ display:flex; gap:6px; }
.jdp-head button{ border: 1px solid rgba(0,0,0,.12); background: transparent; border-radius: 10px; padding: 6px 10px; cursor:pointer; }

.jdp-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jdp-dow{ font-size: 12px; opacity: .75; text-align:center; padding: 6px 0; }

.jdp-day{
  text-align:center;
  padding: 8px 0;
  border-radius: 10px;
  cursor:pointer;
  user-select:none;
  border: 1px solid transparent;
}
.jdp-day:hover{ background: rgba(0,0,0,.06); }
.jdp-day.is-empty{ cursor: default; opacity: 0; }
.jdp-day.is-today{ border-color: rgba(0,0,0,.18); }
.jdp-day.is-selected{ background: rgba(0,0,0,.12); font-weight: 700; }

.jdp-foot{ display:flex; justify-content:space-between; align-items:center; margin-top: 8px; gap:8px; }
.jdp-foot button{ border: 1px solid rgba(0,0,0,.12); background: transparent; border-radius: 10px; padding: 6px 10px; cursor:pointer; font-size: 12px; }


/* Admin footer */
.admin-footer{
  margin-top: 18px;
  padding: 10px 8px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
}
.admin-footer .brand{ font-weight: 900; color: var(--text); }
.admin-footer .sep{ opacity: .55; }

/* Charts (Admin) */
.pl-chart{ border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: 12px; background: var(--card-bg, #fff); }
body.theme-dark .pl-chart{ border-color: rgba(255,255,255,.12); }
.pl-chart--empty{ padding: 16px; }
.pl-chart__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.pl-chart__title{ font-weight: 800; letter-spacing: -.02em; }
.pl-chart__legend{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.pl-legend{ font-size: 12px; opacity: .85; display:inline-flex; align-items:center; gap:6px; }
.pl-legend__dot{ width: 10px; height: 10px; border-radius: 999px; display:inline-block; }

.pl-chart__svg{ width: 100%; height: auto; display:block; }
.pl-chart__grid{ stroke: rgba(0,0,0,.08); stroke-width: 1; shape-rendering: crispEdges; }
body.theme-dark .pl-chart__grid{ stroke: rgba(255,255,255,.08); }

.pl-chart__line{ fill:none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pl-chart__dot{ opacity: .9; }

/* Series colors */
.pl-chart__line--view{ stroke: rgba(37,99,235,.95); }
.pl-chart__line--print{ stroke: rgba(16,185,129,.95); }
.pl-chart__line--product_open{ stroke: rgba(245,158,11,.95); }

.pl-legend__dot--view{ background: rgba(37,99,235,.95); }
.pl-legend__dot--print{ background: rgba(16,185,129,.95); }
.pl-legend__dot--product_open{ background: rgba(245,158,11,.95); }

.pl-chart__dot{ opacity: .95; stroke: rgba(255,255,255,.95); stroke-width: 1.4; }
body.theme-dark .pl-chart__dot{ stroke: rgba(0,0,0,.55); }

.pl-chart__dot--view{ fill: rgba(37,99,235,.95); }
.pl-chart__dot--print{ fill: rgba(16,185,129,.95); }
.pl-chart__dot--product_open{ fill: rgba(245,158,11,.95); }

.pl-summary-table{ width:100%; border-collapse: collapse; }
.pl-summary-table th, .pl-summary-table td{ padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,.06); text-align:right; }
body.theme-dark .pl-summary-table th, body.theme-dark .pl-summary-table td{ border-bottom-color: rgba(255,255,255,.10); }
.pl-summary-table tr:last-child td{ border-bottom: none; }
.pl-summary-table th{ font-size: 12px; opacity:.75; }


/* Search Console-like chart (Admin stats) */
.pl-gsc{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}
.pl-gsc__head{
  padding: 12px 14px 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.pl-gsc__title{ font-weight: 900; letter-spacing: -.02em; }
.pl-gsc__metrics{
  display:flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.pl-gsc__metric{
  flex: 1 1 180px;
  min-width: 0;
  padding-inline-end: 44px;
  padding: 12px 14px 10px;
  cursor: pointer;
  position: relative;
  border-inline-start: 1px solid var(--border);
  user-select: none;
  transition: background .15s ease, opacity .15s ease;
}
.pl-gsc__metric:first-child{ border-inline-start: none; }
.pl-gsc__metric:not(.is-off){ background: var(--c-bg, transparent); }
.pl-gsc__metric::before{
  content:'';
  position:absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--c, var(--accent));
  opacity: .95;
}
.pl-gsc__metric.is-off{ opacity: .45; }
.pl-gsc__metric.is-off::before{ opacity: .18; }
.pl-gsc__metric-label{
  font-size: 12px;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap: 8px;
}
.pl-gsc__metric-value{
  margin-top: 4px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
}

/* Metrics responsiveness */
@media (max-width: 780px){
  .pl-gsc__metric{ flex: 1 1 50%; }
}
@media (max-width: 460px){
  .pl-gsc__metric{ flex: 1 1 100%; }
}
.pl-gsc__metric-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pl-gsc__check{
  position:absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 16px;
  height: 16px;
  accent-color: var(--c, var(--accent));
}
.pl-gsc__chart{
  position: relative;
  padding: 10px 10px 12px;
}
.pl-gsc__svg{ width: 100%; height: auto; display:block; touch-action: pan-y; }
.pl-gsc__grid{ stroke: rgba(17,17,17,.08); stroke-width: 1; shape-rendering: crispEdges; }
body.theme-dark .pl-gsc__grid{ stroke: rgba(255,255,255,.08); }

.pl-gsc__axis{
  fill: var(--muted);
  font-size: 11px;
}
.pl-gsc__axis-title{
  fill: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.pl-gsc__line{ fill:none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pl-gsc__line.is-off{ opacity: .15; }

.pl-gsc__hover-line{ stroke: rgba(17,17,17,.35); stroke-width: 1; stroke-dasharray: 4 4; }
body.theme-dark .pl-gsc__hover-line{ stroke: rgba(255,255,255,.30); }

.pl-gsc__hover-dot{ stroke: var(--surface); stroke-width: 2; opacity: .98; }

.pl-gsc__tooltip{
  pointer-events: none;
  position:absolute;
  top: 8px;
  left: 8px;
  min-width: 220px;
  max-width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 12px;
  padding: 10px 12px;
  z-index: 10;
}
.pl-gsc__tip-title{
  font-weight: 900;
  margin-bottom: 8px;
}
.pl-gsc__tip-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px dashed rgba(17,17,17,.10);
}
body.theme-dark .pl-gsc__tip-row{ border-top-color: rgba(255,255,255,.12); }
.pl-gsc__tip-row:first-child{ border-top: none; padding-top: 0; }
.pl-gsc__tip-label{ color: var(--muted); font-size: 12px; flex:1; }
.pl-gsc__tip-value{ font-weight: 900; font-size: 13px; }

.pl-gsc__swatch{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c, var(--accent));
  flex: 0 0 auto;
  margin-inline-end: 6px;
}

/* Series colors (align with previous palette) */
.pl-gsc__metric--view, .pl-gsc__swatch--view{ --c: rgba(37,99,235,.95); --c-bg: rgba(37,99,235,.10); }
.pl-gsc__metric--print, .pl-gsc__swatch--print{ --c: rgba(16,185,129,.95); --c-bg: rgba(16,185,129,.10); }
.pl-gsc__metric--product_open, .pl-gsc__swatch--product_open{ --c: rgba(245,158,11,.95); --c-bg: rgba(245,158,11,.10); }

.pl-gsc__line--view{ stroke: rgba(37,99,235,.95); }
.pl-gsc__line--print{ stroke: rgba(16,185,129,.95); }
.pl-gsc__line--product_open{ stroke: rgba(245,158,11,.95); }

.pl-gsc__hover-dot--view{ fill: rgba(37,99,235,.95); }
.pl-gsc__hover-dot--print{ fill: rgba(16,185,129,.95); }
.pl-gsc__hover-dot--product_open{ fill: rgba(245,158,11,.95); }

/* Empty state */
.pl-gsc--empty{ padding: 16px; }