/* ═══════════════════════════════════════════════════
   IMPORTANT DATES — v2
   Append to styles--components.css
   ═══════════════════════════════════════════════════ */

/* Filter bars */
.idate-fbar {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 14px 6px; border-bottom: 1px solid var(--border);
  background: #f8f9fc; flex-wrap: wrap;
}
.idate-fbar-people { background: #f2f3f8; }
.idate-flabel {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-light);
  min-width: 38px; flex-shrink: 0;
}
.idate-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600;
  cursor: pointer; border: 1.5px solid transparent;
  transition: all 0.12s; white-space: nowrap; user-select: none;
}
.idate-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* Type chips */
.c-all         { background: #eef0f6; color: var(--navy); }
.c-all.on      { background: #e0e6f8; border-color: var(--navy); }
.c-bday        { background: rgba(219,149,35,0.10); color: #9a6800; }
.c-bday.on     { border-color: #9a6800; background: rgba(219,149,35,0.17); }
.c-since       { background: rgba(0,36,127,0.07); color: var(--navy); }
.c-since.on    { border-color: var(--navy); background: rgba(0,36,127,0.13); }
.c-anniv       { background: rgba(160,70,150,0.08); color: #8b3a8b; }
.c-anniv.on    { border-color: #8b3a8b; background: rgba(160,70,150,0.15); }
.c-mile        { background: rgba(46,125,79,0.08); color: var(--green); }
.c-mile.on     { border-color: var(--green); background: rgba(46,125,79,0.14); }

/* People chips */
.p-all         { background: #eef0f6; color: var(--navy); }
.p-all.on      { background: #e0e6f8; border-color: var(--navy); }
.p-client      { background: rgba(49,133,252,0.08); color: #1a5fa8; }
.p-client.on   { border-color: #1a5fa8; background: rgba(49,133,252,0.15); }
.p-staff       { background: rgba(0,36,127,0.07); color: var(--navy); }
.p-staff.on    { border-color: var(--navy); background: rgba(0,36,127,0.13); }
.p-prospect    { background: rgba(219,149,35,0.10); color: #8a5a00; }
.p-prospect.on { border-color: #8a5a00; background: rgba(219,149,35,0.17); }
.p-other       { background: rgba(130,130,150,0.10); color: #5a5a72; }
.p-other.on    { border-color: #5a5a72; background: rgba(130,130,150,0.18); }

/* List */
.idate-list { overflow-y: auto; max-height: 310px; }
.idate-list::-webkit-scrollbar { width: 4px; }
.idate-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Group headers */
.idate-grp-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 4px; position: sticky; top: 0;
  background: white; z-index: 2;
}
.idate-grp-hdr::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.idate-grp-lbl {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-light); white-space: nowrap;
}
.idate-grp-today { color: var(--gold); }

/* Rows */
.idate-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid var(--border);
  position: relative; transition: background 0.1s;
}
.idate-row:last-child { border-bottom: none; }
.idate-row:hover { background: #f5f7fc; }

/* Badge overrides (add anniv, rename milestone) */
.badge-anniv    { background: rgba(160,70,150,0.10); color: #8b3a8b; }
.badge-milestone { background: rgba(46,125,79,0.10); color: var(--green); }

/* When pills */
.idate-when { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 10px; flex-shrink: 0; white-space: nowrap; }
.idate-today { background: rgba(219,149,35,0.14); color: #8a5a00; }
.idate-soon  { background: #eef0f8; color: var(--navy); }

/* ⋮ button */
.idate-mbtn {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: white; cursor: pointer;
  color: var(--text-light); transition: all 0.13s;
}
.idate-mbtn:hover, .idate-mbtn.on { border-color: var(--blue); color: var(--blue); background: #f0f5ff; }

/* Popover */
.idate-pop {
  display: none; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: white; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,36,127,0.13); padding: 5px 6px;
  z-index: 100; flex-direction: column; min-width: 118px;
}
.idate-pop.on { display: flex; }
.idate-pbtn {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px;
  cursor: pointer; border: none; background: transparent;
  font-size: 11.5px; font-weight: 600; font-family: inherit;
  color: var(--text-dark); transition: background 0.1s; text-align: left; width: 100%;
}
.idate-pbtn:hover       { background: #f0f3fa; }
.idate-pbtn-call        { color: var(--green); }
.idate-pbtn-sms         { color: #7b3fc4; }
.idate-pbtn-email       { color: var(--navy); }
.idate-pdiv             { height: 1px; background: var(--border); margin: 2px 0; }

/* Footer */
.idate-footer {
  padding: 9px 16px; border-top: 1px solid var(--border);
  background: #f8f9fc; display: flex; align-items: center; justify-content: space-between;
}
.idate-foot-ct { font-size: 10.5px; color: var(--text-light); }
.idate-foot-ct strong { color: var(--text-mid); font-weight: 600; }
.idate-view-all {
  font-size: 11px; font-weight: 600; color: var(--blue);
  background: none; border: none; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 3px;
}

/* ── MODALS ── */
.idate-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(10,20,60,0.40); z-index: 9000;
  align-items: center; justify-content: center; padding: 20px;
}
.idate-overlay.on { display: flex; }
.idate-modal {
  background: white; border-radius: 14px; width: 100%; max-width: 400px;
  box-shadow: 0 8px 40px rgba(0,36,127,0.20);
  display: flex; flex-direction: column; overflow: hidden;
}
.idate-mhdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 12px; border-bottom: 1px solid var(--border);
}
.idate-micon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.idate-micon-call  { background: rgba(46,125,79,0.12);  color: var(--green); }
.idate-micon-email { background: rgba(0,36,127,0.10);   color: var(--navy); }
.idate-micon-sms   { background: rgba(123,63,196,0.10); color: #7b3fc4; }
.idate-mtitle-blk  { flex: 1; min-width: 0; }
.idate-mtitle      { font-size: 13.5px; font-weight: 700; color: var(--text-dark); }
.idate-msub        { font-size: 11px; color: var(--text-light); margin-top: 1px; }
.idate-mclose {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: white; cursor: pointer;
  color: var(--text-light); flex-shrink: 0;
}
.idate-mclose:hover { border-color: #bbb; color: var(--text-dark); }
.idate-mbody { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }

/* Form fields */
.idate-frow     { display: flex; flex-direction: column; gap: 4px; }
.idate-flbl     { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-light); }
.idate-finput, .idate-ftarea {
  font-family: inherit; font-size: 12.5px; color: var(--text-dark);
  background: #f8f9fc; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 8px 11px; outline: none; width: 100%; transition: border-color 0.12s;
}
.idate-finput:focus, .idate-ftarea:focus { border-color: var(--blue); background: white; }
.idate-ftarea   { resize: vertical; min-height: 90px; line-height: 1.5; }
.idate-sig-note {
  font-size: 10px; color: var(--text-light); margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}

/* AI suggestion */
.idate-ai-box {
  background: rgba(49,133,252,0.06); border: 1px solid rgba(49,133,252,0.2);
  border-radius: 8px; padding: 9px 11px; display: flex; gap: 8px;
}
.idate-ai-icon  { color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.idate-ai-body  { flex: 1; }
.idate-ai-lbl   { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--blue); margin-bottom: 3px; }
.idate-ai-txt   { font-size: 11.5px; color: var(--text-mid); font-style: italic; line-height: 1.4; }
.idate-ai-use {
  font-size: 10.5px; font-weight: 600; color: var(--blue); background: none; border: none;
  cursor: pointer; font-family: inherit; margin-top: 5px;
  display: inline-flex; align-items: center; gap: 3px; padding: 0;
}
.idate-ai-use:hover { color: var(--navy); }

/* Call block */
.idate-call-block { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0 2px; }
.idate-call-av    { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: white; }
.idate-call-name  { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.idate-call-num   { font-size: 13px; color: var(--text-light); }
.idate-call-hint  { font-size: 10.5px; color: var(--text-light); background: #f4f5f8; border-radius: 6px; padding: 5px 12px; margin-top: 4px; text-align: center; }

/* Modal footer */
.idate-mfoot     { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 14px; border-top: 1px solid var(--border); }
.idate-mfoot-row { display: flex; gap: 8px; }
.idate-mbtn2 {
  padding: 9px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all 0.13s;
  border: 1.5px solid var(--border); background: white; color: var(--text-mid);
}
.idate-mbtn2:hover             { border-color: #bbb; color: var(--text-dark); }
.idate-mbtn2-navy              { background: var(--navy);    color: white; border-color: var(--navy);    flex: 1; }
.idate-mbtn2-navy:hover        { background: #1a3a8f; }
.idate-mbtn2-green             { background: var(--green);   color: white; border-color: var(--green);   flex: 1; }
.idate-mbtn2-green:hover       { background: #236040; }
.idate-mbtn2-purple            { background: #7b3fc4; color: white; border-color: #7b3fc4; flex: 1; }
.idate-mbtn2-purple:hover      { background: #6430a8; }
.idate-mbtn2-cwa               { background: #1a5fa8; color: white; border-color: #1a5fa8; flex: 1; }
.idate-mbtn2-cwa:hover         { background: #154d8a; }
.idate-mbtn2-disabled          { opacity: 0.4; cursor: not-allowed !important; }
.idate-footnote {
  font-size: 10px; color: var(--text-light); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}

/* Dark mode */
body.dark .idate-fbar             { background: #1a2244; border-color: rgba(255,255,255,0.07); }
body.dark .idate-fbar-people      { background: #151d3a; }
body.dark .idate-grp-hdr          { background: #0f1628; }
body.dark .idate-grp-hdr::after   { background: rgba(255,255,255,0.08); }
body.dark .idate-row:hover         { background: rgba(255,255,255,0.04); }
body.dark .idate-row               { border-color: rgba(255,255,255,0.07); }
body.dark .idate-mbtn              { background: #1a2244; border-color: rgba(255,255,255,0.12); color: #6070a0; }
body.dark .idate-pop               { background: #1a2244; border-color: rgba(255,255,255,0.12); box-shadow: 0 4px 18px rgba(0,0,0,0.4); }
body.dark .idate-pbtn              { color: #c0caf0; }
body.dark .idate-pbtn:hover        { background: rgba(255,255,255,0.06); }
body.dark .idate-footer            { background: #0f1628; border-color: rgba(255,255,255,0.07); }
body.dark .idate-overlay           { background: rgba(0,0,0,0.6); }
body.dark .idate-modal             { background: #1a2244; }
body.dark .idate-mhdr              { border-color: rgba(255,255,255,0.08); }
body.dark .idate-mtitle            { color: #c8d3f0; }
body.dark .idate-mclose            { background: #1a2244; border-color: rgba(255,255,255,0.12); color: #6070a0; }
body.dark .idate-finput,
body.dark .idate-ftarea            { background: #0f1628; border-color: rgba(255,255,255,0.12); color: #c8d3f0; }
body.dark .idate-ai-box            { background: rgba(49,133,252,0.08); border-color: rgba(49,133,252,0.2); }
body.dark .idate-call-hint         { background: #0f1628; }
body.dark .idate-mfoot             { border-color: rgba(255,255,255,0.08); }
body.dark .idate-mbtn2             { background: #1a2244; border-color: rgba(255,255,255,0.12); color: #8090c0; }