/* static/css/custom.css */

/* Virtualização nativa: cards fora da viewport não são renderizados/pintados.
   Mantém galerias leves com centenas de itens, sem JS nem paginação. */
.cv-card { content-visibility: auto; contain-intrinsic-size: auto 320px; }

/* ── CSS VARIABLES ───────────────────────────── */
:root {
    --sentry-bg:       #121212;
    --sentry-card:     #1a1a1a;
    --sentry-border:   #333333;
    --sentry-purple:   var(--primary);
    --sentry-muted:    #a3cc00;
    --sentry-lime:     var(--primary);
    --sentry-coral:    var(--primary);
    --sentry-pink:     #9ca3af;
    --glass-bg:        rgba(255, 255, 255, 0.05);
}

/* ── BODY TEXTURE (PREMIUM) ───────────────────── */
body {
    background-color: var(--sentry-bg);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── HTMX ─────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: flex; }
.htmx-request #ideas-grid > :not(.htmx-indicator) { display: none; }

/* ── PAGE TRANSITION ──────────────────────────── */
main > div {
    animation: page-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── SENTRY BUTTONS ───────────────────────────── */
.btn-sentry-primary {
    background: var(--sentry-purple);
    color: #000000;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid var(--sentry-purple);
    border-radius: 13px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px inset;
    transition: all 0.2s ease;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sentry-primary:hover {
    box-shadow: rgba(0, 0, 0, 0.18) 0px 0.5rem 1.5rem;
}

/* ── GLASS CARDS ──────────────────────────────── */
.glass {
    background: rgba(26, 26, 26, 0.6);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--sentry-border);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px;
    transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.glass:hover {
    border-color: var(--sentry-purple);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.5),
        0 0 0 1px rgba(var(--primary-rgb), 0.15);
}

/* ── SIDEBAR LOGO AREA ────────────────────────── */
.sidebar-logo {
    background: linear-gradient(145deg, rgba(var(--primary-rgb), 0.05) 0%, transparent 65%);
    position: relative;
}
.sidebar-logo::after {
    content: '';
    position: absolute;
    inset-x: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.2) 0%, rgba(255,255,255,0.04) 45%, transparent 100%);
}

/* ── NAV SECTION LABEL ────────────────────────── */
.nav-section-label {
    padding: 0.875rem 0.75rem 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    user-select: none;
    pointer-events: none;
}

/* ── NAV LINK ─────────────────────────────────── */
.nav-link {
    position: relative;
    border-left: 2px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.nav-link-active {
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.1) 0%, transparent 100%) !important;
    color: var(--sentry-purple) !important;
    border-left-color: var(--sentry-purple) !important;
}

/* ── SIDEBAR USER CARD ────────────────────────── */
.sidebar-user-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 0.5rem 0.625rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.375rem;
}

.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #00cc66 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #000000;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* ── PLATFORM BADGES ──────────────────────────── */
.platform-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 18px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    font-family: 'Monaco', monospace;
}

