/* Shared MINOCALE surfaces. Geometry and financial meaning stay with the app. */
.item-filter-heading { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0 8px; margin:0 0 10px; background:var(--mn-surface); color:var(--mn-ink); border-bottom:1px solid var(--mn-line); font-size:13px; font-weight:600; }
body .item-filter-close { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; margin:0; border:1px solid var(--mn-line); border-radius:12px; background:var(--mn-soft); color:var(--mn-ink); font:26px/1 Arial,sans-serif; cursor:pointer; }
body .item-filter-close:hover { background:var(--mn-selected); }
body:is(body,.dark-mode) {
  --mc-paper: var(--mn-paper);
  --mc-surface: var(--mn-surface);
  --mc-soft: var(--mn-soft);
  --mc-line: var(--mn-line);
  --mc-ink: var(--mn-ink);
  --mc-muted: var(--mn-muted);
  --mc-primary: var(--mn-accent);
  --mc-on-primary: #fff;
  --text-color: var(--mn-ink);
  --card-bg: var(--mn-surface);
  background: var(--mn-paper);
  color: var(--mn-ink);
  accent-color: var(--mn-accent);
  color-scheme: light;
}
body:is(body,.dark-mode).dark-mode { --mc-on-primary: #183824; color-scheme: dark; }
body:is(body,.dark-mode) > .container {
  background: var(--mn-surface) !important;
  border: 1px solid var(--mn-line);
  box-shadow: var(--mn-shadow) !important;
}
body:is(body,.dark-mode) .header-wrapper { border-color: var(--mn-line); }
body:is(body,.dark-mode) #myPageView { background: var(--mn-surface); }
body:is(body,.dark-mode) .mypage-banner { background-color: var(--mn-selected); }
body:is(body,.dark-mode) .mypage-icon { background-color: var(--mn-soft); border-color: var(--mn-surface); }
body:is(body,.dark-mode) :is(.title,.work-modal-title,.section-title,.mypage-name,.mypage-chart-title) { color: var(--mn-ink); }
body:is(body,.dark-mode) :is(.btn-filter,.btn-settings,.btn-gray,.btn-outline) {
  background: var(--mn-surface) !important;
  color: var(--mn-accent) !important;
  border-color: var(--mn-line) !important;
  box-shadow: none !important;
}
body:is(body,.dark-mode) :is(.btn-blue,.btn-green,.btn-submit), body:is(body,.dark-mode) #view-planned .btn-blue, body:is(body,.dark-mode) .day-planned-section .btn-blue {
  background: var(--mn-accent) !important;
  color: var(--mc-on-primary) !important;
  border-color: var(--mn-accent) !important;
}
body:is(body,.dark-mode) .btn-red { background: var(--mn-surface); border-color: var(--mn-line); color: #bb4545; }
body:is(body,.dark-mode).dark-mode .btn-red { color: #f0a4a4; }
body:is(body,.dark-mode) .monthly-total { background: var(--mn-soft); color: var(--mn-accent); border-color: var(--mn-line); }
body:is(body,.dark-mode) :is(#chartCanvasContainer,#ratioCanvasContainer,#averageCardsContainer,#analysisContainer,#safeView,.work-modal-content,.mypage-chart-section,.mypage-chart-body:is(body,.dark-mode)) {
  background: var(--mn-surface) !important;
  color: var(--mn-ink);
  border-color: var(--mn-line) !important;
}
body:is(body,.dark-mode) :is(.average-card,.analysis-card,.backup-section,.planned-card,.list-box) {
  background: var(--mn-soft) !important;
  color: var(--mn-ink);
  border-color: var(--mn-line) !important;
}
body:is(body,.dark-mode) :is(.work-modal-header,.section-title,.list-item,.revenue-item,.vertical-input-row,.planned-allocation,.day-planned-section,.day-planned-row,.average-card-legend-row,.safe-table td,.safe-table th,.ratio-group-setting) { border-color: var(--mn-line); }
body:is(body,.dark-mode) :is(.average-card-label,.average-card-legend-name,.analysis-card-value,.planned-summary,.planned-create-form label,.day-planned-section,.filter-item,.filter-item.proj,.backup-section h5,.vertical-input-row label,.safe-label) { color: var(--mn-ink); }
body:is(body,.dark-mode) :is(.average-card-amount,.planned-amounts strong,.safe-total-unused) { color: var(--mn-accent); }
body:is(body,.dark-mode) :is(.analysis-card-title,.average-card-empty,.planned-empty,.planned-help,.ratio-settings-summary,.ratio-settings-help,.mypage-chart-subtext,.backup-section p,.cloud-sync-meta,.close-btn) { color: var(--mn-muted); }
body:is(body,.dark-mode) :is(select,input[type="text"],input[type="password"],input[type="number"],input[type="date"],input[type="month"],textarea), body:is(body,.dark-mode) .ratio-group-setting select {
  background: var(--mn-surface) !important;
  color: var(--mn-ink) !important;
  border-color: var(--mn-line) !important;
}
body:is(body,.dark-mode) :is(#trendsDateLabel,#ratioDateLabel) { color: var(--mn-ink) !important; border-color: var(--mn-line) !important; background: var(--mn-soft) !important; }
body:is(body,.dark-mode) :is(#ratioTableContainer,.mypage-ratio-table) table { color: var(--mn-ink) !important; }
body:is(body,.dark-mode) :is(#ratioTableContainer,.mypage-ratio-table) :is(tr,th,td) { border-color: var(--mn-line) !important; }
body:is(body,.dark-mode) :is(#ratioTableContainer,.mypage-ratio-table) thead tr, body:is(body,.dark-mode) .safe-table th { color: var(--mn-muted) !important; background: var(--mn-soft); }
body:is(body,.dark-mode) .filter-item.group { border-color: var(--mn-line); }
body:is(body,.dark-mode) .filter-cb:checked + .icon::before { color: var(--mn-accent); }
body:is(body,.dark-mode) .ratio-mode-options label { border-color: var(--mn-line); }
body:is(body,.dark-mode) .ratio-mode-options label:has(input:checked) { color: var(--mn-accent); background: var(--mn-selected); border-color: var(--mn-accent); }
body:is(body,.dark-mode) .ratio-settings-toggle input:checked, body:is(body,.dark-mode) input:checked + .toggle-slider { background: var(--mn-accent); }
body:is(body,.dark-mode) .toggle-slider { background: var(--mn-line); }
body:is(body,.dark-mode) .header-progress-bar { background: var(--mn-soft); }
body:is(body,.dark-mode) .header-progress-fill { background: #4d8660; }
body:is(body,.dark-mode) .header-progress-text { color: var(--mn-muted); }
body:is(body,.dark-mode) :is(button,a,input,select,textarea):focus-visible { outline: 2px solid #7da887; outline-offset: 3px; }
body:is(body,.dark-mode) ::-webkit-scrollbar-track { background: var(--mn-surface); }
body:is(body,.dark-mode) ::-webkit-scrollbar-thumb { background: var(--mn-line); }
@media (hover:hover) and (pointer:fine) {
  body:is(body,.dark-mode) :is(.btn-filter,.btn-settings,.btn-gray,.btn-outline,.toggle-eye-btn):hover { background: var(--mn-soft) !important; border-color: var(--mn-accent) !important; }
  body:is(body,.dark-mode) :is(.btn-blue,.btn-green,.btn-submit):hover { filter: brightness(.93); }
  body:is(body,.dark-mode) :is(.list-item,.safe-table tbody tr,.average-card):hover { background: var(--mn-soft) !important; border-color: var(--mn-accent) !important; box-shadow: none !important; }
}
@media(max-width:768px) { body:is(body,.dark-mode) .monthly-total { background: transparent; } }
@media(max-width:768px) {
  body:is(body,.dark-mode) #ratioTotalDisplay {
    background: var(--mn-soft);
    border: 1px solid var(--mn-line);
    padding: 8px 12px;
    min-height: 40px;
    height: auto;
    width: 100%;
    justify-content: center;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}