/**
 * Vatamam — Unified Design System v1
 *
 * Load order: admin.css → panel-ui.css → auth-ui.css → unified.css (last)
 *
 * Purpose:
 *   1. Declare shared CSS custom property tokens for all contexts.
 *   2. Give the expert panel a green accent (tabs, welcome card, cards).
 *   3. Give the customer panel a blue accent (consistent after colour fix).
 *   4. Provide shared components: badges, notification items, empty states.
 *   5. Override admin.css notice colours (white-on-colour → readable light-bg).
 *   6. Remove layout-jank table-row scale effect.
 *   7. Provide Google Fonts import for all contexts.
 *
 * No PHP business logic is modified. No class names are renamed.
 */

/* ════════════════════════════════════════════════════════
   0. GOOGLE FONTS
════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

/* ════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   Mirrors panel-ui.css :root so tokens work in admin context
   (panel-ui.css is only enqueued on the frontend by default).
════════════════════════════════════════════════════════ */
:root {
  --vt-blue:       #2563eb;
  --vt-blue-d:     #1e40af;
  --vt-blue-xl:    #eff6ff;
  --vt-blue-l:     #dbeafe;
  --vt-green:      #059669;
  --vt-green-d:    #065f46;
  --vt-green-xl:   #ecfdf5;
  --vt-green-l:    #d1fae5;
  --vt-amber:      #d97706;
  --vt-amber-bg:   #fffbeb;
  --vt-amber-l:    #fcd34d;
  --vt-red:        #dc2626;
  --vt-red-bg:     #fff5f5;
  --vt-red-l:      #fecaca;
  --vt-surface:    #f8fafc;
  --vt-card:       #ffffff;
  --vt-border:     #e5e7eb;
  --vt-border-l:   #f3f4f6;
  --vt-muted:      #6b7280;
  --vt-text:       #374151;
  --vt-title:      #111827;
  --vt-radius-sm:  6px;
  --vt-radius:     10px;
  --vt-radius-lg:  14px;
  --vt-shadow:     0 2px 8px rgba(0,0,0,.06);
  --vt-shadow-md:  0 4px 16px rgba(0,0,0,.08);
}

/* ════════════════════════════════════════════════════════
   2. FONT UNIFICATION
   Single declaration covers every plugin output wrapper.
   Does NOT use !important so it does not fight with
   the tighter scoped font rules in admin.css (those win
   for elements that need them).
════════════════════════════════════════════════════════ */
.antique-user-panel,   .antique-user-panel *,
.antique-expert-panel, .antique-expert-panel *,
.vt-auth-page,         .vt-auth-page *,
.wrap.antique-expert-panel,
.antique-panel-container {
  font-family: 'Vazirmatn', 'IRANYekan', Tahoma, sans-serif;
}

/* ════════════════════════════════════════════════════════
   3. CUSTOMER PANEL — BLUE ACCENT
════════════════════════════════════════════════════════ */

/* Welcome header card */
.antique-user-panel .antique-welcome-card {
  background: linear-gradient(135deg, var(--vt-blue-d) 0%, var(--vt-blue) 100%);
  box-shadow: 0 8px 28px rgba(37,99,235,.25);
}

/* Card top accent stripe */
.antique-user-panel .card::before {
  background: linear-gradient(135deg, var(--vt-blue) 0%, var(--vt-blue-d) 100%);
}

