/* ==========================================================================
   BMS Odoo Milano - Tema "Aurora 3D"
   Colori brand Odoo (#714B67 viola, #017E84 teal) + accenti neon
   ========================================================================== */
:root {
    --odoo-purple: #714B67;
    --odoo-purple-l: #a26b95;
    --odoo-teal: #017E84;
    --neon-cyan: #22d3ee;
    --neon-pink: #ff3cac;
    --neon-violet: #8b5cf6;
    --neon-amber: #fbbf24;
    --neon-green: #34d399;
    --neon-red: #f43f5e;
    --bg-0: #07040d;
    --bg-1: #120a1c;
    --glass: rgba(255, 255, 255, 0.055);
    --glass-strong: rgba(255, 255, 255, 0.09);
    --glass-border: rgba(255, 255, 255, 0.12);
    --text-dim: #a59bb5;
    --grad-main: linear-gradient(135deg, #714B67 0%, #8b5cf6 45%, #017E84 100%);
    --grad-neon: linear-gradient(90deg, #ff3cac, #8b5cf6, #22d3ee);
    --radius: 18px;
    --bs-body-bg: var(--bg-0);
    --bs-body-color: #ece7f5;
    --bs-border-color: rgba(255, 255, 255, 0.1);
    --bs-secondary-color: var(--text-dim);
}

html { scroll-behavior: smooth; }

body {
    background: var(--bg-0);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
body > .container-fluid { flex: 1; position: relative; z-index: 1; }

/* ---------- Sfondo animato (aurora + canvas 3D) ---------- */
.aurora {
    position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background: radial-gradient(ellipse at top, var(--bg-1), var(--bg-0) 70%);
}
.aurora span {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45;
    animation: aurora-float 22s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { width: 55vw; height: 55vw; left: -12vw; top: -18vw; background: var(--odoo-purple); }
.aurora span:nth-child(2) { width: 45vw; height: 45vw; right: -10vw; top: 10vh; background: var(--odoo-teal); animation-delay: -6s; }
.aurora span:nth-child(3) { width: 35vw; height: 35vw; left: 30vw; bottom: -15vw; background: var(--neon-violet); animation-delay: -12s; opacity: .3; }
.aurora span:nth-child(4) { width: 22vw; height: 22vw; right: 20vw; bottom: 5vh; background: var(--neon-pink); animation-delay: -3s; opacity: .18; }
@keyframes aurora-float {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(6vw, 4vh) scale(1.15) rotate(25deg); }
    100% { transform: translate(-4vw, 8vh) scale(.95) rotate(-15deg); }
}
#bg3d { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .75; }

/* ---------- Navbar glass ---------- */
.navbar.glass-nav {
    background: rgba(12, 6, 20, 0.6) !important;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid var(--glass-border) !important;
    padding: .45rem 1rem;
    position: sticky; top: 0; z-index: 1030;
}
.navbar.glass-nav::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--grad-neon); background-size: 200% 100%;
    animation: neon-slide 6s linear infinite; opacity: .8;
}
@keyframes neon-slide { to { background-position: 200% 0; } }
.brand-logo {
    width: 36px; height: 36px; border-radius: 50%; margin-right: 10px; object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255,255,255,.2), 0 0 18px rgba(162,107,149,.8);
    animation: logo-spin 12s linear infinite;
}
@keyframes logo-spin { 0%,90% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.brand-text {
    background: linear-gradient(90deg, #fff, #e9c7e1, #9ff3f8); -webkit-background-clip: text;
    background-clip: text; color: transparent; letter-spacing: .5px;
}
.glass-nav .nav-link {
    color: #d8cfe6 !important; border-radius: 10px; margin: 0 2px; padding: .45rem .75rem !important;
    transition: all .25s; position: relative;
}
.glass-nav .nav-link:hover, .glass-nav .nav-link.active {
    color: #fff !important; background: rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.glass-nav .nav-link i { transition: transform .3s; display: inline-block; }
.glass-nav .nav-link:hover i { transform: translateY(-2px) scale(1.2); }
.glass-nav .nav-link.nav-setup { color: var(--neon-amber) !important; }
.dropdown-menu {
    background: rgba(20, 10, 32, .92); backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border); border-radius: 14px; padding: .4rem;
}
.dropdown-item { border-radius: 8px; color: #e6def2; }
.dropdown-item:hover { background: var(--grad-main); color: #fff; }

/* ---------- Card glass + bordo gradiente ---------- */
.card {
    background: var(--glass) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 10px 40px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
    animation: rise-in .7s cubic-bezier(.2,.8,.2,1) backwards;
}
.card-header {
    background: linear-gradient(90deg, rgba(113,75,103,.35), rgba(1,126,132,.18)) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
    font-weight: 600;
}
.card-footer { background: transparent !important; border-top: 1px solid var(--glass-border) !important; }
.card:hover { box-shadow: 0 18px 50px -12px rgba(113,75,103,.55), inset 0 1px 0 rgba(255,255,255,.08); }
.row > [class*="col"]:nth-child(1) > .card { animation-delay: .05s; }
.row > [class*="col"]:nth-child(2) > .card { animation-delay: .12s; }
.row > [class*="col"]:nth-child(3) > .card { animation-delay: .19s; }
.row > [class*="col"]:nth-child(4) > .card { animation-delay: .26s; }
.row > [class*="col"]:nth-child(5) > .card { animation-delay: .33s; }
.row > [class*="col"]:nth-child(6) > .card { animation-delay: .40s; }
@keyframes rise-in {
    from { opacity: 0; transform: translateY(24px) scale(.98) rotateX(8deg); }
    to   { opacity: 1; transform: none; }
}

/* Tilt 3D al passaggio del mouse (gestito in app.js) */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt .tilt-pop { transform: translateZ(30px); }

/* Stat tile */
.stat-tile .card-body { position: relative; overflow: hidden; }
.stat-icon {
    width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
    font-size: 1.35rem; color: #fff; margin-bottom: .6rem;
    box-shadow: 0 8px 22px -6px currentColor;
}
.stat-value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.stat-label { color: var(--text-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .6px; }
.bg-grad-purple { background: linear-gradient(135deg, #714B67, #8b5cf6); }
.bg-grad-teal   { background: linear-gradient(135deg, #017E84, #22d3ee); }
.bg-grad-orange { background: linear-gradient(135deg, #f59e0b, #f97316); }
.bg-grad-red    { background: linear-gradient(135deg, #f43f5e, #be123c); }
.bg-grad-green  { background: linear-gradient(135deg, #10b981, #34d399); }
.bg-grad-pink   { background: linear-gradient(135deg, #ff3cac, #8b5cf6); }
.text-grad {
    background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Bottoni ---------- */
.btn { border-radius: 12px; font-weight: 500; transition: all .25s; }
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--grad-main); border: none; box-shadow: 0 6px 20px -6px rgba(139,92,246,.7); }
.btn-primary:hover { filter: brightness(1.15); box-shadow: 0 8px 28px -6px rgba(139,92,246,.9); }
.btn-success { background: linear-gradient(135deg, #059669, #34d399); border: none; box-shadow: 0 6px 20px -8px rgba(52,211,153,.8); }
.btn-danger  { background: linear-gradient(135deg, #e11d48, #fb7185); border: none; box-shadow: 0 6px 20px -8px rgba(244,63,94,.8); }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #fbbf24); border: none; color: #1a1020; }
.btn-success:hover, .btn-danger:hover, .btn-warning:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ---------- Form ---------- */
.form-control, .form-select, .input-group-text {
    background-color: rgba(0,0,0,.28) !important; border-color: rgba(255,255,255,.12) !important;
    color: #f1ecf8 !important; border-radius: 10px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--neon-violet) !important; box-shadow: 0 0 0 .2rem rgba(139,92,246,.25) !important;
}

/* ---------- Tabelle ---------- */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: rgba(255,255,255,.05); color: inherit; }
.table-dark { --bs-table-bg: transparent; }
.table thead th, .table thead.sticky-top th {
    background: rgba(20,10,32,.9); color: var(--text-dim); font-weight: 600; font-size: .75rem;
    text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--glass-border);
}
.table td { border-color: rgba(255,255,255,.06); }

/* ---------- Tabs ---------- */
.nav-tabs { border-bottom: 1px solid var(--glass-border); gap: 4px; flex-wrap: wrap; }
.nav-tabs .nav-link {
    border: none; border-radius: 12px 12px 0 0; color: var(--text-dim); transition: all .25s;
}
.nav-tabs .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-tabs .nav-link.active {
    color: #fff; background: linear-gradient(180deg, rgba(139,92,246,.35), rgba(139,92,246,.05));
    box-shadow: inset 0 -2px 0 var(--neon-violet);
}
.nav-tabs .nav-security.active { background: linear-gradient(180deg, rgba(244,63,94,.35), rgba(244,63,94,.05)); box-shadow: inset 0 -2px 0 var(--neon-red); }

/* ---------- Badge / alert ---------- */
.badge { font-weight: 600; border-radius: 8px; }
.alert { border-radius: 14px; backdrop-filter: blur(10px); border: 1px solid var(--glass-border); }
.progress { background: rgba(255,255,255,.08); border-radius: 10px; }
.bg-dark { background-color: rgba(0,0,0,.3) !important; }

/* ---------- Slider con banda colorata ---------- */
.form-range {
    -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; outline: none;
    background: linear-gradient(to right, #fbbf24 var(--val, 0%), rgba(255,255,255,.12) var(--val, 0%));
}
.form-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; cursor: pointer; border: 3px solid #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,.8);
}
.form-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer;
    border: 3px solid #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,.8);
}
.form-range::-moz-range-progress { background: #fbbf24; border-radius: 4px; height: 8px; }

/* ---------- Animazioni utili ---------- */
.blink { animation: blink-glow 1.1s ease-in-out infinite; }
@keyframes blink-glow {
    0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(244,63,94,.7); }
    50% { opacity: .55; box-shadow: 0 0 18px 4px rgba(244,63,94,.6); }
}
.pulse-ok { animation: pulse-ok 2.4s ease-in-out infinite; }
@keyframes pulse-ok { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 50% { box-shadow: 0 0 20px 4px rgba(52,211,153,.35); } }
.d-contents { display: contents; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--odoo-purple), var(--odoo-teal)); border-radius: 6px; }

/* ---------- Planimetria ---------- */
#floorplan-container { border: 1px solid var(--glass-border); border-radius: 14px; overflow: hidden; }
.light-marker i { transition: transform .2s, filter .2s; }
.light-marker:hover i { transform: scale(1.35); filter: drop-shadow(0 0 8px rgba(251,191,36,.9)); }
.light-marker.dragging { opacity: .7; z-index: 100 !important; cursor: grabbing !important; }
.light-marker.dragging i { transform: scale(1.4); filter: drop-shadow(0 0 8px rgba(34,197,94,.8)); }

/* ---------- Edificio 3D (dashboard) ---------- */
.building-stage { position: relative; height: 440px; border-radius: var(--radius); overflow: hidden; cursor: grab; }
.building-stage:active { cursor: grabbing; }
.building-stage canvas { display: block; }
.floor-label {
    padding: 6px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff;
    background: rgba(15,8,25,.75); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px);
    white-space: nowrap; pointer-events: auto; cursor: pointer; transition: transform .2s, background .2s;
}
.floor-label:hover { transform: scale(1.08); background: rgba(113,75,103,.9); }
.floor-label .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.floor-label.alarm { border-color: var(--neon-red); box-shadow: 0 0 16px rgba(244,63,94,.7); }
.floor-label.ghost { opacity: .45; pointer-events: none; font-weight: 400; }
.stage-hint {
    position: absolute; left: 14px; bottom: 12px; font-size: 11px; color: var(--text-dim);
    background: rgba(0,0,0,.35); padding: 4px 10px; border-radius: 10px; pointer-events: none;
}
.stage-legend { position: absolute; right: 14px; top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); pointer-events: none; }
.stage-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); box-shadow: 0 0 8px var(--c); }

/* ---------- Footer ---------- */
footer.app-footer {
    position: relative; z-index: 1; border-top: 1px solid var(--glass-border) !important;
    background: rgba(10,5,18,.55); backdrop-filter: blur(10px);
}

/* Accessibilita': meno animazioni se richiesto */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    #bg3d { display: none; }
}