/**
 * Tick/Flea Tracker CSS
 * Design Language: Apple HIG clarity + Notion's flat, document-like calm
 * Companion to vaccination-tracker.css — covers tick/flea-specific class names
 */

/* ─── Reset & Base ────────────────────────────────── */
.tick-flea-tracker-wrapper *,
.tick-flea-tracker-wrapper *::before,
.tick-flea-tracker-wrapper *::after { box-sizing: border-box; margin: 0; padding: 0; }

.tick-flea-tracker-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 1400px; margin: 0 auto;
    padding: 0; color: #1a1917;

    /* Design tokens — matches vaccination-tracker design system */
    --tft-primary:        #0071e3;
    --tft-primary-hover:  #0064cc;
    --tft-primary-glow:   rgba(0,113,227,0.14);
    --tft-primary-light:  rgba(0,113,227,0.07);
    --tft-success:        #30a46c;
    --tft-success-bg:     rgba(48,164,108,0.08);
    --tft-warning:        #d97706;
    --tft-warning-bg:     rgba(217,119,6,0.08);
    --tft-danger:         #e5484d;
    --tft-danger-bg:      rgba(229,72,77,0.08);
    --tft-orange:         #ea580c;
    --tft-orange-bg:      rgba(234,88,12,0.08);

    /* Tick/flea accent — warm teal differentiates from vaccination blue */
    --tft-accent:         #0d9488;
    --tft-accent-bg:      rgba(13,148,136,0.08);
    --tft-accent-light:   rgba(13,148,136,0.07);
    --tft-accent-glow:    rgba(13,148,136,0.18);

    /* Notion warm grays */
    --tft-gray-50:   #fbfbfb;
    --tft-gray-100:  #f7f7f5;
    --tft-gray-200:  #eeeeec;
    --tft-gray-300:  #e4e4e0;
    --tft-gray-400:  #c7c7c2;
    --tft-gray-500:  #9b9b94;
    --tft-gray-600:  #706f69;
    --tft-gray-900:  #1a1917;

    /* Surfaces */
    --tft-surface:   #ffffff;
    --tft-surface-2: #fafaf8;
    --tft-surface-3: #f3f3f1;

    /* Text */
    --tft-text-1: #1a1917;
    --tft-text-2: #706f69;
    --tft-text-3: #9b9b94;

    /* Borders */
    --tft-border:    rgba(55,53,47,0.09);
    --tft-border-md: rgba(55,53,47,0.16);

    /* Shadows */
    --tft-shadow-xs: 0 1px 2px rgba(26,25,23,0.03);
    --tft-shadow-sm: 0 1px 4px rgba(26,25,23,0.05), 0 1px 2px rgba(26,25,23,0.03);
    --tft-shadow-md: 0 4px 12px rgba(26,25,23,0.07), 0 2px 4px rgba(26,25,23,0.03);
    --tft-shadow-lg: 0 8px 24px rgba(26,25,23,0.09), 0 2px 8px rgba(26,25,23,0.04);
    --tft-shadow-xl: 0 16px 48px rgba(26,25,23,0.12), 0 4px 12px rgba(26,25,23,0.05);
    --tft-shadow-glow: 0 0 0 3px var(--tft-accent-glow);

    /* Radius */
    --tft-r-xs:   3px;
    --tft-r-sm:   6px;
    --tft-r-md:   10px;
    --tft-r-lg:   14px;
    --tft-r-xl:   18px;
    --tft-r-full: 9999px;

    --tft-ease:   160ms cubic-bezier(0.25,0.46,0.45,0.94);
    --tft-spring: 280ms cubic-bezier(0.34,1.4,0.64,1);
}

/* ─── Container ───────────────────────────────────── */
.tick-flea-tracker-container {
    background: var(--tft-surface);
    border-radius: var(--tft-r-lg);
    border: 1px solid var(--tft-border);
    box-shadow: var(--tft-shadow-xs);
    overflow: hidden;
}

