/* Milestone 11 Admin month-board quick creation and inline editing */
.m11-new-item-button span {
    font-size: 10px;
    opacity: .85;
}

.m11-add-item-row td {
    height: 31px;
    padding: 0 8px !important;
    background: #fafbfc;
}

.m11-add-item-trigger {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: #8a949c;
    font: inherit;
    font-size: 9px;
    text-align: left;
    cursor: pointer;
}

.m11-add-item-trigger:hover {
    color: var(--dq-blue);
    background: #f2f5fa;
}

.m11-add-item-trigger span {
    font-size: 12px;
    line-height: 1;
}

.m11-board-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
}

.m11-board-empty h2,
.m11-board-empty p { margin: 0; }
.m11-board-empty h2 { font-size: 16px; }
.m11-board-empty p { max-width: 520px; color: var(--dq-muted); font-size: 10px; }

.m11-admin-board-dialog input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--dq-line-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--dq-text);
    font: inherit;
    font-size: 12px;
}

.m11-admin-board-dialog input:focus {
    outline: 2px solid rgba(43, 156, 141, .14);
    border-color: var(--dq-green);
}

.m11-group-toggle {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.m11-group-toggle:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.m11-group-toggle .m11-group-caret { transition: transform .12s ease; }
.m11-board-group.is-collapsed .m11-group-toggle .m11-group-caret { transform: rotate(-90deg); }
.m11-board-group.is-collapsed .m11-board-table-wrap { display: none; }

/* Keep the drag handle visually attached to the category label instead of
   distributing it across the full header width. */
#board .m11-group-header {
    justify-content: flex-start;
    gap: 4px;
}
#board .m11-group-actions { margin-left: auto; }

/* Category setup is a short management table inside an overflow card. The
   global sticky task-table header otherwise detaches from its rows while the
   page scrolls and visually clips the first category row. */
#category-setup .task-table th {
    position: static;
    top: auto;
    z-index: auto;
}

