/* pm-app.css — Pravno mišljenje B2C SPA */
:root {
  --c-primary:    #1a3a5c;
  --c-secondary:  #2e6da4;
  --c-accent:     #e8a020;
  --c-bg:         #f7f9fc;
  --c-surface:    #ffffff;
  --c-text:       #1a1a2e;
  --c-muted:      #6c757d;
  --c-error:      #c0392b;
  --c-success:    #27ae60;
  --c-urgency:    #e74c3c;
  --r-card:       8px;
  --shadow:       0 2px 8px rgba(0,0,0,.1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
}

/* Screens */
.screen { display: none; min-height: 100vh; padding: 16px; }
.screen.active { display: block; }

/* Header */
.pm-header { text-align: center; padding: 32px 16px 16px; }
.pm-header h1 { color: var(--c-primary); margin: 0 0 4px; font-size: 1.8rem; }
.pm-header .subtitle { color: var(--c-muted); margin: 0; }

/* Card */
.pm-card {
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 24px;
  max-width: 680px;
  margin: 0 auto;
}
.pm-card.center { text-align: center; }

/* Buttons */
.pm-btn {
  display: inline-block;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 24px;
  text-align: center;
  transition: opacity .15s;
  width: 100%;
  margin: 6px 0;
}
.pm-btn:hover { opacity: .85; }
.pm-btn.primary   { background: var(--c-secondary); color: #fff; }
.pm-btn.secondary { background: transparent; color: var(--c-secondary); border: 2px solid var(--c-secondary); }
.pm-btn.ghost     { background: transparent; color: var(--c-muted); }
.pm-btn.sm        { padding: 6px 12px; width: auto; font-size: .875rem; }

/* Inputs */
.pm-input {
  display: block;
  width: 100%;
  border: 1.5px solid #cdd3da;
  border-radius: 6px;
  font-size: 1rem;
  margin: 4px 0 16px;
  padding: 10px 12px;
  transition: border-color .15s;
}
.pm-input:focus { outline: none; border-color: var(--c-secondary); }
select.pm-input { background: #fff; }
textarea.pm-input { resize: vertical; }

label { display: block; font-weight: 500; margin-bottom: 2px; }
.pm-checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; margin: 8px 0; cursor: pointer; }
.pm-checkbox-group label { font-weight: 400; display: flex; gap: 8px; }

/* Disclaimer box */
.pm-disclaimer-box {
  background: #fff8e1;
  border-left: 4px solid var(--c-accent);
  border-radius: 4px;
  font-size: .875rem;
  margin: 16px 0;
  padding: 12px 16px;
}
.pm-disclaimer-box.strong { border-color: var(--c-urgency); background: #fdecea; }
.pm-disclaimer-box.small  { font-size: .8rem; margin: 8px 0; }

/* Token display */
.pm-token-display {
  font-family: monospace;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--c-primary);
  background: var(--c-bg);
  border: 2px dashed var(--c-secondary);
  border-radius: 8px;
  padding: 16px 24px;
  margin: 16px auto;
  display: inline-block;
}

/* Wizard */
.pm-wizard { max-width: 680px; margin: 0 auto; }
.pm-wizard-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pm-wizard-progress .step {
  flex: 1;
  background: #dee2e6;
  border-radius: 4px;
  color: var(--c-muted);
  font-size: .8rem;
  padding: 6px 4px;
  text-align: center;
  white-space: nowrap;
}
.pm-wizard-progress .step.active { background: var(--c-secondary); color: #fff; }
.pm-wizard-progress .step.done   { background: var(--c-success);   color: #fff; }
.wizard-step { display: none; }
.pm-wizard-nav { display: flex; gap: 8px; margin-top: 16px; }
.pm-wizard-nav .pm-btn { flex: 1; }

/* Upload */
.pm-upload-area {
  border: 2px dashed #cdd3da;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  margin: 8px 0;
}
.pm-upload-area.dragover { border-color: var(--c-secondary); background: #e8f0fe; }
.pm-upload-item { font-size: .875rem; color: var(--c-muted); padding: 4px 0; }

/* Opinion */
.pm-urgency-banner {
  background: #c0392b;
  color: #fff;
  font-size: 1rem;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  text-align: center;
}
.pm-urgency-inline { color: var(--c-urgency); font-weight: 600; }
.pm-opinion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto 12px;
  padding: 0 4px;
}
.pm-credit-display { font-size: .875rem; color: var(--c-muted); }
.pm-credit-info { font-size: .75rem; color: var(--c-muted); margin: 2px 0 0; }

/* Tabs */
.pm-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 2px solid #dee2e6;
  max-width: 900px;
  margin: 0 auto;
  gap: 0;
}
.pm-tabs .tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--c-muted);
  cursor: pointer;
  font-size: .875rem;
  font-weight: 500;
  padding: 10px 14px;
  white-space: nowrap;
  margin-bottom: -2px;
}
.pm-tabs .tab.active { border-bottom-color: var(--c-secondary); color: var(--c-secondary); }
.pm-tab-content { max-width: 900px; margin: 0 auto; padding: 20px 4px; }
.tab-pane.hidden { display: none; }

.pm-list-section { margin: 12px 0; }
.pm-list-section ul { margin: 4px 0; padding-left: 20px; }
.pm-list-section li { margin: 4px 0; }
.pm-empty { color: var(--c-muted); font-style: italic; }

.pm-summary-box { background: var(--c-bg); border-radius: 6px; padding: 12px; margin: 8px 0; }

.pm-referral-cta { margin-top: 24px; text-align: center; }

/* Chat */
.pm-chat-messages {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  height: 300px;
  overflow-y: auto;
  padding: 12px;
  margin-bottom: 12px;
}
.pm-chat-msg { margin: 8px 0; padding: 10px 14px; border-radius: 12px; max-width: 85%; }
.msg-user      { background: var(--c-secondary); color: #fff; margin-left: auto; border-bottom-right-radius: 2px; }
.msg-assistant { background: #f1f3f5; color: var(--c-text); border-bottom-left-radius: 2px; }
.pm-chat-input-area { display: flex; gap: 8px; }
.pm-chat-input-area textarea { flex: 1; margin: 0; }
.pm-chat-input-area .pm-btn { width: auto; margin: 0; }

/* Referral */
.pm-attorney-list { margin: 16px 0; }
.pm-attorney-card {
  background: var(--c-surface);
  border: 1px solid #dee2e6;
  border-radius: var(--r-card);
  margin: 8px 0;
  padding: 16px;
}
.pm-referral-form { margin-top: 16px; }
.pm-filter-row { display: flex; gap: 8px; margin: 8px 0; }

/* Feedback */
.pm-error   { color: var(--c-error);   font-size: .875rem; margin: 4px 0; }
.pm-success-box { background: #d4edda; border-radius: 6px; color: var(--c-success); padding: 12px 16px; }
.pm-hint    { color: var(--c-muted);   font-size: .875rem; }
.hidden     { display: none !important; }
.pm-link    { color: var(--c-secondary); }

/* Spinner */
.pm-spinner {
  border: 4px solid #dee2e6;
  border-top-color: var(--c-secondary);
  border-radius: 50%;
  height: 48px;
  width: 48px;
  animation: spin .7s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Responsive */
@media (min-width: 768px) {
  .pm-btn { width: auto; }
  .pm-wizard-nav .pm-btn { flex: none; min-width: 140px; }
  .pm-tabs .tab { font-size: 1rem; padding: 10px 20px; }
}