/* ============================================================

   /staff/assets/css/ilmoitukset.css

   Notifications inbox + navbar bell badge.

   ============================================================ */



.ilm-shell {

  --ilm-r: 10px;

  --ilm-ok:    var(--green-text, #15803d);

  --ilm-warn:  #ca8a04;

  --ilm-bad:   var(--red-text, #b91c1c);

  --ilm-info:  #2563eb;

  --ilm-muted: var(--text3, #888);

  padding: 1rem;

  max-width: 760px;

  margin: 0 auto;

}



/* ── Header ─────────────────────────────────────────────────── */

.ilm-head {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: .75rem;

  margin-bottom: 1rem;

  padding-bottom: .85rem;

  border-bottom: 1px solid var(--border);

}

.ilm-head-title h2 {

  margin: 0;

  font-size: 1.35rem;

  font-weight: 700;

  letter-spacing: -.02em;

  color: var(--text);

}

.ilm-head-sub {

  display: block;

  margin-top: .15rem;

  font-size: .78rem;

  color: var(--text3);

}



/* ── Tabs ───────────────────────────────────────────────────── */

.ilm-tabs {

  display: flex;

  gap: 0;

  margin-bottom: .85rem;

  border-bottom: 1px solid var(--border);

}

.ilm-tab {

  padding: .65rem 1.1rem;

  font-size: .9rem;

  font-weight: 500;

  color: var(--text2);

  background: none;

  border: 0;

  border-bottom: 2px solid transparent;

  cursor: pointer;

  font-family: inherit;

  transition: color .15s, border-color .15s;

}

.ilm-tab:hover { color: var(--text); }

.ilm-tab.active {

  color: var(--accent);

  border-bottom-color: var(--accent);

}

.ilm-tab-count {

  display: inline-block;

  margin-left: .35rem;

  padding: .05rem .45rem;

  background: var(--surface2);

  border-radius: 10px;

  font-size: .7rem;

  font-family: 'DM Mono', 'SF Mono', monospace;

  color: var(--text3);

}

.ilm-tab.active .ilm-tab-count {

  background: var(--accent-bg);

  color: var(--accent);

}



/* ── List ───────────────────────────────────────────────────── */

.ilm-list {

  display: flex;

  flex-direction: column;

  gap: .55rem;

}



.ilm-empty {

  text-align: center;

  padding: 3rem 1rem;

  color: var(--text3);

}

.ilm-empty-icon { font-size: 3rem; opacity: .4; margin-bottom: .5rem; }

.ilm-empty-text { font-size: 1rem; font-weight: 600; color: var(--text2); }

.ilm-empty-hint { font-size: .8rem; color: var(--text3); margin-top: .25rem; }



/* ── Notification card ─────────────────────────────────────── */

.ilm-card {

  display: flex;

  gap: .85rem;

  padding: .85rem 1rem;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--ilm-r);

  position: relative;

  transition: background .15s, border-color .15s;

}

.ilm-card:hover { background: var(--surface2); }

.ilm-card.unread {

  background: var(--accent-bg);

  border-color: var(--accent);

  border-left-width: 3px;

}

.ilm-card.unread::before {

  content: '';

  position: absolute;

  left: -2px; top: .85rem;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--accent);

}



.ilm-icon {

  flex-shrink: 0;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: var(--surface2);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.15rem;

}

.ilm-card.sev-info    .ilm-icon { background: rgba(37,99,235,.14);  color: var(--ilm-info); }

.ilm-card.sev-success .ilm-icon { background: rgba(34,197,94,.14);  color: var(--ilm-ok); }

.ilm-card.sev-warning .ilm-icon { background: rgba(202,138,4,.14);  color: var(--ilm-warn); }

.ilm-card.sev-error   .ilm-icon { background: rgba(220,38,38,.14);  color: var(--ilm-bad); }



.ilm-body {

  flex: 1;

  min-width: 0;

}

.ilm-title {

  font-size: .92rem;

  font-weight: 600;

  color: var(--text);

  margin-bottom: .2rem;

  line-height: 1.3;

}

.ilm-text {

  font-size: .82rem;

  color: var(--text2);

  line-height: 1.45;

  margin-bottom: .35rem;

  word-wrap: break-word;

}

.ilm-meta {

  display: flex;

  align-items: center;

  gap: .65rem;

  font-size: .72rem;

  color: var(--text3);

}

.ilm-time {

  font-family: 'DM Mono', 'SF Mono', monospace;

}

.ilm-actor {

  font-style: italic;

}



.ilm-actions {

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  gap: .3rem;

  justify-content: center;

}

.ilm-action-btn {

  display: inline-flex;

  align-items: center;

  gap: .25rem;

  padding: .35rem .65rem;

  font-size: .75rem;

  border-radius: 6px;

  border: 1px solid var(--border);

  background: var(--surface);

  color: var(--text);

  cursor: pointer;

  font-family: inherit;

  white-space: nowrap;

}

.ilm-action-btn:hover {

  background: var(--accent-bg);

  color: var(--accent);

  border-color: var(--accent);

}

.ilm-action-btn.primary {

  background: var(--accent);

  color: white;

  border-color: var(--accent);

}

.ilm-action-btn.primary:hover {

  filter: brightness(1.1);

}



.btn-mini {

  padding: .45rem .85rem;

  font-size: .8rem;

  border-radius: 7px;

  font-weight: 500;

  cursor: pointer;

  border: 1px solid var(--border);

  background: var(--surface2);

  color: var(--text);

  font-family: inherit;

  display: inline-flex;

  align-items: center;

  gap: .3rem;

}

.btn-mini:hover { background: var(--surface); }



/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 560px) {

  .ilm-card {

    flex-wrap: wrap;

    gap: .65rem;

  }

  .ilm-icon { width: 32px; height: 32px; font-size: 1rem; }

  .ilm-body { flex-basis: calc(100% - 50px); }

  .ilm-actions {

    flex-basis: 100%;

    flex-direction: row;

    justify-content: flex-end;

    margin-top: .25rem;

  }

}



