@import './theme.css';

/* ------ Postman Viewer ------ */
.postman-container {
  margin-bottom: var(--spacing-md);
  font-family: var(--font-family);
}

.postman-container code, 
.postman-container pre, 
.postman-container .monospace {
  font-family: "Fira Code", "Roboto Mono", monospace;
}

.postman-paper {
  overflow: hidden;
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius-lg);
}

.postman-header {
  padding: var(--spacing-lg);
  background: linear-gradient(180deg, rgba(var(--color-primary), 0.09), transparent);
}

.postman-title-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.postman-icon {
  margin-right: var(--spacing-sm);
  color: var(--color-primary);
  font-size: 1.6rem;
}

.postman-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  flex-grow: 1;
  font-size: 1.5rem;
}

@media (max-width: 600px) {
  .postman-title {
    font-size: 1.2rem;
  }
}

.postman-id-chip {
  background-color: rgba(var(--color-primary), 0.12);
  color: var(--color-primary);
  border-radius: var(--border-radius-sm);
  font-family: "Fira Code", monospace;
  font-size: 0.7rem;
  height: 24px;
}

.postman-content {
  padding: var(--spacing-md);
}

@media (min-width: 600px) {
  .postman-content {
    padding: var(--spacing-lg);
  }
}

.controls-container {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-start;
  flex-wrap: wrap;
}

.method-chip {
  cursor: pointer;
  height: 28px;
  background-color: var(--color-primary)!important;
  color: var(--color-white)!important ;
}

/* ------ JSON Viewer ------ */
.json-container {
  position: relative;
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(var(--color-grey), 0.9);
  overflow: hidden;
}

.json-container:hover .copy-button {
  opacity: 1;
}

.copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1;
}

.copy-button-inner {
  background-color: rgba(var(--color-white), 0.9);
  color: var(--color-darkgrey);
}

.copy-button-inner:hover {
  background-color: var(--color-white);
}

.copy-success {
  color: var(--color-green);
}

.json-content {
  margin: 0;
  padding: var(--spacing-md);
  background-color: var(--color-lightgrey1);
  border-radius: var(--border-radius-md);
  overflow: auto;
  font-size: 0.85rem;
  max-height: 420px;
  font-family: "Fira Code", Consolas, Monaco, "Andale Mono", monospace;
}

.json-key {
  color: var(--color-lightblue1);
}

.json-string {
  color: var(--color-green);
}

.json-number {
  color: var(--color-orange);
}

.json-boolean {
  color: var(--color-orange);
}

.json-null {
  color: var(--color-red);
}

/* ------ Method Badge ------ */
.method-badge {
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  font-size: 0.72rem;
  height: 24px;
  border-radius: var(--border-radius-sm);
}

.method-badge-label {
  padding: 0 1.25px;
  letter-spacing: 0.3px;
}

.method-get {
  color: #0B6E4F;
  background-color: #EAF6F1;
  border: 1px solid #BFE5D7;
}

.method-post {
  color: #125D98;
  background-color: #E7F3FF;
  border: 1px solid #BBD8F4;
}

.method-put {
  color: #8A5A00;
  background-color: #FFF4E1;
  border: 1px solid #F5D9A6;
}

.method-patch {
  color: #6B5CA5;
  background-color: #F0ECFE;
  border: 1px solid #D8D1FA;
}

.method-delete {
  color: #B00020;
  background-color: #FFE9EC;
  border: 1px solid #FFC2CB;
}

.method-unknown {
  color: var(--color-grey1);
  background-color: rgba(var(--color-grey), 0.1);
  border: 1px solid var(--color-grey2);
}

/* ------ Parameters Table ------ */
.params-container {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.params-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-darkgrey);
  margin-bottom: var(--spacing-sm);
}

.params-empty {
  color: var(--color-grey1);
  font-style: italic;
}

.params-table-container {
  border: 1px solid rgba(var(--color-grey), 0.8);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}

.params-table-head {
  background: linear-gradient(180deg, rgba(var(--color-primary), 0.06), transparent);
}

