/* =========================================================
   DMK Notifications – Unified Social UI (desktop + mobile)
   ========================================================= */

:root{
  --bm-bg:#FFFEFA;
  --bm-card:#FFFFFF;
  --bm-text:#111111;
  --bm-sub:#666666;
  --bm-border:#E7E7ED;
  --bm-purple:#7C3AED;          /* brand purple */
  --bm-purple-soft:#F3EDFF;     /* card bg (read) */
  --bm-yellow:#ffd877;          /* focus ring accent */
  --bm-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* Page */
.dmk-notif-page{
  max-width:960px;
  margin:24px auto;
  padding:0 16px 40px;
  background:var(--bm-bg);
  color:var(--bm-text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Title */
.dmk-notif-title{
  font-weight:800;
  font-size:28px;
  line-height:1.2;
  margin:0 0 14px 0;
}

/* Actions */
.dmk-notif-actionsbar{
  display:flex;
  align-items:center;
  gap:12px;
  margin:6px 0 14px;
}
.dmk-notif-markall{
  border:1px solid var(--bm-border);
  background:#fff;
  color:#111;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
.dmk-notif-markall:active{ transform:translateY(1px); }
.dmk-notif-loader{ font-size:13px; color:#999; }

/* List */
.dmk-notif-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
#dmkNotifList > li{ list-style:none; }

/* Card (keep FLEX, do not switch to grid) */
.dmk-notif-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid var(--bm-border);
  border-radius:14px;
  background:var(--bm-purple-soft);
  color:var(--bm-text);
  text-decoration:none;
  box-shadow:var(--bm-shadow);
  padding:14px 16px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dmk-notif-card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* Unread */
.dmk-notif-card.is-unread{
  background:var(--bm-purple);
  border-color:#6A31D0;
  color:#fff;
}
.dmk-notif-card.is-unread .dmk-notif-meta{ color:#E9D7FF; }
.dmk-notif-card.is-unread .dmk-notif-mark{
  border-color:#E9D7FF;
  background:transparent;
  color:#fff;
}

/* Icon (inline SVG) — no host box */
.dmk-notif-ico{
  flex:0 0 auto;
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  margin:0; padding:0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--bm-purple);                 /* default icon color on READ cards */
}
.dmk-notif-card.is-unread .dmk-notif-ico{ color:#fff; }

.dmk-notif-ico svg{ width:26px; height:26px; display:block; background:transparent !important; }
.dmk-notif-ico svg, .dmk-notif-ico svg *{ fill:currentColor !important; stroke:none !important; }

/* Body */
.dmk-notif-body{ flex:1 1 auto; min-width:0; }
.dmk-notif-text{
  margin:0 0 6px 0;
  font-weight:800;
  line-height:1.25;
  word-wrap:break-word;
}

/* Meta row: time (left) + button (right) */
.dmk-notif-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;   /* <-- key: left/right layout */
  gap:12px;
  font-size:12px;
  color:var(--bm-sub);
}

/* Explicit time span (optional hook) */
.dmk-notif-meta .dmk-notif-time{ flex:1 1 auto; }

/* Mark read button — compact pill */
.dmk-notif-mark{
  margin-left:auto;                /* ensures right edge */
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--bm-border);
  background:#fff;
  color:#111;
  font-weight:700;
  cursor:pointer;
  line-height:1.1;
  font-size:13px;
}
.dmk-notif-mark:active{ transform:translateY(1px); }

/* Load more */
.dmk-notif-more{
  display:block;
  margin:16px auto 0;
  padding:10px 16px;
  border-radius:10px;
  border:1px solid var(--bm-border);
  background:#fff;
  font-weight:700;
  cursor:pointer;
}
.dmk-notif-more:active{ transform:translateY(1px); }

/* Empty */
.dmk-notif-empty{
  padding:14px;
  border:1px dashed var(--bm-border);
  border-radius:12px;
  background:#fff;
  color:#666;
  text-align:center;
}

/* Nav badge */
.dmk-notif-badge{
  position:absolute;
  top:-2px; right:-2px;
  background:#ff4b33;
  color:#fff;
  font-size:11px; font-weight:700; line-height:1;
  padding:2px 6px;
  min-width:18px; text-align:center;
  border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  pointer-events:none;
}
.dmk-notif-badge[hidden]{ display:none !important; }

/* Focus for a11y when card is a DIV (no link) */
.dmk-notif-card[role="group"]:focus{
  outline:2px solid var(--bm-yellow);
  outline-offset:2px;
}

/* ---------- Mobile keeps the SAME layout ---------- */
@media (max-width:640px){
  .dmk-notif-meta{ gap:10px; }
  .dmk-notif-mark{ padding:6px 10px; font-size:12px; }
}


/* === Force button beside time (grid + flex meta) === */
.dmk-notif-page .dmk-notif-card{
  display:grid !important;                /* beat any flex reset */
  grid-template-columns:36px 1fr;         /* icon | content */
  grid-auto-rows:auto;
  column-gap:12px;
  align-items:start;
}

.dmk-notif-page .dmk-notif-ico{
  grid-column:1;
  grid-row:1 / span 2;
}

.dmk-notif-page .dmk-notif-body{
  grid-column:2;
  grid-row:1;
}

.dmk-notif-page .dmk-notif-meta{
  display:flex !important;
  align-items:center;
  justify-content:space-between;          /* time left, button right */
  gap:8px;
}

.dmk-notif-page .dmk-notif-mark{
  grid-column:2;
  grid-row:2;
  margin:0 0 0 auto;                      /* push to the right */
}

/* keep mobile consistent */
@media (max-width:640px){
  .dmk-notif-page .dmk-notif-meta{
    display:flex !important;
    justify-content:space-between !important;
  }
  .dmk-notif-page .dmk-notif-mark{
    margin-left:auto !important;
  }
}