/* DEV94. Match Year comparison content arrangement to Month's previous-year card.
   Layout only; no year/month totals, percentage arithmetic or handlers are modified. */
@media (max-width:900px) and (pointer:coarse),
       (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card{
    min-height:78px!important;
    height:78px!important;
    padding:11px 12px!important;
    display:grid!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .analytics-card-icon{
    position:static!important;
    inset:auto!important;
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    min-height:30px!important;
    margin:0!important;
    transform:none!important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:minmax(80px,1fr) minmax(0,2fr)!important;
    grid-template-areas:"label amount"!important;
    column-gap:8px!important;
    row-gap:0!important;
    align-items:center!important;
    align-content:center!important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body > #annualYearCompareLabel{
    grid-area:label!important;
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    color:var(--text-muted)!important;
    font-size:12px!important;
    font-weight:400!important;
    line-height:1.2!important;
    text-align:left!important;
    overflow:hidden!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    text-overflow:clip!important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-body > #annualYearCompareNote{
    grid-area:amount!important;
    display:block!important;
    box-sizing:border-box!important;
    justify-self:center!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    color:var(--text)!important;
    font-size:clamp(12px,4.4vw,19px)!important;
    font-weight:760!important;
    line-height:1!important;
    letter-spacing:-.03em!important;
    text-align:center!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:clip!important;
  }
  #incomeAnalytics:not(.is-monthly) > .analytics-cards > .analytics-card.annual-year-compare-card > .annual-year-compare-percent{
    position:absolute!important;
    top:8px!important;
    right:9px!important;
    margin:0!important;
  }
}