/* ============================================================

   NAVBAR BELL — global, injected via JS

   ============================================================ */

.nav-bell {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

}

.nav-bell-badge {

  position: absolute;

  top: 0;

  right: 0;

  min-width: 18px;

  height: 18px;

  padding: 0 4px;

  background: #dc2626;

  color: white;

  border-radius: 9px;

  font-size: .65rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: 'DM Mono', 'SF Mono', monospace;

  border: 2px solid var(--bg, white);

  line-height: 1;

}

.nav-bell-badge[hidden] { display: none; }

.nav-bell.has-unread .nav-bell-ic {

  animation: nav-bell-ring 2.4s ease-in-out infinite;

  transform-origin: 50% 0;

}

@keyframes nav-bell-ring {

  0%, 50%, 100% { transform: rotate(0); }

  10%, 30%      { transform: rotate(14deg); }

  20%, 40%      { transform: rotate(-12deg); }

}



@media (max-width: 480px) {

  .nav-bell-badge {

    min-width: 14px;

    height: 14px;

    font-size: .55rem;

    padding: 0 3px;

  }

}



/* ── v2: archive + priority ────────────────────────────── */

.ilm-card.archived {

  opacity: .7;

  background: var(--surface2);

}

.ilm-prio {

  display: inline-flex;

  align-items: center;

  gap: .15rem;

  font-size: .68rem;

  font-weight: 700;

  color: var(--warn, #ca8a04);

  background: rgba(202,138,4,.12);

  padding: .05rem .35rem;

  border-radius: 4px;

  letter-spacing: .04em;

}



/* ============================================================

   v2.2 — Inbox switcher (system / messages)

   ============================================================ */

.ilm-inbox-tabs {

  display: flex;

  gap: .5rem;

  padding: .35rem;

  background: var(--surface2);

  border-radius: 10px;

  margin-bottom: 1rem;

}

.ilm-inbox-tab {

  flex: 1;

  padding: .55rem 1rem;

  background: transparent;

  border: 0;

  border-radius: 8px;

  cursor: pointer;

  font-family: inherit;

  font-size: .92rem;

  font-weight: 600;

  color: var(--text2);

  transition: all .15s;

}

.ilm-inbox-tab:hover { color: var(--text); }

.ilm-inbox-tab.active {

  background: var(--surface);

  color: var(--accent);

  box-shadow: 0 1px 3px rgba(0,0,0,.08);

}

.ilm-inbox-count {

  display: inline-block;

  margin-left: .4rem;

  padding: .05rem .45rem;

  background: var(--accent);

  color: white;

  border-radius: 10px;

  font-size: .7rem;

  font-family: 'DM Mono', monospace;

}

.ilm-inbox-tab:not(.active) .ilm-inbox-count {

  background: var(--text3);

}



/* ============================================================

   v2.2 — Direct messages (DM)

   ============================================================ */

.dm-layout {

  display: grid;

  grid-template-columns: 280px 1fr;

  gap: 1rem;

  min-height: 500px;

}

@media (max-width: 700px) {

  .dm-layout { grid-template-columns: 1fr; }

}



.dm-threads {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 10px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

}

.dm-threads-head {

  padding: .65rem .85rem;

  background: var(--surface2);

  border-bottom: 1px solid var(--border);

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.dm-threads-list {

  flex: 1;

  overflow-y: auto;

  max-height: 520px;

}

.dm-thread-item {

  display: flex;

  align-items: center;

  gap: .65rem;

  padding: .7rem .85rem;

  border-bottom: 1px solid var(--border);

  cursor: pointer;

  transition: background .12s;

}

.dm-thread-item:hover { background: var(--surface2); }

.dm-thread-item.active { background: var(--accent-bg); border-left: 3px solid var(--accent); }

.dm-thread-item.has-unread .dm-thread-name { font-weight: 700; }

.dm-thread-avatar {

  width: 36px; height: 36px;

  border-radius: 50%;

  background: var(--accent);

  color: white;

  display: flex; align-items: center; justify-content: center;

  font-weight: 700;

  flex-shrink: 0;

}

.dm-thread-info {

  flex: 1;

  min-width: 0;

}

.dm-thread-name {

  font-size: .88rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.dm-thread-preview {

  font-size: .75rem;

  color: var(--text3);

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  margin-top: .15rem;

}

.dm-thread-meta {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: .25rem;

  flex-shrink: 0;

}

.dm-thread-time {

  font-size: .68rem;

  color: var(--text3);

}

.dm-thread-unread {

  background: var(--accent);

  color: white;

  border-radius: 10px;

  padding: .05rem .45rem;

  font-size: .65rem;

  font-weight: 700;

}



.dm-thread-view {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 10px;

  display: flex;

  flex-direction: column;

  min-height: 500px;

}

.dm-placeholder {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 100%;

  color: var(--text3);

  padding: 2rem;

  text-align: center;

}

.dm-placeholder-icon {

  font-size: 3rem;

  margin-bottom: .5rem;

  opacity: .5;

}

.dm-thread-head {

  padding: .65rem .85rem;

  border-bottom: 1px solid var(--border);

  background: var(--surface2);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: .5rem;

}

.dm-thread-hide-btn {

  font-size: .85rem;

  padding: .25rem .55rem;

  opacity: .65;

}

.dm-thread-hide-btn:hover { opacity: 1; }



/* Per-message delete button (own messages only). Visible on hover. */

.dm-msg { position: relative; }

.dm-msg-del {

  position: absolute;

  top: 2px;

  right: 4px;

  background: transparent;

  border: none;

  cursor: pointer;

  font-size: .75rem;

  padding: 2px 5px;

  border-radius: 4px;

  opacity: 0;

  transition: opacity .15s, background .15s;

  color: inherit;

}

.dm-msg:hover .dm-msg-del { opacity: .55; }

.dm-msg-del:hover { opacity: 1 !important; background: rgba(0,0,0,.18); }

.dm-msg.mine .dm-msg-del:hover { background: rgba(255,255,255,.25); }

.dm-msg-scroll {

  flex: 1;

  padding: 1rem;

  overflow-y: auto;

  max-height: 400px;

  display: flex;

  flex-direction: column;

  gap: .65rem;

}

.dm-msg {

  max-width: 75%;

  padding: .55rem .75rem;

  border-radius: 12px;

}

.dm-msg.mine {

  align-self: flex-end;

  background: var(--accent);

  color: white;

}

.dm-msg.theirs {

  align-self: flex-start;

  background: var(--surface2);

}

.dm-msg-meta {

  display: flex;

  justify-content: space-between;

  gap: .65rem;

  font-size: .65rem;

  margin-bottom: .2rem;

  opacity: .8;

}

.dm-msg-body {

  font-size: .88rem;

  line-height: 1.45;

  word-wrap: break-word;

}



.dm-composer {

  padding: .65rem .85rem;

  border-top: 1px solid var(--border);

  display: flex;

  gap: .5rem;

  align-items: flex-end;

}

.dm-input {

  flex: 1;

  resize: vertical;

  font-family: inherit;

  font-size: .88rem;

  min-height: 38px;

}

.dm-icon-btn {

  background: transparent;

  border: 1px solid var(--border);

  border-radius: 6px;

  padding: .35rem .55rem;

  cursor: pointer;

  font-size: 1.1rem;

  line-height: 1;

}

.dm-icon-btn:hover { background: var(--surface2); }

.dm-icon-btn:disabled { opacity: .4; cursor: not-allowed; }



/* Attachment preview shown between message list and composer */

.dm-attach-preview {

  padding: .5rem .85rem;

  border-top: 1px solid var(--border);

  background: var(--surface2);

  display: flex;

  align-items: center;

  gap: .55rem;

}

.dm-attach-preview[hidden] { display: none; }

.dm-attach-thumb {

  max-width: 90px;

  max-height: 70px;

  border-radius: 6px;

  object-fit: cover;

  border: 1px solid var(--border);

}

.dm-attach-remove {

  background: var(--bad);

  color: white;

  border: none;

  border-radius: 50%;

  width: 22px;

  height: 22px;

  line-height: 1;

  cursor: pointer;

  font-size: .8rem;

  font-weight: 700;

}



/* Emoji picker — floats as a popover ABOVE the composer so it never

   shifts layout or hides behind the fold. Composer must be position:relative. */

.dm-emoji-picker {

  display: none;

  position: absolute;

  bottom: calc(100% + 6px);

  left: 8px;

  right: 8px;

  z-index: 50;

  padding: .5rem;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 10px;

  box-shadow: 0 6px 20px rgba(0,0,0,.18);

  flex-wrap: wrap;

  gap: .25rem;

  max-height: 200px;

  overflow-y: auto;

}

.dm-emoji-picker.show { display: flex; }

.dm-emoji-cell {

  background: transparent;

  border: none;

  cursor: pointer;

  font-size: 1.25rem;

  padding: .15rem .25rem;

  border-radius: 4px;

}

.dm-emoji-cell:hover { background: var(--surface); }



/* Inline image inside a message bubble */

.dm-msg-image {

  display: block;

  max-width: 100%;

  max-height: 240px;

  border-radius: 8px;

  margin-bottom: .35rem;

  cursor: zoom-in;

}

.dm-msg-img-link { text-decoration: none; }

.dm-msg.mine .dm-msg-image { background: rgba(0,0,0,.06); }

.dm-msg-body a { color: inherit; text-decoration: underline; word-break: break-all; }



.dm-empty {

  padding: 1.5rem;

  text-align: center;

  color: var(--text3);

  font-size: .85rem;

}



/* New DM modal user picker */

.dm-user-list {

  max-height: 320px;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: .35rem;

  margin-top: .5rem;

}

.dm-user-item {

  display: flex;

  align-items: center;

  gap: .65rem;

  padding: .55rem .75rem;

  border-radius: 6px;

  cursor: pointer;

  transition: background .12s;

}

.dm-user-item:hover { background: var(--surface2); }

.dm-user-avatar {

  width: 32px; height: 32px;

  border-radius: 50%;

  background: var(--accent);

  color: white;

  display: flex; align-items: center; justify-content: center;

  font-weight: 700;

  font-size: .85rem;

}

.dm-user-name {

  flex: 1;

  font-weight: 500;

  font-size: .9rem;

}

.dm-user-role {

  font-size: .7rem;

  color: var(--text3);

  text-transform: uppercase;

  letter-spacing: .04em;

}



/* ============================================================

   v2.2 — Modal (local, since this view doesn't load schedule.css)

   ============================================================ */

.sched-modal {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,.5);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1000;

  padding: 1rem;

}

.sched-modal-inner {

  background: var(--surface, #fff);

  border-radius: 12px;

  max-width: 500px;

  width: 100%;

  max-height: 90vh;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  box-shadow: 0 20px 50px rgba(0,0,0,.25);

  animation: modalIn .18s ease-out;

}

@keyframes modalIn {

  from { opacity: 0; transform: translateY(-10px) scale(.96); }

  to   { opacity: 1; transform: translateY(0) scale(1); }

}

.sched-modal-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: .85rem 1rem;

  border-bottom: 1px solid var(--border);

}

.sched-modal-head h3 {

  margin: 0;

  font-size: 1.05rem;

}

.sched-modal-close {

  background: none;

  border: 0;

  font-size: 1.2rem;

  cursor: pointer;

  color: var(--text2);

  padding: .25rem .5rem;

  border-radius: 6px;

}

.sched-modal-close:hover {

  background: var(--surface2);

  color: var(--text);

}

.sched-modal-body {

  padding: 1rem;

  overflow-y: auto;

}

.field {

  margin-bottom: .85rem;

}

.field-label {

  display: block;

  font-size: .8rem;

  font-weight: 600;

  margin-bottom: .25rem;

  color: var(--text2);

  text-transform: uppercase;

  letter-spacing: .04em;

}



/* ============================================================

   v2.3 — Avatars, emoji, edit/delete

   ============================================================ */



/* Avatar image (replaces letter when avatar_url exists) */

.dm-avatar-img {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  object-fit: cover;

  display: block;

}

.dm-avatar-letter {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  background: var(--accent);

  color: white;

  border-radius: 50%;

}

/* Reset existing dm-*-avatar (now wrappers) */

.dm-thread-avatar, .dm-user-avatar {

  width: 36px; height: 36px;

  overflow: hidden;

  border-radius: 50%;

  flex-shrink: 0;

  background: transparent;   /* let inner element handle bg */

}

.dm-thread-avatar { font-size: 0; }

.dm-user-avatar  { width: 32px; height: 32px; }



/* Re-tweak the message bubble layout to support avatar + bubble + menu */

.dm-msg {

  display: flex;

  align-items: flex-end;

  gap: .5rem;

  max-width: 85%;

  position: relative;

}

.dm-msg.mine   { align-self: flex-end; flex-direction: row-reverse; }

.dm-msg.theirs { align-self: flex-start; }

.dm-msg.mine .dm-msg-bubble {

  background: #f3f4f6;

  color: #1f2937;

  border: 1px solid #e5e7eb;

  border-radius: 14px 14px 4px 14px;

}

.dm-msg.theirs .dm-msg-bubble {

  background: #ffffff;

  color: #1f2937;

  border: 1px solid #e5e7eb;

  border-radius: 14px 14px 14px 4px;

}

.dm-msg.mine .dm-msg-meta,

.dm-msg.theirs .dm-msg-meta {

  color: #9ca3af;

}

.dm-msg.mine .dm-msg-sender,

.dm-msg.theirs .dm-msg-sender {

  color: #6b7280;

  font-weight: 600;

}

.dm-msg-bubble {

  padding: .5rem .75rem;

  min-width: 70px;

}

.dm-msg-avatar {

  width: 30px; height: 30px;

  border-radius: 50%;

  overflow: hidden;

  flex-shrink: 0;

}

.dm-msg.deleted .dm-msg-bubble {

  background: transparent;

  border: 1px dashed var(--border);

  color: var(--text3);

}

.dm-msg-deleted { color: var(--text3); font-style: italic; }



/* Message action menu */

.dm-msg-actions {

  position: relative;

  opacity: .5;

  transition: opacity .12s;

  align-self: center;

}

.dm-msg:hover .dm-msg-actions { opacity: 1; }

.dm-msg-act-btn {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 50%;

  width: 28px; height: 28px;

  cursor: pointer;

  font-size: 1.1rem;

  line-height: 1;

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text2);

  font-weight: 700;

}

.dm-msg-act-btn:hover { background: var(--surface2); }



.dm-msg-menu {

  position: absolute;

  top: 100%;

  margin-top: .25rem;

  right: 0;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,.15);

  z-index: 50;

  min-width: 140px;

  padding: .25rem;

  display: flex;

  flex-direction: column;

}

