/* PromptPalette CMS — extra utilities & components (on top of compiled Tailwind) */

/* ---- missing utilities used by CMS cards/layouts ---- */
.aspect-\[16\/9\]{aspect-ratio:16/9}
.aspect-\[16\/10\]{aspect-ratio:16/10}
.aspect-\[3\/4\]{aspect-ratio:3/4}
.line-clamp-3{-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.min-h-\[150px\]{min-height:150px}
.w-\[34\%\]{width:34%}
.w-\[38\%\]{width:38%}
.w-\[46\%\]{width:46%}
.sm\:w-\[30\%\]{width:30%}
.md\:w-\[23\%\]{width:23%}
.lg\:w-\[18\%\]{width:18%}
.sm\:col-span-2{grid-column:span 2/span 2}
.text-white\/80{color:#ffffffcc}
.bg-white\/15{background-color:#ffffff26}
.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness,proximity)}
.snap-mandatory{--tw-scroll-snap-strictness:mandatory}
.snap-start{scroll-snap-align:start}
.overflow-x-auto{overflow-x:auto}
.leading-7{line-height:1.75rem}
.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.pb-2{padding-bottom:.5rem}
img#pp-main-image{height:50vh}

/* ---- wrap long items / section content on mobile ---- */
.pp-wrap-anywhere,.pp-card h3,.pp-card p,.glass-card h1,.glass-card h2,.glass-card h3{overflow-wrap:anywhere;word-break:break-word}
.pp-prose{overflow-wrap:anywhere}
.pp-slider-track{scrollbar-width:none;-ms-overflow-style:none}
.pp-slider-track::-webkit-scrollbar{display:none}

/* ---- header nav dropdown ---- */
.pp-nav-item-wrap{position:relative}
.pp-dropdown{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:10px;z-index:60}
.pp-nav-item-wrap:hover .pp-dropdown,.pp-nav-item-wrap:focus-within .pp-dropdown{display:block}
.pp-nav-item-wrap>a::after{content:''}

/* ---- frontend admin bar (main admin only) ---- */
#pp-admin-bar .pp-abtn{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#ffffff14;padding:5px 12px;font-weight:700;transition:background .2s}
#pp-admin-bar .pp-abtn:hover{background:#ffffff2b}
@media(max-width:640px){#pp-admin-bar{flex-wrap:wrap;gap:6px;font-size:11px}}

/* ---- light-mode friendly shadows for glass cards (default light) ---- */
:root{--shadow-soft:0 6px 18px #14224a12;--shadow-lift:0 12px 32px -12px #14224a26;--gradient-soft:linear-gradient(135deg,#dbe7ff,#efe0ff)}
html.dark{--shadow-soft:0 6px 18px #00000024;--shadow-lift:0 12px 32px -12px #00000047;--gradient-soft:linear-gradient(135deg,#19376666,#5c1f7a66)}
html.dark .glass-card,html.dark .glass-strong{border-color:#ffffff1a}
.glass-card,.glass-strong{color:var(--color-foreground,#1e293b)}
.text-foreground{color:var(--foreground)}
.text-muted-foreground{color:var(--muted-foreground)}
.bg-card{background-color:var(--card)}
.border-white\/5{border-color:#ffffff0d}
html:not(.dark) .border-white\/5{border-color:#0f1c3f14}
html:not(.dark) .border-white\/10{border-color:#0f1c3f1f}
html:not(.dark) .bg-white\/5{background-color:#0f1c3f08}
html:not(.dark) .bg-white\/10,html:not(.dark) .hover\:bg-white\/10:hover{background-color:#0f1c3f10}
html:not(.dark) .bg-white\/95{background-color:#ffffff}
html:not(.dark) .bg-\[image\:var\(--gradient-primary\)\]{color:#fff}
html:not(.dark) #pp-admin-bar{background:#0b1120ee;color:#fff}

/* editor content */
.pp-prose table{width:100%;border-collapse:collapse;margin-top:1rem}
.pp-prose th,.pp-prose td{border:1px solid var(--border);padding:8px 10px;font-size:14px}
.pp-prose code{background:var(--muted);border-radius:6px;padding:2px 6px;font-size:.9em}
.pp-prose pre{background:var(--muted);border-radius:12px;padding:14px;overflow:auto;margin-top:1rem}

/* toast + misc */
.pp-live-results{position:absolute;inset-inline:0;top:calc(100% + 8px);z-index:80;max-height:420px;overflow:auto;text-align:left}
.pp-live-result{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;font-size:13.5px;font-weight:600;color:var(--foreground)}
.pp-live-result:hover{background:var(--muted)}
.pp-live-result img{width:38px;height:48px;object-fit:cover;border-radius:8px;flex-shrink:0}


/* ==== light mode gradient fix (vars only defined for dark in app.css) ==== */
:root{
  --radius:1.25rem;
  --gradient-primary:linear-gradient(90deg,#3c83f6 0%,#bf5af2 50%,#f25aa6 100%);
  --gradient-bg:radial-gradient(1200px 600px at 80% -10%,rgba(61,131,246,.14),transparent 60%),radial-gradient(900px 520px at 8% 110%,rgba(191,90,242,.10),transparent 60%);
  --shadow-soft:0 10px 30px rgba(11,18,32,.08);
}
html.dark{
  --gradient-primary:linear-gradient(90deg,#3c83f6 0%,#bf5af2 50%,#f25aa6 100%);
}

/* ==== theme toggle: visible in light mode ==== */
#pp-theme-toggle{color:#0b1220;background:rgba(255,255,255,.72);border-color:rgba(11,18,32,.14);backdrop-filter:blur(8px)}
html.dark #pp-theme-toggle{color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}

/* ==== related prompts: 2-col on mobile ==== */
@media (max-width:640px){
  .pp-related-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:.75rem}
}

/* ==== user-supplied styles ==== */
#pp-grid{gap:1em;}
.select-all{max-height:300px;z-index:0; overflow:auto;}
/* Glass Card Main Wrapper */
.glass-card {border:1px solid #4775;}
 .w-fit{flex-wrap:nowrap;overflow:auto;}

.ratingline[data-rating-count="5"] [data-rating-fill] {
  background: #22c55e; /* green */
}

.ratingline[data-rating-count="4"] [data-rating-fill] {
  background: #facc15; /* yellow */
}

.ratingline[data-rating-count="3"] [data-rating-fill] {
  background: #fb923c; /* orange */
}

.ratingline[data-rating-count="2"] [data-rating-fill] {
  background: #f87171; /* red */
}

.ratingline[data-rating-count="1"] [data-rating-fill] {
  background: #ef4444; /* dark red */
}


/* ==== mobile drawer: always on top ==== */
#pp-drawer{z-index:300 !important}
#pp-drawer .absolute.inset-0{z-index:0}
#pp-drawer > div:last-child{z-index:1}

/* ==== share buttons: brand colors + hover lift ==== */
.pp-share a,.pp-share button{transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}
.pp-share a:hover{transform:translateY(-2px) scale(1.05);opacity:1;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.pp-sh-wa{background:#25d366;color:#fff}
.pp-sh-fb{background:#1877f2;color:#fff}
.pp-sh-x{background:#0b1220;color:#fff}
html.dark .pp-sh-x{background:#fff;color:#0b1220}
.pp-sh-tg{background:#29a9eb;color:#fff}
.pp-sh-pin{background:#e60023;color:#fff}
.pp-sh-li{background:#0a66c2;color:#fff}
.pp-sh-rd{background:#ff4500;color:#fff}