/* Peak Core Overrides - no build tools, CDN Tailwind + DaisyUI */

/* Base font */
html, body {
    font-family: "Quicksand", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    overflow-x:hidden;
}

/* Custom DaisyUI theme tokens via CSS variables (applied using data-theme) */
[data-theme="peak-dark"] {
    /* DaisyUI v4 expects OKLCH tokens: oklch(var(--token) / alpha) */
    /* Primary / Secondary / Accent */
    --p: 0.66 0.16 280;   /* vivid purple */
    --pc: 0.98 0.02 280;  /* on-primary (light) */
    --s: 0.63 0.14 210;   /* cyan */
    --sc: 0.98 0.02 210;
    --a: 0.65 0.18 320;   /* neon magenta */
    --ac: 0.98 0.02 320;

    /* Base and content (dark surfaces with light text) */
    --b1: 0.20 0.02 250;  /* base-100 */
    --b2: 0.24 0.02 250;  /* base-200 */
    --b3: 0.28 0.02 250;  /* base-300 */
    --bc: 0.92 0.03 250;  /* base-content (light) */

    /* Neutral */
    --n: 0.22 0.02 250;   /* neutral */
    --nc: 0.92 0.03 250;  /* on-neutral */

    /* Status */
    --in: 0.70 0.10 230;  /* info */
    --su: 0.70 0.12 160;  /* success */
    --wa: 0.82 0.14 100;  /* warning */
    --er: 0.66 0.20 30;   /* error */

    --rounded-box: .75rem;
    --rounded-btn: .6rem;
    --animation-btn: 0.15s;
}

/* Peak Light Theme */
[data-theme="peak-light"] {
    /* Light surfaces with dark content */
    --p: 0.65 0.16 280;   /* primary */
    --pc: 0.15 0.03 280;  /* on-primary */
    --s: 0.72 0.14 210;   /* secondary */
    --sc: 0.15 0.03 210;
    --a: 0.70 0.18 320;   /* accent */
    --ac: 0.15 0.03 320;

    --b1: 0.98 0.01 250;  /* base-100 */
    --b2: 0.95 0.01 250;  /* base-200 */
    --b3: 0.90 0.01 250;  /* base-300 */
    --bc: 0.22 0.03 250;  /* base-content (dark) */

    --n: 0.92 0.01 250;   /* neutral */
    --nc: 0.18 0.03 250;  /* on-neutral */

    --in: 0.72 0.12 230;
    --su: 0.70 0.12 160;
    --wa: 0.86 0.14 100;
    --er: 0.66 0.20 30;
}

/* Inputs: slightly glassy with clear contrast */
/* .input, .textarea, .select, .file-input {
    background-color: hsl(var(--b1));
    border-color: hsl(var(--b3));
    color: hsl(var(--bc));
}
.input:focus, .textarea:focus, .select:focus, .file-input:focus {
    outline: none;
    border-color: hsl(var(--p));
    box-shadow: 0 0 0 3px color-mix(in oklab, hsl(var(--p)) 20%, transparent);
} */

/* Buttons */
/* .btn-primary {
    background-color: hsl(var(--p));
    color: hsl(var(--pc));
    border-color: transparent;
}
.btn-primary:hover {
    filter: brightness(1.08);
} */

/* Cards */
.card {
    background-color: oklch(var(--b1));
    border: 1px solid oklch(var(--b3));
}

