/* Opto Manager v1.5.0 — Design system base
   Tokens, branding and reusable components for admin and patient portal. */
:root {
  --opto-ds-primary: #0EA5A8;
  --opto-ds-primary-dark: #087F84;
  --opto-ds-primary-soft: #CFF5F2;
  --opto-ds-accent: #0B1F3A;
  --opto-ds-bg: #F2F5F7;
  --opto-ds-surface: #FFFFFF;
  --opto-ds-surface-soft: #F8FBFC;
  --opto-ds-border: #D8E6EC;
  --opto-ds-border-strong: #BBD4DD;
  --opto-ds-text: #0B1F3A;
  --opto-ds-muted: #6B7280;
  --opto-ds-success: #16A34A;
  --opto-ds-success-soft: #DCFCE7;
  --opto-ds-warning: #D97706;
  --opto-ds-warning-soft: #FEF3C7;
  --opto-ds-danger: #DC2626;
  --opto-ds-danger-soft: #FEE2E2;
  --opto-ds-info: #2563EB;
  --opto-ds-info-soft: #DBEAFE;
  --opto-ds-radius-xs: 8px;
  --opto-ds-radius-sm: 10px;
  --opto-ds-radius-md: 14px;
  --opto-ds-radius-lg: 20px;
  --opto-ds-radius-pill: 999px;
  --opto-ds-shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06);
  --opto-ds-shadow-md: 0 12px 30px rgba(11, 31, 58, 0.08);
  --opto-ds-space-1: 4px;
  --opto-ds-space-2: 8px;
  --opto-ds-space-3: 12px;
  --opto-ds-space-4: 16px;
  --opto-ds-space-5: 20px;
  --opto-ds-space-6: 24px;
  --opto-ds-space-8: 32px;
  --opto-ds-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.opto-manager-wrap,
.opto-patient-portal {
  color: var(--opto-ds-text);
  font-family: var(--opto-ds-font);
}

.opto-manager-wrap > h1:first-child {
  align-items: center;
  color: var(--opto-ds-text);
  display: flex;
  font-weight: 800;
  gap: 12px;
  letter-spacing: -0.03em;
}

.opto-manager-wrap > h1:first-child::before {
  background: url('../images/opto-manager-mark.svg') center/contain no-repeat;
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  height: 34px;
  width: 48px;
}

.opto-ds-logo,
.opto-brand-logo {
  display: block;
  height: auto;
  max-width: 230px;
}

.opto-ds-page,
.opto-ds-card,
.opto-ds-panel,
.opto-card,
.opto-patient-panel,
.opto-patient-summary-card,
.opto-chat-shell,
.opto-chat-mass-panel,
.opto-unified-create-ticket,
.opto-unified-inbox-card {
  border-color: var(--opto-ds-border);
  border-radius: var(--opto-ds-radius-md);
  box-shadow: var(--opto-ds-shadow-sm);
}

.opto-ds-card,
.opto-ds-panel {
  background: var(--opto-ds-surface);
  border: 1px solid var(--opto-ds-border);
  padding: var(--opto-ds-space-6);
}

.opto-ds-grid {
  display: grid;
  gap: var(--opto-ds-space-5);
}

.opto-ds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opto-ds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opto-ds-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.opto-ds-button,
.opto-manager-wrap .button.opto-ds-button,
.opto-patient-portal .opto-ds-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--opto-ds-radius-sm);
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--opto-ds-font);
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  line-height: 1.2;
  min-height: 40px;
  padding: 10px 16px;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.opto-ds-button:hover,
