/* bobdo ADvantage — Custom styles on top of Metronic */

/* Bobdo brand font */
:root {
    --font-sans: "Onest", ui-sans-serif, system-ui, sans-serif;
}

/* Bobdo brand: override Metronic blue with #e8f500 in dark sidebar */
.dark {
    --primary: #e8f500;
    --primary-foreground: #1a1a1a;
}

/* Sidebar scrollbar: allow scrolling but hide scrollbar chrome (arrows, track) */
.kt-sidebar .kt-scrollable-y-hover { overflow-y: auto !important; scrollbar-width: none; }
.kt-sidebar .kt-scrollable-y-hover::-webkit-scrollbar { display: none; }

/* Score buttons (custom colors for scoring UX) */
.score-inline { display: flex; gap: 0.3rem; align-items: center; white-space: nowrap; }
.manual-score { display: flex; gap: 0.3rem; align-items: center; }
.manual-score input { width: 80px; }
.btn-score { font-size: 0.875rem; padding: 0.3rem 0.6rem; min-width: 2.5rem; text-align: center; }
.btn-score.selected { background: #2d6a4f !important; color: #fff !important; border-color: #2d6a4f !important; }
.btn-score.selected-bad { background: #dc3545 !important; color: #fff !important; border-color: #dc3545 !important; }
.btn-preset { background: #e8e8e8; border: 2px solid #4caf50; color: #555; }
.btn-preset:hover { background: #e8f5e9; border-color: #388e3c; }
.btn-preset.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1b4332; }
.btn-spam { background: #e8e8e8; border: 2px solid #ef5350; color: #555; }
.btn-spam:hover { background: #fde8e8; border-color: #c0392b; color: #c0392b; }
.btn-converted { border: 2px solid #d4a017; }
.btn-converted:hover { background: #fdf6e3; border-color: #b8860b; }
.btn-converted.selected { background: #d4a017 !important; color: #fff !important; border-color: #b8860b !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b8860b; }
.btn-spam.selected-bad { background: #c0392b !important; color: #fff !important; border-color: #c0392b !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c0392b; }
.btn-unscore { background: transparent; border: 1px solid #ccc; color: #999; font-size: 0.75rem; padding: 0.2rem 0.4rem; min-width: auto; }
.btn-unscore:hover { background: #f5f5f5; border-color: #999; color: #555; }

/* WCAG mobile score buttons */
@media (max-width: 768px) {
    .btn-score, .btn-preset, .btn-spam { min-height: 44px; }
    .manual-score { flex-wrap: wrap; }
    .manual-score input { width: 100%; }
}

/* Expandable rows (admin tables — JS toggle) */
.data-row { cursor: pointer; transition: background 0.1s; }
.data-row:hover { background: rgba(0,0,0,0.02); }
.data-row.expanded { background: rgba(0,0,0,0.03); }
.col-expand { width: 28px; text-align: center; padding-left: 0.5rem !important; padding-right: 0 !important; }
.expand-icon { display: inline-block; transition: transform 0.15s ease; font-size: 1.25rem; color: #6c757d; user-select: none; }
.data-row.expanded .expand-icon { transform: rotate(90deg); }
.detail-row { display: none; }
.detail-row.open { display: table-row; }
.detail-row > td { padding: 0.75rem 1.25rem !important; background: rgba(0,0,0,0.01); border-top: none !important; }

/* Portal chevron rotation + size (not in compiled Metronic CSS) */
.chevron { font-size: 1.25rem; }
.rotate-90 { transform: rotate(90deg); }

/* Tailwind utilities missing from Metronic's compiled CSS */
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.w-auto { width: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
@media (width >= 48rem) {
    .md\:table-cell { display: table-cell; }
    .md\:hidden { display: none; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (width >= 64rem) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:p-10 { padding: 2.5rem; }
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* Widen container for large monitors — Metronic default 80rem (1280px) is too narrow
   for score buttons with long labels (Luna presets). */
@media (width >= 80rem) {
    .kt-container-fixed { max-width: 100rem; }
}
@media (width >= 100rem) {
    .kt-container-fixed { max-width: 120rem; }
}

/* Textarea height — Metronic kt-input sets fixed height, override for textarea */
textarea.kt-input { height: auto; }

/* Form labels — Metronic kt-form-label is too minimal for stacked forms */
.kt-form-label {
    font-weight: 500;
    margin-bottom: 0.375rem;
    color: var(--foreground);
}

/* Arbitrary-value Tailwind utilities (not in Metronic compiled CSS) */
.max-w-\[400px\] { max-width: 400px; }
.max-w-\[200px\] { max-width: 200px; }
.max-h-\[200px\] { max-height: 200px; }
.h-\[60px\] { height: 60px; }
.w-\[20px\] { width: 20px; }
.gap-\[10px\] { gap: 10px; }
.pe-\[10px\] { padding-inline-end: 10px; }
.ps-\[10px\] { padding-inline-start: 10px; }
.py-\[8px\] { padding-top: 8px; padding-bottom: 8px; }
.text-\[10px\] { font-size: 10px; }

/* Standard Tailwind utilities missing from Metronic compiled CSS */
.p-8 { padding: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.gap-1\.5 { gap: 0.375rem; }
.text-red-600 { color: oklch(57.7% 0.245 27.325); }
.break-all { word-break: break-all; }
.hover\:underline:hover { text-decoration-line: underline; }
.no-underline { text-decoration-line: none; }

/* Accent background with opacity (not in Metronic compiled CSS) */
.bg-accent\/30 { background-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.hover\:bg-accent\/30:hover { background-color: color-mix(in srgb, var(--accent) 30%, transparent); }

/* Note action buttons — visible on touch devices (no hover) */
@media (hover: none) {
    .note-actions { opacity: 1 !important; }
}

/* HTMX loading indicator */
.htmx-request { opacity: 0.5; transition: opacity 200ms; }

/* Confirm modal */
.confirm-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.confirm-modal { background: var(--background, #fff); border-radius: 0.5rem; padding: 1.25rem; min-width: 300px; max-width: 400px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); }

/* ── Lead chat bubble (messenger-style form submission display) ── */
.lead-bubble { margin-bottom: 0.75rem; }
.lead-bubble-header { display: flex; align-items: flex-start; gap: 0.75rem; }

.lead-avatar {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem; font-weight: 600; color: #fff;
    background: #6b7280;
}
/* Avatar color palette — 8 muted colors based on first initial */
.lead-avatar[data-char="A"], .lead-avatar[data-char="B"], .lead-avatar[data-char="C"] { background: #4a7c6f; }
.lead-avatar[data-char="D"], .lead-avatar[data-char="E"], .lead-avatar[data-char="F"] { background: #5b6abf; }
.lead-avatar[data-char="G"], .lead-avatar[data-char="H"], .lead-avatar[data-char="I"] { background: #b0774d; }
.lead-avatar[data-char="J"], .lead-avatar[data-char="K"], .lead-avatar[data-char="L"] { background: #8b5fbf; }
.lead-avatar[data-char="M"], .lead-avatar[data-char="N"], .lead-avatar[data-char="O"] { background: #bf5b5b; }
.lead-avatar[data-char="P"], .lead-avatar[data-char="Q"], .lead-avatar[data-char="R"] { background: #4a8c9c; }
.lead-avatar[data-char="S"], .lead-avatar[data-char="T"], .lead-avatar[data-char="U"] { background: #7c8a4a; }
.lead-avatar[data-char="V"], .lead-avatar[data-char="W"], .lead-avatar[data-char="X"],
.lead-avatar[data-char="Y"], .lead-avatar[data-char="Z"] { background: #9c6b4a; }

.lead-bubble-meta { min-width: 0; }
.lead-bubble-name { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.lead-bubble-contact { font-size: 0.8125rem; color: var(--secondary-foreground, #6b7280); line-height: 1.4; word-break: break-word; }
.lead-bubble-contact a { color: var(--secondary-foreground, #6b7280); text-decoration: none; }
.lead-bubble-contact a:hover { color: var(--foreground); text-decoration: underline; }

.lead-bubble-body {
    margin-top: 0.5rem; margin-left: 52px;
    background: #f0f4f8; border-radius: 0 12px 12px 12px;
    padding: 0.75rem 1rem; max-width: 600px;
}
.dark .lead-bubble-body { background: #1e2530; }

.lead-bubble-form-type { font-size: 0.75rem; font-weight: 600; color: var(--secondary-foreground, #6b7280); margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.03em; }
.lead-bubble-message { white-space: pre-wrap; font-size: 0.875rem; line-height: 1.5; max-height: 200px; overflow-y: auto; }
.lead-bubble-raw-sep { border-top: 1px solid rgba(0,0,0,0.08); margin-top: 0.5rem; padding-top: 0.5rem; }
.dark .lead-bubble-raw-sep { border-top-color: rgba(255,255,255,0.08); }
.lead-bubble-field { font-size: 0.8125rem; line-height: 1.5; word-break: break-word; margin-bottom: 0.25rem; }
.lead-bubble-field:last-child { margin-bottom: 0; }
.lead-bubble-field-label { font-weight: 600; color: var(--foreground, #1a1a1a); }
.lead-bubble-field-value { color: var(--secondary-foreground, #6b7280); }

.lead-bubble-footer { margin-left: 52px; margin-top: 0.25rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.lead-bubble-time { font-size: 0.6875rem; color: var(--secondary-foreground, #6b7280); }
.lead-bubble-source { font-size: 0.6875rem; color: var(--secondary-foreground, #6b7280); }

/* ── Note thread (chat-style notes) ── */
.note-thread-item { margin-top: 0.5rem; }
.note-thread-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.note-avatar {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.625rem; font-weight: 600; color: #fff; background: #6b7280;
}
.note-avatar[data-char="A"], .note-avatar[data-char="B"], .note-avatar[data-char="C"] { background: #4a7c6f; }
.note-avatar[data-char="D"], .note-avatar[data-char="E"], .note-avatar[data-char="F"] { background: #5b6abf; }
.note-avatar[data-char="G"], .note-avatar[data-char="H"], .note-avatar[data-char="I"] { background: #b0774d; }
.note-avatar[data-char="J"], .note-avatar[data-char="K"], .note-avatar[data-char="L"] { background: #8b5fbf; }
.note-avatar[data-char="M"], .note-avatar[data-char="N"], .note-avatar[data-char="O"] { background: #bf5b5b; }
.note-avatar[data-char="P"], .note-avatar[data-char="Q"], .note-avatar[data-char="R"] { background: #4a8c9c; }
.note-avatar[data-char="S"], .note-avatar[data-char="T"], .note-avatar[data-char="U"] { background: #7c8a4a; }
.note-avatar[data-char="V"], .note-avatar[data-char="W"], .note-avatar[data-char="X"],
.note-avatar[data-char="Y"], .note-avatar[data-char="Z"] { background: #9c6b4a; }
.note-thread-content { min-width: 0; flex-grow: 1; }
.note-thread-header { display: flex; align-items: baseline; gap: 0.375rem; flex-wrap: wrap; }
.note-thread-author { font-size: 0.75rem; font-weight: 600; }
.note-thread-time { font-size: 0.6875rem; color: var(--secondary-foreground, #6b7280); }
.note-thread-item .note-text { font-size: 0.8125rem; line-height: 1.4; }

/* ── Progressive disclosure (technical details) ── */
.lead-details { margin-top: 0.75rem; }
.lead-details summary { font-size: 0.75rem; color: var(--secondary-foreground, #6b7280); cursor: pointer; user-select: none; padding: 0.375rem 0; }
.lead-details summary:hover { color: var(--foreground); }
.lead-details[open] summary { margin-bottom: 0.5rem; }
.lead-details summary::marker { font-size: 0.625rem; }

/* Form double-submit prevention */
form.submitting button[type="submit"] { opacity: 0.5; pointer-events: none; }

/* Preset score buttons — selected state via CSS custom property */
.btn-preset.selected {
    background: hsl(153, calc(30% + var(--preset-idx, 1) * 40%), calc(82% - var(--preset-idx, 1) * 47%));
    border-color: hsl(153, calc(35% + var(--preset-idx, 1) * 35%), calc(68% - var(--preset-idx, 1) * 40%));
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1b4332;
}
.btn-preset.selected.preset-dark { color: #fff; }
.btn-preset.selected.preset-light { color: #1b4332; }

/* Toast notifications */
.toast-notification {
    position: fixed; top: 1rem; right: 1rem; z-index: 9999;
    padding: 0.75rem 1.25rem; border-radius: 0.5rem;
    font-size: 0.875rem; cursor: pointer; max-width: 400px;
    animation: toastIn 0.2s ease-out;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.toast-danger { background: #dc3545; color: #fff; }
.toast-warning { background: #ffc107; color: #212529; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } }