* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; color: #1a1a1a; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  background: #1f2733;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.sidebar-title { font-weight: 600; margin-bottom: 16px; }
.sidebar ul { list-style: none; padding: 0; margin: 0; flex: 1; }
.sidebar li { margin-bottom: 8px; }
.sidebar a { color: #cdd6e0; text-decoration: none; }
.sidebar a:hover { color: #fff; }
.logout-form { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #34404f; padding-top: 12px; }
.sidebar-user { font-size: 0.85em; color: #9aa6b4; }
.logout-form button { background: none; border: 1px solid #34404f; color: #cdd6e0; padding: 6px; cursor: pointer; }

.content { flex: 1; padding: 24px 32px; }

.placeholder { color: #666; font-style: italic; }

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f4f5f7;
}
.login-form {
  background: #fff;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 280px;
}
.login-form label { display: flex; flex-direction: column; font-size: 0.9em; gap: 4px; }
.login-form input { padding: 8px; font-size: 1em; }
.login-form button { padding: 10px; background: #1f2733; color: #fff; border: none; cursor: pointer; }
.error { color: #c0392b; font-size: 0.9em; }

.import-form { display: flex; flex-direction: column; gap: 8px; max-width: 700px; }
.import-form textarea { font-family: inherit; font-size: 0.95em; padding: 10px; }
.import-form button { align-self: flex-start; padding: 10px 16px; background: #1f2733; color: #fff; border: none; cursor: pointer; }

.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid #ccc; }
.tab-button { padding: 10px 16px; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-size: 0.95em; color: #555; }
.tab-button.active { color: #1f2733; border-bottom-color: #1f2733; font-weight: 600; }

.warning-banner {
  background: #fdecea;
  border: 1px solid #c0392b;
  color: #c0392b;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.preview-form { max-width: 900px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; font-size: 0.9em; gap: 4px; }
.field.full-width { grid-column: 1 / -1; margin-bottom: 12px; }
.field input, .field textarea, .field select {
  padding: 8px;
  font-size: 1em;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid #2f7ed8;
  outline-offset: 1px;
  border-color: #2f7ed8;
}
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #c0392b; background: #fdecea; }
.required-marker { color: #c0392b; font-weight: 700; }

.raw-text-details { margin: 16px 0; }
.raw-text-details pre { white-space: pre-wrap; background: #f4f5f7; padding: 12px; border-radius: 4px; }

.preview-form button[type="submit"] {
  padding: 10px 16px;
  background: #1f2733;
  color: #fff;
  border: none;
  cursor: pointer;
}
.preview-form button[type="submit"]:disabled {
  background: #aab2bd;
  cursor: not-allowed;
}

/* Shared primary-action button style — Save Ticket Details, Save Follow-Up,
   and other main form submit buttons across the app. */
.btn-primary {
  padding: 10px 18px;
  background: #1f2733;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 600;
  margin-top: 8px;
}
.btn-primary:hover { background: #34404f; }

.followup-section { margin-bottom: 32px; }
.followup-section h2 { font-size: 1.1em; border-bottom: 2px solid #1f2733; padding-bottom: 6px; margin-bottom: 10px; }
.section-intro { color: #555; font-size: 0.88em; margin: 0 0 14px; }

/* Today Follow-Ups is the dispatcher's main daily task, so it gets the
   strongest visual weight on the page — larger heading, accent bar. */
.followup-section.section-primary h2 {
  font-size: 1.35em;
  border-bottom: none;
  border-left: 5px solid #1f2733;
  padding: 4px 0 4px 12px;
  margin-bottom: 14px;
}

.pipeline-group-heading {
  font-size: 0.95em;
  margin: 18px 0 8px;
  padding-left: 10px;
  border-left: 4px solid #ccc;
}
.pipeline-group-heading.day2 { border-left-color: #2e9e5b; }
.pipeline-group-heading.day5 { border-left-color: #c97a14; }
.pipeline-group-heading.day10 { border-left-color: #c0392b; }

/* Customer Wants To Proceed is a distinct outcome, not a due-today list —
   set it apart with its own bordered panel instead of a plain section. */
.proceed-section {
  border: 1px solid #bfe3c9;
  background: #f3fbf5;
  border-radius: 6px;
  padding: 14px 16px;
}
.proceed-section h2 { border-bottom: none; margin-bottom: 8px; }

/* Recently Updated is reference info, not an action list — de-emphasize it
   relative to Today Follow-Ups/Pipeline/Customer Wants To Proceed. */
.section-lowpriority { border-top: 1px solid #e0e0e0; padding-top: 18px; }
.section-lowpriority h2 { font-size: 0.95em; color: #555; border-bottom: none; }

.status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.82em; font-weight: 600; color: #fff; }
.status-badge.status-grey { background: #8a93a1; }
.status-badge.status-blue { background: #2f7ed8; }
.status-badge.status-green { background: #2e9e5b; }
.status-badge.status-orange { background: #e08e2b; }
.status-badge.status-red { background: #c0392b; }

.recently-updated-card { border: 1px solid #e0e0e0; border-radius: 4px; padding: 12px 16px; margin-bottom: 10px; }
.recently-updated-card .ru-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.recently-updated-card .ru-note-preview { color: #555; font-size: 0.9em; margin: 6px 0; white-space: pre-wrap; }
.recently-updated-card .ru-meta { font-size: 0.85em; color: #777; }

.followup-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.followup-table th, .followup-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e0e0e0; vertical-align: middle; }
.followup-table th { background: #f4f5f7; font-weight: 600; }
.followup-table td:first-child { font-weight: 600; }
.followup-table tbody tr:hover { background: #fafbfc; }

/* Full-row coloring by follow-up stage on the Home page board. Text stays
   the default dark color (no override here) so it reads clearly on every
   stage background. */
.followup-table tbody tr.stage-first { background: #c8e6c9; }
.followup-table tbody tr.stage-first:hover { background: #b6dcb8; }
.followup-table tbody tr.stage-second { background: #ffe0b2; }
.followup-table tbody tr.stage-second:hover { background: #ffd698; }
.followup-table tbody tr.stage-final { background: #ffcdd2; }
.followup-table tbody tr.stage-final:hover { background: #ffb9c1; }
.followup-table tbody tr.stage-proceed { background: #c8e6c9; }
.followup-table tbody tr.stage-proceed:hover { background: #b6dcb8; }
.followup-table tbody tr.stage-archived { background: #e0e0e0; color: #555; }
.followup-table tbody tr.stage-archived:hover { background: #d4d4d4; }

.delete-btn {
  padding: 6px 14px;
  background: #fff;
  color: #c0392b;
  border: 1px solid #c0392b;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.88em;
  font-weight: 600;
}
.delete-btn:hover { background: #c0392b; color: #fff; }

.archive-btn {
  display: inline-block;
  margin-bottom: 20px;
  padding: 9px 18px;
  background: #1f2733;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.92em;
  font-weight: 600;
}
.archive-btn:hover { background: #34404f; }

.open-call-btn {
  display: inline-block;
  padding: 6px 14px;
  background: #1f2733;
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
  font-size: 0.88em;
  font-weight: 600;
  white-space: nowrap;
}
.open-call-btn:hover { background: #34404f; }

.detail-section { margin-bottom: 28px; max-width: 800px; }
.detail-section h2 { font-size: 1.1em; border-bottom: 2px solid #1f2733; padding-bottom: 6px; margin-bottom: 12px; }

/* Save Follow-Up is the main action a dispatcher takes on a ticket — group
   Status/Follow-Up Call Date/Follow-Up Update/Save button in one clearly
   bordered panel so it reads as a single task, separate from Ticket Details. */
.detail-section.save-followup-section {
  border: 1px solid #cdd6e0;
  background: #f9fafb;
  border-radius: 6px;
  padding: 16px 18px;
}
.detail-section.save-followup-section h2 { border-bottom: none; margin-bottom: 14px; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 0; }
.info-grid > div { display: flex; flex-direction: column; }
.info-grid .full-width { grid-column: 1 / -1; }
.info-grid dt { font-size: 0.78em; text-transform: uppercase; color: #888; margin: 0; }
.info-grid dd { margin: 2px 0 0 0; font-size: 0.98em; white-space: pre-wrap; }

.update-display-label { display: flex; align-items: center; gap: 4px; }
.tech-update-display {
  background: #f4f5f7;
  padding: 12px;
  border-radius: 4px;
  white-space: pre-wrap;
  font-size: 0.95em;
  line-height: 1.5;
  margin-top: 4px;
}

/* Copy/Edit are secondary actions next to the Latest Update display — kept
   visually lighter (outline style) so they don't compete with the primary
   Save buttons below them. */
.copy-btn {
  padding: 4px 10px;
  margin-left: 8px;
  background: #fff;
  color: #1f2733;
  border: 1px solid #aab2bd;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85em;
}
.copy-btn:hover { background: #f4f5f7; }
.copy-confirm { margin-left: 6px; font-size: 0.85em; color: #2c7a2c; }

.conditional-fields { display: flex; gap: 20px; margin: 12px 0; }
.conditional-fields .field { flex: 1; }

.action-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.action-btn {
  padding: 8px 14px;
  border: 1px solid #1f2733;
  background: #fff;
  color: #1f2733;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9em;
}
.action-btn:hover { background: #1f2733; color: #fff; }

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-end;
  margin-bottom: 20px;
  padding: 14px;
  background: #f4f5f7;
  border-radius: 4px;
}
.filter-form .field { font-size: 0.85em; min-width: 150px; }
.filter-form select, .filter-form input { padding: 6px; font-size: 0.95em; }
.filter-actions { display: flex; gap: 10px; align-items: center; }
.filter-actions button { padding: 8px 14px; background: #1f2733; color: #fff; border: none; border-radius: 3px; cursor: pointer; }
.filter-actions a { font-size: 0.9em; color: #555; }

.export-csv-btn {
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 14px;
  background: #1f2733;
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
  font-size: 0.9em;
}
.export-csv-btn:hover { background: #34404f; }

.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form select, .inline-form input { padding: 4px; font-size: 0.85em; }
.inline-form input[type="password"] { width: 120px; }
.inline-form button { padding: 5px 10px; font-size: 0.85em; background: #1f2733; color: #fff; border: none; border-radius: 3px; cursor: pointer; }