/* ─── Top Tab Bar (Upcoming / All Records) ────────── */
.tft-tab-bar {
    display: flex;
    gap: 0;
    background: var(--tft-surface-2);
    border-bottom: 1px solid var(--tft-border);
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tft-tab-bar::-webkit-scrollbar { display: none; }

.tft-tab {
    position: relative;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    color: var(--tft-text-3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: -0.01em;
    transition: all var(--tft-ease);
    font-family: inherit;
    margin-bottom: -1px;
}
.tft-tab:hover {
    color: var(--tft-text-1);
    background: var(--tft-surface-3);
}
.tft-tab.active {
    color: var(--tft-accent);
    border-bottom-color: var(--tft-accent);
    background: transparent;
}

/* ─── Tab Panes ───────────────────────────────────── */
.tft-tab-pane { display: block; }
.tft-tab-pane[style*="display:none"] { display: none !important; }

/* ─── All Records Header ──────────────────────────── */
.tft-history-header {
    padding: 20px 20px 0;
    border-bottom: 1px solid var(--tft-border);
    padding-bottom: 16px;
    margin-bottom: 0;
}
.tft-history-header h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tft-text-1);
}
.tft-history-header p {
    margin: 0;
    font-size: 12.5px;
    color: var(--tft-text-3);
}

/* ─── Tracker Summary (stat tabs row) ────────────── */
.tick-flea-tracker-wrapper .tracker-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.tick-flea-tracker-wrapper .summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 10px 14px;
    background: var(--tft-surface-2);
    border: 1.5px solid var(--tft-border);
    border-radius: var(--tft-r-md);
    cursor: pointer;
    transition: all var(--tft-ease);
    user-select: none;
}
.tick-flea-tracker-wrapper .summary-stat:hover {
    background: var(--tft-surface-3);
    border-color: var(--tft-border-md);
    transform: translateY(-1px);
    box-shadow: var(--tft-shadow-sm);
}
.tick-flea-tracker-wrapper .summary-stat.active {
    border-color: var(--tft-accent);
    box-shadow: 0 0 0 3px var(--tft-accent-glow);
    background: var(--tft-accent-bg);
}
.tick-flea-tracker-wrapper .stat-number {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--tft-text-1);
}
.tick-flea-tracker-wrapper .stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tft-text-3);
    margin-top: 3px;
    white-space: nowrap;
}

/* Stat number urgency colours */
.tick-flea-tracker-wrapper .summary-stat.overdue-stat .stat-number { color: var(--tft-danger); }
.tick-flea-tracker-wrapper .summary-stat.urgent       .stat-number { color: var(--tft-orange); }
.tick-flea-tracker-wrapper .summary-stat.warning      .stat-number { color: var(--tft-warning); }
.tick-flea-tracker-wrapper .summary-stat.normal       .stat-number { color: var(--tft-success); }
.tick-flea-tracker-wrapper .summary-stat.info         .stat-number { color: var(--tft-primary); }

/* Active state per urgency */
.tick-flea-tracker-wrapper .summary-stat.overdue-stat.active { border-color: var(--tft-danger);  box-shadow: 0 0 0 3px rgba(229,72,77,0.14);  background: var(--tft-danger-bg); }
.tick-flea-tracker-wrapper .summary-stat.urgent.active       { border-color: var(--tft-orange);  box-shadow: 0 0 0 3px rgba(234,88,12,0.14);  background: var(--tft-orange-bg); }
.tick-flea-tracker-wrapper .summary-stat.warning.active      { border-color: var(--tft-warning); box-shadow: 0 0 0 3px rgba(217,119,6,0.14);  background: var(--tft-warning-bg); }
.tick-flea-tracker-wrapper .summary-stat.normal.active       { border-color: var(--tft-success); box-shadow: 0 0 0 3px rgba(48,164,108,0.14); background: var(--tft-success-bg); }
.tick-flea-tracker-wrapper .summary-stat.info.active         { border-color: var(--tft-primary); box-shadow: 0 0 0 3px var(--tft-primary-glow); background: var(--tft-primary-light); }

/* ─── Section titles (overdue / urgent / etc.) ────── */
.tick-flea-section {
    padding: 20px;
    border-bottom: 1px solid var(--tft-border);
}
.tick-flea-section:last-child { border-bottom: none; }

