/* Explicit layer order: base renders first, legacy wins over base when they conflict.
   Unlayered Tailwind utilities (tailwind.css) beat any named layer by cascade rules,
   so migrated pages are fully shielded without touching their PureScript or selectors. */
@layer base, legacy;

@layer legacy {

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
  line-height: 1.6;
  color: #333;
}

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

/* Main Content Styles */
.main-content {
  flex: 1;
  padding: 40px;
  overflow-y: auto;
  background-color: #f8f9fa;
}

.content-wrapper {
  max-width: 1200px;
  background-color: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.content-wrapper h1 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 2.5rem;
}

.content-wrapper p {
  margin-bottom: 15px;
  color: #555;
}

.content-wrapper ul {
  margin-left: 20px;
  margin-bottom: 20px;
}

.content-wrapper li {
  margin-bottom: 8px;
}

/* API Demo Section */
.api-demo {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  margin-top: 30px;
  border: 2px solid #3498db;
}

.api-demo h2 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.fetch-button {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 15px;
  transition: all 0.3s ease;
}

.fetch-button:hover:not(:disabled) {
  background-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.fetch-button:disabled {
  background-color: #95a5a6;
  cursor: not-allowed;
}

.error-message {
  background-color: #e74c3c;
  color: white;
  padding: 12px;
  border-radius: 6px;
  margin-top: 15px;
  font-weight: 500;
}

.random-number-display {
  background-color: #2ecc71;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
  text-align: center;
}

.random-number-display h3 {
  color: white;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.number-value {
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0;
}

.checkboxlist {
  width: 20em;
  overflow: auto;
}
.checkboxlist label {
  width: 12em;
  float: right;
}

/* Form Styles */
.auth-form,
.product-add-form {
  max-width: 500px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #2c3e50;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  margin-top: 0.5rem;
}

.form-group input:focus {
  outline: none;
  border-color: #3498db;
}

.submit-button {
  width: 100%;
  padding: 12px 24px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-button:hover:not(:disabled) {
  background-color: #2980b9;
}

.submit-button:disabled {
  background-color: #95a5a6;
  cursor: not-allowed;
}

.link-button {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}

.link-button:hover {
  color: #2980b9;
}

/* Tiptap chrome/layout styles removed — now managed by Tailwind classes
   in RichTextEditor.purs and src/styles.css. Content formatting styles
   for ProseMirror are preserved below. */

/* ProseMirror editor content area */
.tiptap-editor .ProseMirror,
.tiptap-editor .tiptap-content {
  min-height: 200px;
  padding: 16px;
  outline: none;
}

/* Ensure editor is visible and has proper styling */
.tiptap-editor [contenteditable="true"] {
  min-height: 200px;
  padding: 16px;
  outline: none;
}

/* Empty editor placeholder */
.tiptap-editor .ProseMirror.ProseMirror-focused {
  border-color: #3498db;
}

.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: "Start typing...";
  float: left;
  height: 0;
  pointer-events: none;
}

.tiptap-editor .ProseMirror p {
  margin-bottom: 12px;
}

.tiptap-editor .ProseMirror p:last-child {
  margin-bottom: 0;
}

.tiptap-editor .ProseMirror h1,
.tiptap-editor .ProseMirror h2,
.tiptap-editor .ProseMirror h3 {
  margin-top: 16px;
  margin-bottom: 12px;
  font-weight: 600;
}

.tiptap-editor .ProseMirror h1 {
  font-size: 2em;
}

.tiptap-editor .ProseMirror h2 {
  font-size: 1.5em;
}

.tiptap-editor .ProseMirror h3 {
  font-size: 1.25em;
}

.tiptap-editor .ProseMirror ul,
.tiptap-editor .ProseMirror ol {
  padding-left: 24px;
  margin-bottom: 12px;
}

.tiptap-editor .ProseMirror li {
  margin-bottom: 4px;
}

.tiptap-editor .ProseMirror strong {
  font-weight: 700;
}

.tiptap-editor .ProseMirror em {
  font-style: italic;
}

.tiptap-editor .ProseMirror code {
  background-color: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 0.9em;
}

.tiptap-editor .ProseMirror pre {
  background-color: #f4f4f4;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: 12px;
}

.tiptap-editor .ProseMirror pre code {
  background: none;
  padding: 0;
}

.tiptap-editor .ProseMirror blockquote {
  border-left: 4px solid #3498db;
  padding-left: 16px;
  margin-left: 0;
  margin-bottom: 12px;
  color: #666;
}

/* Placeholder text */
.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: #adb5bd;
  pointer-events: none;
  height: 0;
  float: left;
}

/* JSON display */
.json-display {
  background-color: #f4f4f4;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: "Courier New", monospace;
  font-size: 0.9em;
}

/* Product Page Styles */
.product-table {
  width: 100%;
  table-layout: fixed;
}

.product-list-row {
  cursor: pointer;
}

.product-list-row:hover {
  background-color: #f0f0f0;
}

.label-container {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.product-option-button {
  width: 2.5rem;
}

/* Inventory Page Styles */
.inventory-product-header {
  background-color: #f5f5f5;
  font-weight: bold;
  padding: 8px 12px;
}

.inventory-group-header {
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  background-color: #fcfcfc;
}

/* Indent the first cell of variant rows to show hierarchy under the product */
.variant-list-row td:first-child {
  padding-left: 2rem;
  position: relative;
}

.variant-list-row td:first-child::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #e0e0e0;
}

/* Add Product Page Styles */
.product-preview-img {
  width: 10rem;
}

/* Settings Page Styles */
.new-package-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.packages-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Tooltip Styles for Route Validation Errors */
.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: help;
}

