/* Support PRO - Responsive overrides (non-destructive)
   Scope: frontend + success + ticket view + my tickets
   Strategy: Only apply inside <= 1024px (tablet) and <= 640px (mobile)
*/

/* Base tweaks */
:root{
  --sp-mobile-padding: 14px;
  --sp-mobile-gap: 10px;
  --sp-font-scale: 0.97;
}

@media (max-width: 1024px){
  /* Cards & wrappers */
  .sp-success-wrap,
  .wh-wrap,
  .sp-wrap,
  .sp-container{ padding-left: var(--sp-mobile-padding); padding-right: var(--sp-mobile-padding); }

  /* Grid collapses */
  .wh-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; }

  /* Tables become scrollable */
  .sp-table,
  .wh-table,
  .ticket-table,
  .sp-tickets,
  .sp-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .sp-table table,
  .wh-table table,
  .ticket-table table{ min-width: 720px; }

  /* Forms: two columns -> one */
  .sp-form .row,
  .sp-form .sp-row{ display:block !important; }
  .sp-form .col,
  .sp-form .sp-col{ width:100% !important; max-width:100% !important; }
  .sp-form .field, .sp-form .form-field{ margin-bottom:12px; }
  .sp-form textarea{ min-height:140px; }

  /* Actions/buttons stack nicely */
  .sp-actions{ flex-wrap:wrap; gap: var(--sp-mobile-gap); }
  .sp-btn,
  .button.sp-btn{ width: auto; min-width: 42%; text-align:center; }

  /* Ticket header meta */
  .ticket-header, .ticket-meta, .wh-header{ flex-wrap:wrap; gap:12px; }
  .ticket-meta .meta-item{ min-width: 180px; }

  /* Fonts slightly smaller on tablet */
  body{ font-size: calc(1rem * var(--sp-font-scale)); }
}

@media (max-width: 640px){
  /* Cards full width */
  .sp-success-card, .wh-card, .sp-card{ border-radius: 14px; padding: 14px !important; }

  /* Grid single column */
  .wh-grid{ grid-template-columns: 1fr !important; }

  /* Tables: larger min width */
  .sp-table table,
  .wh-table table,
  .ticket-table table{ min-width: 640px; }

  /* Buttons take full width when isolated */
  .sp-actions .sp-btn{ flex:1 1 100%; width:100%; }

  /* Inputs full width */
  .sp-form input[type="text"],
  .sp-form input[type="email"],
  .sp-form input[type="tel"],
  .sp-form select,
  .sp-form textarea{ width:100% !important; }

  /* Tab nav collapses to wrap */
  .sp-tabs,.wh-tabs,.ticket-tabs{ overflow:auto; white-space:nowrap; gap:8px; }
  .sp-tabs a, .wh-tabs a, .ticket-tabs a{ display:inline-block; }

  /* Success page typography */
  .sp-success-icon{ font-size:36px !important; }
  .sp-ticket-num{ font-size:16px !important; }
}

/* Safe RTL support adjustments */
html[dir="rtl"] .sp-table,
html[dir="rtl"] .wh-table,
html[dir="rtl"] .ticket-table{ direction: rtl; }
html[dir="rtl"] .sp-table table,
html[dir="rtl"] .wh-table table,
html[dir="rtl"] .ticket-table table{ direction: ltr; } /* keep numbers LTR */


/* === Skin: Light Red gradient for rows (requested) === */
:root{
  --accent: #dc2626;          /* red-600 */
  --accent-weak: #fff5f5;     /* very light red */
}

/* Rows that previously used greenish backgrounds */
.sp-neumorph-admin .sp-status-answered,
.post.admin{
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 65%) !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

/* Ticket/status chips that used success/green */
.state-answered,
.badge.success,
.tag.success{
  background: #dc2626 !important;
  color:#fff !important;
}

/* Tables in plugin scope: alternate rows to light red tint */
.support-pro-table tr:nth-child(even),
.sp-tickets tr:nth-child(even),
.wh-table tr:nth-child(even),
.ticket-table tr:nth-child(even){
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 70%) !important;
}

