:root {
  --pj-bg: #ffffff;
  --pj-surface: #ffffff;
  --pj-surface-muted: #f7f7f7;
  --pj-border: #e0e0e0;
  --pj-border-strong: #cfcfcf;
  --pj-text: #111111;
  --pj-text-muted: #666666;
  --pj-text-soft: #8a8a8a;
  --pj-black: #111111;
  --pj-black-hover: #333333;
}

html,
body {
  background: var(--pj-bg) !important;
  color: var(--pj-text) !important;
}

body,
button,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

h1,
h2,
h3,
h4,
label,
strong,
th,
.card-title,
.section-title,
.modal-title {
  color: var(--pj-text) !important;
}

p,
.subtitle,
small,
.help-text,
.text-muted,
.empty-state,
.chat-conv-preview,
.chat-conv-time,
.msg-meta,
.back-link,
.footer {
  color: var(--pj-text-muted) !important;
}

.container,
.card,
.panel,
.modal-content,
.form-card,
.table-container,
.shop-card,
.stat-card,
.metric-card,
.analytics-card,
.promo-card,
.order-card,
.product-card,
.return-card,
.store-selector,
.chat-layout,
.chat-sidebar,
.chat-main-header,
.chat-input-area,
.chat-empty,
.links,
.link-card {
  background: var(--pj-surface) !important;
  border-color: var(--pj-border) !important;
  box-shadow: none !important;
}

.link-card:hover,
.chat-conv-item:hover,
.table-row:hover,
tr:hover,
.shop-card:hover,
.product-card:hover,
.order-card:hover,
.return-card:hover,
.promo-card:hover {
  background: var(--pj-surface-muted) !important;
}

button,
.btn,
.button,
.primary-btn,
.submit-btn,
.action-btn,
.btn-primary,
.store-selector .btn,
.chat-input-area button,
button[type="submit"],
input[type="submit"] {
  background: var(--pj-black) !important;
  border: 1px solid var(--pj-black) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

button:hover:not(:disabled),
.btn:hover:not(:disabled),
.button:hover:not(:disabled),
.primary-btn:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
.action-btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.store-selector .btn:hover,
.chat-input-area button:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled) {
  background: var(--pj-black-hover) !important;
  border-color: var(--pj-black-hover) !important;
}

button:disabled,
.btn:disabled,
.chat-input-area button:disabled {
  background: #d9d9d9 !important;
  border-color: #d9d9d9 !important;
  color: #777777 !important;
}

.secondary-btn,
.btn-secondary,
.btn-outline,
button.secondary,
.view-toggle button,
.tab-btn,
.filter-btn {
  background: var(--pj-surface) !important;
  border: 1px solid var(--pj-border-strong) !important;
  color: var(--pj-text) !important;
}

.view-toggle,
.tabs,
.filters {
  border-color: var(--pj-border-strong) !important;
}

.view-toggle button.active,
.tab-btn.active,
.filter-btn.active,
.badge.active,
.status.active {
  background: var(--pj-black) !important;
  color: #ffffff !important;
  border-color: var(--pj-black) !important;
}

input,
select,
textarea,
.search-input,
.form-control {
  background: #ffffff !important;
  border: 1px solid var(--pj-border-strong) !important;
  color: var(--pj-text) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.search-input:focus,
.form-control:focus {
  border-color: var(--pj-black) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08) !important;
}

table,
.table,
thead,
tbody,
tr,
th,
td {
  border-color: var(--pj-border) !important;
}

thead,
th,
.table-header {
  background: var(--pj-surface-muted) !important;
  color: var(--pj-text) !important;
}

.badge,
.status-badge,
.status,
.realtime-badge,
.chat-conv-badge,
.pill,
.tag {
  border: 1px solid var(--pj-border-strong) !important;
  box-shadow: none !important;
}

.badge,
.status,
.status-badge,
.pill,
.tag,
.realtime-on,
.realtime-off {
  background: var(--pj-surface-muted) !important;
  color: var(--pj-text) !important;
}

.chat-conv-badge,
.badge-danger,
.status-error,
.alert-error {
  background: var(--pj-black) !important;
  color: #ffffff !important;
  border-color: var(--pj-black) !important;
}

.alert,
.alert-info,
.notice,
.info-box {
  background: var(--pj-surface-muted) !important;
  color: var(--pj-text) !important;
  border: 1px solid var(--pj-border) !important;
}

.chat-layout {
  border-radius: 8px !important;
}

.chat-sidebar-header,
.chat-input-area {
  background: var(--pj-surface-muted) !important;
}

.chat-main {
  background: #fafafa !important;
}

.chat-main::before {
  background-image: none !important;
}

.chat-conv-item.active {
  background: #f2f2f2 !important;
}

.chat-conv-item.active::before {
  background: var(--pj-black) !important;
}

.chat-conv-avatar,
.chat-user-avatar,
.avatar {
  background: var(--pj-black) !important;
  color: #ffffff !important;
}

.chat-msg {
  box-shadow: none !important;
  border: 1px solid var(--pj-border) !important;
}

.chat-msg.outgoing {
  background: #111111 !important;
  color: #ffffff !important;
}

.chat-msg.outgoing .msg-body,
.chat-msg.outgoing .msg-meta,
.chat-msg.outgoing .msg-status,
.chat-msg.outgoing .msg-time,
.chat-msg.outgoing .msg-card,
.chat-msg.outgoing .msg-card-title {
  color: #ffffff !important;
}

.chat-msg.incoming {
  background: #ffffff !important;
  color: var(--pj-text) !important;
}

.chat-msg .msg-status.read,
.chat-msg .msg-status.sent {
  color: inherit !important;
}

.msg-card,
.date-separator span,
.typing-indicator {
  background: var(--pj-surface-muted) !important;
  color: var(--pj-text) !important;
  border-color: var(--pj-border) !important;
}

.online-dot {
  background: var(--pj-black) !important;
  border-color: #ffffff !important;
}

a,
.back-link,
.footer button {
  color: var(--pj-text) !important;
}

a:hover,
.back-link:hover,
.footer button:hover {
  color: var(--pj-black-hover) !important;
}

svg,
.icon {
  color: var(--pj-text-muted) !important;
}

@media (max-width: 768px) {
  body {
    background: #ffffff !important;
  }

  .container {
    width: 100% !important;
  }

  .store-selector,
  .toolbar,
  .filters,
  .form-row {
    gap: 8px !important;
  }

  button,
  .btn,
  input,
  select,
  textarea {
    max-width: 100% !important;
  }

  .chat-layout {
    border-radius: 6px !important;
  }

  .chat-msg {
    max-width: 86% !important;
  }
}