.params-table-header {
  font-weight: var(--font-weight-bold);
  color: var(--color-grey1);
  font-size: 0.8rem;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: rgba(var(--color-white), 0.9);
  backdrop-filter: blur(4px);
}

.params-table-row-odd {
  background-color: rgba(var(--color-grey), 0.06);
}

.params-table-param-name {
  font-family: "Fira Code", monospace;
  font-weight: var(--font-weight-semibold);
  font-size: 0.8rem;
  color: var(--color-primary);
  word-break: break-word;
}

.params-table-param-value {
  word-break: break-all;
}

.params-table-code {
  display: inline-block;
  background-color: rgba(var(--color-lightgrey), 0.8);
  color: var(--color-darkgrey);
  padding: 3px 6px;
  border-radius: var(--border-radius-sm);
  font-family: "Fira Code", monospace;
  font-size: 0.78rem;
  border: 1px solid rgba(var(--color-grey), 0.5);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.params-table-description {
  color: var(--color-grey1);
  font-size: 0.82rem;
}

/* ------ URL Display ------ */
.url-display {
  font-family: "Fira Code", monospace;
  font-size: 0.9rem;
  word-break: break-all;
}

.url-protocol {
  color: rgba(var(--color-darkgrey), 0.6);
}

.url-host {
  font-weight: var(--font-weight-bold);
}

.url-path {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.url-query {
  color: var(--color-orange);
}

.url-hash {
  color: var(--color-orange);
}

/* ------ Request Viewer ------ */
.request-container {
  margin-top: var(--spacing-sm);
}

.request-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

@media (min-width: 600px) {
  .request-header {
    align-items: center;
    flex-direction: row;
  }
}

.request-description {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  /* background-color: var(--color-primary); */
  background-color: hsl(from var(--color-primary) h s l / 0.03);;
  border-radius: var(--border-radius-md);
}

.request-description-icon {
  color: #00AEEF;
  margin-top: 0.2rem;
  font-size: 1.15rem;
}

.request-tabs {
  border-bottom: 1px solid rgba(var(--color-grey), 0.9);
  margin-bottom: var(--spacing-md);
}

.request-tab {
  min-height: 48px;
  text-transform: none;
  font-weight: var(--font-weight-semibold);
  font-size: 0.95rem;
}

.request-content {
  margin-top: var(--spacing-md);
  min-height: 160px;
  padding-bottom: var(--spacing-sm);
}

/* ------ Item Viewer ------ */
.item-accordion {
  margin-bottom: var(--spacing-md);
  box-shadow: none;
  border: 1px solid rgba(var(--color-grey), 0.9);
  border-radius: 8px !important;
  overflow: hidden;
  background-color: rgba(var(--color-lightgrey), 0.6);
}

.item-accordion:before {
  display: none;
}

.item-summary {
  padding: 0 var(--spacing-md);
}

.item-summary:hover {
  background-color: rgba(var(--color-grey), 0.25);
}

.item-summary.expanded {
  min-height: 48px;
  border-bottom: 1px solid rgba(var(--color-grey), 0.7);
}

.item-summary-content {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--spacing-sm);
}

.item-arrow-icon {
  color: var(--color-grey1);
  font-size: 1.1rem;
}

.item-title {
  flex-grow: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--color-darkgrey);
}

.item-details {
  padding: var(--spacing-md);
}

@media (min-width: 600px) {
  .item-details {
    padding: var(--spacing-lg);
  }
}

/* ------ Folder Viewer ------ */
.folder-accordion {
  margin-bottom: var(--spacing-md);
  box-shadow: none;
  border: 1px solid rgba(var(--color-grey), 0.9);
  border-radius: 8px !important;
  overflow: hidden;
}

.folder-accordion:before {
  display: none;
}

.folder-accordion-root {
  margin-bottom: var(--spacing-md);
  box-shadow: var(--shadow-light);
  border-radius: 10px !important;
  overflow: hidden;
}

