/* Jury Marketing - reusable component classes (plain CSS, no framework, matching this codebase's own established convention of shared classes + render functions). */

/* --- Cards --- */

.jm-card {
  background: var(--jm-surface);
  border: 1px solid var(--jm-border);
  border-radius: var(--jm-radius-md);
  box-shadow: var(--jm-shadow-sm);
  padding: var(--jm-space-5);
}

.jm-card-title {
  font-size: var(--jm-fs-sm);
  font-weight: var(--jm-fw-semibold);
  color: var(--jm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--jm-space-2);
}

.jm-card-value {
  font-size: var(--jm-fs-2xl);
  font-weight: var(--jm-fw-bold);
  color: var(--jm-text);
  line-height: 1.1;
}

.jm-card-meta {
  margin-top: var(--jm-space-1);
  font-size: var(--jm-fs-xs);
  color: var(--jm-text-muted);
}

.jm-card-meta.jm-positive { color: var(--jm-success); }
.jm-card-meta.jm-negative { color: var(--jm-danger); }

.jm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--jm-space-4);
}

/* --- Buttons --- */

.jm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jm-space-2);
  height: var(--jm-touch-target);
  padding: 0 var(--jm-space-5);
  border-radius: var(--jm-radius-sm);
  border: 1px solid transparent;
  font-size: var(--jm-fs-base);
  font-weight: var(--jm-fw-semibold);
  transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.jm-btn-primary {
  background: var(--jm-navy);
  color: var(--jm-text-inverse);
}
.jm-btn-primary:hover { background: var(--jm-navy-700); }
.jm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.jm-btn-gold {
  background: var(--jm-gold);
  color: var(--jm-navy-950);
}
.jm-btn-gold:hover { background: var(--jm-gold-600); }

.jm-btn-secondary {
  background: var(--jm-surface);
  border-color: var(--jm-border);
  color: var(--jm-text);
}
.jm-btn-secondary:hover { border-color: var(--jm-navy); }

.jm-btn-ghost {
  background: transparent;
  color: var(--jm-text-muted);
}
.jm-btn-ghost:hover { background: var(--jm-bg); color: var(--jm-text); }

.jm-btn-sm {
  height: 36px;
  padding: 0 var(--jm-space-3);
  font-size: var(--jm-fs-sm);
}

.jm-btn-icon {
  width: var(--jm-touch-target);
  height: var(--jm-touch-target);
  padding: 0;
  border-radius: var(--jm-radius-full);
  background: transparent;
  color: var(--jm-text-muted);
}
.jm-btn-icon:hover { background: var(--jm-bg); color: var(--jm-text); }

/* --- Inputs --- */

.jm-field {
  display: flex;
  flex-direction: column;
  gap: var(--jm-space-2);
}

.jm-label {
  font-size: var(--jm-fs-sm);
  font-weight: var(--jm-fw-medium);
  color: var(--jm-text);
}

.jm-input {
  height: var(--jm-touch-target);
  padding: 0 var(--jm-space-4);
  border: 1px solid var(--jm-border);
  border-radius: var(--jm-radius-sm);
  background: var(--jm-surface);
  color: var(--jm-text);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.jm-input:focus {
  border-color: var(--jm-navy);
  box-shadow: 0 0 0 3px rgba(11, 30, 61, 0.1);
}

.jm-input.jm-input-error {
  border-color: var(--jm-danger);
}

.jm-field-error {
  font-size: var(--jm-fs-xs);
  color: var(--jm-danger);
}

.jm-field-hint {
  font-size: var(--jm-fs-xs);
  color: var(--jm-text-muted);
}

.jm-search {
  position: relative;
}
.jm-search .jm-input {
  padding-left: var(--jm-space-8);
}
.jm-search svg {
  position: absolute;
  left: var(--jm-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--jm-text-muted);
}

/* --- Badges / status indicators --- */

.jm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--jm-space-2);
  border-radius: var(--jm-radius-full);
  font-size: var(--jm-fs-xs);
  font-weight: var(--jm-fw-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.jm-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.jm-badge-success { background: var(--jm-success-bg); color: var(--jm-success); }
.jm-badge-warning { background: var(--jm-warning-bg); color: var(--jm-warning); }
.jm-badge-danger { background: var(--jm-danger-bg); color: var(--jm-danger); }
.jm-badge-info { background: var(--jm-info-bg); color: var(--jm-info); }
.jm-badge-neutral { background: var(--jm-bg); color: var(--jm-text-muted); border: 1px solid var(--jm-border); }

/* --- Lists / rows / tables --- */

.jm-list {
  display: flex;
  flex-direction: column;
}

.jm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jm-space-3);
  padding: var(--jm-space-4) 0;
  border-bottom: 1px solid var(--jm-border);
}
.jm-row:last-child { border-bottom: none; }