.m11-admin-cell-button {
    width: 100%;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.m11-admin-cell-button:hover {
    border-color: #c8ddd9;
    background: #f5faf9;
}
.m11-admin-cell-button .m11-person { width: 100%; }
.m11-admin-cell-button .m11-assessment-cell,
.m11-admin-cell-button .m11-priority-cell { width: 100%; }
.m11-admin-cell-button::after {
    content: "⌄";
    margin-left: auto;
    color: #879198;
    font-size: 8px;
}
.m11-admin-priority-button { padding: 2px; }
.m11-admin-priority-button .m11-priority-cell { min-height: 26px; display: grid; place-items: center; }

.m11-cell-popover {
    position: fixed;
    z-index: 90;
    width: min(310px, calc(100vw - 20px));
    padding: 11px;
    border: 1px solid var(--dq-line-strong);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(11, 10, 11, .18);
}
.m11-cell-popover[hidden] { display: none; }
.m11-cell-popover form { display: grid; gap: 8px; }
.m11-cell-popover-title { margin: 0; color: #28343b; font-size: 10px; font-weight: 800; }
.m11-cell-popover label { color: #56636b; font-size: 8px; font-weight: 800; }
.m11-cell-popover select,
.m11-cell-popover textarea {
    width: 100%;
    border: 1px solid var(--dq-line-strong);
    border-radius: 5px;
    background: #fff;
    color: var(--dq-text);
    font: inherit;
    font-size: 10px;
}
.m11-cell-popover select { min-height: 34px; padding: 5px 7px; }
.m11-cell-popover textarea { min-height: 76px; resize: vertical; padding: 7px; }
.m11-cell-popover select:focus,
.m11-cell-popover textarea:focus {
    outline: 2px solid rgba(43,156,141,.14);
    border-color: var(--dq-green);
}
.m11-cell-popover-actions { display: flex; justify-content: flex-end; gap: 6px; }
.m11-cell-popover .primary-button,
.m11-cell-popover .secondary-button { min-height: 28px; padding: 4px 8px; font-size: 9px; }

/* Assignment-access confirmation: the whole option is a clear, keyboard-
   accessible target instead of a small native radio buried in long copy. */
.m11-assignment-access-warning {
    display: grid;
    gap: 10px;
    margin: 2px 0 4px;
    padding: 12px;
    border: 1px solid #efc4c4;
    border-radius: 9px;
    background: #fffafa;
}
.m11-assignment-access-warning[hidden] { display: none; }
.m11-assignment-access-heading { display: grid; gap: 5px; }
.m11-assignment-access-heading > strong {
    color: #8f2424;
    font-size: 11px;
    font-weight: 900;
}
.m11-assignment-access-heading p {
    margin: 0;
    color: #783232;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.45;
}
.m11-access-choice-group {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.m11-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.m11-cell-popover label.m11-access-choice {
    position: relative;
    display: block;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
}
.m11-access-choice > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.m11-access-choice-card {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 10px;
    border: 1px solid #d5dce2;
    border-radius: 8px;
    background: #fff;
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.m11-access-choice:hover .m11-access-choice-card {
    border-color: #9fb8cf;
    background: #f8fbff;
}
.m11-access-choice-radio {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border: 2px solid #9ca8b1;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 3px #fff;
    transition: border-color .14s ease, background .14s ease;
}
.m11-access-choice-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.m11-access-choice-copy strong {
    color: #26343d;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
}
.m11-access-choice-copy small {
    color: #66737c;
    font-size: 8px;
    font-weight: 650;
    line-height: 1.45;
}
.m11-access-choice > input:checked + .m11-access-choice-card {
    border-color: #2454a6;
    background: #f2f6ff;
    box-shadow: 0 0 0 2px rgba(36, 84, 166, .12);
}
.m11-access-choice > input:checked + .m11-access-choice-card .m11-access-choice-radio {
    border-color: #2454a6;
    background: #2454a6;
}
.m11-access-choice > input:checked + .m11-access-choice-card .m11-access-choice-copy strong {
    color: #163f84;
}
.m11-access-choice > input:focus-visible + .m11-access-choice-card {
    outline: 3px solid rgba(36, 84, 166, .22);
    outline-offset: 2px;
}
.m11-cell-popover .primary-button:disabled {
    cursor: not-allowed;
    opacity: .52;
    box-shadow: none;
}

.m11-category-drag-handle {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 18px;
    min-height: 24px;
    margin-right: 0;
    border-radius: 4px;
    color: #87939a;
    font-size: 10px;
    cursor: grab;
    user-select: none;
}
.m11-category-drag-handle:hover { background: rgba(43,156,141,.08); color: var(--dq-green-dark); }
.m11-category-drag-handle:active,
.m11-row-handle.is-draggable:active { cursor: grabbing; }
.m11-row-handle.is-draggable { cursor: grab; color: #77858d; }
.m11-board-group.is-dragging,
.m11-board-table tr.is-dragging { opacity: .42; }
.m11-board-group[draggable="true"] { transition: transform .1s ease, opacity .1s ease; }
.m11-board-table tr[draggable="true"] { transition: opacity .1s ease; }

.m11-order-notice {
    position: fixed;
    z-index: 120;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    max-width: min(420px, calc(100vw - 24px));
    padding: 8px 12px;
    border: 1px solid #b9ddd7;
    border-radius: 7px;
    background: #eff9f7;
    color: #1e675d;
    box-shadow: 0 10px 30px rgba(11,10,11,.12);
    font-size: 9px;
    font-weight: 800;
    text-align: center;
}
.m11-order-notice[hidden] { display: none; }
.m11-order-notice.is-error { border-color: #efc4c4; background: #fff5f5; color: #914040; }

@media (max-width: 760px) {
    .m11-cell-popover { width: min(290px, calc(100vw - 16px)); }
    .m11-assignment-access-warning { padding: 10px; }
    .m11-access-choice-card { padding: 9px; }
}


/* Browser-UAT refinement: assignment choices must stay usable on short laptop
   viewports. Keep the popover inside the viewport and scroll its content rather
   than letting the page scroll detach the controls from the active assignment. */
#m11-admin-assignee-popover {
    width: min(390px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
#m11-admin-assignee-popover .m11-cell-popover-actions {
    position: sticky;
    bottom: -11px;
    z-index: 2;
    margin: 2px -11px -11px;
    padding: 10px 11px 11px;
    border-top: 1px solid var(--dq-line);
    background: #fff;
}