/* Optional: glass effect card variant */
.card.glass {
    background-color: color-mix(in oklab, oklch(var(--b1)) 70%, transparent);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* Page base */
body {
    background-color: oklch(var(--b2));
    color: oklch(var(--bc));
}

/* Form labels */
label { color: oklch(var(--bc)); }

/* Headings inherit content color - but allow inline styles to override */
/* Note: We check for style attribute containing color, but don't use !important to allow inline styles to override */
h1:not([style*="color"]), h2:not([style*="color"]), h3:not([style*="color"]), h4:not([style*="color"]), h5:not([style*="color"]), h6:not([style*="color"]) { 
    color: oklch(var(--bc)); 
}
/* Allow custom colors via inline styles - don't override inline styles */
/* Inline styles have higher specificity, so we don't need to do anything special here */

main p{
    padding-bottom: 1rem;
}

/* List styles - scoped to content areas to avoid conflicts with Tailwind reset */
/* These need !important to override Tailwind's preflight reset */
/* Only apply to content areas, not admin UI, menus, or dropdowns */
main:not([class*="admin"]):not([class*="sidebar"]):not([class*="menu"]) ul:not([class*="menu"]):not([class*="dropdown"]),
main:not([class*="admin"]):not([class*="sidebar"]):not([class*="menu"]) ol:not([class*="menu"]):not([class*="dropdown"]),
.content ul:not([class*="menu"]):not([class*="dropdown"]),
.content ol:not([class*="menu"]):not([class*="dropdown"]),
[class*="content"]:not([class*="admin"]):not([class*="sidebar"]):not([class*="menu"]) ul:not([class*="menu"]):not([class*="dropdown"]),
[class*="content"]:not([class*="admin"]):not([class*="sidebar"]):not([class*="menu"]) ol:not([class*="menu"]):not([class*="dropdown"]),
.prose ul:not([class*="menu"]):not([class*="dropdown"]),
.prose ol:not([class*="menu"]):not([class*="dropdown"]) {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

main:not([class*="admin"]):not([class*="sidebar"]):not([class*="menu"]) ol:not([class*="menu"]):not([class*="dropdown"]),
.content ol:not([class*="menu"]):not([class*="dropdown"]),
[class*="content"]:not([class*="admin"]):not([class*="sidebar"]):not([class*="menu"]) ol:not([class*="menu"]):not([class*="dropdown"]),
.prose ol:not([class*="menu"]):not([class*="dropdown"]) {
    list-style-type: decimal !important;
}

main:not([class*="admin"]):not([class*="sidebar"]):not([class*="menu"]) li:not([class*="menu"]):not([class*="dropdown"]),
.content li:not([class*="menu"]):not([class*="dropdown"]),
[class*="content"]:not([class*="admin"]):not([class*="sidebar"]):not([class*="menu"]) li:not([class*="menu"]):not([class*="dropdown"]),
.prose li:not([class*="menu"]):not([class*="dropdown"]) {
    /* padding-bottom: 0.5rem !important; */
    display: list-item !important;
}

/* Explicitly remove list styles from admin UI elements */
/* Admin sidebar, menus, dropdowns, and navigation */
.sidebar ul,
.sidebar ol,
.sidebar li,
.menu ul,
.menu ol,
.menu li,
.dropdown ul,
.dropdown ol,
.dropdown li,
[class*="sidebar"] ul,
[class*="sidebar"] ol,
[class*="sidebar"] li,
[class*="menu"] ul,
[class*="menu"] ol,
[class*="menu"] li,
[class*="dropdown"] ul,
[class*="dropdown"] ol,
[class*="dropdown"] li,
nav ul,
nav ol,
nav li,
/* Admin panel specific */
[class*="admin"] ul,
[class*="admin"] ol,
[class*="admin"] li,
/* Editor specific */
#canvas ul,
#canvas ol,
#canvas li,
[class*="editor"] ul,
[class*="editor"] ol,
[class*="editor"] li {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
}

/* In peak-dark theme, ensure cards are dark and text is readable */
[data-theme="peak-dark"] .card {
    background-color: oklch(var(--b1)) !important;
    color: oklch(var(--bc) / 1);
}
[data-theme="peak-dark"] .card .card-body {
    color: oklch(var(--bc) / 1);
}

/* In peak-light theme, ensure proper contrast */
[data-theme="peak-light"] .card {
    background-color: oklch(var(--b1)) !important;
    color: oklch(var(--bc) / 1);
}
[data-theme="peak-light"] .card .card-body {
    color: oklch(var(--bc) / 1);
}
[data-theme="peak-light"] label,
[data-theme="peak-light"] .label,
[data-theme="peak-light"] .label-text {
    color: oklch(var(--bc)) !important;
}
[data-theme="peak-light"] h1:not([style*="color"]),
[data-theme="peak-light"] h2:not([style*="color"]),
[data-theme="peak-light"] h3:not([style*="color"]),
[data-theme="peak-light"] h4:not([style*="color"]),
[data-theme="peak-light"] h5:not([style*="color"]),
[data-theme="peak-light"] h6:not([style*="color"]) {
    color: oklch(var(--bc));
}

/* Helper: subtle divider */
.hr-subtle { border-color: oklch(var(--b3)); opacity: .8; }

/* Builder Editor - Ensure text is visible in editor canvas */
/* Target content elements, but exclude control buttons (absolute positioned) and elements with inline color styles */
[data-theme="peak-dark"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) p:not([style*="color"]),
[data-theme="peak-dark"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h1:not([style*="color"]),
[data-theme="peak-dark"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h2:not([style*="color"]),
[data-theme="peak-dark"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h3:not([style*="color"]),
[data-theme="peak-dark"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h4:not([style*="color"]),
[data-theme="peak-dark"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h5:not([style*="color"]),
[data-theme="peak-dark"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h6:not([style*="color"]),
[data-theme="peak-dark"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) span:not([class*="btn"]):not([style*="color"]),
[data-theme="peak-dark"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) div:not([class*="btn"]):not([style*="color"]) {
    color: oklch(0.22 0.03 250) !important; /* Dark text for visibility on white canvas */
}

[data-theme="peak-light"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) p:not([style*="color"]),
[data-theme="peak-light"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h1:not([style*="color"]),
[data-theme="peak-light"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h2:not([style*="color"]),
[data-theme="peak-light"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h3:not([style*="color"]),
[data-theme="peak-light"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h4:not([style*="color"]),
[data-theme="peak-light"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h5:not([style*="color"]),
[data-theme="peak-light"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) h6:not([style*="color"]),
[data-theme="peak-light"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) span:not([class*="btn"]):not([style*="color"]),
[data-theme="peak-light"] #canvas .draggable-item > div:not([class*="absolute"]):not([class*="btn"]) div:not([class*="btn"]):not([style*="color"]) {
    color: oklch(0.22 0.03 250) !important; /* Dark text */
}

/* Code editor textarea - ensure dark text (but exclude buttons and controls) */
[data-theme="peak-dark"] textarea.textarea,
[data-theme="peak-dark"] textarea.textarea-bordered {
    color: oklch(0.22 0.03 250) !important;
    background-color: white !important;
}

[data-theme="peak-light"] textarea.textarea,
[data-theme="peak-light"] textarea.textarea-bordered {
    color: oklch(0.22 0.03 250) !important;
}


/* Builder Editor Control Buttons - Ensure visibility in dark mode */
/* Override Tailwind opacity-0 to make buttons visible */
[data-theme="peak-dark"] #canvas .draggable-item .absolute button.opacity-0,
[data-theme="peak-dark"] #canvas .draggable-item .absolute .btn.opacity-0,
[data-theme="peak-dark"] #canvas .draggable-item .absolute span.btn.opacity-0,
[data-theme="peak-dark"] #canvas .draggable-item .absolute button.btn,
[data-theme="peak-dark"] #canvas .draggable-item .absolute .btn,
[data-theme="peak-dark"] #canvas .draggable-item .absolute span.btn,
[data-theme="peak-dark"] #canvas .draggable-item .absolute button {
    color: oklch(0.92 0.03 250) !important; /* Light text for dark background */
    opacity: 0.85 !important; /* Override Tailwind opacity-0 */
}

[data-theme="peak-dark"] #canvas .draggable-item .absolute button.opacity-0 i,
[data-theme="peak-dark"] #canvas .draggable-item .absolute .btn.opacity-0 i,
[data-theme="peak-dark"] #canvas .draggable-item .absolute span.btn.opacity-0 i,
[data-theme="peak-dark"] #canvas .draggable-item .absolute button.btn i,
[data-theme="peak-dark"] #canvas .draggable-item .absolute .btn i,
[data-theme="peak-dark"] #canvas .draggable-item .absolute span.btn i,
[data-theme="peak-dark"] #canvas .draggable-item .absolute button i {
    color: oklch(0.92 0.03 250) !important; /* Light icons */
    opacity: 0.85 !important; /* Override Tailwind opacity-0 */
}

/* Full opacity on group hover */
[data-theme="peak-dark"] #canvas .draggable-item.group:hover .absolute button,
[data-theme="peak-dark"] #canvas .draggable-item.group:hover .absolute .btn,
[data-theme="peak-dark"] #canvas .draggable-item.group:hover .absolute span.btn {
    opacity: 1 !important;
}

[data-theme="peak-dark"] #canvas .draggable-item.group:hover .absolute button i,
[data-theme="peak-dark"] #canvas .draggable-item.group:hover .absolute .btn i,
[data-theme="peak-dark"] #canvas .draggable-item.group:hover .absolute span.btn i {
    opacity: 1 !important;
}

[data-theme="peak-dark"] #canvas .draggable-item .absolute button:hover,
[data-theme="peak-dark"] #canvas .draggable-item .absolute .btn:hover,
[data-theme="peak-dark"] #canvas .draggable-item .absolute span.btn:hover {
    color: oklch(0.98 0.02 250) !important; /* Even lighter on hover */
    background-color: oklch(0.28 0.02 250 / 0.5) !important; /* Slight background on hover */
    opacity: 1 !important; /* Full opacity on hover */
}

[data-theme="peak-dark"] #canvas .draggable-item .absolute button.btn-active,
[data-theme="peak-dark"] #canvas .draggable-item .absolute .btn.btn-active {
    color: oklch(0.98 0.02 250) !important; /* Light text for active state */
    background-color: oklch(0.35 0.02 250) !important; /* Background for active */
    opacity: 1 !important; /* Full opacity when active */
}

/* Light theme - ensure buttons are dark */
[data-theme="peak-light"] #canvas .draggable-item .absolute button.btn,
[data-theme="peak-light"] #canvas .draggable-item .absolute .btn,
[data-theme="peak-light"] #canvas .draggable-item .absolute span.btn,
[data-theme="peak-light"] #canvas .draggable-item .absolute button {
    color: oklch(0.22 0.03 250) !important; /* Dark text for light background */
}

[data-theme="peak-light"] #canvas .draggable-item .absolute button.btn i,
[data-theme="peak-light"] #canvas .draggable-item .absolute .btn i,
[data-theme="peak-light"] #canvas .draggable-item .absolute span.btn i,
[data-theme="peak-light"] #canvas .draggable-item .absolute button i {
    color: oklch(0.22 0.03 250) !important; /* Dark icons */
}

/* Full-width block wrapper - breaks out of content width containers */
.builder-full-width-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Ensure full-width blocks inside the wrapper span full width */
.builder-full-width-wrapper > section,
.builder-full-width-wrapper > div {
    width: 100%;
}

/* Prevent link colors from overriding button styles */
/* Buttons should maintain their button colors, not link colors */
/* Override global link color rules with higher specificity */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
a.btn:focus,
a.btn:visited:hover,
button.btn,
button.btn:link,
button.btn:visited,
button.btn:hover,
button.btn:active,
button.btn:focus,
.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:active,
.btn:focus {
    /* Reset link colors - let button classes control colors */
    /* Use unset to let DaisyUI button classes take over */
    color: unset !important;
}

/* Menu items that are buttons should not have link colors */
.menu a.btn,
.menu a.btn:link,
.menu a.btn:visited,
.menu a.btn:hover,
.menu a.btn:active,
.menu a.btn:focus,
.menu a.btn:visited:hover,
.navbar a.btn,
.navbar a.btn:link,
.navbar a.btn:visited,
.navbar a.btn:hover,
.navbar a.btn:active,
.navbar a.btn:focus,
.navbar a.btn:visited:hover,
nav a.btn,
nav a.btn:link,
nav a.btn:visited,
nav a.btn:hover,
nav a.btn:active,
nav a.btn:focus,
nav a.btn:visited:hover {
    color: unset !important;
}

/* Prevent gray background on hover for dropdown links (not buttons) */
/* .dropdown-content a:not(.btn):hover,
.dropdown-content a:not(.btn):focus,
.menu a:not(.btn):hover,
.menu a:not(.btn):focus,
[class*="dropdown"] a:not(.btn):hover,
[class*="dropdown"] a:not(.btn):focus {
    background-color: transparent !important;
} */

/* Tooltip fixes - ensure tooltips appear above navbar and work on mobile */
.tooltip:before,
.tooltip:after {
    z-index: 10000 !important; /* Above navbar (typically z-40 or z-50) */
}

/* Mobile tooltip behavior - show on click/touch instead of hover */
@media (hover: none) and (pointer: coarse) {
    /* On touch devices, show tooltip on click */
    .tooltip {
        position: relative;
    }
    
    .tooltip:active:before,
    .tooltip:active:after,
    .tooltip.tooltip-open:before,
    .tooltip.tooltip-open:after {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Add click handler via JavaScript will be added to layout */
}