/* Section title row: badge + count */
.tick-flea-tracker-wrapper .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.tick-flea-tracker-wrapper .urgency-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--tft-r-full);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.tick-flea-tracker-wrapper .urgency-badge.overdue-badge { background: var(--tft-danger-bg);   color: var(--tft-danger);  border: 1px solid rgba(229,72,77,0.2); }
.tick-flea-tracker-wrapper .urgency-badge.urgent        { background: var(--tft-orange-bg);   color: var(--tft-orange);  border: 1px solid rgba(234,88,12,0.2); }
.tick-flea-tracker-wrapper .urgency-badge.warning       { background: var(--tft-warning-bg);  color: var(--tft-warning); border: 1px solid rgba(217,119,6,0.2); }
.tick-flea-tracker-wrapper .urgency-badge.normal        { background: var(--tft-success-bg);  color: var(--tft-success); border: 1px solid rgba(48,164,108,0.2); }
.tick-flea-tracker-wrapper .urgency-badge.info          { background: var(--tft-accent-bg);   color: var(--tft-accent);  border: 1px solid rgba(13,148,136,0.2); }
.tick-flea-tracker-wrapper .section-title .count {
    font-size: 11px;
    font-weight: 500;
    color: var(--tft-text-3);
}

/* ─── Grid ────────────────────────────────────────── */
.tick-flea-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

/* ─── Section color strips ────────────────────────── */
.overdue-section  { background: rgba(229,72,77,0.025); }
.urgent-section   { background: rgba(234,88,12,0.025); }
.warning-section  { background: rgba(217,119,6,0.025); }
.normal-section   { background: rgba(48,164,108,0.025); }
.info-section     { background: rgba(0,113,227,0.025); }

/* ─── Mark Complete Button (tick/flea inline) ─────── */
/* The PHP renders this button inline-styled; we override cleanly here */
.tft-mark-complete-btn,
button.tft-mark-complete-btn {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    color: var(--tft-success) !important;
    border: 1.5px solid var(--tft-success) !important;
    border-radius: var(--tft-r-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all var(--tft-ease) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    -webkit-text-fill-color: var(--tft-success) !important;
}
.tft-mark-complete-btn:hover,
button.tft-mark-complete-btn:hover {
    background: var(--tft-success) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(48,164,108,0.28) !important;
    transform: translateY(-1px) !important;
}
.tft-mark-complete-btn:active,
button.tft-mark-complete-btn:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}
.tft-mark-complete-btn:disabled,
button.tft-mark-complete-btn:disabled {
    background: transparent !important;
    color: var(--tft-text-3) !important;
    border-color: var(--tft-gray-300) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    -webkit-text-fill-color: var(--tft-text-3) !important;
}

/* ─── Pet Tabs Wrapper (All Records view) ─────────── */
.vt-pet-tabs-wrapper {
    padding: 20px;
}

/* ─── Pet Tab Bar ─────────────────────────────────── */
.vt-pet-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.vt-pet-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--tft-surface-2);
    border: 1px solid var(--tft-border);
    border-radius: var(--tft-r-full);
    color: var(--tft-text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tft-ease);
    font-family: inherit;
    letter-spacing: -0.01em;
}
.vt-pet-tab:hover {
    background: var(--tft-surface-3);
    border-color: var(--tft-border-md);
    color: var(--tft-text-1);
}
.vt-pet-tab.active {
    background: var(--tft-accent);
    border-color: var(--tft-accent);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(13,148,136,0.28);
}
.vt-pet-tab.active .vt-pet-tab-count {
    background: rgba(255,255,255,0.25);
    color: #ffffff;
}

.vt-pet-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--tft-surface-3);
    color: var(--tft-text-3);
    border-radius: var(--tft-r-full);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
}

/* ─── Pet Panel ───────────────────────────────────── */
.vt-pet-panel { display: block; }
.vt-pet-panel[style*="display:none"] { display: none !important; }

.vt-pet-panel-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tft-border);
}

.vt-pet-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--tft-text-1);
    letter-spacing: -0.015em;
}

