/* ===================================
   MyPost2 Dashboard - SaaS Design
   With Dark Mode Support
   =================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* === CSS Variables (Light Mode Default) === */
:root {
    --bg-page: #f5f3ef;
    --bg-surface: #f2ead8;
    --bg-hover: #f9fafb;
    --border-color: #7094db;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #2b2b2b;
}

/* === Dark Mode Variables === */
[data-mp2-theme="dark"] {
    --bg-page: #1a1d26;
    --bg-surface: #23262f;
    --bg-hover: #2d3139;
    --border-color: #374151;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-tertiary: #ebebeb;
}

/* === Shared Variables === */
:root,
[data-mp2-theme="dark"] {
    --border-radius: 0.75rem;
    --border-radius-lg: 1rem;
    
    /* Stat Colors (same in both modes) */
    --color-green-light: #10b981;
    --color-green-dark: #34d399;
    --color-blue-light: #3b82f6;
    --color-blue-dark: #60a5fa;
    --color-orange-light: #f97316;
    --color-orange-dark: #fb923c;
    --color-red-light: #ef4444;
    --color-red-dark: #f87171;
    --color-purple-light: #a855f7;
    --color-purple-dark: #c084fc;
    --color-indigo-light: #6366f1;
    --color-indigo-dark: #818cf8;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === Global Styles === */

.img.wp-smiley, img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1.2em !important;
    width: 1.2em !important;
}

.mp2-dashboard-wrapper {
    font-family: var(--font-family) !important;
    background: var(--bg-page) !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background-color 0.2s ease !important;
}

/* === Dark Mode Toggle === */
.mp2-dark-mode-toggle {
    position: fixed !important;
    top: 50px !important;
    right: 20px !important;
    z-index: 9999 !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: var(--shadow-sm) !important;
}

.mp2-dark-mode-toggle:hover {
    box-shadow: var(--shadow-md) !important;
}

.mp2-dark-mode-toggle svg {
    width: 25px !important;
    height: 25px !important;
    color: var(--text-secondary) !important;
}

/* === Grid Layouts === */
.mp2-grid-6 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: var(--space-5) !important;
    margin-bottom: var(--space-8) !important;
}

.mp2-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: var(--space-5) !important;
    margin-bottom: var(--space-8) !important;
}

.mp2-grid-1 {
    display: flex !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: var(--space-5) !important;
    margin-bottom: var(--space-8) !important;
}

/* === Stat Cards === */
.mp2-stat-card {
    background: var(--bg-surface) !important;
    border: 1px solid #766d61 !important;
    border-radius: var(--border-radius) !important;
    padding: var(--space-6) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s ease !important;
}

.mp2-stat-card:hover {
    box-shadow: var(--shadow-md) !important;
}

.mp2-stat-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 var(--space-3) 0 !important;
    line-height: 1 !important;
}

.mp2-stat-value {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 0 var(--space-2) 0 !important;
}

