/* Custom styling for Redocly documentation */

/* Global theme customization */
:root {
  --redoc-primary-color: #2c3e50;
  --redoc-accent-color: #3498db;
  --redoc-background-color: #ffffff;
  --redoc-sidebar-background: #f8f9fa;
  --redoc-border-color: #e9ecef;
  --redoc-text-color: #2c3e50;
  --redoc-secondary-text-color: #6c757d;
  --redoc-success-color: #27ae60;
  --redoc-warning-color: #f39c12;
  --redoc-error-color: #e74c3c;
}

/* Custom header styling */
.redoc-wrap h1 {
  color: var(--redoc-primary-color) !important;
  font-size: 2.5em !important;
  margin-bottom: 20px !important;
}

/* Navigation styling */
.menu-content {
  background-color: var(--redoc-sidebar-background) !important;
  border-right: 1px solid var(--redoc-border-color) !important;
}

/* Operation styling */
.operation-type {
  font-weight: bold !important;
  text-transform: uppercase !important;
}

.operation-type.get {
  background-color: var(--redoc-success-color) !important;
}

.operation-type.post {
  background-color: var(--redoc-accent-color) !important;
}

.operation-type.put {
  background-color: var(--redoc-warning-color) !important;
}

.operation-type.delete {
  background-color: var(--redoc-error-color) !important;
}

/* Schema styling */
.schema-container {
  border: 1px solid var(--redoc-border-color) !important;
  border-radius: 4px !important;
  padding: 15px !important;
  margin: 10px 0 !important;
}

/* Code blocks */
pre {
  background-color: #f8f9fa !important;
  border: 1px solid var(--redoc-border-color) !important;
  border-radius: 4px !important;
  padding: 15px !important;
}

/* Response examples */
.response-samples {
  border-left: 3px solid var(--redoc-accent-color) !important;
  padding-left: 15px !important;
}

/* Custom logo styling if needed */
.redoc-logo {
  max-height: 40px !important;
  margin-right: 15px !important;
}

/* Table styling */
table {
  border-collapse: collapse !important;
  width: 100% !important;
}

table th,
table td {
  border: 1px solid var(--redoc-border-color) !important;
  padding: 8px 12px !important;
  text-align: left !important;
}

table th {
  background-color: var(--redoc-sidebar-background) !important;
  font-weight: bold !important;
}

/* Button styling */
.btn {
  background-color: var(--redoc-accent-color) !important;
  color: white !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
}

.btn:hover {
  background-color: var(--redoc-primary-color) !important;
}