/* overrides.css — safe UI polish + bubble + settings tabs */

/* bubble */
#node-bubble{
  position:fixed;
  z-index:3000;
  min-width:220px;
  padding:12px;
  border-radius:14px;
  border:2px solid rgba(255,214,140,.45);
  background: rgba(28,18,12,.88);
  box-shadow:0 18px 60px rgba(0,0,0,.65);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
}
#node-bubble.hidden{display:none;}
#node-bubble .ttl{font-weight:900; color:#ffd773; margin-bottom:8px;}
#node-bubble .row{display:flex; justify-content:space-between; gap:12px; font-size:12px; padding:3px 0;}
#node-bubble .row span{opacity:.72;}

/* settings tabs */
.set-wrap{margin-top:10px;}
.set-tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  margin: 10px 0 12px;
}
.set-tab{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  cursor:pointer;
}
.set-tab.active{
  border-color: rgba(255,214,140,.45);
  box-shadow: 0 0 0 2px rgba(255,214,140,.12) inset;
  color:#ffd773;
}
.set-panel.hidden{display:none;}
.set-box{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.set-box h3{margin:0 0 8px; color:#ffd773;}
.set-box ul{margin:0; padding-left:18px; opacity:.9;}
.set-note{margin-top:10px; font-size:12px; opacity:.75;}
.set-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px;}
.set-tab{padding:8px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.20);color:rgba(255,255,255,.9);cursor:pointer;}
.set-tab.active{border-color:rgba(255,190,90,.65);color:#ffe08a;
  box-shadow:0 0 0 2px rgba(255,190,90,.14) inset;}
.set-panel.hidden{display:none;}
.set-box{padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, rgba(255,120,40,.12), rgba(60,120,255,.10), rgba(0,0,0,.22));
  box-shadow:0 18px 60px rgba(0,0,0,.45);}
.inp{width:100%;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);color:rgba(255,255,255,.92);}
.btn{padding:9px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);color:rgba(255,255,255,.92);cursor:pointer;}
.btn.primary{border-color:rgba(255,180,80,.55);background:rgba(255,180,80,.16);}
.btn.danger{border-color:rgba(255,80,120,.55);background:rgba(255,80,120,.14);}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.colors-actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}
.colors-list{margin-top:10px;display:grid;gap:10px;}
.color-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16);}
.color-left{display:flex;align-items:center;gap:10px;}
.color-left .dot{width:14px;height:14px;border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.07),0 0 22px rgba(255,220,120,.18);}
.meta .nm{font-weight:800;}
.meta .slg{font-size:12px;opacity:.72;}
/* Colors tab: 2 columns / auto-fit */
.colors-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:10px;
}
.color-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* === Bugfix: Modal always on top (above bubble/splash) === */
.modal{ z-index: 5000 !important; }

/* === BUGFIX: disable bubble clicks when modal open === */
body.modal-open #node-bubble{
  pointer-events: none;
  opacity: .25;
}

/* === BUGFIX: modal scroll & clicks === */
body.modal-open{ overflow:hidden; }

/* modal content must scroll if it's tall */
.modal-card{
  max-height: 88vh;
  overflow-y: auto;
}

/* bubble should not steal clicks when a modal is open */
body.modal-open #node-bubble{
  pointer-events: none;
  opacity: .25;
}
/* FIX: Add/Edit modal must scroll (can go down) */
.modal {
  position: fixed;
  inset: 0;
  overflow: auto;          /* allow modal itself to scroll */
  -webkit-overflow-scrolling: touch;
}

.modal .modal-card {
  max-height: calc(100vh - 40px); /* fit screen */
  overflow: auto;                 /* scroll inside */
}

/* If some wrapper blocks scrolling */
.modal .modal-card * {
  max-width: 100%;
}
#toast{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:99999;
  max-width:min(560px, calc(100vw - 24px));
}

/* links +20% thickness */
.link{ stroke-width: 4.6 !important; }
.link:hover, .link.active{ stroke-width: 6.3 !important; }


/* === Settings: small square color pickers === */
.bg-color, .color-input{
  width:44px;
  height:34px;
  padding:0;
  border:0;
  background:transparent;
  border-radius:10px;
  cursor:pointer;
}
.bg-color::-webkit-color-swatch-wrapper,
.color-input::-webkit-color-swatch-wrapper{ padding:0; }
.bg-color::-webkit-color-swatch,
.color-input::-webkit-color-swatch{
  border:none;
  border-radius:10px;
}
/* Firefox */
.bg-color::-moz-color-swatch,
.color-input::-moz-color-swatch{
  border:none;
  border-radius:10px;
}

/* auto grid for many clans */
.color-list{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:10px;
}

/* =========================
   Mobile / phone layout
   (safe overrides, no class changes)
   ========================= */
@media (max-width: 640px){
  /* iOS: avoid auto-zoom on inputs */
  input, select, textarea{ font-size:16px; }

  #title-banner{
    left:10px; top:10px;
    right:10px;
    width:auto;
    padding:10px 12px;
    border-radius:14px;
  }
  #title-banner .title{ font-size:16px; }

  /* Controls as a bottom bar */
  #controls{
    left:50%;
    right:auto;
    bottom:10px;
    transform:translateX(-50%);
    gap:8px;
    opacity:1;
  }
  #controls button{
    height:46px;
    padding:0 12px;
    border-radius:14px;
  }

  /* Legend becomes full-width and shorter */
  #legend{
    left:10px;
    right:10px;
    width:auto;
    bottom:66px; /* above controls */
    max-height:22vh;
  }

  /* Panel becomes a bottom sheet (scrollable) */
  #panel{
    left:10px;
    right:10px;
    top:auto;
    bottom: calc(66px + 22vh + 12px);
    width:auto;
    max-height:42vh;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }

  /* If panel is too high on small screens, let it sit above legend */
  @supports (height: 1dvh){
    #panel{ max-height: 40dvh; }
    #legend{ max-height: 20dvh; }
  }

  /* Panel key/value becomes 1 column */
  .kv{ grid-template-columns: 1fr; }
  .v{ white-space: normal; }

  /* Modals: always 1 column on phone */
  .modal{ padding:10px; }
  .modal-card{ width: min(560px, 96vw); padding:12px; }
  .grid.two{ grid-template-columns: 1fr; }
  .actions{ position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.20)); }

  /* Bubble: keep inside screen */
  #node-bubble{ max-width: calc(100vw - 24px); }

  /* Toast: never overflow */
  #toast{ max-width: calc(100vw - 24px); }
}