/* DEV342: soften desktop statistics glow to match the top panel, keeping it bottom-left. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income #incomeAnalytics:not(.is-settings-open){
    background:
      radial-gradient(92% 135% at 0% 100%,
        color-mix(in srgb,var(--primary) 8%,transparent),
        transparent 60%),
      linear-gradient(145deg,
        color-mix(in srgb,var(--panel) 92%,transparent),
        color-mix(in srgb,#07111e 94%,transparent)) !important;
  }
}

/* DEV344: bring recent income cards closer to the statistics card material on desktop. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent-card{
    background:
      linear-gradient(150deg,
        color-mix(in srgb,#0b1727 82%,transparent),
        color-mix(in srgb,#070e18 89%,transparent)) !important;
    border-color:color-mix(in srgb,var(--border) 84%,#7da9df 16%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.024),
      0 5px 14px rgba(0,0,0,.10) !important;
    backdrop-filter:blur(7px) saturate(1.02);
    -webkit-backdrop-filter:blur(7px) saturate(1.02);
  }

  #income .income-recent-card:hover:not(.is-selected){
    background:
      linear-gradient(150deg,
        color-mix(in srgb,#0d1b2d 85%,transparent),
        color-mix(in srgb,#08111d 91%,transparent)) !important;
    border-color:color-mix(in srgb,var(--primary) 28%,var(--border)) !important;
  }

  #income .income-recent-category{
    padding:5px 10px !important;
    border:1px solid color-mix(in srgb,currentColor 38%,var(--border)) !important;
    border-radius:10px !important;
    background:color-mix(in srgb,currentColor 8%,transparent) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.022) !important;
    font-weight:650 !important;
  }

  #income .income-recent-amount{
    font-size:27px !important;
    font-weight:780 !important;
    letter-spacing:-.025em !important;
  }

  #income .income-recent-date{
    color:color-mix(in srgb,var(--text-muted) 92%,white 8%) !important;
  }
}

/* DEV357: make recent income cards visually match the lower statistics cards on desktop. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent-card{
    overflow:hidden !important;
    border-radius:18px !important;
    background:var(--panel-muted) !important;
    border-color:color-mix(in srgb,var(--primary) 24%,var(--border)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02),
      0 5px 14px rgba(0,0,0,.10) !important;
  }

  #income .income-recent-card::after{
    content:"";
    position:absolute;
    z-index:0;
    right:-48px;
    bottom:-74px;
    width:140px;
    height:140px;
    border-radius:50%;
    background:color-mix(in srgb,var(--primary) 8%,transparent);
    pointer-events:none;
  }

  #income .income-recent-amount,
  #income .income-recent-category,
  #income .income-recent-date{
    position:relative;
    z-index:1;
  }

  #income .income-recent-edit{
    z-index:2;
  }

  #income .income-recent-category{
    border-color:color-mix(in srgb,var(--primary) 32%,var(--border)) !important;
    background:color-mix(in srgb,var(--primary) 9%,transparent) !important;
    color:var(--primary) !important;
  }

  #income .income-recent-date{
    color:color-mix(in srgb,var(--text-muted) 78%,transparent) !important;
  }

  #income .income-recent-card:hover:not(.is-selected){
    background:color-mix(in srgb,var(--primary) 4%,var(--panel-muted)) !important;
    border-color:color-mix(in srgb,var(--primary) 36%,var(--border)) !important;
  }
}

/* DEV358: remove the overly blue card fill and match the dark statistics material on desktop. */
@media (hover:hover) and (pointer:fine), (pointer:coarse) and (min-width:901px) and (max-width:1200px){
  #income .income-recent-card{
    background:
      linear-gradient(150deg,
        color-mix(in srgb,#0b1727 82%,transparent),
        color-mix(in srgb,#070e18 91%,transparent)) !important;
    border-color:color-mix(in srgb,var(--border) 86%,#7da9df 14%) !important;
  }

  #income .income-recent-card::after{
    background:color-mix(in srgb,var(--primary) 5%,transparent) !important;
  }

  #income .income-recent-card:hover:not(.is-selected){
    background:
      linear-gradient(150deg,
        color-mix(in srgb,#0d1b2d 84%,transparent),
        color-mix(in srgb,#08111d 92%,transparent)) !important;
    border-color:color-mix(in srgb,var(--primary) 28%,var(--border)) !important;
  }
}

/* Trial v2: one navy material for touch/mobile dashboard surfaces.
   Color-only overrides: existing geometry, type, chart and semantic ink stay intact. */
@media (max-width:900px) and (pointer:coarse),
       (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  html[data-theme="dark"] #income{
    --qp-mobile-card:#0c192b;
    --qp-mobile-card-deep:#091321;
    --qp-mobile-blue:#739bce;
    --qp-mobile-edge:color-mix(in srgb,var(--border) 72%,var(--qp-mobile-blue));
    --qp-mobile-cloud:color-mix(in srgb,var(--qp-mobile-blue) 16%,transparent);
  }

  html[data-theme="dark"] #income .income-top,
  html[data-theme="dark"] #income #incomeAnalytics:not(.is-settings-open){
    background:linear-gradient(145deg,var(--qp-mobile-card),var(--qp-mobile-card-deep)) !important;
    border-color:var(--qp-mobile-edge) !important;
  }

  html[data-theme="dark"] #income .income-recent-card,
  html[data-theme="dark"] #income #incomeAnalytics :is(.analytics-card,.annual-total-card,.monthly-total-card,.monthly-summary-card,.monthly-category-card,.analytics-category-panel){
    background-color:var(--qp-mobile-card) !important;
    border-color:var(--qp-mobile-edge) !important;
  }

  html[data-theme="dark"] #income .income-recent-card::after,
  html[data-theme="dark"] #income #incomeAnalytics :is(.analytics-card,.monthly-summary-card,.monthly-category-card,.analytics-category-panel)::after{
    background-color:var(--qp-mobile-cloud) !important;
  }

  /* Keep green/red meaning in the text and icons, soften only the decorative clouds. */
  html[data-theme="dark"] #income #incomeAnalytics .analytics-card-best::after{
    background-color:color-mix(in srgb,var(--success) 5%,var(--qp-mobile-cloud)) !important;
  }
  html[data-theme="dark"] #income #incomeAnalytics .analytics-card-worst::after{
    background-color:color-mix(in srgb,var(--danger) 5%,var(--qp-mobile-cloud)) !important;
  }

  html[data-theme="dark"] #income #incomeAnalytics .analytics-mode-tabs,
  html[data-theme="dark"] #income #incomeAnalytics #analyticsSettingsToggle{
    background-color:var(--qp-mobile-card-deep) !important;
    border-color:var(--qp-mobile-edge) !important;
  }
  html[data-theme="dark"] #income #incomeAnalytics .analytics-mode-tab.active{
    background-color:color-mix(in srgb,var(--primary) 18%,var(--qp-mobile-card)) !important;
    border-color:color-mix(in srgb,var(--primary) 40%,var(--qp-mobile-edge)) !important;
  }
}

/* DEV384: extend the approved DEV383 material to history and settings.
   Reuse the dashboard's scoped palette; no geometry, typography or semantic ink changes. */