.mp2-stat-sublabel {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

.mp2-stat-loading .mp2-stat-value {
    font-size: 1.5em!important;
    opacity: 0.6;
}

/* Stat color variants - Light Mode */
.mp2-stat-card.color-green .mp2-stat-value { color: var(--color-green-light) !important; }
.mp2-stat-card.color-blue .mp2-stat-value { color: var(--color-blue-light) !important; }
.mp2-stat-card.color-orange .mp2-stat-value { color: var(--color-orange-light) !important; }
.mp2-stat-card.color-red .mp2-stat-value { color: var(--color-red-light) !important; }
.mp2-stat-card.color-purple .mp2-stat-value { color: var(--color-purple-light) !important; }
.mp2-stat-card.color-indigo .mp2-stat-value { color: var(--color-indigo-light) !important; }

/* Stat color variants - Dark Mode */
[data-mp2-theme="dark"] .mp2-stat-card.color-green .mp2-stat-value { color: var(--color-green-dark) !important; }
[data-mp2-theme="dark"] .mp2-stat-card.color-blue .mp2-stat-value { color: var(--color-blue-dark) !important; }
[data-mp2-theme="dark"] .mp2-stat-card.color-orange .mp2-stat-value { color: var(--color-orange-dark) !important; }
[data-mp2-theme="dark"] .mp2-stat-card.color-red .mp2-stat-value { color: var(--color-red-dark) !important; }
[data-mp2-theme="dark"] .mp2-stat-card.color-purple .mp2-stat-value { color: var(--color-purple-dark) !important; }
[data-mp2-theme="dark"] .mp2-stat-card.color-indigo .mp2-stat-value { color: var(--color-indigo-dark) !important; }

/* === Section Containers === */
.mp2-dashboard-section {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    margin-bottom: var(--space-8) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: hidden !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.mp2-dashboard-section-header {
    padding: var(--space-6) !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.mp2-dashboard-section-title {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
}

.mp2-dashboard-section-content {
    padding: var(--space-6) !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
    color: var(--text-tertiary) !important;
    font-size: 0.875rem !important;
}

/* === Tables === */
.mp2-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

.mp2-table thead th {
    padding: var(--space-3) var(--space-4) !important;
    text-align: left !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
}

.mp2-table tbody td {
    padding: var(--space-4) !important;
    font-size: 0.875rem !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.mp2-table tbody tr:hover {
    background: var(--bg-hover) !important;
}

.mp2-table tbody tr:last-child td {
    border-bottom: none !important;
}

.mp2-analytics-table th,
.mp2-analytics-table td {
    border-right: 1px solid #666;
}

.mp2-pool-articles-table th,
.mp2-pool-articles-table td {
    border-right: 1px solid #666;
}

.mp2-existing-reposts-table th,
.mp2-existing-reposts-table td {
    border-right: 1px solid #666;
}

.mp2-transaction-table th,
.mp2-transaction-table td {
    border-right: 1px solid #666;
}

/* === Buttons === */
.mp2-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border-radius: 0.5rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
}

.mp2-btn-primary {
    background: var(--color-indigo-light) !important;
    color: white !important;
}

.mp2-btn-primary:hover {
    background: #4f46e5 !important;
}

.mp2-btn-secondary {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.mp2-btn-secondary:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.add-to-pool-btn {
    background: #10b981 !important;
    color: white !important;
    border-color: var(--border-color) !important;
}

.remove-from-pool-btn {
    background: #eb1742 !important;
    color: white !important;
    border-color: var(--border-color) !important;
}

.create-repost-btn {
    background: #10b981 !important;
    color: white !important;
    border-color: var(--border-color) !important;
}

/* === Quick Actions === */
.mp2-quick-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-3) !important;
    justify-content: center !important;
}

/* === Cache Status === */
.mp2-cache-status {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 4px solid var(--color-blue-light) !important;
    border-radius: 0.5rem !important;
    padding: var(--space-4) !important;
    margin: var(--space-6) 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 15px !important;
}

.mp2-cache-text {
    font-size: 0.875rem !important;
    color: var(--text-secondary) !important;
}

/* === Activity Cards === */
.mp2-activity-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: var(--space-4) !important;
}

.mp2-activity-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 4px solid var(--color-blue-light) !important;
    border-radius: 0.5rem !important;
    padding: var(--space-4) !important;
    transition: all 0.2s ease !important;
}

.mp2-activity-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 0 var(--space-2) 0 !important;
    text-decoration: none !important;
}

.mp2-activity-title:hover {
    color: var(--color-blue-light) !important;
}

.mp2-activity-meta {
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
}

/* === Badges === */
.mp2-badge {
    display: inline-block !important;
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
}

.mp2-badge-post {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.mp2-badge-page {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.mp2-badge-recipe {
    background: #fef3c7 !important;
    color: #92400e !important;
}

[data-mp2-theme="dark"] .mp2-badge-post {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

[data-mp2-theme="dark"] .mp2-badge-page {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

[data-mp2-theme="dark"] .mp2-badge-recipe {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

/* === Page Title/Header === */
.mp2-page-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 0 0.5rem 0 !important;
}

.mp2-page-subtitle {
    font-size: 1rem !important;
    color: var(--text-secondary) !important;
    margin: 0 0 2rem 0 !important;
}

/* === Responsive === */
@media (max-width: 768px) {
    .mp2-grid-6,
    .mp2-grid-3 {
        grid-template-columns: 1fr !important;
    }
    
    .mp2-stat-value {
        font-size: 1.875rem !important;
    }
    
    .mp2-dark-mode-toggle {
        top: 10px !important;
        right: 10px !important;
    }
}
/* === WordPress Admin Sidebar Dark Mode Override === */
[data-mp2-theme="dark"] #adminmenumain,
[data-mp2-theme="dark"] #adminmenuback,
[data-mp2-theme="dark"] #adminmenuwrap {
    background: #23262f !important;
}

[data-mp2-theme="dark"] #adminmenu,
[data-mp2-theme="dark"] #adminmenu .wp-submenu {
    background: #23262f !important;
}

[data-mp2-theme="dark"] #adminmenu a {
    color: #94a3b8 !important;
}

[data-mp2-theme="dark"] #adminmenu li.current a,
[data-mp2-theme="dark"] #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
[data-mp2-theme="dark"] #adminmenu .wp-has-current-submenu .wp-submenu a:hover,
[data-mp2-theme="dark"] #adminmenu .wp-has-current-submenu.opensub .wp-submenu a:hover {
    color: #ffffff !important;
}

