.link-title {
  display: inline-block;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.editable {
  cursor: text;
  border: 1px dashed transparent;
  padding: 4px 6px;
  border-radius: 4px;
  transition: border-color 0.2s, background-color 0.2s;
  min-height: 1.5em;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editable:hover {
  border-color: #ccc;
}

.editable:focus {
  outline: none;
  border-color: #4f46e5; /* Indigo */
  background-color: #f0f4ff;
}

.link-title.editable {
  display: inline-block;
  min-width: 100px;
}

.placeholder-title {
  color: #aaa;
  font-style: italic;
}

.editable.saving {
  background-color: #f8f9fa;
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.2s ease;
}


/* Add to your CSS file */
.shake {
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0% { transform: translateX(0px); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0px); }
}  /* this is for the bottom bar when in mobile for the dashboard  */
@media (max-width: 768px) {
  .custom-theme-modal .modal-dialog-scrollable {
    max-height: calc(100vh - 70px); /* Leaves space for bottom nav */
    margin-bottom: 0;
  }

  .custom-theme-modal .modal-content {
    max-height: 100%;
    overflow-y: auto;
    border-radius: 1rem 1rem 0 0;
  }
}
@supports(padding-bottom: env(safe-area-inset-bottom)) {
  .custom-theme-modal .modal-dialog-scrollable {
    padding-bottom: env(safe-area-inset-bottom);
  }
}


@media (max-width: 768px) {
  #toast {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 90vw;
    text-align: center;
  }
}
.left-nav ul li a,
#leftMenuOffcanvas ul li a {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
}
/* DESKTOP left card: add class="left-nav" to that card wrapper (see below) */
.left-nav ul,
.left-nav ul li {
  list-style-type: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}
.left-nav ul li::marker { content: none !important; }
.left-nav ul li::before { content: none !important; }

/* OFFCANVAS menu */
#leftMenuOffcanvas ul,
#leftMenuOffcanvas ul li {
  list-style-type: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}
#leftMenuOffcanvas ul li::marker { content: none !important; }
#leftMenuOffcanvas ul li::before { content: none !important; }
.left-nav ul li a,
#leftMenuOffcanvas ul li a {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  text-decoration: none;
}
/* Add a small left gutter so text isn't cut off */
.left-nav ul {
  padding-left: 12px !important;   /* desktop left panel */
}

#leftMenuOffcanvas ul {
  padding-left: 14px !important;   /* offcanvas menu */
}

/* Give each row a little internal padding so icon+text breathe */
.left-nav ul li a,
#leftMenuOffcanvas ul li a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 4px 8px;                /* <-- adds left/right space */
  border-radius: 6px;               /* (optional) nicer hit area */
  text-decoration: none;
}

/* If any list item itself renders too tight, add a bit too */
.left-nav ul li,
#leftMenuOffcanvas ul li {
  padding-left: 2px;
}
.left-nav ul li a i,
#leftMenuOffcanvas ul li a i {
  font-size: 1.1rem;   /* consistent size */
  min-width: 20px;     /* reserves space so text never overlaps */
  text-align: center;  /* keeps them aligned */
}
#leftMenuOffcanvas .offcanvas-title {
  margin-top: 10px;    /* adjust until it looks right */
  margin-bottom: 12px; /* spacing before links start */
}
#leftMenuOffcanvas ul {
  margin-top: 5px;     /* space under Dashboard */
}
#leftMenuOffcanvas ul li a {
  display: flex;
  align-items: center;   /* vertically center icon + text */
  padding: 12px 12px;     /* give breathing room */
  line-height: 1.5;      /* ensures full icon height fits */
}

#leftMenuOffcanvas ul li a i {
  font-size: 2.3rem;
  margin-right: 8px;     /* spacing between icon and text */
  line-height: 1;        /* prevents clipping */
  width: 20px;           /* reserves space so text doesn't overlap */
  text-align: center;
}
/* Desktop left column links */
.left-nav ul li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;         /* space between icon and text */
  padding-left: 16px;  /* shift whole link right */
}

/* Icons inside left column */
.left-nav ul li a i {
  min-width: 20px;     /* reserve space */
  text-align: center;
}
/* Push the left nav card & video card inward */
.left-nav,
.left-nav + .card {
  margin-left: 8px;   /* adjust until perfectly aligned */
}
.col-lg-2 .left-nav,
.col-lg-2 .left-nav + .card {
  margin-left: auto;
  margin-right: auto;
  width: 100%;   /* adjust until it looks visually centered */
}

#addLinkModal input,
#addLinkModal select,
#addLinkModal textarea { font-size: 16px !important; }
/* Dashboard-only form fields – prevent iOS zoom */
#dashboard-wrapper input,
#dashboard-wrapper select,
#dashboard-wrapper textarea {
  font-size: 16px !important;
}
<style>
  /* Dashboard: keep link icon + thumbnail small and aligned */

  /* small avatar slot for either platform icon or thumbnail */
  #dashboard-wrapper img.link-thumb,
  #dashboard-wrapper i.platform-icon {
    width: 32px;
    height: 32px;
  }

  /* thumbnail image style */
  #dashboard-wrapper img.link-thumb {
    max-width: none;          /* ignore any img-fluid rules */
    object-fit: cover;
    border-radius: 8px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    border: 2px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.16);
  }

  /* platform icons sit in the same “slot” as the thumbnail */
  #dashboard-wrapper i.platform-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-right: 6px;
    vertical-align: middle;
  }

  /* keep drag handle, icon/thumb, and title on the same line */
  #dashboard-wrapper .card[data-id] .drag-handle,
  #dashboard-wrapper .card[data-id] .platform-icon,
  #dashboard-wrapper .card[data-id] .link-thumb,
  #dashboard-wrapper .card[data-id] .link-title {
    vertical-align: middle;
  }
</style>