@media (max-width:900px) and (pointer:coarse),
       (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  html[data-theme="dark"] #income #incomeAnalytics.is-settings-open{
    background:linear-gradient(145deg,var(--qp-mobile-card),var(--qp-mobile-card-deep)) !important;
    border-color:var(--qp-mobile-edge) !important;
  }

  html[data-theme="dark"] #income #history .income-table-section,
  html[data-theme="dark"] #income #history #incomeList > .history-swipe-row .history-card-surface,
  html[data-theme="dark"] #income #incomeAnalytics #settings :is(.settings-card,.qp-category-item,.qp-background-option){
    background-color:var(--qp-mobile-card) !important;
    border-color:var(--qp-mobile-edge) !important;
  }

  html[data-theme="dark"] #income #history #historySearch,
  html[data-theme="dark"] #income #incomeAnalytics #settings :is(.qp-settings-tabs,.qp-category-add input,.qp-account-email,#qpBillingTerm){
    background-color:var(--qp-mobile-card-deep) !important;
    border-color:var(--qp-mobile-edge) !important;
  }

  html[data-theme="dark"] #income #history #incomeList > .history-swipe-row .history-card-surface > div:nth-child(3){
    background-color:var(--qp-mobile-cloud) !important;
    border-color:var(--qp-mobile-edge) !important;
  }

  html[data-theme="dark"] #income #history .income-history-report-btn,
  html[data-theme="dark"] #income #history #incomeList > .history-swipe-row .edit-income,
  html[data-theme="dark"] #income #incomeAnalytics #settings .btn-secondary:not(#clearIncomeDataBtn):not(#qpAuthDeleteAccountBtn),
  html[data-theme="dark"] #income #incomeAnalytics #settings #qpBillingPurchase,
  html[data-theme="dark"] #income #incomeAnalytics #settings .qp-category-add button,
  html[data-theme="dark"] #income #incomeAnalytics #settings .qp-settings-tab.active{
    background-color:color-mix(in srgb,var(--primary) 18%,var(--qp-mobile-card)) !important;
    border-color:color-mix(in srgb,var(--primary) 40%,var(--qp-mobile-edge)) !important;
  }

  html[data-theme="dark"] #income #incomeAnalytics #settings .qp-settings-tab:not(.active){
    background-color:var(--qp-mobile-card-deep) !important;
  }

  html[data-theme="dark"] #income #history #historySearch:focus,
  html[data-theme="dark"] #income #incomeAnalytics #settings .qp-category-add input:focus,
  html[data-theme="dark"] #income #incomeAnalytics #settings .qp-background-option.active{
    border-color:color-mix(in srgb,var(--primary) 40%,var(--qp-mobile-edge)) !important;
  }

  html[data-theme="dark"] #income #history .income-history-report-btn:is(:hover,:active),
  html[data-theme="dark"] #income #incomeAnalytics #settings .btn-secondary:not(#clearIncomeDataBtn):not(#qpAuthDeleteAccountBtn):is(:hover,:active),
  html[data-theme="dark"] #income #incomeAnalytics #settings .qp-category-add button:is(:hover,:active){
    background-color:color-mix(in srgb,var(--primary) 24%,var(--qp-mobile-card)) !important;
    border-color:color-mix(in srgb,var(--primary) 40%,var(--qp-mobile-edge)) !important;
  }

  /* Danger remains red; category icons, swatches and image previews are deliberately untouched. */
  html[data-theme="dark"] #income #incomeAnalytics #settings :is(#clearIncomeDataBtn,#qpAuthDeleteAccountBtn){
    background-color:color-mix(in srgb,var(--danger) 10%,var(--qp-mobile-card)) !important;
    border-color:color-mix(in srgb,var(--danger) 42%,var(--qp-mobile-edge)) !important;
  }
  html[data-theme="dark"] #income #incomeAnalytics #settings :is(#clearIncomeDataBtn,#qpAuthDeleteAccountBtn):is(:hover,:active){
    background-color:color-mix(in srgb,var(--danger) 16%,var(--qp-mobile-card)) !important;
  }
}

/* DEV385: mobile-only spacing and controls; retain the approved palette. */
@media (max-width:900px) and (pointer:coarse),
       (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  #income #incomeRecent .income-recent-controls{position:relative;top:3px;}
  #income #incomeRecent.is-collapsed .income-recent-controls{top:8.5px;}
  #income #incomeRecent .income-recent-bottom-actions{position:relative;top:5.5px;}
  #income #incomeRecent.is-history-open #incomeRecentHistory{
    width:100% !important;justify-content:center !important;
  }
  #income #incomeRecentHistory .income-history-collapse-icon{
    display:block;width:20px;height:20px;transform:rotate(180deg);
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  }
  #income #settings #qpBillingPurchase{border-style:solid !important;}
  #income #settings :is(#qpAccountCard,#qpDataCard) > .settings-title{display:none !important;}
  #income #settings #qpAccountCard .qp-account-row,
  #income #settings #qpDataCard > div[style]{margin-top:0 !important;}
  #income #settings #qpAppearanceCard .settings-row{
    border-bottom:0 !important;padding-bottom:0 !important;
  }
  #income #settings #qpBackgroundHelp{font-size:13.6px !important;}
  #income #settings .qp-settings-label-desktop{display:none !important;}
  #income #settings .qp-settings-label-mobile{display:inline !important;}
  #income #openIncomeForm{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 10px) !important;}
}

/* Mobile: make add/edit income use the same approved navy material as the other cards. */
@media (max-width:900px) and (pointer:coarse),
       (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  html[data-theme="dark"] #income #incomeForm.income-form,
  html[data-theme="dark"] #income #history > #incomeForm.income-form{
    background:linear-gradient(145deg,var(--qp-mobile-card),var(--qp-mobile-card-deep)) !important;
    border-color:var(--qp-mobile-edge) !important;
  }
}

/* iPhone/iPad Safari: keep the background edge-to-edge, but start page content below the real top safe area. */
@supports (-webkit-touch-callout:none){
  @media (max-width:900px) and (pointer:coarse),
         (orientation:landscape) and (max-height:560px) and (pointer:coarse){
    main{
      padding-top:calc(12px + env(safe-area-inset-top)) !important;
    }
  }
}