/* ==============================================
   Shelly Planner – sötét téma (okosotthon.live)
   ============================================== */

#shelly-planner-wrap {
    --sp-bg:          #0d0d1a;
    --sp-card:        #13132b;
    --sp-card2:       #1a1a35;
    --sp-border:      rgba(79, 110, 247, 0.2);
    --sp-border-h:    rgba(79, 110, 247, 0.5);
    --sp-primary:     #4f6ef7;
    --sp-primary-h:   #6b87ff;
    --sp-accent:      #00d4aa;
    --sp-accent-h:    #00f0c3;
    --sp-danger:      #e74c3c;
    --sp-danger-h:    #ff6b5b;
    --sp-text:        #ffffff;
    --sp-text-muted:  #8888aa;
    --sp-radius:      10px;

    background:   var(--sp-bg);
    color:        var(--sp-text);
    font-family:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    border-radius: 16px;
    border:       1px solid var(--sp-border);
    overflow:     hidden;
    margin:       0 auto;
}

/* ------------------------------------------------------------------
   Toolbar
   ------------------------------------------------------------------ */
#sp-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             8px;
    padding:         14px 16px;
    background:      var(--sp-card);
    border-bottom:   1px solid var(--sp-border);
}

.sp-toolbar-left,
.sp-toolbar-right {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
}

/* Buttons */
.sp-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 14px;
    border-radius:   8px;
    border:          1px solid var(--sp-border);
    background:      transparent;
    color:           var(--sp-text-muted);
    font-size:       13px;
    font-weight:     500;
    font-family:     inherit;
    cursor:          pointer;
    transition:      all 0.2s;
    white-space:     nowrap;
}

.sp-btn:hover {
    border-color: var(--sp-border-h);
    color:        var(--sp-text);
    background:   rgba(79, 110, 247, 0.08);
}

.sp-btn-active,
.sp-btn-mode.sp-btn-active {
    background:   rgba(79, 110, 247, 0.2);
    border-color: var(--sp-primary);
    color:        var(--sp-primary);
}

.sp-btn-active svg,
.sp-btn-mode.sp-btn-active svg {
    stroke: var(--sp-primary);
}

.sp-btn-danger { color: var(--sp-danger); border-color: rgba(231, 76, 60, 0.3); }
.sp-btn-danger:hover { background: rgba(231, 76, 60, 0.12); border-color: var(--sp-danger); }
.sp-btn-danger.sp-btn-active { background: rgba(231, 76, 60, 0.2); border-color: var(--sp-danger); }

.sp-btn-accent  { color: var(--sp-accent); border-color: rgba(0, 212, 170, 0.4); }
.sp-btn-accent:hover { background: rgba(0, 212, 170, 0.12); border-color: var(--sp-accent); }

.sp-btn-ghost { color: var(--sp-text-muted); }

.sp-btn-primary {
    background:   var(--sp-primary);
    border-color: var(--sp-primary);
    color:        #fff;
}
.sp-btn-primary:hover {
    background:   var(--sp-primary-h);
    border-color: var(--sp-primary-h);
}

/* ------------------------------------------------------------------
   Mode bar
   ------------------------------------------------------------------ */
#sp-mode-bar {
    display:         flex;
    align-items:     center;
    gap:             16px;
    padding:         8px 16px;
    background:      rgba(79, 110, 247, 0.05);
    border-bottom:   1px solid var(--sp-border);
    font-size:       12px;
    color:           var(--sp-text-muted);
}

#sp-mode-label strong { color: var(--sp-primary); }
#sp-mode-hint  { color: var(--sp-text-muted); }

/* ------------------------------------------------------------------
   Main layout: canvas (left) + sidebar (right)
   ------------------------------------------------------------------ */
#sp-main {
    display: flex;
    height:  620px;
}

#sp-canvas-wrap {
    flex:       1 1 0;
    min-width:  0;
    overflow:   hidden;
    position:   relative;
    background: var(--sp-bg);
}

#sp-canvas-container {
    width:  100%;
    height: 100%;
}

