/* MLO 3.4.1: responsive task tools and theme-safe controls.
   Map 3.4 surface tokens to MLO's canonical theme tokens. These aliases
   intentionally stay dynamic so light/dark and all palettes still work. */
:root {
  --surface: var(--panel);
  --surface-2: var(--panel2);
  --line: var(--border);
  --text-muted: var(--muted);
}

.mlo-enhanced-tasks .mlo-task-workspace {padding:clamp(15px,2vw,25px)}
.mlo-task-filters {display:grid;grid-template-columns:minmax(150px,1.4fr) repeat(4,minmax(115px,1fr)) auto auto;align-items:end;gap:11px;margin-bottom:20px}
.mlo-task-filters label {font-size:12px;color:var(--text-muted,var(--muted,#777));font-weight:650;display:flex;flex-direction:column;gap:6px;min-width:0}
.mlo-task-filters input,.mlo-task-filters select,.mlo-bulkbar select {width:100%;height:39px;min-width:0;padding:0 11px;border-radius:11px;border:1px solid var(--line,#dedee4);background:var(--surface,#fff);color:var(--text,#222);font:inherit;font-size:13px}
.mlo-task-filters .mlo-btn {height:39px;white-space:nowrap}
.mlo-task-filters .mlo-text-link {padding-bottom:9px;white-space:nowrap}
.mlo-bulkbar {display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface-2,rgba(125,130,145,.055));padding:9px 13px;margin-bottom:12px;border-radius:13px}
.mlo-bulk-select {display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer;white-space:nowrap}
.mlo-bulkbar select {min-width:160px;max-width:225px}
.mlo-bulkbar .mlo-btn:disabled {opacity:.45;cursor:not-allowed}
.mlo-bulk-checkbox {display:flex;align-items:center;justify-content:center;flex:0 0 27px;cursor:pointer}
.mlo-bulk-checkbox input,.mlo-bulk-select input {accent-color:var(--accent,#627bd1);width:16px;height:16px;cursor:pointer}
.mlo-bulk-task {display:flex;gap:8px;align-items:stretch;border-bottom:1px solid var(--line,#eee)}
.mlo-bulk-task:last-child {border-bottom:0}
.mlo-bulk-content {flex:1;min-width:0}
.mlo-bulk-content .mlo-task {border-bottom:0!important}
.mlo-pagination {display:flex;align-items:center;justify-content:flex-end;gap:13px;margin:19px 0 0;font-size:13px;color:var(--text-muted,#777)}
.mlo-task-expanded {margin-top:18px}.mlo-task-expanded>summary {cursor:pointer;font-weight:700;list-style:none}.mlo-task-expanded>summary::before {content:'＋';margin-right:9px}.mlo-extra-task-form {padding-top:15px}
.mlo-insight-kpis {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.mlo-insight-kpis>.mlo-surface {display:flex;flex-direction:column;gap:7px;padding:20px!important}
.mlo-insight-kpis span {font-size:13px;color:var(--text-muted,#777)}
.mlo-insight-kpis strong {font-size:clamp(23px,3vw,34px);font-weight:750;line-height:1.15;color:var(--text,#222)}
.mlo-insight-kpis small {font-size:12px;color:var(--text-muted,#777)}
.mlo-bar-chart {height:210px;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));align-items:end;gap:5px;margin-top:21px;min-width:0}
.mlo-bar-column {min-width:0;height:100%;display:flex;flex-direction:column;align-items:stretch;gap:9px;justify-content:flex-end}
.mlo-bar-track {height:170px;display:flex;align-items:flex-end;background:var(--surface-2,rgba(120,120,150,.07));border-radius:9px 9px 4px 4px;overflow:hidden}
.mlo-bar-fill {width:100%;min-height:0;background:var(--accent,#6689d5);border-radius:8px 8px 4px 4px;transition:height .16s ease}
.mlo-bar-chart-focus .mlo-bar-fill {background:var(--accent,#6689d5);opacity:.62}
.mlo-bar-column small {font-size:9px;color:var(--text-muted,#777);text-align:center;white-space:nowrap;overflow:hidden}
.mlo-progress-project {display:block;padding:13px 3px;border-bottom:1px solid var(--line,#eee);text-decoration:none;color:inherit}
.mlo-progress-project>div:first-child {display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.mlo-progress-project small {color:var(--text-muted,#777)}
.mlo-progress-track {height:7px;border-radius:12px;background:var(--surface-2,rgba(120,120,150,.13));margin-top:10px;overflow:hidden}
.mlo-progress-track span {height:100%;display:block;border-radius:12px;background:var(--accent,#6689d5)}
.mlo-capture-backdrop[hidden] {display:none!important}
.mlo-capture-backdrop {position:fixed;inset:0;z-index:1500;background:rgba(15,20,35,.48);display:flex;justify-content:center;align-items:flex-start;padding:clamp(50px,13vh,140px) 15px 20px;overflow:auto;backdrop-filter:blur(4px)}
.mlo-capture-dialog {width:min(100%,510px);border-radius:19px;padding:23px;background:var(--surface,#fff);color:var(--text,#20202a);box-shadow:0 28px 85px rgba(15,20,40,.25)}
.mlo-dialog-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.mlo-dialog-header h2 {font-size:21px;margin:0}.mlo-dialog-header button {border:0;background:transparent;color:inherit;font-size:28px;cursor:pointer;padding:0 8px}
.mlo-capture-field {display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:650;margin-bottom:16px}
.mlo-capture-field input,.mlo-capture-field select {border:1px solid var(--line,#ddd);border-radius:11px;background:var(--surface,#fff);color:var(--text,#222);padding:12px;font:inherit;font-size:15px;width:100%;max-width:100%}
.mlo-capture-field input:focus-visible,.mlo-task-filters :focus-visible {outline:2px solid var(--accent,#637ed6);outline-offset:2px}
.mlo-dialog-footer {display:flex;align-items:center;justify-content:space-between;gap:10px}.mlo-dialog-footer a {color:var(--text-muted,#777);font-size:13px}
.mlo-modal-open {overflow:hidden}
.mlo-sr-only {position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#mlo-notification-toast {position:fixed;z-index:1600;right:24px;bottom:25px;max-width:min(360px,calc(100vw - 36px));padding:13px 17px;border-radius:13px;color:#fff;background:#252c3a;box-shadow:0 12px 38px rgba(20,22,40,.24);transform:translateY(20px);opacity:0;pointer-events:none;transition:transform .16s ease,opacity .16s ease;font-size:14px}
#mlo-notification-toast.mlo-toast-show {transform:translateY(0);opacity:1}#mlo-notification-toast.mlo-toast-error {background:#a82c42}
@media(max-width:1150px){.mlo-task-filters {grid-template-columns:repeat(3,minmax(0,1fr))}.mlo-task-filters .mlo-filter-search {grid-column:span 2}}
@media(max-width:760px){.mlo-task-filters {grid-template-columns:repeat(2,minmax(0,1fr))}.mlo-task-filters .mlo-filter-search{grid-column:1/-1}.mlo-insight-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.mlo-bar-column small {font-size:8px}.mlo-bar-track{height:140px}.mlo-bar-chart{height:180px;gap:3px}.mlo-bulkbar{gap:8px}.mlo-bulk-checkbox {flex-basis:23px}}
@media(max-width:410px){.mlo-task-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.mlo-insight-kpis>.mlo-surface{padding:13px!important}.mlo-insight-kpis strong{font-size:23px}.mlo-bar-column small{font-size:7px}}
@media(prefers-reduced-motion:reduce){.mlo-bar-fill,#mlo-notification-toast{transition:none!important}}

.mlo-saved-filters {border:1px solid var(--line,#dedee4);border-radius:14px;background:var(--surface,#fff);padding:12px 15px}
.mlo-saved-filters>summary {cursor:pointer;font-size:13px;font-weight:700;list-style:none}.mlo-saved-filters>summary::before{content:'▹';margin-right:7px}.mlo-saved-filters[open]>summary::before{content:'▿'}
.mlo-saved-filter-list{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:13px}
.mlo-saved-filter{display:flex;align-items:center;border:1px solid var(--line,#ddd);background:var(--surface-2,rgba(120,125,150,.06));border-radius:10px}
.mlo-saved-filter a{padding:7px 9px;color:inherit;text-decoration:none;font-size:13px}.mlo-saved-filter button{background:transparent;border:0;color:inherit;font-size:18px;cursor:pointer;padding:5px 9px}
.mlo-save-filter-form{display:flex;gap:7px;align-items:center;max-width:100%;flex-wrap:wrap}.mlo-save-filter-form input{min-width:100px;max-width:200px;flex:1 1 100px;min-height:36px;border:1px solid var(--line,#ddd);border-radius:10px;padding:8px 10px;background:var(--surface,#fff);color:var(--text,#222)}

/* Contrast and native form-control consistency: all palettes / light / dark. */
.mlo-enhanced-tasks .mlo-saved-filters {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}
.mlo-enhanced-tasks .mlo-saved-filters > summary {
  color: var(--text);
}
.mlo-enhanced-tasks .mlo-saved-filters > summary:hover {
  color: var(--accent);
}
.mlo-enhanced-tasks .mlo-saved-filter {
  background: var(--panel2);
  border-color: var(--border);
  color: var(--text);
}
.mlo-enhanced-tasks .mlo-task-filters :is(input, select),
.mlo-enhanced-tasks .mlo-bulkbar select,
.mlo-enhanced-tasks .mlo-save-filter-form input,
.mlo-capture-dialog .mlo-capture-field :is(input,select) {
  background-color: var(--panel);
  color: var(--text);
  border-color: var(--border-strong, var(--border));
}
.mlo-enhanced-tasks .mlo-task-filters :is(input,select)::placeholder,
.mlo-enhanced-tasks .mlo-save-filter-form input::placeholder,
.mlo-capture-dialog .mlo-capture-field input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.mlo-enhanced-tasks :is(select, input) option,
.mlo-capture-dialog select option {
  background-color: var(--panel);
  color: var(--text);
}
.mlo-enhanced-tasks .mlo-bulkbar {
  background: var(--panel2);
  color: var(--text);
}
.mlo-enhanced-tasks .mlo-bulkbar .mlo-bulk-select,
.mlo-enhanced-tasks .mlo-task-filters label,
.mlo-enhanced-tasks .mlo-pagination {
  color: var(--text);
}
.mlo-enhanced-tasks :is(.mlo-task-filters input,.mlo-task-filters select,.mlo-bulkbar select,.mlo-save-filter-form input):focus-visible,
.mlo-capture-dialog .mlo-capture-field :is(input,select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* Accent buttons need a dark label against the lighter accent palette in dark mode.
   Slightly deepen light-mode neutral/accent fills for normal-size white labels. */
html:not(.dark) .mlo-space .mlo-btn.mlo-primary {
  background-color: color-mix(in srgb, var(--accent) 95%, black) !important;
  border-color: color-mix(in srgb, var(--accent) 95%, black) !important;
  color: #fff !important;
}
html.dark .mlo-space .mlo-btn.mlo-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #111827 !important;
}
html.dark :is(.workspace-icon,.mlo-mini-timer button,.mlo-mini-days a.mlo-mini-today,.mlo-calendar-day.is-today strong) {
  color: #111827 !important;
}