/* ============================================================
   Coratec Maps - Main CSS
   ============================================================ */

/* ---- Reset / Normalize ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; height: 100%; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: #f0f2f5; color: #1a1a2e; }
img { max-width: 100%; vertical-align: middle; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
table { border-collapse: collapse; width: 100%; }
input[type=number]::-webkit-inner-spin-button { opacity: 1; }

/* ---- Layout ---- */
.app-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ---- Top Bar ---- */
.topbar {
    display: flex;
    align-items: center;
    height: 52px;
    min-height: 52px;
    background: #1a1a2e;
    border-bottom: 1px solid #2d2d44;
    padding: 0 12px;
    gap: 8px;
    z-index: 100;
    flex-shrink: 0;
}
.topbar-left  { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.topbar-center { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; justify-content: center; }
.topbar-right  { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; }

.topbar-brand {
    display: flex; align-items: center; gap: 8px;
    color: #fff; font-size: 1.1rem; font-weight: 700;
    padding: 4px 8px; border-radius: 6px;
    transition: background .2s;
}
.topbar-brand:hover { background: rgba(255,255,255,.08); }
.brand-text { color: #e8e8ff; }
.map-title-display { color: #aaa; font-size: .9rem; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Alarm badges in topbar */
.alarm-badges { display: flex; align-items: center; gap: 6px; }
.alarm-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 12px;
    font-size: .8rem; font-weight: 700; cursor: default;
    min-width: 42px; justify-content: center;
}
.badge-critico { background: #e63946; color: #fff; }
.badge-alto    { background: #fd7e14; color: #fff; }
.badge-medio   { background: #ffc107; color: #000; }
.badge-basso   { background: #6c757d; color: #fff; }
.badge-info    { background: #17a2b8; color: #fff; }

.badge-critico.has-alarms { animation: blink-badge 1s infinite; }
.badge-alto.has-alarms    { animation: blink-badge 2s infinite; }

@keyframes blink-badge {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* Connection indicator */
.conn-indicator { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: #aaa; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: #28a745; }
.conn-dot.offline  { background: #dc3545; }
.conn-dot.unstable { background: #ffc107; animation: blink-badge 1s infinite; }

/* User info */
.user-info { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: #ccc; }

/* Role badges */
.role-badge { font-size: .7rem; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.role-admin      { background: #e63946; color: #fff; }
.role-supervisore{ background: #fd7e14; color: #fff; }
.role-operatore  { background: #457b9d; color: #fff; }
.role-readonly   { background: #6c757d; color: #fff; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 6px; font-size: .85rem; font-weight: 500;
    transition: background .15s, opacity .15s, border-color .15s;
    white-space: nowrap; cursor: pointer; border: 1px solid transparent;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary   { background: #457b9d; color: #fff; border-color: #457b9d; }
.btn-primary:hover { background: #1d3557; border-color: #1d3557; }
.btn-secondary { background: #6c757d; color: #fff; border-color: #6c757d; }
.btn-secondary:hover { background: #5a6268; }
.btn-danger    { background: #dc3545; color: #fff; border-color: #dc3545; }
.btn-danger:hover { background: #c82333; }
.btn-outline   { background: transparent; border-color: #555; color: #ccc; }
.btn-outline:hover { background: rgba(255,255,255,.07); }
.btn-outline-warning { background: transparent; border-color: #ffc107; color: #ffc107; }
.btn-outline-warning:hover, .btn-outline-warning.active { background: #ffc107; color: #000; }
.btn-outline-danger { background: transparent; border-color: #dc3545; color: #dc3545; }
.btn-outline-danger:hover { background: #dc3545; color: #fff; }
.btn-sm  { padding: 4px 10px; font-size: .8rem; }
.btn-xs  { padding: 2px 7px; font-size: .75rem; }
.btn-lg  { padding: 10px 22px; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

.btn-group { display: flex; gap: 4px; }

/* ---- Sidebars ---- */
.sidebar {
    width: 240px; min-width: 240px;
    background: #14213d;
    display: flex; flex-direction: column;
    transition: width .25s, min-width .25s;
    position: relative;
    overflow: hidden;
    z-index: 10;
    border-right: 1px solid #1f2f52;
}
.sidebar-right {
    border-right: none;
    border-left: 1px solid #1f2f52;
}
.sidebar.collapsed { width: 0; min-width: 0; overflow: visible; border-color: transparent; }
.sidebar.collapsed .sidebar-content { display: none; }

.sidebar-toggle {
    position: absolute; top: 50%;
    width: 20px; height: 44px;
    background: #1d3557; border: 1px solid #2d4a78;
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    z-index: 20; transform: translateY(-50%);
    transition: right .25s, left .25s;
    color: #aaa;
}
.sidebar-toggle:hover { background: #2a4a6b; color: #fff; }
.sidebar-toggle-left  { right: -10px; }
.sidebar-toggle-right { left: -10px; }

.sidebar-content { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 6px; flex-shrink: 0;
    border-bottom: 1px solid #1f2f52;
}
.sidebar-title { font-size: .85rem; font-weight: 700; color: #adc4de; text-transform: uppercase; letter-spacing: .06em; }
.sidebar-search, .element-search { padding: 6px 10px; flex-shrink: 0; }
.sidebar-search input, .element-search input {
    width: 100%; background: #0d1b2e; border: 1px solid #2d4a78; color: #e0e0f0;
    border-radius: 5px; padding: 5px 9px; font-size: .82rem; outline: none;
}
.sidebar-search input:focus, .element-search input:focus { border-color: #457b9d; }

/* Map Tree */
.map-tree { flex: 1; overflow-y: auto; padding: 4px 0; }
.tree-node { cursor: pointer; }
.tree-node-header {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 10px 5px 8px;
    border-radius: 4px; margin: 1px 4px;
    font-size: .84rem; color: #c0cfe0; transition: background .15s;
}
.tree-node-header:hover { background: rgba(69,123,157,.2); }
.tree-node-header.active { background: #1d3557; color: #fff; font-weight: 600; }
.tree-node-header.has-alarms   { color: #dc3545; }
.tree-node-header.has-tamper   { color: #fd7e14; }
.tree-node-header.has-guasto   { color: #ffc107; }
.tree-state-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tree-expand-btn { width: 16px; text-align: center; color: #6a8aaa; font-size: .7rem; flex-shrink: 0; }
.tree-children { padding-left: 14px; }
.tree-loading { color: #6a8aaa; font-size: .82rem; padding: 10px; }

/* Element count badge */
.element-count-badge {
    background: #1d3557; color: #adc4de;
    font-size: .72rem; padding: 2px 7px; border-radius: 9px;
}

/* Element filters */
.element-filters { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px 10px; flex-shrink: 0; }
.filter-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 10px; font-size: .75rem;
    background: #0d1b2e; border: 1px solid #2d4a78; color: #aaa;
    transition: all .15s; cursor: pointer;
}
.filter-btn.active, .filter-btn:hover { background: #1d3557; border-color: #457b9d; color: #fff; }

/* Element list */
.element-list { flex: 1; overflow-y: auto; padding: 4px 6px; }
.element-list-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px; margin-bottom: 2px;
    cursor: pointer; transition: background .15s; font-size: .83rem; color: #c0cfe0;
}
.element-list-item:hover { background: rgba(69,123,157,.2); }
.element-list-item.selected { background: #1d3557; }
.elem-state-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.elem-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elem-type  { font-size: .72rem; color: #6a8aaa; }

/* Palette */
.element-palette { border-top: 1px solid #1f2f52; padding: 8px; flex-shrink: 0; }
.palette-header { font-size: .78rem; font-weight: 700; color: #ffc107; margin-bottom: 6px; }
.palette-items { display: flex; flex-wrap: wrap; gap: 6px; }
.palette-item {
    width: 44px; height: 44px; background: #0d1b2e; border: 1px solid #2d4a78;
    border-radius: 6px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; cursor: grab; font-size: .6rem; color: #aaa; gap: 2px;
    transition: background .15s;
}
.palette-item:hover { background: #1d3557; border-color: #457b9d; }
.palette-item:active { cursor: grabbing; }
.palette-item svg, .palette-item img { width: 22px; height: 22px; }

/* ---- Map Area ---- */
.map-area {
    flex: 1; overflow: hidden; position: relative;
    background: #0a0f1a; display: flex; align-items: center; justify-content: center;
}

.map-canvas-wrapper {
    width: 100%; height: 100%; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
}
.map-canvas-wrapper.panning { cursor: grabbing; }
.map-canvas-wrapper.edit-mode { cursor: default; }

.map-canvas {
    position: relative; transform-origin: 0 0;
    will-change: transform; user-select: none;
    box-shadow: 0 0 60px rgba(0,0,0,.8);
}

.map-background {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; pointer-events: none;
    display: block;
}
.map-background-empty {
    background: repeating-linear-gradient(
        45deg, #0a1218, #0a1218 10px, #0c1520 10px, #0c1520 20px
    );
    display: flex; align-items: center; justify-content: center;
}
.bg-placeholder { text-align: center; color: #4a6080; }

.elements-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; overflow: visible;
}
.elements-layer {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* Map elements */
.map-element {
    position: absolute; pointer-events: all;
    overflow: visible; cursor: pointer;
}
.map-element.edit-draggable { cursor: move; }
.map-element:hover .elem-icon { filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); }
.map-element.selected .elem-icon { filter: drop-shadow(0 0 8px #fff) brightness(1.2); }

/* Icon rotation wrapper – only this div rotates */
.elem-icon-wrap {
    position: relative; transform-origin: center center;
    width: 100%; height: 100%;
}

.elem-icon {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.elem-icon img, .elem-icon svg { width: 100%; height: 100%; }

/* Alarm ring – pulsing border overlay on the icon, signals non-riposo states */
.alarm-ring {
    position: absolute; inset: -4px;
    border-radius: 50%; border: 3px solid transparent;
    pointer-events: none;
}
.alarm-ring.ring-allarme           { border-color: #dc3545; animation: ring-pulse  .8s infinite; }
.alarm-ring.ring-tamper            { border-color: #fd7e14; animation: ring-pulse 1.2s infinite; }
.alarm-ring.ring-guasto            { border-color: #ffc107; animation: ring-pulse 2.5s infinite; }
.alarm-ring.ring-bassa_batteria    { border-color: #fd7e14; animation: ring-pulse 3.0s infinite; }
.alarm-ring.ring-supervisione_persa{ border-color: #6c757d; }
.alarm-ring.ring-bypassata         { border-color: #007bff; }
.alarm-ring.ring-inibita           { border-color: #17a2b8; }
.alarm-ring.ring-test              { border-color: #6f42c1; }
.alarm-ring.ring-fuori_servizio    { border-color: #495057; }
.alarm-ring.ring-mascheramento     { border-color: #fd7e14; animation: ring-pulse 1.0s infinite; }
@keyframes ring-pulse {
    0%,100% { opacity:1; transform:scale(1);    }
    50%     { opacity:.2; transform:scale(1.2); }
}

/* State badge – direct child of .map-element, never rotates */
.state-badge {
    position: absolute; bottom: -4px; right: -4px;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid #0a0f1a; z-index: 3; pointer-events: none;
}
.state-badge.state-allarme           { background: #dc3545; }
.state-badge.state-tamper            { background: #fd7e14; }
.state-badge.state-guasto            { background: #ffc107; }
.state-badge.state-bassa_batteria    { background: #ffc107; }
.state-badge.state-supervisione_persa{ background: #6c757d; }
.state-badge.state-bypassata         { background: #007bff; }
.state-badge.state-inibita           { background: #17a2b8; }
.state-badge.state-test              { background: #6f42c1; }
.state-badge.state-fuori_servizio    { background: #343a40; }
.state-badge.state-mascheramento     { background: #fd7e14; }
.state-badge.state-riposo            { background: #28a745; }

/* Blink animations */
.state-badge.anim-blink-fast { animation: blink-fast 0.6s infinite; }
.state-badge.anim-blink-slow { animation: blink-slow 1.2s infinite; }
@keyframes blink-fast { 0%,100%{opacity:1} 50%{opacity:.1} }
@keyframes blink-slow { 0%,100%{opacity:1} 50%{opacity:.2} }

.elem-label {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 3px; white-space: nowrap;
    background: rgba(0,0,0,.7); color: #e0e0e0;
    font-size: .7rem; padding: 2px 6px; border-radius: 3px;
    pointer-events: none; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
    z-index: 2;
}

/* Edit handles – visible only when wrapper has .edit-mode */
.handle-resize, .handle-rotate { display: none; position: absolute; z-index: 10; }
.edit-mode .handle-resize,
.edit-mode .handle-rotate      { display: block; }

.handle-resize {
    bottom: -6px; right: -6px;
    width: 12px; height: 12px;
    background: #ffc107; border: 2px solid #0a0f1a; border-radius: 3px;
    cursor: se-resize;
}
.handle-rotate {
    top: -20px; left: 50%; transform: translateX(-50%);
    width: 12px; height: 12px;
    background: #4fc3f7; border: 2px solid #0a0f1a; border-radius: 50%;
    cursor: crosshair;
}
.handle-rotate::before {
    content: ''; position: absolute;
    top: 100%; left: 50%; transform: translateX(-50%);
    width: 2px; height: 8px; background: #4fc3f7;
}

/* Element command popup */
.elem-command-popup {
    position: fixed; z-index: 200;
    background: #14213d; border: 1px solid #2d4a78;
    border-radius: 8px; min-width: 190px; max-width: 260px;
    box-shadow: 0 6px 24px rgba(0,0,0,.6);
    overflow: hidden;
}
.cmd-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px 5px; border-bottom: 1px solid #1f2f52;
}
.cmd-elem-name { font-weight: 700; font-size: .85rem; color: #e0e8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-popup-close { background: none; border: none; color: #6a8aaa; font-size: 1.2rem; cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.cmd-popup-close:hover { color: #fff; }
.cmd-popup-meta { padding: 3px 12px 6px; font-size: .75rem; color: #6a8aaa; border-bottom: 1px solid #1f2f52; }
.cmd-elem-state { font-weight: 600; margin-right: 6px; }
.cmd-elem-centrale { font-style: italic; display: block; margin-top: 1px; }
.cmd-buttons { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cmd-btn {
    padding: 7px 12px; background: #1d3557; border: 1px solid #2d4a78;
    border-radius: 5px; color: #c0d8f0; font-size: .82rem;
    text-align: left; cursor: pointer; transition: background .12s;
}
.cmd-btn:hover { background: #2a5080; color: #fff; }
.cmd-no-cmds { padding: 8px 4px; color: #4a6080; font-size: .8rem; font-style: italic; }

/* Map info overlay */
.map-info-overlay {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; pointer-events: none; z-index: 5;
}
.map-name-chip {
    background: rgba(0,0,0,.65); color: #e0e8ff;
    padding: 3px 12px; border-radius: 12px; font-size: .82rem; font-weight: 600;
}
.map-desc-chip {
    background: rgba(0,0,0,.5); color: #aaa;
    padding: 3px 10px; border-radius: 12px; font-size: .75rem;
}

/* Zoom controls */
.zoom-controls {
    position: absolute; top: 12px; right: 12px;
    display: flex; align-items: center; gap: 4px;
    background: rgba(10,15,26,.85); border: 1px solid #2d4a78;
    border-radius: 8px; padding: 4px; z-index: 10;
}
.zoom-btn {
    width: 30px; height: 30px; border-radius: 5px; color: #ccc;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.zoom-btn:hover { background: #1d3557; color: #fff; }
.zoom-level { font-size: .78rem; color: #aaa; min-width: 42px; text-align: center; }

/* Edit toolbar */
.edit-toolbar {
    position: absolute; top: 12px; left: 12px;
    background: rgba(255,193,7,.1); border: 1px solid #ffc107;
    border-radius: 8px; padding: 6px 12px; z-index: 10;
    display: flex; align-items: center; gap: 10px;
}
.edit-toolbar-label { font-size: .78rem; color: #ffc107; font-weight: 700; text-transform: uppercase; }
.snap-toggle { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: #ccc; cursor: pointer; }

/* Map empty state */
.map-empty-state {
    text-align: center; color: #4a6080;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 40px;
}
.map-empty-state h2 { color: #6a8aaa; }
.map-empty-state p  { color: #4a6080; }
.empty-icon { opacity: .4; }

/* ---- Alarm Panel ---- */
.alarm-panel {
    flex-shrink: 0; background: #10182a; border-top: 2px solid #1d3557;
    display: flex; flex-direction: column; z-index: 50;
    height: 200px; min-height: 60px; max-height: 60vh;
    position: relative;
}
.alarm-panel.collapsed { height: 38px !important; }

.panel-resize-handle {
    height: 5px; background: transparent; cursor: ns-resize;
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
}
.panel-resize-handle:hover { background: #457b9d; }

.panel-header {
    display: flex; align-items: center;
    padding: 0 10px; height: 38px; min-height: 38px;
    border-bottom: 1px solid #1d3557; flex-shrink: 0;
}
.panel-tabs { display: flex; gap: 2px; flex: 1; }
.panel-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 14px; border-radius: 5px 5px 0 0;
    font-size: .82rem; color: #6a8aaa; background: transparent;
    border: 1px solid transparent; border-bottom: none; transition: all .15s;
}
.panel-tab.active { background: #1d3557; color: #fff; border-color: #2d4a78; }
.panel-tab:hover  { color: #adc4de; }
.tab-count { background: #2d4a78; color: #adc4de; font-size: .7rem; padding: 1px 6px; border-radius: 9px; min-width: 18px; text-align: center; }
.tab-count.has-critical { background: #e63946; color: #fff; }

.panel-controls { display: flex; align-items: center; gap: 4px; }
.panel-body { flex: 1; overflow: hidden; display: flex; }

.alarm-table-wrapper { flex: 1; overflow: auto; }
.alarm-table { min-width: 900px; font-size: .8rem; }
.alarm-table thead th {
    position: sticky; top: 0; background: #0d1b2e;
    padding: 6px 10px; text-align: left; color: #6a8aaa; font-weight: 600;
    border-bottom: 1px solid #1d3557; white-space: nowrap; z-index: 1;
}
.alarm-table tbody tr { border-bottom: 1px solid #0f1a2e; }
.alarm-table tbody tr:hover { background: rgba(69,123,157,.1); }
.alarm-table tbody td { padding: 5px 10px; color: #c0cfe0; vertical-align: middle; }

/* Alarm row states */
.alarm-row.criticita-critico { border-left: 3px solid #e63946; }
.alarm-row.criticita-alto    { border-left: 3px solid #fd7e14; }
.alarm-row.criticita-medio   { border-left: 3px solid #ffc107; }
.alarm-row.criticita-basso   { border-left: 3px solid #6c757d; }
.alarm-row.criticita-informativo { border-left: 3px solid #17a2b8; }
.alarm-row.stato-nuovo       { background: rgba(230,57,70,.06); }
.alarm-row.stato-preso_in_carico { background: rgba(253,126,20,.04); }

.alarm-badge-sm { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 9px; font-size: .72rem; font-weight: 700; }
.status-pill-sm { font-size: .72rem; color: #aaa; }

.no-alarms-row td { padding: 20px; color: #4a6080; }

/* Action buttons in alarm table */
.alarm-actions { display: flex; gap: 3px; }
.alarm-actions button { padding: 2px 7px; font-size: .72rem; border-radius: 4px; }

.col-ts      { min-width: 130px; }
.col-map     { min-width: 100px; max-width: 140px; }
.col-elem    { min-width: 120px; max-width: 160px; }
.col-type    { min-width: 100px; }
.col-crit    { min-width: 80px; }
.col-state   { min-width: 100px; }
.col-op      { min-width: 80px; }
.col-actions { min-width: 120px; }

/* ---- Status dots / pills ---- */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.status-dot.status-allarme           { background: #dc3545; }
.status-dot.status-tamper            { background: #fd7e14; }
.status-dot.status-guasto            { background: #ffc107; }
.status-dot.status-bassa_batteria    { background: #ffc107; }
.status-dot.status-supervisione_persa{ background: #6c757d; }
.status-dot.status-bypassata         { background: #007bff; }
.status-dot.status-inibita           { background: #17a2b8; }
.status-dot.status-riposo            { background: #28a745; }
.status-dot.status-test              { background: #6f42c1; }

.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 9px; font-size: .78rem; font-weight: 600; }
.status-pill.status-online  { background: #d4edda; color: #155724; }
.status-pill.status-offline { background: #f8d7da; color: #721c24; }
.status-pill.status-sconosciuto { background: #e2e3e5; color: #383d41; }
.status-pill.status-programmazione { background: #cce5ff; color: #004085; }

/* ---- Modals ---- */
.modal {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
}
.modal.open { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.modal-dialog {
    position: relative; background: #14213d; border: 1px solid #2d4a78;
    border-radius: 10px; width: 90%; max-height: 90vh;
    display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal-sm  { max-width: 380px; }
.modal-md  { max-width: 540px; }
.modal     .modal-dialog { max-width: 540px; }
.modal-lg  { max-width: 720px; }
.modal-xl  { max-width: 900px; }

.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #1f2f52; flex-shrink: 0;
}
.modal-header h3 { font-size: 1rem; color: #e0e8ff; font-weight: 700; }
.modal-close { color: #6a8aaa; font-size: 1.4rem; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.modal-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.modal-body { padding: 18px; overflow-y: auto; flex: 1; }
.modal-footer {
    display: flex; justify-content: flex-end; gap: 8px; align-items: center;
    padding: 12px 18px; border-top: 1px solid #1f2f52; flex-shrink: 0;
}

/* ---- Forms ---- */
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }
.form-group label { font-size: .82rem; color: #adc4de; font-weight: 600; }
.form-group input[type=text],
.form-group input[type=email],
.form-group input[type=password],
.form-group input[type=number],
.form-group input[type=date],
.form-group input[type=search],
.form-group textarea,
.form-group select {
    background: #0d1b2e; border: 1px solid #2d4a78; color: #e0e0f0;
    border-radius: 6px; padding: 7px 10px; outline: none; width: 100%;
    transition: border-color .15s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: #457b9d; }
.form-group select { appearance: auto; }
.form-group textarea { resize: vertical; min-height: 70px; }
.form-hint { font-size: .75rem; color: #6a8aaa; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 160px; }
.checkbox-label { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: .84rem; color: #c0cfe0; }

/* Input with icon */
.input-with-icon { position: relative; }
.input-with-icon .input-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #4a6080; pointer-events: none; }
.input-with-icon input { padding-left: 36px; }
.password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #4a6080; padding: 2px; }
.password-toggle:hover { color: #aaa; }

/* File upload */
.file-upload-area { display: flex; align-items: center; gap: 10px; }
.file-upload-area input[type=file] { display: none; }
.file-name { font-size: .8rem; color: #6a8aaa; }
.current-image-preview img { max-height: 80px; border-radius: 4px; margin-top: 6px; }

/* ---- Icon Picker ---- */
.icon-selected-preview {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; background: #0d1b2e;
    border: 1px solid #2d4a78; border-radius: 6px; min-height: 46px;
}
.icon-preview-thumb {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.icon-preview-thumb svg, .icon-preview-thumb img {
    width: 30px; height: 30px; object-fit: contain;
}
.icon-preview-name {
    flex: 1; font-size: .84rem; color: #c0cfe0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icon-picker-panel {
    background: #0a1220; border: 1px solid #2d4a78;
    border-radius: 8px; padding: 12px; margin-top: 8px; margin-bottom: 6px;
}
.icon-picker-toolbar {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.icon-search-input {
    flex: 1; background: #0d1b2e; border: 1px solid #2d4a78;
    border-radius: 4px; color: #e0e8ff; padding: 5px 8px;
    font-size: .85rem; outline: none; transition: border-color .15s;
}
.icon-search-input:focus { border-color: #457b9d; }
.icon-picker-close-btn { flex-shrink: 0; }
.icon-picker-grid {
    display: flex; flex-wrap: wrap; gap: 6px;
    max-height: 240px; overflow-y: auto; padding: 2px 1px;
    scrollbar-width: thin; scrollbar-color: #2d4a78 #0a1220;
}
.icon-picker-grid::-webkit-scrollbar { width: 6px; }
.icon-picker-grid::-webkit-scrollbar-track { background: #0a1220; }
.icon-picker-grid::-webkit-scrollbar-thumb { background: #2d4a78; border-radius: 3px; }
.icon-picker-item {
    width: 66px; min-height: 66px; background: #0d1b2e;
    border: 1.5px solid #1f2f52; border-radius: 6px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; cursor: pointer;
    padding: 6px 4px; transition: background .12s, border-color .12s;
    font-size: .62rem; color: #7a9cc0; text-align: center; line-height: 1.2;
}
.icon-picker-item:hover { background: #1d3557; border-color: #457b9d; color: #c0cfe0; }
.icon-picker-item.selected {
    background: #1a3060; border-color: #6ab0d8;
    box-shadow: 0 0 0 2px rgba(106,176,216,.3); color: #e0e8ff;
}
.icon-picker-thumb {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
}
.icon-picker-thumb svg, .icon-picker-thumb img {
    width: 28px; height: 28px; object-fit: contain;
}
.icon-picker-upload-section {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid #1f2f52;
}
.icon-upload-label {
    display: block; font-size: .78rem; color: #7a9cc0; margin-bottom: 6px;
}
.icon-upload-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.icon-upload-name {
    flex: 1; min-width: 130px; background: #0d1b2e; border: 1px solid #2d4a78;
    border-radius: 4px; color: #e0e8ff; padding: 5px 8px;
    font-size: .82rem; outline: none; transition: border-color .15s;
}
.icon-upload-name:focus { border-color: #457b9d; }
.icon-upload-status { font-size: .78rem; }
.icon-upload-status.ok    { color: #28a745; }
.icon-upload-status.error { color: #e63946; }

/* Tabs in modals */
.tab-bar { display: flex; gap: 2px; border-bottom: 1px solid #1f2f52; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn {
    padding: 6px 14px; border-radius: 5px 5px 0 0; font-size: .82rem;
    color: #6a8aaa; border: 1px solid transparent; border-bottom: none;
    transition: all .15s;
}
.tab-btn.active { background: #1d3557; color: #fff; border-color: #2d4a78; }
.tab-btn:hover  { color: #adc4de; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Tables (admin) ---- */
.admin-page { display: flex; flex-direction: column; width: 100%; height: 100%; overflow-y: auto; }
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid #1f2f52; background: #0d1b2e; flex-shrink: 0;
}
.page-header h1 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; color: #e0e8ff; }
.admin-content { padding: 20px 24px; flex: 1; overflow-y: auto; }

.data-table { width: 100%; }
.data-table thead th {
    background: #0d1b2e; color: #6a8aaa; font-weight: 700; font-size: .8rem;
    padding: 8px 12px; text-align: left; border-bottom: 2px solid #1d3557; white-space: nowrap;
}
.data-table tbody tr { border-bottom: 1px solid #0f1a2e; }
.data-table tbody tr:hover { background: rgba(69,123,157,.06); }
.data-table tbody td { padding: 8px 12px; font-size: .83rem; color: #c0cfe0; vertical-align: middle; }

/* Settings */
.settings-section { background: #0d1b2e; border: 1px solid #1d3557; border-radius: 8px; padding: 18px; margin-bottom: 20px; }
.settings-section-title { font-size: .9rem; font-weight: 700; color: #adc4de; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #1d3557; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* Filter panel */
.filter-panel { background: #0d1b2e; border-bottom: 1px solid #1d3557; padding: 12px 20px; flex-shrink: 0; }
.filter-form {}
.filter-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filter-row .form-group { margin-bottom: 0; flex: 1; min-width: 130px; max-width: 220px; }
.filter-actions { display: flex; gap: 6px; align-items: flex-end; flex-shrink: 0; }

/* Log table */
.log-page .admin-content { padding: 12px 20px; }
.table-wrapper { overflow-x: auto; }
.results-info { font-size: .82rem; color: #6a8aaa; margin-bottom: 10px; }

/* Pagination */
.pagination { display: flex; gap: 4px; justify-content: center; padding: 12px 0; flex-wrap: wrap; }
.page-btn {
    padding: 4px 10px; border-radius: 5px; background: #0d1b2e; border: 1px solid #2d4a78;
    color: #aaa; font-size: .8rem; min-width: 34px; transition: all .15s;
}
.page-btn.active, .page-btn:hover:not(:disabled) { background: #1d3557; color: #fff; border-color: #457b9d; }
.page-btn:disabled { opacity: .3; cursor: not-allowed; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    background: #14213d; border: 1px solid #2d4a78; border-radius: 7px;
    min-width: 160px; z-index: 200; box-shadow: 0 6px 20px rgba(0,0,0,.4); overflow: hidden;
}
.dropdown.open .dropdown-menu { display: block; }
.dropdown-item { display: block; padding: 9px 16px; color: #c0cfe0; font-size: .84rem; transition: background .15s; }
.dropdown-item:hover { background: #1d3557; color: #fff; }

/* Auth layout */
.auth-card {
    background: #14213d; border: 1px solid #2d4a78; border-radius: 12px;
    padding: 36px 32px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.auth-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.auth-logo-text { display: flex; flex-direction: column; }
.auth-title { font-size: 1.5rem; font-weight: 800; color: #e0e8ff; }
.auth-subtitle { font-size: .85rem; color: #6a8aaa; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-footer { margin-top: 20px; text-align: center; }

/* Alerts */
.alert { padding: 10px 14px; border-radius: 6px; font-size: .84rem; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.alert-danger { background: #2d0c0f; border: 1px solid #721c24; color: #f8c0c4; }
.alert-success{ background: #0c2d1a; border: 1px solid #155724; color: #c0f0d0; }
.alert-warning{ background: #2d220c; border: 1px solid #856404; color: #f8e0b0; }

/* Toast */
.toast-container {
    position: fixed; bottom: 12px; right: 12px;
    display: flex; flex-direction: column; gap: 8px; z-index: 9999;
}
.toast {
    padding: 10px 16px; border-radius: 7px; font-size: .84rem; color: #fff;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.4);
    animation: toast-in .25s ease-out;
}
.toast-success { background: #155724; border: 1px solid #1c7430; }
.toast-error   { background: #721c24; border: 1px solid #a71d2a; }
.toast-info    { background: #0c4a6e; border: 1px solid #075985; }
.toast-warning { background: #6c4a04; border: 1px solid #9a6a08; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Badge protocol */
.badge-protocol { font-size: .72rem; padding: 2px 7px; border-radius: 4px; background: #1d3557; color: #adc4de; }

/* Misc */
.text-center { text-align: center; }
.text-muted  { color: #6a8aaa; }
.text-right  { text-align: right; }
.nowrap      { white-space: nowrap; }
.comment-cell { max-width: 60px; text-align: center; cursor: help; }
.log-row.row-closed { opacity: .6; }

/* Spin animation for loading states */
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Scrollbars */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #2d4a78; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #457b9d; }

/* Edit mode visual indicator on body */
body.edit-mode-active .map-canvas-wrapper { outline: 2px dashed #ffc107; outline-offset: -2px; }

/* Responsive: hide some topbar elements on small screens */
@media (max-width: 768px) {
    .sidebar { width: 200px; min-width: 200px; }
    .topbar-center { display: none; }
    .user-info span:last-child { display: none; }
    .map-title-display { max-width: 120px; }
}

/* ============================================================
   ALARM MANAGEMENT v1.3 — enhanced visual indicators
   ============================================================ */

/* --- Enhanced glow-pulse ring for peripheral visibility --- */
.alarm-ring.ring-allarme {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220,53,69,.4);
    animation: glow-pulse-critico .7s ease-in-out infinite;
}
.alarm-ring.ring-tamper {
    border-color: #fd7e14;
    box-shadow: 0 0 0 2px rgba(253,126,20,.35);
    animation: glow-pulse-alto 1.1s ease-in-out infinite;
}
.alarm-ring.ring-mascheramento {
    border-color: #fd7e14;
    box-shadow: 0 0 0 2px rgba(253,126,20,.35);
    animation: glow-pulse-alto 0.9s ease-in-out infinite;
}
.alarm-ring.ring-guasto {
    border-color: #ffc107;
    box-shadow: 0 0 0 2px rgba(255,193,7,.25);
    animation: glow-pulse-medio 2.4s ease-in-out infinite;
}
.alarm-ring.ring-bassa_batteria {
    border-color: #fd7e14;
    box-shadow: 0 0 0 2px rgba(253,126,20,.2);
    animation: glow-pulse-medio 3.0s ease-in-out infinite;
}

@keyframes glow-pulse-critico {
    0%, 100% { opacity: 1; transform: scale(1);   box-shadow: 0 0 0 2px rgba(220,53,69,.4),  0 0 12px 4px rgba(220,53,69,.6); }
    50%       { opacity: .4; transform: scale(1.3); box-shadow: 0 0 0 6px rgba(220,53,69,.0),  0 0 24px 8px rgba(220,53,69,.0); }
}
@keyframes glow-pulse-alto {
    0%, 100% { opacity: 1; transform: scale(1);    box-shadow: 0 0 0 2px rgba(253,126,20,.35), 0 0 10px 4px rgba(253,126,20,.5); }
    50%       { opacity: .3; transform: scale(1.25); box-shadow: 0 0 0 5px rgba(253,126,20,.0), 0 0 20px 6px rgba(253,126,20,.0); }
}
@keyframes glow-pulse-medio {
    0%, 100% { opacity: 1; transform: scale(1);   box-shadow: 0 0 6px 2px rgba(255,193,7,.3); }
    50%       { opacity: .4; transform: scale(1.2); box-shadow: 0 0 0 0 rgba(255,193,7,.0); }
}

/* --- Unacknowledged badge on map element --- */
.unack-badge {
    position: absolute; top: -8px; left: -8px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #dc3545; color: #fff;
    font-size: .7rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #0a0f1a; z-index: 5;
    animation: unack-blink .5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes unack-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .3; transform: scale(1.2); }
}

/* --- Audio unlock banner --- */
.audio-unlock-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
    display: flex; align-items: center; gap: 12px;
    background: #7b1a1f; color: #fff;
    padding: 10px 18px; font-size: .85rem;
    border-bottom: 2px solid #e63946;
    box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.audio-unlock-banner span { flex: 1; }
.audio-unlock-dismiss {
    background: none; border: none; color: #ffb3b8;
    font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1;
}
.audio-unlock-dismiss:hover { color: #fff; }

/* --- Alarm table lifecycle states --- */
.alarm-row.alarm-unacked { animation: row-pulse-unack 2s ease-in-out infinite; }
@keyframes row-pulse-unack {
    0%, 100% { background: rgba(220,53,69,.08); }
    50%       { background: rgba(220,53,69,.18); }
}
.alarm-row.alarm-lifecycle-preso    { background: rgba(253,126,20,.05); }
.alarm-row.alarm-lifecycle-gestione { background: rgba(255,193,7,.05); }
.alarm-row.alarm-lifecycle-chiuso,
.alarm-row.alarm-lifecycle-ripristinato { opacity: .55; }

/* Lifecycle pills */
.lifecycle-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 9px; font-size: .72rem; font-weight: 600;
}
.lifecycle-nuovo        { background: rgba(220,53,69,.25); color: #ff6b6b; }
.lifecycle-preso_in_carico { background: rgba(253,126,20,.2); color: #fd7e14; }
.lifecycle-in_gestione  { background: rgba(255,193,7,.2); color: #ffc107; }
.lifecycle-chiuso       { background: rgba(40,167,69,.15); color: #28a745; }
.lifecycle-ripristinato { background: rgba(40,167,69,.15); color: #28a745; }

/* Escalation badge */
.escalation-badge {
    display: inline-block; margin-left: 5px;
    background: #dc3545; color: #fff;
    border-radius: 4px; padding: 1px 4px; font-size: .65rem;
    vertical-align: middle; font-weight: 700;
}

/* Flood warning row */
.flood-warning-row td { background: rgba(255,193,7,.12); padding: 6px 10px; }
.flood-warning-cell { color: #ffc107; font-size: .8rem; }
.flood-count { font-weight: 700; color: #e63946; }

/* --- Tab count indicators --- */
.tab-count.has-critical { background: #e63946; color: #fff; animation: unack-blink 1s infinite; }
.tab-count.has-unacked  { outline: 2px solid #dc3545; }

/* Alarm ACK button highlight */
.alarm-ack-btn { border-color: #ffc107 !important; color: #ffc107 !important; font-weight: 700; }
.alarm-ack-btn:hover { background: rgba(255,193,7,.15) !important; }

/* --- Tree alarm badge --- */
.tree-state-dot.tree-alarm-pulse { animation: tree-dot-pulse .8s ease-in-out infinite; }
@keyframes tree-dot-pulse {
    0%, 100% { box-shadow: 0 0 4px 2px rgba(220,53,69,.7); }
    50%       { box-shadow: 0 0 8px 4px rgba(220,53,69,.0); }
}

/* New column widths */
.col-esc { min-width: 90px; font-size: .72rem; color: #7a9cc0; }