[data-mp2-theme="dark"] #adminmenu .wp-submenu a {
    color: #94a3b8;
}

[data-mp2-theme="dark"] #adminmenu .wp-submenu {
    background: #1a1d26 !important;
}

[data-mp2-theme="dark"] #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
[data-mp2-theme="dark"] #adminmenu li.current a.menu-top,
[data-mp2-theme="dark"] #adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
[data-mp2-theme="dark"] #adminmenu .wp-menu-arrow,
[data-mp2-theme="dark"] #adminmenu .wp-menu-arrow div,
[data-mp2-theme="dark"] #adminmenu li.current div.wp-menu-image:before,
[data-mp2-theme="dark"] #adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
[data-mp2-theme="dark"] #adminmenu li a:focus div.wp-menu-image:before,
[data-mp2-theme="dark"] #adminmenu li.opensub div.wp-menu-image:before,
[data-mp2-theme="dark"] #adminmenu li:hover div.wp-menu-image:before {
    background: #2d3139 !important;
    color: #ffffff !important;
}

[data-mp2-theme="dark"] #adminmenu div.wp-menu-image:before {
    color: #94a3b8 !important;
}

[data-mp2-theme="dark"] #adminmenu li:hover a,
[data-mp2-theme="dark"] #adminmenu li.menu-top:hover,
[data-mp2-theme="dark"] #adminmenu li.opensub > a.menu-top,
[data-mp2-theme="dark"] #adminmenu li > a.menu-top:focus {
    background: #2d3139 !important;
    color: #ffffff !important;
}

[data-mp2-theme="dark"] #collapse-button {
    color: #94a3b8 !important;
}

[data-mp2-theme="dark"] #collapse-button:hover {
    color: #ffffff !important;
}

/* WordPress Top Admin Bar */
[data-mp2-theme="dark"] #wpadminbar {
    background: #23262f !important;
}

[data-mp2-theme="dark"] #wpadminbar .ab-item,
[data-mp2-theme="dark"] #wpadminbar a.ab-item,
[data-mp2-theme="dark"] #wpadminbar > #wp-toolbar span.ab-label,
[data-mp2-theme="dark"] #wpadminbar > #wp-toolbar span.noticon {
    color: #94a3b8 !important;
}

[data-mp2-theme="dark"] #wpadminbar .ab-top-menu > li:hover > .ab-item,
[data-mp2-theme="dark"] #wpadminbar .ab-top-menu > li.hover > .ab-item,
[data-mp2-theme="dark"] #wpadminbar .ab-top-menu > li > .ab-item:focus,
[data-mp2-theme="dark"] #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
[data-mp2-theme="dark"] #wpadminbar.nojs .ab-top-menu > li.menupop:hover > .ab-item {
    background: #2d3139 !important;
    color: #ffffff !important;
}

[data-mp2-theme="dark"] #wpadminbar .ab-submenu {
    background: #2d3139 !important;
}

[data-mp2-theme="dark"] #wpadminbar .ab-submenu .ab-item {
    color: #94a3b8 !important;
}
/* ----------------------------------------------------------
   Plugin-wide dark / light background switch
   ---------------------------------------------------------- */
:root {
    --mp2-bg-light: #ffffff;
    --mp2-bg-dark:  #1a1d26;
}

/* light mode (default) */
body,
#wpwrap,
#wpbody,
#wpcontent,
.wrap,
html.wp-toolbar {
    background: var(--mp2-bg-light) !important;
}

/* dark mode override */
[data-mp2-theme="dark"] body,
[data-mp2-theme="dark"] #wpwrap,
[data-mp2-theme="dark"] #wpbody,
[data-mp2-theme="dark"] #wpcontent,
[data-mp2-theme="dark"] .wrap,
html.wp-toolbar[data-mp2-theme="dark"] {
    background: var(--mp2-bg-dark) !important;
}