.dm-msg.mine .dm-msg-menu { right: auto; left: 0; }

.dm-msg-menu button {

  background: transparent;

  border: 0;

  padding: .5rem .75rem;

  text-align: left;

  cursor: pointer;

  font-family: inherit;

  font-size: .85rem;

  border-radius: 4px;

  color: var(--text);

}

.dm-msg-menu button:hover {

  background: var(--surface2);

}



/* (Removed unused legacy emoji-picker scaffolding — collided with the

   actually-wired .dm-emoji-picker rules above. The active picker styles

   live at the top of the file under the "v2.2 — Direct messages" block.) */

.dm-composer { position: relative; }



/* Keep msg-menu hide rule (still used elsewhere). */

.dm-msg-menu[hidden] { display: none !important; }



/* Clickable name + avatar -> profile */

.dm-msg-sender-link {

  color: inherit;

  text-decoration: none;

  font-weight: 600;

}

.dm-msg-sender-link:hover { text-decoration: underline; }



a.dm-msg-avatar {

  display: block;

  text-decoration: none;

  border-radius: 50%;

}

a.dm-msg-avatar:hover { opacity: .85; }



.dm-thread-head-link {

  display: flex;

  align-items: center;

  gap: .55rem;

  color: inherit;

  text-decoration: none;

}