.vt-species-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--tft-accent-bg);
    color: var(--tft-accent);
    border: 1px solid rgba(13,148,136,0.2);
    border-radius: var(--tft-r-full);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: capitalize;
}

.vt-record-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--tft-text-3);
}

/* ─── History Table ───────────────────────────────── */
.vt-history-table-wrap {
    overflow-x: auto;
    border-radius: var(--tft-r-md);
    border: 1px solid var(--tft-border);
}

.vt-history-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tft-surface);
    font-size: 13px;
}

.vt-history-table thead {
    background: var(--tft-surface-3);
}

.vt-history-table th {
    padding: 9px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    color: var(--tft-text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--tft-border-md);
    white-space: nowrap;
}

.vt-history-table td {
    padding: 10px 12px;
    color: var(--tft-text-1);
    border-bottom: 1px solid var(--tft-border);
    font-weight: 500;
    vertical-align: middle;
}

.vt-history-table tbody tr:hover { background: var(--tft-accent-light); }
.vt-history-table tbody tr:last-child td { border-bottom: none; }

.vt-num {
    color: var(--tft-text-3);
    font-size: 11px;
    font-weight: 600;
    min-width: 28px;
    text-align: center;
}

.vt-notes {
    max-width: 220px;
    color: var(--tft-text-2);
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ─── Inline Badges (next dose status) ───────────── */
.vt-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: var(--tft-r-full);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-left: 5px;
    vertical-align: middle;
}

.vt-badge.vt-overdue {
    background: var(--tft-danger-bg);
    color: var(--tft-danger);
    border: 1px solid rgba(229,72,77,0.2);
    animation: tft-pulse 2.5s ease-in-out infinite;
}
.vt-badge.vt-soon {
    background: var(--tft-warning-bg);
    color: var(--tft-warning);
    border: 1px solid rgba(217,119,6,0.2);
}
.vt-badge.vt-ok {
    background: var(--tft-success-bg);
    color: var(--tft-success);
    border: 1px solid rgba(48,164,108,0.2);
}

/* ─── Shared vaccination card overrides for tick/flea ─
   The PHP reuses .vaccination-card/.card-footer etc.
   These fixes address the visual bugs seen in the UI:
   1. Left accent strip clipping pet name text
   2. "View Full Details" button wrapping/overflowing
   3. Footer buttons not laid out cleanly            */

/* FIX 1: Replace ::before pseudo accent strip with border-left.
   The pseudo approach clips inner content when overflow:hidden is set.
   border-left is part of the box model so it never clips content.      */
.tick-flea-tracker-wrapper .vaccination-card {
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--tft-gray-300);
}
.tick-flea-tracker-wrapper .vaccination-card[data-urgency="overdue"]::before,
.tick-flea-tracker-wrapper .vaccination-card[data-urgency="today"]::before,
.tick-flea-tracker-wrapper .vaccination-card[data-urgency="next_3_days"]::before,
.tick-flea-tracker-wrapper .vaccination-card[data-urgency="next_10_days"]::before,
.tick-flea-tracker-wrapper .vaccination-card[data-urgency="later"]::before { display: none; }

.tick-flea-tracker-wrapper .vaccination-card[data-urgency="overdue"]      { border-left-color: var(--tft-danger); }
.tick-flea-tracker-wrapper .vaccination-card[data-urgency="today"]        { border-left-color: var(--tft-orange); }
.tick-flea-tracker-wrapper .vaccination-card[data-urgency="next_3_days"]  { border-left-color: var(--tft-warning); }
.tick-flea-tracker-wrapper .vaccination-card[data-urgency="next_10_days"] { border-left-color: var(--tft-success); }
.tick-flea-tracker-wrapper .vaccination-card[data-urgency="later"]        { border-left-color: var(--tft-accent); }

/* Adjust inner padding — slightly less now that border-left handles the strip */
.tick-flea-tracker-wrapper .card-header,
.tick-flea-tracker-wrapper .card-body,
.tick-flea-tracker-wrapper .card-footer { padding-left: 15px; }