[data-mp2-theme="dark"] #wpbody,
[data-mp2-theme="dark"] #wpbody-content,
[data-mp2-theme="dark"] .wrap {
    background: #1a1d26 !important;
}

[data-mp2-theme="dark"] .wrap h1,
[data-mp2-theme="dark"] .wrap h2 {
    color: #f1f5f9 !important;
}
/* === Table Dark Mode Fix === */
[data-mp2-theme="dark"] .mp2-table tbody tr {
    background: #3c434a !important;
}

[data-mp2-theme="dark"] .mp2-table tbody tr:hover {
    background: #4b5563 !important;
}

[data-mp2-theme="dark"] .mp2-table thead {
    background: #2d3139 !important;
}
/* === Logo Header Component === */
.mp2-logo-header {
    margin-bottom: 1.5rem;
}

.mp2-logo-image {
    width: 80%;
    max-width: 320px;
    height: auto;
    display: block;
    background: transparent !important;
}

.mp2-version-badge {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-secondary);
    margin-top: -15px;
    margin-left: 15px;
}
/* === Jump Links Navigation === */
.mp2-info-container {
    margin-top: 10px !important;
    padding: 12px !important;
    background: #f2ead8 !important; /* Light mode creme */
    border-left: 4px solid #0073aa !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
    transition: background-color 0.2s ease !important;
}

.mp2-info {
    color: #6b7280 !important; /* Light mode text */
    font-style: italic !important;
    margin: 0 !important;
}

.mp2-info a {
    color: #111827 !important; /* Light mode link color */
    font-weight: 600 !important;
    text-decoration: none !important;
}

.mp2-info a:hover {
    color: #3b82f6 !important; /* Light mode hover */
}

/* Dark mode overrides */
[data-mp2-theme="dark"] .mp2-info-container {
    background: #23262f !important; /* Your specified dark mode color */
}

[data-mp2-theme="dark"] .mp2-info {
    color: #9ca3af !important; /* Dark mode text */
}

[data-mp2-theme="dark"] .mp2-info a {
    color: #ffffff !important; /* White links in dark mode */
}

[data-mp2-theme="dark"] .mp2-info a:hover {
    color: #60a5fa !important; /* Dark mode hover */
}
/* === Form Container Background Override === */
.mp2-dashboard-wrapper [style*="background:#3c434a"] {
    background: #5b92de !important; /* Light mode creme */
}

[data-mp2-theme="dark"] .mp2-dashboard-wrapper [style*="background:#3c434a"] {
    background: #3c434a !important; /* Dark mode gray */
}
/* 1. gap between rows */
.mp2-info-container .mp2-row + .mp2-row {      /* every row except the first */
    margin-top: 12px;                           /* ←  tweak to taste  */
}

/* 2. let the row background follow the mode */
.mp2-info-container .mp2-row {
    background: transparent;                    /* will inherit from container */
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 40px;
}
/* === Dashboard Section Header Background === */
.mp2-dashboard-section-header {
    background: #5b92de !important; /* Light mode creme */
    transition: background-color 0.2s ease !important;
}

[data-mp2-theme="dark"] .mp2-dashboard-section-header {
    background: #3c434a !important; /* Dark mode gray */
}
/* Add this to assets/css/dashboard.css */
tr.mp2-highlight-row {
    /* Define the visual state of the highlighted row */
    animation: mp2-highlight-fade 5s ease-out;
    background-color: #ffffe0 !important; /* Starting background color */
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
}