.folder-summary {
  background-color: rgba(var(--color-lightgrey), 0.7);
  border-bottom: 1px solid rgba(var(--color-grey), 0.9);
}

.folder-summary.expanded {
  min-height: 48px;
}

.folder-summary-root {
  background-color: rgba(var(--color-primary), 0.07);
  border-bottom: 1px solid rgba(var(--color-primary), 0.15);
}

.folder-icon {
  margin-right: var(--spacing-sm);
  margin-left: 0;
  color: var(--color-grey1);
  font-size: 1.15rem;
}

.folder-icon-root {
  margin-left: var(--spacing-sm);
  color: var(--color-primary);
  font-size: 1.55rem;
}

.folder-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-darkgrey);
}

.folder-title-root {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.folder-chip {
  margin-left: var(--spacing-xs);
  background-color: rgba(var(--color-primary), 0.1);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  height: 22px;
}

.folder-details {
  padding: var(--spacing-sm);
}

@media (min-width: 600px) {
  .folder-details {
    padding: var(--spacing-md);
  }
}

.folder-description {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background-color: rgba(var(--color-lightgrey), 0.6);
  border: 1px solid rgba(var(--color-grey), 0.9);
  border-radius: var(--border-radius-md);
}

.wmde-markdown{
  color: var(--color-darkgrey) !important;

}

/* ------ Grid View ------ */
.grid-item {
  padding: var(--spacing-md);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  border: 1px solid rgba(var(--color-grey), 0.9);
  border-radius: var(--border-radius-md);
  transition: all .2s ease;
  cursor: pointer;
  background-color: var(--color-lightgrey);
}

.grid-item:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-1px);
}

.grid-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.grid-item-title {
  font-weight: var(--font-weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-item-path {
  color: var(--color-grey1);
  margin-bottom: var(--spacing-xs);
  display: block;
}

.grid-item-url {
  font-family: "Fira Code", monospace;
  color: rgba(var(--color-grey), 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: auto;
}

/* ------ Error Alert ------ */
.error-alert {
  margin-bottom: var(--spacing-lg);
  border-radius: var(--border-radius-md);
}

.error-alert-icon {
  color: var(--color-red);
}

.error-alert-title {
  font-weight: var(--font-weight-bold);
}

.error-alert-message {
  margin-top: var(--spacing-xs);
}

/* ------ Code Sections ------ */
.code-language-select {
  min-width: 140px;
}

.code-container {
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(var(--color-grey), 0.9);
  overflow: hidden;
}

.code-content {
  background-color: var(--color-lightgrey1);
  margin: 0;
  padding: var(--spacing-md);
  overflow: auto;
  font-size: 0.86rem;
  max-height: 420px;
  font-family: "Fira Code", Consolas, Monaco, "Andale Mono", monospace;
}

.content-type-chip {
  background-color: rgba(var(--color-primary), 0.08);
  color: var(--color-primary);
  border-radius: var(--border-radius-sm);
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
}

.content-type-chip.form-data {
  background-color: rgba(var(--color-warning), 0.1);
  color: var(--color-orange);
}

.content-type-chip.url-encoded {
  background-color: rgba(var(--color-warning), 0.1);
  color: var(--color-orange);
}

.url-paper {
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
  border: 1px solid rgba(var(--color-grey), 0.8);
}

.url-section-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
}

.url-display-container {
  background-color: rgba(var(--color-lightgrey), 0.75);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  border: 1px solid rgba(var(--color-grey), 0.4);
  position: relative;
}

.url-display-container:hover .copy-button {
  opacity: 1;
}

.url-full-text {
  font-family: var(--font-family-mono);
  word-break: break-all;
  padding-right: var(--spacing-xl);
}

.url-part-container {
  margin-top: var(--spacing-md);
}

.url-part-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-xs);
}

.url-part-value {
  font-family: var(--font-family-mono);
  background-color: rgba(var(--color-lightgrey), 0.5);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  border: 1px solid rgba(var(--color-grey), 0.3);
}

.code-controls {
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}