@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap");

/* Figma admin dashboard — overrides Vue DashboardLayout + /dashboard */
html.zarpoo-figma-admin {
  --zp-gold: #b89a5a;
  --zp-gold-light: #d4b87a;
  --zp-gold-muted: rgba(201, 168, 76, 0.2);
  --zp-gold-pill: #f5edd8;
  --zp-sidebar: #1c1c1e;
  --zp-surface: #ffffff;
  --zp-canvas: #f5f5f5;
  --zp-text: #1c1c1e;
  --zp-text-secondary: #3a3a3c;
  --zp-muted: #8a8a8e;
  --zp-icon-muted: #636366;
}

html.zarpoo-figma-admin body,
html.zarpoo-figma-admin :not(i):not(b):not(strong) {
  font-family: "Vazirmatn", IRANSans, ui-sans-serif, sans-serif !important;
}

html.zarpoo-figma-admin body {
  background: var(--zp-canvas) !important;
}

html.zarpoo-figma-admin .container-fluid {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  background: var(--zp-surface);
}

html.zarpoo-figma-admin .container-fluid > .flex {
  align-items: flex-start;
  min-height: 100vh;
}

/* ——— Sidebar ——— */
html.zarpoo-figma-admin aside[class*="15273b"],
html.zarpoo-figma-admin aside.min-h-screen {
  width: 218px !important;
  min-width: 218px !important;
  max-width: 218px !important;
  flex: 0 0 218px !important;
  background: var(--zp-sidebar) !important;
  border-left: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 24px 0 !important;
  gap: 32px;
}

html.zarpoo-figma-admin.zarpoo-figma-admin-panel aside[class*="15273b"]::before {
  content: "";
  display: block;
  height: 50px;
  margin: 0 24px 16px;
  background: url("/new/images/logo.png") no-repeat center right;
  background-size: contain;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
}

html.zarpoo-figma-admin.zarpoo-figma-admin-panel
  aside[class*="15273b"]
  > div.flex.flex-col.gap-8.p-4
  > div.flex.justify-between:first-of-type {
  display: none !important;
}

html.zarpoo-figma-admin aside .flex.flex-col.gap-8.p-4 {
  gap: 20px !important;
  padding: 0 16px !important;
}

html.zarpoo-figma-admin aside .border-b.border-\[\#15273b\] {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.zarpoo-figma-admin aside ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

html.zarpoo-figma-admin aside ul li,
html.zarpoo-figma-admin aside .p-2 {
  border-radius: 12px !important;
}

html.zarpoo-figma-admin aside a,
html.zarpoo-figma-admin aside .text-gray-300,
html.zarpoo-figma-admin aside span.text-gray-300 {
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
}

html.zarpoo-figma-admin aside a:hover,
html.zarpoo-figma-admin aside li:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

html.zarpoo-figma-admin aside a.router-link-active,
html.zarpoo-figma-admin aside a.router-link-exact-active,
html.zarpoo-figma-admin aside .is-pointed,
html.zarpoo-figma-admin aside .is-selected {
  background: rgba(184, 154, 90, 0.15) !important;
  color: var(--zp-gold-light) !important;
}

html.zarpoo-figma-admin aside .icon,
html.zarpoo-figma-admin aside svg {
  color: rgba(255, 255, 255, 0.28) !important;
}

html.zarpoo-figma-admin aside a.router-link-active .icon {
  color: var(--zp-gold) !important;
}

html.zarpoo-figma-admin aside .scroll::-webkit-scrollbar {
  width: 6px;
}

html.zarpoo-figma-admin aside .scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

/* ——— Main column ——— */
html.zarpoo-figma-admin main.flex.flex-col,
html.zarpoo-figma-admin main[class*="fd:w-[77%]"],
html.zarpoo-figma-admin main {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  background: var(--zp-canvas) !important;
}

html.zarpoo-figma-admin main > div.flex.flex-col {
  gap: 24px;
  padding: 24px 0 !important;
}

html.zarpoo-figma-admin main .border-b.border-gray-300.bg-white {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--zp-gold-muted) !important;
  padding: 0 36px 16px !important;
  min-height: 61px;
  align-items: center !important;
}

html.zarpoo-figma-admin main .border-b.border-gray-300.bg-white .text-gray-300,
html.zarpoo-figma-admin main .border-b.border-gray-300.bg-white span {
  color: var(--zp-muted) !important;
  font-size: 12px !important;
}

html.zarpoo-figma-admin main .rounded-full.w-\[40px\].h-\[40px\] {
  background: var(--zp-gold) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border: 1px solid var(--zp-gold-muted);
}

html.zarpoo-figma-admin main > div > div.p-4:last-child,
html.zarpoo-figma-admin main .p-4:has(> .router-view),
html.zarpoo-figma-admin main > div.flex.flex-col > div.p-4 {
  padding: 0 36px 36px !important;
  background: transparent !important;
}

/* ——— Dashboard KPI cards (was green/blue/yellow/red) ——— */
html.zarpoo-figma-admin .bg-green-500,
html.zarpoo-figma-admin .bg-blue-500,
html.zarpoo-figma-admin .bg-yellow-500,
html.zarpoo-figma-admin .bg-red-500 {
  background: var(--zp-surface) !important;
  border: 1px solid var(--zp-gold-muted) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  gap: 12px !important;
  box-shadow: none !important;
}