/* Active tab */
.antique-user-panel .antique-tab-button.active {
  background: linear-gradient(135deg, var(--vt-blue) 0%, var(--vt-blue-d) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37,99,235,.35) !important;
  transform: translateY(-1px) !important;
}
.antique-user-panel .antique-tab-button:hover:not(.active) {
  background: var(--vt-blue-xl) !important;
  color: var(--vt-blue-d) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════
   4. EXPERT PANEL — GREEN ACCENT
════════════════════════════════════════════════════════ */

/* Welcome header card */
.antique-expert-panel .antique-welcome-card {
  background: linear-gradient(135deg, var(--vt-green-d) 0%, var(--vt-green) 100%);
  box-shadow: 0 8px 28px rgba(5,150,105,.22);
}

/* Card top accent stripe */
.antique-expert-panel .card::before {
  background: linear-gradient(135deg, var(--vt-green) 0%, var(--vt-green-d) 100%);
}

/* Tab wrapper */
.antique-expert-panel .antique-tabs-wrapper {
  border-color: var(--vt-green-l);
}

/* Active tab */
.antique-expert-panel .antique-tab-button.active {
  background: linear-gradient(135deg, var(--vt-green) 0%, var(--vt-green-d) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(5,150,105,.3) !important;
  transform: translateY(-1px) !important;
}
.antique-expert-panel .antique-tab-button:hover:not(.active) {
  background: var(--vt-green-xl) !important;
  color: var(--vt-green-d) !important;
  border-color: var(--vt-green-l) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════
   5. NOTICE COLOURS — accessible (light-bg + dark text)
   Replaces admin.css "white text on solid colour" style,
   which is hard to read and inconsistent with panel-ui.css.
════════════════════════════════════════════════════════ */
.antique-user-panel .notice-info,
.antique-expert-panel .notice-info,
.antique-admin-panel .notice-info {
  background: var(--vt-blue-xl) !important;
  border: 1px solid var(--vt-blue-l) !important;
  border-right: 4px solid var(--vt-blue) !important;
  color: var(--vt-blue-d) !important;
  box-shadow: none !important;
}
.antique-user-panel .notice-success,
.antique-expert-panel .notice-success,
.antique-admin-panel .notice-success {
  background: var(--vt-green-xl) !important;
  border: 1px solid var(--vt-green-l) !important;
  border-right: 4px solid var(--vt-green) !important;
  color: var(--vt-green-d) !important;
  box-shadow: none !important;
}
.antique-user-panel .notice-error,
.antique-expert-panel .notice-error,
.antique-admin-panel .notice-error {
  background: var(--vt-red-bg) !important;
  border: 1px solid var(--vt-red-l) !important;
  border-right: 4px solid var(--vt-red) !important;
  color: var(--vt-red) !important;
  box-shadow: none !important;
}
.antique-user-panel .notice-warning,
.antique-expert-panel .notice-warning,
.antique-admin-panel .notice-warning {
  background: var(--vt-amber-bg) !important;
  border: 1px solid var(--vt-amber-l) !important;
  border-right: 4px solid var(--vt-amber) !important;
  color: #92400e !important;
  box-shadow: none !important;
}
/* Ensure notice text is readable inside all panel notices */
.antique-user-panel .notice p,
.antique-expert-panel .notice p,
.antique-admin-panel .notice p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════
   6. UX FIXES
════════════════════════════════════════════════════════ */

/* Remove layout-jank scale on table row hover */
.antique-user-panel .wp-list-table tr:hover td,
.antique-expert-panel .wp-list-table tr:hover td,
.antique-admin-panel .wp-list-table tr:hover td {
  transform: none !important;
}

/* Remove card hover lift in content-heavy tables (optional — keeps static cards hovering) */
.antique-expert-panel .wp-list-table tr:hover,
.antique-user-panel .wp-list-table tr:hover {
  transform: none !important;
}

/* ════════════════════════════════════════════════════════
   7. STATUS BADGES — unified system
   Reusable across admin panels, customer panel, expert panel.
   Usage: <span class="vt-badge vt-badge-approved">✅ تأییدشده</span>
════════════════════════════════════════════════════════ */
.vt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.4;
}
.vt-badge-pending   { background: var(--vt-amber-bg); color: #92400e; }
.vt-badge-approved  { background: var(--vt-green-xl);  color: var(--vt-green-d); }
.vt-badge-verified  { background: var(--vt-green-xl);  color: var(--vt-green-d); }
.vt-badge-rejected  { background: var(--vt-red-bg);    color: var(--vt-red); }
.vt-badge-active    { background: var(--vt-blue-xl);   color: var(--vt-blue-d); }
.vt-badge-suspended { background: var(--vt-red-bg);    color: var(--vt-red); }
.vt-badge-needs_fix { background: var(--vt-amber-bg);  color: #92400e; }
.vt-badge-retired   {
  background: var(--vt-surface);
  color: var(--vt-muted);
  border: 1px solid var(--vt-border);
}

/* ════════════════════════════════════════════════════════
   8. NOTIFICATION INBOX — tab panel styles
   Used by the #notifications tab added in Phase 3.
════════════════════════════════════════════════════════ */

/* The card inside the notifications tab has no inner padding */
#notifications .card {
  padding: 0 !important;
  overflow: hidden;
}

/* Notification list header row */
.vt-notif-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--vt-border-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--vt-card);
}
.vt-notif-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--vt-title);
}