/* FIX 2: Days badge — teal accent colour */
.tick-flea-tracker-wrapper .days-badge {
    background: var(--tft-accent-bg);
    color: var(--tft-accent);
    border-color: rgba(13,148,136,0.2);
}

/* FIX 3: View Full Details button — teal + prevent text wrapping */
.tick-flea-tracker-wrapper .view-details-btn {
    background: var(--tft-accent);
    white-space: nowrap;
}
.tick-flea-tracker-wrapper .view-details-btn:hover {
    background: #0c7a70;
    box-shadow: 0 2px 8px rgba(13,148,136,0.30);
}

/* FIX 4: Card footer — stack buttons vertically so both are full width */
.tick-flea-tracker-wrapper .card-footer {
    flex-direction: column;
    gap: 6px;
    padding-bottom: 13px;
}

/* FIX 5: Mark Complete button — full width, reset conflicting inline styles */
.tick-flea-tracker-wrapper .tft-mark-complete-btn,
.tick-flea-tracker-wrapper button.tft-mark-complete-btn {
    width: 100% !important;
    margin-top: 0 !important;
}


/* ─── Urgency alert colours (popup) ──────────────── */
.tick-flea-tracker-wrapper .urgency-alert.overdue {
    background: var(--tft-danger-bg);
    border-color: rgba(229,72,77,0.22);
}
.tick-flea-tracker-wrapper .urgency-alert.overdue strong { color: var(--tft-danger); }

.tick-flea-tracker-wrapper .urgency-alert.urgent {
    background: var(--tft-orange-bg);
    border-color: rgba(234,88,12,0.22);
}
.tick-flea-tracker-wrapper .urgency-alert.urgent strong { color: var(--tft-orange); }

.tick-flea-tracker-wrapper .urgency-alert.normal {
    background: var(--tft-accent-bg);
    border-color: rgba(13,148,136,0.2);
}
.tick-flea-tracker-wrapper .urgency-alert.normal strong { color: var(--tft-accent); }

/* ─── Animations ──────────────────────────────────── */
@keyframes tft-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

@keyframes tft-spin { to { transform: rotate(360deg); } }

/* ─── Error ───────────────────────────────────────── */
.tick-flea-tracker-wrapper .vet-error {
    padding: 14px 18px;
    background: var(--tft-danger-bg);
    color: var(--tft-danger);
    border: 1px solid rgba(229,72,77,0.2);
    border-radius: var(--tft-r-md);
    font-size: 13.5px;
    font-weight: 500;
    margin: 20px;
}

/* ─── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .tick-flea-tracker-wrapper { padding: 0; }

    .tft-tab-bar { padding: 0 12px; }
    .tft-tab { padding: 10px 12px; font-size: 12px; }

    .tick-flea-tracker-wrapper .tracker-summary { gap: 5px; }
    .tick-flea-tracker-wrapper .summary-stat { min-width: 66px; padding: 8px 11px; }
    .tick-flea-tracker-wrapper .stat-number { font-size: 20px; }
    .tick-flea-section { padding: 14px 16px; }
    .tick-flea-grid { grid-template-columns: 1fr; gap: 8px; }

    .vt-pet-tabs-wrapper { padding: 14px 16px; }
    .vt-pet-tab-bar { gap: 5px; }
    .vt-pet-tab { padding: 5px 11px; font-size: 12px; }

    .vt-pet-panel-header { flex-wrap: wrap; }
    .vt-record-count { margin-left: 0; width: 100%; }

    .tft-history-header { padding: 14px 16px 12px; }

    .vt-history-table th,
    .vt-history-table td { padding: 8px 10px; font-size: 12px; }

    .vt-notes { max-width: 140px; }
}

@media (max-width: 480px) {
    .vt-pet-tab-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
    .vt-pet-tab-bar::-webkit-scrollbar { display: none; }
    .vt-pet-tab { flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   MULTI-SHORTCODE PAGE FIX
   When vaccination, deworming & tick/flea trackers are all on the
   same page, the popup (#tick-flea-details-popup) inherits shared
   class names (.vaccination-popup, .popup-content, .popup-body etc.)
   whose styles reference --vt-* variables that are only defined inside
   .vaccination-tracker-wrapper.  Because the popup sits inside
   .tick-flea-tracker-wrapper it only has --tft-* variables, so the
   background, border, text, shadow etc. resolve to nothing / inherit
   wrongly (transparent or browser defaults).

   Fix: Bridge the --vt-* token gap by mapping them to --tft-* tokens
   on the popup element itself, and add explicit hard-coded fallbacks
   so the popup always looks correct regardless of load order.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Provide --vt-* tokens inside the tick/flea popup ────────── */