html.zarpoo-figma-admin .bg-green-500 .text-white,
html.zarpoo-figma-admin .bg-blue-500 .text-white,
html.zarpoo-figma-admin .bg-yellow-500 .text-white,
html.zarpoo-figma-admin .bg-red-500 .text-white {
  color: var(--zp-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

html.zarpoo-figma-admin .bg-green-500 .flex.flex-col .fm\:text-sm,
html.zarpoo-figma-admin .bg-blue-500 .flex.flex-col .fm\:text-sm,
html.zarpoo-figma-admin .bg-yellow-500 .flex.flex-col .fm\:text-sm,
html.zarpoo-figma-admin .bg-red-500 .flex.flex-col .fm\:text-sm,
html.zarpoo-figma-admin .bg-green-500 .flex.flex-col > span:last-child,
html.zarpoo-figma-admin .bg-blue-500 .flex.flex-col > span:last-child,
html.zarpoo-figma-admin .bg-yellow-500 .flex.flex-col > span:last-child,
html.zarpoo-figma-admin .bg-red-500 .flex.flex-col > span:last-child {
  color: var(--zp-text) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html.zarpoo-figma-admin .bg-green-500 .far,
html.zarpoo-figma-admin .bg-blue-500 .far,
html.zarpoo-figma-admin .bg-yellow-500 .far,
html.zarpoo-figma-admin .bg-red-500 .far {
  display: none !important;
}

html.zarpoo-figma-admin .flex.justify-between.items-center > .w-\[25\%\] {
  width: calc(33.333% - 11px) !important;
  max-width: 373px;
}

html.zarpoo-figma-admin .flex.flex-col.gap-5.border.border-gray-200.rounded-lg {
  border: 1px solid var(--zp-gold-muted) !important;
  border-radius: 16px !important;
  background: var(--zp-surface) !important;
  padding: 24px !important;
  gap: 32px !important;
  margin-bottom: 32px !important;
  box-shadow: none !important;
}

html.zarpoo-figma-admin .flex.flex-col.gap-5.border.border-gray-200.rounded-lg > .!font-medium.text-2xl {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--zp-text-secondary) !important;
  line-height: 40px !important;
}

/* Order status row icons */
html.zarpoo-figma-admin .w-\[10rem\].h-\[10rem\] {
  width: 140px !important;
  height: 140px !important;
}

html.zarpoo-figma-admin .flex.flex-col.gap-3.items-center.border.border-gray-100 {
  border: 1px solid var(--zp-gold-muted) !important;
  border-radius: 16px !important;
  background: var(--zp-surface) !important;
}

html.zarpoo-figma-admin .w-\[36rem\] {
  border-radius: 16px !important;
  border: 1px solid var(--zp-gold-muted) !important;
  background: var(--zp-surface) !important;
}

/* Bar chart gold bars */
html.zarpoo-figma-admin .border.border-gray-200.bg-gray-100.h-\[6\.6rem\] {
  background: var(--zp-gold) !important;
  opacity: 0.75;
  border: none !important;
  border-radius: 6px 6px 0 0 !important;
}

html.zarpoo-figma-admin .rotate-\[270deg\] {
  transform: none !important;
  font-size: 10px !important;
  color: var(--zp-muted) !important;
}

/* ——— Tables (latest orders) ——— */
html.zarpoo-figma-admin table.min-w-full.border {
  border: none !important;
  font-size: 14px;
}

html.zarpoo-figma-admin table.min-w-full thead tr,
html.zarpoo-figma-admin table.min-w-full tr:first-child {
  background: #f9f8f6 !important;
  border-bottom: 1px solid var(--zp-gold-muted) !important;
}

html.zarpoo-figma-admin table.min-w-full th,
html.zarpoo-figma-admin table.min-w-full td {
  border-color: var(--zp-gold-muted) !important;
  color: var(--zp-text-secondary) !important;
  padding: 12px 16px !important;
  text-align: center !important;
}

html.zarpoo-figma-admin table.min-w-full th {
  color: var(--zp-muted) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

html.zarpoo-figma-admin table.min-w-full tbody tr:hover {
  background: rgba(245, 237, 216, 0.25) !important;
}

html.zarpoo-figma-admin .text-green-500 {
  color: #059669 !important;
}

html.zarpoo-figma-admin .text-yellow-500,
html.zarpoo-figma-admin .text-orange-500 {
  color: #d97706 !important;
}

html.zarpoo-figma-admin .bg-green-100 {
  background: #ecfdf5 !important;
  border-radius: 999px !important;
}

html.zarpoo-figma-admin .bg-yellow-100,
html.zarpoo-figma-admin .bg-yellow-200 {
  background: #fffbeb !important;
  border-radius: 999px !important;
}

/* Generic admin cards inside panel */
html.zarpoo-figma-admin main .border.border-gray-200.rounded-lg,
html.zarpoo-figma-admin main .border.border-gray-200.p-4 {
  border-color: var(--zp-gold-muted) !important;
  border-radius: 16px !important;
}

html.zarpoo-figma-admin main .bg-white {
  background: var(--zp-surface) !important;
}

@media (max-width: 768px) {
  html.zarpoo-figma-admin aside[class*="15273b"] {
    width: min(90vw, 218px) !important;
  }

  html.zarpoo-figma-admin .flex.justify-between.items-center > .w-\[25\%\] {
    width: 100% !important;
    max-width: none;
  }

  html.zarpoo-figma-admin main .border-b.border-gray-300.bg-white,
  html.zarpoo-figma-admin main > div > div.p-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}