.platform-youtube  { background: rgba(204,0,0,0.2);    color: #fca5a5; border: 1px solid rgba(204,0,0,0.3); }
.platform-x        { background: rgba(255,255,255,0.1); color: #d1d5db; border: 1px solid rgba(255,255,255,0.15); }
.platform-reddit   { background: rgba(255,69,0,0.2);   color: #fb923c; border: 1px solid rgba(255,69,0,0.3); }
.platform-instagram{ background: rgba(225,48,108,0.2); color: #f9a8d4; border: 1px solid rgba(225,48,108,0.3); }
.platform-tiktok   { background: rgba(0,242,234,0.15); color: #5eead4; border: 1px solid rgba(0,242,234,0.25); }
.platform-linkedin { background: rgba(10,102,194,0.2); color: #93c5fd; border: 1px solid rgba(10,102,194,0.3); }

/* ── GEM BADGE ────────────────────────────────── */
.gem-badge {
    animation: gem-pulse 3s ease-in-out infinite;
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    font-family: 'Monaco', monospace;
    border-radius: 18px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
@keyframes gem-pulse {
    0%, 100% { filter: brightness(1); }
    50%       { filter: brightness(1.2); }
}

/* ── CARD THUMBNAIL GRADIENT ──────────────────── */
.card-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(18, 18, 18, 0.8) 100%);
    pointer-events: none;
}

/* ── SCROLLBAR ────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), 0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb), 0.5); }

/* ── UTILITIES ────────────────────────────────── */
.transition-smooth { transition: all 0.2s ease-in-out; }

/* ── FILTER CARD ──────────────────────────────── */
.filter-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 1rem;
}
/* Mobile app shell. Desktop keeps its existing layout. */
.mobile-appbar, .mobile-filter-toggle, .mobile-kanban-hint,
.craft-drawer-toggle, .craft-drawer-heading, .craft-touch-hint,
.craft-drawer-overlay, .mobile-install-tip { display: none; }

@media (max-width: 767px) {
    html { scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
    body.mobile-nav-open { overflow: hidden; }
    .mobile-appbar {
        position: sticky; top: 0; z-index: 70; display: flex; align-items: center;
        min-height: calc(64px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 16px 0;
        gap: 12px; border-bottom: 1px solid #333;
        background: rgba(18,18,18,.96); backdrop-filter: blur(16px);
    }
    #sidebar-toggle { position: static; width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; }
    .mobile-appbar-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .mobile-appbar-label strong { color: var(--primary); font-size: 19px; letter-spacing: -.5px; }
    .mobile-appbar-label img { width: 32px; height: 32px; border-radius: 8px; }
    .mobile-appbar-label span { color: #aaa; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
    #sidebar { z-index: 60; width: min(86vw, 320px); height: 100dvh; padding-top: calc(64px + env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }
    #sidebar-overlay { z-index: 50; }
    #sidebar .sidebar-logo { display: none; }
    #sidebar nav { overscroll-behavior: contain; }
    #sidebar a { min-height: 44px; }
    main > div { padding-top: 24px !important; padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important; }
    main h1 { font-size: 26px; line-height: 1.2; overflow-wrap: anywhere; }
    main p, main h2, main h3, main a { overflow-wrap: anywhere; }
    main .flex > *, main .grid > * { min-width: 0; }
    main button, main select, main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), main summary { min-height: 44px; }
    main button, main a, main summary { touch-action: manipulation; }
    main input:not([type="checkbox"]):not([type="radio"]), main select, main textarea { font-size: 16px !important; max-width: 100%; }
    main input[type="checkbox"], main input[type="radio"] { min-width: 20px; min-height: 20px; }
    main video, main iframe, main img { max-width: 100%; }
    main pre { max-width: 100%; overflow-x: auto; }
    main table { display: block; max-width: 100%; overflow-x: auto; }
    :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
    .mobile-control { min-height: 44px; padding: 10px 14px; border: 1px solid rgba(var(--primary-rgb), .3); border-radius: 12px; background: rgba(var(--primary-rgb), .09); color: var(--primary); font-size: 13px; font-weight: 500; }
    .mobile-filter-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 12px 0 16px; }
    .mobile-filter-panel:not(.mobile-filters-open) { display: none; }
    #filter-form .filter-card { padding: 14px; }
    #filter-form .filter-card button { padding: 10px 12px; }
    .creative-library-filters label { flex: 1 1 calc(50% - 12px); }
    .creative-library-filters select { width: 100%; }
    .creative-library-filters > button { width: 100%; }
    .creative-library-layout > aside { max-height: 42dvh; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
    #creative-detail { scroll-margin-top: 88px; }
    #creative-detail > div { padding: 16px; }
    .mobile-kanban-hint { display: block; font-size: 12px; color: #aaa; margin: 0 0 12px; }
    .mobile-kanban-board { flex-direction: row !important; scroll-snap-type: x mandatory; gap: 12px; overscroll-behavior-x: contain; }
    .mobile-kanban-board > .kanban-column { width: calc(100vw - 56px); min-width: calc(100vw - 56px); scroll-snap-align: start; }
    .mobile-kanban-board .kanban-card { padding: 14px; }
    .mobile-kanban-board .drag-handle { display: none; }
    .mobile-install-tip { display: flex; align-items: center; gap: 12px; position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; right: 12px; z-index: 45; padding: 14px; border: 1px solid #444; border-radius: 14px; background: #1a1a1a; color: #ddd; font-size: 12px; box-shadow: 0 8px 30px #0008; }
    .mobile-install-tip button { min-width: 44px; min-height: 44px; color: var(--primary); }

    /* Craft: full canvas, references available in a touch-friendly drawer. */
    body.craft-page .mobile-appbar { display: none; }
    body.craft-page main > div { padding: 0 !important; animation: none; }
    .craft-layout { height: 100dvh !important; }
    .craft-toolbar { flex-wrap: wrap; flex-shrink: 0; gap: 4px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
    .craft-toolbar > div:first-child { flex: 1 1 100%; gap: 8px; }
    .craft-toolbar > div:last-child { margin-left: auto; }
    .craft-toolbar a { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
    .craft-toolbar button { min-width: 44px; min-height: 44px; }
    #toolbar-session { max-width: 110px; }
    #toolbar-blockcount { display: none; }
    #zoom-level { margin-left: auto; }
    #canvas-container { min-height: 0; touch-action: none; }
    .craft-drawer-toggle { display: block; position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; z-index: 60; backdrop-filter: blur(12px); background: rgba(25,30,10,.94); }
    .craft-drawer-overlay:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 70; background: #0009; }
    .craft-sidebar { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(92vw, 380px) !important; min-width: 0 !important; height: 100dvh !important; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); transform: translateX(100%); visibility: hidden; }
    .craft-sidebar.craft-drawer-open { transform: translateX(0); visibility: visible; }
    .craft-drawer-heading { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 8px; padding: 12px; font-size: 14px; }
    .craft-drawer-heading button { min-width: 44px; }
    .craft-touch-hint { display: block; font-size: 12px; color: #aaa; padding: 0 12px 8px; }
    .craft-sidebar { overflow-y: auto !important; overscroll-behavior: contain; }
    .craft-sidebar > * { flex-shrink: 0; }
    .craft-sidebar #references-list { flex: 1 0 180px; overflow-y: visible; }
    .craft-sidebar button, .craft-sidebar select, .craft-sidebar input { min-height: 44px; }
    .craft-sidebar .browse-tab { padding-left: 7px; padding-right: 7px; }
    .element-pill { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
    .craft-modal { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    .craft-modal > div { width: calc(100% - 24px) !important; max-height: 90dvh; overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
    main > div { animation: none; }
}


@media (max-width: 767px) { .craft-sidebar button[title] { min-width: 44px; } }

@media (max-width: 767px) {
    .mobile-kanban-tabs { flex-wrap: wrap; gap: 8px; width: 100%; }
    .mobile-kanban-tabs > a { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 10px 12px; white-space: nowrap; overflow-wrap: normal; }
    body.mobile-auth { overflow: auto; min-height: 100dvh; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); }
    .mobile-auth .glow-orb { max-width: 100vw; }
    .mobile-auth input { font-size: 16px; min-height: 48px; }
    .mobile-auth button { min-height: 44px; }
}
@media (max-width: 767px) and (max-height: 700px) {
    body.mobile-auth { align-items: flex-start; }
}

.mobile-auth-brand { display: none; }
@media (max-width: 767px) {
    .mobile-kanban-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .mobile-kanban-tabs > a { padding: 8px 4px; font-size: 10px; letter-spacing: 0; }
    .mobile-auth .logo-icon { display: none; }
    .mobile-auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 24px; }
    .mobile-auth-brand img { width: 72px; height: 72px; border-radius: 18px; }
    .mobile-auth-brand strong { color: var(--primary); font-size: 40px; letter-spacing: -2px; }
}

@media (max-width: 767px) { .mobile-auth .btn-primary, .mobile-auth .btn-primary:hover { background: rgba(var(--primary-rgb), .12); color: var(--primary); border: 1px solid rgba(var(--primary-rgb), .3); box-shadow: none; } }

/* Instagram contextual help */
.sip-help-tutorial{border:1px solid var(--primary)40;border-radius:12px;background:var(--primary)08;margin-bottom:24px;color:#d1d5db}
.sip-help-tutorial>summary{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:16px;cursor:pointer;color:#e0e0e0;font-weight:600;list-style:none}
.sip-help-tutorial>summary::-webkit-details-marker{display:none}
.sip-help-open-label{font-size:12px;color:var(--primary);margin-left:auto}
.sip-help-tutorial[open] .sip-help-open-label{display:none}
.sip-help-symbol{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--primary)66;border-radius:50%;color:var(--primary);font-family:Georgia,serif;font-weight:bold;flex-shrink:0}
.sip-help-tutorial-body{padding:0 20px 20px;font-size:14px;line-height:1.7}
.sip-help-tutorial-body section{margin-top:22px}
.sip-help-tutorial-body h2{font-size:17px;font-weight:600;color:#fff;margin-bottom:10px}
.sip-help-tutorial-body ol{list-style:decimal;padding-left:22px;margin:12px 0}
.sip-help-tutorial-body li{padding-left:4px;margin-bottom:10px}
.sip-help-action{display:inline-flex;gap:6px;align-items:center;max-width:100%;vertical-align:middle;min-width:0}
.sip-help-action>a,.sip-help-action>button:not(.sip-help-info){min-width:0}
.sip-help-info{display:inline-flex!important;align-items:center;justify-content:center;flex-shrink:0;width:30px;height:30px;border:1px solid var(--primary)4d!important;border-radius:50%!important;background:var(--primary)0d!important;color:var(--primary)!important;font:bold 17px Georgia,serif!important;cursor:help;vertical-align:middle;margin:4px;line-height:1!important}
.sip-help-info:hover{background:var(--primary)26!important}
.sip-help-info:focus-visible,.sip-help-tutorial summary:focus-visible,.sip-help-close:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.sip-help-card{display:block;position:relative;min-width:0}
.sip-help-card>a{height:100%;padding-right:48px}
.sip-help-card>.sip-help-info{position:absolute;top:8px;right:8px}
.sip-help-dialog{width:min(520px,calc(100vw - 32px));max-height:85dvh;overflow:auto;border:1px solid var(--primary)55;border-radius:16px;padding:24px;background:#121212;color:#e0e0e0;box-shadow:0 24px 80px #0009;margin:auto}
.sip-help-dialog::backdrop{background:#000a}
.sip-help-dialog h2{font-size:20px;font-weight:600;margin:0 0 16px;color:#fff}
.sip-help-dialog p{font-size:15px;line-height:1.7;white-space:pre-line}
.sip-help-dialog form{margin-top:24px;text-align:right}
.sip-help-close{padding:10px 16px;border-radius:8px;border:1px solid var(--primary)4d;background:var(--primary)1a;color:var(--primary);cursor:pointer}
@media(pointer:coarse){.sip-help-info{width:40px;height:40px}}

@media(max-width:767px),(pointer:coarse){.sip-help-info{width:44px;height:44px;min-width:44px;padding:0}}