/* Class override for tooltip containers within a table cell */
.tooltip-container--table-cell {
  display: table-cell;
}

.tooltip-content {
  visibility: hidden;
  width: max-content;
  max-width: 300px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tooltip-container:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

/* Arrow for tooltip */
.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.error-tooltip-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.error-tooltip-list li {
  margin-bottom: 4px;
  padding-left: 12px;
  position: relative;
}

.error-tooltip-list li:last-child {
  margin-bottom: 0;
}

.error-tooltip-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #e74c3c;
}

/* Badge styles for route management */
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-success {
  background-color: #2ecc71;
  color: white;
}

.badge-error {
  background-color: #e74c3c;
  color: white;
}

/* Settings anchor icon — visual only; pointer-events disabled so the
   enclosing .feedback-action-wrapper captures all clicks */
.settings-anchor-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  font-size: 14px;
  opacity: 0.5;
  vertical-align: middle;
  pointer-events: none;
}
.settings-anchor-icon:hover { opacity: 1; }

/* Clickable wrapper that positions the transient success label relative to its trigger */
.feedback-action-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* "Copied!", "Saved!", etc. — floats just to the right of the trigger element */
.feedback-label {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 6px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: #2ecc71;
  pointer-events: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }


  .main-content {
    padding: 20px;
  }

  .content-wrapper {
    padding: 20px;
  }

  .content-wrapper h1 {
    font-size: 2rem;
  }
}

/* Actions menu (three-dots column) */
.actions-menu-container {
  position: relative;
  display: inline-block;

  .actions-menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 2px 6px;
  }

  .actions-menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 140px;

    .actions-menu-item {
      display: block;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 8px 12px;
      cursor: pointer;

      &.disabled {
        color: #aaa;
        cursor: not-allowed;
      }
    }
  }
}

.actions-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 90;
  cursor: default;
}

/* Modal */
.modal {
  display: none;
}

.modal.modal-open {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
}

.modal .modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal .modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 8px;
  padding: 24px;
  min-width: 400px;
  max-width: 500px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  z-index: 201;
}

.modal .modal-content h3 {
  margin-bottom: 16px;
  font-size: 1.25rem;
}

.modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.modal-cancel-button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.modal-cancel-button:hover {
  background: #f5f5f5;
}

/* Refund modal */
.refund-breakdown {
  margin-bottom: 16px;
}

.refund-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}

.refund-total {
  font-weight: bold;
}

.refund-shipping-toggle {
  margin-bottom: 12px;
}

.refund-shipping-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}

.refund-amount-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 12px;
}

.refund-amount-label {
  font-weight: 500;
  color: #333;
}

.refund-amount-value {
  font-weight: 600;
  font-size: 1.1rem;
  color: #111;
}

.refund-amount-section {
  margin-bottom: 12px;
}

.refund-custom-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 8px;
}

.refund-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.refund-currency-prefix {
  padding: 8px 10px;
  background: #f5f5f5;
  border-right: 1px solid #ccc;
  color: #666;
}

.refund-input-wrapper input {
  border: none;
  padding: 8px;
  flex: 1;
  outline: none;
  font-size: 1rem;
}

/* Refund history */
.refund-history-section {
  margin-bottom: 16px;
}

.refund-history-entry {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.refund-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.refund-history-date {
  font-weight: 400;
  color: #888;
  font-size: 0.85rem;
}

.refund-history-items {
  font-size: 0.9rem;
  color: #555;
  padding-left: 4px;
}

/* Refund items */
.refund-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.refund-item-qty-input {
  width: 50px;
  padding: 2px 4px;
  text-align: center;
}

.refund-restock-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: 0.85rem;
  color: #555;
}

/* Refund error */
.refund-error {
  background-color: #fef2f2;
  color: #dc2626;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

/* Refund reason */
.refund-reason-section {
  margin-bottom: 12px;
}

.refund-reason-label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.refund-reason-select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.hidden {
  display: none;
}

.refund-note-input {
  width: 100%;
  min-height: 60px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  resize: vertical;
  font-family: inherit;
}

.refund-reason-badge {
  display: inline-block;
  background: #e0e7ff;
  color: #3730a3;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
}

.refund-history-reason {
  margin: 4px 0;
  font-size: 0.85rem;
}

.refund-history-note {
  color: #6b7280;
  font-style: italic;
}

/* Refund summary */
.refund-summary {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #ddd;
}

/* Refund confirmation state */
.refund-confirmation {
  padding: 12px 0;
}

.refund-confirm-items {
  margin: 8px 0;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Refund success state */
.refund-success {
  text-align: center;
  padding: 20px 0;
}

.refund-success h3 {
  color: #059669;
  margin-bottom: 12px;
}

.refund-success-detail {
  color: #6b7280;
  font-size: 0.85rem;
  margin-top: 4px;
}

/* Refund status badges on order rows */
.refund-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.refund-badge-full {
  background-color: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.refund-badge-partial {
  background-color: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

} /* end @layer legacy */