/* ================================================================
   MedHub Ix Reminders — Timed Investigation Reminders
   ================================================================ */

/* ── Overdue badge on patient cards ────────────────────────────── */
.icare-ix-overdue-badge {
    display: inline-block;
    background: #FEF2F2; color: #DC2626;
    border: 1px solid #FCA5A5; border-radius: 12px;
    font-size: 10px; font-weight: 800;
    padding: 2px 8px; margin-left: 6px;
    animation: icare-ix-pulse 2s infinite;
    vertical-align: middle;
}
@keyframes icare-ix-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

/* ── Section wrapper ────────────────────────────────────────────── */
.icare-ix-panel-wrap { padding: 12px 0; }
.icare-ix-section-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
}
.icare-ix-section-title {
    font-size: 11px; font-weight: 800; color: #374151;
    text-transform: uppercase; letter-spacing: .6px;
}
.icare-ix-add-btn {
    background: #0B2D4E; color: #fff; border: none;
    border-radius: 8px; padding: 5px 12px; font-size: 11px;
    font-weight: 700; cursor: pointer;
}

/* ── Reminder cards ─────────────────────────────────────────────── */
.icare-ix-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    margin-bottom: 10px; overflow: hidden;
}
.icare-ix-card-head {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px; background: #F8FAFC;
    border-bottom: 1px solid #F3F4F6;
}
.icare-ix-card-name { font-size: 13px; font-weight: 700; color: #1A1523; }
.icare-ix-card-meta { font-size: 10px; color: #9CA3AF; margin-top: 1px; }

/* Status badges */
.icare-ix-badge {
    font-size: 10px; font-weight: 700; padding: 2px 9px;
    border-radius: 10px; white-space: nowrap;
}
.icare-ixb-done { background: #ECFDF5; color: #059669; }
.icare-ixb-over { background: #FEF2F2; color: #DC2626; }
.icare-ixb-pend { background: #EFF6FF; color: #1D4ED8; }

/* ── Draw time rows ─────────────────────────────────────────────── */
.icare-ix-draws { padding: 6px 12px; display: flex; flex-direction: column; gap: 5px; }

.icare-ix-draw {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; flex-wrap: wrap;
    font-size: 12px;
}
.icare-ix-draw-done     { background: #ECFDF5; }
.icare-ix-draw-overdue  { background: #FEF2F2; }
.icare-ix-draw-soon     { background: #FFF7ED; }
.icare-ix-draw-upcoming { background: #F8FAFC; }

.icare-ix-draw-label { font-weight: 700; color: #374151; min-width: 140px; }
.icare-ix-draw-time  { font-weight: 800; color: #0B2D4E; min-width: 120px; }
.icare-ix-draw-state { flex: 1; font-size: 11px; }

.icare-ix-mark-draw {
    background: #ECFDF5; color: #059669; border: 1px solid #6EE7B7;
    border-radius: 7px; padding: 3px 9px; font-size: 10px;
    font-weight: 700; cursor: pointer; white-space: nowrap;
}

.icare-ix-draw-note {
    font-size: 11px; color: #6B7280; font-style: italic;
    padding: 3px 10px 7px 22px; line-height: 1.5;
}
.icare-ix-notes {
    font-size: 12px; color: #6B7280; font-style: italic;
    padding: 6px 12px 10px; line-height: 1.5; background: #F9FAFB;
    border-top: 1px solid #F3F4F6;
}

/* ── Card actions ───────────────────────────────────────────────── */
.icare-ix-card-actions {
    display: flex; gap: 6px; padding: 9px 12px;
    border-top: 1px solid #F3F4F6; flex-wrap: wrap;
}
.icare-ix-alert-btn {
    background: #FFF7ED; color: #C2410C; border: 1.5px solid #FDE68A;
    border-radius: 7px; padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.icare-ix-done-all-btn {
    background: #ECFDF5; color: #059669; border: 1.5px solid #6EE7B7;
    border-radius: 7px; padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.icare-ix-del-btn {
    background: none; color: #9CA3AF; border: 1.5px solid #E5E7EB;
    border-radius: 7px; padding: 5px 10px; font-size: 11px; cursor: pointer;
}

/* ── Add form ───────────────────────────────────────────────────── */
.icare-ix-add-form {
    background: #F0F7FF; border: 1.5px solid #BFDBFE;
    border-radius: 12px; padding: 12px; margin-bottom: 12px;
}
.icare-ix-add-title {
    font-size: 11px; font-weight: 800; color: #1D4ED8;
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;
}
.icare-ix-tpl-section { margin-bottom: 10px; }
.icare-ix-tpl-row     { display: flex; flex-wrap: wrap; gap: 6px; }
.icare-ix-tpl-btn {
    background: #fff; border: 1.5px solid #BFDBFE; border-radius: 20px;
    padding: 4px 12px; font-size: 11px; font-weight: 600; color: #1D4ED8; cursor: pointer;
}
.icare-ix-tpl-btn:hover { background: #EFF6FF; }

.icare-ix-add-row   { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.icare-ix-add-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 130px; }
.icare-ix-add-field label { font-size: 10px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: .5px; }
.icare-ix-add-field input {
    border: 1.5px solid #BFDBFE; border-radius: 8px;
    padding: 7px 10px; font-size: 13px; font-family: inherit; outline: none;
}

/* Draw builder rows */
.icare-ix-draw-row {
    display: flex; gap: 8px; align-items: center;
    background: #fff; border: 1px solid #E5E7EB; border-radius: 8px;
    padding: 8px 10px; margin-bottom: 6px; flex-wrap: wrap;
}
.icare-ix-dr-label { flex: 1; min-width: 100px; border: 1px solid #E5E7EB; border-radius: 6px; padding: 5px 8px; font-size: 13px; font-family: inherit; outline: none; }
.icare-ix-dr-dt    { flex: 1.2; min-width: 140px; border: 1px solid #E5E7EB; border-radius: 6px; padding: 5px 8px; font-size: 13px; font-family: inherit; outline: none; }
.icare-ix-dr-note  { flex: 2; min-width: 160px; border: 1px solid #E5E7EB; border-radius: 6px; padding: 5px 8px; font-size: 12px; font-family: inherit; outline: none; }

/* Empty / loading */
.icare-ix-empty   { color: #9CA3AF; font-size: 12px; font-style: italic; padding: 12px 0; }
.icare-ix-loading { color: #9CA3AF; font-size: 12px; padding: 12px 0; }