#tick-flea-details-popup {
    /* Map every --vt-* token used in vaccination-tracker.css to its
       --tft-* equivalent so the shared popup classes work correctly  */
    --vt-surface:       #ffffff;
    --vt-surface-2:     #fafaf8;
    --vt-surface-3:     #f3f3f1;
    --vt-text-1:        #1a1917;
    --vt-text-2:        #706f69;
    --vt-text-3:        #9b9b94;
    --vt-border:        rgba(55,53,47,0.09);
    --vt-border-md:     rgba(55,53,47,0.16);
    --vt-gray-100:      #f7f7f5;
    --vt-gray-200:      #eeeeec;
    --vt-gray-300:      #e4e4e0;
    --vt-gray-400:      #c7c7c2;
    --vt-gray-500:      #9b9b94;
    --vt-gray-600:      #706f69;
    --vt-gray-900:      #1a1917;
    --vt-primary:       #0071e3;
    --vt-primary-hover: #0064cc;
    --vt-primary-glow:  rgba(0,113,227,0.14);
    --vt-primary-light: rgba(0,113,227,0.07);
    --vt-success:       #30a46c;
    --vt-success-bg:    rgba(48,164,108,0.08);
    --vt-warning:       #d97706;
    --vt-warning-bg:    rgba(217,119,6,0.08);
    --vt-danger:        #e5484d;
    --vt-danger-bg:     rgba(229,72,77,0.08);
    --vt-orange:        #ea580c;
    --vt-orange-bg:     rgba(234,88,12,0.08);
    --vt-shadow-xs:     0 1px 2px rgba(26,25,23,0.03);
    --vt-shadow-sm:     0 1px 4px rgba(26,25,23,0.05), 0 1px 2px rgba(26,25,23,0.03);
    --vt-shadow-md:     0 4px 12px rgba(26,25,23,0.07), 0 2px 4px rgba(26,25,23,0.03);
    --vt-shadow-lg:     0 8px 24px rgba(26,25,23,0.09), 0 2px 8px rgba(26,25,23,0.04);
    --vt-shadow-xl:     0 16px 48px rgba(26,25,23,0.12), 0 4px 12px rgba(26,25,23,0.05);
    --vt-ease:          160ms cubic-bezier(0.25,0.46,0.45,0.94);
    --vt-r-xs:          3px;
    --vt-r-sm:          6px;
    --vt-r-md:          10px;
    --vt-r-lg:          14px;
    --vt-r-xl:          18px;
    --vt-r-full:        9999px;
}

/* ─── 2. Explicit popup-content background (belt-and-suspenders) ─── */
#tick-flea-details-popup .popup-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1a1917 !important;
    border: 1px solid rgba(55,53,47,0.12) !important;
    box-shadow: 0 16px 48px rgba(26,25,23,0.14), 0 4px 12px rgba(26,25,23,0.07) !important;
}

/* ─── 3. Popup body readable text ────────────────────────────────── */
#tick-flea-details-popup .popup-body {
    background: #ffffff;
    color: #1a1917;
}

/* ─── 4. Popup close button ──────────────────────────────────────── */
#tick-flea-details-popup .popup-close {
    background: #f3f3f1 !important;
    color: #706f69 !important;
    border: none !important;
}
#tick-flea-details-popup .popup-close:hover {
    background: #e4e4e0 !important;
    color: #1a1917 !important;
}