@keyframes mp2-highlight-fade {
    /* The animation fading the highlight color */
    0% { background-color: #ffd700 !important; } /* Bright color start */
    100% { background-color: inherit; } /* Fade back to the row's normal color */
}
/* From Analytics CSS Migration */
/* 3. Mini-chart containers */
.mp2-chart-container {
    position: relative;
    height: 400px;
    margin-top: 1rem;
}
.mp2-mini-chart {
    width: 180px !important;
    height: 180px !important;
    max-width: 180px;
    max-height: 180px;
}
.mp2-traffic-chart {
    max-width: 320px;
    max-height: 320px;
}

/* 5  Zebra striping for analytics table */
.mp2-analytics-table tbody tr:nth-child(even){background-color:#f8f9fa}
[data-mp2-theme="dark"] .mp2-analytics-table tbody tr:nth-child(even){background-color:#2d3139}

/* 7. Row-highlight animation (JS uses it) */
tr.mp2-highlight-row {
    animation: mp2-highlight-fade 5s ease-out;
    background-color: #ffffe0 !important;
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
}
/* 4  Chart header (used in analytics.php) -------------------------- */
/* ==== CHART SECTION ==== */
.mp2-chart-section {
  margin: var(--mp2-space-xl) 0;
  border-radius: var(--mp2-radius-lg);
  box-shadow: var(--mp2-shadow-sm);
  overflow: hidden;
}

.mp2-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--mp2-space-lg);
  flex-wrap: wrap;
  gap: var(--mp2-space-md);
}

.mp2-chart-title {
  font-size: var(--mp2-font-size-xl);
  font-weight: 600;
  color: var(--mp2-gray-800);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--mp2-space-sm);
}

.mp2-chart-controls {
  display: flex;
  align-items: center;
  gap: var(--mp2-space-md);
}

.mp2-chart-controls label {
  margin-right: var(--mp2-space-sm);
  font-weight: 600;
  color: var(--mp2-gray-700);
}

.mp2-chart-container {
  background: white;
  padding: var(--mp2-space-xl);
  border: 1px solid var(--mp2-gray-200);
  border-top: none;
  border-radius: 0;
  position: relative;
  height: 400px;
}

.mp2-chart-canvas {
  max-height: 350px;
}

/* 2  Visitor-breakdown card skins ---------------------------------- */
.mp2-device-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.mp2-device-stat-card {
    background: var(--bg-surface);      /* was #23262F */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* 1.  use a custom variable for the text colour */
.mp2-device-stat-card h3 {
    margin: 0;
    padding: var(--space-4);
    background: #f2ead8;                 /* cream header */
    border-bottom: 1px solid var(--border-color);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mp2-header-text);       /* ← new variable */
    transition: background-color .2s ease, color .2s ease;
}