.opto-ds-button:focus { transform: translateY(-1px); }
.opto-ds-button-primary { background: var(--opto-ds-primary); color: #fff; }
.opto-ds-button-primary:hover,
.opto-ds-button-primary:focus { background: var(--opto-ds-primary-dark); color: #fff; }
.opto-ds-button-secondary { background: #fff; border-color: var(--opto-ds-primary); color: var(--opto-ds-primary-dark); }
.opto-ds-button-tertiary { background: var(--opto-ds-primary-soft); color: var(--opto-ds-primary-dark); }
.opto-ds-button-danger { background: var(--opto-ds-danger); color: #fff; }
.opto-ds-button-ghost { background: transparent; border-color: transparent; color: var(--opto-ds-primary-dark); }

.opto-manager-wrap .button-primary,
.opto-patient-portal .opto-button,
.opto-chat-send-button,
.opto-chat-mass-form .button-primary {
  background: var(--opto-ds-primary);
  border-color: var(--opto-ds-primary);
  border-radius: var(--opto-ds-radius-sm);
  box-shadow: none;
  color: #fff;
  font-weight: 700;
}

.opto-manager-wrap .button-primary:hover,
.opto-manager-wrap .button-primary:focus,
.opto-patient-portal .opto-button:hover,
.opto-patient-portal .opto-button:focus,
.opto-chat-send-button:hover,
.opto-chat-send-button:focus {
  background: var(--opto-ds-primary-dark);
  border-color: var(--opto-ds-primary-dark);
  color: #fff;
}

.opto-manager-wrap input[type="text"],
.opto-manager-wrap input[type="search"],
.opto-manager-wrap input[type="email"],
.opto-manager-wrap input[type="url"],
.opto-manager-wrap input[type="number"],
.opto-manager-wrap input[type="date"],
.opto-manager-wrap input[type="password"],
.opto-manager-wrap select,
.opto-manager-wrap textarea,
.opto-patient-portal input[type="text"],
.opto-patient-portal input[type="search"],
.opto-patient-portal input[type="email"],
.opto-patient-portal input[type="password"],
.opto-patient-portal input[type="number"],
.opto-patient-portal input[type="date"],
.opto-patient-portal select,
.opto-patient-portal textarea {
  border-color: var(--opto-ds-border-strong);
  border-radius: var(--opto-ds-radius-sm);
  color: var(--opto-ds-text);
  font-family: var(--opto-ds-font);
  min-height: 40px;
}

.opto-manager-wrap input:focus,
.opto-manager-wrap select:focus,
.opto-manager-wrap textarea:focus,
.opto-patient-portal input:focus,
.opto-patient-portal select:focus,
.opto-patient-portal textarea:focus {
  border-color: var(--opto-ds-primary);
  box-shadow: 0 0 0 3px rgba(14, 165, 168, .16);
  outline: none;
}

.opto-ds-chip,
.opto-status,
.opto-ticket-badge,
.opto-chat-thread-meta em,
.opto-patient-notification-counter,
.opto-patient-forms-count {
  align-items: center;
  border-radius: var(--opto-ds-radius-pill);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  min-height: 22px;
  padding: 5px 10px;
}

.opto-ds-chip-active,
.opto-status-active,
.opto-status-ok { background: var(--opto-ds-success-soft); color: #166534; }
.opto-ds-chip-pending,
.opto-status-warning,
.opto-status-draft { background: var(--opto-ds-warning-soft); color: #92400E; }
.opto-ds-chip-completed { background: var(--opto-ds-primary-soft); color: var(--opto-ds-primary-dark); }
.opto-ds-chip-urgent { background: var(--opto-ds-danger-soft); color: #991B1B; }
.opto-ds-chip-archived,
.opto-status-archived { background: #E5E7EB; color: #374151; }
.opto-ds-chip-closed { background: var(--opto-ds-info-soft); color: #1D4ED8; }

.opto-tabs a,
.opto-chat-segmented a,
.opto-public-view-tab {
  border-radius: var(--opto-ds-radius-pill);
}

.opto-tabs a.active,
.opto-chat-segmented a.is-active,
.opto-public-view-tab.is-active {
  background: var(--opto-ds-primary);
  border-color: var(--opto-ds-primary);
  color: #fff;
}

.opto-empty-state,
.opto-ds-empty {
  background: var(--opto-ds-surface-soft);
  border: 1px dashed var(--opto-ds-border-strong);
  border-radius: var(--opto-ds-radius-lg);
  color: var(--opto-ds-muted);
  padding: var(--opto-ds-space-8);
  text-align: center;
}

.opto-ds-skeleton {
  animation: optoDsPulse 1.2s ease-in-out infinite;
  background: linear-gradient(90deg, #EAF2F5 25%, #F6FAFB 37%, #EAF2F5 63%);
  background-size: 400% 100%;
  border-radius: var(--opto-ds-radius-sm);
  min-height: 18px;
}

@keyframes optoDsPulse {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.opto-ds-brand-strip,
.opto-patient-brand-strip {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.opto-ds-version-pill {
  background: var(--opto-ds-primary-soft);
  border-radius: var(--opto-ds-radius-pill);
  color: var(--opto-ds-primary-dark);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}

.opto-ds-preview-card { overflow: hidden; }
.opto-ds-palette { display: flex; flex-wrap: wrap; gap: 12px; }
.opto-ds-swatch { min-width: 118px; }
.opto-ds-swatch i { border: 1px solid var(--opto-ds-border); border-radius: 14px; display: block; height: 56px; margin-bottom: 8px; }
.opto-ds-swatch strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.opto-ds-swatch small { color: var(--opto-ds-muted); }
.opto-ds-component-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1100px) {
  .opto-ds-grid-2,
  .opto-ds-grid-3,
  .opto-ds-grid-4 { grid-template-columns: 1fr; }
  .opto-ds-brand-strip,
  .opto-patient-brand-strip { align-items: flex-start; flex-direction: column; }
}

/* v1.5.0 branding integration */
.opto-patient-brand-strip {
  background: linear-gradient(135deg, rgba(207,245,242,.65), rgba(255,255,255,.95));
  border: 1px solid var(--opto-ds-border);
  border-radius: var(--opto-ds-radius-lg);
  padding: 16px 18px;
}
.opto-patient-logo { max-width: 210px; }
.opto-ds-hero {
  background: linear-gradient(135deg, rgba(207,245,242,.72), #fff);
  border-color: var(--opto-ds-border);
  border-left-color: var(--opto-ds-primary);
  border-radius: var(--opto-ds-radius-lg);
  box-shadow: var(--opto-ds-shadow-sm);
}
.opto-ds-hero h2 { color: var(--opto-ds-text); letter-spacing: -0.02em; }
.opto-version { border: 1px solid var(--opto-ds-border); background: #fff; border-radius: var(--opto-ds-radius-md); }
.opto-version strong { color: var(--opto-ds-primary-dark); }
.opto-ds-page .opto-grid { margin-bottom: 20px; }
.opto-ds-page .opto-card { border-radius: var(--opto-ds-radius-md); }
.opto-ds-page .opto-stat-card { background: linear-gradient(180deg,#fff, #F9FCFD); }
.opto-ds-page .opto-stat-card h2 { color: var(--opto-ds-muted); font-size: 14px; font-weight: 800; margin: 0; }
.opto-ds-page .opto-stat-card strong { color: var(--opto-ds-text); letter-spacing: -0.04em; }
#adminmenu #toplevel_page_opto-manager .wp-menu-image img {
  height: 20px;
  opacity: 1;
  padding-top: 7px;
  width: 20px;
}
@media (max-width: 782px) {
  #adminmenu #toplevel_page_opto-manager .wp-menu-image img { padding-top: 8px; }
}