/* Canvas cursor overrides set via JS */

/* ------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------ */
#sp-sidebar {
    width:         280px;
    flex-shrink:   0;
    display:       flex;
    flex-direction: column;
    background:    var(--sp-card);
    border-left:   1px solid var(--sp-border);
    overflow-y:    auto;
}

.sp-sidebar-title {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin:      0;
    padding:     16px;
    font-size:   14px;
    font-weight: 600;
    color:       var(--sp-text);
    border-bottom: 1px solid var(--sp-border);
}

.sp-sidebar-title svg { stroke: var(--sp-primary); flex-shrink: 0; }

#sp-room-list {
    flex:    1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-empty-hint {
    color:       var(--sp-text-muted);
    font-size:   13px;
    line-height: 1.6;
    text-align:  center;
    padding:     20px 8px;
    margin:      0;
}
.sp-empty-hint strong { color: var(--sp-primary); }

.sp-room-item {
    background:    var(--sp-card2);
    border:        1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    padding:       10px 12px;
}

.sp-room-item-name {
    font-size:   13px;
    font-weight: 600;
    color:       var(--sp-text);
    margin-bottom: 6px;
}

.sp-room-item-devices {
    display:   flex;
    flex-wrap: wrap;
    gap:       4px;
}

.sp-device-tag {
    display:       inline-block;
    font-size:     11px;
    color:         var(--sp-text-muted);
    background:    rgba(79, 110, 247, 0.08);
    border:        1px solid var(--sp-border);
    border-radius: 4px;
    padding:       2px 6px;
}

.sp-muted { color: var(--sp-text-muted); font-size: 12px; }

#sp-summary {
    padding:      12px 16px;
    border-top:   1px solid var(--sp-border);
    background:   var(--sp-card);
}

#sp-device-count {
    font-size:   13px;
    color:       var(--sp-accent);
    font-weight: 600;
}

/* ------------------------------------------------------------------
   Device selection modal
   ------------------------------------------------------------------ */
#sp-modal-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         9999;
}

#sp-modal {
    background:    var(--sp-card);
    border:        1px solid var(--sp-border-h);
    border-radius: 16px;
    width:         min(520px, 94vw);
    max-height:    80vh;
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    box-shadow:    0 24px 60px rgba(0, 0, 0, 0.5);
}

#sp-modal-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         18px 20px;
    border-bottom:   1px solid var(--sp-border);
    flex-shrink:     0;
}

#sp-modal-title {
    margin:      0;
    font-size:   17px;
    font-weight: 700;
    color:       var(--sp-text);
}

#sp-modal-close {
    background:   transparent;
    border:       none;
    color:        var(--sp-text-muted);
    font-size:    18px;
    cursor:       pointer;
    padding:      4px 8px;
    border-radius: 6px;
    transition:   all 0.2s;
    line-height:  1;
}
#sp-modal-close:hover { color: var(--sp-text); background: rgba(255,255,255,0.08); }

#sp-modal-body {
    padding:    16px;
    overflow-y: auto;
    display:    flex;
    flex-direction: column;
    gap: 10px;
}

/* Category buttons */
.sp-cat-btn {
    display:       flex;
    align-items:   center;
    gap:           14px;
    width:         100%;
    padding:       14px 16px;
    background:    var(--sp-card2);
    border:        1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    color:         var(--sp-text);
    font-family:   inherit;
    font-size:     14px;
    font-weight:   500;
    cursor:        pointer;
    transition:    all 0.2s;
    text-align:    left;
}
.sp-cat-btn:hover {
    background:   rgba(79, 110, 247, 0.1);
    border-color: var(--sp-primary);
    transform:    translateX(3px);
}

.sp-cat-icon { font-size: 22px; flex-shrink: 0; }
.sp-cat-name { flex: 1; }
.sp-cat-count { font-size: 12px; color: var(--sp-text-muted); }