/* ─── 5. Details inner sections (case-details, quick-info-grid etc.) */
#tick-flea-details-popup .case-details { color: #1a1917; }
#tick-flea-details-popup .quick-info-grid { background: #f7f7f5; border-color: rgba(55,53,47,0.09); }
#tick-flea-details-popup .quick-info-item { border-color: rgba(55,53,47,0.09); }
#tick-flea-details-popup .quick-info-item .label { color: #9b9b94; }
#tick-flea-details-popup .quick-info-item .value { color: #1a1917; }
#tick-flea-details-popup .section-divider { border-color: rgba(55,53,47,0.09); color: #9b9b94; background: #f3f3f1; }
#tick-flea-details-popup .info-table td,
#tick-flea-details-popup .info-table th { border-color: rgba(55,53,47,0.09); color: #1a1917; }
#tick-flea-details-popup .info-table thead { background: #f3f3f1; }
#tick-flea-details-popup .info-table tbody tr:hover { background: rgba(13,148,136,0.04); }
#tick-flea-details-popup .summary-header h2 { color: #1a1917; }

/* ─── 6. Scoped view-details-btn for tick/flea — high specificity ── */
.tick-flea-tracker-wrapper .card-footer .view-details-btn,
.tick-flea-tracker-wrapper .vaccination-card .view-details-btn {
    display: block !important;
    width: 100% !important;
    padding: 9px 16px !important;
    background: #0d9488 !important;
    background-color: #0d9488 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    letter-spacing: -0.01em !important;
}
.tick-flea-tracker-wrapper .card-footer .view-details-btn:hover,
.tick-flea-tracker-wrapper .vaccination-card .view-details-btn:hover {
    background: #0c7a70 !important;
    background-color: #0c7a70 !important;
    box-shadow: 0 2px 8px rgba(13,148,136,0.32) !important;
    transform: translateY(-1px) !important;
}
.tick-flea-tracker-wrapper .card-footer .view-details-btn:active,
.tick-flea-tracker-wrapper .vaccination-card .view-details-btn:active {
    transform: translateY(0) !important;
    box-shadow: none !important;
}

/* ─── 7. Card footer layout fix ──────────────────────────────────── */
.tick-flea-tracker-wrapper .card-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px 15px 13px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   POPUP PADDING & SPACING FIX
   All inner popup content was missing padding/spacing because:
   - .popup-body padding wasn't being applied correctly
   - .details-summary, .details-section etc. rely on --vt-* tokens
     for their background/border which weren't resolving
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Force popup-body padding ───────────────────────────────────── */
#tick-flea-details-popup .popup-body {
    padding: 24px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
}

/* ─── details-summary: the top card with pet name + urgency alert ── */
#tick-flea-details-popup .details-summary {
    background: #fafaf8 !important;
    border: 1px solid rgba(55,53,47,0.09) !important;
    padding: 18px 20px !important;
    border-radius: 14px !important;
    margin-bottom: 20px !important;
}

/* ─── summary-header: pet name + case status badge ───────────────── */
#tick-flea-details-popup .summary-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 14px !important;
}
#tick-flea-details-popup .summary-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #1a1917 !important;
}

/* ─── case-status badge ──────────────────────────────────────────── */
#tick-flea-details-popup .case-status {
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    background: #ffffff !important;
    color: #9b9b94 !important;
    border: 1px solid rgba(55,53,47,0.16) !important;
}

/* ─── urgency-alert banner ───────────────────────────────────────── */
#tick-flea-details-popup .urgency-alert {
    display: flex !important;
    gap: 12px !important;
    padding: 13px 15px !important;
    background: #ffffff !important;
    border: 1px solid rgba(55,53,47,0.09) !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
}
#tick-flea-details-popup .urgency-alert strong {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
    color: #1a1917 !important;
}
#tick-flea-details-popup .urgency-alert p {
    margin: 0 !important;
    font-size: 12.5px !important;
    color: #706f69 !important;
}
#tick-flea-details-popup .urgency-alert.urgent strong,
#tick-flea-details-popup .urgency-alert.urgent {
    border-color: rgba(234,88,12,0.22) !important;
    background: rgba(234,88,12,0.06) !important;
}
#tick-flea-details-popup .urgency-alert.urgent strong { color: #ea580c !important; }
#tick-flea-details-popup .urgency-alert.overdue {
    border-color: rgba(229,72,77,0.22) !important;
    background: rgba(229,72,77,0.06) !important;
}
#tick-flea-details-popup .urgency-alert.overdue strong { color: #e5484d !important; }
#tick-flea-details-popup .urgency-alert.normal {
    border-color: rgba(13,148,136,0.2) !important;
    background: rgba(13,148,136,0.06) !important;
}
#tick-flea-details-popup .urgency-alert.normal strong { color: #0d9488 !important; }