/* Hover state a hair darker */
.support-pro-table tr:hover,
.sp-tickets tr:hover,
.wh-table tr:hover,
.ticket-table tr:hover{
  background: linear-gradient(180deg, #feecec 0%, #ffffff 70%) !important;
}


/* ===== Admin Group Theming Overrides ===== */

/* 1) "قيد المعالجة / الانتظار" => calming green gradient (rows + head) */
.sp-neumorph-admin .sp-group-progress .sp-group-head{
  background: linear-gradient(120deg, #16a34a, #15803d) !important;
}
.sp-neumorph-admin .sp-group-progress table.support-pro-table tbody tr{
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%) !important;
  box-shadow: 8px 8px 16px rgba(0,0,0,0.12), -8px -8px 16px rgba(255,255,255,0.9), inset 0 0 0 1px #dcfce7 !important;
}
.sp-neumorph-admin .sp-group-progress table.support-pro-table tbody tr td:first-child{
  box-shadow: inset 4px 0 0 #22c55e !important; /* green left bar */
}

/* Ensure pending/waiting/in_progress use same green vibe */
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-in_progress,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-pending,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-waiting{
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%) !important;
  box-shadow: 8px 8px 16px rgba(0,0,0,0.12), -8px -8px 16px rgba(255,255,255,0.9), inset 0 0 0 1px #dcfce7 !important;
}
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-in_progress td:first-child,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-pending td:first-child,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-waiting td:first-child{
  box-shadow: inset 4px 0 0 #22c55e !important;
}
.sp-neumorph-admin .sp-status-in_progress,
.sp-neumorph-admin .sp-status-pending,
.sp-neumorph-admin .sp-status-waiting{
  color:#166534 !important; border-color:#bbf7d0 !important; background:#f0fdf4 !important;
}

/* 2) "تم الرد عليها" => light red/white gradient (no green anywhere) */
.sp-neumorph-admin .sp-group-answered .sp-group-head{
  background: linear-gradient(120deg, #b91c1c, #7f1d1d) !important;
}
.sp-neumorph-admin .sp-group-answered table.support-pro-table tbody tr{
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 60%) !important;
  box-shadow: 8px 8px 16px rgba(0,0,0,0.12), -8px -8px 16px rgba(255,255,255,0.9), inset 0 0 0 1px #fecaca !important;
}
.sp-neumorph-admin .sp-group-answered table.support-pro-table tbody tr td:first-child{
  box-shadow: inset 4px 0 0 #ef4444 !important; /* red left bar */
}
/* status chip + row for answered */
.sp-neumorph-admin .sp-status-answered{
  color:#b91c1c !important; border-color:#fecaca !important; background:#fff5f5 !important;
}
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-answered{
  background: linear-gradient(180deg, #fff5f5 0%, #ffffff 60%) !important;
  box-shadow: 8px 8px 16px rgba(0,0,0,0.12), -8px -8px 16px rgba(255,255,255,0.9), inset 0 0 0 1px #fecaca !important;
}
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-answered td:first-child{
  box-shadow: inset 4px 0 0 #ef4444 !important;
}


/* ===== Remove left vertical bar in tables (answered + progress) ===== */
.sp-neumorph-admin .sp-group-answered table.support-pro-table tbody tr td:first-child,
.sp-neumorph-admin .sp-group-progress table.support-pro-table tbody tr td:first-child,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-answered td:first-child,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-in_progress td:first-child,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-pending td:first-child,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-waiting td:first-child{
  box-shadow: none !important;
}

/* In case the bar is rendered via ::before */
.sp-neumorph-admin .sp-group-answered table.support-pro-table tbody tr td:first-child::before,
.sp-neumorph-admin .sp-group-progress table.support-pro-table tbody tr td:first-child::before,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-answered td:first-child::before,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-in_progress td:first-child::before,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-pending td:first-child::before,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-waiting td:first-child::before{
  content: none !important;
  display: none !important;
}


/* ===== Adjust "تم الإغلاق" group background to white/silver ===== */
.sp-neumorph-admin .sp-group-closed .sp-group-head{
  background: linear-gradient(120deg, #4b5563, #6b7280) !important; /* neutral gray tone */
}
.sp-neumorph-admin .sp-group-closed table.support-pro-table tbody tr,
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-closed{
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 60%) !important; /* white to very light silver */
  box-shadow: 8px 8px 16px rgba(0,0,0,0.08), -8px -8px 16px rgba(255,255,255,0.95), inset 0 0 0 1px #e5e7eb !important;
}
.sp-neumorph-admin .sp-status-closed{
  color:#374151 !important; border-color:#e5e7eb !important; background:#f8fafc !important;
}


/* ===== 'Open' rows: light sky blue + white gradient ===== */
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-open{
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 60%) !important; /* sky to white */
  box-shadow: 8px 8px 16px rgba(0,0,0,0.10), -8px -8px 16px rgba(255,255,255,0.95), inset 0 0 0 1px #e0f2fe !important;
}
.sp-neumorph-admin .sp-status-open{
  color:#075985 !important;           /* slate/blue text */
  border-color:#bae6fd !important;    /* light blue border */
  background:#e0f2fe !important;      /* pale sky chip */
}

/* Optional: if any left bar remains on 'open', hide it */
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-open td:first-child{
  box-shadow: none !important;
}
.sp-neumorph-admin table.support-pro-table tbody tr.sp-row-status-open td:first-child::before{
  content:none !important; display:none !important;
}