/* Back button */
.sp-back-btn {
    background:    transparent;
    border:        1px solid var(--sp-border);
    color:         var(--sp-text-muted);
    font-family:   inherit;
    font-size:     13px;
    padding:       7px 12px;
    border-radius: 7px;
    cursor:        pointer;
    align-self:    flex-start;
    transition:    all 0.2s;
    margin-bottom: 4px;
}
.sp-back-btn:hover { color: var(--sp-text); border-color: var(--sp-border-h); }

/* Product grid */
.sp-product-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   8px;
}

.sp-prod-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    padding:        16px 12px;
    background:     var(--sp-card2);
    border:         1px solid var(--sp-border);
    border-radius:  var(--sp-radius);
    color:          var(--sp-text);
    font-family:    inherit;
    font-size:      13px;
    font-weight:    500;
    cursor:         pointer;
    transition:     all 0.2s;
    text-align:     center;
}
.sp-prod-btn:hover {
    background:   rgba(79, 110, 247, 0.1);
    border-color: var(--sp-primary);
    transform:    translateY(-2px);
}

.sp-prod-icon { font-size: 24px; }
.sp-prod-name { line-height: 1.3; }

/* ------------------------------------------------------------------
   Device context menu
   ------------------------------------------------------------------ */
#sp-device-menu {
    position:      fixed;
    z-index:       10000;
    background:    var(--sp-card);
    border:        1px solid var(--sp-border-h);
    border-radius: 10px;
    padding:       6px;
    min-width:     150px;
    box-shadow:    0 8px 30px rgba(0, 0, 0, 0.5);
    display:       flex;
    flex-direction: column;
    gap:            2px;
}

#sp-device-menu button {
    display:       flex;
    align-items:   center;
    gap:           8px;
    width:         100%;
    padding:       9px 12px;
    background:    transparent;
    border:        none;
    border-radius: 7px;
    color:         var(--sp-text);
    font-family:   inherit;
    font-size:     13px;
    cursor:        pointer;
    transition:    background 0.15s;
    text-align:    left;
}
#sp-device-menu button:hover { background: rgba(79, 110, 247, 0.12); }
#sp-dev-delete { color: var(--sp-danger); }
#sp-dev-delete:hover { background: rgba(231, 76, 60, 0.12) !important; }
#sp-dev-close { color: var(--sp-text-muted); }

/* ------------------------------------------------------------------
   Room rename modal
   ------------------------------------------------------------------ */
#sp-rename-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         9999;
}

#sp-rename-modal {
    background:    var(--sp-card);
    border:        1px solid var(--sp-border-h);
    border-radius: 14px;
    padding:       24px;
    width:         min(360px, 90vw);
    box-shadow:    0 20px 50px rgba(0,0,0,0.5);
}

#sp-rename-modal h3 {
    margin:      0 0 16px;
    font-size:   17px;
    font-weight: 700;
    color:       var(--sp-text);
}

#sp-rename-input {
    width:         100%;
    padding:       10px 14px;
    background:    var(--sp-card2);
    border:        1px solid var(--sp-border-h);
    border-radius: 8px;
    color:         var(--sp-text);
    font-family:   inherit;
    font-size:     15px;
    outline:       none;
    box-sizing:    border-box;
    margin-bottom: 16px;
    transition:    border-color 0.2s;
}
#sp-rename-input:focus { border-color: var(--sp-primary); }

.sp-rename-buttons {
    display: flex;
    gap:     10px;
    justify-content: flex-end;
}

/* ------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------ */
.sp-hidden { display: none !important; }

/* ------------------------------------------------------------------
   Responsive – mobilon egyoszlopos, sidebar alul
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
    #sp-main {
        flex-direction: column;
        height:         auto;
    }
    #sp-canvas-wrap {
        height: 380px;
    }
    #sp-sidebar {
        width:      100%;
        border-left: none;
        border-top: 1px solid var(--sp-border);
        max-height: 280px;
    }
    .sp-toolbar-left,
    .sp-toolbar-right {
        flex-wrap: wrap;
    }
    .sp-btn { font-size: 12px; padding: 7px 10px; }
    .sp-product-grid { grid-template-columns: 1fr; }
}