/* Form groups must shrink inside the workspace, including native iOS date/time controls. */
.table-scroll {position:relative;max-width:100%;}
.settings-dialog-header {position:sticky;top:0;z-index:5;background:var(--solid);}
.notifications-settings,
.notifications-settings .work-form,
.notification-connection-card,
.task-reminder,
.reminder-settings,
.reminder-form,
.notification-fieldset,
.notification-fieldset > *,
.quiet-hours > *,
.notification-preferences .form-field,
.reminder-form .form-field {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.work-form input[type="date"],
.work-form input[type="time"],
.work-form input[type="datetime-local"],
.support-form input[type="date"],
.support-form input[type="time"],
.support-form input[type="datetime-local"] {
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    box-sizing: border-box;
    text-align: start;
}

.work-form input:is([type="date"], [type="time"], [type="datetime-local"])::-webkit-date-and-time-value {
    min-height: 1.4em;
    text-align: start;
}

.work-form input:is([type="date"], [type="time"], [type="datetime-local"])::-webkit-datetime-edit {
    padding: 0;
    min-width: 0;
}

.notifications-settings .notification-preferences {
    display: grid;
    gap: 20px;
    width: 100%;
    max-width: 760px;
    margin-top: 16px;
}

.notification-preferences > .field-hint {
    margin: 0;
    line-height: 1.6;
}

.notification-channel-choices {
    display: grid;
    gap: 2px;
}

.notifications-settings .notification-events {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 18px;
}

.notifications-settings .notification-channel-choices label.checkbox,
.notifications-settings .notification-events label.checkbox,
.reminder-settings .reminder-channel-choices label.checkbox {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.notification-channel-choices .checkbox input[type="checkbox"],
.notification-events .checkbox input[type="checkbox"],
.reminder-channel-choices .checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 1px 0 0;
    padding: 0;
}

.notification-channel-choices .checkbox > span,
.notification-events .checkbox > span,
.reminder-channel-choices .checkbox > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.notifications-settings .notification-fieldset,
.reminder-settings .notification-fieldset {
    margin: 0;
    padding: 12px 14px;
}

.notification-fieldset > legend {
    max-width: 100%;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: normal;
}

.notifications-settings .quiet-hours {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.notification-preferences .form-field,
.notification-connection-card .form-field,
.reminder-form .form-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.notifications-settings .form-field > label,
.reminder-form .form-field > label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.notifications-settings .form-field > input,
.notifications-settings .form-field > select,
.reminder-form .form-field > input,
.reminder-form .form-field > select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

.notification-form-actions {
    display: flex;
    justify-content: flex-start;
}

.notification-connections {
    gap: 24px;
}

.notification-connection-card > h2 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 550;
    line-height: 1.4;
}

.notification-connection-card > .field-hint {
    margin-top: 0;
    line-height: 1.6;
}

.notification-connection-card > form,
.notification-connection-card > .form-field,
.notification-connection-card > [data-enable-push] {
    margin-top: 14px;
}

.notification-connection-card .button {
    max-width: 100%;
    white-space: normal;
    line-height: 1.45;
}

.notification-connection-card .collaboration-list > li {
    overflow-wrap: anywhere;
}

.task-reminder .task-personal-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
}

.task-reminder .reminder-panel,
.task-reminder .task-personal-tools > form {
    width: 100%;
    min-width: 0;
}

.task-reminder .reminder-panel > summary,
.task-reminder .task-personal-tools > form > .button {
    display: flex;
    width: 100%;
    white-space: normal;
    line-height: 1.45;
}

.reminder-settings .reminder-form {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.reminder-presets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
}

.reminder-presets .button {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-inline: 10px;
    white-space: normal;
    line-height: 1.4;
}

.reminder-settings .reminder-form > .button {
    width: 100%;
    margin-top: 0;
    white-space: normal;
}

.reminder-settings > form[data-panel-form] {
    margin-top: 14px;
}

.reminder-settings > .field-hint {
    overflow-wrap: anywhere;
}

.notifications-list > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.notifications-list h2 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 550;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.notifications-list p {
    margin-block: 6px;
}

.notifications-list time {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    /* A 16px font avoids iOS focusing by zooming into otherwise compact fields. */
    .work-main .work-form input:is([type="date"], [type="time"], [type="datetime-local"]),
    .work-main .task-main .work-form input:is([type="date"], [type="time"], [type="datetime-local"]),
    .notifications-settings input:not([type="checkbox"]),
    .notifications-settings select,
    .reminder-form select {
        font-size: 16px;
        min-height: 46px;
    }
    .work-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .work-form select, .work-form textarea,
    .admin-filter input, .admin-filter select,
    .work-main .access-row select, .admin-table .inline-form select {
        font-size: 16px;
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .person-access .access-row, .team-settings .access-row,
    .settings-dialog-body .access-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .person-access .access-row select, .team-settings .access-row select,
    .settings-dialog-body .access-row select,
    .settings-dialog-body .access-options {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    .access-row .button {
        grid-column: auto;
        width: 100%;
    }
    .admin-filter {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .admin-filter input, .admin-filter select {width: 100%;}
    .profile-identity > div {flex: 1; min-width: 0; overflow-wrap: anywhere;}
    .profile-identity > .avatar {flex-shrink: 0;}
    .work-heading > div:first-child {min-width: 0;}
    .work-heading p, .work-heading .eyebrow, .admin-events {overflow-wrap: anywhere;}
    .notifications-settings {
        padding: 17px 16px;
    }

    .notifications-settings .notification-preferences {
        gap: 18px;
    }

    .notifications-settings .quiet-hours,
    .notifications-settings .notification-events,
    .notification-connections {
        grid-template-columns: minmax(0, 1fr);
    }

    .notification-connections {
        gap: 24px;
    }

    .notification-connection-card + .notification-connection-card {
        border-top: 1px solid var(--divider);
        padding-top: 22px;
    }

    .notification-form-actions > .button,
    .notification-connection-card > form > .button,
    .notification-connection-card > [data-enable-push],
    .notifications-list > li > form > .button {
        width: 100%;
    }

    .notifications-list > li {
        grid-template-columns: minmax(0, 1fr);
        padding: 17px 16px;
    }

    .notifications-list .empty-state {
        display: block;
    }
}

@media (max-width: 440px) {
    .admin-summary {grid-template-columns: minmax(0, 1fr);}
    .admin-stat {min-width: 0; overflow-wrap: anywhere;}
    a.admin-stat {display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px;}
    .admin-stat span {min-width: 0; overflow-wrap: anywhere;}
    .admin-stat strong {flex-shrink: 0;}
}