.dm-thread-head-link:hover { color: var(--accent); }

.dm-thread-head-avatar {

  width: 32px; height: 32px;

  border-radius: 50%;

  overflow: hidden;

}



/* ============================================================

   Bulk-select toolbar + selection cards (v2.5+)

   ============================================================ */

.ilm-bulk-bar {

  display: none;

  align-items: center;

  gap: .5rem;

  padding: .55rem .75rem;

  background: var(--surface2, #f4f4f5);

  border: 1px solid var(--border, #e5e7eb);

  border-radius: 10px;

  margin-bottom: .65rem;

  flex-wrap: wrap;

}

.ilm-bulk-bar.show { display: flex; }



.ilm-bulk-act {

  appearance: none;

  -webkit-appearance: none;

  background: var(--surface, #fff);

  color: var(--text, #18181b);

  border: 1px solid var(--border, #e5e7eb);

  border-radius: 8px;

  padding: .4rem .75rem;

  font-size: .82rem;

  font-weight: 600;

  cursor: pointer;

  font-family: inherit;

  transition: all .12s;

}

.ilm-bulk-act:hover:not(:disabled) {

  background: var(--surface2, #f4f4f5);

  border-color: var(--accent, #16a34a);

  color: var(--accent, #16a34a);

}

.ilm-bulk-act:disabled { opacity: .4; cursor: not-allowed; }

.ilm-bulk-act.danger { color: #dc2626; }

.ilm-bulk-act.danger:hover:not(:disabled) {

  background: #fee2e2;

  border-color: #dc2626;

  color: #b91c1c;

}



.ilm-bulk-selall {

  display: inline-flex;

  align-items: center;

  gap: .45rem;

  font-size: .82rem;

  font-weight: 600;

  color: var(--text, #18181b);

  cursor: pointer;

  user-select: none;

}

.ilm-bulk-selall input[type="checkbox"] {

  width: 1.1rem;

  height: 1.1rem;

  cursor: pointer;

}



/* Per-card checkbox */

.ilm-card-select {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 .5rem;

  cursor: pointer;

}

.ilm-card-select input[type="checkbox"] {

  width: 1.15rem;

  height: 1.15rem;

  cursor: pointer;

  accent-color: var(--accent, #16a34a);

}



/* Highlight when selected */

.ilm-card.is-selected {

  background: color-mix(in srgb, var(--accent, #16a34a) 8%, var(--surface, #fff));

  border-color: var(--accent, #16a34a);

}

[data-theme="dark"] .ilm-card.is-selected {

  background: color-mix(in srgb, var(--accent, #16a34a) 18%, var(--surface2, #1f1f23));

}



/* Single-card delete button (danger variant) */

.ilm-action-btn.danger {

  color: #dc2626;

}

.ilm-action-btn.danger:hover {

  background: #fee2e2;

  border-color: #dc2626;

}

[data-theme="dark"] .ilm-action-btn.danger:hover {

  background: rgba(220, 38, 38, .15);

}



/* Thread head delete button */

.dm-thread-head { position: relative; }

.dm-thread-delete-btn {

  appearance: none;

  -webkit-appearance: none;

  background: transparent;

  border: 1px solid var(--border, #e5e7eb);

  border-radius: 6px;

  padding: .3rem .55rem;

  font-size: .85rem;

  cursor: pointer;

  color: #6b7280;

  margin-left: auto;

  transition: all .12s;

}

.dm-thread-delete-btn:hover {

  background: #fee2e2;

  border-color: #dc2626;

  color: #dc2626;

}

[data-theme="dark"] .dm-thread-delete-btn {

  border-color: rgba(255,255,255,.1);

  color: var(--text2, #a1a1aa);

}

[data-theme="dark"] .dm-thread-delete-btn:hover {

  background: rgba(220, 38, 38, .15);

  color: #f87171;

}



/* Bulk bar on dark theme */

[data-theme="dark"] .ilm-bulk-bar {

  background: rgba(255,255,255,.04);

  border-color: rgba(255,255,255,.1);

}

[data-theme="dark"] .ilm-bulk-act {

  background: rgba(255,255,255,.04);

  border-color: rgba(255,255,255,.1);

}