/* 2.  give the variable a value in each mode */
:root                          { --mp2-header-text: #212121; }   /* light */
[data-mp2-theme="dark"]       { --mp2-header-text: #999; }       /* dark  */

:root                        { --mp2-info-bg: #f2ead8; }   /* light cream */
[data-mp2-theme="dark"]     { --mp2-info-bg: #3c434a; }   /* dark grey  */

/* 3.  dark-mode header background (optional, keep existing) */
[data-mp2-theme="dark"] .mp2-device-stat-card h3 {
    background: var(--bg-hover);
}

/* ==== TRAFFIC SOURCES ==== */
.mp2-traffic-sources {
  background: #bbd4fa;
  padding: var(--mp2-space-xl);
  margin: var(--mp2-space-xl) 0;
  border: 1px solid var(--mp2-gray-200);
  border-radius: var(--mp2-radius-lg);
  box-shadow: var(--mp2-shadow-sm);
}

.mp2-traffic-sources h2 {
  margin: 0 0 var(--mp2-space-xl) 0;
  color: var(--mp2-gray-800);
  font-size: var(--mp2-font-size-2xl);
  font-weight: 700;
}

.mp2-traffic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mp2-space-lg);
  margin-top: var(--mp2-space-xl);
}

.mp2-traffic-card {
  background: var(--mp2-gray-50);
  padding: var(--mp2-space-lg);
  border-radius: var(--mp2-radius-md);
  border: 1px solid var(--mp2-gray-200);
}

.mp2-traffic-card h3 {
  margin: 0 0 var(--mp2-space-md) 0;
  color: var(--mp2-gray-800);
  font-size: var(--mp2-font-size-lg);
  font-weight: 600;
}
/* ==== NEW VISITOR BREAKDOWN CHART STYLES ==== */
.mp2-device-card-content {
  display: flex;
  padding: var(--mp2-space-md);
  gap: var(--mp2-space-md);
  align-items: flex-start;
  min-height: 180px;
}

.mp2-data-column {
  flex: 0 0 40%;
  min-width: 40%;
  font-size: var(--mp2-font-size-sm);
}

.mp2-chart-column {
  flex: 0 0 60%;
  min-width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mp2-space-sm);
}

.mp2-mini-chart {
  width: 180px !important;
  height: 180px !important;
  max-width: 180px;
  max-height: 180px;
}

.mp2-chart-empty {
  color: var(--mp2-gray-500);
  font-style: italic;
  text-align: center;
  font-size: var(--mp2-font-size-sm);
  padding: var(--mp2-space-lg);
}
/* ==== RANKING TABLE ==== */
.mp2-ranking-table {
  margin: var(--mp2-space-xl) 0;
}

.mp2-rank-display {
  display: flex;
  align-items: center;
  gap: var(--mp2-space-sm);
}

.mp2-rank-number {
  background: var(--mp2-gray-100);
  color: var(--mp2-gray-700);
  padding: var(--mp2-space-xs) var(--mp2-space-sm);
  border-radius: var(--mp2-radius-sm);
  font-weight: 600;
  font-size: var(--mp2-font-size-sm);
}

.mp2-trophy {
  font-size: var(--mp2-font-size-lg);
}

.mp2-repost-info {
  display: flex;
  flex-direction: column;
  gap: var(--mp2-space-xs);
}

.mp2-repost-url {
  font-size: var(--mp2-font-size-xs);
  color: var(--mp2-gray-500);
  text-decoration: none;
}

.mp2-repost-url:hover {
  color: var(--mp2-primary);
}

/* CSS for the blinking/zooming icon effect */
.mp2-blink-zoom-icon {
    /* Ensure the link can be animated */
    display: inline-block; 
    
    /* Apply the animation */
    animation: mp2-blink-zoom 0.5s 10 alternate; /* Blink 10 times over 5 seconds */
}

@keyframes mp2-blink-zoom {
    0% {
        transform: scale(1);
        opacity: 1;
        color: #3a93f2; /* Normal link color */
    }
    50% {
        transform: scale(2); /* Zoom in for visibility */
        opacity: 0.8;
        color: #ff0000; /* Red blink color */
    }
    100% {
        transform: scale(1);
        opacity: 1;
        color: #3a93f2;
    }
}

/* New CSS for Title Zoom (Subtle effect) */
.mp2-blink-zoom-title {
    display: inline-block; 
    animation: mp2-blink-zoom-title-keyframes 0.5s 10 alternate; /* Apply animation */
}

@keyframes mp2-blink-zoom-title-keyframes {
    0% {
        transform: scale(1);
        opacity: 1;
        color: inherit;
    }
    50% {
        transform: scale(1.02); /* Subtly zoom in (15% larger) */
        opacity: 0.8;
        color: #2b98e0; /* Highlight color */
    }
    100% {
        transform: scale(1);
        opacity: 1;
        color: inherit;
    }
}
.js-repost-title-wrapper {
    /* Critical: Allows the transform/scale animation to work */
    display: inline-block; 
}

/* === Settings Form Layout === */
.mp2-settings-form {
    max-width: 800px !important;
}

.mp2-setting-row {
    display: flex !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #94a3b8 !important;
}

.mp2-setting-row:last-child {
    border-bottom: none !important;
}

label.mp2-setting-label {
    flex: 0 0 200px !important;
    font-size: 17px!important;
    font-weight: 600 !important;
    padding-right: 20px !important;
    padding-top: 5px !important;
    color: var(--text-secondary);
}

.mp2-setting-field {
    flex: 1 !important;
    line-height: 1.4 !important;
    color: var(--text-secondary);
}

.mp2-setting-field .description {
    margin-top: 5px !important;
    line-height: 1.4 !important;
    color: var(--text-secondary);
}

.mp2-setting-field label {
    margin-bottom: 5px !important;
    display: block !important;
    color: var(--text-secondary);
}

/* Settings description text */
.mp2-setting-description {
    margin-top: 5px !important;
    line-height: 1.4 !important;
    color: var(--text-tertiary) !important;
    font-size: 0.875rem !important;
    font-weight: 400!important;
}

/* Settings checkbox sub-descriptions (indented) */
.mp2-checkbox-description {
    margin-left: 24px !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    color: var(--text-tertiary) !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    font-weight: 400!important;
}
/* Loading state for period buttons */
.mp2-btn-secondary.mp2-loading {
    opacity: 0.6;
    pointer-events: none;
}

.mp2-btn-secondary.mp2-loading::after {
    content: '...';
    margin-left: 5px;
}
.mp2-analytics-filter-form input[type="date"]:hover {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.mp2-analytics-filter-form input[type="date"]:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.mp2-analytics-filter-form button[type="submit"]:hover {
    background: #4338ca !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3);
}