/* ============================================================================
   LonkyDev — Theme del panel superadmin.
   Identidad propia (violeta), distinta de /css/lonky-theme.css (azul, ERP tenant).
   Se carga DESPUÉS de Bootstrap para pisar sus defaults. Nunca convive con
   lonky-theme.css: el panel admin no la carga.
   ============================================================================ */

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

:root {
    --lonkydev-violet-50:  #F5F1FF;
    --lonkydev-violet-100: #E4D9FF;
    --lonkydev-violet-300: #A98CFF;
    --lonkydev-violet-500: #8C52FF;
    --lonkydev-violet-600: #7440DB;
    --lonkydev-violet-700: #5C30B3;
    --lonkydev-violet-900: #050A30;

    --lonkydev-navbar-bg: #0D0F1A;
    --lonkydev-bg:        #F6F5FA;

    --lonkydev-grey-100: #EAEAF2;
    --lonkydev-grey-200: #D7D6E4;
    --lonkydev-grey-400: #8D8BA6;
    --lonkydev-grey-500: #666480;
    --lonkydev-grey-900: #1C1B29;

    --lonkydev-success: #2FAE60;
    --lonkydev-warning: #E8A83C;
    --lonkydev-danger:  #DD3838;

    --lonkydev-radius:      10px;
    --lonkydev-radius-sm:   6px;
    --lonkydev-radius-pill: 999px;
    --lonkydev-focus-ring:  0 0 0 3px rgba(140, 82, 255, .25);

    --lonkydev-font-ui:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lonkydev-font-title: 'Poppins', 'Inter', sans-serif;

    --bs-primary:     #8C52FF;
    --bs-primary-rgb: 140, 82, 255;
}

body {
    font-family: var(--lonkydev-font-ui);
    background-color: var(--lonkydev-bg);
    color: var(--lonkydev-grey-900);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lonkydev-font-title);
    font-weight: 600;
    color: var(--lonkydev-grey-900);
}

.text-muted, .text-secondary { color: var(--lonkydev-grey-500) !important; }

a { color: var(--lonkydev-violet-600); }
a:hover { color: var(--lonkydev-violet-700); }

/* ---- Navbar / login ---- */
.lonkydev-navbar { background-color: var(--lonkydev-navbar-bg); }
.lonkydev-login  { background-color: var(--lonkydev-navbar-bg); }

/* ---- Botones ---- */
.btn-primary {
    background-color: var(--lonkydev-violet-500);
    border-color: var(--lonkydev-violet-500);
}
.btn-primary:hover, .btn-primary:active {
    background-color: var(--lonkydev-violet-600) !important;
    border-color: var(--lonkydev-violet-600) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--lonkydev-violet-50);
    border-color: var(--lonkydev-violet-300);
    color: var(--lonkydev-violet-700);
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--lonkydev-focus-ring);
}

/* ---- Forms ---- */
.form-control:focus, .form-select:focus {
    border-color: var(--lonkydev-violet-500);
    box-shadow: var(--lonkydev-focus-ring);
}

/* ---- Cards ---- */
.card {
    border-color: var(--lonkydev-grey-200);
    border-radius: var(--lonkydev-radius);
}

/* ---- KPI tiles (índice de tenants) ---- */
.lonkydev-kpi {
    border-radius: var(--lonkydev-radius);
    border: 1px solid var(--lonkydev-grey-200);
    background: #fff;
    padding: 1rem 1.25rem;
}
.lonkydev-kpi-value {
    font-family: var(--lonkydev-font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--lonkydev-grey-900);
    line-height: 1.2;
}
.lonkydev-kpi-label {
    font-size: .8rem;
    color: var(--lonkydev-grey-500);
}
.lonkydev-kpi--accent .lonkydev-kpi-value { color: var(--lonkydev-violet-600); }

/* ---- Tabla ---- */
.table > thead tr th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--lonkydev-grey-500);
    border-bottom-color: var(--lonkydev-grey-200);
}
.table-hover > tbody > tr:hover { background-color: var(--lonkydev-violet-50); }

/* ---- Badges de estado de onboarding (índice) ---- */
.badge-onboarding-ready     { background-color: var(--lonkydev-success); }
.badge-onboarding-pending   { background-color: var(--lonkydev-warning); color: #2E2410; }
.badge-onboarding-unchecked { background-color: var(--lonkydev-grey-400); }

/* ---- Tabs (ficha de tenant) ---- */
.nav-tabs .nav-link {
    color: var(--lonkydev-grey-500);
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
}
.nav-tabs .nav-link.active {
    color: var(--lonkydev-violet-600);
    border-bottom-color: var(--lonkydev-violet-500);
    background: transparent;
}

/* ---- Editor de Novedades (tanda 2 del rediseño) ---- */

/* Destacada: fondo teñido en vez de un borde de acento a la izquierda.
   El borde lateral grueso es un patrón gastado —lee como plantilla, no como
   decisión— y además era redundante: el ítem ya lleva su badge "Destacada".
   El fondo marca el bloque entero, que es lo que se quiere distinguir. */
.release-item-featured {
    background: var(--lonkydev-violet-50);
    border-color: var(--lonkydev-violet-100);
}

.release-item-grip {
    cursor: grab;
    padding: 0 .25rem;
    align-self: flex-start;
}
.release-item-grip:active { cursor: grabbing; }

/* Marcas de "acá cae" mientras se arrastra — mismo criterio que categories/index.blade.php,
   con nombre propio porque ese otro vive en lonky-theme.css (el ERP azul, no este panel). */
.release-item-drop-before { box-shadow: inset 0 2px 0 var(--lonkydev-violet-500); }
.release-item-drop-after  { box-shadow: inset 0 -2px 0 var(--lonkydev-violet-500); }

.release-item-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: var(--lonkydev-radius);
    overflow: hidden;
    background: var(--lonkydev-grey-100);
}
.release-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.release-item-thumb-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lonkydev-grey-400);
    font-size: 1.25rem;
}
.release-item-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    font-size: 1.1rem;
    pointer-events: none;
}

/* Zona de paste/drag/input — el borde punteado cambia a sólido violeta mientras se
   arrastra algo encima, la misma señal que ya usa is-dragover en otras pantallas. */
.release-item-media-drop {
    border: 1px dashed var(--lonkydev-grey-200);
    border-radius: var(--lonkydev-radius);
    padding: .5rem .75rem;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
}
.release-item-media-drop.is-dragover {
    border-style: solid;
    border-color: var(--lonkydev-violet-500);
    /* violet-100, no violet-50: un ítem destacado ya tiñe TODA la fila con
       violet-50 (.release-item-featured) — con el mismo tono acá, arrastrar un
       archivo sobre la zona de un ítem destacado no se notaría. Un paso más
       oscuro se distingue en los dos casos, destacado y normal. */
    background-color: var(--lonkydev-violet-100);
}