/* Monthly collection metrics; scoped to the monthly plan page. */
/* Local CSS motion inspired by React Bits stagger/reveal patterns; no runtime dependency. */
@property --mp-ring-reveal{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes mp-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes mp-ring-draw{from{--mp-ring-reveal:0%}to{--mp-ring-reveal:100%}}
@keyframes mp-soft-reveal{from{opacity:.35}to{opacity:1}}
#page-monthly-plan .mp-metric-card{animation:mp-enter 320ms var(--ease) both}
#page-monthly-plan .mp-metric-card:nth-child(2){animation-delay:35ms}
#page-monthly-plan .mp-metric-card:nth-child(3){animation-delay:70ms}
#page-monthly-plan .mp-metric-card:nth-child(4){animation-delay:105ms}
#page-monthly-plan .mp-metric-card:nth-child(5){animation-delay:140ms}
#page-monthly-plan .mp-metric-card:nth-child(6){animation-delay:175ms}
#page-monthly-plan .mp-progress-ring{--mp-ring-reveal:100%;mask-image:conic-gradient(#000 var(--mp-ring-reveal),transparent 0);animation:mp-ring-draw 700ms var(--ease) both}
#page-monthly-plan .mp-progress-ring:has(span){mask-image:none;background:conic-gradient(var(--seed-primary) min(var(--mp-progress),var(--mp-ring-reveal)),var(--line) 0)}
#page-monthly-plan .mp-group{animation:mp-enter 280ms var(--ease) both}
#page-monthly-plan .mp-month-rows:not(.is-collapsed){animation:mp-soft-reveal 180ms ease-out}
:is(#page-monthly-plan,#mpCreateDrawer,#mpPreviewLayer,#mpManageLayer,.mp-action-dialog) :is(.btn,.close-x,.mp-month-toggle,.mp-list-scopes button,.mpc-options label){transition:background-color 180ms var(--ease),border-color 180ms var(--ease),box-shadow 180ms var(--ease),color 180ms var(--ease),transform 180ms var(--ease)}
@media(hover:hover){:is(#page-monthly-plan,#mpCreateDrawer,#mpPreviewLayer,#mpManageLayer,.mp-action-dialog) :is(.btn,.close-x):not(:disabled):hover{transform:translateY(-1px)}}
:is(#page-monthly-plan,#mpCreateDrawer,#mpPreviewLayer,#mpManageLayer,.mp-action-dialog) :is(.btn,.close-x):not(:disabled):active{transform:translateY(0);transition-duration:80ms}
#mpPreviewLayer,#mpManageLayer{transition:transform 280ms var(--ease)}
#mpPreviewLayer.show .layer-body,#mpManageLayer.show .layer-body{animation:mp-enter 260ms var(--ease) both}
.mp-action-dialog[open]{animation:mp-enter 220ms var(--ease) both}
@media(prefers-reduced-motion:reduce){
 :is(#page-monthly-plan,#mpCreateDrawer,#mpPreviewLayer,#mpManageLayer,.mp-action-dialog),:is(#page-monthly-plan,#mpCreateDrawer,#mpPreviewLayer,#mpManageLayer,.mp-action-dialog) *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 #page-monthly-plan .mp-progress-ring{--mp-ring-reveal:100%}
 :is(#page-monthly-plan,#mpCreateDrawer,#mpPreviewLayer,#mpManageLayer,.mp-action-dialog) :is(.btn,.close-x):hover{transform:none}
}
.mp-list-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding:3px;margin-bottom:16px}
.mp-list-toolbar .mp-list-scopes{margin-bottom:0;flex:none}
.mp-list-filters{display:flex;flex:1;gap:6px;align-items:center;min-width:398px}
.mp-list-filters label{position:relative;flex:1;min-width:76px;color:var(--txt-2)}
.mp-list-filters label:last-of-type{flex:1.35;min-width:100px}
.mp-filter-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mp-list-filters .input{width:100%;min-width:0;height:34px;padding:6px;font-size:12px}
.mp-list-filters button{flex:none;padding:6px 8px;white-space:nowrap}
.mp-list-filters :focus-visible,.mp-list-toolbar button:focus-visible{outline:2px solid var(--seed-primary);outline-offset:2px}
.mp-list-scopes{margin-bottom:16px;max-width:100%}
.mp-scope-message{font-size:13px;color:var(--txt-2);padding:18px 0}
.mp-month-toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 0;border:0;background:none;color:var(--txt-1);font:inherit;cursor:pointer;white-space:nowrap}
.mp-month-rows.is-collapsed>tr:not(:first-child){display:none}
.mp-month-rows.is-collapsed>tr:first-child>td:not(:first-child)>*{visibility:hidden}
.mp-month-rows.is-collapsed>tr:first-child>td:not(:first-child){visibility:visible;color:transparent;user-select:none}
.mp-month-rows.is-collapsed>tr:first-child{background:var(--bg-violet-soft);transition:background-color 180ms var(--ease)}
.mp-month-rows.is-collapsed>tr:first-child:hover{background:color-mix(in srgb,var(--seed-primary) 12%,var(--bg-surface))}
.mp-month-rows.is-collapsed .mp-month-toggle{font-weight:650}
.mp-month-rows.is-collapsed .mp-month-toggle>span{color:var(--seed-primary)}
.mp-month-scroll{overflow-x:auto;max-width:100%}
.mp-month-table{width:100%;min-width:860px;border-collapse:collapse;text-align:left}
.mp-month-table th,.mp-month-table td{padding:14px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
.mp-month-table th{background:var(--bg-soft);color:var(--txt-3);font-weight:500;white-space:nowrap}
.mp-month-table td:nth-child(1),.mp-month-table td:nth-child(2),.mp-month-table td:nth-child(7){white-space:nowrap}
.mp-month-table .mp-actions{flex-wrap:nowrap}
.mp-month-toggle:focus-visible,.mp-month-scroll:focus-visible{outline:2px solid var(--seed-primary);outline-offset:2px}
#page-monthly-plan #mpTabs{display:none}
.mp-list-head-actions{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}
.mp-list-month{display:flex;align-items:center;gap:8px;color:var(--txt-2);font-size:12px;white-space:nowrap}
.mp-list-month input{width:160px;max-width:100%;min-width:0;height:34px;padding:6px 10px;color-scheme:light dark}
#mpCollectionStatus.mp-metrics{display:block;padding:0;background:transparent}
.mp-metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.mp-progress-content{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}
.mp-progress-ring{display:grid;place-items:center;position:relative;width:58px;height:58px;flex:none;border-radius:50%;background:conic-gradient(var(--seed-primary) var(--mp-progress),var(--line) 0)}
.mp-progress-ring:before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--bg-soft)}
.mp-progress-ring span{position:relative;color:var(--seed-primary);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.mp-progress-count{color:var(--txt-2);font-size:11px;white-space:nowrap}
@media(min-width:761px) and (max-width:1150px){.mp-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mp-metric-card{--mp-metric-color:var(--blue);position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:104px;padding:14px 12px 16px;background:var(--bg-soft);border:0;border-radius:16px}
.mp-metric-card:hover,.mp-metric-card:focus-within{z-index:40}
.mp-metric-card.mp-metric-target{--mp-metric-color:var(--blue)}
.mp-metric-card.mp-metric-audited{--mp-metric-color:var(--green)}
.mp-metric-card.mp-metric-reported{--mp-metric-color:var(--violet)}
.mp-metric-card.mp-metric-review{--mp-metric-color:var(--orange)}
.mp-metric-card.mp-metric-pending{--mp-metric-color:var(--txt-2)}
.mp-metric-head{position:relative;z-index:2;min-width:0}
.mp-metric-title{display:inline-flex;align-items:center;gap:7px;min-width:0;border-radius:8px;cursor:help}
.mp-metric-title:focus-visible{outline:2px solid var(--mp-metric-color);outline-offset:3px}
.mp-metric-label{font-size:12px;font-weight:600;color:var(--txt-2);line-height:1.5}
.mp-metric-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--mp-metric-color) 12%,var(--bg-surface));color:var(--mp-metric-color)}
.mp-metric-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mp-metric-tooltip{position:absolute;z-index:30;left:0;top:calc(100% + 8px);width:max-content;max-width:220px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--mp-metric-color) 24%,var(--line));border-radius:10px;background:var(--bg-surface);box-shadow:0 10px 24px color-mix(in srgb,var(--seed-fg) 12%,transparent);color:var(--txt-1);font-size:12px;font-weight:400;line-height:1.55;opacity:0;visibility:hidden;transform:translateY(-3px);pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
.mp-metric-card:nth-child(n+4) .mp-metric-tooltip{right:0;left:auto}
@media(min-width:761px) and (max-width:1150px){.mp-metric-card:nth-child(3n) .mp-metric-tooltip{right:0;left:auto}}
.mp-metric-head:hover .mp-metric-tooltip,.mp-metric-title:focus-visible+.mp-metric-tooltip{opacity:1;visibility:visible;transform:translateY(0)}
.mp-metric-card strong{position:relative;z-index:1;margin-top:auto;color:var(--mp-metric-color);font-size:25px;font-weight:800;line-height:1.15;letter-spacing:-.04em;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-variant-numeric:tabular-nums}
.mp-metric-card small{font-size:11px;font-weight:400;color:var(--txt-3);margin-left:5px}
@media(max-width:760px){.mp-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mp-metric-card{min-height:96px}.mp-list-head-actions{width:100%;margin-left:0;flex-wrap:wrap}.mp-list-month{flex:1;min-width:190px}.mp-list-month input{flex:1;width:auto}}

/* 月度计划直接以统计区开篇，保留原指标与列表行为。 */
#page-monthly-plan #mpCollectionStatus{display:flex;flex-direction:column;gap:0;min-height:316px;margin-bottom:18px;padding:0 18px 18px;background:var(--bg-surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);color:var(--txt-1)}
#page-monthly-plan .mp-stats-head{display:flex;align-items:center;min-height:60px;border-bottom:1px solid var(--line);margin-bottom:16px}
#page-monthly-plan .mp-stats-head h2{display:flex;align-items:center;gap:12px;margin:0;font-size:17px;font-weight:750;line-height:1.3}
#page-monthly-plan .mp-stats-head h2::before{content:'';display:block;flex:none;width:4px;height:20px;border-radius:3px;background:var(--seed-primary)}
#page-monthly-plan .m-card-head h2{font-size:17px;font-weight:750;line-height:1.3}
#page-monthly-plan .mp-group .m-card-head::before{display:none}
#page-monthly-plan .mp-group .m-card-head h2{border-left:4px solid var(--seed-primary);padding-left:10px}
#page-monthly-plan .mp-group .m-card-head{min-height:67px;margin:-16px -18px 16px;padding:16px 18px;background:var(--bg-surface);border-bottom:1px solid var(--line);border-radius:17px 17px 0 0}
#page-monthly-plan .mp-metric-grid{margin-block:0 auto;padding:0;grid-template-columns:repeat(6,minmax(0,1fr))}
#page-monthly-plan .mp-metric-card{min-height:104px;padding:14px 12px 16px;border-radius:16px}
#page-monthly-plan .mp-metric-head{min-height:28px}
#page-monthly-plan .mp-metric-card strong{font-size:25px}
#page-monthly-plan .mp-metric-progress{gap:8px;padding:12px 12px 14px}
#page-monthly-plan .mp-progress-ring{width:42px;height:42px}
html[data-theme="light"] #page-monthly-plan .mp-metric-target{background:#F4F4FE}
html[data-theme="light"] #page-monthly-plan .mp-metric-audited{background:#EFF8F4}
html[data-theme="light"] #page-monthly-plan .mp-metric-reported{background:#F1F0FE}
html[data-theme="light"] #page-monthly-plan .mp-metric-review{background:#FFF7EC;--mp-metric-color:#A66A17}
html[data-theme="light"] #page-monthly-plan .mp-metric-pending{background:#F7F7FA}
html[data-theme="light"] #page-monthly-plan .mp-metric-progress{background:#F4F4FE}
#page-monthly-plan .mp-stats-empty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0 2px;font-size:13px}
#page-monthly-plan .mp-stats-empty span{color:var(--txt-3)}
@media(min-width:1151px){#page-monthly-plan #mpCollectionStatus{min-height:200px}}
@media(min-width:761px) and (max-width:1150px){#page-monthly-plan .mp-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){#page-monthly-plan #mpCollectionStatus{padding:0 14px 14px}#page-monthly-plan .mp-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}