/* ─── quick-info-grid ────────────────────────────────────────────── */
#tick-flea-details-popup .quick-info-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 8px !important;
    background: transparent !important;
}
#tick-flea-details-popup .quick-info-item {
    background: #ffffff !important;
    border: 1px solid rgba(55,53,47,0.09) !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
}
#tick-flea-details-popup .quick-info-item .label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #9b9b94 !important;
    margin-bottom: 3px !important;
}
#tick-flea-details-popup .quick-info-item .value {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1a1917 !important;
    letter-spacing: -0.01em !important;
}

/* ─── details-full heading ───────────────────────────────────────── */
#tick-flea-details-popup .details-full h3 {
    margin: 0 0 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #1a1917 !important;
}

/* ─── details-section (Pet Info / Owner Info / Treatment Details) ── */
#tick-flea-details-popup .details-section {
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(55,53,47,0.09) !important;
}
#tick-flea-details-popup .details-section:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#tick-flea-details-popup .details-section h4 {
    margin: 0 0 12px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #9b9b94 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* ─── details-grid: the 2-col label/value pairs ──────────────────── */
#tick-flea-details-popup .details-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
}
#tick-flea-details-popup .detail-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
#tick-flea-details-popup .detail-item.full-width { grid-column: 1 / -1 !important; }

#tick-flea-details-popup .detail-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #9b9b94 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
#tick-flea-details-popup .detail-value {
    font-size: 13.5px !important;
    color: #1a1917 !important;
    font-weight: 500 !important;
}
#tick-flea-details-popup .detail-value.highlight {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0d9488 !important;
    letter-spacing: -0.01em !important;
}
#tick-flea-details-popup .detail-value a {
    color: #0071e3 !important;
    text-decoration: none !important;
}
#tick-flea-details-popup .detail-value a:hover { text-decoration: underline !important; }

/* ─── overdue / today text ───────────────────────────────────────── */
#tick-flea-details-popup .overdue-text { color: #e5484d !important; font-weight: 700 !important; }
#tick-flea-details-popup .today-text   { color: #ea580c !important; font-weight: 700 !important; }

/* ─── vaccines-table (history table at bottom of popup) ─────────── */
#tick-flea-details-popup .vaccines-table-wrapper {
    overflow-x: auto !important;
    margin-top: 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(55,53,47,0.09) !important;
}
#tick-flea-details-popup .vaccines-table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
}
#tick-flea-details-popup .vaccines-table thead {
    background: #f3f3f1 !important;
}
#tick-flea-details-popup .vaccines-table th {
    padding: 9px 12px !important;
    text-align: left !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #9b9b94 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid rgba(55,53,47,0.16) !important;
    white-space: nowrap !important;
}
#tick-flea-details-popup .vaccines-table td {
    padding: 10px 12px !important;
    font-size: 13px !important;
    color: #1a1917 !important;
    border-bottom: 1px solid rgba(55,53,47,0.09) !important;
    font-weight: 500 !important;
}
#tick-flea-details-popup .vaccines-table tbody tr:hover {
    background: rgba(13,148,136,0.04) !important;
}
#tick-flea-details-popup .vaccines-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ─── Responsive: mobile popup ───────────────────────────────────── */
@media (max-width: 768px) {
    #tick-flea-details-popup .popup-body { padding: 16px !important; }
    #tick-flea-details-popup .details-summary { padding: 14px 16px !important; }
    #tick-flea-details-popup .details-grid { grid-template-columns: 1fr !important; }
    #tick-flea-details-popup .quick-info-grid { grid-template-columns: repeat(2, 1fr) !important; }
}