/* Task forms and entry grid: strictly namespaced presentation overrides. */
.task-form-body{display:block;min-block-size:0;overflow:auto;padding:16px 20px 20px;background:#f6f8fa}
.task-form-title,.task-report-title{min-width:0;overflow-wrap:anywhere}
.task-form-card{scroll-margin-block:12px}
.task-core-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,250px);gap:16px;align-items:start}
.task-core-fields{min-width:0}.task-core-grid .field.full{grid-column:1/-1}
.task-form-summary{border:1px solid var(--line,var(--bd));border-radius:10px;background:var(--primary-soft,#eef5fc);padding:12px}
.task-form-summary h3{margin:0 0 8px;font-size:13px;color:var(--ink,var(--brand))}
.task-form-summary>div{display:grid;gap:8px}.task-form-summary>div>div{display:grid;gap:2px}
.task-form-summary strong{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3,#667)}
.task-form-summary span{font-size:13px;overflow-wrap:anywhere;color:var(--ink,#17232f)}
.task-form-footer,.task-report-footer,.task-deadline-footer{position:relative;z-index:1;flex:none;background:#fff}
.task-grid-wrap{max-inline-size:100%;overscroll-behavior-inline:contain}.task-grid{min-inline-size:1020px}.task-grid-actions{white-space:nowrap}
.task-report-body{display:block;min-block-size:0;max-block-size:min(74vh,calc(100dvh - 132px));overflow:auto;padding:14px 18px;background:#f6f8fa}
.task-report-context{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px;border:1px solid var(--line,var(--bd));border-radius:10px;background:#fff}
.task-report-context span{font-size:13px;font-weight:600;color:var(--ink,#17232f)}.task-report-context span+span{padding-inline-start:10px;border-inline-start:1px solid var(--line,var(--bd))}
.task-report-section-title{margin:0 0 6px;color:var(--red);font-weight:700}.task-report-card{padding:12px;border:1px solid var(--line,var(--bd));border-radius:10px;background:#fff}.task-report-branch{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line,var(--bd))}
.task-report-history{margin:0 0 14px;border:1px solid var(--line,var(--bd));border-radius:10px;background:#fafffb}.task-report-history>summary{cursor:pointer;padding:10px 12px;font-weight:700;color:var(--ink,#17232f)}.task-report-history-list{padding:0 12px 12px}.task-report-history[open]>summary{border-bottom:1px solid var(--line,var(--bd));margin-bottom:10px}
.task-deadline-title{min-width:0;overflow-wrap:anywhere}.task-deadline-body{display:block;min-block-size:0;overflow:auto}.task-deadline-context{margin-bottom:12px;padding:10px 12px;border:1px solid var(--line,var(--bd));border-radius:10px;background:var(--primary-soft,#eef5fc)}
dialog.win .task-report-body{flex:1 1 auto;max-block-size:none;min-height:0;overflow:auto}dialog.win .task-report-footer{flex:none}dialog.win .task-deadline-body{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
@media (max-width:700px){.task-core-layout{grid-template-columns:1fr}.task-form-summary{order:-1}.task-report-context{display:grid;grid-template-columns:1fr}.task-report-context span+span{padding-inline-start:0;border-inline-start:0}.task-grid{min-inline-size:980px}.task-report-body{padding:12px;max-block-size:calc(100dvh - 118px)}}
/* Let the active dialog, rather than a guessed header height, size its body. */
dialog[open]:has(> .task-form-body),dialog[open]:has(> .task-report-body),dialog[open]:has(> .task-deadline-body){display:flex;flex-direction:column;overflow:hidden}
dialog:has(> .task-form-body)>.dlg-h,dialog:has(> .task-report-body)>.dlg-h,dialog:has(> .task-deadline-body)>.dlg-h{flex-shrink:0}
dialog>.task-form-body,dialog>.task-report-body,dialog>.task-deadline-body{flex:1 1 auto;min-height:0;max-height:none;max-block-size:none;overflow:auto}
.task-deadline-body>.field{margin-block-end:16px}
.nv-inline-pct{display:flex;align-items:center;gap:3px;flex-wrap:wrap}.nv-inline-state{display:block;inline-size:100%;font-size:11px;line-height:1.25;white-space:normal}.nv-inline-state.pending{color:#8a6200}.nv-inline-state.error{color:#b42318}.nv-inline[aria-busy="true"]{opacity:.62}

/* UI-GV-01 lô 1: form sửa việc desktop; không chạm report/deadline dialog. */
@media (min-width: 820px) {
  body:not(.mb-app) dialog:has(> .task-form-body) > .task-form-title {
    background: var(--card);
    box-shadow: none;
    padding: 12px 16px;
    line-height: 1.4;
  }
  body:not(.mb-app) dialog > .task-form-body {
    padding: 16px;
    background: color-mix(in srgb, var(--card) 94%, var(--ink) 6%);
  }
  body:not(.mb-app) dialog > .task-form-body .task-form-card {
    padding: 16px;
    margin-bottom: 12px;
    border-color: var(--line);
    border-radius: 12px;
    background: var(--card);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 7%, transparent);
  }
  body:not(.mb-app) dialog > .task-form-body .hdcard-h,
  body:not(.mb-app) dialog > .task-form-body .task-form-card > summary {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.4;
  }
  body:not(.mb-app) dialog > .task-form-body .hdsub,
  body:not(.mb-app) dialog > .task-form-body .task-form-summary strong {
    color: var(--ink-2);
  }
  body:not(.mb-app) dialog > .task-form-body #f_dlmoc_disp > span {
    color: var(--ink-2) !important;
  }
  body:not(.mb-app) dialog > .task-form-body .info-i {
    width: 44px;
    height: 44px;
    vertical-align: middle;
    border: 0;
    background: radial-gradient(circle 9px at center, var(--primary-soft) 98%, transparent 100%);
    color: var(--primary);
  }
  body:not(.mb-app) dialog > .task-form-body .info-i:hover {
    background: var(--primary-soft);
    color: var(--primary);
  }
  body:not(.mb-app) dialog > .task-form-body .info-i:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  body:not(.mb-app) dialog > .task-form-body .field label {
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 4px;
  }
  body:not(.mb-app) dialog > .task-form-body .field input:not([type=checkbox]):not([type=radio]),
  body:not(.mb-app) dialog > .task-form-body .field select,
  body:not(.mb-app) dialog > .task-form-body .field textarea {
    font-size: 14px;
    line-height: 1.4;
  }
  body:not(.mb-app) dialog > .task-form-body .task-core-layout,
  body:not(.mb-app) dialog > .task-form-body .task-core-grid {
    gap: 12px 16px;
  }
  body:not(.mb-app) dialog > .task-form-body .task-form-summary {
    padding: 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary-soft) 35%, var(--card));
  }
  body:not(.mb-app) dialog > .task-form-body .task-form-summary h3,
  body:not(.mb-app) dialog > .task-form-body .task-form-summary span {
    font-size: 14px;
    line-height: 1.4;
  }
  body:not(.mb-app) dialog > .task-form-body .task-form-summary strong {
    font-size: 12px;
    line-height: 1.4;
  }
  body:not(.mb-app) dialog:has(> .task-form-body) > .task-form-footer {
    padding: 12px 16px;
    background: var(--card);
  }
  body:not(.mb-app) dialog:has(> .task-form-body) > .task-form-footer button {
    min-height: 44px;
  }
  body:not(.mb-app) dialog:has(> .task-form-body) > .task-form-footer button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}