.jm-row-title {
  font-size: var(--jm-fs-base);
  font-weight: var(--jm-fw-semibold);
  color: var(--jm-text);
}

.jm-row-meta {
  font-size: var(--jm-fs-sm);
  color: var(--jm-text-muted);
  margin-top: 2px;
}

.jm-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--jm-radius-sm);
  background: var(--jm-navy);
  color: var(--jm-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--jm-fw-bold);
  font-size: var(--jm-fs-base);
  flex-shrink: 0;
}

/* --- Empty / loading / error states --- */

.jm-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--jm-space-10) var(--jm-space-6);
  gap: var(--jm-space-2);
  color: var(--jm-text-muted);
}

.jm-state-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--jm-radius-full);
  background: var(--jm-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jm-text-muted);
  margin-bottom: var(--jm-space-2);
}

.jm-state-title {
  font-size: var(--jm-fs-md);
  font-weight: var(--jm-fw-semibold);
  color: var(--jm-text);
}

.jm-state-body {
  font-size: var(--jm-fs-sm);
  max-width: 320px;
}

.jm-state-error .jm-state-icon { background: var(--jm-danger-bg); color: var(--jm-danger); }

.jm-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--jm-border);
  border-top-color: var(--jm-navy);
  animation: jm-spin 700ms linear infinite;
}

@keyframes jm-spin {
  to { transform: rotate(360deg); }
}

.jm-skeleton {
  background: linear-gradient(90deg, var(--jm-border) 25%, #EFF1F4 37%, var(--jm-border) 63%);
  background-size: 400% 100%;
  animation: jm-skeleton 1.4s ease infinite;
  border-radius: var(--jm-radius-sm);
}

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

/* --- Coming-soon / placeholder shell content --- */

.jm-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jm-space-3);
  padding: var(--jm-space-8);
  background: var(--jm-surface);
  border: 1px dashed var(--jm-border);
  border-radius: var(--jm-radius-lg);
}

.jm-coming-soon-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--jm-radius-md);
  background: var(--jm-navy);
  color: var(--jm-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Notification bell dropdown --- */

.jm-notif-panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--jm-space-2));
  right: 0;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--jm-surface);
  border: 1px solid var(--jm-border);
  border-radius: var(--jm-radius-md);
  box-shadow: var(--jm-shadow-lg);
  z-index: 300;
}

.jm-notif-panel-open {
  display: block;
}

.jm-notif-row {
  padding: var(--jm-space-3) var(--jm-space-4);
  border-bottom: 1px solid var(--jm-border);
  cursor: pointer;
}

.jm-notif-row:last-child {
  border-bottom: none;
}

.jm-notif-row:hover {
  background: var(--jm-bg);
}

.jm-notif-unread {
  background: var(--jm-gold-100);
}

.jm-notif-message {
  font-size: var(--jm-fs-sm);
  color: var(--jm-text);
  line-height: 1.4;
}

.jm-notif-meta {
  font-size: var(--jm-fs-xs);
  color: var(--jm-text-muted);
  margin-top: var(--jm-space-1);
}

.jm-notif-empty,
.jm-notif-loading {
  padding: var(--jm-space-5);
  text-align: center;
  font-size: var(--jm-fs-sm);
  color: var(--jm-text-muted);
}