/* ============================================================
   ExplainerVideoProduction.com — Main Stylesheet
   Header: #0d1b2a  Accent: #b0201c (dark red)  BG: black-to-red
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --ctr-teal:         #e8302a;   /* brand red (was blue accent)   */
  --ctr-teal-dark:    #b0201c;   /* dark red                      */
  --ctr-teal-light:   #fdeceb;   /* light red tint                */
  --ctr-header:       #0d1b2a;   /* header bg kept                */
  --ctr-header-dark:  #060f18;
  --ctr-bg-l:         #0d0303;   /* darker canvas base            */
  --ctr-bg-r:         #080202;
  --ctr-text:         #2a1110;
  --ctr-muted:        #9a5a55;
  --ctr-border:       #f3c9c6;   /* light red border              */
  --ctr-sidebar-bg:   #ffffff;   /* sidebar stays white           */
}

*,*::before,*::after { box-sizing: border-box; }
html { font-size: 15px; }
body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(160deg, var(--ctr-bg-l) 0%, #160606 45%, var(--ctr-bg-r) 100%);
  background-attachment: fixed;
  color: var(--ctr-text);
  margin: 0;
  font-size: 0.95rem;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ctr-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ctr-teal); }

/* ============================================================ HEADER ============================================================ */
.ctr-header {
  background: var(--ctr-header);
  border-bottom: 1px solid var(--ctr-header-dark);
  box-shadow: 0 2px 14px rgba(0,0,0,0.35);
  padding: 10px 16px;
}
.logo-img {
  height: 44px; width: auto; object-fit: contain;
  border-radius: 6px; background: rgba(255,255,255,0.08); padding: 3px 7px;
}
.drop-zone { transition: all 0.25s; }
.drop-zone.active { background: rgba(255,255,255,0.3) !important; border-color: rgba(255,255,255,0.8) !important; }
.drop-zone-input { font-size: 13px; }
.drop-zone-input::placeholder { color: rgba(255,255,255,0.55); }
.btn-add {
  background: var(--ctr-teal-dark); color: #fff; padding: 6px 14px;
  border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer;
  border: none; transition: background 0.2s; white-space: nowrap; flex-shrink: 0;
}
.btn-add:hover { background: #911a16; }
.header-actions-desktop { display: flex; align-items: center; gap: 8px; }
.btn-header-action {
  display: flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: 8px; font-size: 13px; font-weight: 700; color: #fff;
  text-decoration: none; white-space: nowrap; transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
}
.btn-header-action:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-header-action.headlines { background: linear-gradient(135deg, #e8302a, #b0201c); }
.btn-header-action.adcopy    { background: linear-gradient(135deg, #b0201c, #7f1512); }
.btn-header-action.upload    { background: linear-gradient(135deg, #5b1410, #2a0a08); }
.user-avatar {
  background: var(--ctr-teal-dark); color: #fff; width: 34px; height: 34px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
#mobileMenuBtn {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 8px;
  color: #fff; font-size: 17px; cursor: pointer; flex-shrink: 0;
}
.sync-indicator { animation: spin-pulse 2s infinite; }
@keyframes spin-pulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }

/* Export dropdown */
.export-dropdown { position: relative; }
.export-dropdown-content {
  display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 9999;
}
.export-dropdown:hover .export-dropdown-content { display: block; }
.export-dropdown-content button,
.export-dropdown-content a { font-size: 13px !important; padding: 9px 16px !important; }

/* Inputs */
input, textarea { user-select: text; -webkit-user-select: text; }
input:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px rgba(232,48,42,0.25); }

/* ============================================================ SIDEBAR ============================================================ */
.ctr-sidebar {
  background: var(--ctr-sidebar-bg);
  border-right: 1px solid var(--ctr-border);
  transition: transform 0.3s ease;
}
.ctr-sidebar * { font-size: 13px; }
.ctr-sidebar-logo {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 0 6px; border-radius: 8px; transition: background 0.2s; text-decoration: none;
}
.ctr-sidebar-logo:hover { background: rgba(232,48,42,0.08); }
.ctr-sidebar-logo img { height: 38px; width: auto; object-fit: contain; border-radius: 4px; }
.sidebar-section-label {
  font-size: 9px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ctr-muted); padding: 8px 8px 4px; margin-top: 4px;
}
#sidebarOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 35; }
#sidebarOverlay.active { display: block; }

/* ============================================================ CONTENT AREA ============================================================ */
/* Black-to-red gradient sits behind the card grid; cards themselves stay white. */
.ctr-content-area {
  background:
    radial-gradient(circle at 88% 82%, rgba(150,28,22,0.30), transparent 52%),
    radial-gradient(circle at 8% 10%, rgba(120,22,18,0.16), transparent 48%),
    linear-gradient(160deg, #0d0303 0%, #160606 55%, #080202 100%);
  background-attachment: fixed;
}

/* ============================================================ CARDS ============================================================ */
.card-enter { animation: slideIn 0.28s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.link-card {
  cursor: grab; transition: box-shadow 0.2s, transform 0.15s;
  padding: 12px !important; font-size: 13px;
  background: #fff !important;   /* cards stay white over the gradient */
}
.link-card:hover { box-shadow: 0 4px 18px rgba(176,32,28,0.22); transform: translateY(-1px); }
.link-card.dragging { opacity: 0.45; }
.link-card.is-important { border-left: 3px solid #f59e0b; }
.link-card.is-done { opacity: 0.55; }

.card-title { font-size: 13px !important; }
.link-card .text-\[10px\]  { font-size: 12px !important; }
.link-card .text-\[9px\]   { font-size: 11px !important; }
.link-card .text-\[8px\]   { font-size: 11px !important; }
.link-card .text-xs        { font-size: 13px !important; }
.link-card button[class*="text-\[8px\]"],
.link-card button[class*="text-\[9px\]"],
.link-card button[class*="text-\[10px\]"] { font-size: 11px !important; padding: 3px 7px !important; }

.card-action-btn {
  font-size: 11px; padding: 3px 8px; border-radius: 5px; border: none;
  cursor: pointer; font-weight: 600; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 3px;
}
.card-quick-toolbar {
  display: none; gap: 4px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #f6dcd9;
}
.link-card:hover .card-quick-toolbar { display: flex; }
.card-thumbnail { width: 56px; height: 40px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.card-image-preview { width: 100%; max-height: 180px; object-fit: cover; border-radius: 7px; margin-top: 8px; }
.domain-badge {
  font-size: 10px; color: var(--ctr-muted); background: var(--ctr-teal-light);
  padding: 1px 6px; border-radius: 20px; display: inline-block;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================ FOLDERS ============================================================ */
.folder-btn {
  width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer; border: none;
  background: transparent; color: var(--ctr-text); transition: background 0.15s;
  display: flex; align-items: center; gap: 7px;
}
.folder-btn:hover  { background: rgba(232,48,42,0.07); }
.folder-btn.active { background: rgba(232,48,42,0.12); color: var(--ctr-teal); }
.folder-item-wrap { position: relative; }
.folder-item-actions {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: none; gap: 2px;
}
.folder-item-wrap:hover .folder-item-actions { display: flex; }
.folder-item-wrap:hover .folder-item { padding-right: 70px; }
.card-done { opacity: 0.5; }
.card-done .card-title { text-decoration: line-through; }
.collapse-chevron { transition: transform 0.2s; }
.image-preview { max-height: 120px; object-fit: cover; border-radius: 6px; cursor: pointer; }
.video-embed { width: 100%; aspect-ratio: 16/9; border-radius: 7px; margin-top: 8px; }
.cat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ============================================================ GRID ============================================================ */
/* Narrower cards: auto-fill packs more, slimmer columns per row. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 10px; padding-bottom: 100px; }
/* Actual grid container is #linksGrid with an inline 3-col style.
   Override it (needs !important to beat the inline).
   Desktop = 4 equal columns; each card capped so it can't get huge.
   To change the max card width, edit the 320px value below (and the
   tablet rule further down).                                          */
#linksGrid {
  grid-template-columns: repeat(4, minmax(0, 320px)) !important;
  justify-content: center !important;
  max-width: 84rem !important;
}

/* ============================================================ EMPTY STATE ============================================================ */
.empty-state { text-align: center; padding: 60px 20px; color: var(--ctr-muted); }
.empty-state-icon { font-size: 40px; margin-bottom: 14px; opacity: 0.4; }
.empty-state h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--ctr-text); }
.empty-state p  { font-size: 13px; margin: 0; }

/* ============================================================ TOAST ============================================================ */
.ctr-toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--ctr-header); color: #fff;
  padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25); transform: translateY(80px);
  transition: transform 0.3s ease; max-width: 320px;
}
.ctr-toast.show  { transform: translateY(0); }
.ctr-toast.error { background: #dc2626; }

/* ============================================================ AI BOXES ============================================================ */
.ai-result-box {
  background: linear-gradient(135deg, #fdeceb 0%, #fbe0de 100%);
  border: 1px solid var(--ctr-border); border-radius: 8px;
  padding: 12px 14px; margin-top: 8px; font-size: 12px; line-height: 1.65;
}
.ai-result-box h1,.ai-result-box h2,.ai-result-box h3 { font-size: 12px; font-weight: 700; margin: 8px 0 3px; color: var(--ctr-text); }
.ai-result-box p,.ai-result-box li { font-size: 12px; }
.ai-result-box ul { padding-left: 16px; }

.ai-notes-box {
  background: linear-gradient(135deg, #fdeceb 0%, #fbe4e2 100%);
  border: 1px solid #f3c9c6; border-radius: 7px;
  padding: 10px 12px; font-size: 12px; line-height: 1.6; margin-top: 8px;
}
.ai-notes-box h1,.ai-notes-box h2,.ai-notes-box h3 { font-size: 12px; font-weight: 700; margin: 6px 0 2px; }
.ai-notes-box ul { padding-left: 16px; }
.ai-notes-box p,.ai-notes-box li { font-size: 12px; }

/* ============================================================ REPORT MODAL ============================================================ */
.report-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.report-modal-box {
  background: #fff; border-radius: 14px; max-width: 780px; width: 94vw;
  max-height: 88vh; overflow-y: auto; padding: 24px 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
}
.report-modal-title {
  font-size: 17px; font-weight: 800; color: var(--ctr-text);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.report-modal-box h1,.report-modal-box h2,.report-modal-box h3 { color: var(--ctr-text); margin-top: 1.2em; }
.report-modal-box h2 { font-size: 15px; border-bottom: 1px solid var(--ctr-border); padding-bottom: 4px; }
.report-modal-box h3 { font-size: 13px; }
.report-modal-box p  { font-size: 13px; line-height: 1.65; }
.report-modal-box ul,.report-modal-box ol { font-size: 13px; padding-left: 18px; }
.report-modal-box li { margin-bottom: 3px; }
.report-modal-box strong { color: var(--ctr-header); }
.report-modal-box code { background: #fdeceb; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.report-modal-box pre { background: #fdeceb; border: 1px solid var(--ctr-border); border-radius: 7px; padding: 12px; overflow-x: auto; }
.report-modal-box blockquote { border-left: 3px solid var(--ctr-teal); margin-left: 0; padding-left: 12px; color: var(--ctr-muted); }
.wp-preview img { border-radius: 6px; max-width: 100%; }
.prose img { border-radius: 8px; max-width: 100%; }

/* ============================================================ AUTH MODAL ============================================================ */
.auth-overlay { backdrop-filter: blur(10px); }
.auth-card {
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22); max-width: 440px; width: 100%; padding: 36px;
}
.btn-signin {
  width: 100%; padding: 13px; background: var(--ctr-teal); color: #fff;
  font-weight: 800; border-radius: 10px; border: none; cursor: pointer;
  font-size: 16px; letter-spacing: .2px; transition: background 0.2s;
}
.btn-signin:hover { background: var(--ctr-teal-dark); }
.btn-signin:disabled { opacity: 0.65; cursor: not-allowed; }
.input-field {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--ctr-border);
  border-radius: 9px; font-size: 15px; outline: none; color: var(--ctr-text);
  transition: border 0.2s; font-family: 'Inter', sans-serif;
}
.input-field:focus { border-color: var(--ctr-teal); box-shadow: 0 0 0 3px rgba(232,48,42,0.15); }

/* ============================================================ UTILITY ============================================================ */
.text-ctr-teal { color: var(--ctr-teal); }
.bg-ctr-teal   { background: var(--ctr-teal); }
.border-ctr    { border-color: var(--ctr-border); }

/* ============================================================ MOBILE BOTTOM BAR ============================================================ */
#mobileActionBar { display: none; }

/* ============================================================ RESPONSIVE ≤1024px ============================================================ */
@media (max-width: 1024px) {
  #linksGrid { grid-template-columns: repeat(2, minmax(0, 320px)) !important; }
  .btn-header-action span { display: none; }
  .btn-header-action { padding: 6px 10px; }
}

/* ============================================================ RESPONSIVE ≤768px ============================================================ */
@media (max-width: 768px) {
  #mobileMenuBtn { display: flex; }
  .header-actions-desktop { display: none; }
  .ctr-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 280px;
    z-index: 40; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,0.18);
  }
  .ctr-sidebar.open { transform: translateX(0); }
  #linksGrid { grid-template-columns: 1fr !important; }
  #dropZone  { max-width: none; }
  main { padding-bottom: 0; }
  .ctr-content-area { padding-bottom: 68px; }
  #reportModal > div {
    position: fixed; bottom: 0; left: 0; right: 0;
    max-width: 100%; max-height: 90vh; border-radius: 18px 18px 0 0; margin: 0;
  }
  #contentPanel { width: calc(100vw - 40px); top: 60px; max-height: calc(100vh - 74px); }
  #mobileActionBar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--ctr-header); border-top: 1px solid var(--ctr-header-dark);
    z-index: 25; padding: 7px 10px env(safe-area-inset-bottom, 0); gap: 6px; justify-content: space-around;
  }
  #mobileActionBar a,
  #mobileActionBar button {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; padding: 8px 5px;
    background: rgba(255,255,255,0.13); border-radius: 8px; color: #fff;
    font-size: 11px; font-weight: 700; text-decoration: none; text-align: center; letter-spacing: .3px;
  }
  #mobileActionBar i { font-size: 16px; }
  .auth-card  { padding: 26px 20px; border-radius: 14px; }
  .ctr-header { gap: 10px; padding: 8px 12px; }
  .logo-img   { height: 36px; }
}

/* ============================================================ RESPONSIVE ≤480px ============================================================ */
@media (max-width: 480px) {
  .auth-card { padding: 22px 16px; }
  #linksGrid { gap: 10px !important; }
}

/* ── Card grid overflow fix ─────────────────────────────────
   Prevents AI/markdown content (especially <pre> blocks)
   from blowing out the card width and breaking the grid.    */
.link-card { overflow: hidden; min-width: 0; }
.link-card .prose { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.link-card .prose pre { white-space: pre-wrap; overflow-x: hidden; word-break: break-word; }
.link-card .prose code { word-break: break-all; }

/* ============================================================ DATE ROW & SAVED NOTES — size overrides ============================================================ */
.link-card .date-scheduling-row,
.link-card .date-scheduling-row span,
.link-card .date-scheduling-row input,
.link-card .date-scheduling-row button,
.link-card .date-scheduling-row i { font-size: 13px !important; }

.link-card .date-scheduling-row input[type="date"] {
  font-size: 13px !important;
  padding: 3px 6px !important;
  height: 28px !important;
}

.link-card .saved-ai-section,
.link-card .saved-ai-section span,
.link-card .saved-ai-section button,
.link-card .saved-ai-section div { font-size: 12px !important; }

.link-card .saved-ai-entry-badge  { font-size: 11px !important; padding: 2px 8px !important; }
.link-card .saved-ai-entry-date   { font-size: 11px !important; }
.link-card .saved-ai-entry-preview { font-size: 12px !important; line-height: 1.6 !important; padding: 8px 10px !important; }
.link-card .saved-ai-entry-btn    { font-size: 11px !important; padding: 3px 8px !important; }
/* ── Loading state — hide card body until scraping completes ──
   While a card is still scraping, hide the body rows (folder,
   notes, Due/Publish, action buttons) and show just the
   centered loading spinner.                                    */
.link-card.is-loading .card-when-ready { display: none !important; }