/* =======================================================================
   喵莉糍 · Theme Bridge
   Maps --mi-* design tokens to dashboard-kawaii hardcoded colors.
   When user switches theme (sakura/matcha/milk/lavender), this file
   makes the entire dashboard UI respond.
   
   Loaded AFTER dashboard-kawaii.css and marketplace-kawaii.css.
   ======================================================================= */

/* -----------------------------------------------------------------------
   Matcha Green Theme
   ----------------------------------------------------------------------- */
body.miaolici-dashboard-skin[data-mi-theme="matcha"] {
  background:
    radial-gradient(circle at 16% 6%, rgba(200, 230, 210, 0.9), transparent 24rem),
    radial-gradient(circle at 92% 8%, rgba(220, 240, 225, 0.72), transparent 22rem),
    linear-gradient(115deg, #f3faed 0%, #f8fcf5 48%, #eef7e8 100%) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(234, 248, 238, 0.96) 100%) !important;
  border-right-color: rgba(122, 194, 138, 0.34) !important;
  box-shadow:
    14px 0 42px rgba(122, 194, 138, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.88) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] header.glass .mk-topbar-actions {
  border-color: rgba(122, 194, 138, 0.32) !important;
  background: rgba(234, 248, 238, 0.94) !important;
  box-shadow:
    0 18px 36px rgba(90, 174, 125, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] header.glass .mk-topbar-balance-pill {
  background: linear-gradient(135deg, #7ac28a 0%, #5fae7d 100%) !important;
  box-shadow: 0 14px 24px rgba(90, 174, 125, 0.26) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] header.glass .mk-topbar-control-button:hover,
body.miaolici-dashboard-skin[data-mi-theme="matcha"] header.glass .mk-topbar-control-link:hover {
  color: #5fae7d !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] main .card {
  border-color: rgba(122, 194, 138, 0.28) !important;
  box-shadow: 0 16px 36px rgba(122, 194, 138, 0.1) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] .sidebar-link.mk-active,
body.miaolici-dashboard-skin[data-mi-theme="matcha"] .sidebar-link.router-link-exact-active,
body.miaolici-dashboard-skin[data-mi-theme="matcha"] .sidebar-link-active {
  background: linear-gradient(135deg, rgba(234, 248, 238, 0.98), rgba(210, 240, 218, 0.98)) !important;
  color: #459e6d !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] .btn-primary,
body.miaolici-dashboard-skin[data-mi-theme="matcha"] .btn.btn-primary {
  background: linear-gradient(135deg, #8bce99 0%, #5fae7d 48%, #459e6d 100%) !important;
  box-shadow: 0 16px 30px rgba(90, 174, 125, 0.22) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] .mk-square-hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.2), transparent 40%),
    linear-gradient(135deg, #7ac28a 0%, #9fd4ab 40%, #bde0c5 80%, #d4ead8 100%) !important;
  box-shadow: 0 20px 48px rgba(90, 174, 125, 0.2) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] .mk-square-card {
  border-color: rgba(122, 194, 138, 0.2) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] .mk-square-card:hover {
  border-color: rgba(95, 174, 125, 0.4) !important;
  box-shadow:
    0 16px 40px rgba(90, 174, 125, 0.12),
    0 0 0 1px rgba(95, 174, 125, 0.1) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] .mk-market-button.primary,
body.miaolici-dashboard-skin[data-mi-theme="matcha"] .mk-square-key-action.primary {
  background: linear-gradient(135deg, #7ac28a 0%, #459e6d 100%) !important;
  box-shadow: 0 8px 24px rgba(69, 158, 109, 0.24) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="matcha"] .mk-stat-card {
  border-color: rgba(122, 194, 138, 0.32) !important;
  box-shadow: 0 14px 30px rgba(122, 194, 138, 0.1) !important;
}

/* -----------------------------------------------------------------------
   Milk / Cream Theme
   ----------------------------------------------------------------------- */
body.miaolici-dashboard-skin[data-mi-theme="milk"] {
  background:
    radial-gradient(circle at 16% 6%, rgba(255, 228, 230, 0.9), transparent 24rem),
    radial-gradient(circle at 92% 8%, rgba(255, 248, 232, 0.72), transparent 22rem),
    linear-gradient(115deg, #fff8ef 0%, #fffdf9 48%, #fdeaee 100%) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="milk"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 248, 240, 0.96) 100%) !important;
  border-right-color: rgba(226, 122, 144, 0.28) !important;
  box-shadow:
    14px 0 42px rgba(226, 122, 144, 0.06),
    inset -1px 0 0 rgba(255, 255, 255, 0.88) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="milk"] header.glass .mk-topbar-actions {
  border-color: rgba(226, 122, 144, 0.26) !important;
  background: rgba(255, 248, 240, 0.94) !important;
  box-shadow:
    0 18px 36px rgba(226, 122, 144, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="milk"] header.glass .mk-topbar-balance-pill {
  background: linear-gradient(135deg, #ea95a8 0%, #e27a90 100%) !important;
  box-shadow: 0 14px 24px rgba(226, 122, 144, 0.22) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="milk"] main .card {
  border-color: rgba(226, 122, 144, 0.22) !important;
  box-shadow: 0 16px 36px rgba(226, 122, 144, 0.08) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="milk"] .mk-square-hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.2), transparent 40%),
    linear-gradient(135deg, #ffa5be 0%, #ffd4e1 40%, #fff0f4 80%, #fff8ef 100%) !important;
  box-shadow: 0 20px 48px rgba(226, 122, 144, 0.16) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="milk"] .mk-stat-card {
  border-color: rgba(226, 122, 144, 0.26) !important;
}

/* -----------------------------------------------------------------------
   Lavender Theme
   ----------------------------------------------------------------------- */
body.miaolici-dashboard-skin[data-mi-theme="lavender"] {
  background:
    radial-gradient(circle at 16% 6%, rgba(230, 215, 250, 0.9), transparent 24rem),
    radial-gradient(circle at 92% 8%, rgba(245, 232, 250, 0.72), transparent 22rem),
    linear-gradient(115deg, #f5eefd 0%, #faf6ff 48%, #ece0fa 100%) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(240, 232, 252, 0.96) 100%) !important;
  border-right-color: rgba(154, 117, 219, 0.28) !important;
  box-shadow:
    14px 0 42px rgba(154, 117, 219, 0.08),
    inset -1px 0 0 rgba(255, 255, 255, 0.88) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] header.glass .mk-topbar-actions {
  border-color: rgba(154, 117, 219, 0.28) !important;
  background: rgba(240, 232, 252, 0.94) !important;
  box-shadow:
    0 18px 36px rgba(154, 117, 219, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] header.glass .mk-topbar-balance-pill {
  background: linear-gradient(135deg, #b293e6 0%, #9a75db 100%) !important;
  box-shadow: 0 14px 24px rgba(154, 117, 219, 0.26) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] header.glass .mk-topbar-control-button:hover,
body.miaolici-dashboard-skin[data-mi-theme="lavender"] header.glass .mk-topbar-control-link:hover {
  color: #9a75db !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] main .card {
  border-color: rgba(154, 117, 219, 0.22) !important;
  box-shadow: 0 16px 36px rgba(154, 117, 219, 0.08) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] .sidebar-link.mk-active,
body.miaolici-dashboard-skin[data-mi-theme="lavender"] .sidebar-link.router-link-exact-active,
body.miaolici-dashboard-skin[data-mi-theme="lavender"] .sidebar-link-active {
  background: linear-gradient(135deg, rgba(240, 232, 252, 0.98), rgba(225, 210, 248, 0.98)) !important;
  color: #7d59c3 !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] .btn-primary,
body.miaolici-dashboard-skin[data-mi-theme="lavender"] .btn.btn-primary {
  background: linear-gradient(135deg, #b293e6 0%, #9a75db 48%, #7d59c3 100%) !important;
  box-shadow: 0 16px 30px rgba(154, 117, 219, 0.22) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] .mk-square-hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.2), transparent 40%),
    linear-gradient(135deg, #9a75db 0%, #b293e6 40%, #d5bcf0 80%, #ead9fa 100%) !important;
  box-shadow: 0 20px 48px rgba(154, 117, 219, 0.2) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] .mk-square-card:hover {
  border-color: rgba(154, 117, 219, 0.36) !important;
  box-shadow:
    0 16px 40px rgba(154, 117, 219, 0.12),
    0 0 0 1px rgba(154, 117, 219, 0.1) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] .mk-market-button.primary,
body.miaolici-dashboard-skin[data-mi-theme="lavender"] .mk-square-key-action.primary {
  background: linear-gradient(135deg, #b293e6 0%, #7d59c3 100%) !important;
  box-shadow: 0 8px 24px rgba(125, 89, 195, 0.24) !important;
}

body.miaolici-dashboard-skin[data-mi-theme="lavender"] .mk-stat-card {
  border-color: rgba(154, 117, 219, 0.26) !important;
  box-shadow: 0 14px 30px rgba(154, 117, 219, 0.1) !important;
}

/* -----------------------------------------------------------------------
   Dark Mode (all themes)
   ----------------------------------------------------------------------- */
body.miaolici-dashboard-skin[data-mi-mode="dark"] {
  background: #1a1a2e !important;
  color: #e0dce4 !important;
}

body.miaolici-dashboard-skin[data-mi-mode="dark"] .sidebar {
  background: rgba(26, 26, 46, 0.95) !important;
  border-right-color: rgba(255, 127, 176, 0.15) !important;
}

body.miaolici-dashboard-skin[data-mi-mode="dark"] main .card {
  background: rgba(30, 30, 52, 0.9) !important;
  border-color: rgba(255, 127, 176, 0.12) !important;
  color: #e0dce4 !important;
}

body.miaolici-dashboard-skin[data-mi-mode="dark"] header.glass {
  background: rgba(26, 26, 46, 0.85) !important;
  border-bottom-color: rgba(255, 127, 176, 0.1) !important;
}

body.miaolici-dashboard-skin[data-mi-mode="dark"] header.glass .mk-topbar-actions {
  background: rgba(30, 30, 52, 0.9) !important;
  border-color: rgba(255, 127, 176, 0.18) !important;
}

body.miaolici-dashboard-skin[data-mi-mode="dark"] .mk-square-card {
  background: rgba(30, 30, 52, 0.95) !important;
  border-color: rgba(255, 127, 176, 0.12) !important;
  color: #e0dce4 !important;
}

body.miaolici-dashboard-skin[data-mi-mode="dark"] .mk-square-sidebar {
  background: rgba(26, 26, 46, 0.95) !important;
  border-color: rgba(255, 127, 176, 0.12) !important;
}

body.miaolici-dashboard-skin[data-mi-mode="dark"] .mk-square-content {
  background: rgba(22, 22, 40, 0.95) !important;
  border-color: rgba(255, 127, 176, 0.1) !important;
}

body.miaolici-dashboard-skin[data-mi-mode="dark"] .mk-square-title h3 {
  color: #f0ecf4 !important;
}

body.miaolici-dashboard-skin[data-mi-mode="dark"] .mk-stat-card {
  background: rgba(30, 30, 52, 0.95) !important;
  border-color: rgba(255, 127, 176, 0.15) !important;
}