/* ==========================================================
   APITable Custom Overrides
   Auto-expanding Long Text fields in ALL contexts
   ========================================================== */

/* ---- NUCLEAR OPTION: Target ALL rc-textarea everywhere ---- */
textarea.rc-textarea {
  min-height: 300px !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  resize: vertical !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  line-height: 1.7 !important;
  font-size: 14px !important;
  padding: 12px !important;
}

/* ---- Enhance Text Editor containers ---- */
[class*="enhanceTextEditor"],
[class*="enhanceText__"],
[class*="expandCellText"] {
  min-height: 300px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ---- Side Panel specific (docked right) ---- */
[class*="expandRecordPanel"] textarea.rc-textarea,
[class*="expandRecordWrapper"] textarea.rc-textarea,
[class*="expandRecord__"] textarea.rc-textarea {
  min-height: 300px !important;
  height: auto !important;
  max-height: none !important;
}

/* ---- Center Modal specific ---- */
[class*="expandRecordModal"] textarea.rc-textarea,
[class*="centerExpandRecord"] textarea.rc-textarea {
  min-height: 350px !important;
  height: auto !important;
  max-height: none !important;
}

/* ---- Full-screen expand of Long Text field ---- */
[class*="expandCellText"] textarea.rc-textarea {
  min-height: 500px !important;
  height: auto !important;
  max-height: none !important;
}

/* ---- Ensure parent containers don't clip ---- */
[class*="expandRecordPanel"] [class*="fieldContent"],
[class*="expandRecordWrapper"] [class*="fieldContent"],
[class*="expandRecord__"] [class*="fieldContent"],
[class*="expandRecordModal"] [class*="fieldContent"],
[class*="centerExpandRecord"] [class*="fieldContent"] {
  overflow: visible !important;
  max-height: none !important;
}

/* ---- Make record panels scrollable ---- */
[class*="expandRecordPanel"] main,
[class*="expandRecordWrapper"] main,
[class*="expandRecord__"] main,
[class*="expandRecordModal"] main {
  overflow-y: auto !important;
}

/* ---- Quill/Slate rich text editors if present ---- */
.ql-editor,
[class*="qlEditor"],
[class*="SlateEditor"] {
  min-height: 300px !important;
  height: auto !important;
  max-height: none !important;
}

/* ========== Markdown Render Overlay (Notion-like) ========== */
.md-render-overlay {
  padding: 16px;
  line-height: 1.8;
  font-size: 14px;
  color: #d8d8d8;
  cursor: pointer;
  min-height: 100px;
  white-space: normal !important;
  overflow-y: auto;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.md-render-overlay h1 { font-size: 26px; font-weight: 700; margin: 18px 0 10px; color: #fff; border-bottom: 1px solid #444; padding-bottom: 6px; }
.md-render-overlay h2 { font-size: 21px; font-weight: 700; margin: 16px 0 8px; color: #fff; border-bottom: 1px solid #333; padding-bottom: 4px; }
.md-render-overlay h3 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; color: #eee; }
.md-render-overlay h4 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; color: #ddd; }
.md-render-overlay strong, .md-render-overlay b { font-weight: 700; color: #fff; }
.md-render-overlay em, .md-render-overlay i { font-style: italic; color: #ccc; }
.md-render-overlay del { text-decoration: line-through; color: #e8a87c; }
.md-render-overlay ul, .md-render-overlay ol { margin: 6px 0; padding-left: 22px; }
.md-render-overlay li { margin: 3px 0; line-height: 1.6; }
.md-render-overlay ol li { list-style: decimal; }
.md-render-overlay ul li { list-style: disc; }
.md-render-overlay blockquote { border-left: 3px solid #7b67ee; margin: 10px 0; padding: 6px 14px; background: rgba(123,103,238,0.08); border-radius: 0 4px 4px 0; color: #ccc; }
.md-render-overlay code { background: rgba(255,255,255,0.1); padding: 2px 5px; border-radius: 3px; font-family: 'SF Mono', Monaco, monospace; font-size: 13px; color: #e8a87c; }
.md-render-overlay pre { background: rgba(0,0,0,0.3); padding: 10px 14px; border-radius: 6px; overflow-x: auto; margin: 10px 0; }
.md-render-overlay pre code { background: none; padding: 0; color: #d4d4d4; }
.md-render-overlay p { margin: 4px 0; }
.md-render-overlay a { color: #7b67ee; text-decoration: underline; }
.md-render-overlay hr { border: none; border-top: 1px solid #444; margin: 14px 0; }

/* ── Tables ── */
.md-render-overlay table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.md-render-overlay th { background: rgba(123,103,238,0.15); color: #fff; font-weight: 600; text-align: left; padding: 8px 12px; border: 1px solid #444; }
.md-render-overlay td { padding: 6px 12px; border: 1px solid #333; color: #ccc; }
.md-render-overlay tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.md-render-overlay tr:hover td { background: rgba(123,103,238,0.06); }

/* ── Edit hint ── */
.md-render-overlay .md-edit-hint { font-size: 11px; color: #666; text-align: right; margin-top: 10px; font-style: italic; }

/* ==========================================================
   Sytel Media Loading Screen Branding
   Uses the ORIGINAL _app.tsx animation logic (class-toggle pulse
   via transitionend + translateX slide on finish).
   ========================================================== */

/* Hide icon initially so original APITable logo never flashes.
   JS sets visibility:visible after swapping the src to Sytel. */
.script-loading-wrap .script-loading-logo-img {
  object-fit: contain !important;
  visibility: hidden;
}

/* Ensure text logo is properly sized */
.script-loading-wrap .script-loading-logo-text-img {
  height: 75% !important;
  object-fit: contain !important;
}

/* Tighter spacing when animation finishes: icon and text closer together */
.script-loading-wrap-finished .script-loading-logo-img {
  transform: translateX(-30px) !important;
}
.script-loading-wrap-finished .script-loading-logo-text-img {
  transform: translateX(15px) !important;
}

/* ==== LOADING SCREEN: Hide original APITable logos, show Sytel via CSS ==== */
/* Hide the original loading logo image src (prevents APITable logo flash) */
.script-loading-logo-img {
  content: url('/custom/sytel-icon.png') !important;
  visibility: visible !important;
}
.script-loading-logo-text-img {
  content: url('/custom/sytel-text-dark.png') !important;
}

/* Hide the "Star us on GitHub" loading link */
.script-loading-wrap a[href*="github"] {
  display: none !important;
}

/* Hide any apple-touch-icon fallback from original brand */
img[src*="/assets/space/2021/"],
img[src*="/assets/space/2022/"] {
  visibility: hidden !important;
}