/* Individual notification row */
.vt-notif-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--vt-border-l);
  transition: background .15s;
}
.vt-notif-row:last-child { border-bottom: none; }
.vt-notif-row.unread     { background: #fafbff; }
.vt-notif-row:hover      { background: var(--vt-surface); }

.vt-notif-row .notif-icon { font-size: 20px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.vt-notif-row .notif-body { flex: 1; min-width: 0; }
.vt-notif-row .notif-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}
.vt-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--vt-red);
  border-radius: 50%;
  flex-shrink: 0;
}
.vt-notif-row .notif-title { font-size: 13px; font-weight: 700; color: var(--vt-title); }
.vt-notif-row .notif-msg   { font-size: 12.5px; color: #4b5563; line-height: 1.6; margin: 0; }
.vt-notif-row .notif-time  { font-size: 11px; color: var(--vt-muted); margin-top: 4px; display: block; }

/* ════════════════════════════════════════════════════════
   9. EMPTY STATE — shared component
   Usage: <div class="vt-empty-state"><div class="vt-es-icon">🔔</div>...</div>
════════════════════════════════════════════════════════ */
.vt-empty-state {
  padding: 48px 20px;
  text-align: center;
  direction: rtl;
}
.vt-es-icon    { font-size: 44px; margin-bottom: 14px; line-height: 1; }
.vt-empty-state h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--vt-muted);
  margin: 0 0 6px;
}
.vt-empty-state p {
  font-size: 13px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════
   10. VERIFICATION STATUS BANNERS
   Overrides the inline-style banners added in Phase 2
   so they use the unified light-bg pattern.
════════════════════════════════════════════════════════ */
.vt-verify-banner-pending {
  padding: 12px 16px;
  border-radius: var(--vt-radius);
  border: 1px solid var(--vt-blue-l);
  border-right: 4px solid var(--vt-blue);
  background: var(--vt-blue-xl);
  color: var(--vt-blue-d);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.vt-verify-banner-rejected {
  padding: 12px 16px;
  border-radius: var(--vt-radius);
  border: 1px solid var(--vt-red-l);
  border-right: 4px solid var(--vt-red);
  background: var(--vt-red-bg);
  color: var(--vt-red);
  font-size: 13.5px;
  margin-bottom: 16px;
}
.vt-verify-banner-approved {
  padding: 12px 16px;
  border-radius: var(--vt-radius);
  border: 1px solid var(--vt-green-l);
  border-right: 4px solid var(--vt-green);
  background: var(--vt-green-xl);
  color: var(--vt-green-d);
  font-size: 13.5px;
  margin-bottom: 16px;
}

/* ════════════════════════════════════════════════════════
   11. ADMIN TABS — shared clean tab bar
   The admin pages (expert-assign-page, customers-page, etc.)
   each have their own tab classes (aqtab, vtc-tab). This
   section provides a shared override so they share the same
   active-state colour as the customer/expert panel tabs.
════════════════════════════════════════════════════════ */
.aqtab.active  { border-bottom-color: var(--vt-blue) !important; color: var(--vt-blue) !important; }
.vtc-tab.active { border-bottom-color: #4f46e5 !important; color: #4f46e5 !important; }

/* Admin page primary action buttons — consistent colour */
.aqbtn.aq-blue  { background: var(--vt-blue) !important;   color: #fff !important; }
.aqbtn.aq-green { background: var(--vt-green) !important;  color: #fff !important; }
.aqbtn.aq-red   { background: var(--vt-red) !important;    color: #fff !important; }

/* ════════════════════════════════════════════════════════
   12. RESPONSIVE — shared mobile fixes
════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .antique-user-panel .antique-welcome-card,
  .antique-expert-panel .antique-welcome-card {
    flex-direction: column;
    text-align: center;
    gap: 14px;
    padding: 18px 14px;
  }
  .antique-user-panel .antique-tabs-wrapper,
  .antique-expert-panel .antique-tabs-wrapper {
    gap: 4px;
    padding: 6px;
  }
  .antique-user-panel .antique-tab-button,
  .antique-expert-panel .antique-tab-button {
    font-size: 12px !important;
    padding: 8px 10px !important;
    min-width: auto !important;
  }
  .vt-notif-row {
    padding: 11px 14px;
    gap: 10px;
  }
}